src/components/ui/VnSubToolbar.vue

@@ -4,7 +4,6 @@ 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 };
@@ -14,24 +13,22 @@ 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 && !general.value) return;
+    if (!actions.value && !data.value) return;
 
     // Check if there's content to display
     const observer = new MutationObserver(
         () =>
             (hasContent.value =
-                actions.value?.childNodes?.length + data.value?.childNodes?.length + general.value?.childNodes?.length)
+                actions.value?.childNodes?.length + data.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);
 });
 
-const generalChildCount = () => {
+const actionsChildCount = () => {
-    return !!general.value.childNodes.length;
+    return !!actions.value.childNodes.length;
-}
+};
 
 onBeforeUnmount(() => stateStore.toggleSubToolbar() && hasSubToolbar);
 </script>
@@ -39,19 +36,16 @@ onBeforeUnmount(() => stateStore.toggleSubToolbar() && hasSubToolbar);
 <template>
     <QToolbar
         id="subToolbar"
-        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}"
+        class="full-width sticky"
     >
-        <slot>
+        <slot name="st-data">
-            <div :class="{'full-width' : generalChildCount, 'q-px-none': generalChildCount }" id="st-default"></div>
+            <div id="st-data" :class="{ 'full-width': actionsChildCount }"></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/Worker/Card/WorkerCalendar.vue

@@ -11,15 +11,15 @@ import RightMenu from 'src/components/common/RightMenu.vue';
 
 import axios from 'axios';
 import VnNotes from 'src/components/ui/VnNotes.vue';
+import { useStateStore } from 'src/stores/useStateStore';
+const stateStore = useStateStore();
 
 const router = useRouter();
 const route = useRoute();
 const { t } = useI18n();
 const acl = useAcl();
 const canSeeNotes = computed(() =>
-    acl.hasAny([
+    acl.hasAny([{ model: 'Worker', props: '__get__business', accessType: 'READ' }]),
-        { model: 'Worker', props: '__get__business', accessType: 'READ' },
-    ])
 );
 const workerIsFreelance = ref();
 const WorkerFreelanceRef = ref();
@@ -79,7 +79,7 @@ const onFetchAbsences = (data) => {
                     name: holidayName,
                     isFestive: true,
                 },
-                true
+                true,
             );
         });
     }
@@ -158,7 +158,7 @@ watch(
     async () => {
         await nextTick();
         await activeContractRef.value.fetch();
-    }
+    },
 );
 watch([year, businessFk], () => refreshData());
 </script>
@@ -191,17 +191,36 @@ watch([year, businessFk], () => refreshData());
             :year-holidays="yearHolidays"
         />
     </Teleport>
-    <Teleport to="#st-default" v-if="stateStore.isSubToolbarShown()">
+    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
-        <VnNotes
+        <div>
-            v-if="canSeeNotes"
+            <VnNotes
-            :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) => { saveUrl = `Businesses/${data[0].id}` }"
+                @on-fetch="
-            :body="body"
+                    (data) => {
-            :required="false"
+                        saveUrl = `Businesses/${data[0].id}`;
-        />
+                    }
+                "
+                :body="body"
+                :required="false"
+            />
+            <VnNotes
+                v-if="canSeeNotes"
+                :just-input="true"
+                :url="`Workers/${route.params.id}/business`"
+                :filter="{ fields: ['id', 'notes', 'workerFk'] }"
+                :save-url="saveUrl"
+                @on-fetch="
+                    (data) => {
+                        saveUrl = `Businesses/${data[0].id}`;
+                    }
+                "
+                :body="body"
+                :required="false"
+            />
+        </div>
     </Teleport>
     <QPage class="column items-center">
         <QCard v-if="workerIsFreelance">
@@ -251,7 +270,6 @@ 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