src/pages/Item/ItemRequest.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, onBeforeMount } from 'vue';
+import { ref, computed, onMounted, onBeforeMount, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
@@ -8,10 +8,10 @@ import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import ItemRequestDenyForm from './ItemRequestDenyForm.vue';
 import ItemRequestFilter from './ItemRequestFilter.vue';
-import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 import { useStateStore } from 'stores/useStateStore';
+import { useArrayData } from 'composables/useArrayData';
 import { toDateFormat } from 'src/filters/date';
 import { toCurrency } from 'filters/index';
 import useNotify from 'src/composables/useNotify.js';
@@ -27,6 +27,17 @@ const denyFormRef = ref(null);
 const denyRequestId = ref(null);
 const denyRequestIndex = ref(null);
 const itemRequestsOptions = ref([]);
+const arrayData = useArrayData('ItemRequests', {
+    url: 'TicketRequests/filter',
+    userParams: filterParams,
+    order: ['shippedDate ASC', 'isOk ASC'],
+});
+const store = arrayData.store;
+
+watch(
+    () => store.data,
+    (value) => (itemRequestsOptions.value = value)
+);
 
 const columns = computed(() => [
     {
@@ -122,7 +133,7 @@ const changeQuantity = async (request) => {
             };
 
             await axios.patch(`Sales/${request.saleFk}`, params);
-            notify(t('globals.dataSaved', 'positive'));
+            notify(t('globals.dataSaved'), 'positive');
             confirmRequest(request);
         } else confirmRequest(request);
     } catch (error) {
@@ -145,7 +156,7 @@ const confirmRequest = async (request) => {
 
             request.itemDescription = data.concept;
             request.isOk = true;
-            notify(t('globals.dataSaved', 'positive'));
+            notify(t('globals.dataSaved'), 'positive');
         }
     } catch (error) {
         console.error('Error confirming request:: ', error);
@@ -174,6 +185,7 @@ const onDenyAccept = (_, responseData) => {
 };
 
 onMounted(async () => {
+    await arrayData.fetch({ append: false });
     stateStore.rightDrawer = true;
 });
 
@@ -228,19 +240,8 @@ onBeforeMount(() => {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <VnPaginate
-            ref="paginateRef"
-            data-key="ItemRequests"
-            url="TicketRequests/filter"
-            :order="['shippedDate ASC', 'isOk ASC']"
-            :user-params="filterParams"
-            :limit="12"
-            :offset="50"
-            auto-load
-        >
-            <template #body="{ rows }">
         <QTable
-                    :rows="rows"
+            :rows="itemRequestsOptions"
             :columns="columns"
             row-key="id"
             :pagination="{ rowsPerPage: 0 }"
@@ -271,17 +272,13 @@ onBeforeMount(() => {
             </template>
             <template #body-cell-requester="{ row }">
                 <QTd>
-                            <QBtn flat dense color="primary">
-                                {{ row.requesterName }}</QBtn
-                            >
+                    <QBtn flat dense color="primary"> {{ row.requesterName }}</QBtn>
                     <WorkerDescriptorProxy :id="row.requesterFk" />
                 </QTd>
             </template>
             <template #body-cell-attender="{ row }">
                 <QTd>
-                            <QBtn flat dense color="primary">
-                                {{ row.attenderName }}</QBtn
-                            >
+                    <QBtn flat dense color="primary"> {{ row.attenderName }}</QBtn>
                     <WorkerDescriptorProxy :id="row.attenderFk" />
                 </QTd>
             </template>
@@ -308,9 +305,7 @@ onBeforeMount(() => {
             </template>
             <template #body-cell-concept="{ row }">
                 <QTd>
-                            <QBtn flat dense color="primary">
-                                {{ row.itemDescription }}</QBtn
-                            >
+                    <QBtn flat dense color="primary"> {{ row.itemDescription }}</QBtn>
                     <ItemDescriptorProxy :id="row.itemFk" />
                 </QTd>
             </template>
@@ -346,9 +341,6 @@ onBeforeMount(() => {
                 </QTd>
             </template>
         </QTable>
-            </template>
-        </VnPaginate>
-
         <QDialog ref="denyFormRef" transition-show="scale" transition-hide="scale">
             <ItemRequestDenyForm
                 :request-id="denyRequestId"