From 42d4063e6970fa5b2072f53ae72491230fa39ecb Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Wed, 6 Nov 2024 17:39:02 +0700
Subject: [PATCH] refactor: add btn form

---
 src/pages/05_quotation/QuotationForm.vue | 194 +++++++++++++++--------
 1 file changed, 130 insertions(+), 64 deletions(-)

diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index a706e246..14b93fcf 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -42,6 +42,7 @@ import {
 } from 'src/stores/product-service/types';
 
 // NOTE: Import Components
+import SelectInput from 'components/shared/SelectInput.vue';
 import SwitchItem from 'components/shared/SwitchItem.vue';
 import FormEmployeePassport from 'components/03_customer-management/FormEmployeePassport.vue';
 import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
@@ -121,6 +122,9 @@ const { data: config } = storeToRefs(configStore);
 
 const receiptList = ref<Receipt[]>([]);
 
+const templateForm = ref<string>('');
+const templateFormOption = ref<{ label: string; value: string }[]>([]);
+
 const refSelectZoneEmployee = ref<InstanceType<typeof SelectZone>>();
 const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();
 const toggleWorker = ref(true);
@@ -1122,6 +1126,70 @@ const view = ref<View>(View.Quotation);
               <div class="col text-left">{{ value.title }}</div>
             </button>
           </div>
+
+          <q-expansion-item
+            for="item-up"
+            id="item-up"
+            dense
+            class="overflow-hidden"
+            switch-toggle-side
+            default-opened
+            style="border-radius: var(--radius-2)"
+            expand-icon="mdi-chevron-down-circle"
+            header-class="surface-1"
+          >
+            <template v-slot:header>
+              <section class="row items-center full-width">
+                <div class="row items-center q-pr-md q-py-sm">
+                  <span
+                    class="text-weight-medium q-mr-md"
+                    style="font-size: 18px"
+                  >
+                    {{ $t('general.document') }}
+                  </span>
+                </div>
+
+                <q-checkbox
+                  v-model="quotationFormData.urgent"
+                  class="q-ml-auto"
+                  size="xs"
+                  :label="$t('general.urgent')"
+                  :disable="readonly"
+                />
+              </section>
+            </template>
+
+            <div class="surface-1 q-pa-md full-width">
+              <QuotationFormMetadata
+                class="q-mb-md"
+                :readonly
+                :actor="quotationFormState.createdBy?.($i18n.locale) || ''"
+                :quotation-no="(quotationFull && quotationFull.code) || ''"
+                v-model:urgent="quotationFormData.urgent"
+                v-model:work-name="quotationFormData.workName"
+                v-model:contactor="quotationFormData.contactName"
+                v-model:telephone="quotationFormData.contactTel"
+                v-model:document-receive-point="
+                  quotationFormData.documentReceivePoint
+                "
+                v-model:due-date="quotationFormData.dueDate"
+              >
+                <template #issue-info>
+                  <FormAbout
+                    hide-add
+                    class="col-12 col-md-8"
+                    input-only
+                    v-model:branch-id="quotationFormData.registeredBranchId"
+                    v-model:customer-branch-id="
+                      quotationFormData.customerBranchId
+                    "
+                    :readonly="readonly"
+                  />
+                </template>
+              </QuotationFormMetadata>
+            </div>
+          </q-expansion-item>
+
           <template
             v-if="
               view === View.Quotation ||
@@ -1129,69 +1197,6 @@ const view = ref<View>(View.Quotation);
               view === View.Invoice
             "
           >
