From ee7c2389b58d2831e33338741129160bd8d2307e Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Wed, 16 Aug 2023 09:03:41 +0200
Subject: [PATCH 1/8] refs 6105 claimNotes and VnNotes created

---
 src/components/ui/AvatarPicture.vue         |  36 +++++
 src/components/ui/VnNotes.vue               | 156 ++++++++++++++++++++
 src/filters/index.js                        |   2 +
 src/filters/toDateHour.js                   |  12 ++
 src/pages/Claim/Card/ClaimCard.vue          |  36 +++--
 src/pages/Claim/Card/ClaimNotes.vue         |  86 +++++++++++
 src/router/modules/claim.js                 |   9 ++
 test/cypress/integration/ClaimNotes.spec.js |  16 ++
 8 files changed, 342 insertions(+), 11 deletions(-)
 create mode 100644 src/components/ui/AvatarPicture.vue
 create mode 100644 src/components/ui/VnNotes.vue
 create mode 100644 src/filters/toDateHour.js
 create mode 100644 src/pages/Claim/Card/ClaimNotes.vue
 create mode 100644 test/cypress/integration/ClaimNotes.spec.js

diff --git a/src/components/ui/AvatarPicture.vue b/src/components/ui/AvatarPicture.vue
new file mode 100644
index 000000000..a28a660c2
--- /dev/null
+++ b/src/components/ui/AvatarPicture.vue
@@ -0,0 +1,36 @@
+<script setup>
+import { useSession } from 'src/composables/useSession';
+const $props = defineProps({
+    worker: { type: Number, required: true },
+    description: { type: String, default: null },
+});
+const session = useSession();
+const token = session.getToken();
+</script>
+<template>
+    <div class="avatar-picture">
+        <QAvatar color="orange">
+            <QImg
+                :src="`/api/Images/user/160x160/${$props.worker}/download?access_token=${token}`"
+                spinner-color="white"
+            />
+        </QAvatar>
+        <div class="description">
+            <slot name="description">
+                <p>
+                    {{ $props.description }}
+                </p>
+            </slot>
+        </div>
+    </div>
+</template>
+<style lang="scss" scoped>
+.avatar-picture {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .description {
+        text-align: center;
+    }
+}
+</style>
diff --git a/src/components/ui/VnNotes.vue b/src/components/ui/VnNotes.vue
new file mode 100644
index 000000000..21c56b0b3
--- /dev/null
+++ b/src/components/ui/VnNotes.vue
@@ -0,0 +1,156 @@
+<script setup>
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import AvatarPicture from 'src/components/ui/AvatarPicture.vue';
+import { toDateHour } from 'src/filters';
+import { ref } from 'vue';
+import axios from 'axios';
+import FetchData from 'components/FetchData.vue';
+import { useI18n } from 'vue-i18n';
+
+const $props = defineProps({
+    id: { type: String, required: true },
+    url: { type: String, default: null },
+    filter: { type: Object, default: () => {} },
+    body: { type: Object, default: () => {} },
+    addNote: { type: Boolean, default: false },
+});
+const { t } = useI18n();
+const notes = ref([]);
+const noteModal = ref(false);
+const newNote = ref('');
+const claimObservationRef = ref();
+
+function setNotes(data) {
+    notes.value = data;
+}
+
+async function fetch() {
+    const body = $props.body;
+    Object.assign(body, { text: newNote.value });
+    await axios.post($props.url, body);
+    claimObservationRef.value.fetch();
+}
+</script>
+<template>
+    <FetchData
+        :url="$props.url"
+        :filter="$props.filter"
+        @on-fetch="setNotes"
+        auto-load
+        ref="claimObservationRef"
+    />
+    <div class="notes" ref="notesContainer">
+        <QDialog v-model="noteModal" persistent>
+            <QCard class="note-dialog q-pa-sm">
+                <QCardSection class="note-dialog__header">
+                    <div class="note-dialog__title">
+                        <QIcon name="draft" class="note-dialog__title-icon" />
+                        <div class="text-h6 note-dialog__title-text">
+                            {{ t('Add note') }}
+                        </div>
+                    </div>
+                    <QBtn icon="close" flat round dense v-close-popup />
+                </QCardSection>
+                <QCardSection class="note-dialog__content">
+                    <QInput
+                        autofocus
+                        type="textarea"
+                        :hint="t('Add note here...')"
+                        filled
+                        autogrow
+                        v-model="newNote"
+                    ></QInput>
+                </QCardSection>
+                <QCardActions class="note-dialog__actions q-mr-md">
+                    <QBtn
+                        flat
+                        :label="t('globals.close')"
+                        color="primary"
+                        v-close-popup
+                    />
+                    <QBtn
+                        :label="t('globals.save')"
+                        color="primary"
+                        v-close-popup
+                        @click="fetch"
+                    />
+                </QCardActions>
+            </QCard>
+        </QDialog>
+        <QCard class="q-pa-md" v-for="(note, index) in notes" :key="index">
+            <div class="picture q-pa-sm">
+                <slot name="picture">
+                    <AvatarPicture :worker="note.workerFk">
+                        <template #description>
+                            <span class="link">
+                                {{ `${note.worker.firstName} ${note.worker.lastName}` }}
+                            </span>
+                            <WorkerDescriptorProxy :id="note.worker.id" />
+                        </template>
+                    </AvatarPicture>
+                </slot>
+            </div>
+            <div class="text">
+                <slot name="text">
+                    {{ note.text }}
+                </slot>
+            </div>
+            <div class="actions">
+                <slot name="actions">
+                    <div>
+                        {{ toDateHour(note.created) }}
+                    </div>
+                </slot>
+            </div>
+        </QCard>
+        <QBtn
+            v-if="addNote"
+            class="add-btn"
+            color="primary"
+            round
+            @click="noteModal = true"
+        >
+            <QIcon name="add" size="md"></QIcon>
+        </QBtn>
+    </div>
+</template>
+<style lang="scss" scoped>
+.q-card {
+    min-width: 350px;
+}
+.note-dialog {
+    display: flex;
+    flex-direction: column;
+    .note-dialog__header {
+        width: 100%;
+        align-self: flex-start;
+        display: flex;
+        justify-content: space-between;
+    }
+    .note-dialog__title {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        color: $primary;
+        font-size: large;
+    }
+    .note-dialog__content {
+        width: 95%;
+    }
+    .note-dialog__actions {
+        align-self: flex-end;
+    }
+}
+.add-btn {
+    width: 70px;
+    height: 70px;
+    position: sticky;
+    left: 95%;
+    bottom: 2%;
+}
+</style>
+<i18n>
+    es:
+        Add note here...: Añadir nota aquí...
+        Add note: Añadir nota
+</i18n>
diff --git a/src/filters/index.js b/src/filters/index.js
index 4d24d9f67..158ce1009 100644
--- a/src/filters/index.js
+++ b/src/filters/index.js
@@ -1,6 +1,7 @@
 import toLowerCase from './toLowerCase';
 import toDate from './toDate';
 import toDateString from './toDateString';
