feat: add date range filtering to product and service lists

src/pages/04_product-service/MainPage.vue

@@ -3,7 +3,7 @@ import { nextTick, ref, watch, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { onMounted } from 'vue';
 import { storeToRefs } from 'pinia';
-import { QSelect, useQuasar, type QTableProps } from 'quasar';
+import { useQuasar, type QTableProps } from 'quasar';
 
 import DialogProperties from 'src/components/dialog/DialogProperties.vue';
 import ProductCardComponent from 'components/04_product-service/ProductCardComponent.vue';
@@ -69,6 +69,7 @@ import {
 import { useWorkflowTemplate } from 'src/stores/workflow-template';
 import { deepEquals } from 'src/utils/arr';
 import { toRaw } from 'vue';
+import AdvanceSearch from 'src/components/shared/AdvanceSearch.vue';
 
 const flowStore = useFlowStore();
 const navigatorStore = useNavigator();
@@ -167,8 +168,6 @@ const splitterModel = computed(() =>
   $q.screen.lt.md ? (productMode.value !== 'group' ? 0 : 100) : 25,
 );
 
-const refFilterGroup = ref<InstanceType<typeof QSelect>>();
-const refFilterProductService = ref<InstanceType<typeof QSelect>>();
 const holdDialog = ref(false);
 const imageDialog = ref(false);
 const currentNode = ref<ProductGroup & { type: string }>();
@@ -526,6 +525,7 @@ const currentStatusGroupType = ref<Status>('CREATED');
 const currentIdGroupType = ref('');
 
 const currentStatus = ref<Status | 'All'>('All');
+const searchDate = ref<string[]>([]);
 
 // img
 const isImageEdit = ref<boolean>(false);
@@ -621,6 +621,8 @@ async function fetchListGroups(mobileFetch?: boolean) {
         : currentStatus.value === 'ACTIVE'
           ? 'ACTIVE'
           : 'INACTIVE',
+    startDate: searchDate.value[0],
+    endDate: searchDate.value[1],
   });
 
   if (res) {
@@ -681,6 +683,8 @@ async function fetchListOfProduct(mobileFetch?: boolean) {
           ? 'ACTIVE'
           : undefined,
     productGroupId: currentIdGroup.value,
+    startDate: searchDate.value[0],
+    endDate: searchDate.value[1],
   });
 
   if (res) {
@@ -726,6 +730,8 @@ async function fetchListOfService(mobileFetch?: boolean) {
           ? 'ACTIVE'
           : undefined,
     productGroupId: currentIdGroup.value,
+    startDate: searchDate.value[0],
+    endDate: searchDate.value[1],
   });
 
   if (res) {
@@ -1596,6 +1602,7 @@ async function enterNext(type: 'service' | 'product') {
   inputSearchProductAndService.value = '';
   currentStatus.value = 'All';
   filterStat.value = [];
+  searchDate.value = [];
 
   if (
     expandedTree.value.length > 1 &&
@@ -1751,7 +1758,7 @@ watch(currentStatus, async () => {
   flowStore.rotate();
 });
 
-watch(inputSearch, async () => {
+watch([inputSearch, () => searchDate.value], async () => {
   if (productMode.value === 'group') {
     productGroup.value = [];
     currentPageGroup.value = 1;
@@ -1760,7 +1767,7 @@ watch(inputSearch, async () => {
   }
 });
 
-watch(inputSearchProductAndService, async () => {
+watch([inputSearchProductAndService, () => searchDate.value], async () => {
   product.value = [];
   service.value = [];
   currentPageServiceAndProduct.value = 1;
@@ -2015,19 +2022,34 @@ watch(
                 <template v-slot: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="searchDate"
-                      icon="mdi-filter-variant"
+                    :active="$q.screen.lt.md && currentStatus !== 'All'"
-                      unelevated
+                  >
-                      class="q-ml-sm"
+                    <div class="q-mt-sm text-weight-medium">
-                      padding="4px"
+                      {{ $t('general.status') }}
-                      size="sm"
+                    </div>
-                      rounded
+                    <q-select
-                      @click="refFilterGroup?.showPopup"
+                      v-model="currentStatus"
+                      for="select-status"
+                      outlined
+                      dense
+                      option-value="value"
+                      option-label="label"
+                      map-options
+                      emit-value
+                      :options="[
+                        { label: $t('general.all'), value: 'All' },
+                        { label: $t('general.active'), value: 'ACTIVE' },
+                        {
+                          label: $t('general.inactive'),
+                          value: 'INACTIVE',
+                        },
+                      ]"
                     />
-                  </span>
+                  </AdvanceSearch>
                 </template>
               </q-input>
             </div>
@@ -2182,26 +2204,44 @@ watch(
                   <template v-slot: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="searchDate"
-                        icon="mdi-filter-variant"
+                      :active="$q.screen.lt.md && currentStatus !== '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="refFilterGroup?.showPopup"
+                        {{ $t('general.status') }}
+                      </div>
+                      <q-select
+                        v-if="$q.screen.lt.md"
+                        v-model="currentStatus"
+                        for="select-status"
+                        outlined
+                        dense
+                        option-value="value"
+                        option-label="label"
+                        map-options
+                        emit-value
+                        :options="[
+                          { label: $t('general.all'), value: 'All' },
+                          { label: $t('general.active'), value: 'ACTIVE' },
+                          {
+                            label: $t('general.inactive'),
+                            value: 'INACTIVE',
+                          },
+                        ]"
                       />
-                    </span>
+                    </AdvanceSearch>
                   </template>
                 </q-input>
 
                 <div class="row col-md-6" style="white-space: nowrap">
                   <q-select
                     v-show="$q.screen.gt.sm"
-                    ref="refFilterGroup"
                     v-model="currentStatus"
                     for="select-status"
                     outlined
@@ -2685,26 +2725,45 @@ watch(
                   <template v-slot: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="searchDate"
-                        icon="mdi-filter-variant"
+                      :active="$q.screen.lt.md && currentStatus !== '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="refFilterProductService?.showPopup"
+                        {{ $t('general.status') }}
+                      </div>
+                      <q-select
+                        v-if="$q.screen.lt.md"
+                        :for="'field-select-status'"
+                        v-model="currentStatus"
+                        outlined
+                        dense
+                        option-value="value"
+                        option-label="label"
+                        map-options
+                        emit-value
+                        :options="[
+                          { label: $t('general.all'), value: 'All' },
+                          { label: $t('general.active'), value: 'ACTIVE' },
+                          {
+                            label: $t('general.inactive'),
+                            value: 'INACTIVE',
+                          },
+                        ]"
+                        @update:model-value="fetchStatus()"
                       />
-                    </span>
+                    </AdvanceSearch>
                   </template>
                 </q-input>
 
                 <div class="row col-md-6" style="white-space: nowrap">
                   <q-select
                     v-show="$q.screen.gt.sm"
-                    ref="refFilterProductService"
                     :for="'field-select-status'"
                     v-model="currentStatus"
                     outlined

src/stores/product-service/index.ts

@@ -56,6 +56,8 @@ const useProductServiceStore = defineStore('api-product-service', () => {
     query?: string;
     status?: 'CREATED' | 'ACTIVE' | 'INACTIVE';
     activeOnly?: boolean;
+    startDate?: string;
+    endDate?: string;
   }) {
     const params = new URLSearchParams();
 
@@ -142,6 +144,8 @@ const useProductServiceStore = defineStore('api-product-service', () => {
     orderField?: string;
     activeOnly?: boolean;
     orderBy?: 'asc' | 'desc';
+    startDate?: string;
+    endDate?: string;
   }) {
     const params = new URLSearchParams();
 
@@ -249,6 +253,8 @@ const useProductServiceStore = defineStore('api-product-service', () => {
     productGroupId?: string;
     status?: string;
     fullDetail?: boolean;
+    startDate?: string;
+    endDate?: string;
   }) {
     const params = new URLSearchParams();