From cfbc1866f7b6a116a40fe819520c5e01316ec1f9 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 19 Sep 2024 13:30:20 +0700
Subject: [PATCH] fix: customer & sub side menu

---
 src/components/SideMenu.vue                   |  30 +++-
 src/pages/03_customer-management/MainPage.vue | 145 +++++++++++-------
 2 files changed, 120 insertions(+), 55 deletions(-)

diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue
index 478125a1..abf17044 100644
--- a/src/components/SideMenu.vue
+++ b/src/components/SideMenu.vue
@@ -94,7 +94,19 @@ onUnmounted(() => {
         }"
         @click="handleClick(v)"
       >
-        {{ v.name }}
+        <span
+          class="row no-wrap items-center"
+          :class="{ 'app-text-muted': v.sub && activeMenu !== v.anchor }"
+        >
+          <div v-if="v.sub" class="circle-2"></div>
+          <div
+            v-if="v.sub"
+            class="surface-tab circle flex justify-center q-mx-md"
+          >
+            {{ menu.filter((v) => v.sub === true).indexOf(v) + 1 }}
+          </div>
+          {{ v.name }}
+        </span>
         <slot v-if="v.useBtn" :name="`btn-${v.anchor}`"></slot>
       </span>
     </template>
@@ -117,7 +129,7 @@ onUnmounted(() => {
     cursor: pointer;
 
     &.side-menu__sub {
-      margin-left: 1rem;
+      /* margin-left: 1rem; */
     }
 
     &.side-menu__active {
@@ -127,4 +139,18 @@ onUnmounted(() => {
     }
   }
 }
+
+.circle {
+  width: 15px;
+  height: 15px;
+  font-size: 12px;
+  border-radius: 50%;
+}
+
+.circle-2 {
+  background: var(--surface-tab);
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+}
 </style>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index a231d487..b6a3f5a1 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -916,7 +916,16 @@ const emptyCreateDialog = ref(false);
                 class="q-ml-sm col"
                 :options="
                   currentTab === 'employer'
-                    ? fieldDisplayCustomer
+                    ? gridView
+                      ? fieldDisplayCustomer.filter((v) => {
+                          return (
+                            v.value !== 'orderNumber' &&
+                            v.value !== 'titleName' &&
+                            v.value !== 'address' &&
+                            v.value !== 'contactName'
+                          );
+                        })
+                      : fieldDisplayCustomer
                     : fieldDisplayEmployee
                 "
                 :display-value="$t('general.displayField')"
@@ -1178,7 +1187,10 @@ const emptyCreateDialog = ref(false);
                           }}
                         </q-td>
 
-                        <q-td v-if="fieldSelected.includes('fullname')">
+                        <q-td
+                          v-if="fieldSelected.includes('titleName')"
+                          style="padding-block: 7px; padding-inline: 0px"
+                        >
                           <div class="row items-center">
                             <div
                               class="q-mr-sm"
@@ -1233,6 +1245,7 @@ const emptyCreateDialog = ref(false);
                             </div>
                           </div>
                         </q-td>
+
                         <q-td v-if="fieldSelected.includes('businessTypePure')">
                           {{
                             props.row.branch.length !== 0
@@ -1257,16 +1270,22 @@ const emptyCreateDialog = ref(false);
                           }}
                         </q-td>
 
-                        <q-td v-if="fieldSelected.includes('officeTel')">
+                        <q-td v-if="fieldSelected.includes('address')">
                           {{
-                            props.row.branch.length !== 0
-                              ? props.row.branch[0].officeTel !== null
-                                ? props.row.branch[0].officeTel
-                                : ''
-                              : '-'
+                            locale === 'eng'
+                              ? `${props.row.branch[0].addressEN} ${props.row.branch[0].mooEN} ${props.row.branch[0].soiEN} ${props.row.branch[0].streetEN} ${props.row.branch[0].subDistrict.nameEN} ${props.row.branch[0].district.nameEN} ${props.row.branch[0].province.nameEN} ${props.row.branch[0].subDistrict.zipCode}`
+                              : `${props.row.branch[0].address} ${props.row.branch[0].moo} ${props.row.branch[0].soi} ${props.row.branch[0].street} ต.${props.row.branch[0].subDistrict.name} อ.${props.row.branch[0].district.name} จ.${props.row.branch[0].province.name} ${props.row.branch[0].subDistrict.zipCode}`
                           }}
                         </q-td>
 
+                        <q-td v-if="fieldSelected.includes('contactName')">
+                          {{ props.row.branch[0]?.contactName || '-' }}
+                        </q-td>
+
+                        <q-td v-if="fieldSelected.includes('officeTel')">
+                          {{ props.row.branch[0]?.officeTel || '-' }}
+                        </q-td>
+
                         <q-td>
                           <q-btn
                             dense
@@ -1425,12 +1444,7 @@ const emptyCreateDialog = ref(false);
                                   : props.row.branch[0]?.firstName +
                                       ' ' +
                                       props.row.branch[0]?.lastName || '-',
-                            taxNo: 'asdasd',
-                            branchLabelTel: 'asdas',
-                            contactName: 'zxczxcz',
-                            branchImgUrl: `/customer/${props.row.id}/image/${props.row.selectedImage}`,
                           }"
