From 770d699304c5911acfc17087b6a93786087c9021 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 7 Mar 2023 12:35:00 +0100
Subject: [PATCH] Added worker filter

---
 src/pages/Claim/Card/ClaimCard.vue           |   5 +-
 src/pages/Claim/Card/ClaimPhoto.vue          |  50 +++--
 src/pages/Claim/ClaimList.vue                |  49 +++--
 src/pages/Customer/Card/CustomerCard.vue     |   5 +-
 src/pages/Customer/CustomerList.vue          |  41 ++--
 src/pages/InvoiceOut/Card/InvoiceOutCard.vue |   5 +-
 src/pages/InvoiceOut/InvoiceOutList.vue      |  41 ++--
 src/pages/Ticket/Card/TicketCard.vue         |   5 +-
 src/pages/Ticket/TicketList.vue              |  42 ++--
 src/pages/Worker/Card/WorkerCard.vue         |  18 +-
 src/pages/Worker/WorkerFilter.vue            | 121 +++++++++++
 src/pages/Worker/WorkerList.vue              | 200 ++++++++++++-------
 12 files changed, 411 insertions(+), 171 deletions(-)
 create mode 100644 src/pages/Worker/WorkerFilter.vue

diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index e5116a360..c03e5be85 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/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 />
diff --git a/src/pages/Claim/Card/ClaimPhoto.vue b/src/pages/Claim/Card/ClaimPhoto.vue
index d47f9798f..c7d05d7ed 100644
--- a/src/pages/Claim/Card/ClaimPhoto.vue
+++ b/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 { useSession } from 'src/composables/useSession';
+import { useStateStore } from 'stores/useStateStore';
+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
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 071fb83c6..dbc3aa1c1 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/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 Paginate from 'src/components/PaginateData.vue';
+import { toDate } from 'filters/index';
+import Paginate from 'components/PaginateData.vue';
 import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
-import CustomerDescriptorPopover from 'src/pages/Customer/Card/CustomerDescriptorPopover.vue';
-import TeleportSlot from 'components/ui/TeleportSlot.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import CustomerDescriptorPopover from 'pages/Customer/Card/CustomerDescriptorPopover.vue';
+import VnSearchbar from '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">
-        <VnSearchbar
-            data-key="ClaimList"
-            :label="t('Search claim')"
-            :info="t('You can search by claim id or customer name')"
-        />
-    </teleport-slot>
-    <teleport-slot 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-slot>
+    <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>
+        <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">
             <ClaimFilter data-key="ClaimList" />
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 010fb7b99..d3fb133cf 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/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 />
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 651738eb6..faa960512 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/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">
-        <VnSearchbar
-            data-key="CustomerList"
-            :label="t('Search customer')"
-            :info="t('You can search by customer id or name')"
-        />
-    </teleport-slot>
-    <teleport-slot 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-slot>
+    <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>
+        <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">
             <CustomerFilter data-key="CustomerList" />
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
index 8e693fd81..de3862835 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
+++ b/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 />
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index 46228e5de..b05376079 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/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">
-        <VnSearchbar
-            data-key="InvoiceOutList"
-            :label="t('Search invoice')"
-            :info="t('You can search by invoice reference')"
-        />
-    </teleport-slot>
-    <teleport-slot 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-slot>
+    <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>
+        <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">
             <InvoiceOutFilter data-key="InvoiceOutList" />
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 1a8c5a1af..f644d47b2 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/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 />
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index a0fe69b3b..7b5598048 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/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">
-        <VnSearchbar
-            data-key="TicketList"
-            :label="t('Search ticket')"
-            :info="t('You can search by ticket id or alias')"
-        />
-    </teleport-slot>
-    <teleport-slot 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-slot>
+    <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>
+        <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">
             <TicketFilter data-key="TicketList" />
