From 06333af38ca680df82090b2db61441fb695d5089 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 7 Mar 2023 15:03:22 +0100
Subject: [PATCH] Removed TeleportSlot

---
 src/components/NavBar.vue           |  9 +++-
 src/components/ui/TeleportSlot.vue  | 20 ---------
 src/components/ui/VnSearchbar.vue   |  4 --
 src/pages/Claim/Card/ClaimPhoto.vue | 70 +++++++++++------------------
 src/pages/Claim/Card/ClaimRma.vue   | 39 ++++++++++++----
 5 files changed, 65 insertions(+), 77 deletions(-)
 delete mode 100644 src/components/ui/TeleportSlot.vue

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 80f6dba45..88f8856e6 100644
--- a/src/components/NavBar.vue
+++ b/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>
diff --git a/src/components/ui/TeleportSlot.vue b/src/components/ui/TeleportSlot.vue
deleted file mode 100644
index 6a3f19ef0..000000000
--- a/src/components/ui/TeleportSlot.vue
+++ /dev/null
@@ -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>
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 04f4d7245..cf63119b8 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/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;
diff --git a/src/pages/Claim/Card/ClaimPhoto.vue b/src/pages/Claim/Card/ClaimPhoto.vue
index c7d05d7ed..f825f00d1 100644
--- a/src/pages/Claim/Card/ClaimPhoto.vue
+++ b/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,49 +265,32 @@ function onDrag() {
         </div>
     </Teleport>
 
-    <q-page-sticky expand position="bottom" :offset="[0, 0]">
-        <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>
-    </q-page-sticky>
-
-    <!-- <Teleport
-        v-if="stateStore.isHeaderMounted()"
-        to=".q-footer"
-        :disabled="!quasar.platform.is.mobile"
+    <q-page-sticky
+        v-if="quasar.platform.is.mobile"
+        position="bottom"
+        :offset="[0, 0]"
+        expand
     >
-        <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> -->
+        <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"
+                    :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>
+        </q-toolbar>
+    </q-page-sticky>
 
     <!-- MULTIMEDIA DIALOG START-->
     <q-dialog
diff --git a/src/pages/Claim/Card/ClaimRma.vue b/src/pages/Claim/Card/ClaimRma.vue
index 7b71dde53..e51de16fd 100644
--- a/src/pages/Claim/Card/ClaimRma.vue
+++ b/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-tab @click="addRow()" icon="add_circle" :label="t('globals.add')" />
-        </q-tabs>
-    </teleport-slot>
+    <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>
+        </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>