src/pages/Claim/Card/ClaimCard.vue

@@ -3,20 +3,19 @@ import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import ClaimDescriptor from './ClaimDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
-import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
 </script>
 <template>
-    <teleport-slot to="#searchbar">
+    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
         <VnSearchbar
             data-key="ClaimList"
             :label="t('Search claim')"
             :info="t('You can search by claim id or customer name')"
         />
-    </teleport-slot>
+    </Teleport>
     <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <q-scroll-area class="fit">
             <claim-descriptor />

src/pages/Claim/Card/ClaimPhoto.vue

@@ -1,22 +1,20 @@
 <script setup>
-import { ref, computed } from 'vue';
 import axios from 'axios';
+import { ref, computed } from 'vue';
 import { useQuasar } from 'quasar';
-import VnConfirm from 'src/components/ui/VnConfirm.vue';
-import TeleportSlot from 'src/components/ui/TeleportSlot.vue';
-
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-
+import { useStateStore } from 'stores/useStateStore';
-import { useSession } from 'src/composables/useSession';
+import { useSession } from 'composables/useSession';
+import VnConfirm from 'components/ui/VnConfirm.vue';
 import FetchData from 'components/FetchData.vue';
 
 const router = useRouter();
+const quasar = useQuasar();
 const { t } = useI18n();
-
+const stateStore = useStateStore();
 const session = useSession();
 const token = session.getToken();
-const quasar = useQuasar();
 
 const claimId = computed(() => router.currentRoute.value.params.id);
 
