From 285b821c166bd5c5abd9d985c712ceceffe651ff Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 17 Apr 2025 18:04:12 +0700
Subject: [PATCH] feat: add date range search functionality to personnel
 management

---
 .../02_personnel-management/MainPage.vue      | 57 +++++++++++++------
 src/stores/user/index.ts                      |  2 +
 2 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index b7c152d1..b3ea5058 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -10,7 +10,7 @@ import useOptionStore from 'stores/options';
 import useAddressStore from 'stores/address';
 import useMyBranch from 'src/stores/my-branch';
 import { calculateAge } from 'src/utils/datetime';
-import { QSelect, useQuasar, type QTableProps } from 'quasar';
+import { useQuasar, type QTableProps } from 'quasar';
 import { dialog, baseUrl, setPrefixName } from 'stores/utils';
 import { useNavigator } from 'src/stores/navigator';
 import { isRoleInclude, resetScrollBar } from 'src/stores/utils';
@@ -49,6 +49,7 @@ import FormPerson from 'components/02_personnel-management/FormPerson.vue';
 import FormByType from 'components/02_personnel-management/FormByType.vue';
 import FormInformation from 'components/02_personnel-management/FormInformation.vue';
 import PaginationPageSize from 'src/components/PaginationPageSize.vue';
+import AdvanceSearch from 'src/components/shared/AdvanceSearch.vue';
 
 const { locale, t } = useI18n();
 const $q = useQuasar();
@@ -73,7 +74,6 @@ const isImageEdit = ref(false);
 const imageDialog = ref(false);
 const infoDrawerEdit = ref(false);
 const refreshImageState = ref(false);
-const refFilter = ref<InstanceType<typeof QSelect>>();
 const firstScroll = ref(false);
 
 const inputSearch = ref('');
@@ -99,6 +99,8 @@ const userFileList = ref<{ name: string; url: string }[]>([]);
 const typeStats = ref<UserTypeStats>();
 const userStats = ref<BranchUserStats[]>();
 
+const searchDate = ref<Date[]>([]);
+
 const urlProfile = ref<string>();
 const profileFileImg = ref<File | null>(null);
 const imageList = ref<{ selectedImage: string; list: string[] }>();
@@ -672,6 +674,8 @@ async function fetchUserList(mobileFetch?: boolean) {
         : statusFilter.value === 'statusACTIVE'
           ? 'ACTIVE'
           : 'INACTIVE',
+    startDate: searchDate.value[0],
+    endDate: searchDate.value[1],
   });
 
   if (ret) {
@@ -761,7 +765,7 @@ watch(
   },
 );
 
-watch([inputSearch, statusFilter, pageSize], async () => {
+watch([inputSearch, statusFilter, pageSize, searchDate], async () => {
   if (userData.value) userData.value.result = [];
   currentPage.value = 1;
 
@@ -883,26 +887,45 @@ watch(
               <template #prepend>
                 <q-icon name="mdi-magnify" />
               </template>
-              <template v-if="$q.screen.lt.md" v-slot:append>
-                <span class="row">
-                  <q-separator vertical />
-                  <q-btn
-                    icon="mdi-filter-variant"
-                    unelevated
-                    class="q-ml-sm"
-                    padding="4px"
-                    size="sm"
-                    rounded
-                    @click="refFilter?.showPopup"
+              <template v-slot:append>
+                <q-separator vertical inset class="q-mr-xs" />
+                <AdvanceSearch
+                  v-model="searchDate"
+                  :active="$q.screen.lt.md && statusFilter !== 'all'"
+                >
+                  <div
+                    v-if="$q.screen.lt.md"
+                    class="q-mt-sm text-weight-medium"
+                  >
+                    {{ $t('general.status') }}
+                  </div>
+                  <q-select
+                    v-if="$q.screen.lt.md"
+                    v-model="statusFilter"
+                    outlined
+                    dense
+                    option-value="value"
+                    option-label="label"
+                    map-options
+                    emit-value
+                    autocomplete="off"
+                    :for="'field-select-status'"
+                    :options="[
+                      { label: $t('general.all'), value: 'all' },
+                      { label: $t('general.active'), value: 'statusACTIVE' },
+                      {
+                        label: $t('general.inactive'),
+                        value: 'statusINACTIVE',
+                      },
+                    ]"
                   />
-                </span>
+                </AdvanceSearch>
               </template>
             </q-input>
 
             <div class="row col-md-5" style="white-space: nowrap">
               <q-select
-                v-show="$q.screen.gt.sm"
-                ref="refFilter"
+                v-if="$q.screen.gt.sm"
                 v-model="statusFilter"
                 outlined
                 dense
diff --git a/src/stores/user/index.ts b/src/stores/user/index.ts
index 2cd894a4..a1a625ff 100644
--- a/src/stores/user/index.ts
+++ b/src/stores/user/index.ts
@@ -168,6 +168,8 @@ const useUserStore = defineStore('api-user', () => {
     status?: Status;
     responsibleDistrictId?: string;
     activeBranchOnly?: boolean;
+    startDate?: string;
+    endDate?: string;
   }) {
     const res = await api.get<Pagination<User[]>>('/user', { params: opts });