+import toDateHour from './toDateHour';
 import toCurrency from './toCurrency';
 import toPercentage from './toPercentage';
 import toLowerCamel from './toLowerCamel';
@@ -11,6 +12,7 @@ export {
     toLowerCamel,
     toDate,
     toDateString,
+    toDateHour,
     toCurrency,
     toPercentage,
     dashIfEmpty,
diff --git a/src/filters/toDateHour.js b/src/filters/toDateHour.js
new file mode 100644
index 000000000..939352404
--- /dev/null
+++ b/src/filters/toDateHour.js
@@ -0,0 +1,12 @@
+export default function toDateHour(date) {
+    const dateHour = new Date(date).toLocaleDateString('es-ES', {
+        timeZone: 'Europe/Madrid',
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+    });
+    return dateHour;
+}
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index 2691bbc51..cfc06444f 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -3,11 +3,12 @@ import LeftMenu from 'components/LeftMenu.vue';
 import { getUrl } from 'composables/getUrl';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import { useStateStore } from 'stores/useStateStore';
-import { computed, onMounted } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import ClaimDescriptor from './ClaimDescriptor.vue';
 
+import { onMounted } from 'vue';
 const stateStore = useStateStore();
 const { t } = useI18n();
 const route = useRoute();
@@ -21,11 +22,6 @@ const $props = defineProps({
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
-const claimSections = [
-    { name: 'Notes', url: '/note/index', icon: 'draft' },
-    { name: 'Development', url: '/development', icon: 'vn:traceability' },
-    { name: 'Action', url: '/action', icon: 'vn:actions' },
-];
 
 let salixUrl;
 onMounted(async () => {
@@ -49,17 +45,35 @@ onMounted(async () => {
             <QSeparator />
             <QList>
                 <QItem
-                    v-for="section in claimSections"
-                    :key="section.name"
                     active-class="text-primary"
-                    :href="salixUrl + section.url"
+                    :to="`/claim/${entityId}/notes`"
                     clickable
                     v-ripple
                 >
                     <QItemSection avatar>
-                        <QIcon :name="section.icon" />
+                        <QIcon name="draft" />
                     </QItemSection>
-                    <QItemSection> {{ t(section.name) }} </QItemSection>
+                    <QItemSection> {{ t('Notes') }} </QItemSection>
+                </QItem>
+                <QItem
+                    active-class="text-primary"
+                    clickable
+                    v-ripple
+                    :href="`${salixUrl}/development`"
+                >
+                    <QItemSection avatar>
+                        <QIcon name="vn:traceability"></QIcon>
+                    </QItemSection>
+                    <QItemSection>{{ t('Development') }}</QItemSection>
+                </QItem>
+                <QItem
+                    active-class="text-primary"
+                    clickable
+                    v-ripple
+                    :href="`${salixUrl}/action`"
+                >
+                    <QItemSection avatar><QIcon name="vn:actions"></QIcon></QItemSection>
+                    <QItemSection>{{ t('Action') }}</QItemSection>
                 </QItem>
             </QList>
         </QScrollArea>
diff --git a/src/pages/Claim/Card/ClaimNotes.vue b/src/pages/Claim/Card/ClaimNotes.vue
new file mode 100644
index 000000000..c79c9e486
--- /dev/null
+++ b/src/pages/Claim/Card/ClaimNotes.vue
@@ -0,0 +1,86 @@
+<script setup>
+import { useRoute } from 'vue-router';
+import { useState } from 'src/composables/useState';
+import VnNotes from 'src/components/ui/VnNotes.vue';
+
+const route = useRoute();
+const state = useState();
+const user = state.getUser();
+const id = route.params.id;
+
+const claimFilter = {
+    order: 'created DESC',
+    where: { claimFk: id },
+    fields: ['created', 'workerFk', 'text'],
+    include: {
+        relation: 'worker',
+        scope: {
+            fields: ['id', 'firstName', 'lastName'],
+        },
+    },
+};
+
+const body = {
+    claimFk: id,
+    workerFk: user.value.id,
+};
+</script>
+<template>
+    <div class="claim-notes">
+        <VnNotes
+            :add-note="true"
+            :id="id"
+            url="claimObservations"
+            :filter="claimFilter"
+            :body="body"
+        />
+    </div>
+</template>
+<style lang="scss">
+.q-card {
+    width: 100%;
+    max-width: 70em;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+}
+.claim-notes {
+    .notes {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        > * {
+            margin: 10px;
+        }
+        .text {
+            flex: 70%;
+            padding: 10px;
+        }
+        .picture {
+            flex: 15%;
+            .avatar-picture {
+                width: 70px;
+            }
+        }
+        .actions {
+            flex: 15%;
+            align-self: baseline;
+            text-align: center;
+        }
+    }
+}
+@media (max-width: 1150px) {
+    .claim-notes {
+        .text {
+            margin-top: 20px;
+            order: 3;
+            flex: 100%;
+        }
+
+        .actions {
+            text-align: end;
+        }
+    }
+}
+</style>
diff --git a/src/router/modules/claim.js b/src/router/modules/claim.js
index c43ed5012..9f16f9569 100644
--- a/src/router/modules/claim.js
+++ b/src/router/modules/claim.js
@@ -103,6 +103,15 @@ export default {
                     },
                     component: () => import('src/pages/Claim/Card/ClaimLog.vue'),
                 },
+                {
+                    name: 'ClaimNotes',
+                    path: 'notes',
+                    meta: {
+                        title: 'notes',
+                        icon: 'vn:details',
+                    },
+                    component: () => import('src/pages/Claim/Card/ClaimNotes.vue'),
+                },
             ],
         },
     ],
diff --git a/test/cypress/integration/ClaimNotes.spec.js b/test/cypress/integration/ClaimNotes.spec.js
new file mode 100644
index 000000000..9370c7a9e
--- /dev/null
+++ b/test/cypress/integration/ClaimNotes.spec.js
@@ -0,0 +1,16 @@
+/// <reference types="cypress" />
+describe('ClaimNotes', () => {
+    beforeEach(() => {
+        const claimId = 2;
+        cy.login('developer');
+        cy.visit(`/#/claim/${claimId}/notes`);
+    });
+
+    it('should add a new note', () => {
+        const message = 'This is a new message.';
+        cy.get('.add-btn').click();
+        cy.get('.note-dialog__content').type(message);
+        cy.get('.note-dialog__actions .q-btn:nth-child(2)').click();
+        cy.get('.notes > :nth-child(1) > .text').should('have.text', message);
+    });
+});

From 4bac67de38d2ac416536f90e7f211d414862e41c Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 18 Aug 2023 12:12:53 +0200
Subject: [PATCH 2/8] refs 6105 VnNotes and ClaimNotes refactored

---
 src/components/ui/AvatarPicture.vue         |  12 +-
 src/components/ui/VnNotes.vue               | 136 +++++++++-----------
 src/components/ui/VnPaginate.vue            |   2 +-
 src/pages/Claim/Card/ClaimNotes.vue         |  42 +++---
 test/cypress/integration/ClaimNotes.spec.js |   2 +-
 5 files changed, 87 insertions(+), 107 deletions(-)

diff --git a/src/components/ui/AvatarPicture.vue b/src/components/ui/AvatarPicture.vue
index a28a660c2..127bc8970 100644
--- a/src/components/ui/AvatarPicture.vue
+++ b/src/components/ui/AvatarPicture.vue
@@ -8,7 +8,7 @@ const session = useSession();
 const token = session.getToken();
 </script>
 <template>
-    <div class="avatar-picture">
+    <div class="avatar-picture column items-center">
         <QAvatar color="orange">
             <QImg
                 :src="`/api/Images/user/160x160/${$props.worker}/download?access_token=${token}`"
@@ -24,13 +24,3 @@ const token = session.getToken();
         </div>
     </div>
 </template>
-<style lang="scss" scoped>
-.avatar-picture {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    .description {
-        text-align: center;
-    }
-}
-</style>
diff --git a/src/components/ui/VnNotes.vue b/src/components/ui/VnNotes.vue
index 21c56b0b3..c05ecdecf 100644
--- a/src/components/ui/VnNotes.vue
+++ b/src/components/ui/VnNotes.vue
@@ -4,8 +4,8 @@ import AvatarPicture from 'src/components/ui/AvatarPicture.vue';
 import { toDateHour } from 'src/filters';
 import { ref } from 'vue';
 import axios from 'axios';
-import FetchData from 'components/FetchData.vue';
 import { useI18n } from 'vue-i18n';
+import VnPaginate from './VnPaginate.vue';
 
 const $props = defineProps({
     id: { type: String, required: true },
@@ -15,36 +15,75 @@ const $props = defineProps({
     addNote: { type: Boolean, default: false },
 });
 const { t } = useI18n();
-const notes = ref([]);
 const noteModal = ref(false);
 const newNote = ref('');
-const claimObservationRef = ref();
-
-function setNotes(data) {
-    notes.value = data;
-}
+const vnPaginateRef = ref();
 
 async function fetch() {
     const body = $props.body;
     Object.assign(body, { text: newNote.value });
     await axios.post($props.url, body);
-    claimObservationRef.value.fetch();
+    vnPaginateRef.value.fetch();
 }
 </script>
 <template>
-    <FetchData
-        :url="$props.url"
-        :filter="$props.filter"
-        @on-fetch="setNotes"
-        auto-load
-        ref="claimObservationRef"
-    />
-    <div class="notes" ref="notesContainer">
+    <div class="notes">
+        <VnPaginate
+            :data-key="$props.url"
+            :url="$props.url"
+            order="created DESC"
+            :limit="20"
+            :filter="$props.filter"
+            auto-load
+            ref="vnPaginateRef"
+        >
+            <template #body="{ rows }">
+                <QCard class="q-pa-md q-ma-md" v-for="(note, index) in rows" :key="index">
+                    <div class="picture q-pa-sm">
+                        <slot name="picture">
+                            <AvatarPicture :worker="note.workerFk">
+                                <template #description>
+                                    <span class="link">
+                                        {{
+                                            `${note.worker.firstName} ${note.worker.lastName}`
+                                        }}
+                                    </span>
+                                    <WorkerDescriptorProxy :id="note.worker.id" />
+                                </template>
+                            </AvatarPicture>
+                        </slot>
+                    </div>
+                    <div class="text">
+                        <slot name="text">
+                            {{ note.text }}
+                        </slot>
+                    </div>
+                    <div class="actions">
+                        <slot name="actions">
+                            <div>
+                                {{ toDateHour(note.created) }}
+                            </div>
+                        </slot>
+                    </div>
+                </QCard>
+            </template>
+        </VnPaginate>
+        <QPageSticky position="bottom-right" :offset="[25, 25]">
+            <QBtn
+                v-if="addNote"
+                class="add-btn"
+                color="primary"
+                icon="add"
+                size="md"
+                round
+                @click="noteModal = true"
+            />
+        </QPageSticky>
         <QDialog v-model="noteModal" persistent>
-            <QCard class="note-dialog q-pa-sm">
-                <QCardSection class="note-dialog__header">
-                    <div class="note-dialog__title">
-                        <QIcon name="draft" class="note-dialog__title-icon" />
+            <QCard class="note-dialog column q-pa-sm">
+                <QCardSection class="note-dialog__header row self-start justify-between">
+                    <div class="note-dialog__title row items-center text-primary text-h6">
+                        <QIcon name="draft" class="note-dialog__title-icon q-mr-sm" />
                         <div class="text-h6 note-dialog__title-text">
                             {{ t('Add note') }}
                         </div>
@@ -61,7 +100,7 @@ async function fetch() {
                         v-model="newNote"
                     ></QInput>
                 </QCardSection>
-                <QCardActions class="note-dialog__actions q-mr-md">
+                <QCardActions class="note-dialog__actions self-end q-mr-md">
                     <QBtn
                         flat
                         :label="t('globals.close')"
@@ -77,76 +116,23 @@ async function fetch() {
                 </QCardActions>
             </QCard>
         </QDialog>
-        <QCard class="q-pa-md" v-for="(note, index) in notes" :key="index">
-            <div class="picture q-pa-sm">
-                <slot name="picture">
-                    <AvatarPicture :worker="note.workerFk">
-                        <template #description>
-                            <span class="link">
-                                {{ `${note.worker.firstName} ${note.worker.lastName}` }}
-                            </span>
-                            <WorkerDescriptorProxy :id="note.worker.id" />
-                        </template>
-                    </AvatarPicture>
-                </slot>
-            </div>
-            <div class="text">
-                <slot name="text">
-                    {{ note.text }}
-                </slot>
-            </div>
-            <div class="actions">
-                <slot name="actions">
-                    <div>
-                        {{ toDateHour(note.created) }}
-                    </div>
-                </slot>
-            </div>
-        </QCard>
-        <QBtn
-            v-if="addNote"
-            class="add-btn"
-            color="primary"
-            round
-            @click="noteModal = true"
-        >
-            <QIcon name="add" size="md"></QIcon>
-        </QBtn>
     </div>
 </template>
 <style lang="scss" scoped>
 .q-card {
-    min-width: 350px;
+    min-width: 340px;
 }
 .note-dialog {
-    display: flex;
-    flex-direction: column;
     .note-dialog__header {
         width: 100%;
-        align-self: flex-start;
-        display: flex;
-        justify-content: space-between;
-    }
-    .note-dialog__title {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-        color: $primary;
-        font-size: large;
     }
     .note-dialog__content {
         width: 95%;
     }
-    .note-dialog__actions {
-        align-self: flex-end;
-    }
 }
 .add-btn {
     width: 70px;
     height: 70px;
-    position: sticky;
-    left: 95%;
-    bottom: 2%;
 }
 </style>
 <i18n>
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index 2a5b878f5..434ebf232 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -49,6 +49,7 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['onFetch', 'onPaginate']);
+defineExpose({ fetch });
 const isLoading = ref(false);
 const pagination = ref({
     sortBy: props.order,
@@ -82,7 +83,6 @@ async function fetch() {
     if (!arrayData.hasMoreData.value) {
         isLoading.value = false;
     }
-
     emit('onFetch', store.data);
 }
 
diff --git a/src/pages/Claim/Card/ClaimNotes.vue b/src/pages/Claim/Card/ClaimNotes.vue
index c79c9e486..6c8361fde 100644
--- a/src/pages/Claim/Card/ClaimNotes.vue
+++ b/src/pages/Claim/Card/ClaimNotes.vue
@@ -9,7 +9,6 @@ const user = state.getUser();
 const id = route.params.id;
 
 const claimFilter = {
-    order: 'created DESC',
     where: { claimFk: id },
     fields: ['created', 'workerFk', 'text'],
     include: {
@@ -38,7 +37,6 @@ const body = {
 </template>
 <style lang="scss">
 .q-card {
-    width: 100%;
     max-width: 70em;
     display: flex;
     justify-content: space-between;
@@ -50,36 +48,42 @@ const body = {
         display: flex;
         flex-direction: column;
         align-items: center;
-        > * {
-            margin: 10px;
-        }
+
         .text {
-            flex: 70%;
+            width: 70%;
             padding: 10px;
         }
         .picture {
-            flex: 15%;
-            .avatar-picture {
-                width: 70px;
-            }
+            width: 15%;
         }
         .actions {
-            flex: 15%;
+            width: 15%;
             align-self: baseline;
             text-align: center;
         }
     }
 }
-@media (max-width: 1150px) {
+@media (max-width: $breakpoint-md) {
     .claim-notes {
-        .text {
-            margin-top: 20px;
-            order: 3;
-            flex: 100%;
-        }
+        .notes {
+            .picture,
+            .actions {
+                width: 50%;
+            }
+            .picture {
+                .avatar-picture {
+                    width: 135px;
+                }
+            }
+            .text {
+                width: 90%;
+                margin: 0 auto;
+                order: 3;
+            }
 
-        .actions {
-            text-align: end;
+            .actions {
+                text-align: end;
+            }
         }
     }
 }
diff --git a/test/cypress/integration/ClaimNotes.spec.js b/test/cypress/integration/ClaimNotes.spec.js
index 9370c7a9e..2afa0e4fd 100644
--- a/test/cypress/integration/ClaimNotes.spec.js
+++ b/test/cypress/integration/ClaimNotes.spec.js
@@ -11,6 +11,6 @@ describe('ClaimNotes', () => {
         cy.get('.add-btn').click();
         cy.get('.note-dialog__content').type(message);
         cy.get('.note-dialog__actions .q-btn:nth-child(2)').click();
-        cy.get('.notes > :nth-child(1) > .text').should('have.text', message);
+        cy.get('.notes .q-card .text').eq(0).should('have.text', message);
     });
 });

From 1cdd90ea12031f7a5799f6b280e1033e3564b089 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 18 Aug 2023 14:05:10 +0200
Subject: [PATCH 3/8] refs #6126 change package version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 85e0cd72b..d008e6e74 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "23.32.01",
+    "version": "23.34.01",
     "description": "Salix frontend",
     "productName": "Salix",
     "author": "Verdnatura",

From 908243141c77514ecc8785039a36249b00d505d3 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 18 Aug 2023 14:13:49 +0200
Subject: [PATCH 4/8] refs #6080 fix: remove this.

---
 src/components/LeftMenu.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/LeftMenu.vue b/src/components/LeftMenu.vue
index 1aabe1b6b..2eac97c65 100644
--- a/src/components/LeftMenu.vue
+++ b/src/components/LeftMenu.vue
@@ -113,7 +113,7 @@ async function togglePinned(item, event) {
 <template>
     <QList padding class="column-max-width">
         <template v-if="$props.source === 'main'">
-            <template v-if="this.$route?.matched[1]?.name === 'Dashboard'">
+            <template v-if="$route?.matched[1]?.name === 'Dashboard'">
                 <QItem class="header">
                     <QItemSection avatar>
                         <QIcon name="view_module" />
@@ -156,7 +156,7 @@ async function togglePinned(item, event) {
             </template>
 
             <template v-for="item in items" :key="item.name">
-                <template v-if="item.name === this.$route?.matched[1]?.name">
+                <template v-if="item.name === $route?.matched[1]?.name">
                     <QItem class="header">
                         <QItemSection avatar v-if="item.icon">
                             <QIcon :name="item.icon" />

From 9f9a44ee37cb5899181a39db87a0beeeb12db3e0 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 18 Aug 2023 14:34:04 +0200
Subject: [PATCH 5/8] refs 6105 VnNotes refactored with quasar classes

---
 .../ui/{AvatarPicture.vue => VnAvatar.vue}    |  0
 src/components/ui/VnNotes.vue                 | 43 +++++++++------
 src/pages/Claim/Card/ClaimNotes.vue           | 55 +------------------
 3 files changed, 28 insertions(+), 70 deletions(-)
 rename src/components/ui/{AvatarPicture.vue => VnAvatar.vue} (100%)

diff --git a/src/components/ui/AvatarPicture.vue b/src/components/ui/VnAvatar.vue
similarity index 100%
rename from src/components/ui/AvatarPicture.vue
rename to src/components/ui/VnAvatar.vue
diff --git a/src/components/ui/VnNotes.vue b/src/components/ui/VnNotes.vue
index c05ecdecf..12d93073a 100644
--- a/src/components/ui/VnNotes.vue
+++ b/src/components/ui/VnNotes.vue
@@ -1,6 +1,6 @@
 <script setup>
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
-import AvatarPicture from 'src/components/ui/AvatarPicture.vue';
+import VnAvatar from 'src/components/ui/VnAvatar.vue';
 import { toDateHour } from 'src/filters';
 import { ref } from 'vue';
 import axios from 'axios';
@@ -19,7 +19,7 @@ const noteModal = ref(false);
 const newNote = ref('');
 const vnPaginateRef = ref();
 
-async function fetch() {
+async function insert() {
     const body = $props.body;
     Object.assign(body, { text: newNote.value });
     await axios.post($props.url, body);
@@ -27,7 +27,7 @@ async function fetch() {
 }
 </script>
 <template>
-    <div class="notes">
+    <div class="notes row justify-center">
         <VnPaginate
             :data-key="$props.url"
             :url="$props.url"
@@ -38,10 +38,14 @@ async function fetch() {
             ref="vnPaginateRef"
         >
             <template #body="{ rows }">
-                <QCard class="q-pa-md q-ma-md" v-for="(note, index) in rows" :key="index">
-                    <div class="picture q-pa-sm">
+                <QCard
+                    class="row justify-between items-center flex-wrap-wrap q-pa-md q-ma-md"
+                    v-for="(note, index) in rows"
+                    :key="index"
+                >
+                    <div class="picture q-pa-sm col-6 col-lg-2">
                         <slot name="picture">
-                            <AvatarPicture :worker="note.workerFk">
+                            <VnAvatar :worker="note.workerFk">
                                 <template #description>
                                     <span class="link">
                                         {{
@@ -50,15 +54,15 @@ async function fetch() {
                                     </span>
                                     <WorkerDescriptorProxy :id="note.worker.id" />
                                 </template>
-                            </AvatarPicture>
+                            </VnAvatar>
                         </slot>
                     </div>
-                    <div class="text">
+                    <div class="text q-mx-auto q-pa-xs col col-lg-8">
                         <slot name="text">
                             {{ note.text }}
                         </slot>
                     </div>
-                    <div class="actions">
+                    <div class="actions self-baseline text-right col-6 col-lg-2">
                         <slot name="actions">
                             <div>
                                 {{ toDateHour(note.created) }}
@@ -74,7 +78,7 @@ async function fetch() {
                 class="add-btn"
                 color="primary"
                 icon="add"
-                size="md"
+                size="xl"
                 round
                 @click="noteModal = true"
             />
@@ -96,6 +100,7 @@ async function fetch() {
                         type="textarea"
                         :hint="t('Add note here...')"
                         filled
+                        size="lg"
                         autogrow
                         v-model="newNote"
                     ></QInput>
@@ -111,7 +116,7 @@ async function fetch() {
                         :label="t('globals.save')"
                         color="primary"
                         v-close-popup
-                        @click="fetch"
+                        @click="insert"
                     />
                 </QCardActions>
             </QCard>
@@ -120,19 +125,25 @@ async function fetch() {
 </template>
 <style lang="scss" scoped>
 .q-card {
+    max-width: 60em;
     min-width: 340px;
 }
 .note-dialog {
-    .note-dialog__header {
+    &__header {
         width: 100%;
     }
-    .note-dialog__content {
+    &__content {
         width: 95%;
     }
 }
-.add-btn {
-    width: 70px;
-    height: 70px;
+
+@media (max-width: $breakpoint-md) {
+    .avatar-picture {
+        width: 135px;
+    }
+    .text {
+        order: 3;
+    }
 }
 </style>
 <i18n>
diff --git a/src/pages/Claim/Card/ClaimNotes.vue b/src/pages/Claim/Card/ClaimNotes.vue
index 6c8361fde..9e587533a 100644
--- a/src/pages/Claim/Card/ClaimNotes.vue
+++ b/src/pages/Claim/Card/ClaimNotes.vue
@@ -25,7 +25,7 @@ const body = {
 };
 </script>
 <template>
-    <div class="claim-notes">
+    <div class="claim-notes col items-center">
         <VnNotes
             :add-note="true"
             :id="id"
@@ -35,56 +35,3 @@ const body = {
         />
     </div>
 </template>
-<style lang="scss">
-.q-card {
-    max-width: 70em;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-}
-.claim-notes {
-    .notes {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        .text {
-            width: 70%;
-            padding: 10px;
-        }
-        .picture {
-            width: 15%;
-        }
-        .actions {
-            width: 15%;
-            align-self: baseline;
-            text-align: center;
-        }
-    }
-}
-@media (max-width: $breakpoint-md) {
-    .claim-notes {
-        .notes {
-            .picture,
-            .actions {
-                width: 50%;
-            }
-            .picture {
-                .avatar-picture {
-                    width: 135px;
-                }
-            }
-            .text {
-                width: 90%;
-                margin: 0 auto;
-                order: 3;
-            }
-
-            .actions {
-                text-align: end;
-            }
-        }
-    }
-}
-</style>

From 330db88cccae077df31bc0d852d2df9f364009f9 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 24 Aug 2023 14:56:26 +0200
Subject: [PATCH 6/8] refs #6105 replaced css by QuasarComponents

---
 src/components/ui/VnNotes.vue               | 86 +++++++--------------
 src/i18n/en/index.js                        |  1 +
 src/i18n/es/index.js                        |  1 +
 src/pages/Claim/Card/ClaimCard.vue          | 11 ---
 src/pages/Claim/Card/ClaimNotes.vue         |  2 +-
 src/router/modules/claim.js                 | 11 ++-
 test/cypress/integration/ClaimNotes.spec.js | 13 ++--
 7 files changed, 47 insertions(+), 78 deletions(-)

diff --git a/src/components/ui/VnNotes.vue b/src/components/ui/VnNotes.vue
index 12d93073a..dbc30ae74 100644
--- a/src/components/ui/VnNotes.vue
+++ b/src/components/ui/VnNotes.vue
@@ -27,7 +27,7 @@ async function insert() {
 }
 </script>
 <template>
-    <div class="notes row justify-center">
+    <div class="column items-center">
         <VnPaginate
             :data-key="$props.url"
             :url="$props.url"
@@ -38,63 +38,51 @@ async function insert() {
             ref="vnPaginateRef"
         >
             <template #body="{ rows }">
-                <QCard
-                    class="row justify-between items-center flex-wrap-wrap q-pa-md q-ma-md"
-                    v-for="(note, index) in rows"
-                    :key="index"
-                >
-                    <div class="picture q-pa-sm col-6 col-lg-2">
+                <QCard class="q-pa-md" v-for="(note, index) in rows" :key="index">
+                    <QCardSection horizontal>
                         <slot name="picture">
-                            <VnAvatar :worker="note.workerFk">
-                                <template #description>
-                                    <span class="link">
-                                        {{
-                                            `${note.worker.firstName} ${note.worker.lastName}`
-                                        }}
-                                    </span>
-                                    <WorkerDescriptorProxy :id="note.worker.id" />
-                                </template>
-                            </VnAvatar>
+                            <VnAvatar :worker="note.workerFk" />
                         </slot>
-                    </div>
-                    <div class="text q-mx-auto q-pa-xs col col-lg-8">
+                        <QItem class="full-width justify-between items-start">
+                            <span class="link">
+                                {{ `${note.worker.firstName} ${note.worker.lastName}` }}
+                                <WorkerDescriptorProxy :id="note.worker.id" />
+                            </span>
+                            <slot name="actions">
+                                {{ toDateHour(note.created) }}
+                            </slot>
+                        </QItem>
+                    </QCardSection>
+                    <QCardSection>
                         <slot name="text">
                             {{ note.text }}
                         </slot>
-                    </div>
-                    <div class="actions self-baseline text-right col-6 col-lg-2">
-                        <slot name="actions">
-                            <div>
-                                {{ toDateHour(note.created) }}
-                            </div>
-                        </slot>
-                    </div>
+                    </QCardSection>
                 </QCard>
             </template>
         </VnPaginate>
         <QPageSticky position="bottom-right" :offset="[25, 25]">
             <QBtn
                 v-if="addNote"
-                class="add-btn"
                 color="primary"
                 icon="add"
-                size="xl"
+                size="lg"
                 round
                 @click="noteModal = true"
             />
         </QPageSticky>
         <QDialog v-model="noteModal" persistent>
-            <QCard class="note-dialog column q-pa-sm">
-                <QCardSection class="note-dialog__header row self-start justify-between">
-                    <div class="note-dialog__title row items-center text-primary text-h6">
-                        <QIcon name="draft" class="note-dialog__title-icon q-mr-sm" />
-                        <div class="text-h6 note-dialog__title-text">
+            <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') }}
-                        </div>
-                    </div>
-                    <QBtn icon="close" flat round dense v-close-popup />
+                        </span>
+                        <QBtn icon="close" flat round dense v-close-popup />
+                    </QItem>
                 </QCardSection>
-                <QCardSection class="note-dialog__content">
+                <QCardSection>
                     <QInput
                         autofocus
                         type="textarea"
@@ -105,7 +93,7 @@ async function insert() {
                         v-model="newNote"
                     ></QInput>
                 </QCardSection>
-                <QCardActions class="note-dialog__actions self-end q-mr-md">
+                <QCardActions class="justify-end q-mr-sm">
                     <QBtn
                         flat
                         :label="t('globals.close')"
@@ -125,25 +113,7 @@ async function insert() {
 </template>
 <style lang="scss" scoped>
 .q-card {
-    max-width: 60em;
-    min-width: 340px;
-}
-.note-dialog {
-    &__header {
-        width: 100%;
-    }
-    &__content {
-        width: 95%;
-    }
-}
-
-@media (max-width: $breakpoint-md) {
-    .avatar-picture {
-        width: 135px;
-    }
-    .text {
-        order: 3;
-    }
+    max-width: 80em;
 }
 </style>
 <i18n>
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 4cafee136..d7519ba53 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -266,6 +266,7 @@ export default {
             rma: 'RMA',
             photos: 'Photos',
             log: 'Audit logs',
+            notes: 'Notes',
         },
         list: {
             customer: 'Customer',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 13e3fd626..fc2c80f55 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -265,6 +265,7 @@ export default {
             rma: 'RMA',
             photos: 'Fotos',
             log: 'Registros de auditoría',
+            notes: 'Notas',
         },
         list: {
             customer: 'Cliente',
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index cfc06444f..9f1ecc416 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -44,17 +44,6 @@ onMounted(async () => {
             <LeftMenu source="card" />
             <QSeparator />
             <QList>
-                <QItem
-                    active-class="text-primary"
-                    :to="`/claim/${entityId}/notes`"
-                    clickable
-                    v-ripple
-                >
-                    <QItemSection avatar>
-                        <QIcon name="draft" />
-                    </QItemSection>
-                    <QItemSection> {{ t('Notes') }} </QItemSection>
-                </QItem>
                 <QItem
                     active-class="text-primary"
                     clickable
diff --git a/src/pages/Claim/Card/ClaimNotes.vue b/src/pages/Claim/Card/ClaimNotes.vue
index 9e587533a..94b53c8a2 100644
--- a/src/pages/Claim/Card/ClaimNotes.vue
+++ b/src/pages/Claim/Card/ClaimNotes.vue
@@ -25,7 +25,7 @@ const body = {
 };
 </script>
 <template>
-    <div class="claim-notes col items-center">
+    <div class="col items-center">
         <VnNotes
             :add-note="true"
             :id="id"
diff --git a/src/router/modules/claim.js b/src/router/modules/claim.js
index 9f16f9569..40aaef73b 100644
--- a/src/router/modules/claim.js
+++ b/src/router/modules/claim.js
@@ -11,7 +11,14 @@ export default {
     redirect: { name: 'ClaimMain' },
     menus: {
         main: ['ClaimList', 'ClaimRmaList'],
-        card: ['ClaimBasicData', 'ClaimLines', 'ClaimRma', 'ClaimPhotos', 'ClaimLog'],
+        card: [
+            'ClaimBasicData',
+            'ClaimLines',
+            'ClaimRma',
+            'ClaimPhotos',
+            'ClaimLog',
+            'ClaimNotes',
+        ],
     },
     children: [
         {
@@ -108,7 +115,7 @@ export default {
                     path: 'notes',
                     meta: {
                         title: 'notes',
-                        icon: 'vn:details',
+                        icon: 'draft',
                     },
                     component: () => import('src/pages/Claim/Card/ClaimNotes.vue'),
                 },
diff --git a/test/cypress/integration/ClaimNotes.spec.js b/test/cypress/integration/ClaimNotes.spec.js
index 2afa0e4fd..5b52dd339 100644
--- a/test/cypress/integration/ClaimNotes.spec.js
+++ b/test/cypress/integration/ClaimNotes.spec.js
@@ -1,16 +1,17 @@
 /// <reference types="cypress" />
 describe('ClaimNotes', () => {
     beforeEach(() => {
-        const claimId = 2;
         cy.login('developer');
-        cy.visit(`/#/claim/${claimId}/notes`);
+        cy.visit(`/#/claim/${2}/notes`);
     });
 
     it('should add a new note', () => {
         const message = 'This is a new message.';
-        cy.get('.add-btn').click();
-        cy.get('.note-dialog__content').type(message);
-        cy.get('.note-dialog__actions .q-btn:nth-child(2)').click();
-        cy.get('.notes .q-card .text').eq(0).should('have.text', message);
+        cy.get('.q-page-sticky button').click();
+        cy.get('.q-dialog .q-card__section:nth-child(2)').type(message);
+        cy.get('.q-card__actions button:nth-child(2)').click();
+        cy.get('.q-card .q-card__section:nth-child(2)')
+            .eq(0)
+            .should('have.text', message);
     });
 });

From 75e0f4c7febd91be45bb68c45d7358b8805f2239 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 24 Aug 2023 14:59:11 +0200
Subject: [PATCH 7/8] refs #6105 spacing card notes

---
 src/components/ui/VnNotes.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/VnNotes.vue b/src/components/ui/VnNotes.vue
index dbc30ae74..139b0ab5a 100644
--- a/src/components/ui/VnNotes.vue
+++ b/src/components/ui/VnNotes.vue
@@ -38,7 +38,7 @@ async function insert() {
             ref="vnPaginateRef"
         >
             <template #body="{ rows }">
-                <QCard class="q-pa-md" v-for="(note, index) in rows" :key="index">
+                <QCard class="q-pa-md q-mb-md" v-for="(note, index) in rows" :key="index">
                     <QCardSection horizontal>
                         <slot name="picture">
                             <VnAvatar :worker="note.workerFk" />

From fc4ed81e38cc4c8f5d1192d5aa5b7ff993051445 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 25 Aug 2023 10:46:03 +0200
Subject: [PATCH 8/8] test to dev

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index afcf4b291..2e96d2ccf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "23.32.01",
+    "version": "23.36.01",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
diff --git a/package.json b/package.json
index d008e6e74..b713c906a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "23.34.01",
+    "version": "23.36.01",
     "description": "Salix frontend",
     "productName": "Salix",
     "author": "Verdnatura",