feat: add status filtering to agencies management page

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { QTableProps } from 'quasar';
+import { QSelect, QTableProps } from 'quasar';
 import { dialog } from 'src/stores/utils';
 import { onMounted, reactive, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
@@ -100,6 +100,8 @@ const blankFormData: InstitutionPayload = {
   status: 'CREATED',
 };
 
+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>();
@@ -241,6 +243,12 @@ async function fetchData(mobileFetch?: boolean) {
       ? data.value.length + (pageState.total === data.value.length ? 1 : 0)
       : pageSize.value,
     query: pageState.inputSearch,
+    status:
+      statusFilter.value === 'all'
+        ? undefined
+        : statusFilter.value === 'statusACTIVE'
+          ? 'ACTIVE'
+          : 'INACTIVE',
   });
 
   if (ret) {
@@ -310,7 +318,7 @@ onMounted(async () => {
 });
 
 watch(
-  () => pageState.inputSearch,
+  () => [pageState.inputSearch, statusFilter.value],
   () => {
     page.value = 1;
     data.value = [];
@@ -393,10 +401,26 @@ 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"
+                  />
+                </span>
+              </template>
             </q-input>
 
             <div class="row col-md-5 justify-end" style="white-space: nowrap">
-              <!-- <q-select
+              <q-select
+                v-show="$q.screen.gt.sm"
+                ref="refFilter"
                 v-model="statusFilter"
                 outlined
                 dense
@@ -413,7 +437,7 @@ watch(
                   { label: $t('general.active'), value: 'statusACTIVE' },
                   { label: $t('general.inactive'), value: 'statusINACTIVE' },
                 ]"
-              /> -->
+              />
               <q-select
                 v-if="!pageState.gridView"
                 id="select-field"

src/stores/institution/index.ts

@@ -4,6 +4,7 @@ import { Institution, InstitutionPayload } from './types';
 import { api } from 'src/boot/axios';
 import { PaginationResult } from 'src/types';
 import useFlowStore from '../flow';
+import { Status } from '../types';
 
 export const useInstitution = defineStore('institution-store', () => {
   const flowStore = useFlowStore();
@@ -26,6 +27,7 @@ export const useInstitution = defineStore('institution-store', () => {
     pageSize?: number;
     query?: string;
     group?: string;
+    status?: Status;
     payload?: { group?: string[] };
   }) {
     const { payload, ...params } = opts || {};