From 8e6538b36987b39b5345df92c1894675fc9900e3 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 16 Apr 2024 11:47:15 -0300
Subject: [PATCH] Item request view

---
 src/pages/Item/ItemRequest.vue | 236 ++++++++++++++++-----------------
 1 file changed, 114 insertions(+), 122 deletions(-)

diff --git a/src/pages/Item/ItemRequest.vue b/src/pages/Item/ItemRequest.vue
index 7f43732bd..f2f5bc99c 100644
--- a/src/pages/Item/ItemRequest.vue
+++ b/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,127 +240,107 @@ 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
+        <QTable
+            :rows="itemRequestsOptions"
+            :columns="columns"
+            row-key="id"
+            :pagination="{ rowsPerPage: 0 }"
+            class="full-width q-mt-md"
+            :no-data-label="t('globals.noResults')"
         >
-            <template #body="{ rows }">
-                <QTable
-                    :rows="rows"
-                    :columns="columns"
-                    row-key="id"
-                    :pagination="{ rowsPerPage: 0 }"
-                    class="full-width q-mt-md"
-                    :no-data-label="t('globals.noResults')"
-                >
-                    <template #body-cell-id="{ row }">
-                        <QTd>
-                            <QBtn flat color="primary"> {{ row.ticketFk }}</QBtn>
-                            <TicketDescriptorProxy :id="row.ticketFk" />
-                        </QTd>
-                    </template>
-
-                    <template #body-cell-shipped="{ row }">
-                        <QTd>
-                            <QBadge
-                                v-if="getDateQBadgeColor(row.shipped)"
-                                :color="getDateQBadgeColor(row.shipped)"
-                                text-color="black"
-                                class="q-ma-none"
-                                dense
-                                style="font-size: 14px"
-                            >
-                                {{ toDateFormat(row.shipped) }}
-                            </QBadge>
-                            <span v-else>{{ toDateFormat(row.shipped) }}</span>
-                        </QTd>
-                    </template>
-                    <template #body-cell-requester="{ row }">
-                        <QTd>
-                            <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
-                            >
-                            <WorkerDescriptorProxy :id="row.attenderFk" />
-                        </QTd>
-                    </template>
-                    <template #body-cell-item="{ row }">
-                        <QTd>
-                            <VnInput
-                                class="dense"
-                                v-model.number="row.itemFk"
-                                type="number"
-                                :disable="row.isOk != null"
-                            />
-                        </QTd>
-                    </template>
-                    <template #body-cell-achieved="{ row }">
-                        <QTd>
-                            <VnInput
-                                class="dense"
-                                v-model.number="row.saleQuantity"
-                                @change="changeQuantity(row)"
-                                type="number"
-                                :disable="!row.itemFk || row.isOk != null"
-                            />
-                        </QTd>
-                    </template>
-                    <template #body-cell-concept="{ row }">
-                        <QTd>
-                            <QBtn flat dense color="primary">
-                                {{ row.itemDescription }}</QBtn
-                            >
-                            <ItemDescriptorProxy :id="row.itemFk" />
-                        </QTd>
-                    </template>
-                    <template #body-cell-state="{ row }">
-                        <QTd>
-                            <span>{{ getState(row.isOk) }}</span>
-                        </QTd>
-                    </template>
-                    <template #body-cell-action="{ row, rowIndex }">
-                        <QTd>
-                            <QIcon
-                                v-if="row.response?.length"
-                                name="insert_drive_file"
-                                color="primary"
-                                size="sm"
-                            >
-                                <QTooltip>
-                                    {{ row.response }}
-                                </QTooltip>
-                            </QIcon>
-                            <QIcon
-                                v-if="row.isOk == null"
-                                name="thumb_down"
-                                color="primary"
-                                size="sm"
-                                class="cursor-pointer"
-                                @click="showDenyRequestForm(row.id, rowIndex)"
-                            >
-                                <QTooltip>
-                                    {{ t('Discard') }}
-                                </QTooltip>
-                            </QIcon>
-                        </QTd>
-                    </template>
-                </QTable>
+            <template #body-cell-id="{ row }">
+                <QTd>
+                    <QBtn flat color="primary"> {{ row.ticketFk }}</QBtn>
+                    <TicketDescriptorProxy :id="row.ticketFk" />
+                </QTd>
             </template>
-        </VnPaginate>
 
+            <template #body-cell-shipped="{ row }">
+                <QTd>
+                    <QBadge
+                        v-if="getDateQBadgeColor(row.shipped)"
+                        :color="getDateQBadgeColor(row.shipped)"
+                        text-color="black"
+                        class="q-ma-none"
+                        dense
+                        style="font-size: 14px"
+                    >
+                        {{ toDateFormat(row.shipped) }}
+                    </QBadge>
+                    <span v-else>{{ toDateFormat(row.shipped) }}</span>
+                </QTd>
+            </template>
+            <template #body-cell-requester="{ row }">
+                <QTd>
+                    <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>
+                    <WorkerDescriptorProxy :id="row.attenderFk" />
+                </QTd>
+            </template>
+            <template #body-cell-item="{ row }">
+                <QTd>
+                    <VnInput
+                        class="dense"
+                        v-model.number="row.itemFk"
+                        type="number"
+                        :disable="row.isOk != null"
+                    />
+                </QTd>
+            </template>
+            <template #body-cell-achieved="{ row }">
+                <QTd>
+                    <VnInput
+                        class="dense"
+                        v-model.number="row.saleQuantity"
+                        @change="changeQuantity(row)"
+                        type="number"
+                        :disable="!row.itemFk || row.isOk != null"
+                    />
+                </QTd>
+            </template>
+            <template #body-cell-concept="{ row }">
+                <QTd>
+                    <QBtn flat dense color="primary"> {{ row.itemDescription }}</QBtn>
+                    <ItemDescriptorProxy :id="row.itemFk" />
+                </QTd>
+            </template>
+            <template #body-cell-state="{ row }">
+                <QTd>
+                    <span>{{ getState(row.isOk) }}</span>
+                </QTd>
+            </template>
+            <template #body-cell-action="{ row, rowIndex }">
+                <QTd>
+                    <QIcon
+                        v-if="row.response?.length"
+                        name="insert_drive_file"
+                        color="primary"
+                        size="sm"
+                    >
+                        <QTooltip>
+                            {{ row.response }}
+                        </QTooltip>
+                    </QIcon>
+                    <QIcon
+                        v-if="row.isOk == null"
+                        name="thumb_down"
+                        color="primary"
+                        size="sm"
+                        class="cursor-pointer"
+                        @click="showDenyRequestForm(row.id, rowIndex)"
+                    >
+                        <QTooltip>
+                            {{ t('Discard') }}
+                        </QTooltip>
+                    </QIcon>
+                </QTd>
+            </template>
+        </QTable>
         <QDialog ref="denyFormRef" transition-show="scale" transition-hide="scale">
             <ItemRequestDenyForm
                 :request-id="denyRequestId"