From 4ff3c18f33bc8738655b27c0c1ba20c991591d2d Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 14 Oct 2024 13:00:15 +0200
Subject: [PATCH] feat: refs #7874 use badge type

---
 src/components/ui/VnNotes.vue | 69 +++++++++++++++++++----------------
 1 file changed, 37 insertions(+), 32 deletions(-)

diff --git a/src/components/ui/VnNotes.vue b/src/components/ui/VnNotes.vue
index 63b21f92ad..98a5114840 100644
--- a/src/components/ui/VnNotes.vue
+++ b/src/components/ui/VnNotes.vue
@@ -81,7 +81,7 @@ onBeforeRouteLeave((to, from, next) => {
                     url="ObservationTypes"
                     v-model="newNote.observationTypeFk"
                     option-label="description"
-                    style="flex: 0.15; margin-left: 0"
+                    style="flex: 0.15"
                     :required="true"
                     @keyup.enter.stop="insert"
                 />
@@ -142,35 +142,29 @@ onBeforeRouteLeave((to, from, next) => {
                             :title="note.worker?.user.nickname"
                         />
                         <div class="full-width row justify-between q-pa-xs">
-                            <VnUserLink
-                                :name="`${note.worker.user.nickname}`"
-                                :worker-id="note.worker.id"
-                            />
+                            <div>
+                                <VnUserLink
+                                    :name="`${note.worker.user.nickname}`"
+                                    :worker-id="note.worker.id"
+                                />
+                                <QBadge
+                                    class="q-ml-xs"
+                                    outline
+                                    color="grey"
+                                    v-if="selectType && note.observationTypeFk"
+                                >
+                                    {{
+                                        observationTypes.find(
+                                            (ot) => ot.id === note.observationTypeFk
+                                        )?.description
+                                    }}
+                                </QBadge>
+                            </div>
                             <span v-text="toDateHourMin(note.created)" />
                         </div>
                     </QCardSection>
                     <QCardSection class="q-pa-xs q-my-none q-py-none">
-                        <VnRow>
-                            <VnSelect
-                                :label="t('Observation type')"
-                                v-if="selectType && note.observationTypeFk"
-                                url="ObservationTypes"
-                                v-model="note.observationTypeFk"
-                                option-label="description"
-                                style="flex: 0.15"
-                                dense
-                                readonly
-                                :is-clearable="false"
-                            />
-                            <span
-                                :style="{
-                                    flex: 0.85,
-                                    'align-self':
-                                        selectType & $q.screen.gt.xs ? 'end' : 'baseline',
-                                }"
-                                v-text="note.text"
-                            />
-                        </VnRow>
+                        {{ note.text }}
                     </QCardSection>
                 </QCard>
             </TransitionGroup>
@@ -180,12 +174,6 @@ onBeforeRouteLeave((to, from, next) => {
 <style lang="scss" scoped>
 .q-card {
     width: 90%;
-    @media (max-width: $breakpoint-sm) {
-        width: 100%;
-    }
-    &__section {
-        word-wrap: break-word;
-    }
 }
 .q-dialog .q-card {
     width: 400px;
@@ -199,6 +187,23 @@ onBeforeRouteLeave((to, from, next) => {
     opacity: 0;
     background-color: $primary;
 }
+
+.vn-row > :nth-child(2) {
+    margin-left: 0;
+}
+
+@media (max-width: $breakpoint-xs) {
+    .vn-row > :deep(*) {
+        margin-left: 0;
+    }
+    .q-card {
+        width: 100%;
+
+        &__section {
+            padding: 0;
+        }
+    }
+}
 </style>
 <i18n>
     es: