From bfdd6677027f5d6f91ecd85806225c80553f49c1 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 24 Jul 2024 06:40:03 +0000
Subject: [PATCH] fix(04): status filter

---
 src/pages/04_product-service/MainPage.vue | 70 +++++++----------------
 1 file changed, 20 insertions(+), 50 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 504abbd7..d610dd3f 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -2458,56 +2458,26 @@ watch(
                   :class="{ 'q-pt-xs': $q.screen.lt.md }"
                   style="white-space: nowrap"
                 >
-                  <q-btn
-                    icon="mdi-tune-vertical-variant"
-                    id="btn-status"
-                    size="sm"
-                    :color="$q.dark.isActive ? 'dark' : 'white'"
-                    :text-color="$q.dark.isActive ? 'white' : 'dark'"
-                    class="bordered rounded q-py-sm col"
-                    unelevated
-                  >
-                    <q-menu class="bordered">
-                      <q-list v-close-popup dense>
-                        <q-item
-                          clickable
-                          class="flex items-center"
-                          @click="
-                            async () => {
-                              currentStatus = 'All';
-                              await fetchStatus();
-                            }
-                          "
-                        >
-                          {{ $t('all') }}
-                        </q-item>
-                        <q-item
-                          clickable
-                          class="flex items-center"
-                          @click="
-                            async () => {
-                              currentStatus = 'ACTIVE';
-                              await fetchStatus();
-                            }
-                          "
-                        >
-                          {{ $t('statusACTIVE') }}
-                        </q-item>
-                        <q-item
-                          clickable
-                          class="flex items-center"
-                          @click="
-                            async () => {
-                              currentStatus = 'INACTIVE';
-                              await fetchStatus();
-                            }
-                          "
-                        >
-                          {{ $t('statusINACTIVE') }}
-                        </q-item>
-                      </q-list>
-                    </q-menu>
-                  </q-btn>
+                  <q-select
+                    v-model="currentStatus"
+                    outlined
+                    dense
+                    option-value="value"
+                    :hide-dropdown-icon="$q.screen.lt.sm"
+                    option-label="label"
+                    class="col"
+                    map-options
+                    emit-value
+                    :options="[
+                      { label: $t('all'), value: 'All' },
+                      { label: $t('statusACTIVE'), value: 'ACTIVE' },
+                      {
+                        label: $t('statusINACTIVE'),
+                        value: 'INACTIVE',
+                      },
+                    ]"
+                    @update:model-value="fetchStatus()"
+                  ></q-select>
 
                   <q-select
                     v-if="modeView === false"