Changes

src/components/FormModel.vue

@@ -7,6 +7,7 @@ import axios from 'axios';
 import { useState } from 'src/composables/useState';
 import { useValidator } from 'src/composables/useValidator';
 import SkeletonForm from 'src/components/SkeletonForm.vue';
+import TeleportSlot from 'src/components/ui/TeleportSlot';
 
 const quasar = useQuasar();
 const { t } = useI18n();
@@ -93,6 +94,17 @@ function filter(value, update, filterOptions) {
 }
 </script>
 <template>
+    <teleport-slot to="#header-actions">
+        <div class="row q-gutter-x-sm">
+            <q-btn @click="addRow()" icon="save" color="primary" flat dense rounded>
+                <q-tooltip bottom> {{ t('globals.save') }} </q-tooltip>
+            </q-btn>
+            <q-btn @click="addRow()" icon="clear_all" color="primary" flat dense rounded>
+                <q-tooltip bottom> {{ t('globals.reset') }} </q-tooltip>
+            </q-btn>
+            <q-separator vertical />
+        </div>
+    </teleport-slot>
     <q-banner v-if="hasChanges" class="text-white bg-warning">
         <q-icon name="warning" size="md" class="q-mr-md" />
         <span>{{ t('globals.changesToSave') }}</span>

src/components/Navbar.vue

