refactor: เพิ่ม ของ list

src/components/01_branch-management/BranchCard.vue

@@ -12,6 +12,7 @@ defineProps<{
   metadata?: unknown;
   badgeField?: string[];
   fieldSelected?: (
+    | 'branchLabelName'
     | 'branchLabelAddress'
     | 'branchLabelTel'
     | 'branchLabelType'

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

@@ -34,27 +34,27 @@ const labelBtnStatus = ref<string>(t('all'));
 
 const columns = [
   {
-    name: 'name',
+    name: 'branchLabelName',
     align: 'left',
     label: 'office',
     field: 'name',
     sortable: true,
   },
   {
-    name: 'address',
+    name: 'branchLabelAddress',
     align: 'left',
     label: 'address',
     field: 'address',
     sortable: true,
   },
   {
-    name: 'telephoneNo',
+    name: 'branchLabelTel',
     align: 'left',
     label: 'formDialogInputTelephone',
     field: 'telephoneNo',
   },
   {
-    name: 'isHeadOffice',
+    name: 'branchLabelType',
     align: 'left',
     label: 'type',
     field: 'isHeadOffice',
@@ -169,10 +169,25 @@ const beforeBranch = ref<{ id: string; code: string }>({
 const inputSearch = ref<string>('');
 const fieldBranch = ref(['all', 'branchHQLabel', 'branchLabel']);
 const fieldDisplay = ref<
-  ('branchLabelAddress' | 'branchLabelTel' | 'branchLabelType')[]
+  (
->(['branchLabelTel', 'branchLabelAddress', 'branchLabelType']);
+    | 'branchLabelName'
+    | 'branchLabelAddress'
+    | 'branchLabelTel'
+    | 'branchLabelType'
+  )[]
+>([
+  'branchLabelName',
+  'branchLabelTel',
+  'branchLabelAddress',
+  'branchLabelType',
+]);
 const fieldSelected = ref<
-  ('branchLabelAddress' | 'branchLabelTel' | 'branchLabelType')[]
+  (
+    | 'branchLabelName'
+    | 'branchLabelAddress'
+    | 'branchLabelTel'
+    | 'branchLabelType'
+  )[]
 >(fieldDisplay.value);
 const fieldSelectedBranch = ref<{
   label: string;
@@ -807,7 +822,24 @@ watch(locale, () => {
                       </q-list>
                     </q-btn-dropdown>
 
-                    <q-btn
+                    <q-select
+                      id="select-field"
+                      for="select-field"
+                      :options="
+                        fieldDisplay.map((v) => ({ label: $t(v), value: v }))
+                      "
+                      :display-value="$t('displayField')"
+                      v-model="fieldSelected"
+                      option-label="label"
+                      option-value="value"
+                      map-options
+                      emit-value
+                      outlined
+                      multiple
+                      dense
+                    />
+
+                    <!-- <q-btn
                       id="btn-filter"
                       icon="mdi-tune-vertical-variant"
                       size="sm"
@@ -853,7 +885,7 @@ watch(locale, () => {
                           </q-item>
                         </q-list>
                       </q-menu>
-                    </q-btn>
+                    </q-btn> -->
 
                     <q-btn-toggle
                       v-model="modeView"
@@ -953,6 +985,7 @@ watch(locale, () => {
                       card-container-class="row q-col-gutter-md"
                       row-key="name"
                       hide-pagination
+                      :visible-columns="fieldSelected"
                     >
                       <template v-slot:header="props">
                         <q-tr class="surface-2" :props="props">
@@ -990,7 +1023,9 @@ watch(locale, () => {
                             }
                           "
                         >
-                          <q-td>
+                          <q-td
+                            v-if="fieldSelected.includes('branchLabelName')"
+                          >
                             <div class="row items-center">
                               <div
                                 :class="{
@@ -1023,13 +1058,17 @@ watch(locale, () => {
                               </div>
                             </div>
                           </q-td>
-                          <q-td>
+                          <q-td
+                            v-if="fieldSelected.includes('branchLabelAddress')"
+                          >
                             {{ props.row.address }}
                           </q-td>
-                          <q-td>
+                          <q-td v-if="fieldSelected.includes('branchLabelTel')">
                             {{ props.row.contact[0].telephoneNo }}
                           </q-td>
-                          <q-td>
+                          <q-td
+                            v-if="fieldSelected.includes('branchLabelType')"
+                          >
                             {{
                               props.row.isHeadOffice
                                 ? $t('branchHQLabel')