feat: filter ทั้งหมด สาขาใหญ่ สาขา

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

@@ -60,7 +60,7 @@ onMounted(async () => {
 watch(locale, () => {
   console.log(locale.value);
 });
-
+const fieldBranch = ref(['all', 'branchHQLabel', 'branchLabel']);
 const fieldDisplay = ref([
   'branchLabelName',
   'branchLabelTel',
@@ -69,6 +69,14 @@ const fieldDisplay = ref([
   'branchLabelStatus',
 ]);
 const fieldSelected = ref<string[]>(fieldDisplay.value);
+const fieldSelectedBranch = ref<{
+  label: string;
+  value: string;
+}>({
+  label: 'ทั้งหมด',
+  value: 'all',
+});
+
 const stats = ref<{ count: number; label: string }[]>([]);
 
 const defaultFormData = {
@@ -155,16 +163,12 @@ function clearData() {
             <div class="q-mb-md flex" style="gap: var(--size-4)">
               <div style="flex-grow: 1">
                 <q-select
-                  :options="
-                    fieldDisplay.map((v) => ({ label: $t(v), value: v }))
-                  "
-                  v-model="fieldSelected"
-                  option-label="label"
-                  option-value="value"
-                  map-options
-                  emit-value
                   outlined
-                  multiple
+                  v-model="fieldSelectedBranch"
+                  :options="
+                    fieldBranch.map((v) => ({ label: $t(v), value: v }))
+                  "
+                  :label="$t('select')"
                   dense
                 />
               </div>
@@ -186,11 +190,13 @@ function clearData() {
             </div>
             <div class="branch-container">
               <BranchCard
-                v-for="item in branchData.result.map((v) => ({
+                v-for="item in branchData.result
+                  .map((v) => ({
                     id: v.id,
                     hq: v.isHeadOffice,
                     branchLabelCode: v.code,
-                  branchLabelName: $i18n.locale === 'en-US' ? v.nameEN : v.name,
+                    branchLabelName:
+                      $i18n.locale === 'en-US' ? v.nameEN : v.name,
                     branchLabelTel: v.telephoneNo,
                     branchLabelAddress:
                       $i18n.locale === 'en-US'
@@ -200,7 +206,15 @@ function clearData() {
                       v.isHeadOffice ? 'branchHQLabel' : 'branchLabel',
                     ),
                     branchLabelStatus: v.status,
-                }))"
+                  }))
+                  .filter(
+                    (b) =>
+                      fieldSelectedBranch.value === 'all' ||
+                      b.hq ===
+                        (fieldSelectedBranch.value === 'branchHQLabel'
+                          ? true
+                          : false),
+                  )"
                 :key="item.id"
                 :data="item"
                 :field-selected="fieldSelected"