jws-frontend/src/pages/03_customer-management/form.ts

import { ref } from 'vue';
import { defineStore } from 'pinia';
import { CustomerCreate } from 'src/stores/customer/types';
import useMyBranch from 'src/stores/my-branch';
import useCustomerStore from 'src/stores/customer';

export const useCustomerForm = defineStore('form-customer', () => {
  const customerStore = useCustomerStore();
  const branchStore = useMyBranch();

  let defaultFormData: CustomerCreate = {
    status: 'CREATED',
    personName: '',
    customerType: 'CORP',
    customerName: '',
    customerNameEN: '',
    taxNo: '',
    registeredBranchId: branchStore.currentMyBranch?.id || '',
    customerBranch: [
      // {
      //   code: '',
      //   branchNo: 1,
      //   address: '',
      //   addressEN: '',
      //   provinceId: '',
      //   districtId: '',
      //   subDistrictId: '',
      //   zipCode: '',
      //   email: '',
      //   telephoneNo: '',
      //   name: '',
      //   status: 'CREATED',
      //   taxNo: '',
      //   nameEN: '',
      //   legalPersonNo: '',
      //   registerName: '',
      //   registerDate: new Date(),
      //   authorizedCapital: '',
      //   employmentOffice: '',
      //   bussinessType: '',
      //   bussinessTypeEN: '',
      //   jobPosition: '',
      //   jobPositionEN: '',
      //   jobDescription: '',
      //   saleEmployee: '',
      //   payDate: new Date(),
      //   wageRate: 0,
      // },
    ],
    image: null,
  };
  let resetCustomerData = structuredClone(defaultFormData);

  const currentFormData = ref<CustomerCreate>(structuredClone(defaultFormData));
  const state = ref<{
    dialogType: 'info' | 'create' | 'edit';
    dialogOpen: boolean;
    dialogModal: boolean;
    branchIndex: number;
    customerType: 'CORP' | 'PERS';
    saveMode: 'customer' | 'branch';
    editId?: string;
  }>({
    dialogType: 'info',
    dialogOpen: false,
    dialogModal: false,
    branchIndex: 0,
    customerType: 'CORP',
    saveMode: 'customer',
    editId: '',
  });

  function isFormDataDifferent() {
    return (
      JSON.stringify(resetCustomerData) !==
      JSON.stringify(currentFormData.value)
    );
  }

  function resetFormData(cb?: (...args: any[]) => unknown) {
    currentFormData.value = structuredClone(resetCustomerData);
    cb?.();
  }

  async function assignFormData(id: string) {
    const data = await customerStore.fetchById(id);

    if (!data) return;

    resetCustomerData.registeredBranchId = data.registeredBranchId;
    resetCustomerData.status = data.status;
    resetCustomerData.customerType = data.customerType;
    resetCustomerData.customerName = data.customerName;
    resetCustomerData.customerNameEN = data.customerNameEN;
    resetCustomerData.personName = data.personName;
    resetCustomerData.taxNo = data.taxNo;
    resetCustomerData.image = null;
    resetCustomerData.customerBranch = data.branch.map((v) => ({
      id: v.id,
      code: v.code,
      branchNo: v.branchNo,
      address: v.address,
      addressEN: v.addressEN,
      provinceId: v.province.id,
      districtId: v.district.id,
      subDistrictId: v.subDistrict.id,
      zipCode: v.zipCode,
      email: v.email,
      telephoneNo: v.telephoneNo,
      name: v.name,
      status: undefined,
      taxNo: v.taxNo,
      nameEN: v.nameEN,
      legalPersonNo: v.legalPersonNo,
      registerName: v.registerName,
      registerDate: new Date(v.registerDate),
      authorizedCapital: v.authorizedCapital,
      employmentOffice: v.employmentOffice,
      bussinessType: v.bussinessType,
      bussinessTypeEN: v.bussinessTypeEN,
      jobPosition: v.jobPosition,
      jobPositionEN: v.jobPositionEN,
      jobDescription: v.jobDescription,
      saleEmployee: v.saleEmployee,
      payDate: new Date(v.payDate),
      wageRate: v.wageRate,
    }));

    currentFormData.value = structuredClone(resetCustomerData);
  }

  async function submitForm() {
    if (state.value.dialogType === 'edit' && !state.value.editId) {
      throw new Error('Form mode is set to edit but no ID is provided.');
    }
    if (state.value.dialogType === 'edit') {
      return submitEdit();
    }
    return submitCreate();
  }

  async function submitCreate() {
    customerStore.create(currentFormData.value);
  }

  async function submitEdit() {}

  return {
    state,
    currentFormData,
    isFormDataDifferent,
    resetFormData,
    assignFormData,
    submitForm,
  };
});

export const useEmployeeForm = defineStore('form-employee', () => {
  return {};
});

export const useCustomerBranchForm = defineStore(
  'form-customer-branch',
  () => {},
);