feat: refs #8304 add justInput prop to VnNotes for simplified note handling in workerCalendar

src/components/ui/VnNotes.vue

@@ -22,6 +22,7 @@ const $props = defineProps({
     body: { type: Object, default: () => {} },
     addNote: { type: Boolean, default: false },
     selectType: { type: Boolean, default: false },
+    justInput: { type: Boolean, default: false },
 });
 
 const { t } = useI18n();
@@ -29,6 +30,13 @@ const quasar = useQuasar();
 const newNote = reactive({ text: null, observationTypeFk: null });
 const observationTypes = ref([]);
 const vnPaginateRef = ref();
+let originalText;
+
+function handleClick(e) {
+    if (e.shiftKey && e.key === 'Enter') return;
+    if ($props.justInput) update();
+    else insert();
+}
 
 async function insert() {
     if (!newNote.text || ($props.selectType && !newNote.observationTypeFk)) return;
@@ -41,8 +49,37 @@ async function insert() {
     await axios.post($props.url, newBody);
     await vnPaginateRef.value.fetch();
 }
+
+
+async function update() {
+    if(!newNote.text && originalText)
+        quasar
+            .dialog({
+                component: VnConfirm,
+                componentProps: {
+                    title: t('New note is empty'),
+                    message: t('Are you sure remove this note?'),
+                },
+            })
+            .onOk(() => save())
+            .onCancel(() => {
+                newNote.text = originalText;
+            });
+    else save();
+}
+
+async function save() {
+    originalText = newNote.text;
+    const body = $props.body;
+    const newBody = {
+        ...body,
+        ...{ notes: newNote.text },
+    };
+    await axios.patch(`${$props.url}/${$props.body.workerFk}`, newBody);
+}
+
 onBeforeRouteLeave((to, from, next) => {
-    if (newNote.text)
+    if ((newNote.text && !$props.justInput) || (newNote.text !== originalText) && $props.justInput )
         quasar.dialog({
             component: VnConfirm,
             componentProps: {
@@ -62,8 +99,19 @@ onBeforeRouteLeave((to, from, next) => {
         auto-load
         @on-fetch="(data) => (observationTypes = data)"
     />    
-    <QCard class="q-pa-xs q-mb-lg full-width" v-if="$props.addNote">
+    <FetchData
-        <QCardSection horizontal>
+        v-if="justInput"
+        url="Businesses"
+        :filter="filter"
+        @on-fetch="(data) => (newNote.text = data[0]?.notes, originalText = data[0]?.notes)"
+        auto-load
+    />
+    <QCard 
+        class="q-pa-xs q-mb-lg full-width"
+        v-if="$props.addNote || $props.justInput"
+        :style="$props.justInput ? 'padding-right: 18px; margin-bottom: 2px; box-shadow: none;' : ''"
+    >
+        <QCardSection horizontal v-if="!$props.justInput">
             {{ t('New note') }}
         </QCardSection>
         <QCardSection class="q-px-xs q-my-none q-py-none">
@@ -85,7 +133,7 @@ onBeforeRouteLeave((to, from, next) => {
                     filled
                     size="lg"
                     autogrow
-                    @keyup.enter.stop="insert"
+                    @keyup.enter.stop="handleClick"
                     clearable
                     :required="true"
                 >
@@ -95,7 +143,7 @@ onBeforeRouteLeave((to, from, next) => {
                             icon="save"
                             color="primary"
                             flat
-                            @click="insert"
+                            @click="handleClick"
                             class="q-mb-xs"
                             dense
                             data-cy="saveNote"
@@ -106,6 +154,7 @@ onBeforeRouteLeave((to, from, next) => {
         </QCardSection>
     </QCard>
     <VnPaginate
+        v-if="!$props.justInput"
         :data-key="$props.url"
         :url="$props.url"
         order="created DESC"

src/pages/Worker/Card/WorkerCalendar.vue

@@ -2,6 +2,7 @@
 import { nextTick, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
+import { useRouter } from 'vue-router';
 
 import WorkerCalendarFilter from 'pages/Worker/Card/WorkerCalendarFilter.vue';
 import FetchData from 'components/FetchData.vue';
@@ -9,8 +10,8 @@ import WorkerCalendarItem from 'pages/Worker/Card/WorkerCalendarItem.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import axios from 'axios';
+import VnNotes from 'src/components/ui/VnNotes.vue';
 
-import { useRouter } from 'vue-router';
 const router = useRouter();
 const stateStore = useStateStore();
 const route = useRoute();
@@ -28,6 +29,9 @@ const contractHolidays = ref(null);
 const yearHolidays = ref(null);
 const eventsMap = ref({});
 const festiveEventsMap = ref({});
+const body = {
+    workerFk: route.params.id,
+};
 
 const onFetchActiveContract = (data) => {
     if (!data) return;
@@ -181,6 +185,15 @@ watch([year, businessFk], () => refreshData());
             :year-holidays="yearHolidays"
         />
     </Teleport>
+    <div>
+            <VnNotes
+                :just-input="true"
+                :url="`businesses`"
+                :body="body"
+                :maxlength=10
+                :filter="{ fields: ['id', 'notes'], where: { workerFk: route.params.id }, order: 'started DESC' }"
+            />
+    </div>
     <QPage class="column items-center">
         <QCard v-if="workerIsFreelance">
             <QCardSection class="text-center">
@@ -229,6 +242,7 @@ watch([year, businessFk], () => refreshData());
 }
 </style>
 
+
 <i18n>
 en:
     addAbsencesText: To start adding absences, click an absence type from the right menu and then on the day you want to add an absence