refactor: edit layout columns

src/pages/01_branch-management/MainPage.vue

@@ -85,6 +85,28 @@ const columns = [
     field: 'name',
     sortable: true,
   },
+
+  {
+    name: 'taxNo',
+    align: 'left',
+    label: 'general.taxNo',
+    field: 'taxNo',
+  },
+
+  {
+    name: 'branchLabelTel',
+    align: 'left',
+    label: 'branch.card.branchLabelTel',
+    field: 'telephoneNo',
+  },
+
+  {
+    name: 'contactName',
+    align: 'left',
+    label: 'general.contactName',
+    field: 'contactName',
+  },
+
   {
     name: 'branchLabelAddress',
     align: 'left',
@@ -92,18 +114,6 @@ const columns = [
     field: 'address',
     sortable: true,
   },
-  {
-    name: 'branchLabelTel',
-    align: 'left',
-    label: 'general.telephone',
-    field: 'telephoneNo',
-  },
-  {
-    name: 'branchLabelType',
-    align: 'left',
-    label: 'general.type',
-    field: 'isHeadOffice',
-  },
 ] satisfies QTableProps['columns'];
 
 const modal = ref<boolean>(false);
@@ -267,31 +277,26 @@ const beforeBranch = ref<{ id: string; code: string }>({
   code: '',
 });
 
+const modeView = ref<boolean>(false);
 const inputSearch = ref<string>('');
-const fieldDisplay = ref<
-  (
-    | 'branchLabelName'
-    | 'branchLabelAddress'
-    | 'branchLabelTel'
-    | 'branchLabelType'
-    | 'orderNumber'
-  )[]
->([
-  'orderNumber',
-  'branchLabelName',
-  'branchLabelTel',
-  'branchLabelAddress',
-  'branchLabelType',
-]);
-const fieldSelected = ref<
-  (
-    | 'orderNumber'
-    | 'branchLabelName'
-    | 'branchLabelAddress'
-    | 'branchLabelTel'
-    | 'branchLabelType'
-  )[]
->(fieldDisplay.value);
+
+const fieldDisplay = computed(() => {
+  return columns
+    .filter((v) => {
+      return !(
+        modeView.value === true &&
+        (v.name.includes('branchLabelName') || v.name.includes('orderNumber'))
+      );
+    })
+    .map((v) => v.name);
+});
+
+const fieldSelected = ref<string[]>([...fieldDisplay.value]);
+
+watch(modeView, () => {
+  fieldSelected.value = [...fieldDisplay.value];
+});
+
 const fieldSelectedBranch = ref<{
   label: string;
   value: string;
@@ -309,8 +314,6 @@ const stats = ref<
   }[]
 >([]);
 
-const modeView = ref<boolean>(false);
-
 const splitterModel = ref(25);
 
 const defaultFormData = {
@@ -1255,21 +1258,25 @@ watch(currentHq, () => {
                             </div>
                           </div>
                         </q-td>
+
+                        <q-td v-if="fieldSelected.includes('taxNo')">
+                          {{ props.row.taxNo }}
+                        </q-td>
+
+                        <q-td v-if="fieldSelected.includes('branchLabelTel')">
+                          {{ props.row.contact[0]?.telephoneNo || '-' }}
+                        </q-td>
+
+                        <q-td v-if="fieldSelected.includes('contactName')">
+                          {{ props.row.contactName }}
+                        </q-td>
+
                         <q-td
                           v-if="fieldSelected.includes('branchLabelAddress')"
                         >
                           {{ props.row.address }}
                         </q-td>
-                        <q-td v-if="fieldSelected.includes('branchLabelTel')">
-                          {{ props.row.contact[0]?.telephoneNo || '-' }}
-                        </q-td>
-                        <q-td v-if="fieldSelected.includes('branchLabelType')">
-                          {{
-                            props.row.isHeadOffice
-                              ? $t('branch.card.branchHQLabel')
-                              : $t('branch.card.branchLabel')
-                          }}
-                        </q-td>
+                        {{ console.log(props.row) }}
                         <q-td>
                           <KebabAction
                             :status="props.row.status"
@@ -1363,18 +1370,15 @@ watch(currentHq, () => {
                               $i18n.locale === 'eng'
                                 ? props.row.nameEN
                                 : props.row.name,
+                            taxNo: props.row.taxNo,
                             branchLabelTel: props.row.contact
                               .map((c: BranchContact) => c.telephoneNo)
                               .join(','),
+                            contactName: props.row.contactName,
                             branchLabelAddress:
                               $i18n.locale === 'eng'
                                 ? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
                                 : `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`,
-                            branchLabelType: $t(
-                              props.row.isHeadOffice
-                                ? 'branch.card.branchHQLabel'
-                                : 'branch.card.branchLabel',
-                            ),
                             branchImgUrl: `/branch/${props.row.id}/branch-image`,
                           }"
                           :field-selected="fieldSelected"