From b99980213300c93edb1e8154071b31420de4e7c6 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 18 Apr 2024 16:13:16 +0700
Subject: [PATCH] feat: filter based on status

---
 src/pages/01_branch-management/MainPage.vue | 90 +++++++++++++++++----
 1 file changed, 73 insertions(+), 17 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 9502bd9b..489beb35 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -76,6 +76,8 @@ onMounted(async () => {
   }
 });
 
+const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
+
 const currentHq = ref<{ id: string; code: string }>({
   id: '',
   code: '',
@@ -530,18 +532,64 @@ watch(locale, () => {
           </div>
           <div class="branch-wrapper q-pa-md">
             <div class="q-mb-md flex" style="gap: var(--size-4)">
-              <div style="flex-grow: 1; display: flex; align-items: center">
-                <q-select
-                  v-if="!currentHq.id"
-                  outlined
-                  v-model="fieldSelectedBranch"
-                  :options="
-                    fieldBranch.map((v) => ({ label: $t(v), value: v }))
-                  "
-                  :label="$t('select')"
-                  dense
-                />
-
+              <div
+                style="
+                  flex-grow: 1;
+                  display: flex;
+                  align-items: stretch;
+                  gap: var(--size-2);
+                "
+              >
+                <template v-if="!currentHq.id">
+                  <q-select
+                    v-model="fieldSelectedBranch"
+                    style="min-width: 120px"
+                    outlined
+                    :options="
+                      fieldBranch.map((v) => ({ label: $t(v), value: v }))
+                    "
+                    :label="$t('select')"
+                    dense
+                  />
+                  <q-btn
+                    icon="mdi-tune-vertical-variant"
+                    class="bordered rounded"
+                    unelevated
+                  >
+                    <q-menu class="bordered">
+                      <q-list v-close-popup dense>
+                        <q-item
+                          clickable
+                          class="flex items-center"
+                          :class="{ 'app-text-info': statusFilter === 'all' }"
+                          @click="statusFilter = 'all'"
+                        >
+                          {{ $t('all') }}
+                        </q-item>
+                        <q-item
+                          clickable
+                          class="flex items-center"
+                          :class="{
+                            'app-text-info': statusFilter === 'statusACTIVE',
+                          }"
+                          @click="statusFilter = 'statusACTIVE'"
+                        >
+                          {{ $t('statusACTIVE') }}
+                        </q-item>
+                        <q-item
+                          clickable
+                          class="flex items-center"
+                          :class="{
+                            'app-text-info': statusFilter === 'statusINACTIVE',
+                          }"
+                          @click="statusFilter = 'statusINACTIVE'"
+                        >
+                          {{ $t('statusINACTIVE') }}
+                        </q-item>
+                      </q-list>
+                    </q-menu>
+                  </q-btn>
+                </template>
                 <div v-else class="text-weight-bold text">
                   {{ $t('branchInHQ') }}
                   {{ currentHq.code }}
@@ -581,6 +629,18 @@ watch(locale, () => {
               <BranchCard
                 v-for="item in branchData.result
                   .filter((v) => {
+                    if (
+                      statusFilter === 'statusACTIVE' &&
+                      v.status === 'INACTIVE'
+                    ) {
+                      return false;
+                    }
+                    if (
+                      statusFilter === 'statusINACTIVE' &&
+                      v.status !== 'INACTIVE'
+                    ) {
+                      return false;
+                    }
                     if (!!currentHq.id && currentHq.id === v.headOfficeId) {
                       return true;
                     }
@@ -618,11 +678,7 @@ watch(locale, () => {
                   () => {
                     if (item.hq) {
                       fieldSelectedBranch.value = '';
-                      currentHq = {
-                        id: item.id,
-                        code: item.branchLabelCode,
-                      };
-
+                      currentHq = { id: item.id, code: item.branchLabelCode };
                       beforeBranch = {
                         id: '',
                         code: '',