feat(VnNotes): refs #6336 better design

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,90 @@ 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
+        <QCardSection horizontal>
-            :data-key="$props.url"
+            <VnAvatar :descriptor="false" :worker-id="1" size="md" />
-            :url="$props.url"
+            <div class="full-width row justify-between q-pa-xs">
-            order="created DESC"
+                <VnUserLink :name="t('New note')" :worker-id="currentUser.id" />
-            :limit="20"
+                {{ t('globals.now') }}
-            :filter="$props.filter"
+            </div>
-            auto-load
+        </QCardSection>
-            ref="vnPaginateRef"
+        <QCardSection class="q-pa-xs q-my-none q-py-none" horizontal>
-        >
+            <QInput
-            <template #body="{ rows }">
+                v-model="newNote"
-                <div class="column items-center full-width">
+                class="full-width"
-                    <QCard
+                type="textarea"
-                        class="q-pa-xs q-mb-sm full-width"
+                :label="t('Add note here...')"
-                        v-for="(note, index) in rows"
+                filled
-                        :key="index"
+                size="lg"
-                    >
+                autogrow
-                        <QCardSection horizontal>
+                autofocus
-                            <slot name="picture">
+                @keyup.ctrl.enter.stop="insert"
-                                <VnAvatar
+                clearable
-                                    :descriptor="false"
+            >
-                                    :worker-id="note.workerFk"
+                <template #append
-                                    size="md"
+                    ><QBtn
-                                />
+                        :title="t('Save (ctrl + Enter)')"
-                            </slot>
+                        icon="save"
-                            <div class="full-width row justify-between q-pa-xs">
+                        color="primary"
-                                <VnUserLink
-                                    :name="`${note.worker.user.nickname}`"
-                                    :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">
-                            <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 = ''" persistent>
-            <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
-                        type="textarea"
-                        :label="t('Add note here...')"
-                        filled
-                        size="lg"
-                        autogrow
-                        v-model="newNote"
-                    ></QInput>
-                </QCardSection>
-                <QCardActions class="justify-end q-mr-sm">
-                    <QBtn
                         flat
-                        :label="t('globals.close')"
-                        color="primary"
-                        v-close-popup
-                    />
-                    <QBtn
-                        :label="t('globals.save')"
-                        color="primary"
-                        v-close-popup
                         @click="insert"
                     />
-                </QCardActions>
+                </template>
-            </QCard>
+            </QInput>
-        </QDialog>
+        </QCardSection>
-    </div>
+    </QCard>
+    <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>
+                        <slot name="picture">
+                            <VnAvatar
+                                :descriptor="false"
+                                :worker-id="note.workerFk"
+                                size="md"
+                            />
+                        </slot>
+                        <div class="full-width row justify-between q-pa-xs">
+                            <VnUserLink
+                                :name="`${note.worker.user.nickname}`"
+                                :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">
+                        <slot name="text">
+                            {{ note.text }}
+                        </slot>
+                    </QCardSection>
+                </QCard>
+            </TransitionGroup>
+        </template>
+    </VnPaginate>
 </template>
 <style lang="scss" scoped>
 .q-card {
@@ -128,9 +123,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/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/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/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);
     });
 });