@@ -42,42 +42,14 @@ function onToggleDrawer() {
             <div id="searchbar"></div>
             <q-space></q-space>
             <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
-                <!-- <q-btn v-if="$q.screen.gt.xs" dense flat size="md" icon="add">
-                    <q-menu>
-                        <q-list style="min-width: 150px">
-                            <q-item :to="{ path: '/customer/create' }" clickable>
-                                <q-item-section>New customer</q-item-section>
-                            </q-item>
-                            <q-item clickable>
-                                <q-item-section>New ticket</q-item-section>
-                            </q-item>
-                        </q-list>
-                    </q-menu>
-                </q-btn> -->
-                <!-- <q-btn v-if="$q.screen.gt.xs" dense flat round size="md" icon="notifications">
-                    <q-badge color="red" text-color="white" floating> 2 </q-badge>
-                    <q-tooltip bottom>
-                        {{ t('globals.notifications') }}
-                    </q-tooltip>
-                    <q-menu class="q-pa-md" style="min-width: 250px">
-                        <strong>Notifications</strong>
-                        <q-separator />
-                        <div style="text-align: center; font-size: 2em">
-                            <q-spinner-puff color="orange" />
-                        </div>
-                    </q-menu>
-                </q-btn> -->
                 <div id="header-actions"></div>
-                <q-btn dense flat no-wrap id="favoriteModules">
-                    <q-avatar size="lg">
-                        <q-icon name="apps" size="s" />
-                    </q-avatar>
+                <q-btn id="favoriteModules" icon="apps" flat dense rounded>
                     <q-tooltip bottom>
                         {{ t('globals.favoriteModules') }}
                     </q-tooltip>
                     <FavoriteModules />
                 </q-btn>
-                <q-btn dense flat no-wrap id="user">
+                <q-btn rounded dense flat no-wrap id="user">
                     <q-avatar size="lg">
                         <q-img
                             :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
@@ -85,7 +57,6 @@ function onToggleDrawer() {
                         >
                         </q-img>
                     </q-avatar>
-                    <q-icon name="arrow_drop_down" size="s" />
                     <q-tooltip bottom>
                         {{ t('globals.userPanel') }}
                     </q-tooltip>

src/components/ui/TeleportSlot.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { nextTick, ref } from 'vue';
+
+const $props = defineProps({
+    to: {
+        type: String,
+        required: true,
+    },
+});
+
+const isHeaderMounted = ref(false);
+nextTick(() => {
+    isHeaderMounted.value = document.querySelector($props.to) !== null;
+});
+</script>
+<template>
+    <teleport v-if="isHeaderMounted" :to="$props.to">
+        <slot />
+    </teleport>
+</template>

src/pages/Claim/Card/ClaimRma.vue

@@ -6,6 +6,7 @@ import { useRoute } from 'vue-router';
 import axios from 'axios';
 import Paginate from 'src/components/Paginate.vue';
 import FetchData from 'src/components/FetchData.vue';
+import TeleportSlot from 'components/ui/TeleportSlot';
 import { toDate } from 'src/filters';
 
 const quasar = useQuasar();
@@ -80,16 +81,14 @@ function hide() {
         @on-fetch="($data) => (claim = $data)"
         auto-load
     />
-    <div class="sticky-page">
-        <q-page-sticky expand position="top">
-            <q-toolbar class="bg-grey-9">
-                <q-space />
-                <div class="q-gutter-md">
-                    <q-btn icon="add" :label="t('globals.add')" color="primary" @click="addRow()" />
+    <teleport-slot to="#header-actions">
+        <div class="row q-gutter-x-sm">
+            <q-btn @click="addRow()" icon="add" color="primary" dense rounded>
+                <q-tooltip bottom> {{ t('globals.add') }} </q-tooltip>
+            </q-btn>
+            <q-separator vertical />
         </div>
-            </q-toolbar>
-        </q-page-sticky>
-
+    </teleport-slot>
     <paginate :data="claim.rmas">
         <template #body="{ rows }">
             <q-card class="card">
@@ -124,7 +123,7 @@ function hide() {
             </q-card>
         </template>
     </paginate>
-    </div>
+
     <q-dialog v-model="confirmShown" persistent @hide="hide">
         <q-card>
             <q-card-section class="row items-center">

src/pages/Customer/Card/CustomerBasicData.vue

@@ -1,16 +1,16 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
-import { useState } from 'src/composables/useState';
+// import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
 import FetchData from 'src/components/FetchData.vue';
 import FormModel from 'src/components/FormModel.vue';
 
 const route = useRoute();
 const { t } = useI18n();
-const state = useState();
+// const state = useState();
 const session = useSession();
 const token = session.getToken();
 
@@ -42,7 +42,7 @@ const filterOptions = {
         });
     },
 };
-const headerMounted = computed(() => state.headerMounted.value);
+// const headerMounted = computed(() => state.headerMounted.value);
 </script>
 <template>
     <fetch-data
@@ -53,24 +53,6 @@ const headerMounted = computed(() => state.headerMounted.value);
     />
     <fetch-data url="ContactChannels" @on-fetch="($data) => (contactChannels = $data)" auto-load />
     <fetch-data url="BusinessTypes" @on-fetch="($data) => (businessTypes = $data)" auto-load />
-    <teleport v-if="headerMounted" to="#header-actions">
-        <div class="row q-gutter-x-sm">
-            <q-btn color="primary" dense flat no-wrap>
-                <q-avatar size="lg">
-                    <q-icon name="save" size="s" />
-                </q-avatar>
-                <q-tooltip bottom> Save </q-tooltip>
-            </q-btn>
-            <q-btn color="primary" dense flat no-wrap>
-                <q-avatar size="lg">
-                    <q-icon name="delete" size="s" />
-                </q-avatar>
-                <q-tooltip bottom> Delete </q-tooltip>
-            </q-btn>
-            <q-separator vertical />
-        </div>
-    </teleport>
-    <teleport v-if="headerMounted" to="#searchbar"> input </teleport>
     <div class="container">
         <q-card>
             <form-model :url="`Clients/${route.params.id}`" model="customer">

src/pages/Ticket/Card/TicketBoxing.vue

@@ -79,6 +79,7 @@ async function getVideoList(expeditionId, timed) {
 </script>
 
 <template>
+    <teleport to=".q-layout">
         <q-drawer show-if-above side="right">
             <q-scroll-area class="fit">
                 <q-list bordered separator style="max-width: 318px">
@@ -142,6 +143,7 @@ async function getVideoList(expeditionId, timed) {
                 </q-list>
             </q-scroll-area>
         </q-drawer>
+    </teleport>
 
     <q-card>
         <q-carousel animated v-model="slide" height="max-content">