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"

src/components/ui/VnNotes.vue

@@ -6,6 +6,7 @@ import axios from 'axios';
 import { useI18n } from 'vue-i18n';
 import VnPaginate from './VnPaginate.vue';
 import VnUserLink from '../ui/VnUserLink.vue';
+import { useState } from 'src/composables/useState';
 
 const $props = defineProps({
     url: { type: String, default: null },
@@ -13,8 +14,10 @@ const $props = defineProps({
     body: { type: Object, default: () => {} },
     addNote: { type: Boolean, default: false },
 });
+
 const { t } = useI18n();
-const noteModal = ref(false);
+const state = useState();
+const currentUser = ref(state.getUser());
 const newNote = ref('');
 const vnPaginateRef = ref();
 
@@ -22,98 +25,83 @@ async function insert() {
     const body = $props.body;
     Object.assign(body, { text: newNote.value });
     await axios.post($props.url, body);
-    vnPaginateRef.value.fetch();
+    await vnPaginateRef.value.fetch();
     newNote.value = '';
 }
 </script>
 <template>
-    <div class="column items-center full-height full-width">
+    <QCard class="q-pa-xs q-mb-xl full-width" v-if="$props.addNote">
-        <VnPaginate
-            :data-key="$props.url"
-            :url="$props.url"
-            order="created DESC"
-            :limit="20"
-            :filter="$props.filter"
-            auto-load
-            ref="vnPaginateRef"
-        >
-            <template #body="{ rows }">
-                <div class="column items-center full-width">
-                    <QCard
-                        class="q-pa-xs q-mb-sm full-width"
-                        v-for="(note, index) in rows"
-                        :key="index"
-                    >
         <QCardSection horizontal>
-                            <slot name="picture">
+            <VnAvatar :descriptor="false" :worker-id="1" size="md" />
-                                <VnAvatar
-                                    :descriptor="false"
-                                    :worker-id="note.workerFk"
-                                    size="md"
-                                />
-                            </slot>
             <div class="full-width row justify-between q-pa-xs">
-                                <VnUserLink
+                <VnUserLink :name="t('New note')" :worker-id="currentUser.id" />
-                                    :name="`${note.worker.user.nickname}`"
+                {{ t('globals.now') }}
-                                    :worker-id="note.worker.id"
-                                />
-
-                                <slot name="actions">
-                                    {{ toDateHour(note.created) }}
-                                </slot>
             </div>
         </QCardSection>
-                        <QCardSection class="q-pa-xs q-my-none q-py-none">
+        <QCardSection class="q-pa-xs q-my-none q-py-none" horizontal>
-                            <slot name="text">
-                                {{ note.text }}
-                            </slot>
-                        </QCardSection>
-                    </QCard>
-                </div>
-            </template>
-        </VnPaginate>
-        <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 = ''">
-            <QCard>
-                <QCardSection>
-                    <QItem class="q-px-none">
-                        <span class="text-primary text-h6 full-width">
-                            <QIcon name="draft" class="q-mr-xs" />
-                            {{ t('Add note') }}
-                        </span>
-                        <QBtn icon="close" flat round dense v-close-popup />
-                    </QItem>
-                </QCardSection>
-                <QCardSection>
             <QInput
-                        autofocus
+                v-model="newNote"
+                class="full-width"
                 type="textarea"
                 :label="t('Add note here...')"
                 filled
                 size="lg"
                 autogrow
-                        v-model="newNote"
+                autofocus
-                    ></QInput>
+                @keyup.ctrl.enter.stop="insert"
-                </QCardSection>
+                clearable
-                <QCardActions class="justify-end q-mr-sm">
+            >
-                    <QBtn
+                <template #append
+                    ><QBtn
+                        :title="t('Save (ctrl + Enter)')"
+                        icon="save"
+                        color="primary"
                         flat
-                        :label="t('globals.close')"
-                        color="primary"
-                        v-close-popup
-                    />
-                    <QBtn
-                        :label="t('globals.save')"
-                        color="primary"
-                        v-close-popup
                         @click="insert"
                     />
-                </QCardActions>
+                </template>
+            </QInput>
+        </QCardSection>
     </QCard>
-        </QDialog>
+    <VnPaginate
+        :data-key="$props.url"
+        :url="$props.url"
+        order="created DESC"
+        :limit="0"
+        :filter="$props.filter"
+        auto-load
+        ref="vnPaginateRef"
+        class="show"
+        v-bind="$attrs"
+    >
+        <template #body="{ rows }">
+            <TransitionGroup name="list" tag="div" class="column items-center full-width">
+                <QCard
+                    class="q-pa-xs q-mb-sm full-width"
+                    v-for="note in rows"
+                    :key="note.id"
+                >
+                    <QCardSection horizontal>
+                        <VnAvatar
+                            :descriptor="false"
+                            :worker-id="note.workerFk"
+                            size="md"
+                        />
+                        <div class="full-width row justify-between q-pa-xs">
+                            <VnUserLink
+                                :name="`${note.worker.user.nickname}`"
+                                :worker-id="note.worker.id"
+                            />
+                            {{ toDateHour(note.created) }}
                         </div>
+                    </QCardSection>
+                    <QCardSection class="q-pa-xs q-my-none q-py-none">
+                        {{ note.text }}
+                    </QCardSection>
+                </QCard>
+            </TransitionGroup>
+        </template>
+    </VnPaginate>
 </template>
 <style lang="scss" scoped>
 .q-card {
@@ -128,9 +116,20 @@ async function insert() {
 .q-dialog .q-card {
     width: 400px;
 }
+.list-enter-active,
+.list-leave-active {
+    transition: all 1s ease;
+}
+.list-enter-from,
+.list-leave-to {
+    opacity: 0;
+    background-color: $primary;
+}
 </style>
 <i18n>
     es:
         Add note here...: Añadir nota aquí...
-        Add note: Añadir nota
+        New note: Nueva nota
+        Save (ctrl + Enter): Guardar (Ctrl + Intro)
+
 </i18n>

src/composables/useArrayData.js

@@ -96,9 +96,9 @@ export function useArrayData(key, userOptions) {
         });
 
         const { limit } = filter;
-
+        hasMoreData.value = limit && response.data.length >= limit;
-        hasMoreData.value = response.data.length >= limit;
         store.hasMoreData = hasMoreData.value;
+
         if (append) {
             if (!store.data) store.data = [];
             for (const row of response.data) store.data.push(row);

src/i18n/locale/en.yml

@@ -90,6 +90,7 @@ globals:
         parkingList: Parkings list
     created: Created
     worker: Worker
+    now: Now
 errors:
     statusUnauthorized: Access denied
     statusInternalServerError: An internal server error has ocurred

src/i18n/locale/es.yml

@@ -90,6 +90,7 @@ globals:
         parkingList: Listado de parkings
     created: Fecha creación
     worker: Trabajador
+    now: Ahora
 errors:
     statusUnauthorized: Acceso denegado
     statusInternalServerError: Ha ocurrido un error interno del servidor

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,8 +180,7 @@ function showImportDialog() {
         @on-fetch="onFetchClaim"
         auto-load
     />
-    <div class="column items-center">
+    <div class="q-pa-md">
-        <div class="list">
         <CrudModel
             data-key="ClaimLines"
             ref="claimLinesForm"
@@ -195,6 +193,7 @@ function showImportDialog() {
             :default-save="false"
             :default-reset="false"
             auto-load
+            :limit="0"
         >
             <template #body="{ rows }">
                 <QTable
@@ -206,26 +205,15 @@ function showImportDialog() {
                     v-model:selected="selected"
                     :grid="$q.screen.lt.md"
                 >
-                        <template #body-cell-claimed="{ row, value }">
+                    <template #body-cell-claimed="{ row }">
                         <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"
+                                v-model="row.quantity"
                                 type="number"
                                 dense
-                                        autofocus
+                                @keyup.enter="saveWhenHasChanges()"
-                                        @keyup.enter="scope.set"
+                                @blur="saveWhenHasChanges()"
-                                        @focus="($event) => $event.target.select()"
                             />
-                                </QPopupEdit>
                         </QTd>
                     </template>
                     <template #body-cell-description="{ row, value }">
@@ -272,32 +260,18 @@ function showImportDialog() {
                                             </QItemLabel>
                                         </QItemSection>
                                         <QItemSection side>
-                                                <template
+                                            <template v-if="column.name === 'claimed'">
-                                                    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"
+                                                        v-model="props.row.quantity"
                                                         type="number"
                                                         dense
                                                         autofocus
-                                                                @keyup.enter="scope.set"
+                                                        @keyup.enter="
-                                                                @focus="
+                                                            saveWhenHasChanges()
-                                                                    ($event) =>
-                                                                        $event.target.select()
                                                         "
+                                                        @blur="saveWhenHasChanges()"
                                                     />
-                                                        </QPopupEdit>
                                                 </QItemLabel>
                                             </template>
                                             <template
@@ -336,7 +310,6 @@ function showImportDialog() {
             </template>
         </CrudModel>
     </div>
-    </div>
 
     <QPageSticky position="bottom-right" :offset="[25, 25]">
         <QBtn fab color="primary" icon="add" @click="showImportDialog()" />

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

src/pages/Claim/Card/ClaimNotes.vue

@@ -38,10 +38,11 @@ const body = {
 </script>
 <template>
     <VnNotes
-        style="overflow-y: auto"
-        :add-note="$props.addNote"
         url="claimObservations"
+        :add-note="$props.addNote"
         :filter="claimFilter"
         :body="body"
+        v-bind="$attrs"
+        style="overflow-y: auto"
     />
 </template>

src/pages/Claim/Card/ClaimSummary.vue

@@ -222,8 +222,8 @@ function openDialog(dmsId) {
                     </template>
                 </VnLv>
                 <VnLv
-                    :label="t('claim.summary.pickup')"
+                    :label="t('claim.basicData.pickup')"
-                    :value="t(`claim.summary.${claim.pickup}`)"
+                    :value="t(`claim.basicData.${claim.pickup}`)"
                 />
             </QCard>
             <QCard class="vn-three">
@@ -280,6 +280,48 @@ function openDialog(dmsId) {
                     </template>
                 </QTable>
             </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">

src/pages/Worker/Card/WorkerNotes.vue

@@ -28,11 +28,5 @@ const body = {
 </script>
 
 <template>
-    <VnNotes
+    <VnNotes :add-note="true" url="WorkerObservations" :filter="filter" :body="body" />
-        style="overflow-y: auto"
-        :add-note="{ type: Boolean, default: true }"
-        url="WorkerObservations"
-        :filter="filter"
-        :body="body"
-    />
 </template>

test/cypress/integration/claim/claimNotes.spec.js

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 describe('ClaimNotes', () => {
     beforeEach(() => {
         cy.login('developer');
@@ -7,11 +6,8 @@ describe('ClaimNotes', () => {
 
     it('should add a new note', () => {
         const message = 'This is a new message.';
-        cy.get('.q-page-sticky > div > button').click();
+        cy.get('.q-textarea').type(message);
-        cy.get('.q-dialog .q-card__section:nth-child(2)').type(message);
+        cy.get('.q-field__append > .q-btn > .q-btn__content > .q-icon').click(); //save
-        cy.get('.q-card__actions button:nth-child(2)').click();
+        cy.get(':nth-child(1) > .q-card__section--vert').should('have.text', message);
-        cy.get('.q-card .q-card__section:nth-child(2)')
-            .eq(0)
-            .should('have.text', message);
     });
 });