@@ -239,7 +237,11 @@ function onDrag() {
         </div>
     </div>
 
-    <teleport-slot v-if="!quasar.platform.is.mobile" to="#actions-prepend">
+    <Teleport
+        to="#actions-prepend"
+        v-if="stateStore.isHeaderMounted()"
+        :disabled="quasar.platform.is.mobile"
+    >
         <div class="row q-gutter-x-sm">
             <label for="fileInput">
                 <q-btn
@@ -262,9 +264,9 @@ function onDrag() {
             </label>
             <q-separator vertical />
         </div>
-    </teleport-slot>
+    </Teleport>
 
-    <teleport-slot to=".q-footer">
+    <q-page-sticky expand position="bottom" :offset="[0, 0]">
         <q-tabs align="justify" inline-label narrow-indicator>
             <q-tab
                 @click="inputFile.nativeEl.click()"
@@ -282,7 +284,31 @@ function onDrag() {
                 <q-tooltip bottom> {{ t('globals.add') }} </q-tooltip>
             </q-tab>
         </q-tabs>
-    </teleport-slot>
+    </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

src/pages/Claim/ClaimList.vue

@@ -3,12 +3,11 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
-import { toDate } from 'src/filters/index';
+import { toDate } from 'filters/index';
-import Paginate from 'src/components/PaginateData.vue';
+import Paginate from 'components/PaginateData.vue';
 import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
-import CustomerDescriptorPopover from 'src/pages/Customer/Card/CustomerDescriptorPopover.vue';
+import CustomerDescriptorPopover from 'pages/Customer/Card/CustomerDescriptorPopover.vue';
-import TeleportSlot from 'components/ui/TeleportSlot.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import ClaimFilter from './ClaimFilter.vue';
 
 const stateStore = useStateStore();
@@ -37,22 +36,30 @@ function viewSummary(id) {
 </script>
 
 <template>
-    <teleport-slot to="#searchbar">
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
             <VnSearchbar
                 data-key="ClaimList"
                 :label="t('Search claim')"
                 :info="t('You can search by claim id or customer name')"
             />
-    </teleport-slot>
+        </Teleport>
-    <teleport-slot to="#actions-append">
+        <Teleport to="#actions-append">
             <div class="row q-gutter-x-sm">
-            <q-btn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu">
+                <q-btn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
                     <q-tooltip bottom anchor="bottom right">
                         {{ t('globals.collapseMenu') }}
                     </q-tooltip>
                 </q-btn>
             </div>
-    </teleport-slot>
+        </Teleport>
+    </template>
     <q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <q-scroll-area class="fit text-grey-8">
             <ClaimFilter data-key="ClaimList" />

src/pages/Customer/Card/CustomerCard.vue

@@ -3,20 +3,19 @@ import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import CustomerDescriptor from './CustomerDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
-import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
 </script>
 <template>
-    <teleport-slot to="#searchbar">
+    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
         <VnSearchbar
             data-key="CustomerList"
             :label="t('Search customer')"
             :info="t('You can search by customer id or name')"
         />
-    </teleport-slot>
+    </Teleport>
     <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <q-scroll-area class="fit">
             <CustomerDescriptor />

src/pages/Customer/CustomerList.vue

@@ -5,7 +5,6 @@ import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import Paginate from 'src/components/PaginateData.vue';
 import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
-import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import CustomerFilter from './CustomerFilter.vue';
 
@@ -29,22 +28,30 @@ function viewSummary(id) {
 </script>
 
 <template>
-    <teleport-slot to="#searchbar">
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
             <VnSearchbar
                 data-key="CustomerList"
                 :label="t('Search customer')"
                 :info="t('You can search by customer id or name')"
             />
-    </teleport-slot>
+        </Teleport>
-    <teleport-slot to="#actions-append">
+        <Teleport to="#actions-append">
             <div class="row q-gutter-x-sm">
-            <q-btn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu">
+                <q-btn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
                     <q-tooltip bottom anchor="bottom right">
                         {{ t('globals.collapseMenu') }}
                     </q-tooltip>
                 </q-btn>
             </div>
-    </teleport-slot>
+        </Teleport>
+    </template>
     <q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <q-scroll-area class="fit text-grey-8">
             <CustomerFilter data-key="CustomerList" />

src/pages/InvoiceOut/Card/InvoiceOutCard.vue

@@ -3,20 +3,19 @@ import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
-import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
 </script>
 <template>
-    <teleport-slot to="#searchbar">
+    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
         <VnSearchbar
             data-key="InvoiceOutList"
             :label="t('Search invoice')"
             :info="t('You can search by invoice reference')"
         />
-    </teleport-slot>
+    </Teleport>
     <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <q-scroll-area class="fit">
             <InvoiceOutDescriptor />

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -7,7 +7,6 @@ import { useStateStore } from 'stores/useStateStore';
 import Paginate from 'src/components/PaginateData.vue';
 import InvoiceOutSummaryDialog from './Card/InvoiceOutSummaryDialog.vue';
 import { toDate, toCurrency } from 'src/filters/index';
-import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import InvoiceOutFilter from './InvoiceOutFilter.vue';
 
@@ -34,22 +33,30 @@ function viewSummary(id) {
 </script>
 
 <template>
-    <teleport-slot to="#searchbar">
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
             <VnSearchbar
                 data-key="InvoiceOutList"
                 :label="t('Search invoice')"
                 :info="t('You can search by invoice reference')"
             />
-    </teleport-slot>
+        </Teleport>
-    <teleport-slot to="#actions-append">
+        <Teleport to="#actions-append">
             <div class="row q-gutter-x-sm">
-            <q-btn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu">
+                <q-btn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
                     <q-tooltip bottom anchor="bottom right">
                         {{ t('globals.collapseMenu') }}
                     </q-tooltip>
                 </q-btn>
             </div>
-    </teleport-slot>
+        </Teleport>
+    </template>
     <q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <q-scroll-area class="fit text-grey-8">
             <InvoiceOutFilter data-key="InvoiceOutList" />

src/pages/Ticket/Card/TicketCard.vue

@@ -3,20 +3,19 @@ import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import TicketDescriptor from './TicketDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
-import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
 </script>
 <template>
-    <teleport-slot to="#searchbar">
+    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
         <VnSearchbar
             data-key="TicketList"
             :label="t('Search ticket')"
             :info="t('You can search by ticket id or alias')"
         />
-    </teleport-slot>
+    </Teleport>
     <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <q-scroll-area class="fit">
             <TicketDescriptor />

src/pages/Ticket/TicketList.vue

@@ -7,8 +7,6 @@ import { useStateStore } from 'stores/useStateStore';
 import Paginate from 'src/components/PaginateData.vue';
 import { toDate, toCurrency } from 'src/filters/index';
 import TicketSummaryDialog from './Card/TicketSummaryDialog.vue';
-
-import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import TicketFilter from './TicketFilter.vue';
 
@@ -71,22 +69,30 @@ function viewSummary(id) {
 </script>
 
 <template>
-    <teleport-slot to="#searchbar">
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
             <VnSearchbar
                 data-key="TicketList"
                 :label="t('Search ticket')"
                 :info="t('You can search by ticket id or alias')"
             />
-    </teleport-slot>
+        </Teleport>
-    <teleport-slot to="#actions-append">
+        <Teleport to="#actions-append">
             <div class="row q-gutter-x-sm">
-            <q-btn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu">
+                <q-btn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
                     <q-tooltip bottom anchor="bottom right">
                         {{ t('globals.collapseMenu') }}
                     </q-tooltip>
                 </q-btn>
             </div>
-    </teleport-slot>
+        </Teleport>
+    </template>
     <q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <q-scroll-area class="fit text-grey-8">
             <TicketFilter data-key="TicketList" />

src/pages/Worker/Card/WorkerCard.vue

@@ -1,13 +1,21 @@
 <script setup>
-// import { useI18n } from 'vue-i18n';
+import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import WorkerDescriptor from './WorkerDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 const stateStore = useStateStore();
-// const { t } = useI18n();
+const { t } = useI18n();
 </script>
 <template>
+    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
+        <VnSearchbar
+            data-key="WorkerList"
+            :label="t('Search worker')"
+            :info="t('You can search by worker id or name')"
+        />
+    </Teleport>
     <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <q-scroll-area class="fit">
             <WorkerDescriptor />
@@ -21,3 +29,9 @@ const stateStore = useStateStore();
         </q-page>
     </q-page-container>
 </template>
+
+<i18n>
+es:
+    Search worker: Buscar trabajador
+    You can search by worker id or name: Puedes buscar por id o nombre del trabajador
+</i18n>

src/pages/Worker/WorkerFilter.vue

@@ -0,0 +1,121 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const departments = ref();
+</script>
+
+<template>
+    <fetch-data url="Departments" @on-fetch="(data) => (departments = data)" auto-load />
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params, searchFn }">
+            <q-list dense>
+                <q-item>
+                    <q-item-section>
+                        <q-input :label="t('FI')" v-model="params.fi" lazy-rules>
+                            <template #prepend>
+                                <q-icon name="badge" size="sm"></q-icon>
+                            </template>
+                        </q-input>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-input
+                            :label="t('First Name')"
+                            v-model="params.firstName"
+                            lazy-rules
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-input
+                            :label="t('Last Name')"
+                            v-model="params.lastName"
+                            lazy-rules
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-input
+                            :label="t('User Name')"
+                            v-model="params.userName"
+                            lazy-rules
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section v-if="!departments">
+                        <q-skeleton type="QInput" class="full-width" />
+                    </q-item-section>
+                    <q-item-section v-if="departments">
+                        <q-select
+                            :label="t('Department')"
+                            v-model="params.departmentFk"
+                            @update:model-value="searchFn()"
+                            :options="departments"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item class="q-mb-md">
+                    <q-item-section>
+                        <q-input
+                            :label="t('Extension')"
+                            v-model="params.extension"
+                            lazy-rules
+                        />
+                    </q-item-section>
+                </q-item>
+            </q-list>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+    params:
+        search: Contains
+        fi: FI
+        firstName: First name
+        lastName: Last name
+        userName: User
+        extension: Extension
+es:
+    params:
+        search: Contiene
+        fi: NIF
+        firstName: Nombre
+        lastName: Apellidos
+        userName: Usuario
+        extension: Extensión
+    FI: NIF
+    First Name: Nombre
+    Last Name: Apellidos
+    User Name: Usuario
+    Department: Departamento
+    Extension: Extensión
+</i18n>

src/pages/Worker/WorkerList.vue

@@ -2,9 +2,14 @@
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
+import { useStateStore } from 'stores/useStateStore';
 import Paginate from 'src/components/PaginateData.vue';
 import WorkerSummaryDialog from './Card/WorkerSummaryDialog.vue';
+import TeleportSlot from 'components/ui/TeleportSlot.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import WorkerFilter from './WorkerFilter.vue';
 
+const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
 const quasar = useQuasar();
@@ -24,10 +29,45 @@ function viewSummary(id) {
 </script>
 
 <template>
-    <q-page class="q-pa-md">
+    <template v-if="stateStore.isHeaderMounted()">
-        <paginate data-key="WorkerList" url="Workers/filter" sort-by="id DESC" auto-load>
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="WorkerList"
+                :label="t('Search worker')"
+                :info="t('You can search by worker id or name')"
+            />
+        </Teleport>
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <q-btn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <q-tooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </q-tooltip>
+                </q-btn>
+            </div>
+        </Teleport>
+    </template>
+    <q-drawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <q-scroll-area class="fit text-grey-8">
+            <WorkerFilter data-key="WorkerList" />
+        </q-scroll-area>
+    </q-drawer>
+    <q-page class="column items-center q-pa-md">
+        <div class="card-list">
+            <paginate
+                data-key="WorkerList"
+                url="Workers/filter"
+                order="id DESC"
+                auto-load
+            >
                 <template #body="{ rows }">
-                <q-card class="card" v-for="row of rows" :key="row.id">
+                    <q-card class="card q-mb-md" v-for="row of rows" :key="row.id">
                         <q-item
                             class="q-pa-none items-start cursor-pointer q-hoverable"
                             v-ripple
@@ -44,7 +84,9 @@ function viewSummary(id) {
                                             <q-item-label caption>
                                                 {{ t('worker.list.name') }}
                                             </q-item-label>
-                                        <q-item-label>{{ row.userName }}</q-item-label>
+                                            <q-item-label>{{
+                                                row.userName
+                                            }}</q-item-label>
                                         </q-item-section>
                                     </q-item>
                                     <q-item class="q-pa-none">
@@ -96,5 +138,19 @@ function viewSummary(id) {
                     </q-card>
                 </template>
             </paginate>
+        </div>
     </q-page>
 </template>
+
+<style lang="scss" scoped>
+.card-list {
+    width: 100%;
+    max-width: 60em;
+}
+</style>
+
+<i18n>
+es:
+    Search worker: Buscar trabajador
+    You can search by worker id or name: Puedes buscar por id o nombre del trabajador
+</i18n>