Separating controller from the Vue component to build archtectural boundrgy between your code and Vue.

controller.ts

import AppTypes from "@app/app_types"
import DataTypes from "@gateways/gateway_data_types"
import UiTypes from "@ui/ui_types"



class Controller {
  public customers: DataTypes.Customer[]

  public payment_methods: UiTypes.PaymentMethod[]

  public selected_customer: DataTypes.Customer | undefined

  public selected_payment_method: DataTypes.PaymentMethod | undefined

  public show_payment_methods_selector: boolean


  constructor(private store: AppTypes.DataStoreInterface) {
    this.customers = this.store.customers_array
    this.payment_methods = []
    this.selected_customer = undefined
    this.selected_payment_method = undefined
    this.show_payment_methods_selector = false
  }


  handleCustomerSelection(id : string) {
    // handle customer selection
  }


  handlePaymentMethodSelection(id : string) {
    // handle payment method selection
  }


  hasCustomers() {
    return this.customers.length > 0
  }


  selectedCustomerDefaultPaymentId() {
    if (this.selected_customer)
      return this.selected_customer.default_payment_method_id ?? 'hint'
    else
      return 'hint'
  }
}



export default function makeController(deps: {
  store: AppTypes.DataStoreInterface,
}) {
  const { store } = deps

  return new Controller(store)
}