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
+                <QCard class="q-pa-md" v-for="(note, index) in rows" :key="index">
-                    class="row justify-between items-center flex-wrap-wrap q-pa-md q-ma-md"
+                    <QCardSection horizontal>
-                    v-for="(note, index) in rows"
-                    :key="index"
-                >
-                    <div class="picture q-pa-sm col-6 col-lg-2">
                         <slot name="picture">
-                            <VnAvatar :worker="note.workerFk">
+                            <VnAvatar :worker="note.workerFk" />
-                                <template #description>
-                                    <span class="link">
-                                        {{
-                                            `${note.worker.firstName} ${note.worker.lastName}`
-                                        }}
-                                    </span>
-                                    <WorkerDescriptorProxy :id="note.worker.id" />
-                                </template>
-                            </VnAvatar>
                         </slot>
-                    </div>
+                        <QItem class="full-width justify-between items-start">
-                    <div class="text q-mx-auto q-pa-xs col col-lg-8">
+                            <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>
+                    </QCardSection>
-                    <div class="actions self-baseline text-right col-6 col-lg-2">
-                        <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="xl"
+                size="lg"
                 round
                 @click="noteModal = true"
             />
         </QPageSticky>
         <QDialog v-model="noteModal" persistent>
-            <QCard class="note-dialog column q-pa-sm">
+            <QCard>
-                <QCardSection class="note-dialog__header row self-start justify-between">
+                <QCardSection>
-                    <div class="note-dialog__title row items-center text-primary text-h6">
+                    <QItem class="q-px-none">
-                        <QIcon name="draft" class="note-dialog__title-icon q-mr-sm" />
+                        <span class="text-primary text-h6 full-width">
-                        <div class="text-h6 note-dialog__title-text">
+                            <QIcon name="draft" class="q-mr-xs" />
                             {{ t('Add note') }}
-                        </div>
+                        </span>
-                    </div>
                         <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;
+    max-width: 80em;
-    min-width: 340px;
-}
-.note-dialog {
-    &__header {
-        width: 100%;
-    }
-    &__content {
-        width: 95%;
-    }
-}
-
-@media (max-width: $breakpoint-md) {
-    .avatar-picture {
-        width: 135px;
-    }
-    .text {
-        order: 3;
-    }
 }
 </style>
 <i18n>

src/i18n/en/index.js

@@ -266,6 +266,7 @@ export default {
             rma: 'RMA',
             photos: 'Photos',
             log: 'Audit logs',
+            notes: 'Notes',
         },
         list: {
             customer: 'Customer',

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',

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

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"

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'),
                 },

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('.q-page-sticky button').click();
-        cy.get('.note-dialog__content').type(message);
+        cy.get('.q-dialog .q-card__section:nth-child(2)').type(message);
-        cy.get('.note-dialog__actions .q-btn:nth-child(2)').click();
+        cy.get('.q-card__actions button:nth-child(2)').click();
-        cy.get('.notes .q-card .text').eq(0).should('have.text', message);
+        cy.get('.q-card .q-card__section:nth-child(2)')
+            .eq(0)
+            .should('have.text', message);
     });
 });