-                          :badge-field="['branchLabelStatus']"
                           :inactive="props.row.status === 'INACTIVE'"
                           :field-selected="
                             fieldSelected.filter((v) => {
@@ -1454,8 +1468,8 @@ const emptyCreateDialog = ref(false);
                                 class="absolute-bottom-right no-padding"
                                 style="
                                   border-radius: 50%;
-                                  min-width: 11.31px;
-                                  min-height: 11.31px;
+                                  min-width: 10px;
+                                  min-height: 10px;
                                 "
                                 :style="{
                                   background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
@@ -1471,6 +1485,22 @@ const emptyCreateDialog = ref(false);
                                 padding-block: var(--size-2);
                               "
                             >
+                              <div class="col-12 q-py-sm row">
+                                <span class="col-4 app-text-muted">
+                                  {{
+                                    props.row.customerType === 'CORP'
+                                      ? $t('customer.form.legalPersonCode')
+                                      : $t('customer.form.cardNumber')
+                                  }}
+                                </span>
+                                <span class="col">
+                                  {{
+                                    props.row.customerType === 'CORP'
+                                      ? props.row.branch[0]?.legalPersonNo
+                                      : props.row.branch[0]?.citizenId
+                                  }}
+                                </span>
+                              </div>
                               <div
                                 class="col-12 q-py-sm row"
                                 v-for="key in fieldSelected
@@ -1481,7 +1511,10 @@ const emptyCreateDialog = ref(false);
                                   })
                                   .filter((v) => {
                                     return (
-                                      v !== 'orderNumber' && v !== 'fullname'
+                                      v !== 'orderNumber' &&
+                                      v !== 'titleName' &&
+                                      v !== 'address' &&
+                                      v !== 'contactName'
                                     );
                                   })"
                                 :key="key"
@@ -1500,7 +1533,7 @@ const emptyCreateDialog = ref(false);
                                             props.row.branch[0].jobPosition,
                                           )
                                         : key === 'officeTel'
-                                          ? props.row.branch[0].officeTel
+                                          ? props.row.branch[0].officeTel || '-'
                                           : ''
                                   }}
                                 </span>
