From 709a662ceb2e3d600a37676a02049ebf089611c7 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 26 Sep 2024 09:08:12 +0200
Subject: [PATCH] feat: refs #7874  select observation type

---
 src/components/ui/VnNotes.vue             | 117 +++++++++++++++-------
 src/pages/Customer/Card/CustomerNotes.vue |   1 +
 2 files changed, 81 insertions(+), 37 deletions(-)

diff --git a/src/components/ui/VnNotes.vue b/src/components/ui/VnNotes.vue
index bf5e86a16..143cd2bf9 100644
--- a/src/components/ui/VnNotes.vue
+++ b/src/components/ui/VnNotes.vue
@@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios';
-import { ref } from 'vue';
+import { ref, reactive } from 'vue';
 import { onBeforeRouteLeave } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
@@ -12,36 +12,39 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnUserLink from 'components/ui/VnUserLink.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import VnAvatar from 'components/ui/VnAvatar.vue';
+import VnRow from './VnRow.vue';
+import VnSelect from '../common/VnSelect.vue';
+import FetchData from '../FetchData.vue';
+import VnInput from '../common/VnInput.vue';
 
 const $props = defineProps({
     url: { type: String, default: null },
     filter: { type: Object, default: () => {} },
     body: { type: Object, default: () => {} },
     addNote: { type: Boolean, default: false },
+    selectType: { type: Boolean, default: false },
 });
 
 const { t } = useI18n();
 const state = useState();
 const quasar = useQuasar();
 const currentUser = ref(state.getUser());
-const newNote = ref('');
+const newNote = reactive({ text: '', observationTypeFk: null });
+const observationTypes = ref([]);
 const vnPaginateRef = ref();
-function handleKeyUp(event) {
-    if (event.key === 'Enter') {
-        event.preventDefault();
-        if (!event.shiftKey) insert();
-    }
-}
+
 async function insert() {
     const body = $props.body;
-    const newBody = { ...body, ...{ text: newNote.value } };
+    const newBody = {
+        ...body,
+        ...{ text: newNote.text, observationTypeFk: newNote.observationTypeFk },
+    };
     await axios.post($props.url, newBody);
     await vnPaginateRef.value.fetch();
-    newNote.value = '';
 }
 
 onBeforeRouteLeave((to, from, next) => {
-    if (newNote.value)
+    if (newNote.text)
         quasar.dialog({
             component: VnConfirm,
             componentProps: {
@@ -54,6 +57,12 @@ onBeforeRouteLeave((to, from, next) => {
 });
 </script>
 <template>
+    <FetchData
+        url="ObservationTypes"
+        :filter="{ fields: ['id', 'description'] }"
+        :auto-load="selectType"
+        @on-fetch="(data) => observationTypes.push(...data)"
+    />
     <QCard class="q-pa-xs q-mb-xl full-width" v-if="$props.addNote">
         <QCardSection horizontal>
             <VnAvatar :worker-id="currentUser.id" size="md" />
@@ -62,29 +71,38 @@ onBeforeRouteLeave((to, from, next) => {
                 {{ t('globals.now') }}
             </div>
         </QCardSection>
-        <QCardSection class="q-pa-xs q-my-none q-py-none" horizontal>
-            <QInput
-                v-model="newNote"
-                class="full-width"
-                type="textarea"
-                :label="t('Add note here...')"
-                filled
-                size="lg"
-                autogrow
-                autofocus
-                @keyup="handleKeyUp"
-                clearable
-            >
-                <template #append>
-                    <QBtn
-                        :title="t('Save (Enter)')"
-                        icon="save"
-                        color="primary"
-                        flat
-                        @click="insert"
-                    />
-                </template>
-            </QInput>
+        <QCardSection class="q-px-xs q-my-none q-py-none">
+            <VnRow class="full-width">
+                <VnSelect
+                    :label="t('Observation type')"
+                    v-if="selectType"
+                    url="ObservationTypes"
+                    v-model="newNote.observationTypeFk"
+                    option-label="description"
+                    style="flex: 0.15; margin-left: 0"
+                />
+                <VnInput
+                    v-model.trim="newNote.text"
+                    type="textarea"
+                    :label="t('Add note here...')"
+                    filled
+                    size="lg"
+                    autogrow
+                    autofocus
+                    @keyup.enter="insert"
+                    clearable
+                >
+                    <template #append>
+                        <QBtn
+                            :title="t('Save (Enter)')"
+                            icon="save"
+                            color="primary"
+                            flat
+                            @click="insert"
+                        />
+                    </template>
+                </VnInput>
+            </VnRow>
         </QCardSection>
     </QCard>
     <VnPaginate
@@ -98,6 +116,10 @@ onBeforeRouteLeave((to, from, next) => {
         class="show"
         v-bind="$attrs"
         search-url="notes"
+        @on-fetch="
+            newNote.text = '';
+            newNote.observationTypeFk = null;
+        "
     >
         <template #body="{ rows }">
             <TransitionGroup name="list" tag="div" class="column items-center full-width">
@@ -111,17 +133,38 @@ onBeforeRouteLeave((to, from, next) => {
                             :descriptor="false"
                             :worker-id="note.workerFk"
                             size="md"
+                            :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"
                             />
-                            {{ toDateHourMin(note.created) }}
+                            <span v-text="toDateHourMin(note.created)" />
                         </div>
                     </QCardSection>
                     <QCardSection class="q-pa-xs q-my-none q-py-none">
-                        {{ note.text }}
+                        <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>
                     </QCardSection>
                 </QCard>
             </TransitionGroup>
@@ -156,5 +199,5 @@ onBeforeRouteLeave((to, from, next) => {
         Add note here...: Añadir nota aquí...
         New note: Nueva nota
         Save (Enter): Guardar (Intro)
-
+        Observation type: Tipo de observación
 </i18n>
diff --git a/src/pages/Customer/Card/CustomerNotes.vue b/src/pages/Customer/Card/CustomerNotes.vue
index a9121f7f5..b85174696 100644
--- a/src/pages/Customer/Card/CustomerNotes.vue
+++ b/src/pages/Customer/Card/CustomerNotes.vue
@@ -22,5 +22,6 @@ const noteFilter = computed(() => {
         :filter="noteFilter"
         :body="{ clientFk: route.params.id }"
         style="overflow-y: auto"
+        :select-type="true"
     />
 </template>