feat: toggle status and filter text

src/pages/02_personnel-management/MainPage.vue

@@ -63,6 +63,8 @@ const urlProfile = ref<string>();
 const isEdit = ref(false);
 const modal = ref(false);
 const status = ref(false);
+const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
+const inputSearch = ref('');
 const userId = ref('');
 const selectorLabel = ref('');
 const hqId = ref('');
@@ -287,6 +289,17 @@ function mapUserType(label: string) {
   formData.value.userType = userTypeMap[label];
 }
 
+async function toggleStatus(id: string) {
+  const record = userData.value?.result.find((v) => v.id === id);
+
+  if (!record) return;
+
+  const res = await userStore.editById(record.id, {
+    status: record.status !== 'INACTIVE' ? 'INACTIVE' : 'ACTIVE',
+  });
+  if (res) record.status = res.status;
+}
+
 onMounted(async () => {
   await userStore.fetchList({ includeBranch: true });
   userStore.userOption.roleOpts.length === 0
@@ -370,9 +383,70 @@ watch(
 
     <!-- main -->
     <AppBox bordered style="width: 100%; height: 70vh; overflow-y: auto">
+      <div class="row q-mb-md justify-between">
+        <q-btn
+          icon="mdi-tune-vertical-variant"
+          class="bordered rounded"
+          :class="{ 'app-text-info': statusFilter !== 'all' }"
+          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>
+        <q-input
+          style="width: 250px"
+          outlined
+          dense
+          label="ค้นหา"
+          v-model="inputSearch"
+        ></q-input>
+      </div>
       <PersonCard
         :list="
-          userData?.result.map((v) => ({
+          userData?.result
+            .filter((v) => {
+              if (statusFilter === 'statusACTIVE' && v.status === 'INACTIVE') {
+                return false;
+              }
+              if (
+                statusFilter === 'statusINACTIVE' &&
+                v.status !== 'INACTIVE'
+              ) {
+                return false;
+              }
+              return true;
+            })
+            .map((v) => ({
               id: v.id,
               img: `${v.profileImageUrl}`,
               name:
@@ -393,9 +467,10 @@ watch(
               disabled: v.status === 'INACTIVE',
             })) || []
         "
-        @updateCard="openDialog"
+        @update-card="openDialog"
-        @deleteCard="onDelete"
+        @delete-card="onDelete"
-        @enterCard="cardClick"
+        @enter-card="cardClick"
+        @toggle-status="toggleStatus"
       />
       <div
         class="column"