diff --git a/src/pages/Worker/Card/WorkerCard.vue b/src/pages/Worker/Card/WorkerCard.vue
index 39c4cbfd9..02c472d19 100644
--- a/src/pages/Worker/Card/WorkerCard.vue
+++ b/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>
diff --git a/src/pages/Worker/WorkerFilter.vue b/src/pages/Worker/WorkerFilter.vue
new file mode 100644
index 000000000..24dfec7a5
--- /dev/null
+++ b/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>
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index 17066c64f..2058405cd 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/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,77 +29,128 @@ function viewSummary(id) {
 </script>
 
 <template>
-    <q-page class="q-pa-md">
-        <paginate data-key="WorkerList" url="Workers/filter" sort-by="id DESC" auto-load>
-            <template #body="{ rows }">
-                <q-card class="card" v-for="row of rows" :key="row.id">
-                    <q-item
-                        class="q-pa-none items-start cursor-pointer q-hoverable"
-                        v-ripple
-                        clickable
-                    >
-                        <q-item-section class="q-pa-md" @click="navigate(row.id)">
-                            <q-item-label class="text-h6">
-                                {{ row.nickname }}
-                            </q-item-label>
-                            <q-item-label caption>#{{ row.id }}</q-item-label>
-                            <q-list>
-                                <q-item class="q-pa-none">
-                                    <q-item-section>
-                                        <q-item-label caption>
-                                            {{ t('worker.list.name') }}
-                                        </q-item-label>
-                                        <q-item-label>{{ row.userName }}</q-item-label>
-                                    </q-item-section>
-                                </q-item>
-                                <q-item class="q-pa-none">
-                                    <q-item-section>
-                                        <q-item-label caption>
-                                            {{ t('worker.list.email') }}
-                                        </q-item-label>
-                                        <q-item-label>{{ row.email }}</q-item-label>
-                                    </q-item-section>
-                                </q-item>
-                                <q-item class="q-pa-none">
-                                    <q-item-section>
-                                        <q-item-label caption>{{
-                                            t('worker.list.department')
-                                        }}</q-item-label>
-                                        <q-item-label>
-                                            {{ row.department }}
-                                        </q-item-label>
-                                    </q-item-section>
-                                </q-item>
-                            </q-list>
-                        </q-item-section>
-                        <q-separator vertical />
-                        <q-card-actions vertical class="justify-between">
-                            <q-btn
-                                flat
-                                round
-                                color="primary"
-                                icon="arrow_circle_right"
-                                @click="navigate(row.id)"
-                            >
-                                <q-tooltip>
-                                    {{ t('components.smartCard.openCard') }}
-                                </q-tooltip>
-                            </q-btn>
-                            <q-btn
-                                flat
-                                round
-                                color="grey-7"
-                                icon="preview"
-                                @click="viewSummary(row.id)"
-                            >
-                                <q-tooltip>{{
-                                    t('components.smartCard.openSummary')
-                                }}</q-tooltip>
-                            </q-btn>
-                        </q-card-actions>
-                    </q-item>
-                </q-card>
-            </template>
-        </paginate>
+    <template v-if="stateStore.isHeaderMounted()">
+        <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 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
+                            clickable
+                        >
+                            <q-item-section class="q-pa-md" @click="navigate(row.id)">
+                                <q-item-label class="text-h6">
+                                    {{ row.nickname }}
+                                </q-item-label>
+                                <q-item-label caption>#{{ row.id }}</q-item-label>
+                                <q-list>
+                                    <q-item class="q-pa-none">
+                                        <q-item-section>
+                                            <q-item-label caption>
+                                                {{ t('worker.list.name') }}
+                                            </q-item-label>
+                                            <q-item-label>{{
+                                                row.userName
+                                            }}</q-item-label>
+                                        </q-item-section>
+                                    </q-item>
+                                    <q-item class="q-pa-none">
+                                        <q-item-section>
+                                            <q-item-label caption>
+                                                {{ t('worker.list.email') }}
+                                            </q-item-label>
+                                            <q-item-label>{{ row.email }}</q-item-label>
+                                        </q-item-section>
+                                    </q-item>
+                                    <q-item class="q-pa-none">
+                                        <q-item-section>
+                                            <q-item-label caption>{{
+                                                t('worker.list.department')
+                                            }}</q-item-label>
+                                            <q-item-label>
+                                                {{ row.department }}
+                                            </q-item-label>
+                                        </q-item-section>
+                                    </q-item>
+                                </q-list>
+                            </q-item-section>
+                            <q-separator vertical />
+                            <q-card-actions vertical class="justify-between">
+                                <q-btn
+                                    flat
+                                    round
+                                    color="primary"
+                                    icon="arrow_circle_right"
+                                    @click="navigate(row.id)"
+                                >
+                                    <q-tooltip>
+                                        {{ t('components.smartCard.openCard') }}
+                                    </q-tooltip>
+                                </q-btn>
+                                <q-btn
+                                    flat
+                                    round
+                                    color="grey-7"
+                                    icon="preview"
+                                    @click="viewSummary(row.id)"
+                                >
+                                    <q-tooltip>{{
+                                        t('components.smartCard.openSummary')
+                                    }}</q-tooltip>
+                                </q-btn>
+                            </q-card-actions>
+                        </q-item>
+                    </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>