@@ -1929,6 +1962,7 @@ const emptyCreateDialog = ref(false);
                 {
                   name: $t('customer.form.group.branch'),
                   anchor: 'form-branch-customer-branch',
+                  useBtn: true,
                 },
                 ...(customerFormData.customerBranch?.map((v, i) => ({
                   name:
@@ -1947,7 +1981,26 @@ const emptyCreateDialog = ref(false);
                 foreground: 'var(--blue-6)',
               }"
               scroll-element="#customer-form-content"
-            />
+            >
+              <template v-slot:btn-form-branch-customer-branch>
+                <q-btn
+                  dense
+                  flat
+                  icon="mdi-plus"
+                  size="sm"
+                  rounded
+                  padding="0px 0px"
+                  class="app-text-muted"
+                  @click.stop="customerFormStore.addCurrentCustomerBranch()"
+                  v-if="
+                    customerFormState.branchIndex === -1 &&
+                    !!customerFormState.editCustomerId &&
+                    customerFormState.dialogType !== 'create'
+                  "
+                  :disabled="!customerFormState.readonly"
+                />
+              </template>
+            </SideMenu>
           </div>
         </div>
         <div
@@ -2006,18 +2059,6 @@ const emptyCreateDialog = ref(false);
                 style="background-color: var(--surface-3)"
               />
               <span>{{ $t('customer.form.group.branch') }}</span>
-              <AddButton
-                icon-only
-                type="button"
-                class="q-ml-sm"
-                @click="customerFormStore.addCurrentCustomerBranch()"
-                v-if="
-                  customerFormState.branchIndex === -1 &&
-                  !!customerFormState.editCustomerId &&
-                  customerFormState.dialogType !== 'create'
-                "
-                :disabled="!customerFormState.readonly"
-              />
             </div>
 
             <template
@@ -2473,7 +2514,6 @@ const emptyCreateDialog = ref(false);
               v-model:provinceId="currentFromDataEmployee.provinceId"
               v-model:districtId="currentFromDataEmployee.districtId"
               v-model:subDistrictId="currentFromDataEmployee.subDistrictId"
-              v-model:zipCode="currentFromDataEmployee.zipCode"
               employee
               dense
               class="q-mb-xl"
@@ -3103,13 +3143,10 @@ const emptyCreateDialog = ref(false);
                     name: $t('form.field.basicInformation'),
                     anchor: 'form-basic-info-customer',
                   },
-                  {
-                    name: $t('customerBranch.tab.attachment'),
-                    anchor: 'form-upload-file-customer',
-                  },
                   {
                     name: $t('customer.form.group.branch'),
                     anchor: 'form-branch-customer-branch',
+                    useBtn: true,
                   },
 
                   ...(customerFormData.customerBranch?.map((v, i) => ({
@@ -3129,7 +3166,26 @@ const emptyCreateDialog = ref(false);
                   foreground: 'var(--blue-6)',
                 }"
                 scroll-element="#customer-form-content"
-              />
+              >
+                <template v-slot:btn-form-branch-customer-branch>
+                  <q-btn
+                    dense
+                    flat
+                    icon="mdi-plus"
+                    size="sm"
+                    rounded
+                    padding="0px 0px"
+                    class="app-text-muted"
+                    @click.stop="customerFormStore.addCurrentCustomerBranch()"
+                    v-if="
+                      customerFormState.branchIndex === -1 &&
+                      !!customerFormState.editCustomerId &&
+                      customerFormState.dialogType !== 'create'
+                    "
+                    :disabled="!customerFormState.readonly"
+                  />
+                </template>
+              </SideMenu>
             </div>
           </div>
 
@@ -3209,18 +3265,6 @@ const emptyCreateDialog = ref(false);
                   style="background-color: var(--surface-3)"
                 />
                 <span>{{ $t('customer.form.group.branch') }}</span>
-                <AddButton
-                  icon-only
-                  type="button"
-                  class="q-ml-sm"
-                  @click="customerFormStore.addCurrentCustomerBranch()"
-                  v-if="
-                    customerFormState.branchIndex === -1 &&
-                    !!customerFormState.editCustomerId &&
-                    customerFormData.status !== 'INACTIVE'
-                  "
-                  :disabled="!customerFormState.readonly"
-                />
               </div>
 
               <template
@@ -3253,10 +3297,6 @@ const emptyCreateDialog = ref(false);
                           'legalPersonNo',
                           'registerName',
                           'registerNameEN',
-                          'registerDate',
-                          'authorizedCapital',
-                          'authorizedName',
-                          'authorizedNameEN',
                           'customerName',
                         ];
                       }
@@ -3670,7 +3710,6 @@ const emptyCreateDialog = ref(false);
                 v-model:provinceId="currentFromDataEmployee.provinceId"
                 v-model:districtId="currentFromDataEmployee.districtId"
                 v-model:subDistrictId="currentFromDataEmployee.subDistrictId"
-                v-model:zipCode="currentFromDataEmployee.zipCode"
                 v-model:sameWithEmployer="
                   employeeFormState.formDataEmployeeSameAddr
                 "