refs 6105 VnNotes refactored with quasar classes

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>

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>