Merge pull request '4808-teleport' (#29) from 4808-teleport into dev

Reviewed-on: #29

package-lock.json

@@ -5754,9 +5754,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001344",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001344.tgz",
-            "integrity": "sha512-0ZFjnlCaXNOAYcV7i+TtdKBp0L/3XEU2MF/x6Du1lrh+SRX4IfzIVL4HNJg5pB2PmFb8rszIGyOvsZnqqRoc2g==",
+            "version": "1.0.30001431",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz",
+            "integrity": "sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==",
             "dev": true,
             "funding": [
                 {
@@ -25351,9 +25351,9 @@
             }
         },
         "caniuse-lite": {
-            "version": "1.0.30001344",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001344.tgz",
-            "integrity": "sha512-0ZFjnlCaXNOAYcV7i+TtdKBp0L/3XEU2MF/x6Du1lrh+SRX4IfzIVL4HNJg5pB2PmFb8rszIGyOvsZnqqRoc2g==",
+            "version": "1.0.30001431",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz",
+            "integrity": "sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==",
             "dev": true
         },
         "capture-exit": {

src/components/Navbar.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
@@ -11,6 +12,8 @@ const state = useState();
 const user = state.getUser();
 const token = session.getToken();
 
+onMounted(() => (state.headerMounted.value = true));
+
 function onToggleDrawer() {
     state.drawer.value = !state.drawer.value;
 }
@@ -36,42 +39,17 @@ function onToggleDrawer() {
             </router-link>
             <q-toolbar-title shrink class="text-weight-bold">Salix</q-toolbar-title>
             <q-space></q-space>
+            <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> -->
-                <q-btn dense flat no-wrap id="favoriteModules">
-                    <q-avatar size="lg">
-                        <q-icon name="apps" size="s" />
-                    </q-avatar>
+                <div id="header-actions"></div>
+                <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}`"
@@ -79,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/composables/useState.js

@@ -12,6 +12,7 @@ const user = ref({
 
 const roles = ref([]);
 const drawer = ref(true);
+const headerMounted = ref(false);
 
 export function useState() {
     function getUser() {
@@ -67,6 +68,7 @@ export function useState() {
         set,
         get,
         unset,
-        drawer
+        drawer,
+        headerMounted
     };
 }

src/layouts/MainLayout.vue

@@ -1,11 +1,15 @@
 <script setup>
+import { useQuasar } from 'quasar';
 import Navbar from 'src/components/Navbar.vue';
+
+const quasar = useQuasar();
 </script>
 
 <template>
     <q-layout view="hHh LpR fFf">
         <Navbar />
         <router-view></router-view>
+        <q-footer v-if="quasar.platform.is.mobile"></q-footer>
     </q-layout>
 </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();
@@ -77,19 +78,9 @@ function hide() {
         ref="fetcher"
         :url="`Claims/${route.params.id}`"
         :filter="filter"
-        @on-fetch="($data) => (claim = $data)"
+        @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()" />
-                </div>
-            </q-toolbar>
-        </q-page-sticky>
-
     <paginate :data="claim.rmas">
         <template #body="{ rows }">
             <q-card class="card">
@@ -124,7 +115,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">
@@ -138,6 +129,20 @@ function hide() {
             </q-card-actions>
         </q-card>
     </q-dialog>
+    <teleport-slot v-if="!quasar.platform.is.mobile" 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>
+    </teleport-slot>
+
+    <teleport-slot to=".q-footer">
+        <q-tabs align="justify" inline-label narrow-indicator>
+            <q-tab @click="addRow()" icon="add_circle" :label="t('globals.add')" />
+        </q-tabs>
+    </teleport-slot>
 </template>
 
 <style lang="scss" scoped>

src/pages/Customer/Card/CustomerBasicData.vue

@@ -3,12 +3,14 @@ import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
+// 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 session = useSession();
 const token = session.getToken();
 
@@ -40,6 +42,7 @@ const filterOptions = {
         });
     },
 };
+// const headerMounted = computed(() => state.headerMounted.value);
 </script>
 <template>
     <fetch-data
@@ -50,7 +53,6 @@ const filterOptions = {
     />
     <fetch-data url="ContactChannels" @on-fetch="($data) => (contactChannels = $data)" auto-load />
     <fetch-data url="BusinessTypes" @on-fetch="($data) => (businessTypes = $data)" auto-load />
-
     <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">