Removed TeleportSlot

src/components/NavBar.vue

@@ -21,7 +21,14 @@ onMounted(() => stateStore.setMounted());
 <template>
     <q-header class="bg-dark" color="white" elevated>
         <q-toolbar class="q-py-sm q-px-md">
-            <q-btn flat @click="stateStore.toggleLeftDrawer()" round dense icon="menu">
+            <q-btn
+                @click="stateStore.toggleLeftDrawer()"
+                icon="menu"
+                class="q-mr-sm"
+                round
+                dense
+                flat
+            >
                 <q-tooltip bottom anchor="bottom right">
                     {{ t('globals.collapseMenu') }}
                 </q-tooltip>

src/components/ui/TeleportSlot.vue

@@ -1,20 +0,0 @@
-<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/components/ui/VnSearchbar.vue

@@ -92,10 +92,6 @@ async function search() {
     cursor: help;
 }
 
-#searchbar .q-field {
-    min-width: 350px;
-}
-
 .body--light #searchbar {
     .q-field--standout.q-field--highlighted .q-field__control {
         background-color: $grey-7;

src/pages/Claim/Card/ClaimPhoto.vue

@@ -238,9 +238,8 @@ function onDrag() {
     </div>
 
     <Teleport
+        v-if="stateStore.isHeaderMounted() && !quasar.platform.is.mobile"
         to="#actions-prepend"
-        v-if="stateStore.isHeaderMounted()"
-        :disabled="quasar.platform.is.mobile"
     >
         <div class="row q-gutter-x-sm">
             <label for="fileInput">
@@ -266,8 +265,14 @@ function onDrag() {
         </div>
     </Teleport>
 
-    <q-page-sticky expand position="bottom" :offset="[0, 0]">
-        <q-tabs align="justify" inline-label narrow-indicator>
+    <q-page-sticky
+        v-if="quasar.platform.is.mobile"
+        position="bottom"
+        :offset="[0, 0]"
+        expand
+    >
+        <q-toolbar class="bg-primary text-white q-pa-none">
+            <q-tabs class="full-width" align="justify" inline-label narrow-indicator>
                 <q-tab
                     @click="inputFile.nativeEl.click()"
                     icon="add_circle"
@@ -284,32 +289,9 @@ function onDrag() {
                     <q-tooltip bottom> {{ t('globals.add') }} </q-tooltip>
                 </q-tab>
             </q-tabs>
+        </q-toolbar>
     </q-page-sticky>
 
-    <!-- <Teleport
-        v-if="stateStore.isHeaderMounted()"
-        to=".q-footer"
-        :disabled="!quasar.platform.is.mobile"
-    >
-        <q-tabs align="justify" inline-label narrow-indicator>
-            <q-tab
-                @click="inputFile.nativeEl.click()"
-                icon="add_circle"
-                :label="t('globals.add')"
-            >
-                <q-input
-                    ref="inputFile"
-                    type="file"
-                    style="display: none"
-                    multiple
-                    v-model="files"
-                    @update:model-value="create()"
-                />
-                <q-tooltip bottom> {{ t('globals.add') }} </q-tooltip>
-            </q-tab>
-        </q-tabs>
-    </Teleport> -->
-
     <!-- MULTIMEDIA DIALOG START-->
     <q-dialog
         v-model="multimediaDialog"

src/pages/Claim/Card/ClaimRma.vue

@@ -5,9 +5,9 @@ import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
+import { useStateStore } from 'stores/useStateStore';
 import Paginate from 'src/components/PaginateData.vue';
 import FetchData from 'components/FetchData.vue';
-import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
 
 import { toDate } from 'src/filters';
@@ -15,6 +15,7 @@ import { toDate } from 'src/filters';
 const quasar = useQuasar();
 const route = useRoute();
 const { t } = useI18n();
+const stateStore = useStateStore();
 const arrayData = useArrayData('ClaimRma');
 
 const claim = ref();
@@ -44,6 +45,12 @@ async function onFetch(data) {
 }
 
 async function addRow() {
+    if (!claim.value.rma) {
+        return quasar.notify({
+            message: `This claim is not associated to any RMA`,
+            type: 'negative',
+        });
+    }
     const formData = {
         code: claim.value.rma,
     };
@@ -138,20 +145,31 @@ async function remove(id) {
             </paginate>
         </div>
     </div>
-    <teleport-slot v-if="!quasar.platform.is.mobile" to="#actions-prepend">
+
+    <Teleport
+        v-if="stateStore.isHeaderMounted() && !quasar.platform.is.mobile"
+        to="#actions-prepend"
+    >
         <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>
 
-    <teleport-slot to=".q-footer">
-        <q-tabs align="justify" inline-label narrow-indicator>
+    <q-page-sticky
+        v-if="quasar.platform.is.mobile"
+        position="bottom"
+        :offset="[0, 0]"
+        expand
+    >
+        <q-toolbar class="bg-primary text-white q-pa-none">
+            <q-tabs class="full-width" align="justify" inline-label narrow-indicator>
                 <q-tab @click="addRow()" icon="add_circle" :label="t('globals.add')" />
             </q-tabs>
-    </teleport-slot>
+        </q-toolbar>
+    </q-page-sticky>
 </template>
 
 <style lang="scss" scoped>
@@ -170,3 +188,8 @@ async function remove(id) {
     z-index: 2998;
 }
 </style>
+
+<i18n>
+es:
+    This claim is not associated to any RMA: Esta reclamación no está asociada a ninguna ARM
+</i18n>