refactor: quotation

src/pages/05_quotation/MainPage.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
 import { pageTabs, fieldSelectedOption } from './constants';
+import { useQuotationForm } from './form';
+
 import { onMounted, reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
@@ -35,6 +37,7 @@ import ItemCard from 'src/components/ItemCard.vue';
 import DialogForm from 'components/DialogForm.vue';
 import { AddButton } from 'src/components/button';
 import SideMenu from 'components/SideMenu.vue';
+import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
 
 import {
   uploadFileListEmployee,
@@ -71,17 +74,7 @@ import {
 import QuotationView from './QuotationView.vue';
 import { watch } from 'vue';
 
-type Node = {
-  [key: string]: any;
-  opened?: boolean;
-  checked?: boolean;
-  bg?: string;
-  fg?: string;
-  icon?: string;
-  displayDropIcon?: boolean;
-  children?: Node[];
-};
-
+const quotationForm = useQuotationForm();
 const customerFormStore = useCustomerForm();
 const employeeFormStore = useEmployeeForm();
 const employeeStore = useEmployeeStore();
@@ -90,12 +83,14 @@ const flowStore = useFlowStore();
 const userBranch = useMyBranch();
 const ocrStore = useOcrStore();
 
+const { currentFormData: quotationFormData } = storeToRefs(quotationForm);
 const { state: customerFormState, currentFormData: customerFormData } =
   storeToRefs(customerFormStore);
 const { state: employeeFormState, currentFromDataEmployee } =
   storeToRefs(employeeFormStore);
 const { currentMyBranch } = storeToRefs(userBranch);
 
+const branchId = ref('');
 const currentCustomerId = ref<string | undefined>();
 const refreshImageState = ref(false);
 const emptyCreateDialog = ref(false);
@@ -360,7 +355,10 @@ function triggerAddQuotationDialog() {
 }
 
 function triggerQuotationDialog() {
-  window.open('/quotation/add-quotation', '_blank');
+  window.open(
+    `/quotation/add-quotation?branchId=${branchId.value}&customerBranchId=${quotationFormData.value.customerBranchId}&date=${Date.now()}`,
+    '_blank',
+  );
   // TODO: form and state controll
 }
 
@@ -484,7 +482,12 @@ watch(() => pageState.currentTab, fetchQuotationList);
 </script>
 
 <template>
-  {{ convertToTree() }}
+  <ButtonAddComponent
+    hide-icon
+    style="z-index: 999"
+    @click.stop="triggerAddQuotationDialog"
+  />
+
   <div class="column full-height no-wrap">
     <!-- SEC: stat -->
     <section class="text-body-2 q-mb-xs flex items-center">
@@ -721,7 +724,7 @@ watch(() => pageState.currentTab, fetchQuotationList);
         </nav>
         <!-- SEC: body content -->
         <article
-          v-if="false"
+          v-if="!quotationData || quotationData.length === 0"
           class="col surface-2 flex items-center justify-center"
         >
           <CreateButton
@@ -832,6 +835,13 @@ watch(() => pageState.currentTab, fetchQuotationList);
     submit-icon="mdi-check"
     height="auto"
     width="60vw"
+    :submit="() => triggerQuotationDialog()"
+    :close="
+      () => {
+        branchId = '';
+        quotationFormData.customerBranchId = '';
+      }
+    "
   >
     <header class="q-mx-lg q-mt-lg">
       <ProfileBanner
@@ -852,7 +862,8 @@ watch(() => pageState.currentTab, fetchQuotationList);
         style="height: 100%; max-height: 100%; overflow-y: auto"
       >
         <FormAbout
-          prefixId="zxc"
+          v-model:branch-id="branchId"
+          v-model:customer-branch-id="quotationFormData.customerBranchId"
           @add-customer="triggerSelectTypeCustomerd()"
         />
       </div>