refs 6105 VnNotes and ClaimNotes refactored

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>

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,75 +15,38 @@ const $props = defineProps({
     addNote: { type: Boolean, default: false },
 });
 const { t } = useI18n();
-const notes = ref([]);
 const noteModal = ref(false);
 const newNote = ref('');
-const claimObservationRef = ref();
+const vnPaginateRef = 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();
+    vnPaginateRef.value.fetch();
 }
 </script>
 <template>
-    <FetchData
+    <div class="notes">
+        <VnPaginate
+            :data-key="$props.url"
             :url="$props.url"
+            order="created DESC"
+            :limit="20"
             :filter="$props.filter"
-        @on-fetch="setNotes"
             auto-load
-        ref="claimObservationRef"
+            ref="vnPaginateRef"
-    />
+        >
-    <div class="notes" ref="notesContainer">
+            <template #body="{ rows }">
-        <QDialog v-model="noteModal" persistent>
+                <QCard class="q-pa-md q-ma-md" v-for="(note, index) in rows" :key="index">
-            <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}` }}
+                                        {{
+                                            `${note.worker.firstName} ${note.worker.lastName}`
+                                        }}
                                     </span>
                                     <WorkerDescriptorProxy :id="note.worker.id" />
                                 </template>
@@ -103,50 +66,73 @@ async function fetch() {
                         </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"
-        >
+            />
-            <QIcon name="add" size="md"></QIcon>
+        </QPageSticky>
-        </QBtn>
+        <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">
+                            {{ 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 self-end 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>
     </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>

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);
 }
 

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,32 +48,37 @@ const body = {
         display: flex;
         flex-direction: column;
         align-items: center;
-        > * {
+
-            margin: 10px;
-        }
         .text {
-            flex: 70%;
+            width: 70%;
             padding: 10px;
         }
         .picture {
-            flex: 15%;
+            width: 15%;
-            .avatar-picture {
-                width: 70px;
-            }
         }
         .actions {
-            flex: 15%;
+            width: 15%;
             align-self: baseline;
             text-align: center;
         }
     }
 }
-@media (max-width: 1150px) {
+@media (max-width: $breakpoint-md) {
     .claim-notes {
+        .notes {
+            .picture,
+            .actions {
+                width: 50%;
+            }
+            .picture {
+                .avatar-picture {
+                    width: 135px;
+                }
+            }
             .text {
-            margin-top: 20px;
+                width: 90%;
+                margin: 0 auto;
                 order: 3;
-            flex: 100%;
             }
 
             .actions {
@@ -83,4 +86,5 @@ const body = {
             }
         }
     }
+}
 </style>

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);
     });
 });