From 4efe09722f59f2dba01a0c15e6173dbc4beacd15 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 15 Apr 2024 08:40:15 +0200
Subject: [PATCH] refs #6336 feat(claim):  improvements

---
 src/components/CrudModel.vue              |   6 +
 src/components/ui/VnNotes.vue             |   2 +-
 src/composables/useArrayData.js           |   3 +-
 src/pages/Claim/Card/ClaimLines.vue       | 291 ++++++++++------------
 src/pages/Claim/Card/ClaimLinesImport.vue |  38 +--
 src/pages/Claim/Card/ClaimSummary.vue     | 115 +++++----
 6 files changed, 206 insertions(+), 249 deletions(-)

diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue
index c8fa5809c..fb3ac10c3 100644
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@@ -24,6 +24,10 @@ const $props = defineProps({
         type: String,
         default: '',
     },
+    limit: {
+        type: Number,
+        default: 20,
+    },
     saveUrl: {
         type: String,
         default: null,
@@ -76,6 +80,7 @@ defineExpose({
     reset,
     hasChanges,
     saveChanges,
+    getChanges,
 });
 
 async function fetch(data) {
@@ -260,6 +265,7 @@ watch(formUrl, async () => {
 <template>
     <VnPaginate
         :url="url"
+        :limit="limit"
         v-bind="$attrs"
         @on-fetch="fetch"
         :skeleton="false"
diff --git a/src/components/ui/VnNotes.vue b/src/components/ui/VnNotes.vue
index 44ef798ec..e85c136e7 100644
--- a/src/components/ui/VnNotes.vue
+++ b/src/components/ui/VnNotes.vue
@@ -75,7 +75,7 @@ async function insert() {
         <QPageSticky position="bottom-right" :offset="[25, 25]" v-if="addNote">
             <QBtn color="primary" icon="add" size="lg" round @click="noteModal = true" />
         </QPageSticky>
-        <QDialog v-model="noteModal" @hide="newNote = ''">
+        <QDialog v-model="noteModal" @hide="newNote = ''" persistent>
             <QCard>
                 <QCardSection>
                     <QItem class="q-px-none">
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 093806567..128fe2db1 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -96,8 +96,7 @@ export function useArrayData(key, userOptions) {
         });
 
         const { limit } = filter;
-
-        hasMoreData.value = response.data.length >= limit;
+        hasMoreData.value = limit && response.data.length >= limit;
 
         if (append) {
             if (!store.data) store.data = [];
diff --git a/src/pages/Claim/Card/ClaimLines.vue b/src/pages/Claim/Card/ClaimLines.vue
index 89703c64b..c4a7db201 100644
--- a/src/pages/Claim/Card/ClaimLines.vue
+++ b/src/pages/Claim/Card/ClaimLines.vue
@@ -121,11 +121,6 @@ async function fetchMana() {
     mana.value = response.data;
 }
 
-async function updateQuantity({ id, quantity }) {
-    if (!id) return;
-    await axios.patch(`ClaimBeginnings/${id}`, { quantity });
-}
-
 async function updateDiscount({ saleFk, discount, canceller }) {
     const body = { salesIds: [saleFk], newDiscount: discount };
     const claimId = claim.value.ticketFk;
@@ -155,6 +150,10 @@ function showImportDialog() {
         })
         .onOk(() => claimLinesForm.value.reload());
 }
+
+function saveWhenHasChanges() {
+    claimLinesForm.value.getChanges().updates && claimLinesForm.value.onSubmit();
+}
 </script>
 <template>
     <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
@@ -181,161 +180,135 @@ function showImportDialog() {
         @on-fetch="onFetchClaim"
         auto-load
     />
-    <div class="column items-center">
-        <div class="list">
-            <CrudModel
-                data-key="ClaimLines"
-                ref="claimLinesForm"
-                :url="`Claims/${route.params.id}/lines`"
-                save-url="ClaimBeginnings/crud"
-                :filter="linesFilter"
-                @on-fetch="onFetch"
-                @save-changes="onFetch"
-                v-model:selected="selected"
-                :default-save="false"
-                :default-reset="false"
-                auto-load
-            >
-                <template #body="{ rows }">
-                    <QTable
-                        :columns="columns"
-                        :rows="rows"
-                        :dense="$q.screen.lt.md"
-                        row-key="id"
-                        selection="multiple"
-                        v-model:selected="selected"
-                        :grid="$q.screen.lt.md"
-                    >
-                        <template #body-cell-claimed="{ row, value }">
-                            <QTd auto-width align="right" class="text-primary">
-                                <span>{{ value }}</span>
-
-                                <QPopupEdit
-                                    v-model="row.quantity"
-                                    v-slot="scope"
-                                    :title="t('Claimed quantity')"
-                                    @update:model-value="updateQuantity(row)"
-                                    buttons
-                                >
-                                    <QInput
-                                        v-model="scope.value"
-                                        type="number"
-                                        dense
-                                        autofocus
-                                        @keyup.enter="scope.set"
-                                        @focus="($event) => $event.target.select()"
-                                    />
-                                </QPopupEdit>
-                            </QTd>
-                        </template>
-                        <template #body-cell-description="{ row, value }">
-                            <QTd auto-width align="right" class="text-primary">
-                                {{ value }}
-                                <ItemDescriptorProxy
-                                    :id="row.sale.itemFk"
-                                ></ItemDescriptorProxy>
-                            </QTd>
-                        </template>
-                        <template #body-cell-discount="{ row, value, rowIndex }">
-                            <QTd auto-width align="right" class="text-primary">
-                                {{ value }}
-                                <VnDiscount
-                                    :quantity="row.quantity"
-                                    :price="row.sale.price"
-                                    :discount="row.sale.discount"
-                                    :mana="mana"
-                                    :promise="updateDiscount"
-                                    :data="{ saleFk: row.sale.id, rowIndex: rowIndex }"
-                                    @on-update="onUpdateDiscount"
-                                />
-                            </QTd>
-                        </template>
-                        <!-- View for grid mode -->
-                        <template #item="props">
-                            <div
-                                class="q-mb-md col-12 grid-style-transition"
-                                :style="props.selected ? 'transform: scale(0.95);' : ''"
-                            >
-                                <QCard>
-                                    <QCardSection>
-                                        <QCheckbox v-model="props.selected" />
-                                    </QCardSection>
-                                    <QSeparator inset />
-                                    <QList dense>
-                                        <QItem
-                                            v-for="column of props.cols"
-                                            :key="column.name"
-                                        >
-                                            <QItemSection>
-                                                <QItemLabel caption>
-                                                    {{ column.label }}
+    <div class="q-pa-md">
+        <CrudModel
+            data-key="ClaimLines"
+            ref="claimLinesForm"
+            :url="`Claims/${route.params.id}/lines`"
+            save-url="ClaimBeginnings/crud"
+            :filter="linesFilter"
+            @on-fetch="onFetch"
+            @save-changes="onFetch"
+            v-model:selected="selected"
+            :default-save="false"
+            :default-reset="false"
+            auto-load
+            :limit="0"
+        >
+            <template #body="{ rows }">
+                <QTable
+                    :columns="columns"
+                    :rows="rows"
+                    :dense="$q.screen.lt.md"
+                    row-key="id"
+                    selection="multiple"
+                    v-model:selected="selected"
+                    :grid="$q.screen.lt.md"
+                >
+                    <template #body-cell-claimed="{ row }">
+                        <QTd auto-width align="right" class="text-primary">
+                            <QInput
+                                v-model="row.quantity"
+                                type="number"
+                                dense
+                                @keyup.enter="saveWhenHasChanges()"
+                                @blur="saveWhenHasChanges()"
+                            />
+                        </QTd>
+                    </template>
+                    <template #body-cell-description="{ row, value }">
+                        <QTd auto-width align="right" class="text-primary">
+                            {{ value }}
+                            <ItemDescriptorProxy
+                                :id="row.sale.itemFk"
+                            ></ItemDescriptorProxy>
+                        </QTd>
+                    </template>
+                    <template #body-cell-discount="{ row, value, rowIndex }">
+                        <QTd auto-width align="right" class="text-primary">
+                            {{ value }}
+                            <VnDiscount
+                                :quantity="row.quantity"
+                                :price="row.sale.price"
+                                :discount="row.sale.discount"
+                                :mana="mana"
+                                :promise="updateDiscount"
+                                :data="{ saleFk: row.sale.id, rowIndex: rowIndex }"
+                                @on-update="onUpdateDiscount"
+                            />
+                        </QTd>
+                    </template>
+                    <!-- View for grid mode -->
+                    <template #item="props">
+                        <div
+                            class="q-mb-md col-12 grid-style-transition"
+                            :style="props.selected ? 'transform: scale(0.95);' : ''"
+                        >
+                            <QCard>
+                                <QCardSection>
+                                    <QCheckbox v-model="props.selected" />
+                                </QCardSection>
+                                <QSeparator inset />
+                                <QList dense>
+                                    <QItem
+                                        v-for="column of props.cols"
+                                        :key="column.name"
+                                    >
+                                        <QItemSection>
+                                            <QItemLabel caption>
+                                                {{ column.label }}
+                                            </QItemLabel>
+                                        </QItemSection>
+                                        <QItemSection side>
+                                            <template v-if="column.name === 'claimed'">
+                                                <QItemLabel class="text-primary">
+                                                    <QInput
+                                                        v-model="props.row.quantity"
+                                                        type="number"
+                                                        dense
+                                                        autofocus
+                                                        @keyup.enter="
+                                                            saveWhenHasChanges()
+                                                        "
+                                                        @blur="saveWhenHasChanges()"
+                                                    />
                                                 </QItemLabel>
-                                            </QItemSection>
-                                            <QItemSection side>
-                                                <template
-                                                    v-if="column.name === 'claimed'"
-                                                >
-                                                    <QItemLabel class="text-primary">
-                                                        {{ column.value }}
-                                                        <QPopupEdit
-                                                            v-model="props.row.quantity"
-                                                            v-slot="scope"
-                                                            :title="t('Claimed quantity')"
-                                                            @update:model-value="
-                                                                updateQuantity(props.row)
-                                                            "
-                                                            buttons
-                                                        >
-                                                            <QInput
-                                                                v-model="scope.value"
-                                                                type="number"
-                                                                dense
-                                                                autofocus
-                                                                @keyup.enter="scope.set"
-                                                                @focus="
-                                                                    ($event) =>
-                                                                        $event.target.select()
-                                                                "
-                                                            />
-                                                        </QPopupEdit>
-                                                    </QItemLabel>
-                                                </template>
-                                                <template
-                                                    v-else-if="column.name === 'discount'"
-                                                >
-                                                    <QItemLabel class="text-primary">
-                                                        {{ column.value }}
-                                                        <VnDiscount
-                                                            :quantity="props.row.quantity"
-                                                            :price="props.row.sale.price"
-                                                            :discount="
-                                                                props.row.sale.discount
-                                                            "
-                                                            :mana="mana"
-                                                            :promise="updateDiscount"
-                                                            :data="{
-                                                                saleFk: props.row.sale.id,
-                                                                rowIndex: props.rowIndex,
-                                                            }"
-                                                            @on-update="onUpdateDiscount"
-                                                        />
-                                                    </QItemLabel>
-                                                </template>
-                                                <template v-else>
-                                                    <QItemLabel>
-                                                        {{ column.value }}
-                                                    </QItemLabel>
-                                                </template>
-                                            </QItemSection>
-                                        </QItem>
-                                    </QList>
-                                </QCard>
-                            </div>
-                        </template>
-                    </QTable>
-                </template>
-            </CrudModel>
-        </div>
+                                            </template>
+                                            <template
+                                                v-else-if="column.name === 'discount'"
+                                            >
+                                                <QItemLabel class="text-primary">
+                                                    {{ column.value }}
+                                                    <VnDiscount
+                                                        :quantity="props.row.quantity"
+                                                        :price="props.row.sale.price"
+                                                        :discount="
+                                                            props.row.sale.discount
+                                                        "
+                                                        :mana="mana"
+                                                        :promise="updateDiscount"
+                                                        :data="{
+                                                            saleFk: props.row.sale.id,
+                                                            rowIndex: props.rowIndex,
+                                                        }"
+                                                        @on-update="onUpdateDiscount"
+                                                    />
+                                                </QItemLabel>
+                                            </template>
+                                            <template v-else>
+                                                <QItemLabel>
+                                                    {{ column.value }}
+                                                </QItemLabel>
+                                            </template>
+                                        </QItemSection>
+                                    </QItem>
+                                </QList>
+                            </QCard>
+                        </div>
+                    </template>
+                </QTable>
+            </template>
+        </CrudModel>
     </div>
 
     <QPageSticky position="bottom-right" :offset="[25, 25]">
diff --git a/src/pages/Claim/Card/ClaimLinesImport.vue b/src/pages/Claim/Card/ClaimLinesImport.vue
index d2b28c609..e5c0e38fa 100644
--- a/src/pages/Claim/Card/ClaimLinesImport.vue
+++ b/src/pages/Claim/Card/ClaimLinesImport.vue
@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import FetchData from 'components/FetchData.vue';
 import { toDate, toCurrency, toPercentage } from 'filters/index';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import axios from 'axios';
 
 defineEmits([...useDialogPluginComponent.emits]);
@@ -118,7 +119,6 @@ function cancel() {
                 <QBtn icon="close" flat round dense v-close-popup />
             </QCardSection>
             <QTable
-                class="my-sticky-header-table"
                 :columns="columns"
                 :rows="claimableSales"
                 row-key="saleFk"
@@ -126,7 +126,14 @@ function cancel() {
                 v-model:selected="selected"
                 square
                 flat
-            />
+            >
+                <template #body-cell-description="{ row, value }">
+                    <QTd auto-width align="right" class="link">
+                        {{ value }}
+                        <ItemDescriptorProxy :id="row.itemFk"></ItemDescriptorProxy>
+                    </QTd>
+                </template>
+            </QTable>
             <QSeparator />
             <QCardActions align="right">
                 <QBtn :label="t('globals.cancel')" color="primary" flat @click="cancel" />
@@ -148,33 +155,6 @@ function cancel() {
 }
 </style>
 
-<style lang="scss">
-.my-sticky-header-table {
-    height: 400px;
-
-    thead tr th {
-        position: sticky;
-        z-index: 1;
-    }
-
-    thead tr:first-child th {
-        /* this is when the loading indicator appears */
-        top: 0;
-    }
-
-    &.q-table--loading thead tr:last-child th {
-        /* height of all previous header rows */
-        top: 48px;
-    }
-
-    // /* prevent scrolling behind sticky top row on focus */
-    tbody {
-        /* height of all previous header rows */
-        scroll-margin-top: 48px;
-    }
-}
-</style>
-
 <i18n>
 es:
     Available sales lines: Líneas de venta disponibles
diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index 427943861..888add747 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -222,23 +222,11 @@ function openDialog(dmsId) {
                     </template>
                 </VnLv>
                 <VnLv
-                    :label="t('claim.summary.pickup')"
-                    :value="t(`claim.summary.${claim.pickup}`)"
+                    :label="t('claim.basicData.pickup')"
+                    :value="t(`claim.basicData.${claim.pickup}`)"
                 />
             </QCard>
-            <QCard class="vn-three">
-                <VnTitle
-                    :url="`#/claim/${entityId}/notes`"
-                    :text="t('claim.summary.notes')"
-                />
-                <ClaimNotes
-                    :id="entityId"
-                    :add-note="false"
-                    style="max-height: 300px"
-                    order="created ASC"
-                />
-            </QCard>
-            <QCard class="vn-two" v-if="salesClaimed.length > 0">
+            <QCard class="vn-three" v-if="salesClaimed.length > 0">
                 <VnTitle
                     :url="`#/claim/${entityId}/lines`"
                     :text="t('claim.summary.details')"
@@ -280,6 +268,60 @@ function openDialog(dmsId) {
                     </template>
                 </QTable>
             </QCard>
+            <QCard class="vn-two">
+                <VnTitle
+                    :url="`#/claim/${entityId}/notes`"
+                    :text="t('claim.summary.notes')"
+                />
+                <ClaimNotes
+                    :id="entityId"
+                    :add-note="false"
+                    style="max-height: 300px"
+                    order="created ASC"
+                />
+            </QCard>
+            <QCard class="vn-two" v-if="claimDms.length > 0">
+                <VnTitle
+                    :url="`#/claim/${entityId}/photos`"
+                    :text="t('claim.summary.photos')"
+                />
+                <div class="container">
+                    <div
+                        class="multimedia-container"
+                        v-for="(media, index) of claimDms"
+                        :key="index"
+                    >
+                        <div class="relative-position">
+                            <QIcon
+                                name="play_circle"
+                                color="primary"
+                                size="xl"
+                                class="absolute-center zindex"
+                                v-if="media.isVideo"
+                                @click.stop="openDialog(media.dmsFk)"
+                            >
+                                <QTooltip>Video</QTooltip>
+                            </QIcon>
+                            <QCard class="multimedia relative-position">
+                                <QImg
+                                    :src="media.url"
+                                    class="rounded-borders cursor-pointer fit"
+                                    @click="openDialog(media.dmsFk)"
+                                    v-if="!media.isVideo"
+                                >
+                                </QImg>
+                                <video
+                                    :src="media.url"
+                                    class="rounded-borders cursor-pointer fit"
+                                    muted="muted"
+                                    v-if="media.isVideo"
+                                    @click="openDialog(media.dmsFk)"
+                                />
+                            </QCard>
+                        </div>
+                    </div>
+                </div>
+            </QCard>
             <QCard class="vn-two" v-if="developments.length > 0">
                 <VnTitle
                     :url="claimUrl + 'development'"
@@ -302,49 +344,6 @@ function openDialog(dmsId) {
                     </template>
                 </QTable>
             </QCard>
-            <QCard class="vn-max" v-if="claimDms.length > 0">
-                <VnTitle
-                    :url="`#/claim/${entityId}/photos`"
-                    :text="t('claim.summary.photos')"
-                />
-                <div class="container">
-                    <div
-                        class="multimedia-container"
-                        v-for="(media, index) of claimDms"
-                        :key="index"
-                    >
-                        <div class="relative-position">
-                            <QIcon
-                                name="play_circle"
-                                color="primary"
-                                size="xl"
-                                class="absolute-center zindex"
-                                v-if="media.isVideo"
-                                @click.stop="openDialog(media.dmsFk)"
-                            >
-                                <QTooltip>Video</QTooltip>header
-                            </QIcon>
-                            <QCard class="multimedia relative-position">
-                                <QImg
-                                    :src="media.url"
-                                    class="rounded-borders cursor-pointer fit"
-                                    @click="openDialog(media.dmsFk)"
-                                    v-if="!media.isVideo"
-                                >
-                                </QImg>
-                                <video
-                                    :src="media.url"
-                                    class="rounded-borders cursor-pointer fit"
-                                    muted="muted"
-                                    v-if="media.isVideo"
-                                    @click="openDialog(media.dmsFk)"
-                                />
-                            </QCard>
-                        </div>
-                    </div>
-                </div>
-            </QCard>
-
             <QCard class="vn-max">
                 <VnTitle :url="claimUrl + 'action'" :text="t('claim.summary.actions')" />
                 <div id="slider-container" class="q-px-xl q-py-md">