feat: refs #7874 use badge type

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">
+                            <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>
+                        {{ note.text }}
-                            <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>
                     </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: