refactor: Change the data retrieval method

src/pages/03_customer-management/MainPage.vue

@@ -184,71 +184,34 @@ watch(
   () => $q.screen.lt.md && (gridView.value = true),
 );
 
-const fieldDisplayEmployer = ref<{ label: string; value: string }[]>([
-  { label: 'corporation', value: 'customerName' },
-  { label: 'type', value: 'type' },
-  { label: 'name', value: 'personName' },
+const fieldDisplayCustomer = ref<
   {
-    label: 'telephone',
-    value: 'telephoneNo',
-  },
-  { label: 'formDialogInputEmail', value: 'branchEmail' },
-]);
+    label: string;
+    value: string;
+  }[]
+>(
+  columnsCustomer
+    .filter((v) => v.name !== 'action')
+    .map((v) => ({ label: v.label, value: v.name })),
+);
 
 const fieldDisplayEmployee = ref<
   {
     label: string;
     value: string;
   }[]
->([
-  { label: 'nameEmployee', value: 'firstName' },
-  { label: 'formDialogInputNationality', value: 'formDialogInputNationality' },
-  { label: 'formDialogInputPassportNo', value: 'formDialogInputPassportNo' },
-  { label: 'formDialogInputAge', value: 'formDialogInputAge' },
-  { label: 'passportExpire', value: 'passportExpiryDate' },
-  {
-    label: 'formDialogEmployeeNRCNo',
-    value: 'formDialogEmployeeNRCNo',
-  },
-  { label: 'branchLabel', value: 'branchLabel' },
-  { label: 'type', value: 'type' },
-]);
+>(
+  columnsEmployee
+    .filter((v) => v.name !== 'action')
+    .map((v) => ({ label: v.label, value: v.name })),
+);
 
-const fieldSelected = ref<
-  (
-    | 'orderNumber'
-    | 'customerName'
-    | 'businessTypePure'
-    | 'type'
-    | 'personName'
-    | 'telephoneNo'
-    | 'branchEmail'
-    | 'firstName'
-    | 'formDialogInputNationality'
-    | 'formDialogInputPassportNo'
-    | 'passportExpiryDate'
-    | 'formDialogEmployeeNRCNo'
-    | 'formDialogInputAge'
-    | 'branchLabel'
-    | 'action'
-  )[]
->([
-  'orderNumber',
-  'customerName',
-  'businessTypePure',
-  'personName',
-  'telephoneNo',
-  'branchEmail',
-  'firstName',
-  'formDialogInputNationality',
-  'formDialogInputPassportNo',
-  'passportExpiryDate',
-  'type',
-  'formDialogEmployeeNRCNo',
-  'formDialogInputAge',
-  'branchLabel',
-  'action',
-]);
+const fieldSelected = ref<string[]>(
+  [
+    ...columnsEmployee.map((v) => v.name),
+    ...columnsCustomer.map((v) => v.name),
+  ].filter((v, index, self) => self.indexOf(v) === index),
+);
 
 const registerAbleBranchOption = ref<{ id: string; name: string }[]>();