From 548f10feab00cdb562523f30d8c922202a481a5f Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Fri, 4 Oct 2024 14:51:31 +0700
Subject: [PATCH] refactor: clean code

---
 src/pages/05_quotation/QuotationForm.vue | 68 +++++++++++++-----------
 1 file changed, 36 insertions(+), 32 deletions(-)

diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index bcbcb6aa..b23f14f9 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -1,35 +1,42 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
-import { QSelect, useQuasar } from 'quasar';
+import { useQuasar } from 'quasar';
 import { nextTick, onMounted, reactive, ref } from 'vue';
 
-import { baseUrl } from 'src/stores/utils';
+// NOTE: Import stores
 import { setLocale, dateFormat, calculateAge } from 'src/utils/datetime';
-
+import useProductServiceStore from 'stores/product-service';
+import useCustomerStore from 'stores/customer';
+import useEmployeeStore from 'stores/employee';
 import useOptionStore from 'stores/options';
-import useEmployeeStore from 'src/stores/employee';
+import { baseUrl } from 'src/stores/utils';
 import { useQuotationForm } from './form';
+
+// NOTE  Import Types
+import { QuotationPayload } from 'src/stores/quotations/types';
 import { Employee } from 'src/stores/employee/types';
 import {
   ProductGroup,
   ProductList,
   Service,
 } from 'src/stores/product-service/types';
-import { QuotationPayload } from 'src/stores/quotations/types';
 
-import ProductServiceForm from './ProductServiceForm.vue';
+// NOTE: Import Components
+import ProductItem from 'components/05_quotation/ProductItem.vue';
 import WorkerItem from 'components/05_quotation/WorkerItem.vue';
-import QuotationFormInfo from './QuotationFormInfo.vue';
-import ToggleButton from 'src/components/button/ToggleButton.vue';
-import ProductItem from 'src/components/05_quotation/ProductItem.vue';
-import FormAbout from 'src/components/05_quotation/FormAbout.vue';
-import DialogForm from 'src/components/DialogForm.vue';
-import SelectZone from 'src/components/shared/SelectZone.vue';
-import PersonCard from 'src/components/shared/PersonCard.vue';
+import ToggleButton from 'components/button/ToggleButton.vue';
+import FormAbout from 'components/05_quotation/FormAbout.vue';
+import SelectZone from 'components/shared/SelectZone.vue';
+import PersonCard from 'components/shared/PersonCard.vue';
 import { AddButton, SaveButton } from 'components/button';
-import useProductServiceStore from 'src/stores/product-service';
-import useCustomerStore from 'src/stores/customer';
+import DialogForm from 'components/DialogForm.vue';
+import ProductServiceForm from './ProductServiceForm.vue';
+import QuotationFormInfo from './QuotationFormInfo.vue';
+
+defineProps<{
+  readonly?: boolean;
+}>();
 
 type Node = {
   [key: string]: any;
@@ -41,41 +48,41 @@ type Node = {
   children?: Node[];
 };
 
-defineProps<{
-  readonly?: boolean;
-}>();
+type ProductGroupId = string;
+type Id = string;
 
-const optionStore = useOptionStore();
-const customerStore = useCustomerStore();
 const productServiceStore = useProductServiceStore();
+const customerStore = useCustomerStore();
 const quotationForm = useQuotationForm();
 const employeeStore = useEmployeeStore();
+const optionStore = useOptionStore();
 const { locale } = useI18n();
-const { currentFormData: quotationFormData } = storeToRefs(quotationForm);
 const $q = useQuasar();
 
+const { currentFormData: quotationFormData } = storeToRefs(quotationForm);
+
 const refSelectZoneEmployee = ref<InstanceType<typeof SelectZone>>();
-const date = ref();
-const rows = ref<Node[]>([]);
 const selectedBranchIssuer = ref('');
 const selectedCustomer = ref('');
 const toggleWorker = ref(true);
+const rows = ref<Node[]>([]);
 const branchId = ref('');
+const date = ref();
 
-const selectedWorker = ref<Employee[]>([]);
 const preSelectedWorker = ref<Employee[]>([]);
+const selectedWorker = ref<Employee[]>([]);
 const workerList = ref<Employee[]>([]);
 
+const documentReceivePoint = ref('');
+const paySplitCount = ref(1);
 const quotationNo = ref('');
-const actor = ref('');
 const workName = ref('');
 const contactor = ref('');
 const telephone = ref('');
-const documentReceivePoint = ref('');
 const dueDate = ref('');
 const payType = ref('');
-const paySplitCount = ref(1);
 const payBank = ref('');
+const actor = ref('');
 
 const pageState = reactive({
   hideStat: false,
@@ -91,18 +98,15 @@ const pageState = reactive({
   productServiceModal: false,
 });
 
-type ProductGroupId = string;
-
-const productGroup = ref<ProductGroup[]>([]);
 const productList = ref<Partial<Record<ProductGroupId, ProductList[]>>>({});
 const serviceList = ref<Partial<Record<ProductGroupId, Service[]>>>({});
+const productGroup = ref<ProductGroup[]>([]);
 
-type Id = string;
 const product = ref<Record<Id, ProductList>>({});
 const service = ref<Record<Id, Service>>({});
 
-const selectedGroup = ref<ProductGroup | null>(null);
 const selectedGroupSub = ref<'product' | 'service' | null>(null);
+const selectedGroup = ref<ProductGroup | null>(null);
 const selectedProductServiceId = ref('');
 
 const productServiceList = ref<