feat: filter user status on the backend

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

@@ -476,9 +476,11 @@ async function onSubmit() {
   } else {
     if (!hqId.value) return;
 
-    statusToggle.value
-      ? (formData.value.status = 'CREATED')
-      : (formData.value.status = 'INACTIVE');
+    if (statusToggle.value) {
+      formData.value.status = 'CREATED';
+    } else {
+      formData.value.status = 'INACTIVE';
+    }
 
     formData.value.branchId = brId.value
       ? brId.value
@@ -553,6 +555,8 @@ async function toggleStatus(id: string) {
   if (res) {
     record.status = res.status;
     formData.value.status = res.status;
+
+    await fetchUserList();
   }
 }
 
@@ -680,13 +684,6 @@ onMounted(async () => {
   }
 
   typeStats.value = await userStore.typeStats();
-
-  // const firstTypeIncludeUser = Object.entries(typeStats.value || {}).find(
-  //   (v) => v[1] > 0,
-  // );
-
-  // firstTypeIncludeUser && (selectorLabel.value = firstTypeIncludeUser[0]);
-
   const res = await branchStore.userStats(formData.value.userType);
   if (res) {
     userStats.value = res;
@@ -744,21 +741,15 @@ async function fetchUserList() {
     page: currentPage.value,
     query: !!inputSearch.value ? inputSearch.value : undefined,
     userType: selectorLabel.value === 'ALL' ? undefined : selectorLabel.value,
+    status:
+      statusFilter.value === 'all'
+        ? undefined
+        : statusFilter.value === 'statusACTIVE'
+          ? 'ACTIVE'
+          : 'INACTIVE',
   });
 }
 
-async function handleImageUpload(file: File | null, url: string | null) {
-  if (!infoDrawerEdit.value && !modal.value) {
-    infoDrawerEdit.value = true;
-    await onSubmit();
-    infoDrawerEdit.value = false;
-  }
-  if (infoDrawerEdit.value && !modal.value) {
-    await onSubmit();
-  }
-  imageDialog.value = false;
-}
-
 watch(
   () => profileFileImg.value,
   () => {
@@ -766,7 +757,7 @@ watch(
   },
 );
 
-watch(inputSearch, async () => await fetchUserList());
+watch([inputSearch, statusFilter], async () => await fetchUserList());
 
 watch(
   () => $q.screen.lt.md,
@@ -1117,25 +1108,7 @@ watch(
             flat
             bordered
             :grid="modeView"
-            :rows="
-              userData.result.filter((v) => {
-                if (
-                  statusFilter === 'statusACTIVE' &&
-                  v.status === 'INACTIVE'
-                ) {
-                  return false;
-                }
-
-                if (
-                  statusFilter === 'statusINACTIVE' &&
-                  v.status !== 'INACTIVE'
-                ) {
-                  return false;
-                }
-
-                return true;
-              })
-            "
+            :rows="userData.result"
             :columns="columns"
             style="max-height: 100%"
             class="full-width full-height"

src/stores/user/index.ts

@@ -1,6 +1,6 @@
 import { ref } from 'vue';
 import { defineStore } from 'pinia';
-import { Pagination } from '../types';
+import { Pagination, Status } from '../types';
 import { api } from 'src/boot/axios';
 import {
   RoleData,
@@ -196,7 +196,7 @@ const useUserStore = defineStore('api-user', () => {
       query?: string;
       includeBranch?: boolean;
       userType?: string;
-      status?: 'CREATED' | 'ACTIVE' | 'INACTIVE';
+      status?: Status;
     },
     flow?: {
       sessionId?: string;
@@ -214,6 +214,7 @@ const useUserStore = defineStore('api-user', () => {
     if (opts?.query) params.append('query', opts.query);
     if (opts?.includeBranch) params.append('includeBranch', 'true');
     if (opts?.userType) params.append('userType', opts.userType);
+    if (opts?.status) params.append('status', opts.status);
 
     const query = params.toString();