refactor: add input search and status filter of request

src/pages/05_quotation/QuotationForm.vue

@@ -26,6 +26,7 @@ import { deleteItem } from 'stores/utils';
 import { runOcr, parseResultMRZ } from 'src/utils/ocr';
 
 // NOTE  Import Types
+import { RequestData, RequestDataStatus } from 'src/stores/request-list/types';
 import { View } from './types.ts';
 import {
   PayCondition,
@@ -80,6 +81,7 @@ import UploadFileSection from 'src/components/upload-file/UploadFileSection.vue'
 import { columnPaySplit } from './constants';
 import { precisionRound } from 'src/utils/arithmetic';
 import { useConfigStore } from 'src/stores/config';
+import { useRequestList } from 'src/stores/request-list';
 import QuotationFormMetadata from './QuotationFormMetadata.vue';
 import BadgeComponent from 'src/components/BadgeComponent.vue';
 import PaymentForm from './PaymentForm.vue';
@@ -114,11 +116,14 @@ const quotationStore = useQuotationStore();
 const invoiceStore = useInvoice();
 const paymentStore = usePayment();
 const optionStore = useOptionStore();
+const requestStore = useRequestList();
 const { t, locale } = useI18n();
 const ocrStore = useOcrStore();
 const $q = useQuasar();
 const openQuotation = ref<boolean>(false);
 
+const rowsRequestList = ref<RequestData[]>([]);
+
 const {
   currentFormData: quotationFormData,
   currentFormState: quotationFormState,
@@ -415,13 +420,31 @@ async function fetchStatus() {
       title: 'ProcessComplete',
       status: getStatus(quotationFormData.value.quotationStatus, 5, 4),
       active: () => view.value === View.Complete,
-      handler: () => {
+      handler: async () => {
         view.value = View.Complete;
+        await fetchRequest();
       },
     },
   ];
 }
 
+async function fetchRequest() {
+  const res = await requestStore.getRequestDataList({
+    query: quotationFormState.value.inputSearchRequest,
+    page: 1,
+    pageSize: 999999,
+    requestDataStatus:
+      quotationFormState.value.statusFilterRequest === 'All'
+        ? undefined
+        : quotationFormState.value.statusFilterRequest,
+    quotationId: quotationFormData.value.id,
+  });
+
+  if (res) {
+    rowsRequestList.value = res.result;
+  }
+}
+
 async function fetchQuotation() {
   if (
     (!!currentQuotationId.value || !!quotationFormData.value.id) &&
@@ -1224,6 +1247,17 @@ async function exampleReceipt(id: string) {
     window.open(url.data.link, '_blank');
   }
 }
+
+watch(
+  [
+    () => quotationFormState.value.statusFilterRequest,
+    () => quotationFormState.value.inputSearchRequest,
+  ],
+  () => {
+    console.log('asdasd');
+    fetchRequest();
+  },
+);
 </script>
 
 <template>
@@ -1819,6 +1853,64 @@ async function exampleReceipt(id: string) {
                 }
               "
             />
+
+            <div
+              v-if="view === View.Complete"
+              class="surface-1 q-pa-md full-width q-gutter-y-md"
+            >
+              <div class="row justify-between items-center">
+                <q-input
+                  for="input-search"
+                  outlined
+                  dense
+                  :label="$t('general.search')"
+                  class="col-12 col-md-3"
+                  :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+                  v-model="quotationFormState.inputSearchRequest"
+                  debounce="200"
+                >
+                  <template #prepend>
+                    <q-icon name="mdi-magnify" />
+                  </template>
+                </q-input>
+
+                <q-select
+                  v-model="quotationFormState.statusFilterRequest"
+                  outlined
+                  dense
+                  option-value="value"
+                  option-label="label"
+                  map-options
+                  emit-value
+                  :for="'field-select-status'"
+                  :hide-dropdown-icon="$q.screen.lt.sm"
+                  :options="[
+                    {
+                      label: $t('general.all'),
+                      value: 'All',
+                    },
+                    {
+                      label: $t('requestList.status.Pending'),
+                      value: RequestDataStatus.Pending,
+                    },
+                    {
+                      label: $t('requestList.status.InProgress'),
+                      value: RequestDataStatus.InProgress,
+                    },
+                    {
+                      label: $t('requestList.status.Completed'),
+                      value: RequestDataStatus.Completed,
+                    },
+                  ]"
+                ></q-select>
+              </div>
+
+              <TableRequest
+                v-if="view === View.Complete"
+                :rows="rowsRequestList"
+              />
+            </div>
+
             <q-expansion-item
               v-if="view === View.InvoicePre"
               for="item-up"

src/pages/05_quotation/form.ts

@@ -12,6 +12,7 @@ import {
 import { Employee } from 'src/stores/employee/types';
 
 import { InvoicePayload } from 'src/stores/payment/types';
+import { RequestData, RequestDataStatus } from 'src/stores/request-list/types';
 
 // NOTE: Import stores
 import { useQuotationStore } from 'stores/quotations';
@@ -87,10 +88,14 @@ export const useQuotationForm = defineStore('form-quotation', () => {
     source?: QuotationFull;
     createdAt: string | Date;
     createdBy: (locale: string) => string;
+    inputSearchRequest: string | undefined;
+    statusFilterRequest: RequestDataStatus | 'All';
   }>({
     mode: null,
     createdBy: (_) => getName() || '',
     createdAt: '',
+    inputSearchRequest: undefined,
+    statusFilterRequest: 'All',
   });
 
   function isFormDataDifferent() {