-            <q-expansion-item
-              for="item-up"
-              id="item-up"
-              dense
-              class="overflow-hidden"
-              switch-toggle-side
-              default-opened
-              style="border-radius: var(--radius-2)"
-              expand-icon="mdi-chevron-down-circle"
-              header-class="surface-1"
-            >
-              <template v-slot:header>
-                <section class="row items-center full-width">
-                  <div class="row items-center q-pr-md q-py-sm">
-                    <span
-                      class="text-weight-medium q-mr-md"
-                      style="font-size: 18px"
-                    >
-                      {{ $t('general.document') }}
-                    </span>
-                  </div>
-
-                  <q-checkbox
-                    v-model="quotationFormData.urgent"
-                    class="q-ml-auto"
-                    size="xs"
-                    :label="$t('general.urgent')"
-                    :disable="readonly"
-                  />
-                </section>
-              </template>
-
-              <div class="surface-1 q-pa-md full-width">
-                <QuotationFormMetadata
-                  class="q-mb-md"
-                  :readonly
-                  :actor="quotationFormState.createdBy?.($i18n.locale) || ''"
-                  :quotation-no="(quotationFull && quotationFull.code) || ''"
-                  v-model:urgent="quotationFormData.urgent"
-                  v-model:work-name="quotationFormData.workName"
-                  v-model:contactor="quotationFormData.contactName"
-                  v-model:telephone="quotationFormData.contactTel"
-                  v-model:document-receive-point="
-                    quotationFormData.documentReceivePoint
-                  "
-                  v-model:due-date="quotationFormData.dueDate"
-                >
-                  <template #issue-info>
-                    <FormAbout
-                      hide-add
-                      class="col-12 col-md-8"
-                      input-only
-                      v-model:branch-id="quotationFormData.registeredBranchId"
-                      v-model:customer-branch-id="
-                        quotationFormData.customerBranchId
-                      "
-                      :readonly="readonly"
-                    />
-                  </template>
-                </QuotationFormMetadata>
-              </div>
-            </q-expansion-item>
-
             <q-expansion-item
               for="item-up"
               id="item-up"
@@ -1430,7 +1435,7 @@ const view = ref<View>(View.Quotation);
               header-class="surface-1"
             >
               <template v-slot:header>
-                <section class="row items-center full-width">
+                <section class="row items-ceenhancement nter full-width">
                   <div class="row items-center q-pr-md q-py-sm">
                     <span
                       class="text-weight-medium q-mr-md"
@@ -1474,6 +1479,7 @@ const view = ref<View>(View.Quotation);
               </div>
             </q-expansion-item>
           </template>
+
           <template v-else>
             <PaymentForm
               v-if="
@@ -1597,6 +1603,66 @@ const view = ref<View>(View.Quotation);
               </div>
             </q-expansion-item>
           </template>
+
+          <template v-if="view === View.Quotation || view === View.Payment">
+            <q-expansion-item
+              for="item-up"
+              id="item-up"
+              dense
+              class="overflow-hidden"
+              switch-toggle-side
+              default-opened
+              style="border-radius: var(--radius-2)"
+              expand-icon="mdi-chevron-down-circle"
+              header-class="surface-1"
+            >
+              <template v-slot:header>
+                <section class="row items-center full-width">
+                  <div class="row items-center q-pr-md q-py-sm">
+                    <span
+                      class="text-weight-medium q-mr-md"
+                      style="font-size: 18px"
+                    >
+                      {{ $t('general.form') }}
+                    </span>
+                  </div>
+                </section>
+              </template>
+
+              <div class="surface-1 q-pa-md flex" style="gap: var(--size-2)">
+                <SelectInput
+                  style="max-width: 250px"
+                  class="q-mr-xl"
+                  incremental
+                  v-model="templateForm"
+                  id="quotation-branch"
+                  :option="templateFormOption"
+                  :label="$t('quotation.templateForm')"
+                  :option-label="locale === 'eng' ? 'labelEN' : 'label'"
+                  @filter="
+                    (val: string, update) => filter(val, update, 'branch')
+                  "
+                />
+                <MainButton
+                  outlined
+                  icon="mdi-play-box-outline"
+                  color="207 96% 32%"
+                  @click="storeDataLocal"
+                >
+                  {{ $t('general.view', { msg: $t('general.example') }) }}
+                </MainButton>
+                <MainButton
+                  solid
+                  icon="mdi-pencil-outline"
+                  color="207 96% 32%"
+                  @click="storeDataLocal"
+                >
+                  {{ $t('general.designForm') }}
+                </MainButton>
+              </div>
+            </q-expansion-item>
+          </template>
+
           <QuotationFormReceipt
             v-if="view === View.Receipt"
             v-for="(v, i) in receiptList"