refactor: refs #8304 improving attrs handling and simplify logic in VnNotes, VnSubToolbar, and WorkerCalendar

src/components/ui/VnNotes.vue

@@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios';
-import { ref, reactive } from 'vue';
+import { ref, reactive, useAttrs } from 'vue';
 import { onBeforeRouteLeave } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
@@ -18,6 +18,8 @@ import VnInput from 'components/common/VnInput.vue';
 
 const emit = defineEmits(['onFetch']);
 
+const $attrs = useAttrs();
+
 const $props = defineProps({
     url: { type: String, default: null },
     saveUrl: {type: String, default: null},
@@ -26,7 +28,6 @@ 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();
@@ -64,7 +65,7 @@ function confirmAndUpdate() {
                     message: t('Are you sure remove this note?'),
                 },
             })
-            .onOk(() => update())
+            .onOk(update)
             .onCancel(() => {
                 newNote.text = originalText;
             });
@@ -82,7 +83,7 @@ async function update() {
 }
 
 onBeforeRouteLeave((to, from, next) => {
-    if ((newNote.text && !$props.justInput) || (newNote.text !== originalText) && $props.justInput )
+    if ((newNote.text && !$props.justInput) || (newNote.text !== originalText) && $props.justInput)
         quasar.dialog({
             component: VnConfirm,
             componentProps: {
@@ -93,6 +94,13 @@ onBeforeRouteLeave((to, from, next) => {
         });
     else next();
 });
+
+function fetchData([ data ]) {
+    newNote.text = data?.notes;
+    originalText = data?.notes;
+    emit('onFetch', data);
+}
+
 </script>
 <template>
     <FetchData
@@ -106,13 +114,13 @@ onBeforeRouteLeave((to, from, next) => {
         v-if="justInput"
         :url="url"
         :filter="filter"
-        @on-fetch="(data) => (newNote.text = data[0]?.notes, originalText = data[0]?.notes, emit('onFetch', data))"
+        @on-fetch="fetchData"
         auto-load
     />
     <QCard 
         class="q-pa-xs q-mb-lg full-width" 
+        :class="{ 'just-input': $props.justInput }"
         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') }}
@@ -126,7 +134,7 @@ onBeforeRouteLeave((to, from, next) => {
                     v-model="newNote.observationTypeFk"
                     option-label="description"
                     style="flex: 0.15"
-                    :required="$props.required"
+                    :required="$attrs.required"
                     @keyup.enter.stop="insert"
                 />
                 <VnInput
@@ -137,7 +145,7 @@ onBeforeRouteLeave((to, from, next) => {
                     size="lg"
                     autogrow
                     @keyup.enter.stop="handleClick"
-                    :required="$props.required"
+                    :required="$attrs.required"
                     clearable
                 >
                     <template #append>
@@ -250,6 +258,11 @@ onBeforeRouteLeave((to, from, next) => {
         }
     }
 }
+.just-input {
+    padding-right: 18px;
+    margin-bottom: 2px;
+    box-shadow: none;
+}
 </style>
 <i18n>
     es:

src/components/ui/VnSubToolbar.vue

@@ -26,9 +26,7 @@ onMounted(() => {
     if (data.value) observer.observe(data.value, opts);
 });
 
-const actionsChildCount = () => {
-    return !!actions.value?.childNodes?.length;
-};
+const actionsChildCount = computed(() => !!actions.value?.childNodes?.length);
 
 onBeforeUnmount(() => stateStore.toggleSubToolbar() && hasSubToolbar);
 </script>

src/pages/Customer/Card/CustomerNotes.vue

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

src/pages/Worker/Card/WorkerCalendar.vue

@@ -205,7 +205,6 @@ watch([year, businessFk], () => refreshData());
                 }
             "
             :body="body"
-            :required="false"
         />
     </Teleport>
     <QPage class="column items-center">

src/pages/Worker/Card/WorkerCalendarFilter.vue

@@ -221,7 +221,7 @@ const yearList = ref(generateYears());
             >
                 {{ type.name }}
             </WorkerEventLabel>
-    </QItem>
+        </QItem>
     </QList>
     <QSeparator />
     <QList dense class="list q-my-md no-pointer-events">