feat: refs #8304 add required prop to VnNotes and update related components

src/components/ui/VnNotes.vue

@@ -26,6 +26,7 @@ const $props = defineProps({
     addNote: { type: Boolean, default: false },
     selectType: { type: Boolean, default: false },
     justInput: { type: Boolean, default: false },
+    required: { type: Boolean, default: false },
 });
 
 const { t } = useI18n();
@@ -53,7 +54,6 @@ async function insert() {
     await vnPaginateRef.value.fetch();
 }
 
-
 function confirmAndUpdate() {
     if(!newNote.text && originalText)
         quasar
@@ -126,19 +126,19 @@ onBeforeRouteLeave((to, from, next) => {
                     v-model="newNote.observationTypeFk"
                     option-label="description"
                     style="flex: 0.15"
-                    :required="true"
+                    :required="$props.required"
                     @keyup.enter.stop="insert"
                 />
                 <VnInput
                     v-model.trim="newNote.text"
                     type="textarea"
-                    :label="t('Add note here...')"
+                    :label="$props.justInput && newNote.text ? '' : t('Add note here...')"
                     filled
                     size="lg"
                     autogrow
                     @keyup.enter.stop="handleClick"
+                    :required="$props.required"
                     clearable
-                    :required="true"
                 >
                     <template #append>
                         <QBtn
@@ -257,4 +257,6 @@ onBeforeRouteLeave((to, from, next) => {
         New note: Nueva nota
         Save (Enter): Guardar (Intro)
         Observation type: Tipo de observación
+        New note is empty: La nueva nota esta vacia
+        Are you sure remove this note?: Estas seguro de quitar esta nota?
 </i18n>

src/components/ui/VnSubToolbar.vue

@@ -1,8 +1,10 @@
 <script setup>
 import { onMounted, onBeforeUnmount, ref } from 'vue';
 import { useStateStore } from 'stores/useStateStore';
+import { computed } from 'vue';
 
 const stateStore = useStateStore();
+const general = ref(null);
 const actions = ref(null);
 const data = ref(null);
 const opts = { subtree: true, childList: true, attributes: true };
@@ -12,35 +14,44 @@ onMounted(() => {
     stateStore.toggleSubToolbar();
     actions.value = document.querySelector('#st-actions');
     data.value = document.querySelector('#st-data');
+    general.value = document.querySelector('#st-default');
 
-    if (!actions.value && !data.value) return;
+    if (!actions.value && !data.value && !general.value) return;
 
     // Check if there's content to display
     const observer = new MutationObserver(
         () =>
             (hasContent.value =
-                actions.value?.childNodes?.length + data.value?.childNodes?.length)
+                actions.value?.childNodes?.length + data.value?.childNodes?.length + general.value?.childNodes?.length)
     );
     if (actions.value) observer.observe(actions.value, opts);
     if (data.value) observer.observe(data.value, opts);
+    if (general.value) observer.observe(general.value, opts);
 });
 
-onBeforeUnmount(() => stateStore.toggleSubToolbar());
+const generalChildCount = () => {
+    return !!general.value.childNodes.length;
+}
+
+onBeforeUnmount(() => stateStore.toggleSubToolbar() && hasSubToolbar);
 </script>
 
 <template>
     <QToolbar
         id="subToolbar"
-        class="justify-end sticky"
+        v-show="hasContent || $slots['st-actions'] || $slots['st-data'] || $slots['st-default']"
-        v-show="hasContent || $slots['st-actions'] || $slots['st-data']"
+        :class="{'justify-end': !generalChildCount, 'sticky': !generalChildCount}"
     >
-        <slot name="st-data">
+        <slot>
-            <div id="st-data"></div>
+            <div :class="{'full-width' : generalChildCount, 'q-px-none': generalChildCount }" id="st-default"></div>
-        </slot>
-        <QSpace />
-        <slot name="st-actions">
-            <div id="st-actions"></div>
         </slot>
+                <slot name="st-data">
+                    <div id="st-data"></div>
+                </slot>
+                <QSpace />
+                <slot name="st-actions">
+                    <div id="st-actions"></div>
+                </slot>
     </QToolbar>
 </template>
 <style lang="scss" scoped>

src/pages/Customer/Card/CustomerNotes.vue

@@ -23,5 +23,6 @@ const noteFilter = computed(() => {
         :body="{ clientFk: route.params.id }"
         style="overflow-y: auto"
         :select-type="true"
+        :required="true"
     />
 </template>

src/pages/Worker/Card/WorkerCalendar.vue

@@ -193,20 +193,18 @@ watch([year, businessFk], () => refreshData());
             :year-holidays="yearHolidays"
         />
     </Teleport>
-    <div>
+    <Teleport to="#st-default" v-if="stateStore.isSubToolbarShown()">
-            <VnNotes
+        <VnNotes
-                v-if="canSeeNotes"
+            v-if="canSeeNotes"
-                :just-input="true"
+            :just-input="true"
-                :url="`Workers/${route.params.id}/business`"
+            :url="`Workers/${route.params.id}/business`"
-                :filter="{fields: ['id', 'notes', 'workerFk']}"
+            :filter="{fields: ['id', 'notes', 'workerFk']}"
-                :save-url="saveUrl"
+            :save-url="saveUrl"
-                @on-fetch="(data) => {
+            @on-fetch="(data) => { saveUrl = `Businesses/${data[0].id}` }"
-                    console.log(data);
+            :body="body"
-                    saveUrl = `Businesses/${data[0].id}`
+            :required="false"
-                }"
+        />
-                :body="body"
+    </Teleport>
-            />
-    </div>
     <QPage class="column items-center">
         <QCard v-if="workerIsFreelance">
             <QCardSection class="text-center">