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,32 +383,94 @@ 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) => ({
-            id: v.id,
-            img: `${v.profileImageUrl}`,
-            name:
-              $i18n.locale === 'en-US'
-                ? `${v.firstNameEN} ${v.lastNameEN}`
-                : `${v.firstName} ${v.lastName}`,
-            male: v.gender === 'male',
-            female: v.gender === 'female',
-            detail: [
-              { label: 'ประเภท', value: $t(v.userType) },
-              { label: 'โทรศัพท์', value: v.telephoneNo },
-              {
-                label: 'อายุ',
-                value: userStore.calculateAge(v.birthDate as Date),
-              },
-            ],
-            badge: v.code,
-            disabled: v.status === 'INACTIVE',
-          })) || []
+          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:
+                $i18n.locale === 'en-US'
+                  ? `${v.firstNameEN} ${v.lastNameEN}`
+                  : `${v.firstName} ${v.lastName}`,
+              male: v.gender === 'male',
+              female: v.gender === 'female',
+              detail: [
+                { label: 'ประเภท', value: $t(v.userType) },
+                { label: 'โทรศัพท์', value: v.telephoneNo },
+                {
+                  label: 'อายุ',
+                  value: userStore.calculateAge(v.birthDate as Date),
+                },
+              ],
+              badge: v.code,
+              disabled: v.status === 'INACTIVE',
+            })) || []
         "
-        @updateCard="openDialog"
-        @deleteCard="onDelete"
-        @enterCard="cardClick"
+        @update-card="openDialog"
+        @delete-card="onDelete"
+        @enter-card="cardClick"
+        @toggle-status="toggleStatus"
       />
       <div
         class="column"