feat: employee gender filter

src/pages/03_customer-management/MainPage.vue

@@ -123,6 +123,7 @@ const infoDrawerEmployee = ref(false);
 const infoDrawerEmployeeEdit = ref(false);
 const infoEmployeePersonCard = ref();
 const statsEmployee = ref(0);
+const statsEmployeeGender = ref<{ male: number; female: number }>();
 const formDataEmployeeOwner = ref<{
   id: string;
   address: string;
@@ -689,8 +690,8 @@ async function fetchListCustomer() {
   }
 }
 
-async function fetchListEmployee() {
-  const resultListEmployee = await employeeStore.fetchList();
+async function fetchListEmployee(param?: { gender: string }) {
+  const resultListEmployee = await employeeStore.fetchList(param);
   if (resultListEmployee) {
     currentPageEmployee.value = resultListEmployee.page;
     maxPageEmployee.value = Math.ceil(
@@ -1029,6 +1030,11 @@ onMounted(async () => {
   const resultStatsEmployee = await employeeStore.getStatsEmployee();
   if (resultStatsEmployee) statsEmployee.value = resultStatsEmployee;
 
+  const resultStatsEmployeeGender =
+    await employeeStore.getStatsEmployeeGender();
+  if (resultStatsEmployeeGender)
+    statsEmployeeGender.value = resultStatsEmployeeGender;
+
   const resultListEmployee = await employeeStore.fetchList({
     page: 1,
     pageSize: pageSizeEmployee.value,
@@ -1121,6 +1127,10 @@ watch(
     formDataEmployee.value.customerBranchId = formDataEmployeeOwner.value.id;
   },
 );
+
+watch(genderselector, async (gender) => {
+  await fetchListEmployee({ gender: gender });
+});
 </script>
 
 <template>
@@ -1238,9 +1248,9 @@ watch(
               v-else
               v-model="genderselector"
               id="btn-mode"
-              dense
-              class="no-shadow bordered"
-              toggle-color="grey-4"
+              class="no-shadow"
+              padding="0px"
+              toggle-color="grey-3"
               size="xs"
               :options="[
                 { value: 'female', slot: 'female' },
@@ -1249,22 +1259,43 @@ watch(
             >
               <template v-slot:female>
                 <div
-                  class="q-px-sm q-py-xs app-text-female text-weight-medium text-body2 row items-center"
+                  class="bordered-t bordered-l bordered-b q-px-md q-py-sm app-text-female text-weight-medium text-body2 row items-center"
+                  @click="
+                    async () => {
+                      if (genderselector === 'female') {
+                        await fetchListEmployee();
+                        genderselector = '';
+                      }
+                    }
+                  "
                 >
                   <q-icon
                     name="mdi-gender-female"
                     class="q-mr-sm"
                     size="18px"
                   />
-                  5 คน
+                  <div v-if="statsEmployeeGender">
+                    {{ statsEmployeeGender.female }} คน
+                  </div>
                 </div>
               </template>
+
               <template v-slot:male>
                 <div
-                  class="q-px-sm q-py-xs app-text-male text-weight-medium text-body2 row items-center"
+                  class="bordered q-px-md q-py-sm app-text-male text-weight-medium text-body2 row items-center"
+                  @click="
+                    async () => {
+                      if (genderselector === 'male') {
+                        await fetchListEmployee();
+                        genderselector = '';
+                      }
+                    }
+                  "
                 >
                   <q-icon name="mdi-gender-male" class="q-mr-sm" size="18px" />
-                  5 คน
+                  <div v-if="statsEmployeeGender">
+                    {{ statsEmployeeGender.male }} คน
+                  </div>
                 </div>
               </template>
             </q-btn-toggle>