feat: update agencies management to include date range selection and refactor image list handling

src/pages/07_agencies-management/AgenciesDialog.vue

@@ -29,10 +29,10 @@ const drawerModel = defineModel<boolean>('drawerModel', {
   required: true,
   default: false,
 });
-const onCreateImageList = defineModel<{
+const imageListOnCreate = defineModel<{
   selectedImage: string;
   list: { url: string; imgFile: File | null; name: string }[];
-}>('onCreateImageList', { default: { selectedImage: '', list: [] } });
+}>('imageListOnCreate', { default: { selectedImage: '', list: [] } });
 
 const imageState = reactive({
   imageDialog: false,
@@ -159,7 +159,7 @@ async function submitImage(name: string) {
 function clearImageState() {
   imageState.imageDialog = false;
   imageFile.value = null;
-  onCreateImageList.value = { selectedImage: '', list: [] };
+  imageListOnCreate.value = { selectedImage: '', list: [] };
   imageState.refreshImageState = false;
 }
 
@@ -531,7 +531,7 @@ watch(
   <ImageUploadDialog
     v-model:dialog-state="imageState.imageDialog"
     v-model:file="imageFile"
-    v-model:on-create-data-list="onCreateImageList"
+    v-model:on-create-data-list="imageListOnCreate"
     v-model:image-url="imageState.imageUrl"
     v-model:data-list="imageList"
     :on-create="model"

src/pages/07_agencies-management/MainPage.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { QSelect, QTableProps } from 'quasar';
+import { QTableProps } from 'quasar';
 import { dialog } from 'src/stores/utils';
 import { onMounted, reactive, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
@@ -21,6 +21,7 @@ import FloatingActionButton from 'src/components/FloatingActionButton.vue';
 import CreateButton from 'src/components/AddButton.vue';
 import NoData from 'src/components/NoData.vue';
 import AgenciesDialog from './AgenciesDialog.vue';
+import AdvanceSearch from 'src/components/shared/AdvanceSearch.vue';
 
 const { t } = useI18n();
 const $q = useQuasar();
@@ -78,6 +79,7 @@ const pageState = reactive({
   addModal: false,
   viewDrawer: false,
   isDrawerEdit: true,
+  searchDate: [],
 });
 
 const blankFormData: InstitutionPayload = {
@@ -114,11 +116,10 @@ const blankFormData: InstitutionPayload = {
 };
 
 const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
-const refFilter = ref<InstanceType<typeof QSelect>>();
 const refAgenciesDialog = ref();
 const formData = ref<InstitutionPayload>(structuredClone(blankFormData));
 const currAgenciesData = ref<Institution>();
-const onCreateImageList = ref<{
+const imageListOnCreate = ref<{
   selectedImage: string;
   list: { url: string; imgFile: File | null; name: string }[];
 }>({ selectedImage: '', list: [] });
@@ -248,7 +249,7 @@ async function submit(opt?: { selectedImage: string }) {
         ...payload,
         code: formData.value.group || '',
       },
-      onCreateImageList.value,
+      imageListOnCreate.value,
     );
 
     await fetchData($q.screen.xs);
@@ -288,6 +289,8 @@ async function fetchData(mobileFetch?: boolean) {
         : statusFilter.value === 'statusACTIVE'
           ? 'ACTIVE'
           : 'INACTIVE',
+    startDate: pageState.searchDate[0],
+    endDate: pageState.searchDate[1],
   });
 
   if (ret) {
@@ -357,7 +360,7 @@ onMounted(async () => {
 });
 
 watch(
-  () => [pageState.inputSearch, statusFilter.value],
+  () => [pageState.inputSearch, statusFilter.value, pageState.searchDate],
   () => {
     page.value = 1;
     data.value = [];
@@ -440,26 +443,44 @@ watch(
               <template #prepend>
                 <q-icon name="mdi-magnify" />
               </template>
-              <template v-if="$q.screen.lt.md" v-slot:append>
+              <template v-slot:append>
-                <span class="row">
+                <q-separator vertical inset class="q-mr-xs" />
-                  <q-separator vertical />
+                <AdvanceSearch
-                  <q-btn
+                  v-model="pageState.searchDate"
-                    icon="mdi-filter-variant"
+                  :active="$q.screen.lt.md && statusFilter !== 'all'"
-                    unelevated
+                >
-                    class="q-ml-sm"
+                  <div
-                    padding="4px"
+                    v-if="$q.screen.lt.md"
-                    size="sm"
+                    class="q-mt-sm text-weight-medium"
-                    rounded
+                  >
-                    @click="refFilter?.showPopup"
+                    {{ $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
+                    :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 justify-end" style="white-space: nowrap">
               <q-select
-                v-show="$q.screen.gt.sm"
+                v-if="$q.screen.gt.sm"
-                ref="refFilter"
                 v-model="statusFilter"
                 outlined
                 dense
@@ -960,7 +981,7 @@ watch(
     v-model:drawer-model="pageState.viewDrawer"
     v-model:data="formData"
     v-model:form-bank-book="formData.bank"
-    v-model:on-create-image-list="onCreateImageList"
+    v-model:image-list-on-create="imageListOnCreate"
   />
 </template>
 <style scoped>

src/stores/institution/index.ts

@@ -29,6 +29,8 @@ export const useInstitution = defineStore('institution-store', () => {
     group?: string;
     status?: Status;
     payload?: { group?: string[] };
+    startDate?: string;
+    endDate?: string;
   }) {
     const { payload, ...params } = opts || {};