From 2fe05f23d1f47ab4f4924e696b3221da87c399a8 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Thu, 5 Jan 2023 14:57:47 +0100
Subject: [PATCH 01/32] Data store refactor

---
 src/components/NavBar.vue                   |  3 +-
 src/components/PaginateData.vue             | 93 +++++++++++++--------
 src/composables/useArrayData.js             | 56 +++++++++++++
 src/pages/Customer/Card/CustomerSummary.vue |  5 ++
 src/pages/Customer/CustomerCreate.vue       | 17 ++--
 src/pages/Customer/CustomerList.vue         | 11 +++
 src/pages/Customer/CustomerMain.vue         | 49 +++++++++++
 src/stores/useArrayDataStore.js             | 19 +++++
 8 files changed, 210 insertions(+), 43 deletions(-)
 create mode 100644 src/composables/useArrayData.js
 create mode 100644 src/stores/useArrayDataStore.js

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index cb1283eb5..30afedb7a 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -11,6 +11,7 @@ const session = useSession();
 const state = useState();
 const user = state.getUser();
 const token = session.getToken();
+const appName = 'Lilium';
 
 onMounted(() => (state.headerMounted.value = true));
 
@@ -37,7 +38,7 @@ function onToggleDrawer() {
                     </q-tooltip>
                 </q-btn>
             </router-link>
-            <q-toolbar-title shrink class="text-weight-bold">Salix</q-toolbar-title>
+            <q-toolbar-title shrink class="text-weight-bold">{{ appName }}</q-toolbar-title>
             <q-space></q-space>
             <div id="searchbar"></div>
             <q-space></q-space>
diff --git a/src/components/PaginateData.vue b/src/components/PaginateData.vue
index 034f64d90..8c297055a 100644
--- a/src/components/PaginateData.vue
+++ b/src/components/PaginateData.vue
@@ -1,7 +1,7 @@
 <script setup>
-import axios from 'axios';
 import { onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useArrayData } from 'composables/useArrayData';
 
 const { t } = useI18n();
 
@@ -45,7 +45,7 @@ const $props = defineProps({
 });
 
 const emit = defineEmits(['onFetch', 'onPaginate']);
-defineExpose({ refresh });
+// defineExpose({ refresh });
 
 onMounted(() => {
     if ($props.autoLoad) paginate();
@@ -65,10 +65,44 @@ const pagination = ref({
     rowsPerPage: $props.rowsPerPage,
     page: 1,
 });
-const rows = ref(null);
 
-async function fetch() {
-    const { page, rowsPerPage, sortBy } = pagination.value;
+const arrayData = useArrayData('customers', {
+    url: $props.url,
+    limit: $props.rowsPerPage,
+});
+const rows = arrayData.data;
+
+// async function fetch() {
+//     const { page, rowsPerPage, sortBy } = pagination.value;
+
+//     if (!$props.url) return;
+
+//     const filter = {
+//         limit: rowsPerPage,
+//         skip: rowsPerPage * (page - 1),
+//     };
+
+//     Object.assign(filter, $props.filter);
+
+//     if ($props.where) filter.where = $props.where;
+//     if ($props.sortBy) filter.order = $props.sortBy;
+//     if ($props.limit) filter.limit = $props.limit;
+
+//     if (sortBy) filter.order = sortBy;
+
+//     arrayData.apply()
+
+//     const { data } = await axios.get($props.url, {
+//         params: { filter },
+//     });
+
+//     isLoading.value = false;
+
+//     return data;
+// }
+
+async function paginate() {
+    const { page, rowsPerPage, sortBy, descending } = pagination.value;
 
     if (!$props.url) return;
 
@@ -85,19 +119,7 @@ async function fetch() {
 
     if (sortBy) filter.order = sortBy;
 
-    const { data } = await axios.get($props.url, {
-        params: { filter },
-    });
-
-    isLoading.value = false;
-
-    return data;
-}
-
-async function paginate() {
-    const { page, rowsPerPage, sortBy, descending } = pagination.value;
-
-    const data = await fetch();
+    const data = await arrayData.apply(filter);
 
     if (!data) {
         isLoading.value = false;
@@ -105,11 +127,12 @@ async function paginate() {
     }
 
     hasMoreData.value = data.length === rowsPerPage;
+    console.log(hasMoreData.value);
 
-    if (!rows.value) rows.value = [];
-    for (const row of data) rows.value.push(row);
+    // if (!rows.value) rows.value = [];
+    // for (const row of data) rows.value.push(row);
 
-    pagination.value.rowsNumber = rows.value.length;
+    pagination.value.rowsNumber = rows.length;
     pagination.value.page = page;
     pagination.value.rowsPerPage = rowsPerPage;
     pagination.value.sortBy = sortBy;
@@ -121,29 +144,29 @@ async function paginate() {
     emit('onPaginate', data);
 }
 
-async function refresh() {
-    const { rowsPerPage } = pagination.value;
+// async function refresh() {
+//     const { rowsPerPage } = pagination.value;
 
-    const data = await fetch();
+//     const data = await fetch();
 
-    if (!data) {
-        isLoading.value = false;
-        return;
-    }
+//     if (!data) {
+//         isLoading.value = false;
+//         return;
+//     }
 
-    hasMoreData.value = data.length === rowsPerPage;
+//     hasMoreData.value = data.length === rowsPerPage;
 
-    if (!rows.value) rows.value = [];
-    rows.value = data;
+//     if (!rows.value) rows.value = [];
+//     rows.value = data;
 
-    isLoading.value = false;
+//     isLoading.value = false;
 
-    emit('onFetch', rows);
-}
+//     emit('onFetch', rows);
+// }
 
 async function onLoad(...params) {
     const done = params[1];
-    if (!rows.value || rows.value.length === 0 || !$props.url) return done(false);
+    if (!rows || rows.length === 0 || !$props.url) return done(false);
 
     pagination.value.page = pagination.value.page + 1;
 
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
new file mode 100644
index 000000000..481bf209e
--- /dev/null
+++ b/src/composables/useArrayData.js
@@ -0,0 +1,56 @@
+import axios from 'axios';
+import { useArrayDataStore } from 'stores/useArrayDataStore';
+
+const arrayDataStore = useArrayDataStore();
+const options = {
+    limit: 10,
+};
+
+export function useArrayData(key, userOptions) {
+    if (!key) throw new Error('ArrayData: A key is required to use this composable');
+
+    arrayDataStore.set(key, []);
+
+    const data = arrayDataStore.get(key);
+
+    if (typeof userOptions === 'object') {
+        Object.assign(options, userOptions);
+    }
+
+    async function fetch() {
+        if (!options.url) return;
+
+        const filter = {
+            limit: options.limit,
+        };
+
+        const requestOptions = { params: { filter } };
+
+        const response = await axios.get(options.url, requestOptions);
+        for (const row of response.data) data.push(row);
+
+        return response.data;
+    }
+
+    async function apply(filter) {
+        if (!options.url) return;
+
+        const requestOptions = { params: { filter } };
+
+        const response = await axios.get(options.url, requestOptions);
+        for (const row of response.data) data.push(row);
+
+        return response.data;
+    }
+
+    async function refresh() {
+        // TODO
+    }
+
+    return {
+        fetch,
+        apply,
+        refresh,
+        data,
+    };
+}
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index 55b2aae81..496c342ae 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import { toCurrency, toPercentage, toDate } from 'src/filters';
 import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
+import { useArrayDataStore } from 'stores/useArrayDataStore';
 
 onMounted(() => fetch());
 
@@ -59,6 +60,10 @@ const creditWarning = computed(() => {
 
     return tooMuchInsurance || noCreditInsurance ? 'negative' : '';
 });
+
+const arrayDataStore = useArrayDataStore();
+const d = arrayDataStore.get('test');
+console.log(d);
 </script>
 
 <template>
diff --git a/src/pages/Customer/CustomerCreate.vue b/src/pages/Customer/CustomerCreate.vue
index 52a9ccbc5..f58a230d9 100644
--- a/src/pages/Customer/CustomerCreate.vue
+++ b/src/pages/Customer/CustomerCreate.vue
@@ -1,13 +1,16 @@
 <script setup>
-import { reactive, watch } from 'vue'
+import { reactive, watch } from 'vue';
 
 const customer = reactive({
     name: '',
 });
 
-watch(() => customer.name, () => {
-    console.log('customer.name changed');
-});
+watch(
+    () => customer.name,
+    () => {
+        console.log('customer.name changed');
+    }
+);
 </script>
 
 <template>
@@ -20,7 +23,7 @@ watch(() => customer.name, () => {
                     label="Your name *"
                     hint="Name and surname"
                     lazy-rules
-                    :rules="[val => val && val.length > 0 || 'Please type something']"
+                    :rules="[(val) => (val && val.length > 0) || 'Please type something']"
                 />
 
                 <q-input
@@ -30,8 +33,8 @@ watch(() => customer.name, () => {
                     label="Your age *"
                     lazy-rules
                     :rules="[
-                        val => val !== null && val !== '' || 'Please type your age',
-                        val => val > 0 && val < 100 || 'Please type a real age'
+                        (val) => (val !== null && val !== '') || 'Please type your age',
+                        (val) => (val > 0 && val < 100) || 'Please type a real age',
                     ]"
                 />
 
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index c4d54a355..6f1c76ab6 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -5,10 +5,21 @@ import { useQuasar } from 'quasar';
 import Paginate from 'src/components/PaginateData.vue';
 import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
 
+// import { useArrayData } from 'composables/useArrayData';
+
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
 
+// const arrayData = useArrayData('customers', {
+//     url: 'Clients',
+// });
+
+// onMounted(async () => {
+//     await arrayData.fetch();
+//     console.log(arrayData.data);
+// });
+
 function navigate(id) {
     router.push({ path: `/customer/${id}` });
 }
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
index fd50f1521..60195440b 100644
--- a/src/pages/Customer/CustomerMain.vue
+++ b/src/pages/Customer/CustomerMain.vue
@@ -1,11 +1,60 @@
 <script setup>
 import { useState } from 'src/composables/useState';
 import LeftMenu from 'components/LeftMenu.vue';
+// import TeleportSlot from 'src/components/ui/TeleportSlot.vue';
 
 const state = useState();
 </script>
 
 <template>
+    <!-- <teleport-slot to="#searchbar">
+        <q-select
+            ref="search"
+            dark
+            dense
+            standout
+            use-input
+            hide-selected
+            color="black"
+            :stack-label="false"
+            label="Search or jump to..."
+            v-model="text"
+            :options="filteredOptions"
+            @filter="filter"
+            style="width: 400px"
+        >
+            <template #append>
+                <img src="https://cdn.quasar.dev/img/layout-gallery/img-github-search-key-slash.svg" />
+            </template>
+
+            <template #no-option>
+                <q-item>
+                    <q-item-section>
+                        <div class="text-center">
+                            <q-spinner-pie color="grey-5" size="24px" />
+                        </div>
+                    </q-item-section>
+                </q-item>
+            </template>
+
+            <template #option="scope">
+                <q-item v-bind="scope.itemProps" class="GL__select-GL__menu-link">
+                    <q-item-section side>
+                        <q-icon name="collections_bookmark" />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label>{{ scope.opt.label }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section side :class="{ 'default-type': !scope.opt.type }">
+                        <q-btn outline dense no-caps text-color="blue-grey-5" size="12px" class="bg-grey-1 q-px-sm">
+                            {{ scope.opt.type || 'Jump to' }}
+                            <q-icon name="subdirectory_arrow_left" size="14px" />
+                        </q-btn>
+                    </q-item-section>
+                </q-item>
+            </template>
+        </q-select>
+    </teleport-slot> -->
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit text-grey-8">
             <LeftMenu />
diff --git a/src/stores/useArrayDataStore.js b/src/stores/useArrayDataStore.js
new file mode 100644
index 000000000..d75c00176
--- /dev/null
+++ b/src/stores/useArrayDataStore.js
@@ -0,0 +1,19 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+
+export const useArrayDataStore = defineStore('arrayDataStore', () => {
+    const store = ref({});
+
+    function get(key) {
+        return store.value[key];
+    }
+
+    function set(key, data) {
+        store.value[key] = data;
+    }
+
+    return {
+        get,
+        set,
+    };
+});

From 20051d72468684c3df0429d9a30efd985b931bc8 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 10 Jan 2023 14:58:24 +0100
Subject: [PATCH 02/32] Pagination changes

---
 src/components/PaginateData.vue     | 121 ++++++++--------------------
 src/composables/useArrayData.js     |  80 +++++++++++++-----
 src/pages/Customer/CustomerList.vue |  33 +++++---
 src/stores/useArrayDataStore.js     |  13 ++-
 4 files changed, 125 insertions(+), 122 deletions(-)

diff --git a/src/components/PaginateData.vue b/src/components/PaginateData.vue
index 8c297055a..5c2562d60 100644
--- a/src/components/PaginateData.vue
+++ b/src/components/PaginateData.vue
@@ -45,21 +45,7 @@ const $props = defineProps({
 });
 
 const emit = defineEmits(['onFetch', 'onPaginate']);
-// defineExpose({ refresh });
-
-onMounted(() => {
-    if ($props.autoLoad) paginate();
-});
-
-watch(
-    () => $props.data,
-    () => {
-        rows.value = $props.data;
-    }
-);
-
 const isLoading = ref(false);
-const hasMoreData = ref(false);
 const pagination = ref({
     sortBy: $props.sortBy,
     rowsPerPage: $props.rowsPerPage,
@@ -68,71 +54,50 @@ const pagination = ref({
 
 const arrayData = useArrayData('customers', {
     url: $props.url,
+    filter: $props.filter,
+    where: $props.where,
     limit: $props.rowsPerPage,
+    order: $props.sortBy,
 });
-const rows = arrayData.data;
+const store = arrayData.store;
 
-// async function fetch() {
-//     const { page, rowsPerPage, sortBy } = pagination.value;
+onMounted(() => {
+    if ($props.autoLoad) paginate();
+});
 
-//     if (!$props.url) return;
-
-//     const filter = {
-//         limit: rowsPerPage,
-//         skip: rowsPerPage * (page - 1),
-//     };
-
-//     Object.assign(filter, $props.filter);
-
-//     if ($props.where) filter.where = $props.where;
-//     if ($props.sortBy) filter.order = $props.sortBy;
-//     if ($props.limit) filter.limit = $props.limit;
-
-//     if (sortBy) filter.order = sortBy;
-
-//     arrayData.apply()
-
-//     const { data } = await axios.get($props.url, {
-//         params: { filter },
-//     });
-
-//     isLoading.value = false;
-
-//     return data;
-// }
+watch(
+    () => $props.data,
+    () => {
+        store.data = $props.data;
+    }
+);
 
 async function paginate() {
     const { page, rowsPerPage, sortBy, descending } = pagination.value;
 
     if (!$props.url) return;
 
-    const filter = {
-        limit: rowsPerPage,
-        skip: rowsPerPage * (page - 1),
-    };
+    // const filter = {
+    //     limit: rowsPerPage,
+    //     skip: rowsPerPage * (page - 1),
+    // };
 
-    Object.assign(filter, $props.filter);
+    // Object.assign(filter, $props.filter);
 
-    if ($props.where) filter.where = $props.where;
-    if ($props.sortBy) filter.order = $props.sortBy;
-    if ($props.limit) filter.limit = $props.limit;
+    // if ($props.where) filter.where = $props.where;
+    // if ($props.sortBy) filter.order = $props.sortBy;
+    // if ($props.limit) filter.limit = $props.limit;
 
-    if (sortBy) filter.order = sortBy;
+    // if (sortBy) filter.order = sortBy;
 
-    const data = await arrayData.apply(filter);
+    await arrayData.loadMore();
 
-    if (!data) {
+    if (!arrayData.hasMoreData.value) {
         isLoading.value = false;
         return;
     }
 
-    hasMoreData.value = data.length === rowsPerPage;
-    console.log(hasMoreData.value);
-
-    // if (!rows.value) rows.value = [];
-    // for (const row of data) rows.value.push(row);
-
-    pagination.value.rowsNumber = rows.length;
+    pagination.value.rowsNumber = store.data.length;
     pagination.value.page = page;
     pagination.value.rowsPerPage = rowsPerPage;
     pagination.value.sortBy = sortBy;
@@ -140,48 +105,28 @@ async function paginate() {
 
     isLoading.value = false;
 
-    emit('onFetch', rows);
-    emit('onPaginate', data);
+    emit('onFetch', store.data);
+    emit('onPaginate');
 }
 
-// async function refresh() {
-//     const { rowsPerPage } = pagination.value;
-
-//     const data = await fetch();
-
-//     if (!data) {
-//         isLoading.value = false;
-//         return;
-//     }
-
-//     hasMoreData.value = data.length === rowsPerPage;
-
-//     if (!rows.value) rows.value = [];
-//     rows.value = data;
-
-//     isLoading.value = false;
-
-//     emit('onFetch', rows);
-// }
-
 async function onLoad(...params) {
     const done = params[1];
-    if (!rows || rows.length === 0 || !$props.url) return done(false);
+    if (!store.data || store.data.length === 0 || !$props.url) return done(false);
 
     pagination.value.page = pagination.value.page + 1;
 
     await paginate();
 
-    const endOfPages = !hasMoreData.value;
+    const endOfPages = !arrayData.hasMoreData.value;
     done(endOfPages);
 }
 </script>
 
 <template>
     <q-infinite-scroll @load="onLoad" :offset="offset" class="column items-center">
-        <div v-if="rows" class="card-list q-gutter-y-md">
-            <slot name="body" :rows="rows"></slot>
-            <div v-if="!rows.length && !isLoading" class="info-row q-pa-md text-center">
+        <div v-if="store" class="card-list q-gutter-y-md">
+            <slot name="body" :rows="store.data"></slot>
+            <div v-if="!store.data.length && !isLoading" class="info-row q-pa-md text-center">
                 <h5>
                     {{ t('components.smartCard.noData') }}
                 </h5>
@@ -190,7 +135,7 @@ async function onLoad(...params) {
                 <q-spinner color="orange" size="md" />
             </div>
         </div>
-        <div v-if="!rows" class="card-list q-gutter-y-md">
+        <div v-if="!store" class="card-list q-gutter-y-md">
             <q-card class="card" v-for="$index in $props.rowsPerPage" :key="$index">
                 <q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
                     <q-item-section class="q-pa-md">
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 481bf209e..00e02a32a 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -1,46 +1,82 @@
+import { ref, onUnmounted } from 'vue';
 import axios from 'axios';
 import { useArrayDataStore } from 'stores/useArrayDataStore';
 
 const arrayDataStore = useArrayDataStore();
-const options = {
-    limit: 10,
-};
 
 export function useArrayData(key, userOptions) {
     if (!key) throw new Error('ArrayData: A key is required to use this composable');
 
-    arrayDataStore.set(key, []);
+    if (!arrayDataStore.get(key)) {
+        arrayDataStore.set(key);
+    }
 
-    const data = arrayDataStore.get(key);
+    const store = arrayDataStore.get(key);
+    const filter = ref({});
+    const userFilter = ref({});
+    const userParams = ref({});
+    const hasMoreData = ref(true);
+    const options = ref({
+        limit: 10,
+        skip: 0,
+    });
+    const page = ref(1);
 
     if (typeof userOptions === 'object') {
-        Object.assign(options, userOptions);
+        Object.assign(options.value, userOptions);
     }
 
-    async function fetch() {
-        if (!options.url) return;
+    // if (typeof userOptions === 'object' && userOptions.filter) {
+    //     Object.assign(filter.value, userOptions.filter);
+    // }
+    onUnmounted(() => {
+        if (arrayDataStore.get(key)) {
+            arrayDataStore.clear(key);
+        }
+    });
 
-        const filter = {
-            limit: options.limit,
+    async function fetch({ append = false }) {
+        if (!options.value.url) return;
+
+        const fetchFilter = {
+            order: options.value.order,
+            limit: options.value.limit,
+            skip: options.value.skip,
         };
 
-        const requestOptions = { params: { filter } };
+        Object.assign(fetchFilter, userFilter.value);
+        filter.value = fetchFilter;
 
-        const response = await axios.get(options.url, requestOptions);
-        for (const row of response.data) data.push(row);
+        const requestOptions = { params: { filter: filter.value } };
+        const response = await axios.get(options.value.url, requestOptions);
 
-        return response.data;
+        const { limit } = filter.value;
+
+        hasMoreData.value = response.data.length === limit;
+
+        if (append === true) {
+            for (const row of response.data) store.data.push(row);
+        }
+
+        if (append === false) {
+            store.data = response.data;
+        }
     }
 
-    async function apply(filter) {
-        if (!options.url) return;
+    async function apply({ filter, params }) {
+        if (filter) userFilter.value = filter;
+        if (params) userParams.value = params;
 
-        const requestOptions = { params: { filter } };
+        await fetch({ append: false });
+    }
 
-        const response = await axios.get(options.url, requestOptions);
-        for (const row of response.data) data.push(row);
+    async function loadMore() {
+        if (!hasMoreData.value) return;
 
-        return response.data;
+        options.value.skip = options.value.limit * (page.value - 1);
+        page.value += 1;
+
+        await fetch({ append: true });
     }
 
     async function refresh() {
@@ -51,6 +87,8 @@ export function useArrayData(key, userOptions) {
         fetch,
         apply,
         refresh,
-        data,
+        loadMore,
+        store,
+        hasMoreData,
     };
 }
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 6f1c76ab6..d7012a920 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -1,24 +1,21 @@
 <script setup>
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
+import TeleportSlot from 'src/components/ui/TeleportSlot.vue';
 import Paginate from 'src/components/PaginateData.vue';
 import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
 
-// import { useArrayData } from 'composables/useArrayData';
+import { useArrayData } from 'composables/useArrayData';
 
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
 
-// const arrayData = useArrayData('customers', {
-//     url: 'Clients',
-// });
-
-// onMounted(async () => {
-//     await arrayData.fetch();
-//     console.log(arrayData.data);
-// });
+const arrayData = useArrayData('customers', {
+    url: 'Clients',
+});
 
 function navigate(id) {
     router.push({ path: `/customer/${id}` });
@@ -32,9 +29,27 @@ function viewSummary(id) {
         },
     });
 }
+
+const search = ref('');
+async function doSearch() {
+    let filter = {};
+    if (search.value != '') {
+        filter = {
+            where: {
+                id: search,
+            },
+        };
+    }
+    await arrayData.apply({ filter });
+}
 </script>
 
 <template>
+    <teleport-slot to="#searchbar">
+        <q-form @submit="doSearch">
+            <q-input v-model="search" label="Search" dense />
+        </q-form>
+    </teleport-slot>
     <q-page class="q-pa-md">
         <paginate url="/Clients" sort-by="id DESC" auto-load>
             <template #body="{ rows }">
diff --git a/src/stores/useArrayDataStore.js b/src/stores/useArrayDataStore.js
index d75c00176..796c52b7f 100644
--- a/src/stores/useArrayDataStore.js
+++ b/src/stores/useArrayDataStore.js
@@ -2,18 +2,23 @@ import { ref } from 'vue';
 import { defineStore } from 'pinia';
 
 export const useArrayDataStore = defineStore('arrayDataStore', () => {
-    const store = ref({});
+    const state = ref({});
 
     function get(key) {
-        return store.value[key];
+        return state.value[key];
     }
 
-    function set(key, data) {
-        store.value[key] = data;
+    function set(key) {
+        state.value[key] = { data: ref([]) };
+    }
+
+    function clear(key) {
+        delete state.value[key];
     }
 
     return {
         get,
         set,
+        clear
     };
 });

From a89856c5e0acebbdf375db205317118bed5dd9cb Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Sat, 14 Jan 2023 13:48:57 +0100
Subject: [PATCH 03/32] Searchbar

---
 src/components/PaginateData.vue     | 16 +++---
 src/composables/useArrayData.js     | 78 +++++++++++++++++++++--------
 src/pages/Customer/CustomerList.vue | 28 +----------
 src/pages/Customer/CustomerMain.vue | 70 ++++++++++++++++++++++++--
 src/router/modules/customer.js      |  2 +-
 src/stores/useArrayDataStore.js     | 11 +++-
 6 files changed, 139 insertions(+), 66 deletions(-)

diff --git a/src/components/PaginateData.vue b/src/components/PaginateData.vue
index 5c2562d60..c9b67e9e3 100644
--- a/src/components/PaginateData.vue
+++ b/src/components/PaginateData.vue
@@ -26,15 +26,11 @@ const $props = defineProps({
         type: Object,
         default: null,
     },
-    sortBy: {
+    order: {
         type: String,
         default: '',
     },
     limit: {
-        type: String,
-        default: '',
-    },
-    rowsPerPage: {
         type: Number,
         default: 10,
     },
@@ -47,8 +43,8 @@ const $props = defineProps({
 const emit = defineEmits(['onFetch', 'onPaginate']);
 const isLoading = ref(false);
 const pagination = ref({
-    sortBy: $props.sortBy,
-    rowsPerPage: $props.rowsPerPage,
+    sortBy: $props.order,
+    rowsPerPage: $props.limit,
     page: 1,
 });
 
@@ -56,8 +52,8 @@ const arrayData = useArrayData('customers', {
     url: $props.url,
     filter: $props.filter,
     where: $props.where,
-    limit: $props.rowsPerPage,
-    order: $props.sortBy,
+    limit: $props.limit,
+    order: $props.order,
 });
 const store = arrayData.store;
 
@@ -136,7 +132,7 @@ async function onLoad(...params) {
             </div>
         </div>
         <div v-if="!store" class="card-list q-gutter-y-md">
-            <q-card class="card" v-for="$index in $props.rowsPerPage" :key="$index">
+            <q-card class="card" v-for="$index in $props.limit" :key="$index">
                 <q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
                     <q-item-section class="q-pa-md">
                         <q-skeleton type="rect" class="q-mb-md" square />
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 00e02a32a..5ce4f03fb 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -1,4 +1,5 @@
 import { ref, onUnmounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
 import axios from 'axios';
 import { useArrayDataStore } from 'stores/useArrayDataStore';
 
@@ -12,18 +13,18 @@ export function useArrayData(key, userOptions) {
     }
 
     const store = arrayDataStore.get(key);
-    const filter = ref({});
-    const userFilter = ref({});
-    const userParams = ref({});
     const hasMoreData = ref(true);
-    const options = ref({
-        limit: 10,
-        skip: 0,
-    });
+    const router = useRouter();
+    const route = useRoute();
+
     const page = ref(1);
 
     if (typeof userOptions === 'object') {
-        Object.assign(options.value, userOptions);
+        if (userOptions.url) store.url = userOptions.url;
+        if (userOptions.limit) store.limit = userOptions.limit;
+        if (userOptions.order) store.order = userOptions.order;
+        //Object.assign(store.value, userOptions);
+        //console.log(options.value);
     }
 
     // if (typeof userOptions === 'object' && userOptions.filter) {
@@ -36,21 +37,22 @@ export function useArrayData(key, userOptions) {
     });
 
     async function fetch({ append = false }) {
-        if (!options.value.url) return;
+        if (!store.url) return;
 
-        const fetchFilter = {
-            order: options.value.order,
-            limit: options.value.limit,
-            skip: options.value.skip,
+        const filter = {
+            order: store.order,
+            limit: store.limit,
+            skip: store.skip,
         };
 
-        Object.assign(fetchFilter, userFilter.value);
-        filter.value = fetchFilter;
+        Object.assign(filter, store.userFilter);
 
-        const requestOptions = { params: { filter: filter.value } };
-        const response = await axios.get(options.value.url, requestOptions);
+        store.filter = filter;
 
-        const { limit } = filter.value;
+        const requestOptions = { params: { filter: filter } };
+        const response = await axios.get(store.url, requestOptions);
+
+        const { limit } = filter;
 
         hasMoreData.value = response.data.length === limit;
 
@@ -61,11 +63,30 @@ export function useArrayData(key, userOptions) {
         if (append === false) {
             store.data = response.data;
         }
+
+        updateStateParams();
+    }
+
+    async function request({ userFilter }) {
+        if (!store.url) return;
+
+        const filter = {
+            order: store.order,
+            limit: store.limit,
+            skip: store.skip,
+        };
+
+        Object.assign(filter, userFilter);
+
+        const requestOptions = { params: { filter: filter } };
+        const response = await axios.get(store.url, requestOptions);
+
+        return response.data;
     }
 
     async function apply({ filter, params }) {
-        if (filter) userFilter.value = filter;
-        if (params) userParams.value = params;
+        if (filter) store.userFilter = filter;
+        if (params) store.userParams = params;
 
         await fetch({ append: false });
     }
@@ -73,22 +94,35 @@ export function useArrayData(key, userOptions) {
     async function loadMore() {
         if (!hasMoreData.value) return;
 
-        options.value.skip = options.value.limit * (page.value - 1);
+        store.skip = store.limit * (page.value - 1);
         page.value += 1;
 
         await fetch({ append: true });
     }
 
     async function refresh() {
-        // TODO
+        // TODO: Refresh
+    }
+
+    function updateStateParams() {
+        router.replace({
+            path: route.path,
+            query: {
+                order: store.order,
+                limit: store.limit,
+                skip: store.skip,
+            },
+        });
     }
 
     return {
         fetch,
         apply,
         refresh,
+        request,
         loadMore,
         store,
         hasMoreData,
+        updateStateParams,
     };
 }
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index d7012a920..af0b3ce32 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -1,22 +1,14 @@
 <script setup>
-import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
-import TeleportSlot from 'src/components/ui/TeleportSlot.vue';
 import Paginate from 'src/components/PaginateData.vue';
 import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
 
-import { useArrayData } from 'composables/useArrayData';
-
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
 
-const arrayData = useArrayData('customers', {
-    url: 'Clients',
-});
-
 function navigate(id) {
     router.push({ path: `/customer/${id}` });
 }
@@ -29,29 +21,11 @@ function viewSummary(id) {
         },
     });
 }
-
-const search = ref('');
-async function doSearch() {
-    let filter = {};
-    if (search.value != '') {
-        filter = {
-            where: {
-                id: search,
-            },
-        };
-    }
-    await arrayData.apply({ filter });
-}
 </script>
 
 <template>
-    <teleport-slot to="#searchbar">
-        <q-form @submit="doSearch">
-            <q-input v-model="search" label="Search" dense />
-        </q-form>
-    </teleport-slot>
     <q-page class="q-pa-md">
-        <paginate url="/Clients" sort-by="id DESC" auto-load>
+        <paginate url="/Clients" order="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>
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
index 60195440b..bbe456a4a 100644
--- a/src/pages/Customer/CustomerMain.vue
+++ b/src/pages/Customer/CustomerMain.vue
@@ -1,12 +1,67 @@
 <script setup>
-import { useState } from 'src/composables/useState';
+import { ref } from 'vue';
+import { useState } from 'composables/useState';
+import { useArrayData } from 'composables/useArrayData';
 import LeftMenu from 'components/LeftMenu.vue';
-// import TeleportSlot from 'src/components/ui/TeleportSlot.vue';
+import TeleportSlot from 'components/ui/TeleportSlot.vue';
 
 const state = useState();
+const arrayData = useArrayData('customers');
+
+const search = ref('');
+async function doSearch() {
+    let filter = {};
+    if (search.value != '') {
+        filter = {
+            where: {
+                id: search.value,
+            },
+        };
+    }
+    await arrayData.apply({ filter });
+}
+
+const searchRows = ref([])
+async function pre(value) {
+    let filter = {};
+    if (value != '') {
+        filter = {
+            where: {
+                id: value,
+            },
+        };
+    }
+    console.log(filter)
+    const rows = await arrayData.request({ userFilter: filter });
+    searchRows.value = rows
+}
 </script>
 
 <template>
+    <teleport-slot to="#searchbar">
+        <q-form @submit="doSearch">
+            <q-input id="searchbar" v-model="search" label="Search" @update:model-value="pre" dark dense standout>
+                <template #prepend>
+                    <q-icon name="search" />
+                </template>
+                <template #append>
+                    <q-btn icon="filter_alt" flat dense />
+                </template>
+                <q-popup-proxy v-if="searchRows.length === 1">
+                    <q-list>
+                        <q-item v-for="row of searchRows" :key="row.id" v-ripple clickable>
+                            <q-item-section avatar>
+                                <q-img src="http://localhost:9000/api/Images/user/160x160/9/download?access_token=qBo7qT6T24FasiG74QTfFZfXstxTVLZdmvHz7uqvhxpAG1G0dIF6RRGVeoS3NGiA" />
+                            </q-item-section>
+                            <q-item-section>
+                                <q-item-label>{{ row.name }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                    </q-list>
+                </q-popup-proxy>
+            </q-input>
+        </q-form>
+    </teleport-slot>
     <!-- <teleport-slot to="#searchbar">
         <q-select
             ref="search"
@@ -18,9 +73,8 @@ const state = useState();
             color="black"
             :stack-label="false"
             label="Search or jump to..."
-            v-model="text"
-            :options="filteredOptions"
-            @filter="filter"
+            v-model="search"
+            @input-value="doSearch"
             style="width: 400px"
         >
             <template #append>
@@ -64,3 +118,9 @@ const state = useState();
         <router-view></router-view>
     </q-page-container>
 </template>
+
+<style lang="scss">
+#searchbar {
+    width: 400px;
+}
+</style>
diff --git a/src/router/modules/customer.js b/src/router/modules/customer.js
index 1c2d421b6..7b48413f2 100644
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@@ -27,7 +27,7 @@ export default {
                         title: 'list',
                         icon: 'view_list',
                     },
-                    component: () => import('src/pages/Customer/CustomerList.vue'),
+                    component: () => import('src/pages/Customer/CustomerList.vue')
                 },
                 {
                     path: 'create',
diff --git a/src/stores/useArrayDataStore.js b/src/stores/useArrayDataStore.js
index 796c52b7f..958cafb1e 100644
--- a/src/stores/useArrayDataStore.js
+++ b/src/stores/useArrayDataStore.js
@@ -9,7 +9,16 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
     }
 
     function set(key) {
-        state.value[key] = { data: ref([]) };
+        state.value[key] = { 
+            filter: {},
+            userFilter: {},
+            userParams: {},
+            url: '',
+            limit: 10,
+            skip: 0,
+            order: '',
+            data: ref([]) 
+        };
     }
 
     function clear(key) {

From b583d8b12e433918e56c6ad5fd6a9b607e71780d Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 17 Jan 2023 14:57:12 +0100
Subject: [PATCH 04/32] Added searchbar panel

---
 src/components/NavBar.vue             |   4 +-
 src/composables/useArrayData.js       |   9 +-
 src/pages/Customer/CustomerList.vue   |   2 +-
 src/pages/Customer/CustomerMain.vue   | 293 ++++++++++++++++++--------
 src/pages/Customer/CustomerSearch.vue |   3 +
 5 files changed, 221 insertions(+), 90 deletions(-)
 create mode 100644 src/pages/Customer/CustomerSearch.vue

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 30afedb7a..ee95e258c 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -38,7 +38,9 @@ function onToggleDrawer() {
                     </q-tooltip>
                 </q-btn>
             </router-link>
-            <q-toolbar-title shrink class="text-weight-bold">{{ appName }}</q-toolbar-title>
+            <q-toolbar-title shrink class="text-weight-bold" v-if="$q.screen.gt.xs">
+                {{ appName }}
+            </q-toolbar-title>
             <q-space></q-space>
             <div id="searchbar"></div>
             <q-space></q-space>
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 5ce4f03fb..049cea116 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -49,8 +49,13 @@ export function useArrayData(key, userOptions) {
 
         store.filter = filter;
 
-        const requestOptions = { params: { filter: filter } };
-        const response = await axios.get(store.url, requestOptions);
+        const params = {
+            filter: filter,
+        };
+
+        Object.assign(params, store.userParams);
+
+        const response = await axios.get(store.url, { params });
 
         const { limit } = filter;
 
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index af0b3ce32..de2a7d7ca 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -25,7 +25,7 @@ function viewSummary(id) {
 
 <template>
     <q-page class="q-pa-md">
-        <paginate url="/Clients" order="id DESC" auto-load>
+        <paginate url="/Clients/filter" order="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>
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
index bbe456a4a..dfc391418 100644
--- a/src/pages/Customer/CustomerMain.vue
+++ b/src/pages/Customer/CustomerMain.vue
@@ -1,114 +1,234 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, reactive, computed } from 'vue';
+import { useSession } from 'src/composables/useSession';
 import { useState } from 'composables/useState';
 import { useArrayData } from 'composables/useArrayData';
 import LeftMenu from 'components/LeftMenu.vue';
+import FetchData from 'components/FetchData.vue';
 import TeleportSlot from 'components/ui/TeleportSlot.vue';
 
 const state = useState();
 const arrayData = useArrayData('customers');
+const session = useSession();
 
-const search = ref('');
-async function doSearch() {
-    let filter = {};
-    if (search.value != '') {
-        filter = {
-            where: {
-                id: search.value,
-            },
-        };
+const token = session.getToken();
+
+const searchBackdrop = ref(false);
+
+const provinces = ref([]);
+const workers = ref([]);
+const workersCopy = ref([]);
+const zones = ref([]);
+
+const searchPanel = ref();
+const userParams = reactive({});
+const tags = computed(() => {
+    const params = [];
+
+    for (const param in userParams) {
+        params.push({
+            label: param,
+            value: userParams[param],
+        });
     }
-    await arrayData.apply({ filter });
+
+    return params;
+});
+
+async function doSearch() {
+    // let filter = {};
+    // if (search.value != '') {
+    //     filter = {
+    //         where: {
+    //             id: search.value,
+    //         },
+    //     };
+    // }
+    const params = userParams;
+
+    await arrayData.apply({ filter: {}, params });
+    searchPanel.value.hide();
 }
 
-const searchRows = ref([])
-async function pre(value) {
-    let filter = {};
-    if (value != '') {
-        filter = {
-            where: {
-                id: value,
-            },
-        };
-    }
-    console.log(filter)
-    const rows = await arrayData.request({ userFilter: filter });
-    searchRows.value = rows
+// const searchRows = ref([])
+// async function pre(value) {
+//     let filter = {};
+//     if (value != '') {
+//         filter = {
+//             where: {
+//                 id: value,
+//             },
+//         };
+//     }
+//     console.log(filter)
+//     const rows = await arrayData.request({ userFilter: filter });
+//     searchRows.value = rows
+// }
+
+function setWorkers(data) {
+    workers.value = data;
+    workersCopy.value = data;
 }
 </script>
 
 <template>
+    <fetch-data url="Provinces" @on-fetch="(data) => (provinces = data)" auto-load />
+    <fetch-data url="Zones" @on-fetch="(data) => (zones = data)" auto-load />
+    <fetch-data
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="setWorkers"
+        auto-load
+    />
     <teleport-slot to="#searchbar">
         <q-form @submit="doSearch">
-            <q-input id="searchbar" v-model="search" label="Search" @update:model-value="pre" dark dense standout>
+            <q-input id="searchbar" v-model="userParams.search" label="Search" dark dense standout autofocus>
                 <template #prepend>
                     <q-icon name="search" />
                 </template>
                 <template #append>
-                    <q-btn icon="filter_alt" flat dense />
+                    <q-btn @click="searchBackdrop = !searchBackdrop" icon="filter_alt" flat dense>
+                        <q-tooltip>Apply search filters</q-tooltip>
+                        <div class="q-dialog__backdrop fixed-full" v-if="searchBackdrop"></div>
+                        <q-popup-proxy
+                            ref="searchPanel"
+                            v-model="searchBackdrop"
+                            target="#searchbar"
+                            no-parent-event
+                            fit
+                        >
+                            <q-card class="q-pa-md">
+                                <q-form @submit="doSearch" class="q-gutter-y-md">
+                                    <div class="row truncate-chip-labels">
+                                        <q-chip
+                                            v-for="chip of tags"
+                                            :key="chip.label"
+                                            @remove="log('Icecream')"
+                                            icon="label"
+                                            color="primary"
+                                            size="sm"
+                                            removable
+                                        >
+                                            <strong>{{ chip.label }}: </strong>
+                                            <span>"{{ chip.value }}"</span>
+                                        </q-chip>
+                                    </div>
+                                    <div class="row q-gutter-x-md">
+                                        <div class="col">
+                                            <q-input
+                                                v-model="userParams.search"
+                                                label="Search"
+                                                hint="Search by id or name"
+                                                lazy-rules
+                                                autofocus
+                                            />
+                                        </div>
+                                    </div>
+                                    <div class="row q-gutter-x-md">
+                                        <div class="col">
+                                            <q-input label="Name" v-model="userParams.name" lazy-rules />
+                                        </div>
+                                        <div class="col">
+                                            <q-input label="Fiscal ID" v-model="userParams.fi" lazy-rules />
+                                        </div>
+                                        <div class="col">
+                                            <q-input label="Phone" v-model="userParams.phone" lazy-rules />
+                                        </div>
+                                    </div>
+
+                                    <div class="row q-gutter-x-md">
+                                        <div class="col">
+                                            <q-input label="Phone" v-model="userParams.phone" lazy-rules />
+                                        </div>
+                                        <div class="col">
+                                            <q-input label="Email" v-model="userParams.email" lazy-rules />
+                                        </div>
+                                    </div>
+
+                                    <div class="row q-gutter-x-md">
+                                        <div class="col">
+                                            <q-select
+                                                label="Province"
+                                                v-model="userParams.provinceFk"
+                                                :options="provinces"
+                                                option-value="id"
+                                                option-label="name"
+                                                emit-value
+                                                map-options
+                                            />
+                                        </div>
+                                        <div class="col">
+                                            <q-input label="City" v-model="userParams.city" lazy-rules />
+                                        </div>
+                                    </div>
+
+                                    <div class="row q-gutter-x-md">
+                                        <div class="col">
+                                            <q-select
+                                                label="Zone"
+                                                v-model="userParams.zoneFk"
+                                                :options="zones"
+                                                option-value="id"
+                                                option-label="name"
+                                                emit-value
+                                                map-options
+                                            />
+                                        </div>
+                                        <div class="col">
+                                            <q-input label="Postcode" v-model="userParams.postcode" lazy-rules />
+                                        </div>
+                                    </div>
+
+                                    <div class="row q-gutter-x-md">
+                                        <div class="col">
+                                            <q-select
+                                                v-model="userParams.salesPersonFk"
+                                                :options="workers"
+                                                option-value="id"
+                                                option-label="name"
+                                                emit-value
+                                                label="Salesperson"
+                                                map-options
+                                                use-input
+                                                :input-debounce="0"
+                                            >
+                                                <template #before>
+                                                    <q-avatar color="orange">
+                                                        <q-img
+                                                            v-if="userParams.salesPersonFk"
+                                                            :src="`/api/Images/user/160x160/${userParams.salesPersonFk}/download?access_token=${token}`"
+                                                            spinner-color="white"
+                                                        />
+                                                    </q-avatar>
+                                                </template>
+                                            </q-select>
+                                        </div>
+                                    </div>
+
+                                    <!-- <q-input
+                                    label="Phone"
+                                    hint="The customer phone"
+                                    lazy-rules
+                                    :rules="[(val) => (val && val.length > 0) || 'Please type something']"
+                                /> -->
+
+                                    <div>
+                                        <q-btn
+                                            label="Search"
+                                            type="submit"
+                                            color="primary"
+                                            class="full-width"
+                                            rounded
+                                        />
+                                    </div>
+                                </q-form>
+                            </q-card>
+                        </q-popup-proxy>
+                    </q-btn>
                 </template>
-                <q-popup-proxy v-if="searchRows.length === 1">
-                    <q-list>
-                        <q-item v-for="row of searchRows" :key="row.id" v-ripple clickable>
-                            <q-item-section avatar>
-                                <q-img src="http://localhost:9000/api/Images/user/160x160/9/download?access_token=qBo7qT6T24FasiG74QTfFZfXstxTVLZdmvHz7uqvhxpAG1G0dIF6RRGVeoS3NGiA" />
-                            </q-item-section>
-                            <q-item-section>
-                                <q-item-label>{{ row.name }}</q-item-label>
-                            </q-item-section>
-                        </q-item>
-                    </q-list>
-                </q-popup-proxy>
             </q-input>
         </q-form>
     </teleport-slot>
-    <!-- <teleport-slot to="#searchbar">
-        <q-select
-            ref="search"
-            dark
-            dense
-            standout
-            use-input
-            hide-selected
-            color="black"
-            :stack-label="false"
-            label="Search or jump to..."
-            v-model="search"
-            @input-value="doSearch"
-            style="width: 400px"
-        >
-            <template #append>
-                <img src="https://cdn.quasar.dev/img/layout-gallery/img-github-search-key-slash.svg" />
-            </template>
-
-            <template #no-option>
-                <q-item>
-                    <q-item-section>
-                        <div class="text-center">
-                            <q-spinner-pie color="grey-5" size="24px" />
-                        </div>
-                    </q-item-section>
-                </q-item>
-            </template>
-
-            <template #option="scope">
-                <q-item v-bind="scope.itemProps" class="GL__select-GL__menu-link">
-                    <q-item-section side>
-                        <q-icon name="collections_bookmark" />
-                    </q-item-section>
-                    <q-item-section>
-                        <q-item-label>{{ scope.opt.label }}</q-item-label>
-                    </q-item-section>
-                    <q-item-section side :class="{ 'default-type': !scope.opt.type }">
-                        <q-btn outline dense no-caps text-color="blue-grey-5" size="12px" class="bg-grey-1 q-px-sm">
-                            {{ scope.opt.type || 'Jump to' }}
-                            <q-icon name="subdirectory_arrow_left" size="14px" />
-                        </q-btn>
-                    </q-item-section>
-                </q-item>
-            </template>
-        </q-select>
-    </teleport-slot> -->
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit text-grey-8">
             <LeftMenu />
@@ -120,7 +240,8 @@ async function pre(value) {
 </template>
 
 <style lang="scss">
-#searchbar {
+#searchbar,
+.search-panel {
     width: 400px;
 }
 </style>
diff --git a/src/pages/Customer/CustomerSearch.vue b/src/pages/Customer/CustomerSearch.vue
new file mode 100644
index 000000000..6253f1e1a
--- /dev/null
+++ b/src/pages/Customer/CustomerSearch.vue
@@ -0,0 +1,3 @@
+<template>
+    test
+</template>
\ No newline at end of file

From 65df35c84030476e41eca9e144c3dca0b78d4ee1 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Thu, 19 Jan 2023 07:17:51 +0100
Subject: [PATCH 05/32] Style fixes

---
 src/css/app.scss                    | 10 +++++
 src/css/quasar.variables.scss       |  1 -
 src/pages/Customer/CustomerMain.vue | 68 ++++++++++++++++-------------
 3 files changed, 47 insertions(+), 32 deletions(-)

diff --git a/src/css/app.scss b/src/css/app.scss
index 73660398b..2e6008b1e 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -13,3 +13,13 @@ a {
 .link:hover {
     color: $orange-4;
 }
+
+// Removes chrome autofill background
+input:-webkit-autofill,
+select:-webkit-autofill {
+    color: $input-text-color !important;
+    font-family: $typography-font-family;
+    -webkit-text-fill-color: $input-text-color !important;
+    -webkit-background-clip: text !important;
+    background-clip: text !important;
+}
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index aa89a88d9..abe905c55 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -29,5 +29,4 @@ $border-thin-light: 1px solid $color-spacer-light;
 
 $dark-shadow-color: #000;
 $layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24);
-
 $spacing-md: 16px;
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
index dfc391418..bd36f7454 100644
--- a/src/pages/Customer/CustomerMain.vue
+++ b/src/pages/Customer/CustomerMain.vue
@@ -46,7 +46,7 @@ async function doSearch() {
     // }
     const params = userParams;
 
-    await arrayData.apply({ filter: {}, params });
+    await arrayData.apply({ params });
     searchPanel.value.hide();
 }
 
@@ -65,6 +65,12 @@ async function doSearch() {
 //     searchRows.value = rows
 // }
 
+function searchParams(params) {
+    switch (params) {
+        
+    }
+}
+
 function setWorkers(data) {
     workers.value = data;
     workersCopy.value = data;
@@ -125,14 +131,40 @@ function setWorkers(data) {
                                         </div>
                                     </div>
                                     <div class="row q-gutter-x-md">
-                                        <div class="col">
-                                            <q-input label="Name" v-model="userParams.name" lazy-rules />
-                                        </div>
                                         <div class="col">
                                             <q-input label="Fiscal ID" v-model="userParams.fi" lazy-rules />
                                         </div>
                                         <div class="col">
-                                            <q-input label="Phone" v-model="userParams.phone" lazy-rules />
+                                            <q-input label="Name" v-model="userParams.name" lazy-rules />
+                                        </div>
+                                        <div class="col">
+                                            <q-input label="Social name" v-model="userParams.socialName" lazy-rules />
+                                        </div>
+                                    </div>
+
+                                    <div class="row q-gutter-x-md">
+                                        <div class="col">
+                                            <q-select
+                                                v-model="userParams.salesPersonFk"
+                                                :options="workers"
+                                                option-value="id"
+                                                option-label="name"
+                                                emit-value
+                                                label="Salesperson"
+                                                map-options
+                                                use-input
+                                                :input-debounce="0"
+                                            >
+                                                <template #before>
+                                                    <q-avatar color="orange">
+                                                        <q-img
+                                                            v-if="userParams.salesPersonFk"
+                                                            :src="`/api/Images/user/160x160/${userParams.salesPersonFk}/download?access_token=${token}`"
+                                                            spinner-color="white"
+                                                        />
+                                                    </q-avatar>
+                                                </template>
+                                            </q-select>
                                         </div>
                                     </div>
 
@@ -179,32 +211,6 @@ function setWorkers(data) {
                                         </div>
                                     </div>
 
-                                    <div class="row q-gutter-x-md">
-                                        <div class="col">
-                                            <q-select
-                                                v-model="userParams.salesPersonFk"
-                                                :options="workers"
-                                                option-value="id"
-                                                option-label="name"
-                                                emit-value
-                                                label="Salesperson"
-                                                map-options
-                                                use-input
-                                                :input-debounce="0"
-                                            >
-                                                <template #before>
-                                                    <q-avatar color="orange">
-                                                        <q-img
-                                                            v-if="userParams.salesPersonFk"
-                                                            :src="`/api/Images/user/160x160/${userParams.salesPersonFk}/download?access_token=${token}`"
-                                                            spinner-color="white"
-                                                        />
-                                                    </q-avatar>
-                                                </template>
-                                            </q-select>
-                                        </div>
-                                    </div>
-
                                     <!-- <q-input
                                     label="Phone"
                                     hint="The customer phone"

From 97a56008419e4d77eee121a6758bc00350affb18 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Thu, 19 Jan 2023 15:01:18 +0100
Subject: [PATCH 06/32] Component

---
 src/components/ui/ModuleSearchbar.vue |  40 +++++
 src/pages/Customer/CustomerMain.vue   | 243 +++++---------------------
 src/pages/Customer/CustomerSearch.vue | 159 ++++++++++++++++-
 3 files changed, 238 insertions(+), 204 deletions(-)
 create mode 100644 src/components/ui/ModuleSearchbar.vue

diff --git a/src/components/ui/ModuleSearchbar.vue b/src/components/ui/ModuleSearchbar.vue
new file mode 100644
index 000000000..7be777bda
--- /dev/null
+++ b/src/components/ui/ModuleSearchbar.vue
@@ -0,0 +1,40 @@
+<script setup>
+import { ref } from 'vue';
+import { useArrayData } from 'composables/useArrayData';
+// const props = defineProps({
+//     id: {
+//         type: String,
+//         required: true,
+//     },
+// });
+
+const arrayData = useArrayData('customers');
+const searchText = ref('');
+const searchBackdrop = ref(false);
+
+async function search({ userParams }) {
+    //const params = userParams;
+    const params = userParams.value;
+    await arrayData.apply({ params });
+    // searchPanel.value.hide();
+}
+</script>
+
+<template>
+    <q-form @submit="search">
+        <q-input id="searchbar" v-model="searchText" label="Search" dark dense standout autofocus>
+            <template #prepend>
+                <q-icon name="search" />
+            </template>
+            <template #append>
+                <q-btn @click="searchBackdrop = !searchBackdrop" icon="filter_alt" flat dense>
+                    <q-tooltip>Apply search filters</q-tooltip>
+                    <div class="q-dialog__backdrop fixed-full" v-if="searchBackdrop"></div>
+                    <q-popup-proxy ref="searchPanel" v-model="searchBackdrop" target="#searchbar" no-parent-event fit>
+                        <slot name="panel" :scope="{ search }" />
+                    </q-popup-proxy>
+                </q-btn>
+            </template>
+        </q-input>
+    </q-form>
+</template>
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
index bd36f7454..63512c29c 100644
--- a/src/pages/Customer/CustomerMain.vue
+++ b/src/pages/Customer/CustomerMain.vue
@@ -1,54 +1,48 @@
 <script setup>
-import { ref, reactive, computed } from 'vue';
-import { useSession } from 'src/composables/useSession';
+// import { useSession } from 'src/composables/useSession';
 import { useState } from 'composables/useState';
-import { useArrayData } from 'composables/useArrayData';
 import LeftMenu from 'components/LeftMenu.vue';
-import FetchData from 'components/FetchData.vue';
 import TeleportSlot from 'components/ui/TeleportSlot.vue';
+import ModuleSearchbar from 'components/ui/ModuleSearchbar.vue';
+import CustomerSearch from './CustomerSearch.vue';
 
 const state = useState();
-const arrayData = useArrayData('customers');
-const session = useSession();
+// const arrayData = useArrayData('customers');
+// const session = useSession();
 
-const token = session.getToken();
+// const token = session.getToken();
 
-const searchBackdrop = ref(false);
+// const searchBackdrop = ref(false);
 
-const provinces = ref([]);
-const workers = ref([]);
-const workersCopy = ref([]);
-const zones = ref([]);
+// const searchPanel = ref();
+// const userParams = reactive({});
+// const tags = computed(() => {
+//     const params = [];
 
-const searchPanel = ref();
-const userParams = reactive({});
-const tags = computed(() => {
-    const params = [];
+//     for (const param in userParams) {
+//         params.push({
+//             label: param,
+//             value: userParams[param],
+//         });
+//     }
 
-    for (const param in userParams) {
-        params.push({
-            label: param,
-            value: userParams[param],
-        });
-    }
+//     return params;
+// });
 
-    return params;
-});
+// async function doSearch() {
+//     // let filter = {};
+//     // if (search.value != '') {
+//     //     filter = {
+//     //         where: {
+//     //             id: search.value,
+//     //         },
+//     //     };
+//     // }
+//     const params = userParams;
 
-async function doSearch() {
-    // let filter = {};
-    // if (search.value != '') {
-    //     filter = {
-    //         where: {
-    //             id: search.value,
-    //         },
-    //     };
-    // }
-    const params = userParams;
-
-    await arrayData.apply({ params });
-    searchPanel.value.hide();
-}
+//     await arrayData.apply({ params });
+//     searchPanel.value.hide();
+// }
 
 // const searchRows = ref([])
 // async function pre(value) {
@@ -65,175 +59,20 @@ async function doSearch() {
 //     searchRows.value = rows
 // }
 
-function searchParams(params) {
-    switch (params) {
-        
-    }
-}
+// function searchParams(params) {
+//     switch (params) {
 
-function setWorkers(data) {
-    workers.value = data;
-    workersCopy.value = data;
-}
+//     }
+// }
 </script>
 
 <template>
-    <fetch-data url="Provinces" @on-fetch="(data) => (provinces = data)" auto-load />
-    <fetch-data url="Zones" @on-fetch="(data) => (zones = data)" auto-load />
-    <fetch-data
-        url="Workers/activeWithInheritedRole"
-        :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="setWorkers"
-        auto-load
-    />
     <teleport-slot to="#searchbar">
-        <q-form @submit="doSearch">
-            <q-input id="searchbar" v-model="userParams.search" label="Search" dark dense standout autofocus>
-                <template #prepend>
-                    <q-icon name="search" />
-                </template>
-                <template #append>
-                    <q-btn @click="searchBackdrop = !searchBackdrop" icon="filter_alt" flat dense>
-                        <q-tooltip>Apply search filters</q-tooltip>
-                        <div class="q-dialog__backdrop fixed-full" v-if="searchBackdrop"></div>
-                        <q-popup-proxy
-                            ref="searchPanel"
-                            v-model="searchBackdrop"
-                            target="#searchbar"
-                            no-parent-event
-                            fit
-                        >
-                            <q-card class="q-pa-md">
-                                <q-form @submit="doSearch" class="q-gutter-y-md">
-                                    <div class="row truncate-chip-labels">
-                                        <q-chip
-                                            v-for="chip of tags"
-                                            :key="chip.label"
-                                            @remove="log('Icecream')"
-                                            icon="label"
-                                            color="primary"
-                                            size="sm"
-                                            removable
-                                        >
-                                            <strong>{{ chip.label }}: </strong>
-                                            <span>"{{ chip.value }}"</span>
-                                        </q-chip>
-                                    </div>
-                                    <div class="row q-gutter-x-md">
-                                        <div class="col">
-                                            <q-input
-                                                v-model="userParams.search"
-                                                label="Search"
-                                                hint="Search by id or name"
-                                                lazy-rules
-                                                autofocus
-                                            />
-                                        </div>
-                                    </div>
-                                    <div class="row q-gutter-x-md">
-                                        <div class="col">
-                                            <q-input label="Fiscal ID" v-model="userParams.fi" lazy-rules />
-                                        </div>
-                                        <div class="col">
-                                            <q-input label="Name" v-model="userParams.name" lazy-rules />
-                                        </div>
-                                        <div class="col">
-                                            <q-input label="Social name" v-model="userParams.socialName" lazy-rules />
-                                        </div>
-                                    </div>
-
-                                    <div class="row q-gutter-x-md">
-                                        <div class="col">
-                                            <q-select
-                                                v-model="userParams.salesPersonFk"
-                                                :options="workers"
-                                                option-value="id"
-                                                option-label="name"
-                                                emit-value
-                                                label="Salesperson"
-                                                map-options
-                                                use-input
-                                                :input-debounce="0"
-                                            >
-                                                <template #before>
-                                                    <q-avatar color="orange">
-                                                        <q-img
-                                                            v-if="userParams.salesPersonFk"
-                                                            :src="`/api/Images/user/160x160/${userParams.salesPersonFk}/download?access_token=${token}`"
-                                                            spinner-color="white"
-                                                        />
-                                                    </q-avatar>
-                                                </template>
-                                            </q-select>
-                                        </div>
-                                    </div>
-
-                                    <div class="row q-gutter-x-md">
-                                        <div class="col">
-                                            <q-input label="Phone" v-model="userParams.phone" lazy-rules />
-                                        </div>
-                                        <div class="col">
-                                            <q-input label="Email" v-model="userParams.email" lazy-rules />
-                                        </div>
-                                    </div>
-
-                                    <div class="row q-gutter-x-md">
-                                        <div class="col">
-                                            <q-select
-                                                label="Province"
-                                                v-model="userParams.provinceFk"
-                                                :options="provinces"
-                                                option-value="id"
-                                                option-label="name"
-                                                emit-value
-                                                map-options
-                                            />
-                                        </div>
-                                        <div class="col">
-                                            <q-input label="City" v-model="userParams.city" lazy-rules />
-                                        </div>
-                                    </div>
-
-                                    <div class="row q-gutter-x-md">
-                                        <div class="col">
-                                            <q-select
-                                                label="Zone"
-                                                v-model="userParams.zoneFk"
-                                                :options="zones"
-                                                option-value="id"
-                                                option-label="name"
-                                                emit-value
-                                                map-options
-                                            />
-                                        </div>
-                                        <div class="col">
-                                            <q-input label="Postcode" v-model="userParams.postcode" lazy-rules />
-                                        </div>
-                                    </div>
-
-                                    <!-- <q-input
-                                    label="Phone"
-                                    hint="The customer phone"
-                                    lazy-rules
-                                    :rules="[(val) => (val && val.length > 0) || 'Please type something']"
-                                /> -->
-
-                                    <div>
-                                        <q-btn
-                                            label="Search"
-                                            type="submit"
-                                            color="primary"
-                                            class="full-width"
-                                            rounded
-                                        />
-                                    </div>
-                                </q-form>
-                            </q-card>
-                        </q-popup-proxy>
-                    </q-btn>
-                </template>
-            </q-input>
-        </q-form>
+        <module-searchbar data-key="customerList">
+            <template #panel="{ scope }">
+                <customer-search :scope="scope" />
+            </template>
+        </module-searchbar>
     </teleport-slot>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit text-grey-8">
diff --git a/src/pages/Customer/CustomerSearch.vue b/src/pages/Customer/CustomerSearch.vue
index 6253f1e1a..c820806cf 100644
--- a/src/pages/Customer/CustomerSearch.vue
+++ b/src/pages/Customer/CustomerSearch.vue
@@ -1,3 +1,158 @@
+<script setup>
+import { ref } from 'vue';
+import FetchData from 'components/FetchData.vue';
+
+const props = defineProps({
+    scope: {
+        type: Object,
+        required: true,
+    },
+});
+
+const userParams = ref({});
+async function search() {
+    const searchFn = props.scope.search;
+
+    await searchFn({ userParams });
+}
+
+const provinces = ref([]);
+const workers = ref([]);
+const workersCopy = ref([]);
+const zones = ref([]);
+
+function setWorkers(data) {
+    workers.value = data;
+    workersCopy.value = data;
+}
+</script>
 <template>
-    test
-</template>
\ No newline at end of file
+    <fetch-data url="Provinces" @on-fetch="(data) => (provinces = data)" auto-load />
+    <fetch-data url="Zones" @on-fetch="(data) => (zones = data)" auto-load />
+    <fetch-data
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="setWorkers"
+        auto-load
+    />
+    <q-card class="q-pa-md">
+        <q-form @submit="search" class="q-gutter-y-md">
+            <!-- <div class="row truncate-chip-labels">
+                <q-chip
+                    v-for="chip of tags"
+                    :key="chip.label"
+                    @remove="log('Icecream')"
+                    icon="label"
+                    color="primary"
+                    size="sm"
+                    removable
+                >
+                    <strong>{{ chip.label }}: </strong>
+                    <span>"{{ chip.value }}"</span>
+                </q-chip>
+            </div> -->
+            <div class="row q-gutter-x-md">
+                <div class="col">
+                    <q-input
+                        v-model="userParams.search"
+                        label="Search"
+                        hint="Search by id or name"
+                        lazy-rules
+                        autofocus
+                    />
+                </div>
+            </div>
+            <div class="row q-gutter-x-md">
+                <div class="col">
+                    <q-input label="Fiscal ID" v-model="userParams.fi" lazy-rules />
+                </div>
+                <div class="col">
+                    <q-input label="Name" v-model="userParams.name" lazy-rules />
+                </div>
+                <div class="col">
+                    <q-input label="Social name" v-model="userParams.socialName" lazy-rules />
+                </div>
+            </div>
+
+            <div class="row q-gutter-x-md">
+                <div class="col">
+                    <q-select
+                        v-model="userParams.salesPersonFk"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        label="Salesperson"
+                        map-options
+                        use-input
+                        :input-debounce="0"
+                    >
+                        <template #before>
+                            <q-avatar color="orange">
+                                <q-img
+                                    v-if="userParams.salesPersonFk"
+                                    :src="`/api/Images/user/160x160/${userParams.salesPersonFk}/download?access_token=${token}`"
+                                    spinner-color="white"
+                                />
+                            </q-avatar>
+                        </template>
+                    </q-select>
+                </div>
+            </div>
+
+            <div class="row q-gutter-x-md">
+                <div class="col">
+                    <q-input label="Phone" v-model="userParams.phone" lazy-rules />
+                </div>
+                <div class="col">
+                    <q-input label="Email" v-model="userParams.email" lazy-rules />
+                </div>
+            </div>
+
+            <div class="row q-gutter-x-md">
+                <div class="col">
+                    <q-select
+                        label="Province"
+                        v-model="userParams.provinceFk"
+                        :options="provinces"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                    />
+                </div>
+                <div class="col">
+                    <q-input label="City" v-model="userParams.city" lazy-rules />
+                </div>
+            </div>
+
+            <div class="row q-gutter-x-md">
+                <div class="col">
+                    <q-select
+                        label="Zone"
+                        v-model="userParams.zoneFk"
+                        :options="zones"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                    />
+                </div>
+                <div class="col">
+                    <q-input label="Postcode" v-model="userParams.postcode" lazy-rules />
+                </div>
+            </div>
+
+            <!-- <q-input
+                                    label="Phone"
+                                    hint="The customer phone"
+                                    lazy-rules
+                                    :rules="[(val) => (val && val.length > 0) || 'Please type something']"
+                                /> -->
+
+            <div>
+                <q-btn label="Search" type="submit" color="primary" class="full-width" rounded />
+            </div>
+        </q-form>
+    </q-card>
+</template>

From 1b998d453d746f32d3b86d767f8db576a7f610db Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Fri, 27 Jan 2023 09:43:10 +0100
Subject: [PATCH 07/32] Changes

---
 src/components/ui/ModuleSearchbar.vue |  88 ++++++++++-
 src/composables/useArrayData.js       |   7 +-
 src/pages/Customer/CustomerSearch.vue | 205 +++++++++++++-------------
 3 files changed, 185 insertions(+), 115 deletions(-)

diff --git a/src/components/ui/ModuleSearchbar.vue b/src/components/ui/ModuleSearchbar.vue
index 7be777bda..138121a86 100644
--- a/src/components/ui/ModuleSearchbar.vue
+++ b/src/components/ui/ModuleSearchbar.vue
@@ -1,6 +1,8 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'composables/useArrayData';
+
 // const props = defineProps({
 //     id: {
 //         type: String,
@@ -8,33 +10,103 @@ import { useArrayData } from 'composables/useArrayData';
 //     },
 // });
 
+const { t } = useI18n();
 const arrayData = useArrayData('customers');
-const searchText = ref('');
+
+const searchPanel = ref();
+const searchParams = ref({});
 const searchBackdrop = ref(false);
 
 async function search({ userParams }) {
-    //const params = userParams;
-    const params = userParams.value;
-    await arrayData.apply({ params });
-    // searchPanel.value.hide();
+    if (userParams) Object.assign(searchParams.value, userParams.value);
+
+    await arrayData.apply({ params: searchParams });
+
+    searchPanel.value.hide();
 }
+
+async function remove(param) {
+    delete searchParams.value[param];
+
+    await search({ userParams: {} });
+}
+
+const tags = computed(() => {
+    const params = [];
+
+    for (const param in searchParams.value) {
+        params.push({
+            property: param,
+            label: param,
+            value: searchParams.value[param],
+        });
+    }
+
+    return params;
+});
 </script>
 
 <template>
     <q-form @submit="search">
-        <q-input id="searchbar" v-model="searchText" label="Search" dark dense standout autofocus>
+        <q-input id="searchbar" v-model="searchParams.search" label="Search" dark dense standout autofocus>
             <template #prepend>
                 <q-icon name="search" />
             </template>
             <template #append>
+                <q-btn icon="label" flat dense>
+                    <q-popup-proxy>
+                        <q-card class="q-pa-md" style="max-width: 300px">
+                            <div class="truncate-chip-labels">
+                                <q-chip
+                                    v-for="chip of tags"
+                                    :key="chip.label"
+                                    @remove="remove(chip.property)"
+                                    icon="label"
+                                    color="primary"
+                                    size="sm"
+                                    removable
+                                >
+                                    <strong>{{ t(chip.label) }}: </strong>
+                                    <span>"{{ chip.value }}"</span>
+                                </q-chip>
+                            </div>
+                        </q-card>
+                    </q-popup-proxy>
+                </q-btn>
                 <q-btn @click="searchBackdrop = !searchBackdrop" icon="filter_alt" flat dense>
                     <q-tooltip>Apply search filters</q-tooltip>
                     <div class="q-dialog__backdrop fixed-full" v-if="searchBackdrop"></div>
                     <q-popup-proxy ref="searchPanel" v-model="searchBackdrop" target="#searchbar" no-parent-event fit>
-                        <slot name="panel" :scope="{ search }" />
+                        <q-card class="q-pa-md">
+                            <div class="row truncate-chip-labels">
+                                <q-chip
+                                    v-for="chip of tags"
+                                    :key="chip.label"
+                                    @remove="remove(chip.property)"
+                                    icon="label"
+                                    color="primary"
+                                    size="sm"
+                                    removable
+                                >
+                                    <strong>{{ t(chip.label) }}: </strong>
+                                    <span>"{{ chip.value }}"</span>
+                                </q-chip>
+                            </div>
+                            <slot name="panel" :scope="{ search }" />
+                        </q-card>
                     </q-popup-proxy>
                 </q-btn>
             </template>
         </q-input>
     </q-form>
 </template>
+<i18n>
+    {
+        "en": {
+            "phone": "Phone"
+        },
+        "es": {
+            "phone": "Teléfono"
+        }
+    }
+</i18n>
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 049cea116..221a7d2c5 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -67,9 +67,9 @@ export function useArrayData(key, userOptions) {
 
         if (append === false) {
             store.data = response.data;
-        }
 
-        updateStateParams();
+            updateStateParams();
+        }
     }
 
     async function request({ userFilter }) {
@@ -116,6 +116,9 @@ export function useArrayData(key, userOptions) {
                 order: store.order,
                 limit: store.limit,
                 skip: store.skip,
+                params: [
+                    'a'
+                ],
             },
         });
     }
diff --git a/src/pages/Customer/CustomerSearch.vue b/src/pages/Customer/CustomerSearch.vue
index c820806cf..738da9d89 100644
--- a/src/pages/Customer/CustomerSearch.vue
+++ b/src/pages/Customer/CustomerSearch.vue
@@ -1,7 +1,10 @@
 <script setup>
 import { ref } from 'vue';
+import { useSession } from 'composables/useSession';
 import FetchData from 'components/FetchData.vue';
 
+const session = useSession();
+
 const props = defineProps({
     scope: {
         type: Object,
@@ -9,7 +12,9 @@ const props = defineProps({
     },
 });
 
+const token = session.getToken();
 const userParams = ref({});
+
 async function search() {
     const searchFn = props.scope.search;
 
@@ -35,124 +40,114 @@ function setWorkers(data) {
         @on-fetch="setWorkers"
         auto-load
     />
-    <q-card class="q-pa-md">
-        <q-form @submit="search" class="q-gutter-y-md">
-            <!-- <div class="row truncate-chip-labels">
-                <q-chip
-                    v-for="chip of tags"
-                    :key="chip.label"
-                    @remove="log('Icecream')"
-                    icon="label"
-                    color="primary"
-                    size="sm"
-                    removable
+
+    <q-form @submit="search" class="q-gutter-y-md">
+        <div class="row q-gutter-x-md">
+            <div class="col">
+                <q-input v-model="userParams.search" label="Search" hint="Search by id or name" lazy-rules autofocus />
+            </div>
+        </div>
+        <div class="row q-gutter-x-md">
+            <div class="col">
+                <q-input label="Fiscal ID" v-model="userParams.fi" lazy-rules />
+            </div>
+            <div class="col">
+                <q-input label="Name" v-model="userParams.name" lazy-rules />
+            </div>
+            <div class="col">
+                <q-input label="Social name" v-model="userParams.socialName" lazy-rules />
+            </div>
+        </div>
+
+        <div class="row q-gutter-x-md">
+            <div class="col">
+                <q-select
+                    v-model="userParams.salesPersonFk"
+                    :options="workers"
+                    option-value="id"
+                    option-label="name"
+                    emit-value
+                    label="Salesperson"
+                    map-options
+                    use-input
+                    :input-debounce="0"
                 >
-                    <strong>{{ chip.label }}: </strong>
-                    <span>"{{ chip.value }}"</span>
-                </q-chip>
-            </div> -->
-            <div class="row q-gutter-x-md">
-                <div class="col">
-                    <q-input
-                        v-model="userParams.search"
-                        label="Search"
-                        hint="Search by id or name"
-                        lazy-rules
-                        autofocus
-                    />
-                </div>
-            </div>
-            <div class="row q-gutter-x-md">
-                <div class="col">
-                    <q-input label="Fiscal ID" v-model="userParams.fi" lazy-rules />
-                </div>
-                <div class="col">
-                    <q-input label="Name" v-model="userParams.name" lazy-rules />
-                </div>
-                <div class="col">
-                    <q-input label="Social name" v-model="userParams.socialName" lazy-rules />
-                </div>
+                    <template #before>
+                        <q-avatar color="orange">
+                            <q-img
+                                v-if="userParams.salesPersonFk"
+                                :src="`/api/Images/user/160x160/${userParams.salesPersonFk}/download?access_token=${token}`"
+                                spinner-color="white"
+                            />
+                        </q-avatar>
+                    </template>
+                </q-select>
             </div>
+        </div>
 
-            <div class="row q-gutter-x-md">
-                <div class="col">
-                    <q-select
-                        v-model="userParams.salesPersonFk"
-                        :options="workers"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        label="Salesperson"
-                        map-options
-                        use-input
-                        :input-debounce="0"
-                    >
-                        <template #before>
-                            <q-avatar color="orange">
-                                <q-img
-                                    v-if="userParams.salesPersonFk"
-                                    :src="`/api/Images/user/160x160/${userParams.salesPersonFk}/download?access_token=${token}`"
-                                    spinner-color="white"
-                                />
-                            </q-avatar>
-                        </template>
-                    </q-select>
-                </div>
+        <div class="row q-gutter-x-md">
+            <div class="col">
+                <q-input label="Phone" v-model="userParams.phone" lazy-rules />
             </div>
-
-            <div class="row q-gutter-x-md">
-                <div class="col">
-                    <q-input label="Phone" v-model="userParams.phone" lazy-rules />
-                </div>
-                <div class="col">
-                    <q-input label="Email" v-model="userParams.email" lazy-rules />
-                </div>
+            <div class="col">
+                <q-input label="Email" v-model="userParams.email" lazy-rules />
             </div>
+        </div>
 
-            <div class="row q-gutter-x-md">
-                <div class="col">
-                    <q-select
-                        label="Province"
-                        v-model="userParams.provinceFk"
-                        :options="provinces"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        map-options
-                    />
-                </div>
-                <div class="col">
-                    <q-input label="City" v-model="userParams.city" lazy-rules />
-                </div>
+        <div class="row q-gutter-x-md">
+            <div class="col">
+                <q-select
+                    label="Province"
+                    v-model="userParams.provinceFk"
+                    :options="provinces"
+                    option-value="id"
+                    option-label="name"
+                    emit-value
+                    map-options
+                />
             </div>
-
-            <div class="row q-gutter-x-md">
-                <div class="col">
-                    <q-select
-                        label="Zone"
-                        v-model="userParams.zoneFk"
-                        :options="zones"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        map-options
-                    />
-                </div>
-                <div class="col">
-                    <q-input label="Postcode" v-model="userParams.postcode" lazy-rules />
-                </div>
+            <div class="col">
+                <q-input label="City" v-model="userParams.city" lazy-rules />
             </div>
+        </div>
 
-            <!-- <q-input
+        <div class="row q-gutter-x-md">
+            <div class="col">
+                <q-select
+                    label="Zone"
+                    v-model="userParams.zoneFk"
+                    :options="zones"
+                    option-value="id"
+                    option-label="name"
+                    emit-value
+                    map-options
+                />
+            </div>
+            <div class="col">
+                <q-input label="Postcode" v-model="userParams.postcode" lazy-rules />
+            </div>
+        </div>
+
+        <!-- <q-input
                                     label="Phone"
                                     hint="The customer phone"
                                     lazy-rules
                                     :rules="[(val) => (val && val.length > 0) || 'Please type something']"
                                 /> -->
 
-            <div>
-                <q-btn label="Search" type="submit" color="primary" class="full-width" rounded />
-            </div>
-        </q-form>
-    </q-card>
+        <div>
+            <q-btn label="Search" type="submit" color="primary" class="full-width" rounded />
+        </div>
+    </q-form>
 </template>
+<i18n>
+    {
+        "en": {
+            "phone": "Phone"
+        },
+        "es": {
+            "phone": "Teléfono"
+        }
+    }
+    </i18n>
+    
\ No newline at end of file

From 187f84b4da993fcbe42fdf5846b5a52eb827c5ad Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 7 Feb 2023 14:59:59 +0100
Subject: [PATCH 08/32] Added Right panel filter

---
 src/layouts/MainLayout.vue                    |  13 ++
 .../Customer/Card/CustomerDescriptor.vue      |  80 ++++---
 src/pages/Customer/Card/CustomerSummary.vue   | 122 +++++------
 src/pages/Customer/CustomerList.vue           | 197 +++++++++++++++++-
 4 files changed, 304 insertions(+), 108 deletions(-)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index a28f6e1d7..298ded9a4 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,14 +1,27 @@
 <script setup>
+import { ref } from 'vue';
 import { useQuasar } from 'quasar';
 import Navbar from 'src/components/NavBar.vue';
 
 const quasar = useQuasar();
+const filterPanel = ref(true);
 </script>
 
 <template>
     <q-layout view="hHh LpR fFf">
         <Navbar />
         <router-view></router-view>
+        <q-drawer
+            v-model="filterPanel"
+            show-if-above
+            side="right"
+            :width="256"
+            :breakpoint="500"
+        >
+            <q-scroll-area class="fit text-grey-8">
+                <div id="rightPanel"></div>
+            </q-scroll-area>
+        </q-drawer>
         <q-footer v-if="quasar.platform.is.mobile"></q-footer>
     </q-layout>
 </template>
diff --git a/src/pages/Customer/Card/CustomerDescriptor.vue b/src/pages/Customer/Card/CustomerDescriptor.vue
index f3be46a7c..77a755dad 100644
--- a/src/pages/Customer/Card/CustomerDescriptor.vue
+++ b/src/pages/Customer/Card/CustomerDescriptor.vue
@@ -24,50 +24,46 @@ const entityId = computed(() => {
 <template>
     <card-descriptor module="Customer" :url="`Clients/${entityId}/getCard`">
         <template #body="{ entity }">
-            <q-list>
-                <q-item v-if="entity.salesPersonUser">
-                    <q-item-section>
-                        <q-item-label caption>{{
-                            t('customer.card.salesPerson')
-                        }}</q-item-label>
-                        <q-item-label>
-                            {{ entity.salesPersonUser.name }}
-                        </q-item-label>
-                    </q-item-section>
+            <q-list dense>
+                <q-item v-if="entity.salesPersonUser" class="row">
+                    <q-item-label class="col" caption>
+                        {{ t('customer.card.salesPerson') }}
+                    </q-item-label>
+                    <q-item-label class="col text-right q-ma-none">
+                        {{ entity.salesPersonUser.name }}
+                    </q-item-label>
                 </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-item-label caption>
-                            {{ t('customer.card.credit') }}
-                        </q-item-label>
-                        <q-item-label>
-                            {{ toCurrency(entity.credit) }}
-                        </q-item-label>
-                    </q-item-section>
-                    <q-item-section>
-                        <q-item-label caption>{{
-                            t('customer.card.securedCredit')
-                        }}</q-item-label>
-                        <q-item-label>
-                            {{ toCurrency(entity.creditInsurance) }}
-                        </q-item-label>
-                    </q-item-section>
+                <q-item class="row">
+                    <q-item-label class="col" caption>
+                        {{ t('customer.card.credit') }}
+                    </q-item-label>
+                    <q-item-label class="col text-right q-ma-none">
+                        {{ toCurrency(entity.credit) }}
+                    </q-item-label>
                 </q-item>
-                <q-item>
-                    <q-item-section v-if="entity.payMethod">
-                        <q-item-label caption>{{
-                            t('customer.card.payMethod')
-                        }}</q-item-label>
-                        <q-item-label>
-                            {{ entity.payMethod.name }}
-                        </q-item-label>
-                    </q-item-section>
-                    <q-item-section>
-                        <q-item-label caption>{{ t('customer.card.debt') }}</q-item-label>
-                        <q-item-label>
-                            {{ toCurrency(entity.debt) }}
-                        </q-item-label>
-                    </q-item-section>
+                <q-item class="row">
+                    <q-item-label class="col" caption>
+                        {{ t('customer.card.securedCredit') }}
+                    </q-item-label>
+                    <q-item-label class="col text-right q-ma-none">
+                        {{ toCurrency(entity.creditInsurance) }}
+                    </q-item-label>
+                </q-item>
+                <q-item v-if="entity.payMethod" class="row">
+                    <q-item-label class="col" caption>
+                        {{ t('customer.card.payMethod') }}
+                    </q-item-label>
+                    <q-item-label class="col text-right q-ma-none">
+                        {{ entity.payMethod.name }}
+                    </q-item-label>
+                </q-item>
+                <q-item class="row">
+                    <q-item-label class="col" caption>
+                        {{ t('customer.card.debt') }}
+                    </q-item-label>
+                    <q-item-label class="col text-right q-ma-none">
+                        {{ toCurrency(entity.debt) }}
+                    </q-item-label>
                 </q-item>
             </q-list>
             <q-card-actions class="q-gutter-md">
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index 1e55ed224..f5fca57a9 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -48,10 +48,6 @@ const creditWarning = computed(() => {
 
     return tooMuchInsurance || noCreditInsurance ? 'negative' : '';
 });
-
-const arrayDataStore = useArrayDataStore();
-const d = arrayDataStore.get('test');
-console.log(d);
 </script>
 
 <template>
@@ -59,7 +55,7 @@ console.log(d);
         <template #body="{ entity }">
             <q-card-section class="row q-pa-none q-col-gutter-md">
                 <div class="col">
-                    <q-list>
+                    <q-list dense>
                         <q-item-label header class="text-h6">
                             {{ t('customer.summary.basicData') }}
                             <router-link
@@ -72,57 +68,69 @@ console.log(d);
                                 <q-icon name="open_in_new" />
                             </router-link>
                         </q-item-label>
+                        <q-separator class="q-mb-md" />
 
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
-                                    {{ t('customer.summary.customerId') }}
-                                </q-item-label>
-                                <q-item-label>{{ entity.id }}</q-item-label>
-                            </q-item-section>
+                        <q-item class="row col">
+                            <q-item-label class="col" caption>
+                                {{ t('customer.summary.customerId') }}:
+                            </q-item-label>
+                            <q-item-label class="col text-right q-ma-none">
+                                {{ entity.id }}
+                            </q-item-label>
                         </q-item>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
-                                    {{ t('customer.summary.name') }}
-                                </q-item-label>
-                                <q-item-label>{{ entity.name }}</q-item-label>
-                            </q-item-section>
+                        <q-item class="row col">
+                            <q-item-label class="col" caption>
+                                {{ t('customer.summary.name') }}:
+                            </q-item-label>
+                            <q-item-label class="col text-right q-ma-none">{{
+                                entity.name
+                            }}</q-item-label>
                         </q-item>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
-                                    {{ t('customer.summary.contact') }}
-                                </q-item-label>
-                                <q-item-label>{{ entity.contact }}</q-item-label>
-                            </q-item-section>
+                        <q-item class="row col">
+                            <q-item-label class="col" caption>
+                                {{ t('customer.summary.contact') }}:
+                            </q-item-label>
+                            <q-item-label class="col text-right q-ma-none">{{
+                                entity.contact
+                            }}</q-item-label>
                         </q-item>
-                        <q-item v-if="entity.salesPersonUser">
-                            <q-item-section>
-                                <q-item-label caption>
-                                    {{ t('customer.summary.salesPerson') }}
-                                </q-item-label>
-                                <q-item-label>{{
-                                    entity.salesPersonUser.name
-                                }}</q-item-label>
-                            </q-item-section>
+
+                        <q-item v-if="entity.salesPersonUser" class="row col">
+                            <q-item-label class="col" caption>
+                                {{ t('customer.summary.salesPerson') }}:
+                            </q-item-label>
+                            <q-item-label class="col text-right q-ma-none">
+                                {{ entity.salesPersonUser.name }}
+                            </q-item-label>
                         </q-item>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
-                                    {{ t('customer.summary.phone') }}
-                                </q-item-label>
-                                <q-item-label>{{ entity.phone }}</q-item-label>
-                            </q-item-section>
+
+                        <q-item class="row col">
+                            <q-item-label class="col" caption>
+                                {{ t('customer.summary.phone') }}:
+                            </q-item-label>
+                            <q-item-label class="col text-right q-ma-none">{{
+                                entity.phone
+                            }}</q-item-label>
                         </q-item>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
-                                    {{ t('customer.summary.mobile') }}
-                                </q-item-label>
-                                <q-item-label>{{ entity.mobile }}</q-item-label>
-                            </q-item-section>
+
+                        <q-item class="row col">
+                            <q-item-label class="col" caption>
+                                {{ t('customer.summary.mobile') }}:
+                            </q-item-label>
+                            <q-item-label class="col text-right q-ma-none">{{
+                                entity.mobile
+                            }}</q-item-label>
                         </q-item>
+
+                        <q-item v-if="entity.contactChannel" class="row col">
+                            <q-item-label class="col" caption>
+                                {{ t('customer.summary.contactChannel') }}
+                            </q-item-label>
+                            <q-item-label class="col text-right q-ma-none">
+                                {{ entity.contactChannel.name }}
+                            </q-item-label>
+                        </q-item>
+
                         <q-item>
                             <q-item-section>
                                 <q-item-label caption>
@@ -131,16 +139,6 @@ console.log(d);
                                 <q-item-label>{{ entity.email }}</q-item-label>
                             </q-item-section>
                         </q-item>
-                        <q-item v-if="entity.contactChannel">
-                            <q-item-section>
-                                <q-item-label caption>
-                                    {{ t('customer.summary.contactChannel') }}
-                                </q-item-label>
-                                <q-item-label>{{
-                                    entity.contactChannel.name
-                                }}</q-item-label>
-                            </q-item-section>
-                        </q-item>
                     </q-list>
                 </div>
                 <div class="col">
@@ -526,3 +524,9 @@ console.log(d);
         </template>
     </card-summary>
 </template>
+
+<style lang="scss">
+.q-item__label + .q-item__label {
+    margin: 0;
+}
+</style>
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index de2a7d7ca..97020ca24 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -1,9 +1,14 @@
 <script setup>
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 import Paginate from 'src/components/PaginateData.vue';
 import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
+import TeleportSlot from 'components/ui/TeleportSlot.vue';
+import FetchData from 'components/FetchData.vue';
+
+import { useArrayData } from 'composables/useArrayData';
 
 const router = useRouter();
 const quasar = useQuasar();
@@ -21,27 +26,189 @@ function viewSummary(id) {
         },
     });
 }
+
+const arrayData = useArrayData('customers');
+
+const userParams = ref({});
+async function search() {
+    //const params = userParams;
+    const params = userParams.value;
+    await arrayData.apply({ params });
+    // searchPanel.value.hide();
+}
+
+const provinces = ref([]);
+const workers = ref([]);
+const workersCopy = ref([]);
+const zones = ref([]);
+
+function setWorkers(data) {
+    workers.value = data;
+    workersCopy.value = data;
+}
+
+const tags = computed(() => {
+    const params = [];
+
+    for (const param in userParams.value) {
+        params.push({
+            label: param,
+            value: userParams.value[param],
+        });
+    }
+
+    return params;
+});
 </script>
 
 <template>
+    <fetch-data url="Provinces" @on-fetch="(data) => (provinces = data)" auto-load />
+    <fetch-data url="Zones" @on-fetch="(data) => (zones = data)" auto-load />
+    <fetch-data
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="setWorkers"
+        auto-load
+    />
+    <teleport-slot to="#rightPanel">
+        <!-- <q-list>
+            <q-item-label header class="text-uppercase">Filter</q-item-label>
+        </q-list> -->
+        <q-form @submit="search">
+            <div class="row q-pa-md truncate-chip-labels">
+                <q-chip
+                    v-for="chip of tags"
+                    :key="chip.label"
+                    @remove="log('Icecream')"
+                    icon="label"
+                    color="primary"
+                    size="sm"
+                    removable
+                >
+                    <strong>{{ chip.label }}: </strong>
+                    <span>"{{ chip.value }}"</span>
+                </q-chip>
+            </div>
+            <div class="q-pa-md q-gutter-y-md">
+                <q-input
+                    v-model="userParams.search"
+                    label="Search by id or name"
+                    lazy-rules
+                    autofocus
+                />
+
+                <q-btn
+                    label="Search"
+                    type="submit"
+                    color="primary"
+                    class="full-width"
+                    rounded
+                />
+            </div>
+            <q-separator />
+
+            <div class="q-px-md">
+                <q-input label="Fiscal ID" v-model="userParams.fi" lazy-rules />
+            </div>
+
+            <div class="row q-gutter-md q-px-md">
+                <div class="col">
+                    <q-input label="Name" v-model="userParams.name" lazy-rules />
+                </div>
+                <div class="col">
+                    <q-input
+                        label="Social name"
+                        v-model="userParams.socialName"
+                        lazy-rules
+                    />
+                </div>
+            </div>
+            <div class="q-px-md">
+                <q-select
+                    v-model="userParams.salesPersonFk"
+                    :options="workers"
+                    option-value="id"
+                    option-label="name"
+                    emit-value
+                    label="Salesperson"
+                    map-options
+                    use-input
+                    :input-debounce="0"
+                >
+                </q-select>
+            </div>
+
+            <div class="row q-gutter-md q-px-md">
+                <div class="col">
+                    <q-input label="Phone" v-model="userParams.phone" lazy-rules />
+                </div>
+                <div class="col">
+                    <q-input label="Email" v-model="userParams.email" lazy-rules />
+                </div>
+            </div>
+
+            <div class="row q-gutter-md q-px-md">
+                <div class="col">
+                    <q-select
+                        label="Province"
+                        v-model="userParams.provinceFk"
+                        :options="provinces"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                    />
+                </div>
+                <div class="col">
+                    <q-input label="City" v-model="userParams.city" lazy-rules />
+                </div>
+            </div>
+
+            <div class="row q-gutter-md q-px-md">
+                <div class="col">
+                    <q-select
+                        label="Zone"
+                        v-model="userParams.zoneFk"
+                        :options="zones"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                    />
+                </div>
+                <div class="col">
+                    <q-input label="Postcode" v-model="userParams.postcode" lazy-rules />
+                </div>
+            </div>
+        </q-form>
+    </teleport-slot>
     <q-page class="q-pa-md">
         <paginate url="/Clients/filter" order="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
+                        class="q-pa-none items-start cursor-pointer q-hoverable"
+                        v-ripple
+                        clickable
+                    >
                         <q-item-section class="q-pa-md" @click="navigate(row.id)">
                             <div class="text-h6">{{ row.name }}</div>
                             <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('customer.list.email') }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('customer.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('customer.list.phone') }}</q-item-label>
+                                        <q-item-label caption>{{
+                                            t('customer.list.phone')
+                                        }}</q-item-label>
                                         <q-item-label>{{ row.phone }}</q-item-label>
                                     </q-item-section>
                                 </q-item>
@@ -69,11 +236,27 @@ function viewSummary(id) {
                                 </q-menu>
                             </q-btn> -->
 
-                            <q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(row.id)">
-                                <q-tooltip>{{ t('components.smartCard.openCard') }}</q-tooltip>
+                            <q-btn
+                                flat
+                                round
+                                color="orange"
+                                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
+                                flat
+                                round
+                                color="grey-7"
+                                icon="preview"
+                                @click="viewSummary(row.id)"
+                            >
+                                <q-tooltip>{{
+                                    t('components.smartCard.openSummary')
+                                }}</q-tooltip>
                             </q-btn>
                             <!-- <q-btn flat round color="grey-7" icon="vn:ticket">
                                 <q-tooltip>{{ t('customer.list.customerOrders') }}</q-tooltip>

From 3c15554ab481badc77dfa2b6c9b02dd7aa7fe212 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Thu, 9 Feb 2023 07:26:08 +0100
Subject: [PATCH 09/32] Side filters

---
 src/components/NavBar.vue                     |  17 +-
 src/components/ui/ModuleSearchbar.vue         |  77 +++-----
 src/composables/useArrayData.js               |   6 +-
 src/css/app.scss                              |   7 +
 src/css/quasar.variables.scss                 |   2 -
 src/layouts/MainLayout.vue                    |  13 +-
 src/pages/Customer/Card/CustomerCard.vue      |   2 +-
 .../Customer/Card/CustomerDescriptor.vue      |  10 +-
 src/pages/Customer/Card/CustomerSummary.vue   |  26 +--
 src/pages/Customer/CustomerList.vue           | 172 +++++++++++++++++-
 src/pages/InvoiceOut/Card/InvoiceOutCard.vue  |   3 +
 11 files changed, 246 insertions(+), 89 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index ee95e258c..e63534d2f 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -13,6 +13,8 @@ const user = state.getUser();
 const token = session.getToken();
 const appName = 'Lilium';
 
+defineEmits(['onToggleRightDrawer']);
+
 onMounted(() => (state.headerMounted.value = true));
 
 function onToggleDrawer() {
@@ -29,9 +31,13 @@ function onToggleDrawer() {
                 </q-tooltip>
             </q-btn>
             <router-link to="/">
-                <q-btn flat round class="q-ml-xs" v-if="$q.screen.gt.xs">
+                <q-btn class="q-ml-xs" color="primary" v-if="$q.screen.gt.xs" flat round>
                     <q-avatar square size="md">
-                        <q-img src="~/assets/logo_icon.svg" alt="Logo" />
+                        <q-img
+                            src="~/assets/logo_icon.svg"
+                            alt="Logo"
+                            spinner-color="primary"
+                        />
                     </q-avatar>
                     <q-tooltip bottom>
                         {{ t('globals.backToDashboard') }}
@@ -52,11 +58,16 @@ function onToggleDrawer() {
                     </q-tooltip>
                     <PinnedModules />
                 </q-btn>
+                <q-btn flat @click="$emit('onToggleRightDrawer')" round dense icon="menu">
+                    <q-tooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </q-tooltip>
+                </q-btn>
                 <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}`"
-                            spinner-color="white"
+                            spinner-color="primary"
                         >
                         </q-img>
                     </q-avatar>
diff --git a/src/components/ui/ModuleSearchbar.vue b/src/components/ui/ModuleSearchbar.vue
index 138121a86..6382f8710 100644
--- a/src/components/ui/ModuleSearchbar.vue
+++ b/src/components/ui/ModuleSearchbar.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'composables/useArrayData';
 
@@ -17,66 +17,45 @@ const searchPanel = ref();
 const searchParams = ref({});
 const searchBackdrop = ref(false);
 
-async function search({ userParams }) {
-    if (userParams) Object.assign(searchParams.value, userParams.value);
-
-    await arrayData.apply({ params: searchParams });
+async function search() {
+    await arrayData.apply({ params: searchParams.value });
 
     searchPanel.value.hide();
 }
-
-async function remove(param) {
-    delete searchParams.value[param];
-
-    await search({ userParams: {} });
-}
-
-const tags = computed(() => {
-    const params = [];
-
-    for (const param in searchParams.value) {
-        params.push({
-            property: param,
-            label: param,
-            value: searchParams.value[param],
-        });
-    }
-
-    return params;
-});
 </script>
 
 <template>
     <q-form @submit="search">
-        <q-input id="searchbar" v-model="searchParams.search" label="Search" dark dense standout autofocus>
+        <q-input
+            id="searchbar"
+            v-model="searchParams.search"
+            label="Search"
+            dense
+            standout
+            autofocus
+        >
             <template #prepend>
                 <q-icon name="search" />
             </template>
             <template #append>
-                <q-btn icon="label" flat dense>
-                    <q-popup-proxy>
-                        <q-card class="q-pa-md" style="max-width: 300px">
-                            <div class="truncate-chip-labels">
-                                <q-chip
-                                    v-for="chip of tags"
-                                    :key="chip.label"
-                                    @remove="remove(chip.property)"
-                                    icon="label"
-                                    color="primary"
-                                    size="sm"
-                                    removable
-                                >
-                                    <strong>{{ t(chip.label) }}: </strong>
-                                    <span>"{{ chip.value }}"</span>
-                                </q-chip>
-                            </div>
-                        </q-card>
-                    </q-popup-proxy>
-                </q-btn>
-                <q-btn @click="searchBackdrop = !searchBackdrop" icon="filter_alt" flat dense>
+                <q-btn
+                    @click="searchBackdrop = !searchBackdrop"
+                    icon="filter_alt"
+                    flat
+                    dense
+                >
                     <q-tooltip>Apply search filters</q-tooltip>
-                    <div class="q-dialog__backdrop fixed-full" v-if="searchBackdrop"></div>
-                    <q-popup-proxy ref="searchPanel" v-model="searchBackdrop" target="#searchbar" no-parent-event fit>
+                    <div
+                        class="q-dialog__backdrop fixed-full"
+                        v-if="searchBackdrop"
+                    ></div>
+                    <q-popup-proxy
+                        ref="searchPanel"
+                        v-model="searchBackdrop"
+                        target="#searchbar"
+                        no-parent-event
+                        fit
+                    >
                         <q-card class="q-pa-md">
                             <div class="row truncate-chip-labels">
                                 <q-chip
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 221a7d2c5..bef50b0bf 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -91,7 +91,7 @@ export function useArrayData(key, userOptions) {
 
     async function apply({ filter, params }) {
         if (filter) store.userFilter = filter;
-        if (params) store.userParams = params;
+        if (params) store.userParams = Object.assign({}, params);
 
         await fetch({ append: false });
     }
@@ -116,9 +116,7 @@ export function useArrayData(key, userOptions) {
                 order: store.order,
                 limit: store.limit,
                 skip: store.skip,
-                params: [
-                    'a'
-                ],
+                params: JSON.stringify(store.userParams),
             },
         });
     }
diff --git a/src/css/app.scss b/src/css/app.scss
index 2e6008b1e..b929f5880 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -23,3 +23,10 @@ select:-webkit-autofill {
     -webkit-background-clip: text !important;
     background-clip: text !important;
 }
+
+body.body--light {
+    .q-toolbar {
+        background-color: white;
+        color: #555;
+    }
+}
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 237450e48..6ebf7a7a7 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -16,8 +16,6 @@ $primary: #ff9800;
 $secondary: #26a69a;
 $accent: #9c27b0;
 
-$dark: #1d1d1d;
-
 $positive: #21ba45;
 $negative: #c10015;
 $info: #31ccec;
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 298ded9a4..5be496980 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -4,19 +4,24 @@ import { useQuasar } from 'quasar';
 import Navbar from 'src/components/NavBar.vue';
 
 const quasar = useQuasar();
-const filterPanel = ref(true);
+
+const rightDrawer = ref(false);
+
+function toggleRightDrawer() {
+    rightDrawer.value = !rightDrawer.value;
+}
 </script>
 
 <template>
     <q-layout view="hHh LpR fFf">
-        <Navbar />
+        <Navbar @on-toggle-right-drawer="toggleRightDrawer" />
         <router-view></router-view>
         <q-drawer
-            v-model="filterPanel"
+            v-model="rightDrawer"
             show-if-above
             side="right"
             :width="256"
-            :breakpoint="500"
+            :breakpoint="800"
         >
             <q-scroll-area class="fit text-grey-8">
                 <div id="rightPanel"></div>
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 73a436a69..37b57bb70 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -8,7 +8,7 @@ const state = useState();
 <template>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit">
-            <customer-descriptor />
+            <CustomerDescriptor />
             <q-separator />
             <left-menu source="card" />
         </q-scroll-area>
diff --git a/src/pages/Customer/Card/CustomerDescriptor.vue b/src/pages/Customer/Card/CustomerDescriptor.vue
index 77a755dad..6cbba9d2f 100644
--- a/src/pages/Customer/Card/CustomerDescriptor.vue
+++ b/src/pages/Customer/Card/CustomerDescriptor.vue
@@ -29,7 +29,7 @@ const entityId = computed(() => {
                     <q-item-label class="col" caption>
                         {{ t('customer.card.salesPerson') }}
                     </q-item-label>
-                    <q-item-label class="col text-right q-ma-none">
+                    <q-item-label class="col q-ma-none">
                         {{ entity.salesPersonUser.name }}
                     </q-item-label>
                 </q-item>
@@ -37,7 +37,7 @@ const entityId = computed(() => {
                     <q-item-label class="col" caption>
                         {{ t('customer.card.credit') }}
                     </q-item-label>
-                    <q-item-label class="col text-right q-ma-none">
+                    <q-item-label class="col q-ma-none">
                         {{ toCurrency(entity.credit) }}
                     </q-item-label>
                 </q-item>
@@ -45,7 +45,7 @@ const entityId = computed(() => {
                     <q-item-label class="col" caption>
                         {{ t('customer.card.securedCredit') }}
                     </q-item-label>
-                    <q-item-label class="col text-right q-ma-none">
+                    <q-item-label class="col q-ma-none">
                         {{ toCurrency(entity.creditInsurance) }}
                     </q-item-label>
                 </q-item>
@@ -53,7 +53,7 @@ const entityId = computed(() => {
                     <q-item-label class="col" caption>
                         {{ t('customer.card.payMethod') }}
                     </q-item-label>
-                    <q-item-label class="col text-right q-ma-none">
+                    <q-item-label class="col q-ma-none">
                         {{ entity.payMethod.name }}
                     </q-item-label>
                 </q-item>
@@ -61,7 +61,7 @@ const entityId = computed(() => {
                     <q-item-label class="col" caption>
                         {{ t('customer.card.debt') }}
                     </q-item-label>
-                    <q-item-label class="col text-right q-ma-none">
+                    <q-item-label class="col q-ma-none">
                         {{ toCurrency(entity.debt) }}
                     </q-item-label>
                 </q-item>
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index f5fca57a9..c7f5f60dd 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -72,52 +72,52 @@ const creditWarning = computed(() => {
 
                         <q-item class="row col">
                             <q-item-label class="col" caption>
-                                {{ t('customer.summary.customerId') }}:
+                                {{ t('customer.summary.customerId') }}
                             </q-item-label>
-                            <q-item-label class="col text-right q-ma-none">
+                            <q-item-label class="col q-ma-none">
                                 {{ entity.id }}
                             </q-item-label>
                         </q-item>
                         <q-item class="row col">
                             <q-item-label class="col" caption>
-                                {{ t('customer.summary.name') }}:
+                                {{ t('customer.summary.name') }}
                             </q-item-label>
-                            <q-item-label class="col text-right q-ma-none">{{
+                            <q-item-label class="col q-ma-none">{{
                                 entity.name
                             }}</q-item-label>
                         </q-item>
                         <q-item class="row col">
                             <q-item-label class="col" caption>
-                                {{ t('customer.summary.contact') }}:
+                                {{ t('customer.summary.contact') }}
                             </q-item-label>
-                            <q-item-label class="col text-right q-ma-none">{{
+                            <q-item-label class="col q-ma-none">{{
                                 entity.contact
                             }}</q-item-label>
                         </q-item>
 
                         <q-item v-if="entity.salesPersonUser" class="row col">
                             <q-item-label class="col" caption>
-                                {{ t('customer.summary.salesPerson') }}:
+                                {{ t('customer.summary.salesPerson') }}
                             </q-item-label>
-                            <q-item-label class="col text-right q-ma-none">
+                            <q-item-label class="col q-ma-none">
                                 {{ entity.salesPersonUser.name }}
                             </q-item-label>
                         </q-item>
 
                         <q-item class="row col">
                             <q-item-label class="col" caption>
-                                {{ t('customer.summary.phone') }}:
+                                {{ t('customer.summary.phone') }}
                             </q-item-label>
-                            <q-item-label class="col text-right q-ma-none">{{
+                            <q-item-label class="col q-ma-none">{{
                                 entity.phone
                             }}</q-item-label>
                         </q-item>
 
                         <q-item class="row col">
                             <q-item-label class="col" caption>
-                                {{ t('customer.summary.mobile') }}:
+                                {{ t('customer.summary.mobile') }}
                             </q-item-label>
-                            <q-item-label class="col text-right q-ma-none">{{
+                            <q-item-label class="col q-ma-none">{{
                                 entity.mobile
                             }}</q-item-label>
                         </q-item>
@@ -126,7 +126,7 @@ const creditWarning = computed(() => {
                             <q-item-label class="col" caption>
                                 {{ t('customer.summary.contactChannel') }}
                             </q-item-label>
-                            <q-item-label class="col text-right q-ma-none">
+                            <q-item-label class="col q-ma-none">
                                 {{ entity.contactChannel.name }}
                             </q-item-label>
                         </q-item>
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 97020ca24..c8221e7b2 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -9,11 +9,15 @@ import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import FetchData from 'components/FetchData.vue';
 
 import { useArrayData } from 'composables/useArrayData';
+import { useSession } from 'src/composables/useSession';
 
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
 
+const session = useSession();
+const token = session.getToken();
+
 function navigate(id) {
     router.push({ path: `/customer/${id}` });
 }
@@ -28,13 +32,12 @@ function viewSummary(id) {
 }
 
 const arrayData = useArrayData('customers');
+const store = arrayData.store;
 
 const userParams = ref({});
 async function search() {
-    //const params = userParams;
     const params = userParams.value;
     await arrayData.apply({ params });
-    // searchPanel.value.hide();
 }
 
 const provinces = ref([]);
@@ -47,13 +50,18 @@ function setWorkers(data) {
     workersCopy.value = data;
 }
 
+async function remove(key) {
+    delete userParams.value[key];
+    await search();
+}
+
 const tags = computed(() => {
     const params = [];
 
-    for (const param in userParams.value) {
+    for (const param in store.userParams) {
         params.push({
             label: param,
-            value: userParams.value[param],
+            value: store.userParams[param],
         });
     }
 
@@ -71,10 +79,158 @@ const tags = computed(() => {
         auto-load
     />
     <teleport-slot to="#rightPanel">
-        <!-- <q-list>
-            <q-item-label header class="text-uppercase">Filter</q-item-label>
-        </q-list> -->
+        <q-list>
+            <q-item-label header class="text-uppercase" dense
+                >Applied filters</q-item-label
+            >
+        </q-list>
+        <q-separator />
+        <div class="q-pa-sm truncate-chip-labels">
+            <span v-if="tags.length === 0">You didn't enter any filter</span>
+            <q-chip
+                v-for="chip of tags"
+                :key="chip.label"
+                @remove="remove(chip.label)"
+                icon="label"
+                color="primary"
+                size="sm"
+                removable
+            >
+                <strong>{{ chip.label }}: </strong>
+                <span>"{{ chip.value }}"</span>
+            </q-chip>
+        </div>
+        <q-separator />
         <q-form @submit="search">
+            <q-list>
+                <q-item>
+                    <q-item-section>
+                        <q-input
+                            v-model="userParams.search"
+                            label="Search by id or name"
+                            class="full-width"
+                            lazy-rules
+                            autofocus
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-btn
+                            label="Search"
+                            type="submit"
+                            color="primary"
+                            class="full-width"
+                            rounded
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-separator />
+                <q-item>
+                    <q-item-section>
+                        <q-input label="Fiscal ID" v-model="userParams.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="Name" v-model="userParams.name" lazy-rules />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-input
+                            label="Social name"
+                            v-model="userParams.socialName"
+                            lazy-rules
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-select
+                            v-model="userParams.salesPersonFk"
+                            :options="workers"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            label="Salesperson"
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        >
+                            <template #prepend>
+                                <q-avatar color="orange" size="xs">
+                                    <q-img
+                                        v-if="userParams.salesPersonFk"
+                                        :src="`/api/Images/user/160x160/${userParams.salesPersonFk}/download?access_token=${token}`"
+                                        spinner-color="white"
+                                    />
+                                </q-avatar>
+                            </template>
+                        </q-select>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-input label="Phone" v-model="userParams.phone" lazy-rules>
+                            <template #prepend>
+                                <q-icon name="phone" size="sm"></q-icon>
+                            </template>
+                        </q-input>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-input label="Email" v-model="userParams.email" lazy-rules>
+                            <template #prepend>
+                                <q-icon name="email" size="sm"></q-icon>
+                            </template>
+                        </q-input>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-select
+                            label="Province"
+                            v-model="userParams.provinceFk"
+                            :options="provinces"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                        />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-input label="City" v-model="userParams.city" lazy-rules />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-select
+                            label="Zone"
+                            v-model="userParams.zoneFk"
+                            :options="zones"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                        />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-input
+                            label="Postcode"
+                            v-model="userParams.postcode"
+                            lazy-rules
+                        />
+                    </q-item-section>
+                </q-item>
+            </q-list>
+        </q-form>
+        <!-- <q-form @submit="search">
             <div class="row q-pa-md truncate-chip-labels">
                 <q-chip
                     v-for="chip of tags"
@@ -180,7 +336,7 @@ const tags = computed(() => {
                     <q-input label="Postcode" v-model="userParams.postcode" lazy-rules />
                 </div>
             </div>
-        </q-form>
+        </q-form> -->
     </teleport-slot>
     <q-page class="q-pa-md">
         <paginate url="/Clients/filter" order="id DESC" auto-load>
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
index 00e603d20..9820cb21b 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { useState } from 'src/composables/useState';
 import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
+import LeftMenu from 'components/LeftMenu.vue';
 
 const state = useState();
 </script>
@@ -8,6 +9,8 @@ const state = useState();
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit">
             <InvoiceOutDescriptor />
+            <q-separator />
+            <left-menu source="card" />
         </q-scroll-area>
     </q-drawer>
     <q-page-container>

From 874db2752b309ce9e02150473a00030e0967490b Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Thu, 9 Feb 2023 15:07:27 +0100
Subject: [PATCH 10/32] Filter panel component

---
 src/components/NavBar.vue             |  15 +-
 src/components/ui/ModuleSearchbar.vue |  91 ------
 src/components/ui/VnFilterPanel.vue   |  59 ++++
 src/components/ui/VnSearchbar.vue     |  32 ++
 src/css/app.scss                      |   2 +-
 src/layouts/MainLayout.vue            |  16 +-
 src/pages/Customer/CustomerList.vue   | 425 +++++++++-----------------
 src/pages/Customer/CustomerMain.vue   |  17 +-
 src/stores/useStateStore.js           |  43 +++
 9 files changed, 297 insertions(+), 403 deletions(-)
 delete mode 100644 src/components/ui/ModuleSearchbar.vue
 create mode 100644 src/components/ui/VnFilterPanel.vue
 create mode 100644 src/components/ui/VnSearchbar.vue
 create mode 100644 src/stores/useStateStore.js

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index e63534d2f..246647332 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,13 +1,15 @@
 <script setup>
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
 import UserPanel from 'components/UserPanel.vue';
+import { useState } from 'src/composables/useState';
+import { useStateStore } from 'stores/useStateStore';
 import PinnedModules from './PinnedModules.vue';
 
 const { t } = useI18n();
 const session = useSession();
+const stateStore = useStateStore();
 const state = useState();
 const user = state.getUser();
 const token = session.getToken();
@@ -15,17 +17,13 @@ const appName = 'Lilium';
 
 defineEmits(['onToggleRightDrawer']);
 
-onMounted(() => (state.headerMounted.value = true));
-
-function onToggleDrawer() {
-    state.drawer.value = !state.drawer.value;
-}
+onMounted(() => stateStore.setMounted());
 </script>
 
 <template>
     <q-header class="bg-dark" color="white" elevated>
         <q-toolbar class="q-py-sm q-px-md">
-            <q-btn flat @click="onToggleDrawer()" round dense icon="menu">
+            <q-btn flat @click="stateStore.toggleLeftDrawer()" round dense icon="menu">
                 <q-tooltip bottom anchor="bottom right">
                     {{ t('globals.collapseMenu') }}
                 </q-tooltip>
@@ -35,7 +33,7 @@ function onToggleDrawer() {
                     <q-avatar square size="md">
                         <q-img
                             src="~/assets/logo_icon.svg"
-                            alt="Logo"
+                            :alt="appName"
                             spinner-color="primary"
                         />
                     </q-avatar>
@@ -46,6 +44,7 @@ function onToggleDrawer() {
             </router-link>
             <q-toolbar-title shrink class="text-weight-bold" v-if="$q.screen.gt.xs">
                 {{ appName }}
+                <q-badge label="Beta" align="top" />
             </q-toolbar-title>
             <q-space></q-space>
             <div id="searchbar"></div>
diff --git a/src/components/ui/ModuleSearchbar.vue b/src/components/ui/ModuleSearchbar.vue
deleted file mode 100644
index 6382f8710..000000000
--- a/src/components/ui/ModuleSearchbar.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useArrayData } from 'composables/useArrayData';
-
-// const props = defineProps({
-//     id: {
-//         type: String,
-//         required: true,
-//     },
-// });
-
-const { t } = useI18n();
-const arrayData = useArrayData('customers');
-
-const searchPanel = ref();
-const searchParams = ref({});
-const searchBackdrop = ref(false);
-
-async function search() {
-    await arrayData.apply({ params: searchParams.value });
-
-    searchPanel.value.hide();
-}
-</script>
-
-<template>
-    <q-form @submit="search">
-        <q-input
-            id="searchbar"
-            v-model="searchParams.search"
-            label="Search"
-            dense
-            standout
-            autofocus
-        >
-            <template #prepend>
-                <q-icon name="search" />
-            </template>
-            <template #append>
-                <q-btn
-                    @click="searchBackdrop = !searchBackdrop"
-                    icon="filter_alt"
-                    flat
-                    dense
-                >
-                    <q-tooltip>Apply search filters</q-tooltip>
-                    <div
-                        class="q-dialog__backdrop fixed-full"
-                        v-if="searchBackdrop"
-                    ></div>
-                    <q-popup-proxy
-                        ref="searchPanel"
-                        v-model="searchBackdrop"
-                        target="#searchbar"
-                        no-parent-event
-                        fit
-                    >
-                        <q-card class="q-pa-md">
-                            <div class="row truncate-chip-labels">
-                                <q-chip
-                                    v-for="chip of tags"
-                                    :key="chip.label"
-                                    @remove="remove(chip.property)"
-                                    icon="label"
-                                    color="primary"
-                                    size="sm"
-                                    removable
-                                >
-                                    <strong>{{ t(chip.label) }}: </strong>
-                                    <span>"{{ chip.value }}"</span>
-                                </q-chip>
-                            </div>
-                            <slot name="panel" :scope="{ search }" />
-                        </q-card>
-                    </q-popup-proxy>
-                </q-btn>
-            </template>
-        </q-input>
-    </q-form>
-</template>
-<i18n>
-    {
-        "en": {
-            "phone": "Phone"
-        },
-        "es": {
-            "phone": "Teléfono"
-        }
-    }
-</i18n>
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
new file mode 100644
index 000000000..4d08be135
--- /dev/null
+++ b/src/components/ui/VnFilterPanel.vue
@@ -0,0 +1,59 @@
+<script setup>
+import { ref } from 'vue';
+import { useArrayData } from 'composables/useArrayData';
+
+const arrayData = useArrayData('customers');
+// const store = arrayData.store;
+
+const userParams = ref({});
+async function search() {
+    const params = userParams.value;
+    await arrayData.apply({ params });
+}
+
+// async function remove(key) {
+//     delete userParams.value[key];
+//     await search();
+// }
+
+// const tags = computed(() => {
+//     const params = [];
+
+//     for (const param in store.userParams) {
+//         params.push({
+//             label: param,
+//             value: store.userParams[param],
+//         });
+//     }
+
+//     return params;
+// });
+</script>
+<template>
+    <div>
+        <q-list>
+            <q-item-label header class="text-uppercase" dense>
+                Applied filters
+            </q-item-label>
+        </q-list>
+        <!-- <div class="q-pa-sm truncate-chip-labels">
+            <span v-if="tags.length === 0">You didn't enter any filter</span>
+            <q-chip
+                v-for="chip of tags"
+                :key="chip.label"
+                @remove="remove(chip.label)"
+                icon="label"
+                color="primary"
+                size="sm"
+                removable
+            >
+                <strong>{{ chip.label }}: </strong>
+                <span>"{{ chip.value }}"</span>
+            </q-chip>
+        </div>
+        <q-separator /> -->
+        <q-form @submit="search">
+            <slot name="body"></slot>
+        </q-form>
+    </div>
+</template>
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
new file mode 100644
index 000000000..94c34414b
--- /dev/null
+++ b/src/components/ui/VnSearchbar.vue
@@ -0,0 +1,32 @@
+<script setup>
+import { ref } from 'vue';
+import { useArrayData } from 'composables/useArrayData';
+
+const arrayData = useArrayData('customers');
+
+const searchPanel = ref();
+const searchParams = ref({});
+
+async function search() {
+    await arrayData.apply({ params: searchParams.value });
+
+    searchPanel.value.hide();
+}
+</script>
+
+<template>
+    <q-form @submit="search">
+        <q-input
+            id="searchbar"
+            v-model="searchParams.search"
+            label="Search"
+            dense
+            standout
+            autofocus
+        >
+            <template #prepend>
+                <q-icon name="search" />
+            </template>
+        </q-input>
+    </q-form>
+</template>
diff --git a/src/css/app.scss b/src/css/app.scss
index b929f5880..29e5bb600 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -25,7 +25,7 @@ select:-webkit-autofill {
 }
 
 body.body--light {
-    .q-toolbar {
+    .q-header .q-toolbar {
         background-color: white;
         color: #555;
     }
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 5be496980..8fc99d166 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,27 +1,23 @@
 <script setup>
-import { ref } from 'vue';
 import { useQuasar } from 'quasar';
 import Navbar from 'src/components/NavBar.vue';
 
+import { useStateStore } from 'stores/useStateStore';
+
 const quasar = useQuasar();
-
-const rightDrawer = ref(false);
-
-function toggleRightDrawer() {
-    rightDrawer.value = !rightDrawer.value;
-}
+const stateStore = useStateStore();
 </script>
 
 <template>
     <q-layout view="hHh LpR fFf">
-        <Navbar @on-toggle-right-drawer="toggleRightDrawer" />
+        <Navbar @on-toggle-right-drawer="stateStore.toggleRightDrawer()" />
         <router-view></router-view>
         <q-drawer
-            v-model="rightDrawer"
-            show-if-above
+            v-model="stateStore.rightDrawer"
             side="right"
             :width="256"
             :breakpoint="800"
+            :persistent="false"
         >
             <q-scroll-area class="fit text-grey-8">
                 <div id="rightPanel"></div>
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index c8221e7b2..ff8afada9 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
@@ -8,9 +8,11 @@ import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
 import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import FetchData from 'components/FetchData.vue';
 
-import { useArrayData } from 'composables/useArrayData';
 import { useSession } from 'src/composables/useSession';
+import { useStateStore } from 'stores/useStateStore';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 
+const state = useStateStore();
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
@@ -18,6 +20,9 @@ const { t } = useI18n();
 const session = useSession();
 const token = session.getToken();
 
+onMounted(() => state.toggleRightDrawer());
+onUnmounted(() => state.toggleRightDrawer());
+
 function navigate(id) {
     router.push({ path: `/customer/${id}` });
 }
@@ -31,15 +36,6 @@ function viewSummary(id) {
     });
 }
 
-const arrayData = useArrayData('customers');
-const store = arrayData.store;
-
-const userParams = ref({});
-async function search() {
-    const params = userParams.value;
-    await arrayData.apply({ params });
-}
-
 const provinces = ref([]);
 const workers = ref([]);
 const workersCopy = ref([]);
@@ -49,24 +45,6 @@ function setWorkers(data) {
     workers.value = data;
     workersCopy.value = data;
 }
-
-async function remove(key) {
-    delete userParams.value[key];
-    await search();
-}
-
-const tags = computed(() => {
-    const params = [];
-
-    for (const param in store.userParams) {
-        params.push({
-            label: param,
-            value: store.userParams[param],
-        });
-    }
-
-    return params;
-});
 </script>
 
 <template>
@@ -79,264 +57,137 @@ const tags = computed(() => {
         auto-load
     />
     <teleport-slot to="#rightPanel">
-        <q-list>
-            <q-item-label header class="text-uppercase" dense
-                >Applied filters</q-item-label
-            >
-        </q-list>
-        <q-separator />
-        <div class="q-pa-sm truncate-chip-labels">
-            <span v-if="tags.length === 0">You didn't enter any filter</span>
-            <q-chip
-                v-for="chip of tags"
-                :key="chip.label"
-                @remove="remove(chip.label)"
-                icon="label"
-                color="primary"
-                size="sm"
-                removable
-            >
-                <strong>{{ chip.label }}: </strong>
-                <span>"{{ chip.value }}"</span>
-            </q-chip>
-        </div>
-        <q-separator />
-        <q-form @submit="search">
-            <q-list>
-                <q-item>
-                    <q-item-section>
-                        <q-input
-                            v-model="userParams.search"
-                            label="Search by id or name"
-                            class="full-width"
-                            lazy-rules
-                            autofocus
-                        />
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-btn
-                            label="Search"
-                            type="submit"
-                            color="primary"
-                            class="full-width"
-                            rounded
-                        />
-                    </q-item-section>
-                </q-item>
-                <q-separator />
-                <q-item>
-                    <q-item-section>
-                        <q-input label="Fiscal ID" v-model="userParams.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="Name" v-model="userParams.name" lazy-rules />
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-input
-                            label="Social name"
-                            v-model="userParams.socialName"
-                            lazy-rules
-                        />
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-select
-                            v-model="userParams.salesPersonFk"
-                            :options="workers"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            label="Salesperson"
-                            map-options
-                            use-input
-                            :input-debounce="0"
-                        >
-                            <template #prepend>
-                                <q-avatar color="orange" size="xs">
-                                    <q-img
-                                        v-if="userParams.salesPersonFk"
-                                        :src="`/api/Images/user/160x160/${userParams.salesPersonFk}/download?access_token=${token}`"
-                                        spinner-color="white"
-                                    />
-                                </q-avatar>
-                            </template>
-                        </q-select>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-input label="Phone" v-model="userParams.phone" lazy-rules>
-                            <template #prepend>
-                                <q-icon name="phone" size="sm"></q-icon>
-                            </template>
-                        </q-input>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-input label="Email" v-model="userParams.email" lazy-rules>
-                            <template #prepend>
-                                <q-icon name="email" size="sm"></q-icon>
-                            </template>
-                        </q-input>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-select
-                            label="Province"
-                            v-model="userParams.provinceFk"
-                            :options="provinces"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                        />
-                    </q-item-section>
-                    <q-item-section>
-                        <q-input label="City" v-model="userParams.city" lazy-rules />
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-select
-                            label="Zone"
-                            v-model="userParams.zoneFk"
-                            :options="zones"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                        />
-                    </q-item-section>
-                    <q-item-section>
-                        <q-input
-                            label="Postcode"
-                            v-model="userParams.postcode"
-                            lazy-rules
-                        />
-                    </q-item-section>
-                </q-item>
-            </q-list>
-        </q-form>
-        <!-- <q-form @submit="search">
-            <div class="row q-pa-md truncate-chip-labels">
-                <q-chip
-                    v-for="chip of tags"
-                    :key="chip.label"
-                    @remove="log('Icecream')"
-                    icon="label"
-                    color="primary"
-                    size="sm"
-                    removable
-                >
-                    <strong>{{ chip.label }}: </strong>
-                    <span>"{{ chip.value }}"</span>
-                </q-chip>
-            </div>
-            <div class="q-pa-md q-gutter-y-md">
-                <q-input
-                    v-model="userParams.search"
-                    label="Search by id or name"
-                    lazy-rules
-                    autofocus
-                />
-
-                <q-btn
-                    label="Search"
-                    type="submit"
-                    color="primary"
-                    class="full-width"
-                    rounded
-                />
-            </div>
-            <q-separator />
-
-            <div class="q-px-md">
-                <q-input label="Fiscal ID" v-model="userParams.fi" lazy-rules />
-            </div>
-
-            <div class="row q-gutter-md q-px-md">
-                <div class="col">
-                    <q-input label="Name" v-model="userParams.name" lazy-rules />
-                </div>
-                <div class="col">
-                    <q-input
-                        label="Social name"
-                        v-model="userParams.socialName"
-                        lazy-rules
-                    />
-                </div>
-            </div>
-            <div class="q-px-md">
-                <q-select
-                    v-model="userParams.salesPersonFk"
-                    :options="workers"
-                    option-value="id"
-                    option-label="name"
-                    emit-value
-                    label="Salesperson"
-                    map-options
-                    use-input
-                    :input-debounce="0"
-                >
-                </q-select>
-            </div>
-
-            <div class="row q-gutter-md q-px-md">
-                <div class="col">
-                    <q-input label="Phone" v-model="userParams.phone" lazy-rules />
-                </div>
-                <div class="col">
-                    <q-input label="Email" v-model="userParams.email" lazy-rules />
-                </div>
-            </div>
-
-            <div class="row q-gutter-md q-px-md">
-                <div class="col">
-                    <q-select
-                        label="Province"
-                        v-model="userParams.provinceFk"
-                        :options="provinces"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        map-options
-                    />
-                </div>
-                <div class="col">
-                    <q-input label="City" v-model="userParams.city" lazy-rules />
-                </div>
-            </div>
-
-            <div class="row q-gutter-md q-px-md">
-                <div class="col">
-                    <q-select
-                        label="Zone"
-                        v-model="userParams.zoneFk"
-                        :options="zones"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        map-options
-                    />
-                </div>
-                <div class="col">
-                    <q-input label="Postcode" v-model="userParams.postcode" lazy-rules />
-                </div>
-            </div>
-        </q-form> -->
+        <VnFilterPanel>
+            <template #body>
+                <q-list>
+                    <q-item>
+                        <q-item-section>
+                            <q-input
+                                v-model="userParams.search"
+                                label="Search by id or name"
+                                class="full-width"
+                                lazy-rules
+                                autofocus
+                            />
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-btn
+                                label="Search"
+                                type="submit"
+                                color="primary"
+                                class="full-width"
+                                rounded
+                            />
+                        </q-item-section>
+                    </q-item>
+                    <q-separator />
+                    <q-item>
+                        <q-item-section>
+                            <q-input label="Fiscal ID" v-model="userParams.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="Name" v-model="userParams.name" lazy-rules />
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-input
+                                label="Social name"
+                                v-model="userParams.socialName"
+                                lazy-rules
+                            />
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-select
+                                v-model="userParams.salesPersonFk"
+                                :options="workers"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                label="Salesperson"
+                                map-options
+                                use-input
+                                :input-debounce="0"
+                            >
+                                <template #prepend>
+                                    <q-avatar color="orange" size="xs">
+                                        <q-img
+                                            v-if="userParams.salesPersonFk"
+                                            :src="`/api/Images/user/160x160/${userParams.salesPersonFk}/download?access_token=${token}`"
+                                            spinner-color="white"
+                                        />
+                                    </q-avatar>
+                                </template>
+                            </q-select>
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-input label="Phone" v-model="userParams.phone" lazy-rules>
+                                <template #prepend>
+                                    <q-icon name="phone" size="sm"></q-icon>
+                                </template>
+                            </q-input>
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-input label="Email" v-model="userParams.email" lazy-rules>
+                                <template #prepend>
+                                    <q-icon name="email" size="sm"></q-icon>
+                                </template>
+                            </q-input>
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-select
+                                label="Province"
+                                v-model="userParams.provinceFk"
+                                :options="provinces"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                map-options
+                            />
+                        </q-item-section>
+                        <q-item-section>
+                            <q-input label="City" v-model="userParams.city" lazy-rules />
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-select
+                                label="Zone"
+                                v-model="userParams.zoneFk"
+                                :options="zones"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                map-options
+                            />
+                        </q-item-section>
+                        <q-item-section>
+                            <q-input
+                                label="Postcode"
+                                v-model="userParams.postcode"
+                                lazy-rules
+                            />
+                        </q-item-section>
+                    </q-item>
+                </q-list>
+            </template>
+        </VnFilterPanel>
     </teleport-slot>
     <q-page class="q-pa-md">
         <paginate url="/Clients/filter" order="id DESC" auto-load>
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
index 63512c29c..a32d5e597 100644
--- a/src/pages/Customer/CustomerMain.vue
+++ b/src/pages/Customer/CustomerMain.vue
@@ -1,12 +1,12 @@
 <script setup>
 // import { useSession } from 'src/composables/useSession';
-import { useState } from 'composables/useState';
+import { useStateStore } from 'stores/useStateStore';
 import LeftMenu from 'components/LeftMenu.vue';
 import TeleportSlot from 'components/ui/TeleportSlot.vue';
-import ModuleSearchbar from 'components/ui/ModuleSearchbar.vue';
 import CustomerSearch from './CustomerSearch.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
-const state = useState();
+const stateStore = useStateStore();
 // const arrayData = useArrayData('customers');
 // const session = useSession();
 
@@ -68,13 +68,18 @@ const state = useState();
 
 <template>
     <teleport-slot to="#searchbar">
-        <module-searchbar data-key="customerList">
+        <VnSearchbar data-key="customerList">
             <template #panel="{ scope }">
                 <customer-search :scope="scope" />
             </template>
-        </module-searchbar>
+        </VnSearchbar>
     </teleport-slot>
-    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
+    <q-drawer
+        v-model="stateStore.leftDrawer"
+        show-if-above
+        :width="256"
+        :breakpoint="500"
+    >
         <q-scroll-area class="fit text-grey-8">
             <LeftMenu />
         </q-scroll-area>
diff --git a/src/stores/useStateStore.js b/src/stores/useStateStore.js
new file mode 100644
index 000000000..8704c46e4
--- /dev/null
+++ b/src/stores/useStateStore.js
@@ -0,0 +1,43 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+
+export const useStateStore = defineStore('stateStore', () => {
+    const isMounted = ref(false);
+    const leftDrawer = ref(false);
+    const rightDrawer = ref(false);
+
+    function toggleLeftDrawer() {
+        leftDrawer.value = !leftDrawer.value;
+    }
+
+    function toggleRightDrawer() {
+        rightDrawer.value = !rightDrawer.value;
+    }
+
+    function setMounted() {
+        isMounted.value = true;
+    }
+
+    function isHeaderMounted() {
+        return isMounted.value;
+    }
+
+    function isLeftDrawerShown() {
+        return leftDrawer.value;
+    }
+
+    function isRightDrawerShown() {
+        return rightDrawer.value;
+    }
+
+    return {
+        leftDrawer,
+        rightDrawer,
+        setMounted,
+        isHeaderMounted,
+        toggleLeftDrawer,
+        toggleRightDrawer,
+        isLeftDrawerShown,
+        isRightDrawerShown,
+    };
+});

From f9a196e7e9340ae7a9530a3b15c8a49dcaecfe49 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Mon, 13 Feb 2023 14:08:18 +0100
Subject: [PATCH 11/32] Added dataKey for cache identifier & search redirect

---
 src/App.vue                                   |  4 +-
 src/components/PaginateData.vue               | 45 ++++++-----
 src/components/ui/VnFilterPanel.vue           | 75 +++++++++++++------
 src/components/ui/VnSearchbar.vue             | 46 ++++++++++--
 src/composables/useArrayData.js               |  9 ++-
 src/pages/Customer/Card/CustomerBasicData.vue | 19 ++++-
 src/pages/Customer/CustomerList.vue           | 36 ++++-----
 src/pages/Customer/CustomerMain.vue           | 60 +--------------
 8 files changed, 162 insertions(+), 132 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2ef0843bd..4f1394559 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,12 +30,12 @@ quasar.iconMapFn = (iconName) => {
         const name = iconName.substring(3);
 
         return {
-            cls: `icon-${name}`,
+            cls: `icon-${name} notranslate`,
         };
     }
 
     return {
-        cls: 'material-symbols-outlined',
+        cls: 'material-symbols-outlined notranslate',
         content: iconName,
     };
 };
diff --git a/src/components/PaginateData.vue b/src/components/PaginateData.vue
index c9b67e9e3..fb0549f38 100644
--- a/src/components/PaginateData.vue
+++ b/src/components/PaginateData.vue
@@ -5,7 +5,11 @@ import { useArrayData } from 'composables/useArrayData';
 
 const { t } = useI18n();
 
-const $props = defineProps({
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
     autoLoad: {
         type: Boolean,
         default: false,
@@ -43,46 +47,46 @@ const $props = defineProps({
 const emit = defineEmits(['onFetch', 'onPaginate']);
 const isLoading = ref(false);
 const pagination = ref({
-    sortBy: $props.order,
-    rowsPerPage: $props.limit,
+    sortBy: props.order,
+    rowsPerPage: props.limit,
     page: 1,
 });
 
-const arrayData = useArrayData('customers', {
-    url: $props.url,
-    filter: $props.filter,
-    where: $props.where,
-    limit: $props.limit,
-    order: $props.order,
+const arrayData = useArrayData(props.dataKey, {
+    url: props.url,
+    filter: props.filter,
+    where: props.where,
+    limit: props.limit,
+    order: props.order,
 });
 const store = arrayData.store;
 
 onMounted(() => {
-    if ($props.autoLoad) paginate();
+    if (props.autoLoad) paginate();
 });
 
 watch(
-    () => $props.data,
+    () => props.data,
     () => {
-        store.data = $props.data;
+        store.data = props.data;
     }
 );
 
 async function paginate() {
     const { page, rowsPerPage, sortBy, descending } = pagination.value;
 
-    if (!$props.url) return;
+    if (!props.url) return;
 
     // const filter = {
     //     limit: rowsPerPage,
     //     skip: rowsPerPage * (page - 1),
     // };
 
-    // Object.assign(filter, $props.filter);
+    // Object.assign(filter, props.filter);
 
-    // if ($props.where) filter.where = $props.where;
-    // if ($props.sortBy) filter.order = $props.sortBy;
-    // if ($props.limit) filter.limit = $props.limit;
+    // if (props.where) filter.where = props.where;
+    // if (props.sortBy) filter.order = props.sortBy;
+    // if (props.limit) filter.limit = props.limit;
 
     // if (sortBy) filter.order = sortBy;
 
@@ -107,7 +111,7 @@ async function paginate() {
 
 async function onLoad(...params) {
     const done = params[1];
-    if (!store.data || store.data.length === 0 || !$props.url) return done(false);
+    if (!store.data || store.data.length === 0 || !props.url) return done(false);
 
     pagination.value.page = pagination.value.page + 1;
 
@@ -122,7 +126,10 @@ async function onLoad(...params) {
     <q-infinite-scroll @load="onLoad" :offset="offset" class="column items-center">
         <div v-if="store" class="card-list q-gutter-y-md">
             <slot name="body" :rows="store.data"></slot>
-            <div v-if="!store.data.length && !isLoading" class="info-row q-pa-md text-center">
+            <div
+                v-if="!store.data.length && !isLoading"
+                class="info-row q-pa-md text-center"
+            >
                 <h5>
                     {{ t('components.smartCard.noData') }}
                 </h5>
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 4d08be135..557a07f3b 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -1,33 +1,52 @@
 <script setup>
-import { ref } from 'vue';
+import { onMounted, ref, computed } from 'vue';
 import { useArrayData } from 'composables/useArrayData';
 
-const arrayData = useArrayData('customers');
-// const store = arrayData.store;
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+    searchButton: {
+        type: Boolean,
+        required: false,
+        default: false,
+    },
+});
 
+const arrayData = useArrayData(props.dataKey);
+const store = arrayData.store;
 const userParams = ref({});
+
+onMounted(() => {
+    const params = store.userParams;
+    if (params) {
+        userParams.value = params;
+    }
+});
+
 async function search() {
     const params = userParams.value;
     await arrayData.apply({ params });
 }
 
-// async function remove(key) {
-//     delete userParams.value[key];
-//     await search();
-// }
+const tags = computed(() => {
+    const params = [];
 
-// const tags = computed(() => {
-//     const params = [];
+    for (const param in store.userParams) {
+        params.push({
+            label: param,
+            value: store.userParams[param],
+        });
+    }
 
-//     for (const param in store.userParams) {
-//         params.push({
-//             label: param,
-//             value: store.userParams[param],
-//         });
-//     }
+    return params;
+});
 
-//     return params;
-// });
+async function remove(key) {
+    delete userParams.value[key];
+    await search();
+}
 </script>
 <template>
     <div>
@@ -36,7 +55,7 @@ async function search() {
                 Applied filters
             </q-item-label>
         </q-list>
-        <!-- <div class="q-pa-sm truncate-chip-labels">
+        <div class="q-pa-sm truncate-chip-labels">
             <span v-if="tags.length === 0">You didn't enter any filter</span>
             <q-chip
                 v-for="chip of tags"
@@ -51,9 +70,23 @@ async function search() {
                 <span>"{{ chip.value }}"</span>
             </q-chip>
         </div>
-        <q-separator /> -->
-        <q-form @submit="search">
-            <slot name="body"></slot>
+        <div v-show="props.searchButton">
+            <q-separator />
+            <q-item>
+                <q-item-section>
+                    <q-btn
+                        label="Search"
+                        type="submit"
+                        color="primary"
+                        class="full-width"
+                        rounded
+                    />
+                </q-item-section>
+            </q-item>
+        </div>
+        <q-separator />
+        <q-form @submit="search" @keyup.enter="search">
+            <slot name="body" :params="userParams"></slot>
         </q-form>
     </div>
 </template>
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 94c34414b..ab484015b 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -1,16 +1,46 @@
 <script setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
 import { useArrayData } from 'composables/useArrayData';
 
-const arrayData = useArrayData('customers');
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+    redirect: {
+        type: Boolean,
+        required: false,
+        default: true,
+    },
+});
 
-const searchPanel = ref();
-const searchParams = ref({});
+const router = useRouter();
+const arrayData = useArrayData(props.dataKey);
+const store = arrayData.store;
+const searchText = ref();
+
+onMounted(() => {
+    const params = store.userParams;
+    if (params && params.search) {
+        searchText.value = params.search;
+    }
+});
 
 async function search() {
-    await arrayData.apply({ params: searchParams.value });
+    await arrayData.apply({
+        params: {
+            search: searchText.value,
+        },
+    });
+    if (!props.redirect) return;
 
-    searchPanel.value.hide();
+    const rows = store.data;
+
+    if (rows.length === 1) {
+        const firstRow = rows[0];
+        router.push({ path: `/customer/${firstRow.id}` });
+    }
 }
 </script>
 
@@ -18,8 +48,8 @@ async function search() {
     <q-form @submit="search">
         <q-input
             id="searchbar"
-            v-model="searchParams.search"
-            label="Search"
+            v-model="searchText"
+            label="Search by customer id or name"
             dense
             standout
             autofocus
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index bef50b0bf..391c9ee2b 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -1,4 +1,4 @@
-import { ref, onUnmounted } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import axios from 'axios';
 import { useArrayDataStore } from 'stores/useArrayDataStore';
@@ -30,6 +30,13 @@ export function useArrayData(key, userOptions) {
     // if (typeof userOptions === 'object' && userOptions.filter) {
     //     Object.assign(filter.value, userOptions.filter);
     // }
+    onMounted(() => {
+        const query = route.query;
+        if (query.params) {
+            store.userParams = JSON.parse(query.params);
+        }
+    });
+
     onUnmounted(() => {
         if (arrayDataStore.get(key)) {
             arrayDataStore.clear(key);
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index d6841527e..a65f17e83 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -48,8 +48,16 @@ const filterOptions = {
         @on-fetch="setWorkers"
         auto-load
     />
-    <fetch-data url="ContactChannels" @on-fetch="(data) => contactChannels = data" auto-load />
-    <fetch-data url="BusinessTypes" @on-fetch="(data) => businessTypes = data" auto-load />
+    <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">
@@ -125,11 +133,14 @@ const filterOptions = {
                                 :label="t('customer.basicData.salesPerson')"
                                 map-options
                                 use-input
-                                @filter="(value, update) => filter(value, update, filterOptions)"
+                                @filter="
+                                    (value, update) =>
+                                        filter(value, update, filterOptions)
+                                "
                                 :rules="validate('client.salesPersonFk')"
                                 :input-debounce="0"
                             >
-                                <template #before>
+                                <template #prepend>
                                     <q-avatar color="orange">
                                         <q-img
                                             v-if="data.salesPersonFk"
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index ff8afada9..a4d55fe32 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -57,13 +57,13 @@ function setWorkers(data) {
         auto-load
     />
     <teleport-slot to="#rightPanel">
-        <VnFilterPanel>
-            <template #body>
+        <VnFilterPanel data-key="CustomerList">
+            <template #body="{ params }">
                 <q-list>
-                    <q-item>
+                    <!-- <q-item>
                         <q-item-section>
                             <q-input
-                                v-model="userParams.search"
+                                v-model="params.search"
                                 label="Search by id or name"
                                 class="full-width"
                                 lazy-rules
@@ -82,10 +82,10 @@ function setWorkers(data) {
                             />
                         </q-item-section>
                     </q-item>
-                    <q-separator />
+                    <q-separator /> -->
                     <q-item>
                         <q-item-section>
-                            <q-input label="Fiscal ID" v-model="userParams.fi" lazy-rules>
+                            <q-input label="Fiscal ID" v-model="params.fi" lazy-rules>
                                 <template #prepend>
                                     <q-icon name="badge" size="sm"></q-icon>
                                 </template>
@@ -94,14 +94,14 @@ function setWorkers(data) {
                     </q-item>
                     <q-item>
                         <q-item-section>
-                            <q-input label="Name" v-model="userParams.name" lazy-rules />
+                            <q-input label="Name" v-model="params.name" lazy-rules />
                         </q-item-section>
                     </q-item>
                     <q-item>
                         <q-item-section>
                             <q-input
                                 label="Social name"
-                                v-model="userParams.socialName"
+                                v-model="params.socialName"
                                 lazy-rules
                             />
                         </q-item-section>
@@ -109,7 +109,7 @@ function setWorkers(data) {
                     <q-item>
                         <q-item-section>
                             <q-select
-                                v-model="userParams.salesPersonFk"
+                                v-model="params.salesPersonFk"
                                 :options="workers"
                                 option-value="id"
                                 option-label="name"
@@ -122,8 +122,8 @@ function setWorkers(data) {
                                 <template #prepend>
                                     <q-avatar color="orange" size="xs">
                                         <q-img
-                                            v-if="userParams.salesPersonFk"
-                                            :src="`/api/Images/user/160x160/${userParams.salesPersonFk}/download?access_token=${token}`"
+                                            v-if="params.salesPersonFk"
+                                            :src="`/api/Images/user/160x160/${params.salesPersonFk}/download?access_token=${token}`"
                                             spinner-color="white"
                                         />
                                     </q-avatar>
@@ -133,7 +133,7 @@ function setWorkers(data) {
                     </q-item>
                     <q-item>
                         <q-item-section>
-                            <q-input label="Phone" v-model="userParams.phone" lazy-rules>
+                            <q-input label="Phone" v-model="params.phone" lazy-rules>
                                 <template #prepend>
                                     <q-icon name="phone" size="sm"></q-icon>
                                 </template>
@@ -142,7 +142,7 @@ function setWorkers(data) {
                     </q-item>
                     <q-item>
                         <q-item-section>
-                            <q-input label="Email" v-model="userParams.email" lazy-rules>
+                            <q-input label="Email" v-model="params.email" lazy-rules>
                                 <template #prepend>
                                     <q-icon name="email" size="sm"></q-icon>
                                 </template>
@@ -153,7 +153,7 @@ function setWorkers(data) {
                         <q-item-section>
                             <q-select
                                 label="Province"
-                                v-model="userParams.provinceFk"
+                                v-model="params.provinceFk"
                                 :options="provinces"
                                 option-value="id"
                                 option-label="name"
@@ -162,14 +162,14 @@ function setWorkers(data) {
                             />
                         </q-item-section>
                         <q-item-section>
-                            <q-input label="City" v-model="userParams.city" lazy-rules />
+                            <q-input label="City" v-model="params.city" lazy-rules />
                         </q-item-section>
                     </q-item>
                     <q-item>
                         <q-item-section>
                             <q-select
                                 label="Zone"
-                                v-model="userParams.zoneFk"
+                                v-model="params.zoneFk"
                                 :options="zones"
                                 option-value="id"
                                 option-label="name"
@@ -180,7 +180,7 @@ function setWorkers(data) {
                         <q-item-section>
                             <q-input
                                 label="Postcode"
-                                v-model="userParams.postcode"
+                                v-model="params.postcode"
                                 lazy-rules
                             />
                         </q-item-section>
@@ -190,7 +190,7 @@ function setWorkers(data) {
         </VnFilterPanel>
     </teleport-slot>
     <q-page class="q-pa-md">
-        <paginate url="/Clients/filter" order="id DESC" auto-load>
+        <paginate data-key="CustomerList" url="/Clients/filter" order="id DESC" auto-load>
             <template #body="{ rows }">
                 <q-card class="card" v-for="row of rows" :key="row.id">
                     <q-item
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
index a32d5e597..ad331a981 100644
--- a/src/pages/Customer/CustomerMain.vue
+++ b/src/pages/Customer/CustomerMain.vue
@@ -1,5 +1,4 @@
 <script setup>
-// import { useSession } from 'src/composables/useSession';
 import { useStateStore } from 'stores/useStateStore';
 import LeftMenu from 'components/LeftMenu.vue';
 import TeleportSlot from 'components/ui/TeleportSlot.vue';
@@ -7,68 +6,11 @@ import CustomerSearch from './CustomerSearch.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 const stateStore = useStateStore();
-// const arrayData = useArrayData('customers');
-// const session = useSession();
-
-// const token = session.getToken();
-
-// const searchBackdrop = ref(false);
-
-// const searchPanel = ref();
-// const userParams = reactive({});
-// const tags = computed(() => {
-//     const params = [];
-
-//     for (const param in userParams) {
-//         params.push({
-//             label: param,
-//             value: userParams[param],
-//         });
-//     }
-
-//     return params;
-// });
-
-// async function doSearch() {
-//     // let filter = {};
-//     // if (search.value != '') {
-//     //     filter = {
-//     //         where: {
-//     //             id: search.value,
-//     //         },
-//     //     };
-//     // }
-//     const params = userParams;
-
-//     await arrayData.apply({ params });
-//     searchPanel.value.hide();
-// }
-
-// const searchRows = ref([])
-// async function pre(value) {
-//     let filter = {};
-//     if (value != '') {
-//         filter = {
-//             where: {
-//                 id: value,
-//             },
-//         };
-//     }
-//     console.log(filter)
-//     const rows = await arrayData.request({ userFilter: filter });
-//     searchRows.value = rows
-// }
-
-// function searchParams(params) {
-//     switch (params) {
-
-//     }
-// }
 </script>
 
 <template>
     <teleport-slot to="#searchbar">
-        <VnSearchbar data-key="customerList">
+        <VnSearchbar data-key="CustomerList">
             <template #panel="{ scope }">
                 <customer-search :scope="scope" />
             </template>

From a1ab4d84c80de2bf9943bbba8fba28e4a13a9057 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 14 Feb 2023 07:04:59 +0100
Subject: [PATCH 12/32] Added CustomerFilter

---
 src/components/ui/VnSearchbar.vue        |   1 +
 src/composables/useArrayData.js          |   9 +-
 src/pages/Customer/Card/CustomerCard.vue |   5 +
 src/pages/Customer/CustomerFilter.vue    | 151 ++++++++++++++++++++++
 src/pages/Customer/CustomerList.vue      | 156 +----------------------
 src/pages/Customer/CustomerMain.vue      |   7 +-
 src/pages/Customer/CustomerSearch.vue    | 153 ----------------------
 src/pages/Ticket/TicketList.vue          | 112 +++++++++++++---
 8 files changed, 265 insertions(+), 329 deletions(-)
 create mode 100644 src/pages/Customer/CustomerFilter.vue
 delete mode 100644 src/pages/Customer/CustomerSearch.vue

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index ab484015b..2f184fbe7 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -28,6 +28,7 @@ onMounted(() => {
 });
 
 async function search() {
+    console.log('search!');
     await arrayData.apply({
         params: {
             search: searchText.value,
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 391c9ee2b..e9e65ae23 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -20,6 +20,7 @@ export function useArrayData(key, userOptions) {
     const page = ref(1);
 
     if (typeof userOptions === 'object') {
+        if (userOptions.filter) store.filter = userOptions.filter;
         if (userOptions.url) store.url = userOptions.url;
         if (userOptions.limit) store.limit = userOptions.limit;
         if (userOptions.order) store.order = userOptions.order;
@@ -38,9 +39,10 @@ export function useArrayData(key, userOptions) {
     });
 
     onUnmounted(() => {
-        if (arrayDataStore.get(key)) {
-            arrayDataStore.clear(key);
-        }
+        // if (arrayDataStore.get(key)) {
+        //     arrayDataStore.clear(key);
+        // }
+        // do stuff
     });
 
     async function fetch({ append = false }) {
@@ -53,6 +55,7 @@ export function useArrayData(key, userOptions) {
         };
 
         Object.assign(filter, store.userFilter);
+        Object.assign(filter, store.filter);
 
         store.filter = filter;
 
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 37b57bb70..8d6288fe5 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -2,10 +2,15 @@
 import { useState } from 'src/composables/useState';
 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 state = useState();
 </script>
 <template>
+    <teleport-slot to="#searchbar">
+        <VnSearchbar data-key="CustomerList" />
+    </teleport-slot>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit">
             <CustomerDescriptor />
diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
new file mode 100644
index 000000000..237cc192c
--- /dev/null
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -0,0 +1,151 @@
+<script setup>
+import { ref } from 'vue';
+import FetchData from 'components/FetchData.vue';
+
+const props = defineProps({
+    params: {
+        type: Object,
+        required: true
+    }
+})
+
+const provinces = ref([]);
+const workers = ref([]);
+const workersCopy = ref([]);
+const zones = ref([]);
+
+function setWorkers(data) {
+    workers.value = data;
+    workersCopy.value = data;
+}
+</script>
+
+<template>
+    <fetch-data url="Provinces" @on-fetch="(data) => (provinces = data)" auto-load />
+    <fetch-data url="Zones" @on-fetch="(data) => (zones = data)" auto-load />
+    <fetch-data
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="setWorkers"
+        auto-load
+    />
+    <q-list>
+        <!-- <q-item>
+                        <q-item-section>
+                            <q-input
+                                v-model="params.search"
+                                label="Search by id or name"
+                                class="full-width"
+                                lazy-rules
+                                autofocus
+                            />
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-btn
+                                label="Search"
+                                type="submit"
+                                color="primary"
+                                class="full-width"
+                                rounded
+                            />
+                        </q-item-section>
+                    </q-item>
+                    <q-separator /> -->
+        <q-item>
+            <q-item-section>
+                <q-input label="Fiscal ID" v-model="props.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="Name" v-model="props.name" lazy-rules />
+            </q-item-section>
+        </q-item>
+        <q-item>
+            <q-item-section>
+                <q-input label="Social name" v-model="props.socialName" lazy-rules />
+            </q-item-section>
+        </q-item>
+        <q-item>
+            <q-item-section>
+                <q-select
+                    v-model="props.salesPersonFk"
+                    :options="workers"
+                    option-value="id"
+                    option-label="name"
+                    emit-value
+                    label="Salesperson"
+                    map-options
+                    use-input
+                    :input-debounce="0"
+                >
+                    <template #prepend>
+                        <q-avatar color="orange" size="xs">
+                            <q-img
+                                v-if="props.salesPersonFk"
+                                :src="`/api/Images/user/160x160/${props.salesPersonFk}/download?access_token=${token}`"
+                                spinner-color="white"
+                            />
+                        </q-avatar>
+                    </template>
+                </q-select>
+            </q-item-section>
+        </q-item>
+        <q-item>
+            <q-item-section>
+                <q-input label="Phone" v-model="props.phone" lazy-rules>
+                    <template #prepend>
+                        <q-icon name="phone" size="sm"></q-icon>
+                    </template>
+                </q-input>
+            </q-item-section>
+        </q-item>
+        <q-item>
+            <q-item-section>
+                <q-input label="Email" v-model="props.email" lazy-rules>
+                    <template #prepend>
+                        <q-icon name="email" size="sm"></q-icon>
+                    </template>
+                </q-input>
+            </q-item-section>
+        </q-item>
+        <q-item>
+            <q-item-section>
+                <q-select
+                    label="Province"
+                    v-model="props.provinceFk"
+                    :options="provinces"
+                    option-value="id"
+                    option-label="name"
+                    emit-value
+                    map-options
+                />
+            </q-item-section>
+            <q-item-section>
+                <q-input label="City" v-model="props.city" lazy-rules />
+            </q-item-section>
+        </q-item>
+        <q-item>
+            <q-item-section>
+                <q-select
+                    label="Zone"
+                    v-model="props.zoneFk"
+                    :options="zones"
+                    option-value="id"
+                    option-label="name"
+                    emit-value
+                    map-options
+                />
+            </q-item-section>
+            <q-item-section>
+                <q-input label="Postcode" v-model="props.postcode" lazy-rules />
+            </q-item-section>
+        </q-item>
+    </q-list>
+</template>
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index a4d55fe32..45257eeed 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -1,16 +1,16 @@
 <script setup>
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
+import { useSession } from 'src/composables/useSession';
+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 FetchData from 'components/FetchData.vue';
-
-import { useSession } from 'src/composables/useSession';
-import { useStateStore } from 'stores/useStateStore';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import CustomeFilter from './CustomeFilter.vue';
 
 const state = useStateStore();
 const router = useRouter();
@@ -35,157 +35,13 @@ function viewSummary(id) {
         },
     });
 }
-
-const provinces = ref([]);
-const workers = ref([]);
-const workersCopy = ref([]);
-const zones = ref([]);
-
-function setWorkers(data) {
-    workers.value = data;
-    workersCopy.value = data;
-}
 </script>
 
 <template>
-    <fetch-data url="Provinces" @on-fetch="(data) => (provinces = data)" auto-load />
-    <fetch-data url="Zones" @on-fetch="(data) => (zones = data)" auto-load />
-    <fetch-data
-        url="Workers/activeWithInheritedRole"
-        :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="setWorkers"
-        auto-load
-    />
     <teleport-slot to="#rightPanel">
         <VnFilterPanel data-key="CustomerList">
             <template #body="{ params }">
-                <q-list>
-                    <!-- <q-item>
-                        <q-item-section>
-                            <q-input
-                                v-model="params.search"
-                                label="Search by id or name"
-                                class="full-width"
-                                lazy-rules
-                                autofocus
-                            />
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-btn
-                                label="Search"
-                                type="submit"
-                                color="primary"
-                                class="full-width"
-                                rounded
-                            />
-                        </q-item-section>
-                    </q-item>
-                    <q-separator /> -->
-                    <q-item>
-                        <q-item-section>
-                            <q-input label="Fiscal ID" 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="Name" v-model="params.name" lazy-rules />
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-input
-                                label="Social name"
-                                v-model="params.socialName"
-                                lazy-rules
-                            />
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-select
-                                v-model="params.salesPersonFk"
-                                :options="workers"
-                                option-value="id"
-                                option-label="name"
-                                emit-value
-                                label="Salesperson"
-                                map-options
-                                use-input
-                                :input-debounce="0"
-                            >
-                                <template #prepend>
-                                    <q-avatar color="orange" size="xs">
-                                        <q-img
-                                            v-if="params.salesPersonFk"
-                                            :src="`/api/Images/user/160x160/${params.salesPersonFk}/download?access_token=${token}`"
-                                            spinner-color="white"
-                                        />
-                                    </q-avatar>
-                                </template>
-                            </q-select>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-input label="Phone" v-model="params.phone" lazy-rules>
-                                <template #prepend>
-                                    <q-icon name="phone" size="sm"></q-icon>
-                                </template>
-                            </q-input>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-input label="Email" v-model="params.email" lazy-rules>
-                                <template #prepend>
-                                    <q-icon name="email" size="sm"></q-icon>
-                                </template>
-                            </q-input>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-select
-                                label="Province"
-                                v-model="params.provinceFk"
-                                :options="provinces"
-                                option-value="id"
-                                option-label="name"
-                                emit-value
-                                map-options
-                            />
-                        </q-item-section>
-                        <q-item-section>
-                            <q-input label="City" v-model="params.city" lazy-rules />
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-select
-                                label="Zone"
-                                v-model="params.zoneFk"
-                                :options="zones"
-                                option-value="id"
-                                option-label="name"
-                                emit-value
-                                map-options
-                            />
-                        </q-item-section>
-                        <q-item-section>
-                            <q-input
-                                label="Postcode"
-                                v-model="params.postcode"
-                                lazy-rules
-                            />
-                        </q-item-section>
-                    </q-item>
-                </q-list>
+                <CustomeFilter :params="params" />
             </template>
         </VnFilterPanel>
     </teleport-slot>
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
index ad331a981..e15c73bfd 100644
--- a/src/pages/Customer/CustomerMain.vue
+++ b/src/pages/Customer/CustomerMain.vue
@@ -2,7 +2,6 @@
 import { useStateStore } from 'stores/useStateStore';
 import LeftMenu from 'components/LeftMenu.vue';
 import TeleportSlot from 'components/ui/TeleportSlot.vue';
-import CustomerSearch from './CustomerSearch.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 const stateStore = useStateStore();
@@ -10,11 +9,7 @@ const stateStore = useStateStore();
 
 <template>
     <teleport-slot to="#searchbar">
-        <VnSearchbar data-key="CustomerList">
-            <template #panel="{ scope }">
-                <customer-search :scope="scope" />
-            </template>
-        </VnSearchbar>
+        <VnSearchbar data-key="CustomerList" />
     </teleport-slot>
     <q-drawer
         v-model="stateStore.leftDrawer"
diff --git a/src/pages/Customer/CustomerSearch.vue b/src/pages/Customer/CustomerSearch.vue
deleted file mode 100644
index 738da9d89..000000000
--- a/src/pages/Customer/CustomerSearch.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useSession } from 'composables/useSession';
-import FetchData from 'components/FetchData.vue';
-
-const session = useSession();
-
-const props = defineProps({
-    scope: {
-        type: Object,
-        required: true,
-    },
-});
-
-const token = session.getToken();
-const userParams = ref({});
-
-async function search() {
-    const searchFn = props.scope.search;
-
-    await searchFn({ userParams });
-}
-
-const provinces = ref([]);
-const workers = ref([]);
-const workersCopy = ref([]);
-const zones = ref([]);
-
-function setWorkers(data) {
-    workers.value = data;
-    workersCopy.value = data;
-}
-</script>
-<template>
-    <fetch-data url="Provinces" @on-fetch="(data) => (provinces = data)" auto-load />
-    <fetch-data url="Zones" @on-fetch="(data) => (zones = data)" auto-load />
-    <fetch-data
-        url="Workers/activeWithInheritedRole"
-        :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="setWorkers"
-        auto-load
-    />
-
-    <q-form @submit="search" class="q-gutter-y-md">
-        <div class="row q-gutter-x-md">
-            <div class="col">
-                <q-input v-model="userParams.search" label="Search" hint="Search by id or name" lazy-rules autofocus />
-            </div>
-        </div>
-        <div class="row q-gutter-x-md">
-            <div class="col">
-                <q-input label="Fiscal ID" v-model="userParams.fi" lazy-rules />
-            </div>
-            <div class="col">
-                <q-input label="Name" v-model="userParams.name" lazy-rules />
-            </div>
-            <div class="col">
-                <q-input label="Social name" v-model="userParams.socialName" lazy-rules />
-            </div>
-        </div>
-
-        <div class="row q-gutter-x-md">
-            <div class="col">
-                <q-select
-                    v-model="userParams.salesPersonFk"
-                    :options="workers"
-                    option-value="id"
-                    option-label="name"
-                    emit-value
-                    label="Salesperson"
-                    map-options
-                    use-input
-                    :input-debounce="0"
-                >
-                    <template #before>
-                        <q-avatar color="orange">
-                            <q-img
-                                v-if="userParams.salesPersonFk"
-                                :src="`/api/Images/user/160x160/${userParams.salesPersonFk}/download?access_token=${token}`"
-                                spinner-color="white"
-                            />
-                        </q-avatar>
-                    </template>
-                </q-select>
-            </div>
-        </div>
-
-        <div class="row q-gutter-x-md">
-            <div class="col">
-                <q-input label="Phone" v-model="userParams.phone" lazy-rules />
-            </div>
-            <div class="col">
-                <q-input label="Email" v-model="userParams.email" lazy-rules />
-            </div>
-        </div>
-
-        <div class="row q-gutter-x-md">
-            <div class="col">
-                <q-select
-                    label="Province"
-                    v-model="userParams.provinceFk"
-                    :options="provinces"
-                    option-value="id"
-                    option-label="name"
-                    emit-value
-                    map-options
-                />
-            </div>
-            <div class="col">
-                <q-input label="City" v-model="userParams.city" lazy-rules />
-            </div>
-        </div>
-
-        <div class="row q-gutter-x-md">
-            <div class="col">
-                <q-select
-                    label="Zone"
-                    v-model="userParams.zoneFk"
-                    :options="zones"
-                    option-value="id"
-                    option-label="name"
-                    emit-value
-                    map-options
-                />
-            </div>
-            <div class="col">
-                <q-input label="Postcode" v-model="userParams.postcode" lazy-rules />
-            </div>
-        </div>
-
-        <!-- <q-input
-                                    label="Phone"
-                                    hint="The customer phone"
-                                    lazy-rules
-                                    :rules="[(val) => (val && val.length > 0) || 'Please type something']"
-                                /> -->
-
-        <div>
-            <q-btn label="Search" type="submit" color="primary" class="full-width" rounded />
-        </div>
-    </q-form>
-</template>
-<i18n>
-    {
-        "en": {
-            "phone": "Phone"
-        },
-        "es": {
-            "phone": "Teléfono"
-        }
-    }
-    </i18n>
-    
\ No newline at end of file
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index d93a1bc95..f50a6608f 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -1,14 +1,24 @@
 <script setup>
+import { onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useRouter } from 'vue-router';
+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 VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import TeleportSlot from 'components/ui/TeleportSlot.vue';
+// import FetchData from 'components/FetchData.vue';
+
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
+const stateStore = useStateStore();
+
+onMounted(() => stateStore.toggleRightDrawer());
+onUnmounted(() => stateStore.toggleRightDrawer());
 
 const filter = {
     include: [
@@ -60,24 +70,60 @@ function viewSummary(id) {
 </script>
 
 <template>
+    <teleport-slot to="#rightPanel">
+        <VnFilterPanel data-key="TicketList">
+            <template #body="{ params }">
+                <q-list>
+                    <q-item>
+                        <q-item-section>
+                            <q-input
+                                v-model="params.search"
+                                label="Search by id or name"
+                                class="full-width"
+                                lazy-rules
+                                autofocus
+                            />
+                        </q-item-section>
+                    </q-item>
+                </q-list>
+            </template>
+        </VnFilterPanel>
+    </teleport-slot>
     <q-page class="q-pa-md">
-        <paginate url="/Tickets" :filter="filter" sort-by="id DESC" auto-load>
+        <paginate
+            data-key="TicketList"
+            url="Tickets"
+            :filter="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
+                        class="q-pa-none items-start cursor-pointer q-hoverable"
+                        v-ripple
+                        clickable
+                    >
                         <q-item-section class="q-pa-md" @click="navigate(row.id)">
                             <div class="text-h6">{{ row.name }}</div>
                             <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('ticket.list.nickname') }}</q-item-label>
+                                        <q-item-label caption>{{
+                                            t('ticket.list.nickname')
+                                        }}</q-item-label>
                                         <q-item-label>{{ row.nickname }}</q-item-label>
                                     </q-item-section>
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('ticket.list.state') }}</q-item-label>
+                                        <q-item-label caption>{{
+                                            t('ticket.list.state')
+                                        }}</q-item-label>
                                         <q-item-label>
-                                            <q-chip :color="stateColor(row.ticketState)" dense>
+                                            <q-chip
+                                                :color="stateColor(row.ticketState)"
+                                                dense
+                                            >
                                                 {{ row.ticketState.state.name }}
                                             </q-chip>
                                         </q-item-label>
@@ -85,33 +131,65 @@ function viewSummary(id) {
                                 </q-item>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('ticket.list.shipped') }}</q-item-label>
-                                        <q-item-label>{{ toDate(row.shipped) }}</q-item-label>
+                                        <q-item-label caption>{{
+                                            t('ticket.list.shipped')
+                                        }}</q-item-label>
+                                        <q-item-label>{{
+                                            toDate(row.shipped)
+                                        }}</q-item-label>
                                     </q-item-section>
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('ticket.list.landed') }}</q-item-label>
-                                        <q-item-label>{{ toDate(row.landed) }}</q-item-label>
+                                        <q-item-label caption>{{
+                                            t('ticket.list.landed')
+                                        }}</q-item-label>
+                                        <q-item-label>{{
+                                            toDate(row.landed)
+                                        }}</q-item-label>
                                     </q-item-section>
                                 </q-item>
                                 <q-item class="q-pa-none">
                                     <q-item-section v-if="row.client.salesPersonUser">
-                                        <q-item-label caption>{{ t('ticket.list.salesPerson') }}</q-item-label>
-                                        <q-item-label>{{ row.client.salesPersonUser.name }}</q-item-label>
+                                        <q-item-label caption>{{
+                                            t('ticket.list.salesPerson')
+                                        }}</q-item-label>
+                                        <q-item-label>{{
+                                            row.client.salesPersonUser.name
+                                        }}</q-item-label>
                                     </q-item-section>
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('ticket.list.total') }}</q-item-label>
-                                        <q-item-label>{{ toCurrency(row.totalWithVat) }}</q-item-label>
+                                        <q-item-label caption>{{
+                                            t('ticket.list.total')
+                                        }}</q-item-label>
+                                        <q-item-label>{{
+                                            toCurrency(row.totalWithVat)
+                                        }}</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="orange" icon="arrow_circle_right" @click="navigate(row.id)">
-                                <q-tooltip>{{ t('components.smartCard.openCard') }}</q-tooltip>
+                            <q-btn
+                                flat
+                                round
+                                color="orange"
+                                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
+                                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>

From a864e2786b06b01ffa9c82fe64f9816a107ed875 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 14 Feb 2023 14:59:39 +0100
Subject: [PATCH 13/32] Navigate through card/index

---
 src/components/ui/VnSearchbar.vue             |  23 +-
 src/composables/useArrayData.js               |   4 +-
 .../Customer/Card/CustomerDescriptor.vue      |  66 ++++--
 src/pages/Customer/CustomerFilter.vue         | 213 +++++++++---------
 src/pages/Customer/CustomerList.vue           |  17 +-
 src/pages/Customer/CustomerMain.vue           |   5 -
 src/pages/Ticket/TicketFilter.vue             |   0
 src/pages/Ticket/TicketList.vue               |  90 +++++---
 8 files changed, 237 insertions(+), 181 deletions(-)
 create mode 100644 src/pages/Ticket/TicketFilter.vue

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 2f184fbe7..6c0809c8b 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -2,12 +2,18 @@
 import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useArrayData } from 'composables/useArrayData';
+import { route } from 'quasar/wrappers';
 
 const props = defineProps({
     dataKey: {
         type: String,
         required: true,
     },
+    label: {
+        type: String,
+        required: false,
+        default: 'Search',
+    },
     redirect: {
         type: Boolean,
         required: false,
@@ -16,6 +22,7 @@ const props = defineProps({
 });
 
 const router = useRouter();
+// const route = useRoute();
 const arrayData = useArrayData(props.dataKey);
 const store = arrayData.store;
 const searchText = ref();
@@ -28,20 +35,26 @@ onMounted(() => {
 });
 
 async function search() {
-    console.log('search!');
     await arrayData.apply({
         params: {
             search: searchText.value,
         },
     });
     if (!props.redirect) return;
-
+    console.log(route.query);
     const rows = store.data;
-
     if (rows.length === 1) {
         const firstRow = rows[0];
         router.push({ path: `/customer/${firstRow.id}` });
+    } else {
+        router.replace({ path: `/customer` });
     }
+
+    // if (route.matched.length > 2) {
+
+    // } else {
+
+    // }
 }
 </script>
 
@@ -50,9 +63,9 @@ async function search() {
         <q-input
             id="searchbar"
             v-model="searchText"
-            label="Search by customer id or name"
+            :label="props.label"
             dense
-            standout
+            standout="bg-grey-6 text-white"
             autofocus
         >
             <template #prepend>
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index e9e65ae23..5dde2f516 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -13,7 +13,7 @@ export function useArrayData(key, userOptions) {
     }
 
     const store = arrayDataStore.get(key);
-    const hasMoreData = ref(true);
+    const hasMoreData = ref(false);
     const router = useRouter();
     const route = useRoute();
 
@@ -60,7 +60,7 @@ export function useArrayData(key, userOptions) {
         store.filter = filter;
 
         const params = {
-            filter: filter,
+            filter: JSON.stringify(filter),
         };
 
         Object.assign(params, store.userParams);
diff --git a/src/pages/Customer/Card/CustomerDescriptor.vue b/src/pages/Customer/Card/CustomerDescriptor.vue
index 6cbba9d2f..ca5f4adaa 100644
--- a/src/pages/Customer/Card/CustomerDescriptor.vue
+++ b/src/pages/Customer/Card/CustomerDescriptor.vue
@@ -108,27 +108,55 @@ const entityId = computed(() => {
                     <q-tooltip>{{ t('customer.card.noWebAccess') }}</q-tooltip>
                 </q-icon>
             </q-card-actions>
-            <!-- <q-card-actions>
-                    <q-btn size="md" icon="vn:ticket" color="primary">
-                        <q-tooltip>Ticket list</q-tooltip>
-                    </q-btn>
+            <q-card-actions>
+                <q-btn
+                    :to="{
+                        name: 'TicketList',
+                        query: { params: JSON.stringify({ clientFk: entity.id }) },
+                    }"
+                    size="md"
+                    icon="vn:ticket"
+                    color="primary"
+                >
+                    <q-tooltip>{{ t('ticketList') }}</q-tooltip>
+                </q-btn>
+                <q-btn
+                    :to="{
+                        name: 'InvoiceOutList',
+                        query: { params: JSON.stringify({ clientFk: entity.id }) },
+                    }"
+                    size="md"
+                    icon="vn:invoice-out"
+                    color="primary"
+                >
+                    <q-tooltip>{{ t('invoiceOutList') }}</q-tooltip>
+                </q-btn>
+                <!-- 
+                <q-btn size="md" icon="vn:basketadd" color="primary">
+                    <q-tooltip>Order list</q-tooltip>
+                </q-btn>
 
-                    <q-btn size="md" icon="vn:invoice-out" color="primary">
-                        <q-tooltip>Invoice Out list</q-tooltip>
-                    </q-btn>
+                <q-btn size="md" icon="face" color="primary">
+                    <q-tooltip>View user</q-tooltip>
+                </q-btn>
 
-                    <q-btn size="md" icon="vn:basketadd" color="primary">
-                        <q-tooltip>Order list</q-tooltip>
-                    </q-btn>
-
-                    <q-btn size="md" icon="face" color="primary">
-                        <q-tooltip>View user</q-tooltip>
-                    </q-btn>
-
-                    <q-btn size="md" icon="expand_more" color="primary">
-                        <q-tooltip>More options</q-tooltip>
-                    </q-btn>
-                </q-card-actions> -->
+                <q-btn size="md" icon="expand_more" color="primary">
+                    <q-tooltip>More options</q-tooltip>
+                </q-btn> -->
+            </q-card-actions>
         </template>
     </card-descriptor>
 </template>
+
+<i18n>
+{
+    "en": {
+        "ticketList": "Customer ticket list",
+        "invoiceOutList": "Customer invoice out list"
+    },
+    "es": {
+        "ticketList": "Listado de tickets del cliente",
+        "invoiceOutList": "Listado de facturas del cliente"
+    }
+}
+</i18n>
diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index 237cc192c..dcc363487 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -1,13 +1,14 @@
 <script setup>
 import { ref } from 'vue';
 import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 
 const props = defineProps({
-    params: {
-        type: Object,
-        required: true
-    }
-})
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
 
 const provinces = ref([]);
 const workers = ref([]);
@@ -29,8 +30,10 @@ function setWorkers(data) {
         @on-fetch="setWorkers"
         auto-load
     />
-    <q-list>
-        <!-- <q-item>
+    <VnFilterPanel :data-key="props.dataKey">
+        <template #body="{ params }">
+            <q-list>
+                <!-- <q-item>
                         <q-item-section>
                             <q-input
                                 v-model="params.search"
@@ -53,99 +56,105 @@ function setWorkers(data) {
                         </q-item-section>
                     </q-item>
                     <q-separator /> -->
-        <q-item>
-            <q-item-section>
-                <q-input label="Fiscal ID" v-model="props.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="Name" v-model="props.name" lazy-rules />
-            </q-item-section>
-        </q-item>
-        <q-item>
-            <q-item-section>
-                <q-input label="Social name" v-model="props.socialName" lazy-rules />
-            </q-item-section>
-        </q-item>
-        <q-item>
-            <q-item-section>
-                <q-select
-                    v-model="props.salesPersonFk"
-                    :options="workers"
-                    option-value="id"
-                    option-label="name"
-                    emit-value
-                    label="Salesperson"
-                    map-options
-                    use-input
-                    :input-debounce="0"
-                >
-                    <template #prepend>
-                        <q-avatar color="orange" size="xs">
-                            <q-img
-                                v-if="props.salesPersonFk"
-                                :src="`/api/Images/user/160x160/${props.salesPersonFk}/download?access_token=${token}`"
-                                spinner-color="white"
-                            />
-                        </q-avatar>
-                    </template>
-                </q-select>
-            </q-item-section>
-        </q-item>
-        <q-item>
-            <q-item-section>
-                <q-input label="Phone" v-model="props.phone" lazy-rules>
-                    <template #prepend>
-                        <q-icon name="phone" size="sm"></q-icon>
-                    </template>
-                </q-input>
-            </q-item-section>
-        </q-item>
-        <q-item>
-            <q-item-section>
-                <q-input label="Email" v-model="props.email" lazy-rules>
-                    <template #prepend>
-                        <q-icon name="email" size="sm"></q-icon>
-                    </template>
-                </q-input>
-            </q-item-section>
-        </q-item>
-        <q-item>
-            <q-item-section>
-                <q-select
-                    label="Province"
-                    v-model="props.provinceFk"
-                    :options="provinces"
-                    option-value="id"
-                    option-label="name"
-                    emit-value
-                    map-options
-                />
-            </q-item-section>
-            <q-item-section>
-                <q-input label="City" v-model="props.city" lazy-rules />
-            </q-item-section>
-        </q-item>
-        <q-item>
-            <q-item-section>
-                <q-select
-                    label="Zone"
-                    v-model="props.zoneFk"
-                    :options="zones"
-                    option-value="id"
-                    option-label="name"
-                    emit-value
-                    map-options
-                />
-            </q-item-section>
-            <q-item-section>
-                <q-input label="Postcode" v-model="props.postcode" lazy-rules />
-            </q-item-section>
-        </q-item>
-    </q-list>
+                <q-item>
+                    <q-item-section>
+                        <q-input label="Fiscal ID" 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="Name" v-model="params.name" lazy-rules />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-input
+                            label="Social name"
+                            v-model="params.socialName"
+                            lazy-rules
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-select
+                            v-model="params.salesPersonFk"
+                            :options="workers"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            label="Salesperson"
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        >
+                            <template #prepend>
+                                <q-avatar color="orange" size="xs">
+                                    <q-img
+                                        v-if="params.salesPersonFk"
+                                        :src="`/api/Images/user/160x160/${params.salesPersonFk}/download?access_token=${token}`"
+                                        spinner-color="white"
+                                    />
+                                </q-avatar>
+                            </template>
+                        </q-select>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-input label="Phone" v-model="params.phone" lazy-rules>
+                            <template #prepend>
+                                <q-icon name="phone" size="sm"></q-icon>
+                            </template>
+                        </q-input>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-input label="Email" v-model="params.email" lazy-rules>
+                            <template #prepend>
+                                <q-icon name="email" size="sm"></q-icon>
+                            </template>
+                        </q-input>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-select
+                            label="Province"
+                            v-model="params.provinceFk"
+                            :options="provinces"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                        />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-input label="City" v-model="params.city" lazy-rules />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-select
+                            label="Zone"
+                            v-model="params.zoneFk"
+                            :options="zones"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                        />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-input label="Postcode" v-model="params.postcode" lazy-rules />
+                    </q-item-section>
+                </q-item>
+            </q-list>
+        </template>
+    </VnFilterPanel>
 </template>
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 45257eeed..ce06b0c9d 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -3,23 +3,19 @@ import { onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
-import { useSession } from 'src/composables/useSession';
 import { useStateStore } from 'stores/useStateStore';
 
 import Paginate from 'src/components/PaginateData.vue';
 import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import TeleportSlot from 'components/ui/TeleportSlot.vue';
-import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import CustomeFilter from './CustomeFilter.vue';
+import CustomerFilter from './CustomerFilter.vue';
 
 const state = useStateStore();
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
 
-const session = useSession();
-const token = session.getToken();
-
 onMounted(() => state.toggleRightDrawer());
 onUnmounted(() => state.toggleRightDrawer());
 
@@ -38,12 +34,11 @@ function viewSummary(id) {
 </script>
 
 <template>
+    <teleport-slot to="#searchbar">
+        <VnSearchbar data-key="CustomerList" label="Search by customer id or name" />
+    </teleport-slot>
     <teleport-slot to="#rightPanel">
-        <VnFilterPanel data-key="CustomerList">
-            <template #body="{ params }">
-                <CustomeFilter :params="params" />
-            </template>
-        </VnFilterPanel>
+        <CustomerFilter data-key="CustomerList" />
     </teleport-slot>
     <q-page class="q-pa-md">
         <paginate data-key="CustomerList" url="/Clients/filter" order="id DESC" auto-load>
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
index e15c73bfd..d39141de3 100644
--- a/src/pages/Customer/CustomerMain.vue
+++ b/src/pages/Customer/CustomerMain.vue
@@ -1,16 +1,11 @@
 <script setup>
 import { useStateStore } from 'stores/useStateStore';
 import LeftMenu from 'components/LeftMenu.vue';
-import TeleportSlot from 'components/ui/TeleportSlot.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 const stateStore = useStateStore();
 </script>
 
 <template>
-    <teleport-slot to="#searchbar">
-        <VnSearchbar data-key="CustomerList" />
-    </teleport-slot>
     <q-drawer
         v-model="stateStore.leftDrawer"
         show-if-above
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index f50a6608f..921b0205e 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -8,8 +8,9 @@ import Paginate from 'src/components/PaginateData.vue';
 import { toDate, toCurrency } from 'src/filters/index';
 import TicketSummaryDialog from './Card/TicketSummaryDialog.vue';
 
-import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import TeleportSlot from 'components/ui/TeleportSlot.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 // import FetchData from 'components/FetchData.vue';
 
 const router = useRouter();
@@ -48,11 +49,12 @@ const filter = {
     ],
 };
 
-function stateColor(state) {
-    if (state.code === 'OK') return 'green';
-    if (state.code === 'FREE') return 'blue-3';
-    if (state.alertLevel === 1) return 'orange';
-    if (state.alertLevel === 0) return 'red';
+function stateColor(row) {
+    if (row.alertLevelCode === 'OK') return 'green';
+    if (row.alertLevelCode === 'FREE') return 'blue-3';
+    if (row.alertLevel === 1) return 'orange';
+    if (row.alertLevel === 0) return 'red';
+    return 'red';
 }
 
 function navigate(id) {
@@ -70,6 +72,9 @@ function viewSummary(id) {
 </script>
 
 <template>
+    <teleport-slot to="#searchbar">
+        <VnSearchbar data-key="TicketList" />
+    </teleport-slot>
     <teleport-slot to="#rightPanel">
         <VnFilterPanel data-key="TicketList">
             <template #body="{ params }">
@@ -85,6 +90,16 @@ function viewSummary(id) {
                             />
                         </q-item-section>
                     </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-input
+                                v-model="params.clientFk"
+                                label="Customer ID"
+                                lazy-rules
+                                autofocus
+                            />
+                        </q-item-section>
+                    </q-item>
                 </q-list>
             </template>
         </VnFilterPanel>
@@ -92,7 +107,7 @@ function viewSummary(id) {
     <q-page class="q-pa-md">
         <paginate
             data-key="TicketList"
-            url="Tickets"
+            url="Tickets/filter"
             :filter="filter"
             sort-by="id DESC"
             auto-load
@@ -110,56 +125,57 @@ function viewSummary(id) {
                             <q-list>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{
-                                            t('ticket.list.nickname')
-                                        }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('ticket.list.nickname') }}
+                                        </q-item-label>
                                         <q-item-label>{{ row.nickname }}</q-item-label>
                                     </q-item-section>
                                     <q-item-section>
-                                        <q-item-label caption>{{
-                                            t('ticket.list.state')
-                                        }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('ticket.list.state') }}
+                                        </q-item-label>
                                         <q-item-label>
                                             <q-chip
-                                                :color="stateColor(row.ticketState)"
+                                                :color="stateColor(row)"
+                                                class="q-ma-none"
                                                 dense
                                             >
-                                                {{ row.ticketState.state.name }}
+                                                {{ row.state }}
                                             </q-chip>
                                         </q-item-label>
                                     </q-item-section>
                                 </q-item>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{
-                                            t('ticket.list.shipped')
-                                        }}</q-item-label>
-                                        <q-item-label>{{
-                                            toDate(row.shipped)
-                                        }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('ticket.list.shipped') }}
+                                        </q-item-label>
+                                        <q-item-label>
+                                            {{ toDate(row.shipped) }}
+                                        </q-item-label>
                                     </q-item-section>
                                     <q-item-section>
-                                        <q-item-label caption>{{
-                                            t('ticket.list.landed')
-                                        }}</q-item-label>
-                                        <q-item-label>{{
-                                            toDate(row.landed)
-                                        }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('ticket.list.landed') }}
+                                        </q-item-label>
+                                        <q-item-label>
+                                            {{ toDate(row.landed) }}
+                                        </q-item-label>
                                     </q-item-section>
                                 </q-item>
                                 <q-item class="q-pa-none">
-                                    <q-item-section v-if="row.client.salesPersonUser">
-                                        <q-item-label caption>{{
-                                            t('ticket.list.salesPerson')
-                                        }}</q-item-label>
-                                        <q-item-label>{{
-                                            row.client.salesPersonUser.name
-                                        }}</q-item-label>
+                                    <q-item-section>
+                                        <q-item-label caption>
+                                            {{ t('ticket.list.salesPerson') }}
+                                        </q-item-label>
+                                        <q-item-label>
+                                            {{ row.salesPerson }}
+                                        </q-item-label>
                                     </q-item-section>
                                     <q-item-section>
-                                        <q-item-label caption>{{
-                                            t('ticket.list.total')
-                                        }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('ticket.list.total') }}
+                                        </q-item-label>
                                         <q-item-label>{{
                                             toCurrency(row.totalWithVat)
                                         }}</q-item-label>

From bd904ad82a736d7f00a58b5cb0346e628b635310 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Wed, 15 Feb 2023 15:51:31 +0100
Subject: [PATCH 14/32] Paginate initial load fix

---
 src/components/PaginateData.vue      | 13 ++++++--
 src/components/ui/VnFilterPanel.vue  |  2 +-
 src/components/ui/VnSearchbar.vue    | 44 ++++++++++++++++++----------
 src/composables/useArrayData.js      | 12 ++++++--
 src/pages/Ticket/Card/TicketCard.vue |  7 ++++-
 src/pages/Ticket/TicketList.vue      |  2 +-
 6 files changed, 57 insertions(+), 23 deletions(-)

diff --git a/src/components/PaginateData.vue b/src/components/PaginateData.vue
index fb0549f38..88f2157ca 100644
--- a/src/components/PaginateData.vue
+++ b/src/components/PaginateData.vue
@@ -61,8 +61,8 @@ const arrayData = useArrayData(props.dataKey, {
 });
 const store = arrayData.store;
 
-onMounted(() => {
-    if (props.autoLoad) paginate();
+onMounted(async () => {
+    if (props.autoLoad) await fetch();
 });
 
 watch(
@@ -72,6 +72,15 @@ watch(
     }
 );
 
+async function fetch() {
+    await arrayData.fetch({ append: false });
+    if (!arrayData.hasMoreData.value) {
+        isLoading.value = false;
+    }
+
+    emit('onFetch', store.data);
+}
+
 async function paginate() {
     const { page, rowsPerPage, sortBy, descending } = pagination.value;
 
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 557a07f3b..777ef5bfe 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -27,7 +27,7 @@ onMounted(() => {
 
 async function search() {
     const params = userParams.value;
-    await arrayData.apply({ params });
+    await arrayData.addFilter({ params });
 }
 
 const tags = computed(() => {
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 6c0809c8b..d8e6efcf2 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -1,8 +1,7 @@
 <script setup>
 import { onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import { useArrayData } from 'composables/useArrayData';
-import { route } from 'quasar/wrappers';
 
 const props = defineProps({
     dataKey: {
@@ -22,7 +21,7 @@ const props = defineProps({
 });
 
 const router = useRouter();
-// const route = useRoute();
+const route = useRoute();
 const arrayData = useArrayData(props.dataKey);
 const store = arrayData.store;
 const searchText = ref();
@@ -35,26 +34,26 @@ onMounted(() => {
 });
 
 async function search() {
-    await arrayData.apply({
+    await arrayData.applyFilter({
         params: {
             search: searchText.value,
         },
     });
     if (!props.redirect) return;
-    console.log(route.query);
+
+    const moduleRoute = route.matched[1];
+    console.log(moduleRoute);
+
     const rows = store.data;
     if (rows.length === 1) {
         const firstRow = rows[0];
-        router.push({ path: `/customer/${firstRow.id}` });
-    } else {
-        router.replace({ path: `/customer` });
+        const stateName = `${moduleRoute.name}Card`;
+        await router.push({ name: stateName, params: { id: firstRow.id } });
+        arrayData.updateStateParams();
+    } else if (route.matched.length > 3) {
+        await router.push({ name: moduleRoute.name });
+        arrayData.updateStateParams();
     }
-
-    // if (route.matched.length > 2) {
-
-    // } else {
-
-    // }
 }
 </script>
 
@@ -63,9 +62,9 @@ async function search() {
         <q-input
             id="searchbar"
             v-model="searchText"
-            :label="props.label"
+            :placeholder="props.label"
             dense
-            standout="bg-grey-6 text-white"
+            standout
             autofocus
         >
             <template #prepend>
@@ -74,3 +73,16 @@ async function search() {
         </q-input>
     </q-form>
 </template>
+
+<style lang="scss">
+#searchbar .q-field {
+    min-width: 350px;
+}
+
+.body--light #searchbar {
+    .q-field--standout.q-field--highlighted .q-field__control {
+        background-color: $grey-7;
+        color: #333;
+    }
+}
+</style>
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 5dde2f516..6c9558637 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -99,13 +99,20 @@ export function useArrayData(key, userOptions) {
         return response.data;
     }
 
-    async function apply({ filter, params }) {
+    async function applyFilter({ filter, params }) {
         if (filter) store.userFilter = filter;
         if (params) store.userParams = Object.assign({}, params);
 
         await fetch({ append: false });
     }
 
+    async function addFilter({ filter, params }) {
+        if (filter) store.userFilter = Object.assign(store.userFilter, filter);
+        if (params) store.userParams = Object.assign(store.userParams, params);
+
+        await fetch({ append: false });
+    }
+
     async function loadMore() {
         if (!hasMoreData.value) return;
 
@@ -133,7 +140,8 @@ export function useArrayData(key, userOptions) {
 
     return {
         fetch,
-        apply,
+        applyFilter,
+        addFilter,
         refresh,
         request,
         loadMore,
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 71df0dfce..6992b2406 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -2,13 +2,18 @@
 import { useState } from 'src/composables/useState';
 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 state = useState();
 </script>
 <template>
+    <teleport-slot to="#searchbar">
+        <VnSearchbar data-key="TicketList" />
+    </teleport-slot>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit">
-            <ticket-descriptor />
+            <TicketDescriptor />
             <q-separator />
             <left-menu source="card" />
         </q-scroll-area>
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index 921b0205e..aeebc6d09 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -73,7 +73,7 @@ function viewSummary(id) {
 
 <template>
     <teleport-slot to="#searchbar">
-        <VnSearchbar data-key="TicketList" />
+        <VnSearchbar data-key="TicketList" label="Search by ticket id or alias" />
     </teleport-slot>
     <teleport-slot to="#rightPanel">
         <VnFilterPanel data-key="TicketList">

From 984b1f9e24c66fe2570ef40216b5fff42b5e64f9 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Thu, 16 Feb 2023 15:01:02 +0100
Subject: [PATCH 15/32] Added ticket filter panel

---
 src/components/ui/VnFilterPanel.vue |  71 +++++---
 src/components/ui/VnSearchbar.vue   |   1 -
 src/composables/useArrayData.js     |  14 +-
 src/pages/Ticket/TicketFilter.vue   | 261 ++++++++++++++++++++++++++++
 src/pages/Ticket/TicketList.vue     |  31 +---
 src/pages/Ticket/TicketMain.vue     |   2 +-
 6 files changed, 318 insertions(+), 62 deletions(-)

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 777ef5bfe..e1e3c9719 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -1,7 +1,9 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'composables/useArrayData';
 
+const { t } = useI18n();
 const props = defineProps({
     dataKey: {
         type: String,
@@ -49,27 +51,35 @@ async function remove(key) {
 }
 </script>
 <template>
-    <div>
-        <q-list>
-            <q-item-label header class="text-uppercase" dense>
-                Applied filters
-            </q-item-label>
-        </q-list>
-        <div class="q-pa-sm truncate-chip-labels">
-            <span v-if="tags.length === 0">You didn't enter any filter</span>
-            <q-chip
-                v-for="chip of tags"
-                :key="chip.label"
-                @remove="remove(chip.label)"
-                icon="label"
-                color="primary"
-                size="sm"
-                removable
-            >
-                <strong>{{ chip.label }}: </strong>
-                <span>"{{ chip.value }}"</span>
-            </q-chip>
-        </div>
+    <div class="q-pa-sm truncate-chip-labels">
+        <span v-if="tags.length === 0">You didn't enter any filter</span>
+        <q-chip
+            v-for="chip of tags"
+            :key="chip.label"
+            @remove="remove(chip.label)"
+            icon="label"
+            color="primary"
+            class="text-dark"
+            size="sm"
+            removable
+        >
+            <slot name="tags" :tag="chip">
+                <div class="q-gutter-md">
+                    <strong>{{ chip.label }}:</strong>
+                    <span>"{{ chip.value }}"</span>
+                </div>
+            </slot>
+        </q-chip>
+    </div>
+    <q-toolbar>
+        <q-item-label header class="q-pa-none text-uppercase" dense>
+            {{ t('appliedFilters') }}
+        </q-item-label>
+        <q-space />
+        <q-btn icon="clear_all" color="primary" size="sm" round flat dense />
+        <q-btn icon="refresh" color="primary" size="sm" round flat dense />
+    </q-toolbar>
+    <q-form @submit="search" @keyup.enter="search">
         <div v-show="props.searchButton">
             <q-separator />
             <q-item>
@@ -79,14 +89,25 @@ async function remove(key) {
                         type="submit"
                         color="primary"
                         class="full-width"
+                        icon="search"
                         rounded
+                        dense
                     />
                 </q-item-section>
             </q-item>
         </div>
         <q-separator />
-        <q-form @submit="search" @keyup.enter="search">
-            <slot name="body" :params="userParams"></slot>
-        </q-form>
-    </div>
+        <slot name="body" :params="userParams"></slot>
+    </q-form>
 </template>
+
+<i18n>
+    {
+        "en": {
+            "appliedFilters": "Applied filters"
+        },
+        "es": {
+            "appliedFilters": "Filtros aplicados"
+        }
+    }
+    </i18n>
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index d8e6efcf2..f380079d5 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -49,7 +49,6 @@ async function search() {
         const firstRow = rows[0];
         const stateName = `${moduleRoute.name}Card`;
         await router.push({ name: stateName, params: { id: firstRow.id } });
-        arrayData.updateStateParams();
     } else if (route.matched.length > 3) {
         await router.push({ name: moduleRoute.name });
         arrayData.updateStateParams();
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 6c9558637..37d6febc7 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -127,14 +127,16 @@ export function useArrayData(key, userOptions) {
     }
 
     function updateStateParams() {
+        const query = {};
+        if (store.order) query.order = store.order;
+        if (store.limit) query.limit = store.limit;
+        if (store.skip) query.skip = store.skip;
+        if (store.userParams && Object.keys(store.userParams).length !== 0)
+            query.params = JSON.stringify(store.userParams);
+
         router.replace({
             path: route.path,
-            query: {
-                order: store.order,
-                limit: store.limit,
-                skip: store.skip,
-                params: JSON.stringify(store.userParams),
-            },
+            query: query,
         });
     }
 
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index e69de29bb..7a4849bbb 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -0,0 +1,261 @@
+<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 workers = ref([]);
+const workersCopy = ref([]);
+const provinces = ref([]);
+const states = ref([]);
+const agencies = ref([]);
+const warehouses = ref([]);
+
+function setWorkers(data) {
+    workers.value = data;
+    workersCopy.value = data;
+}
+</script>
+
+<template>
+    <fetch-data url="Provinces" @on-fetch="(data) => (provinces = data)" auto-load />
+    <fetch-data url="States" @on-fetch="(data) => (states = data)" auto-load />
+    <fetch-data
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="setWorkers"
+        auto-load
+    />
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(tag.label) }}: </strong>
+                <span>"{{ tag.value }}"</span>
+            </div>
+        </template>
+        <template #body="{ params }">
+            <q-list dense>
+                <q-item>
+                    <q-item-section>
+                        <q-input
+                            v-model="params.clientFk"
+                            label="Customer ID"
+                            lazy-rules
+                            autofocus
+                        />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-input v-model="params.orderFk" label="Order ID" lazy-rules />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-input
+                            v-model="params.dateFrom"
+                            label="From"
+                            autofocus
+                            readonly
+                        >
+                            <template #append>
+                                <q-icon name="event" class="cursor-pointer">
+                                    <q-popup-proxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <q-date v-model="params.dateFrom">
+                                            <div class="row items-center justify-end">
+                                                <q-btn
+                                                    v-close-popup
+                                                    label="Close"
+                                                    color="primary"
+                                                    flat
+                                                />
+                                            </div>
+                                        </q-date>
+                                    </q-popup-proxy>
+                                </q-icon>
+                            </template>
+                        </q-input>
+                    </q-item-section>
+                    <q-item-section>
+                        <q-input v-model="params.dateTo" label="To" autofocus readonly>
+                            <template #append>
+                                <q-icon name="event" class="cursor-pointer">
+                                    <q-popup-proxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <q-date v-model="params.dateTo">
+                                            <div class="row items-center justify-end">
+                                                <q-btn
+                                                    v-close-popup
+                                                    label="Close"
+                                                    color="primary"
+                                                    flat
+                                                />
+                                            </div>
+                                        </q-date>
+                                    </q-popup-proxy>
+                                </q-icon>
+                            </template>
+                        </q-input>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-select
+                            v-model="params.salesPersonFk"
+                            :options="workers"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            label="Salesperson"
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        >
+                            <template #prepend>
+                                <q-avatar color="orange" size="xs">
+                                    <q-img
+                                        v-if="params.salesPersonFk"
+                                        :src="`/api/Images/user/160x160/${params.salesPersonFk}/download?access_token=${token}`"
+                                        spinner-color="white"
+                                    />
+                                </q-avatar>
+                            </template>
+                        </q-select>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-select
+                            label="State"
+                            v-model="params.stateFk"
+                            :options="states"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-input v-model="params.refFk" label="Invoice Out" lazy-rules />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-checkbox
+                            v-model="params.myTeam"
+                            label="My team"
+                            toggle-indeterminate
+                        />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-checkbox
+                            v-model="params.problems"
+                            label="Has problems"
+                            toggle-indeterminate
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-checkbox
+                            v-model="params.pending"
+                            label="Pending"
+                            toggle-indeterminate
+                        />
+                    </q-item-section>
+
+                    <q-item-section>
+                        <q-checkbox
+                            v-model="params.hasRoute"
+                            label="Has route"
+                            toggle-indeterminate
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-checkbox
+                            v-model="params.hasInvoice"
+                            label="With invoice"
+                            toggle-indeterminate
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-separator />
+                <q-expansion-item label="More options" expand-separator>
+                    <q-item>
+                        <q-item-section>
+                            <q-select
+                                label="Province"
+                                v-model="params.provinceFk"
+                                :options="provinces"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                map-options
+                            />
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-select
+                                label="Agency"
+                                v-model="params.agencyModeFk"
+                                :options="agencies"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                map-options
+                            />
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-select
+                                label="Warehouse"
+                                v-model="params.warehouseFk"
+                                :options="warehouses"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                map-options
+                            />
+                        </q-item-section>
+                    </q-item>
+                </q-expansion-item>
+            </q-list>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+{
+    "en": {
+        "search": "Contains",
+        "clientFk": 'Client',
+        "dateFrom": 'From',
+        "dateTo": 'To'
+    },
+    "es": {
+        "search": "Contiene",
+        "clientFk": 'Cliente',
+        "dateFrom": 'Desde',
+        "dateTo": 'Hasta' 
+    }
+}
+</i18n>
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index aeebc6d09..dc96b9300 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -10,8 +10,7 @@ import TicketSummaryDialog from './Card/TicketSummaryDialog.vue';
 
 import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-// import FetchData from 'components/FetchData.vue';
+import TicketFilter from './TicketFilter.vue';
 
 const router = useRouter();
 const quasar = useQuasar();
@@ -76,33 +75,7 @@ function viewSummary(id) {
         <VnSearchbar data-key="TicketList" label="Search by ticket id or alias" />
     </teleport-slot>
     <teleport-slot to="#rightPanel">
-        <VnFilterPanel data-key="TicketList">
-            <template #body="{ params }">
-                <q-list>
-                    <q-item>
-                        <q-item-section>
-                            <q-input
-                                v-model="params.search"
-                                label="Search by id or name"
-                                class="full-width"
-                                lazy-rules
-                                autofocus
-                            />
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-input
-                                v-model="params.clientFk"
-                                label="Customer ID"
-                                lazy-rules
-                                autofocus
-                            />
-                        </q-item-section>
-                    </q-item>
-                </q-list>
-            </template>
-        </VnFilterPanel>
+        <TicketFilter data-key="TicketList" />
     </teleport-slot>
     <q-page class="q-pa-md">
         <paginate
diff --git a/src/pages/Ticket/TicketMain.vue b/src/pages/Ticket/TicketMain.vue
index fd50f1521..287beb852 100644
--- a/src/pages/Ticket/TicketMain.vue
+++ b/src/pages/Ticket/TicketMain.vue
@@ -6,7 +6,7 @@ const state = useState();
 </script>
 
 <template>
-    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
+    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="800">
         <q-scroll-area class="fit text-grey-8">
             <LeftMenu />
         </q-scroll-area>

From 08c60b3da066729af5633eb1c7d165e711be0203 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 21 Feb 2023 15:05:57 +0100
Subject: [PATCH 16/32] Changes

---
 src/components/ui/VnFilterPanel.vue      |  31 +++--
 src/components/ui/VnSearchbar.vue        |   8 ++
 src/composables/useArrayData.js          |   2 +-
 src/layouts/MainLayout.vue               |   2 +-
 src/pages/Customer/Card/CustomerCard.vue |  15 ++-
 src/pages/Customer/CustomerFilter.vue    | 153 +++++++++++++----------
 src/pages/Customer/CustomerList.vue      |  13 +-
 src/pages/Login/LoginMain.vue            |   1 +
 src/pages/Ticket/TicketFilter.vue        |   3 +-
 9 files changed, 144 insertions(+), 84 deletions(-)

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index e1e3c9719..29967d8c7 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -23,12 +23,21 @@ const userParams = ref({});
 onMounted(() => {
     const params = store.userParams;
     if (params) {
-        userParams.value = params;
+        userParams.value = Object.assign({}, params);
     }
 });
 
 async function search() {
     const params = userParams.value;
+    for (const param in params) {
+        if (params[param] === '' || params[param] === null) {
+            delete userParams.value[param];
+            delete store.userParams[param];
+        }
+    }
+
+    // if (Object.keys(params))
+
     await arrayData.addFilter({ params });
 }
 
@@ -64,7 +73,7 @@ async function remove(key) {
             removable
         >
             <slot name="tags" :tag="chip">
-                <div class="q-gutter-md">
+                <div class="q-gutter-x-xs">
                     <strong>{{ chip.label }}:</strong>
                     <span>"{{ chip.value }}"</span>
                 </div>
@@ -97,17 +106,17 @@ async function remove(key) {
             </q-item>
         </div>
         <q-separator />
-        <slot name="body" :params="userParams"></slot>
+        <slot name="body" :params="userParams" :search-fn="search"></slot>
     </q-form>
 </template>
 
 <i18n>
-    {
-        "en": {
-            "appliedFilters": "Applied filters"
-        },
-        "es": {
-            "appliedFilters": "Filtros aplicados"
-        }
+{
+    "en": {
+        "appliedFilters": "Applied filters"
+    },
+    "es": {
+        "appliedFilters": "Filtros aplicados"
     }
-    </i18n>
+}
+</i18n>
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index f380079d5..456fd5917 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -69,6 +69,14 @@ async function search() {
             <template #prepend>
                 <q-icon name="search" />
             </template>
+            <template #append>
+                <q-icon
+                    v-if="searchText !== ''"
+                    name="close"
+                    @click="searchText = ''"
+                    class="cursor-pointer"
+                />
+            </template>
         </q-input>
     </q-form>
 </template>
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 37d6febc7..b68a73f5e 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -123,7 +123,7 @@ export function useArrayData(key, userOptions) {
     }
 
     async function refresh() {
-        // TODO: Refresh
+        await fetch({ append: false });
     }
 
     function updateStateParams() {
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 8fc99d166..29fcfc3e9 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -16,7 +16,7 @@ const stateStore = useStateStore();
             v-model="stateStore.rightDrawer"
             side="right"
             :width="256"
-            :breakpoint="800"
+            :breakpoint="1000"
             :persistent="false"
         >
             <q-scroll-area class="fit text-grey-8">
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 8d6288fe5..ebeac4425 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
 import { useState } from 'src/composables/useState';
 import CustomerDescriptor from './CustomerDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
@@ -6,10 +7,11 @@ import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 const state = useState();
+const { t } = useI18n();
 </script>
 <template>
     <teleport-slot to="#searchbar">
-        <VnSearchbar data-key="CustomerList" />
+        <VnSearchbar data-key="CustomerList" :label="t('searchLabel')" />
     </teleport-slot>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit">
@@ -24,3 +26,14 @@ const state = useState();
         </q-page>
     </q-page-container>
 </template>
+
+<i18n>
+    {
+        "en": { 
+            "searchLabel": "Search by customer id or name"
+        },
+        "es": { 
+            "searchLabel": "Buscar por id o nombre del cliente"
+        }
+    }
+</i18n>
diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index dcc363487..5b44fceb6 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -1,8 +1,10 @@
 <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,
@@ -10,10 +12,10 @@ const props = defineProps({
     },
 });
 
-const provinces = ref([]);
-const workers = ref([]);
-const workersCopy = ref([]);
-const zones = ref([]);
+const provinces = ref();
+const workers = ref();
+const workersCopy = ref();
+const zones = ref();
 
 function setWorkers(data) {
     workers.value = data;
@@ -30,35 +32,12 @@ function setWorkers(data) {
         @on-fetch="setWorkers"
         auto-load
     />
-    <VnFilterPanel :data-key="props.dataKey">
-        <template #body="{ params }">
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #body="{ params, searchFn }">
             <q-list>
-                <!-- <q-item>
-                        <q-item-section>
-                            <q-input
-                                v-model="params.search"
-                                label="Search by id or name"
-                                class="full-width"
-                                lazy-rules
-                                autofocus
-                            />
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-btn
-                                label="Search"
-                                type="submit"
-                                color="primary"
-                                class="full-width"
-                                rounded
-                            />
-                        </q-item-section>
-                    </q-item>
-                    <q-separator /> -->
                 <q-item>
                     <q-item-section>
-                        <q-input label="Fiscal ID" v-model="params.fi" lazy-rules>
+                        <q-input :label="t('fi')" v-model="params.fi" lazy-rules>
                             <template #prepend>
                                 <q-icon name="badge" size="sm"></q-icon>
                             </template>
@@ -67,27 +46,30 @@ function setWorkers(data) {
                 </q-item>
                 <q-item>
                     <q-item-section>
-                        <q-input label="Name" v-model="params.name" lazy-rules />
+                        <q-input :label="t('name')" v-model="params.name" lazy-rules />
                     </q-item-section>
                 </q-item>
                 <q-item>
                     <q-item-section>
                         <q-input
-                            label="Social name"
+                            :label="t('socialName')"
                             v-model="params.socialName"
                             lazy-rules
                         />
                     </q-item-section>
                 </q-item>
                 <q-item>
-                    <q-item-section>
+                    <q-item-section v-if="!workers">
+                        <q-skeleton type="QInput" class="full-width" />
+                    </q-item-section>
+                    <q-item-section v-if="workers">
                         <q-select
                             v-model="params.salesPersonFk"
                             :options="workers"
                             option-value="id"
                             option-label="name"
                             emit-value
-                            label="Salesperson"
+                            :label="t('salesPersonFk')"
                             map-options
                             use-input
                             :input-debounce="0"
@@ -105,56 +87,91 @@ function setWorkers(data) {
                     </q-item-section>
                 </q-item>
                 <q-item>
-                    <q-item-section>
-                        <q-input label="Phone" v-model="params.phone" lazy-rules>
-                            <template #prepend>
-                                <q-icon name="phone" size="sm"></q-icon>
-                            </template>
-                        </q-input>
+                    <q-item-section v-if="!provinces">
+                        <q-skeleton type="QInput" class="full-width" />
                     </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-input label="Email" v-model="params.email" lazy-rules>
-                            <template #prepend>
-                                <q-icon name="email" size="sm"></q-icon>
-                            </template>
-                        </q-input>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
+                    <q-item-section v-if="provinces">
                         <q-select
                             label="Province"
                             v-model="params.provinceFk"
                             :options="provinces"
+                            @update:model-value="searchFn"
                             option-value="id"
                             option-label="name"
                             emit-value
                             map-options
                         />
                     </q-item-section>
+                </q-item>
+                <q-item class="q-mb-md">
                     <q-item-section>
                         <q-input label="City" v-model="params.city" lazy-rules />
                     </q-item-section>
                 </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-select
-                            label="Zone"
-                            v-model="params.zoneFk"
-                            :options="zones"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                        />
-                    </q-item-section>
-                    <q-item-section>
-                        <q-input label="Postcode" v-model="params.postcode" lazy-rules />
-                    </q-item-section>
-                </q-item>
+                <q-separator />
+                <q-expansion-item label="More options" expand-separator>
+                    <q-item>
+                        <q-item-section>
+                            <q-input label="Phone" v-model="params.phone" lazy-rules>
+                                <template #prepend>
+                                    <q-icon name="phone" size="sm"></q-icon>
+                                </template>
+                            </q-input>
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-input label="Email" v-model="params.email" lazy-rules>
+                                <template #prepend>
+                                    <q-icon name="email" size="sm"></q-icon>
+                                </template>
+                            </q-input>
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section v-if="!zones">
+                            <q-skeleton type="QInput" class="full-width" />
+                        </q-item-section>
+                        <q-item-section v-if="zones">
+                            <q-select
+                                label="Zone"
+                                v-model="params.zoneFk"
+                                :options="zones"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                map-options
+                            />
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-input
+                                label="Postcode"
+                                v-model="params.postcode"
+                                lazy-rules
+                            />
+                        </q-item-section>
+                    </q-item>
+                </q-expansion-item>
             </q-list>
         </template>
     </VnFilterPanel>
 </template>
+
+<i18n>
+{
+    "en": {
+        "fi": "FI",
+        "name": "Name",
+        "socialName": "Social Name",
+        "salesPersonFk": "Salesperson"
+    },
+    "es": {
+        "fi": "NIF",
+        "name": "Nombre",
+        "socialName": "Razón social",
+        "salesPersonFk": "Comercial"
+    }
+}
+</i18n>
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index ce06b0c9d..898d458b4 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -35,7 +35,7 @@ function viewSummary(id) {
 
 <template>
     <teleport-slot to="#searchbar">
-        <VnSearchbar data-key="CustomerList" label="Search by customer id or name" />
+        <VnSearchbar data-key="CustomerList" :label="t('searchLabel')" />
     </teleport-slot>
     <teleport-slot to="#rightPanel">
         <CustomerFilter data-key="CustomerList" />
@@ -126,3 +126,14 @@ function viewSummary(id) {
         </paginate>
     </q-page>
 </template>
+
+<i18n>
+    {
+        "en": { 
+            "searchLabel": "Search by customer id or name"
+        },
+        "es": { 
+            "searchLabel": "Buscar por id o nombre del cliente"
+        }
+    }
+</i18n>
diff --git a/src/pages/Login/LoginMain.vue b/src/pages/Login/LoginMain.vue
index 86d1c3170..11193d31a 100644
--- a/src/pages/Login/LoginMain.vue
+++ b/src/pages/Login/LoginMain.vue
@@ -138,6 +138,7 @@ async function onSubmit() {
                                 color="primary"
                                 class="full-width"
                                 rounded
+                                unelevated
                             />
                         </div>
                     </q-form>
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index 7a4849bbb..26469c286 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -41,7 +41,7 @@ function setWorkers(data) {
                 <span>"{{ tag.value }}"</span>
             </div>
         </template>
-        <template #body="{ params }">
+        <template #body="{ params, searchFn }">
             <q-list dense>
                 <q-item>
                     <q-item-section>
@@ -159,6 +159,7 @@ function setWorkers(data) {
                         <q-checkbox
                             v-model="params.myTeam"
                             label="My team"
+                            @update:model-value="searchFn()"
                             toggle-indeterminate
                         />
                     </q-item-section>

From 42cef8ff0b00a1a6bfc8fe06ba14abd93c77b1e0 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Thu, 23 Feb 2023 06:21:51 +0100
Subject: [PATCH 17/32] Updated translations

---
 src/boot/i18n.js                      |   1 +
 src/components/ui/VnFilterPanel.vue   | 158 ++++++----
 src/pages/Claim/ClaimFilter.vue       | 223 ++++++++++++++
 src/pages/Claim/ClaimList.vue         | 123 +++++---
 src/pages/Customer/CustomerFilter.vue |  88 +++++-
 src/pages/Ticket/TicketFilter.vue     | 425 +++++++++++++++-----------
 6 files changed, 725 insertions(+), 293 deletions(-)
 create mode 100644 src/pages/Claim/ClaimFilter.vue

diff --git a/src/boot/i18n.js b/src/boot/i18n.js
index e1492d3bb..837bad936 100644
--- a/src/boot/i18n.js
+++ b/src/boot/i18n.js
@@ -8,6 +8,7 @@ const i18n = createI18n({
     globalInjection: true,
     messages,
     missingWarn: false,
+    fallbackWarn: false,
     legacy: false,
 });
 
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 29967d8c7..b99598e10 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -16,6 +16,8 @@ const props = defineProps({
     },
 });
 
+const emit = defineEmits(['refresh', 'clear']);
+
 const arrayData = useArrayData(props.dataKey);
 const store = arrayData.store;
 const userParams = ref({});
@@ -36,11 +38,22 @@ async function search() {
         }
     }
 
-    // if (Object.keys(params))
-
     await arrayData.addFilter({ params });
 }
 
+async function reload() {
+    await arrayData.fetch({ append: false });
+    emit('refresh');
+}
+
+async function clearFilters() {
+    userParams.value = {};
+    await arrayData.applyFilter({ params: {} });
+    await reload();
+
+    emit('clear');
+}
+
 const tags = computed(() => {
     const params = [];
 
@@ -56,67 +69,104 @@ const tags = computed(() => {
 
 async function remove(key) {
     delete userParams.value[key];
+    delete store.userParams[key];
     await search();
 }
 </script>
 <template>
-    <div class="q-pa-sm truncate-chip-labels">
-        <span v-if="tags.length === 0">You didn't enter any filter</span>
-        <q-chip
-            v-for="chip of tags"
-            :key="chip.label"
-            @remove="remove(chip.label)"
-            icon="label"
-            color="primary"
-            class="text-dark"
-            size="sm"
-            removable
-        >
-            <slot name="tags" :tag="chip">
-                <div class="q-gutter-x-xs">
-                    <strong>{{ chip.label }}:</strong>
-                    <span>"{{ chip.value }}"</span>
-                </div>
-            </slot>
-        </q-chip>
-    </div>
-    <q-toolbar>
-        <q-item-label header class="q-pa-none text-uppercase" dense>
-            {{ t('appliedFilters') }}
-        </q-item-label>
-        <q-space />
-        <q-btn icon="clear_all" color="primary" size="sm" round flat dense />
-        <q-btn icon="refresh" color="primary" size="sm" round flat dense />
-    </q-toolbar>
     <q-form @submit="search" @keyup.enter="search">
-        <div v-show="props.searchButton">
-            <q-separator />
-            <q-item>
-                <q-item-section>
-                    <q-btn
-                        label="Search"
-                        type="submit"
-                        color="primary"
-                        class="full-width"
-                        icon="search"
-                        rounded
-                        dense
-                    />
+        <q-list dense>
+            <q-item class="q-mt-xs">
+                <q-item-section top>
+                    <q-item-label
+                        header
+                        lines="1"
+                        class="text-uppercase q-py-xs q-px-none"
+                    >
+                        {{ t('Applied filters') }}
+                    </q-item-label>
+                </q-item-section>
+                <q-item-section top side>
+                    <div class="q-gutter-xs">
+                        <q-btn
+                            @click="clearFilters"
+                            icon="filter_list_off"
+                            color="primary"
+                            size="sm"
+                            padding="none"
+                            round
+                            flat
+                            dense
+                        >
+                            <q-tooltip>{{ t('Remove filters') }}</q-tooltip>
+                        </q-btn>
+                        <q-btn
+                            @click="reload"
+                            icon="refresh"
+                            color="primary"
+                            size="sm"
+                            padding="none"
+                            round
+                            flat
+                            dense
+                        >
+                            <q-tooltip>{{ t('Refresh') }}</q-tooltip>
+                        </q-btn>
+                    </div>
                 </q-item-section>
             </q-item>
-        </div>
-        <q-separator />
-        <slot name="body" :params="userParams" :search-fn="search"></slot>
+            <q-item>
+                <div v-if="tags.length === 0" class="text-grey centered font-xs">
+                    {{ t(`You didn't enter any filter`) }}
+                </div>
+                <div>
+                    <q-chip
+                        v-for="chip of tags"
+                        :key="chip.label"
+                        @remove="remove(chip.label)"
+                        icon="label"
+                        color="primary"
+                        class="text-dark"
+                        size="sm"
+                        removable
+                    >
+                        <slot name="tags" :tag="chip">
+                            <div class="q-gutter-x-xs">
+                                <strong>{{ chip.label }}:</strong>
+                                <span>"{{ chip.value }}"</span>
+                            </div>
+                        </slot>
+                    </q-chip>
+                </div>
+            </q-item>
+            <q-separator />
+            <template v-if="props.searchButton">
+                <q-item>
+                    <q-item-section class="q-py-sm">
+                        <q-btn
+                            :label="t('Search')"
+                            type="submit"
+                            color="primary"
+                            class="full-width"
+                            icon="search"
+                            unelevated
+                            rounded
+                            dense
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-separator />
+            </template>
+            <slot name="body" :params="userParams" :search-fn="search"></slot>
+        </q-list>
     </q-form>
 </template>
 
 <i18n>
-{
-    "en": {
-        "appliedFilters": "Applied filters"
-    },
-    "es": {
-        "appliedFilters": "Filtros aplicados"
-    }
-}
+es: 
+  You didn't enter any filter: No has introducido ningún filtro
+  Applied filters: Filtros aplicados
+  Remove filters: Eliminar filtros
+  Refresh: Refrescar
+  Search: Buscar
 </i18n>
diff --git a/src/pages/Claim/ClaimFilter.vue b/src/pages/Claim/ClaimFilter.vue
new file mode 100644
index 000000000..a64ee7367
--- /dev/null
+++ b/src/pages/Claim/ClaimFilter.vue
@@ -0,0 +1,223 @@
+<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,
+    },
+});
+</script>
+
+<template>
+    <fetch-data
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="setWorkers"
+        auto-load
+    />
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>"{{ tag.value }}"</span>
+            </div>
+        </template>
+        <template #body="{ params, searchFn }">
+            <q-list>
+                <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('Name')" v-model="params.name" lazy-rules />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-input
+                            :label="t('Social Name')"
+                            v-model="params.socialName"
+                            lazy-rules
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section v-if="!workers">
+                        <q-skeleton type="QInput" class="full-width" />
+                    </q-item-section>
+                    <q-item-section v-if="workers">
+                        <q-select
+                            @update:model-value="searchFn()"
+                            :label="t('Salesperson')"
+                            v-model="params.salesPersonFk"
+                            :options="workers"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        >
+                            <template #prepend>
+                                <q-avatar color="orange" size="xs">
+                                    <q-img
+                                        v-if="params.salesPersonFk"
+                                        :src="`/api/Images/user/160x160/${params.salesPersonFk}/download?access_token=${token}`"
+                                        spinner-color="white"
+                                    />
+                                </q-avatar>
+                            </template>
+                        </q-select>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section v-if="!provinces">
+                        <q-skeleton type="QInput" class="full-width" />
+                    </q-item-section>
+                    <q-item-section v-if="provinces">
+                        <q-select
+                            @update:model-value="searchFn()"
+                            :label="t('Province')"
+                            v-model="params.provinceFk"
+                            :options="provinces"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item class="q-mb-md">
+                    <q-item-section>
+                        <q-input :label="t('City')" v-model="params.city" lazy-rules />
+                    </q-item-section>
+                </q-item>
+                <q-separator />
+                <q-expansion-item :label="t('More options')" expand-separator>
+                    <q-item>
+                        <q-item-section>
+                            <q-input
+                                :label="t('Phone')"
+                                v-model="params.phone"
+                                lazy-rules
+                            >
+                                <template #prepend>
+                                    <q-icon name="phone" size="sm"></q-icon>
+                                </template>
+                            </q-input>
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-input
+                                :label="t('Email')"
+                                v-model="params.email"
+                                lazy-rules
+                            >
+                                <template #prepend>
+                                    <q-icon name="email" size="sm"></q-icon>
+                                </template>
+                            </q-input>
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section v-if="!zones">
+                            <q-skeleton type="QInput" class="full-width" />
+                        </q-item-section>
+                        <q-item-section v-if="zones">
+                            <q-select
+                                @update:model-value="searchFn"
+                                :label="t('Zone')"
+                                v-model="params.zoneFk"
+                                :options="zones"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                map-options
+                            />
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-input
+                                :label="t('Postcode')"
+                                v-model="params.postcode"
+                                lazy-rules
+                            />
+                        </q-item-section>
+                    </q-item>
+                </q-expansion-item>
+            </q-list>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+  params:
+    fi: FI
+    name: Name
+    socialName: Social Name
+    salesPersonFk: Salesperson
+    provinceFk: Province
+    city: City
+    phone: Phone
+    email: Email
+    zoneFk: Zone
+    postcode: Postcode
+es:
+  params:
+    fi: NIF
+    name: Nombre
+    socialName: Razón Social
+    salesPersonFk: Comercial
+    provinceFk: Provincia
+    city: Ciudad
+    phone: Teléfono
+    email: Email
+    zoneFk: Zona
+    postcode: CP
+  FI: NIF
+  Name: Nombre
+  Social Name: Razón social
+  Salesperson: Comercial
+  Province: Provincia
+  City: Ciudad
+  More options: Más opciones
+  Phone: Teléfono
+  Email: Email
+  Zone: Zona
+  Postcode: Código postal
+</i18n>
+
+<!-- <i18n>
+{
+    "en": {
+        "fi": "Fiscal ID",
+        "name": "Name",
+        "socialName": "Social Name",
+        "salesPersonFk": "Salesperson",
+        "provinceFk": "Province",
+        "city": "City",
+        "zoneFk": "Zone",
+        "postcode": "Postcode"
+    },
+    "es": {
+        "fi": "NIF",
+        "name": "Nombre",
+        "socialName": "Razón social",
+        "salesPersonFk": "Comercial"
+    }
+}
+</i18n> -->
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 9ab22117e..4373b0354 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -1,38 +1,31 @@
 <script setup>
+import { onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
-import Paginate from 'src/components/PaginateData.vue';
+import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters/index';
+
+import Paginate from 'src/components/PaginateData.vue';
 import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
 import CustomerDescriptorPopover from 'src/pages/Customer/Card/CustomerDescriptorPopover.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import TeleportSlot from 'components/ui/TeleportSlot.vue';
+import ClaimFilter from './ClaimFilter.vue';
 
+const state = useStateStore();
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
 
-const filter = {
-    include: [
-        {
-            relation: 'client',
-        },
-        {
-            relation: 'claimState',
-        },
-        {
-            relation: 'worker',
-            scope: {
-                include: { relation: 'user' },
-            },
-        },
-    ],
-};
+onMounted(() => state.toggleRightDrawer());
+onUnmounted(() => state.toggleRightDrawer());
 
-function stateColor(code) {
-    if (code === 'pending') return 'green';
-    if (code === 'managed') return 'orange';
-    if (code === 'resolved') return 'red';
-}
+// function stateColor(code) {
+//     if (code === 'pending') return 'green';
+//     if (code === 'managed') return 'orange';
+//     if (code === 'resolved') return 'red';
+// }
 
 function navigate(id) {
     router.push({ path: `/claim/${id}` });
@@ -49,14 +42,29 @@ function viewSummary(id) {
 </script>
 
 <template>
+    <teleport-slot to="#searchbar">
+        <VnSearchbar data-key="ClaimList" :label="t('Search by claim id or name')" />
+    </teleport-slot>
+    <teleport-slot to="#rightPanel">
+        <ClaimFilter data-key="ClaimList" />
+    </teleport-slot>
     <q-page class="q-pa-md">
-        <paginate url="/Claims" :filter="filter" sort-by="id DESC" auto-load>
+        <paginate
+            data-key="ClaimList"
+            url="Claims/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
+                        class="q-pa-none items-start cursor-pointer q-hoverable"
+                        v-ripple
+                        clickable
+                    >
                         <q-item-section class="q-pa-md" @click="navigate(row.id)">
                             <div class="text-h6 link">
-                                {{ row.client.name }}
+                                {{ row.clientName }}
                                 <q-popup-proxy>
                                     <customer-descriptor-popover :customer="row.client" />
                                 </q-popup-proxy>
@@ -65,27 +73,40 @@ function viewSummary(id) {
                             <q-list>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('claim.list.customer') }}</q-item-label>
-                                        <q-item-label>{{ row.client.name }}</q-item-label>
+                                        <q-item-label caption>{{
+                                            t('claim.list.customer')
+                                        }}</q-item-label>
+                                        <q-item-label>{{ row.clientName }}</q-item-label>
                                     </q-item-section>
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('claim.list.assignedTo') }}</q-item-label>
-                                        <q-item-label>{{ row.worker.user.name }}</q-item-label>
+                                        <q-item-label caption>{{
+                                            t('claim.list.assignedTo')
+                                        }}</q-item-label>
+                                        <q-item-label>{{ row.workerName }}</q-item-label>
                                     </q-item-section>
                                 </q-item>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('claim.list.created') }}</q-item-label>
-                                        <q-item-label>{{ toDate(row.created) }}</q-item-label>
+                                        <q-item-label caption>{{
+                                            t('claim.list.created')
+                                        }}</q-item-label>
+                                        <q-item-label>{{
+                                            toDate(row.created)
+                                        }}</q-item-label>
                                     </q-item-section>
-                                    <q-item-section>
-                                        <q-item-label caption>{{ t('claim.list.state') }}</q-item-label>
+                                    <!-- <q-item-section>
+                                        <q-item-label caption>{{
+                                            t('claim.list.state')
+                                        }}</q-item-label>
                                         <q-item-label>
-                                            <q-chip :color="stateColor(row.claimState.code)" dense>
+                                            <q-chip
+                                                :color="stateColor(row.claimState.code)"
+                                                dense
+                                            >
                                                 {{ row.claimState.description }}
                                             </q-chip>
                                         </q-item-label>
-                                    </q-item-section>
+                                    </q-item-section> -->
                                 </q-item>
                             </q-list>
                         </q-item-section>
@@ -111,14 +132,32 @@ function viewSummary(id) {
                                 </q-menu>
                             </q-btn> -->
 
-                            <q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(row.id)">
-                                <q-tooltip>{{ t('components.smartCard.openCard') }}</q-tooltip>
+                            <q-btn
+                                flat
+                                round
+                                color="orange"
+                                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
+                                flat
+                                round
+                                color="grey-7"
+                                icon="preview"
+                                @click="viewSummary(row.id)"
+                            >
+                                <q-tooltip>{{
+                                    t('components.smartCard.openSummary')
+                                }}</q-tooltip>
                             </q-btn>
                             <q-btn flat round color="grey-7" icon="vn:client">
-                                <q-tooltip>{{ t('components.smartCard.viewDescription') }}</q-tooltip>
+                                <q-tooltip>{{
+                                    t('components.smartCard.viewDescription')
+                                }}</q-tooltip>
                                 <q-popup-proxy>
                                     <customer-descriptor-popover :customer="row.client" />
                                 </q-popup-proxy>
@@ -130,3 +169,7 @@ function viewSummary(id) {
         </paginate>
     </q-page>
 </template>
+<i18n>
+es:
+  Search by claim id or name: Buscar por id o nombre de la reclamación
+</i18n>
diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index 5b44fceb6..6f0b92a1b 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -33,11 +33,17 @@ function setWorkers(data) {
         auto-load
     />
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>"{{ tag.value }}"</span>
+            </div>
+        </template>
         <template #body="{ params, searchFn }">
             <q-list>
                 <q-item>
                     <q-item-section>
-                        <q-input :label="t('fi')" v-model="params.fi" lazy-rules>
+                        <q-input :label="t('FI')" v-model="params.fi" lazy-rules>
                             <template #prepend>
                                 <q-icon name="badge" size="sm"></q-icon>
                             </template>
@@ -46,13 +52,13 @@ function setWorkers(data) {
                 </q-item>
                 <q-item>
                     <q-item-section>
-                        <q-input :label="t('name')" v-model="params.name" lazy-rules />
+                        <q-input :label="t('Name')" v-model="params.name" lazy-rules />
                     </q-item-section>
                 </q-item>
                 <q-item>
                     <q-item-section>
                         <q-input
-                            :label="t('socialName')"
+                            :label="t('Social Name')"
                             v-model="params.socialName"
                             lazy-rules
                         />
@@ -64,12 +70,13 @@ function setWorkers(data) {
                     </q-item-section>
                     <q-item-section v-if="workers">
                         <q-select
+                            @update:model-value="searchFn()"
+                            :label="t('Salesperson')"
                             v-model="params.salesPersonFk"
                             :options="workers"
                             option-value="id"
                             option-label="name"
                             emit-value
-                            :label="t('salesPersonFk')"
                             map-options
                             use-input
                             :input-debounce="0"
@@ -92,10 +99,10 @@ function setWorkers(data) {
                     </q-item-section>
                     <q-item-section v-if="provinces">
                         <q-select
-                            label="Province"
+                            @update:model-value="searchFn()"
+                            :label="t('Province')"
                             v-model="params.provinceFk"
                             :options="provinces"
-                            @update:model-value="searchFn"
                             option-value="id"
                             option-label="name"
                             emit-value
@@ -105,14 +112,18 @@ function setWorkers(data) {
                 </q-item>
                 <q-item class="q-mb-md">
                     <q-item-section>
-                        <q-input label="City" v-model="params.city" lazy-rules />
+                        <q-input :label="t('City')" v-model="params.city" lazy-rules />
                     </q-item-section>
                 </q-item>
                 <q-separator />
-                <q-expansion-item label="More options" expand-separator>
+                <q-expansion-item :label="t('More options')" expand-separator>
                     <q-item>
                         <q-item-section>
-                            <q-input label="Phone" v-model="params.phone" lazy-rules>
+                            <q-input
+                                :label="t('Phone')"
+                                v-model="params.phone"
+                                lazy-rules
+                            >
                                 <template #prepend>
                                     <q-icon name="phone" size="sm"></q-icon>
                                 </template>
@@ -121,7 +132,11 @@ function setWorkers(data) {
                     </q-item>
                     <q-item>
                         <q-item-section>
-                            <q-input label="Email" v-model="params.email" lazy-rules>
+                            <q-input
+                                :label="t('Email')"
+                                v-model="params.email"
+                                lazy-rules
+                            >
                                 <template #prepend>
                                     <q-icon name="email" size="sm"></q-icon>
                                 </template>
@@ -134,7 +149,8 @@ function setWorkers(data) {
                         </q-item-section>
                         <q-item-section v-if="zones">
                             <q-select
-                                label="Zone"
+                                @update:model-value="searchFn"
+                                :label="t('Zone')"
                                 v-model="params.zoneFk"
                                 :options="zones"
                                 option-value="id"
@@ -147,7 +163,7 @@ function setWorkers(data) {
                     <q-item>
                         <q-item-section>
                             <q-input
-                                label="Postcode"
+                                :label="t('Postcode')"
                                 v-model="params.postcode"
                                 lazy-rules
                             />
@@ -160,12 +176,54 @@ function setWorkers(data) {
 </template>
 
 <i18n>
+en:
+  params:
+    fi: FI
+    name: Name
+    socialName: Social Name
+    salesPersonFk: Salesperson
+    provinceFk: Province
+    city: City
+    phone: Phone
+    email: Email
+    zoneFk: Zone
+    postcode: Postcode
+es:
+  params:
+    fi: NIF
+    name: Nombre
+    socialName: Razón Social
+    salesPersonFk: Comercial
+    provinceFk: Provincia
+    city: Ciudad
+    phone: Teléfono
+    email: Email
+    zoneFk: Zona
+    postcode: CP
+  FI: NIF
+  Name: Nombre
+  Social Name: Razón social
+  Salesperson: Comercial
+  Province: Provincia
+  City: Ciudad
+  More options: Más opciones
+  Phone: Teléfono
+  Email: Email
+  Zone: Zona
+  Postcode: Código postal
+</i18n>
+
+<!-- <i18n>
 {
     "en": {
-        "fi": "FI",
+        "fi": "Fiscal ID",
         "name": "Name",
         "socialName": "Social Name",
-        "salesPersonFk": "Salesperson"
+        "salesPersonFk": "Salesperson",
+        "provinceFk": "Province",
+        "city": "City",
+        "zoneFk": "Zone",
+        "postcode": "Postcode"
     },
     "es": {
         "fi": "NIF",
@@ -174,4 +232,4 @@ function setWorkers(data) {
         "salesPersonFk": "Comercial"
     }
 }
-</i18n>
+</i18n> -->
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index 26469c286..63ba0ba82 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -23,6 +23,15 @@ function setWorkers(data) {
     workers.value = data;
     workersCopy.value = data;
 }
+
+function formatValue(value) {
+    console.log(value instanceof Boolean);
+    if (typeof value === 'boolean') {
+        return value ? t('Yes') : t('No');
+    }
+    //if (value)
+    return `"${value}"`;
+}
 </script>
 
 <template>
@@ -37,111 +46,180 @@ function setWorkers(data) {
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag }">
             <div class="q-gutter-x-xs">
-                <strong>{{ t(tag.label) }}: </strong>
-                <span>"{{ tag.value }}"</span>
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatValue(tag.value) }}</span>
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <q-list dense>
-                <q-item>
-                    <q-item-section>
-                        <q-input
-                            v-model="params.clientFk"
-                            label="Customer ID"
-                            lazy-rules
-                            autofocus
-                        />
-                    </q-item-section>
-                    <q-item-section>
-                        <q-input v-model="params.orderFk" label="Order ID" lazy-rules />
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-input
-                            v-model="params.dateFrom"
-                            label="From"
-                            autofocus
-                            readonly
-                        >
-                            <template #append>
-                                <q-icon name="event" class="cursor-pointer">
-                                    <q-popup-proxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <q-date v-model="params.dateFrom">
-                                            <div class="row items-center justify-end">
-                                                <q-btn
-                                                    v-close-popup
-                                                    label="Close"
-                                                    color="primary"
-                                                    flat
-                                                />
-                                            </div>
-                                        </q-date>
-                                    </q-popup-proxy>
-                                </q-icon>
-                            </template>
-                        </q-input>
-                    </q-item-section>
-                    <q-item-section>
-                        <q-input v-model="params.dateTo" label="To" autofocus readonly>
-                            <template #append>
-                                <q-icon name="event" class="cursor-pointer">
-                                    <q-popup-proxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <q-date v-model="params.dateTo">
-                                            <div class="row items-center justify-end">
-                                                <q-btn
-                                                    v-close-popup
-                                                    label="Close"
-                                                    color="primary"
-                                                    flat
-                                                />
-                                            </div>
-                                        </q-date>
-                                    </q-popup-proxy>
-                                </q-icon>
-                            </template>
-                        </q-input>
-                    </q-item-section>
-                </q-item>
+            <q-item>
+                <q-item-section>
+                    <q-input
+                        v-model="params.clientFk"
+                        :label="t('Customer ID')"
+                        lazy-rules
+                        autofocus
+                    />
+                </q-item-section>
+                <q-item-section>
+                    <q-input v-model="params.orderFk" :label="t('Order ID')" lazy-rules />
+                </q-item-section>
+            </q-item>
+            <q-item>
+                <q-item-section>
+                    <q-input
+                        v-model="params.dateFrom"
+                        :label="t('From')"
+                        autofocus
+                        readonly
+                    >
+                        <template #append>
+                            <q-icon name="event" class="cursor-pointer">
+                                <q-popup-proxy
+                                    cover
+                                    transition-show="scale"
+                                    transition-hide="scale"
+                                >
+                                    <q-date v-model="params.dateFrom">
+                                        <div class="row items-center justify-end">
+                                            <q-btn
+                                                v-close-popup
+                                                label="Close"
+                                                color="primary"
+                                                flat
+                                            />
+                                        </div>
+                                    </q-date>
+                                </q-popup-proxy>
+                            </q-icon>
+                        </template>
+                    </q-input>
+                </q-item-section>
+                <q-item-section>
+                    <q-input v-model="params.dateTo" :label="t('To')" autofocus readonly>
+                        <template #append>
+                            <q-icon name="event" class="cursor-pointer">
+                                <q-popup-proxy
+                                    cover
+                                    transition-show="scale"
+                                    transition-hide="scale"
+                                >
+                                    <q-date v-model="params.dateTo">
+                                        <div class="row items-center justify-end">
+                                            <q-btn
+                                                v-close-popup
+                                                label="Close"
+                                                color="primary"
+                                                flat
+                                            />
+                                        </div>
+                                    </q-date>
+                                </q-popup-proxy>
+                            </q-icon>
+                        </template>
+                    </q-input>
+                </q-item-section>
+            </q-item>
+            <q-item>
+                <q-item-section>
+                    <q-select
+                        v-model="params.salesPersonFk"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        :label="t('Salesperson')"
+                        map-options
+                        use-input
+                        :input-debounce="0"
+                    >
+                        <template #prepend>
+                            <q-avatar color="orange" size="xs">
+                                <q-img
+                                    v-if="params.salesPersonFk"
+                                    :src="`/api/Images/user/160x160/${params.salesPersonFk}/download?access_token=${token}`"
+                                    spinner-color="white"
+                                />
+                            </q-avatar>
+                        </template>
+                    </q-select>
+                </q-item-section>
+            </q-item>
+            <q-item>
+                <q-item-section>
+                    <q-select
+                        :label="t('State')"
+                        v-model="params.stateFk"
+                        :options="states"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                    />
+                </q-item-section>
+            </q-item>
+            <q-item>
+                <q-item-section>
+                    <q-input
+                        v-model="params.refFk"
+                        :label="t('Invoice Out')"
+                        lazy-rules
+                    />
+                </q-item-section>
+            </q-item>
+            <q-item>
+                <q-item-section>
+                    <q-checkbox
+                        v-model="params.myTeam"
+                        @update:model-value="searchFn()"
+                        :label="t('My team')"
+                        toggle-indeterminate
+                    />
+                </q-item-section>
+                <q-item-section>
+                    <q-checkbox
+                        v-model="params.pending"
+                        @update:model-value="searchFn()"
+                        :label="t('Pending')"
+                        toggle-indeterminate
+                    />
+                </q-item-section>
+            </q-item>
+            <q-item>
+                <q-item-section>
+                    <q-checkbox
+                        v-model="params.hasInvoice"
+                        @update:model-value="searchFn()"
+                        :label="t('Invoiced')"
+                        toggle-indeterminate
+                    />
+                </q-item-section>
+                <q-item-section>
+                    <q-checkbox
+                        v-model="params.hasRoute"
+                        @update:model-value="searchFn()"
+                        :label="t('Routed')"
+                        toggle-indeterminate
+                    />
+                </q-item-section>
+            </q-item>
+            <q-item>
+                <q-item-section>
+                    <q-checkbox
+                        v-model="params.problems"
+                        @update:model-value="searchFn()"
+                        :label="t('With problems')"
+                        toggle-indeterminate
+                    />
+                </q-item-section>
+            </q-item>
+            <q-separator />
+            <q-expansion-item :label="t('More options')" expand-separator>
                 <q-item>
                     <q-item-section>
                         <q-select
-                            v-model="params.salesPersonFk"
-                            :options="workers"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            label="Salesperson"
-                            map-options
-                            use-input
-                            :input-debounce="0"
-                        >
-                            <template #prepend>
-                                <q-avatar color="orange" size="xs">
-                                    <q-img
-                                        v-if="params.salesPersonFk"
-                                        :src="`/api/Images/user/160x160/${params.salesPersonFk}/download?access_token=${token}`"
-                                        spinner-color="white"
-                                    />
-                                </q-avatar>
-                            </template>
-                        </q-select>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-select
-                            label="State"
-                            v-model="params.stateFk"
-                            :options="states"
+                            :label="t('Province')"
+                            v-model="params.provinceFk"
+                            :options="provinces"
                             option-value="id"
                             option-label="name"
                             emit-value
@@ -151,112 +229,91 @@ function setWorkers(data) {
                 </q-item>
                 <q-item>
                     <q-item-section>
-                        <q-input v-model="params.refFk" label="Invoice Out" lazy-rules />
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-checkbox
-                            v-model="params.myTeam"
-                            label="My team"
-                            @update:model-value="searchFn()"
-                            toggle-indeterminate
-                        />
-                    </q-item-section>
-                    <q-item-section>
-                        <q-checkbox
-                            v-model="params.problems"
-                            label="Has problems"
-                            toggle-indeterminate
+                        <q-select
+                            :label="t('Agency')"
+                            v-model="params.agencyModeFk"
+                            :options="agencies"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
                         />
                     </q-item-section>
                 </q-item>
                 <q-item>
                     <q-item-section>
-                        <q-checkbox
-                            v-model="params.pending"
-                            label="Pending"
-                            toggle-indeterminate
-                        />
-                    </q-item-section>
-
-                    <q-item-section>
-                        <q-checkbox
-                            v-model="params.hasRoute"
-                            label="Has route"
-                            toggle-indeterminate
+                        <q-select
+                            :label="t('Warehouse')"
+                            v-model="params.warehouseFk"
+                            :options="warehouses"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
                         />
                     </q-item-section>
                 </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-checkbox
-                            v-model="params.hasInvoice"
-                            label="With invoice"
-                            toggle-indeterminate
-                        />
-                    </q-item-section>
-                </q-item>
-                <q-separator />
-                <q-expansion-item label="More options" expand-separator>
-                    <q-item>
-                        <q-item-section>
-                            <q-select
-                                label="Province"
-                                v-model="params.provinceFk"
-                                :options="provinces"
-                                option-value="id"
-                                option-label="name"
-                                emit-value
-                                map-options
-                            />
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-select
-                                label="Agency"
-                                v-model="params.agencyModeFk"
-                                :options="agencies"
-                                option-value="id"
-                                option-label="name"
-                                emit-value
-                                map-options
-                            />
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-select
-                                label="Warehouse"
-                                v-model="params.warehouseFk"
-                                :options="warehouses"
-                                option-value="id"
-                                option-label="name"
-                                emit-value
-                                map-options
-                            />
-                        </q-item-section>
-                    </q-item>
-                </q-expansion-item>
-            </q-list>
+            </q-expansion-item>
         </template>
     </VnFilterPanel>
 </template>
 
 <i18n>
+en:
+    params:
+        search: Contains
+es:
+  params:
+    search: Contiene
+    clientFk: Cliente
+    orderFK: Pedido
+    dateFrom: Desde
+    dateTo: Hasta
+    salesPersonFk: Comercial
+    stateFk: Estado
+    refFk: Ref. Factura
+    myTeam: Mi equipo
+    pending: Pendiente
+    hasInvoice: Facturado
+    hasRoute: Enrutado
+  Customer ID: ID Cliente
+  Order ID: ID Pedido
+  From: Desde
+  To: Hasta
+  Salesperson: Comercial
+  State: Estado
+  Invoice Out: Ref. Factura
+  My team: Mi equipo
+  Pending: Pendiente
+  With problems: Con problemas
+  Invoiced: Facturado
+  Routed: Enrutado
+  More options: Más opciones
+  Province: Provincia
+  Agency: Agencia
+  Warehouse: Almacén
+
+  Yes: Si
+  No: No
+</i18n>
+
+<!-- <i18n>
 {
     "en": {
         "search": "Contains",
-        "clientFk": 'Client',
+        "clientFk": 'Customer',
+        "orderFk": 'Order',
         "dateFrom": 'From',
-        "dateTo": 'To'
+        "dateTo": 'To',
+        "salesPersonFk": "Sales Person"
     },
     "es": {
         "search": "Contiene",
         "clientFk": 'Cliente',
+        "orderFk": 'Pedido',
         "dateFrom": 'Desde',
-        "dateTo": 'Hasta' 
+        "dateTo": 'Hasta',
+        "salesPersonFk": "Comercial"
     }
 }
-</i18n>
+</i18n> -->

From 48c4eccc0822465870e27d1eeb25dc06bab245f9 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Thu, 23 Feb 2023 15:01:40 +0100
Subject: [PATCH 18/32] Translations & fixes

---
 src/components/ui/VnFilterPanel.vue      | 25 +++++--
 src/components/ui/VnSearchbar.vue        |  2 +-
 src/composables/useArrayData.js          | 49 +++++++++-----
 src/filters/toDate.js                    | 10 ++-
 src/pages/Customer/Card/CustomerCard.vue | 15 ++---
 src/pages/Customer/CustomerFilter.vue    | 68 ++++++++++---------
 src/pages/Customer/CustomerList.vue      | 33 +++++----
 src/pages/Ticket/Card/TicketCard.vue     |  9 ++-
 src/pages/Ticket/TicketFilter.vue        | 85 ++++++++++++++----------
 src/pages/Ticket/TicketList.vue          |  7 +-
 10 files changed, 178 insertions(+), 125 deletions(-)

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index b99598e10..726956772 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -29,6 +29,7 @@ onMounted(() => {
     }
 });
 
+const isLoading = ref(false);
 async function search() {
     const params = userParams.value;
     for (const param in params) {
@@ -38,18 +39,23 @@ async function search() {
         }
     }
 
+    isLoading.value = true;
     await arrayData.addFilter({ params });
+    isLoading.value = false;
 }
 
 async function reload() {
+    isLoading.value = true;
     await arrayData.fetch({ append: false });
+    isLoading.value = false;
     emit('refresh');
 }
 
 async function clearFilters() {
     userParams.value = {};
+    isLoading.value = true;
     await arrayData.applyFilter({ params: {} });
-    await reload();
+    isLoading.value = false;
 
     emit('clear');
 }
@@ -74,7 +80,7 @@ async function remove(key) {
 }
 </script>
 <template>
-    <q-form @submit="search" @keyup.enter="search">
+    <q-form @submit="search">
         <q-list dense>
             <q-item class="q-mt-xs">
                 <q-item-section top>
@@ -160,13 +166,18 @@ async function remove(key) {
             <slot name="body" :params="userParams" :search-fn="search"></slot>
         </q-list>
     </q-form>
+    <q-inner-loading
+        :showing="isLoading"
+        :label="t('globals.pleaseWait')"
+        color="primary"
+    />
 </template>
 
 <i18n>
 es: 
-  You didn't enter any filter: No has introducido ningún filtro
-  Applied filters: Filtros aplicados
-  Remove filters: Eliminar filtros
-  Refresh: Refrescar
-  Search: Buscar
+    You didn't enter any filter: No has introducido ningún filtro
+    Applied filters: Filtros aplicados
+    Remove filters: Eliminar filtros
+    Refresh: Refrescar
+    Search: Buscar
 </i18n>
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 456fd5917..57a5e2c04 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -24,7 +24,7 @@ const router = useRouter();
 const route = useRoute();
 const arrayData = useArrayData(props.dataKey);
 const store = arrayData.store;
-const searchText = ref();
+const searchText = ref('');
 
 onMounted(() => {
     const params = store.userParams;
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index b68a73f5e..b8954702a 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -16,6 +16,7 @@ export function useArrayData(key, userOptions) {
     const hasMoreData = ref(false);
     const router = useRouter();
     const route = useRoute();
+    let canceller = null;
 
     const page = ref(1);
 
@@ -48,6 +49,9 @@ export function useArrayData(key, userOptions) {
     async function fetch({ append = false }) {
         if (!store.url) return;
 
+        cancelRequest();
+        canceller = new AbortController();
+
         const filter = {
             order: store.order,
             limit: store.limit,
@@ -65,7 +69,10 @@ export function useArrayData(key, userOptions) {
 
         Object.assign(params, store.userParams);
 
-        const response = await axios.get(store.url, { params });
+        const response = await axios.get(store.url, {
+            signal: canceller.signal,
+            params,
+        });
 
         const { limit } = filter;
 
@@ -80,25 +87,34 @@ export function useArrayData(key, userOptions) {
 
             updateStateParams();
         }
+
+        canceller = null;
     }
 
-    async function request({ userFilter }) {
-        if (!store.url) return;
-
-        const filter = {
-            order: store.order,
-            limit: store.limit,
-            skip: store.skip,
-        };
-
-        Object.assign(filter, userFilter);
-
-        const requestOptions = { params: { filter: filter } };
-        const response = await axios.get(store.url, requestOptions);
-
-        return response.data;
+    function cancelRequest() {
+        if (canceller) {
+            canceller.abort();
+            canceller = null;
+        }
     }
 
+    // async function request({ userFilter }) {
+    //     if (!store.url) return;
+
+    //     const filter = {
+    //         order: store.order,
+    //         limit: store.limit,
+    //         skip: store.skip,
+    //     };
+
+    //     Object.assign(filter, userFilter);
+
+    //     const requestOptions = { params: { filter: filter } };
+    //     const response = await axios.get(store.url, requestOptions);
+
+    //     return response.data;
+    // }
+
     async function applyFilter({ filter, params }) {
         if (filter) store.userFilter = filter;
         if (params) store.userParams = Object.assign({}, params);
@@ -145,7 +161,6 @@ export function useArrayData(key, userOptions) {
         applyFilter,
         addFilter,
         refresh,
-        request,
         loadMore,
         store,
         hasMoreData,
diff --git a/src/filters/toDate.js b/src/filters/toDate.js
index 932c0557e..6f578bc4c 100644
--- a/src/filters/toDate.js
+++ b/src/filters/toDate.js
@@ -3,10 +3,14 @@ import { useI18n } from 'vue-i18n';
 export default function (value, options = {}) {
     if (!value) return;
 
-    if (!options.dateStyle) options.dateStyle = 'short';
+    if (!options.dateStyle) {
+        options.day = '2-digit';
+        options.month = '2-digit';
+        options.year = 'numeric';
+    }
 
     const { locale } = useI18n();
     const date = new Date(value);
 
-    return new Intl.DateTimeFormat(locale.value, options).format(date)
-}
\ No newline at end of file
+    return new Intl.DateTimeFormat(locale.value, options).format(date);
+}
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index ebeac4425..9cc9cafb8 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -11,7 +11,10 @@ const { t } = useI18n();
 </script>
 <template>
     <teleport-slot to="#searchbar">
-        <VnSearchbar data-key="CustomerList" :label="t('searchLabel')" />
+        <VnSearchbar
+            data-key="CustomerList"
+            :label="t('Search by customer id or name')"
+        />
     </teleport-slot>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit">
@@ -28,12 +31,6 @@ const { t } = useI18n();
 </template>
 
 <i18n>
-    {
-        "en": { 
-            "searchLabel": "Search by customer id or name"
-        },
-        "es": { 
-            "searchLabel": "Buscar por id o nombre del cliente"
-        }
-    }
+es:
+    Search by customer id or name: Buscar por id o nombre del cliente
 </i18n>
diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index 6f0b92a1b..dc2e710e7 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -177,40 +177,42 @@ function setWorkers(data) {
 
 <i18n>
 en:
-  params:
-    fi: FI
-    name: Name
-    socialName: Social Name
-    salesPersonFk: Salesperson
-    provinceFk: Province
-    city: City
-    phone: Phone
-    email: Email
-    zoneFk: Zone
-    postcode: Postcode
+    params:
+        search: Contains
+        fi: FI
+        name: Name
+        socialName: Social Name
+        salesPersonFk: Salesperson
+        provinceFk: Province
+        city: City
+        phone: Phone
+        email: Email
+        zoneFk: Zone
+        postcode: Postcode
 es:
-  params:
-    fi: NIF
-    name: Nombre
-    socialName: Razón Social
-    salesPersonFk: Comercial
-    provinceFk: Provincia
-    city: Ciudad
-    phone: Teléfono
-    email: Email
-    zoneFk: Zona
-    postcode: CP
-  FI: NIF
-  Name: Nombre
-  Social Name: Razón social
-  Salesperson: Comercial
-  Province: Provincia
-  City: Ciudad
-  More options: Más opciones
-  Phone: Teléfono
-  Email: Email
-  Zone: Zona
-  Postcode: Código postal
+    params:
+        search: Contiene
+        fi: NIF
+        name: Nombre
+        socialName: Razón Social
+        salesPersonFk: Comercial
+        provinceFk: Provincia
+        city: Ciudad
+        phone: Teléfono
+        email: Email
+        zoneFk: Zona
+        postcode: CP
+    FI: NIF
+    Name: Nombre
+    Social Name: Razón social
+    Salesperson: Comercial
+    Province: Provincia
+    City: Ciudad
+    More options: Más opciones
+    Phone: Teléfono
+    Email: Email
+    Zone: Zona
+    Postcode: Código postal
 </i18n>
 
 <!-- <i18n>
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 898d458b4..d7ace041c 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -35,7 +35,10 @@ function viewSummary(id) {
 
 <template>
     <teleport-slot to="#searchbar">
-        <VnSearchbar data-key="CustomerList" :label="t('searchLabel')" />
+        <VnSearchbar
+            data-key="CustomerList"
+            :label="t('Search by customer id or name')"
+        />
     </teleport-slot>
     <teleport-slot to="#rightPanel">
         <CustomerFilter data-key="CustomerList" />
@@ -64,9 +67,9 @@ function viewSummary(id) {
                                 </q-item>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{
-                                            t('customer.list.phone')
-                                        }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('customer.list.phone') }}
+                                        </q-item-label>
                                         <q-item-label>{{ row.phone }}</q-item-label>
                                     </q-item-section>
                                 </q-item>
@@ -101,9 +104,9 @@ function viewSummary(id) {
                                 icon="arrow_circle_right"
                                 @click="navigate(row.id)"
                             >
-                                <q-tooltip>{{
-                                    t('components.smartCard.openCard')
-                                }}</q-tooltip>
+                                <q-tooltip>
+                                    {{ t('components.smartCard.openCard') }}
+                                </q-tooltip>
                             </q-btn>
                             <q-btn
                                 flat
@@ -112,9 +115,9 @@ function viewSummary(id) {
                                 icon="preview"
                                 @click="viewSummary(row.id)"
                             >
-                                <q-tooltip>{{
-                                    t('components.smartCard.openSummary')
-                                }}</q-tooltip>
+                                <q-tooltip>
+                                    {{ t('components.smartCard.openSummary') }}
+                                </q-tooltip>
                             </q-btn>
                             <!-- <q-btn flat round color="grey-7" icon="vn:ticket">
                                 <q-tooltip>{{ t('customer.list.customerOrders') }}</q-tooltip>
@@ -128,12 +131,6 @@ function viewSummary(id) {
 </template>
 
 <i18n>
-    {
-        "en": { 
-            "searchLabel": "Search by customer id or name"
-        },
-        "es": { 
-            "searchLabel": "Buscar por id o nombre del cliente"
-        }
-    }
+es:
+    Search by customer id or name: Buscar por id o nombre del cliente
 </i18n>
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 6992b2406..d5beb673a 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
 import { useState } from 'src/composables/useState';
 import TicketDescriptor from './TicketDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
@@ -6,10 +7,11 @@ import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 const state = useState();
+const { t } = useI18n();
 </script>
 <template>
     <teleport-slot to="#searchbar">
-        <VnSearchbar data-key="TicketList" />
+        <VnSearchbar data-key="TicketList" :label="t('Search by ticket id or alias')" />
     </teleport-slot>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit">
@@ -53,3 +55,8 @@ const state = useState();
     }
 }
 </style>
+
+<i18n>
+es:
+    Search by ticket id or alias: Buscar por id o nombre del ticket
+</i18n>
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index 63ba0ba82..380480274 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import toDate from 'filters/toDate';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -25,11 +26,15 @@ function setWorkers(data) {
 }
 
 function formatValue(value) {
-    console.log(value instanceof Boolean);
+    console.log(typeof value);
     if (typeof value === 'boolean') {
         return value ? t('Yes') : t('No');
     }
-    //if (value)
+
+    if (isNaN(value) && !isNaN(Date.parse(value))) {
+        return toDate(value);
+    }
+
     return `"${value}"`;
 }
 </script>
@@ -161,7 +166,7 @@ function formatValue(value) {
                 <q-item-section>
                     <q-input
                         v-model="params.refFk"
-                        :label="t('Invoice Out')"
+                        :label="t('Invoice Ref.')"
                         lazy-rules
                     />
                 </q-item-section>
@@ -262,39 +267,49 @@ function formatValue(value) {
 en:
     params:
         search: Contains
+        clientFk: Customer
+        orderFK: Order
+        dateFrom: From
+        dateTo: To
+        salesPersonFk: Salesperson
+        stateFk: State
+        refFk: Invoice Ref.
+        myTeam: My team
+        pending: Pending
+        hasInvoice: Invoiced
+        hasRoute: Routed
 es:
-  params:
-    search: Contiene
-    clientFk: Cliente
-    orderFK: Pedido
-    dateFrom: Desde
-    dateTo: Hasta
-    salesPersonFk: Comercial
-    stateFk: Estado
-    refFk: Ref. Factura
-    myTeam: Mi equipo
-    pending: Pendiente
-    hasInvoice: Facturado
-    hasRoute: Enrutado
-  Customer ID: ID Cliente
-  Order ID: ID Pedido
-  From: Desde
-  To: Hasta
-  Salesperson: Comercial
-  State: Estado
-  Invoice Out: Ref. Factura
-  My team: Mi equipo
-  Pending: Pendiente
-  With problems: Con problemas
-  Invoiced: Facturado
-  Routed: Enrutado
-  More options: Más opciones
-  Province: Provincia
-  Agency: Agencia
-  Warehouse: Almacén
-
-  Yes: Si
-  No: No
+    params:
+        search: Contiene
+        clientFk: Cliente
+        orderFK: Pedido
+        dateFrom: Desde
+        dateTo: Hasta
+        salesPersonFk: Comercial
+        stateFk: Estado
+        refFk: Ref. Factura
+        myTeam: Mi equipo
+        pending: Pendiente
+        hasInvoice: Facturado
+        hasRoute: Enrutado
+    Customer ID: ID Cliente
+    Order ID: ID Pedido
+    From: Desde
+    To: Hasta
+    Salesperson: Comercial
+    State: Estado
+    Invoice Ref.: Ref. Factura
+    My team: Mi equipo
+    Pending: Pendiente
+    With problems: Con problemas
+    Invoiced: Facturado
+    Routed: Enrutado
+    More options: Más opciones
+    Province: Provincia
+    Agency: Agencia
+    Warehouse: Almacén
+    Yes: Si
+    No: No
 </i18n>
 
 <!-- <i18n>
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index dc96b9300..e0373e55f 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -72,7 +72,7 @@ function viewSummary(id) {
 
 <template>
     <teleport-slot to="#searchbar">
-        <VnSearchbar data-key="TicketList" label="Search by ticket id or alias" />
+        <VnSearchbar data-key="TicketList" :label="t('Search by ticket id or alias')" />
     </teleport-slot>
     <teleport-slot to="#rightPanel">
         <TicketFilter data-key="TicketList" />
@@ -187,3 +187,8 @@ function viewSummary(id) {
         </paginate>
     </q-page>
 </template>
+
+<i18n>
+es:
+    Search by ticket id or alias: Buscar por id o nombre del ticket
+</i18n>

From c16df3efbc6674d43e136b8034fb0ef0ebfff7ea Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Fri, 24 Feb 2023 11:04:02 +0100
Subject: [PATCH 19/32] Searchbar propagation

---
 src/components/ui/VnSearchbar.vue            |  11 +-
 src/composables/useArrayData.js              |  29 +--
 src/pages/Claim/Card/ClaimCard.vue           |  14 +-
 src/pages/Claim/ClaimFilter.vue              | 223 -------------------
 src/pages/Claim/ClaimList.vue                |  95 ++++----
 src/pages/Claim/ClaimMain.vue                |   2 +-
 src/pages/Customer/CustomerFilter.vue        |   6 +-
 src/pages/Customer/CustomerMain.vue          |   2 +-
 src/pages/Dashboard/DashboardMain.vue        |  16 +-
 src/pages/InvoiceOut/Card/InvoiceOutCard.vue |  17 +-
 src/pages/InvoiceOut/InvoiceOutList.vue      |  95 ++++++--
 src/pages/InvoiceOut/InvoiceOutMain.vue      |   2 +-
 src/pages/Ticket/TicketFilter.vue            |   9 +
 src/pages/Ticket/TicketList.vue              |  27 +--
 14 files changed, 198 insertions(+), 350 deletions(-)
 delete mode 100644 src/pages/Claim/ClaimFilter.vue

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 57a5e2c04..2d75ccb22 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -41,16 +41,13 @@ async function search() {
     });
     if (!props.redirect) return;
 
-    const moduleRoute = route.matched[1];
-    console.log(moduleRoute);
-
     const rows = store.data;
+    const module = route.matched[1];
     if (rows.length === 1) {
-        const firstRow = rows[0];
-        const stateName = `${moduleRoute.name}Card`;
-        await router.push({ name: stateName, params: { id: firstRow.id } });
+        const [firstRow] = rows;
+        await router.push({ path: `/${module.name}/${firstRow.id}` });
     } else if (route.matched.length > 3) {
-        await router.push({ name: moduleRoute.name });
+        await router.push({ path: `/${module.name}` });
         arrayData.updateStateParams();
     }
 }
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index b8954702a..c251a2915 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -25,13 +25,8 @@ export function useArrayData(key, userOptions) {
         if (userOptions.url) store.url = userOptions.url;
         if (userOptions.limit) store.limit = userOptions.limit;
         if (userOptions.order) store.order = userOptions.order;
-        //Object.assign(store.value, userOptions);
-        //console.log(options.value);
     }
 
-    // if (typeof userOptions === 'object' && userOptions.filter) {
-    //     Object.assign(filter.value, userOptions.filter);
-    // }
     onMounted(() => {
         const query = route.query;
         if (query.params) {
@@ -91,6 +86,12 @@ export function useArrayData(key, userOptions) {
         canceller = null;
     }
 
+    function clear() {
+        if (arrayDataStore.get(key)) {
+            arrayDataStore.clear(key);
+        }
+    }
+
     function cancelRequest() {
         if (canceller) {
             canceller.abort();
@@ -98,23 +99,6 @@ export function useArrayData(key, userOptions) {
         }
     }
 
-    // async function request({ userFilter }) {
-    //     if (!store.url) return;
-
-    //     const filter = {
-    //         order: store.order,
-    //         limit: store.limit,
-    //         skip: store.skip,
-    //     };
-
-    //     Object.assign(filter, userFilter);
-
-    //     const requestOptions = { params: { filter: filter } };
-    //     const response = await axios.get(store.url, requestOptions);
-
-    //     return response.data;
-    // }
-
     async function applyFilter({ filter, params }) {
         if (filter) store.userFilter = filter;
         if (params) store.userParams = Object.assign({}, params);
@@ -161,6 +145,7 @@ export function useArrayData(key, userOptions) {
         applyFilter,
         addFilter,
         refresh,
+        clear,
         loadMore,
         store,
         hasMoreData,
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index df6faf323..19be5756d 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -1,11 +1,18 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
 import { useState } from 'composables/useState';
 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 state = useState();
+const { t } = useI18n();
 </script>
 <template>
+    <teleport-slot to="#searchbar">
+        <VnSearchbar data-key="ClaimList" :label="t('Search by claim id or name')" />
+    </teleport-slot>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit">
             <claim-descriptor />
@@ -18,4 +25,9 @@ const state = useState();
             <router-view></router-view>
         </q-page>
     </q-page-container>
-</template>
\ No newline at end of file
+</template>
+
+<i18n>
+es:
+    Search by claim id or name: Buscar por id o nombre de la reclamación
+</i18n>
diff --git a/src/pages/Claim/ClaimFilter.vue b/src/pages/Claim/ClaimFilter.vue
deleted file mode 100644
index a64ee7367..000000000
--- a/src/pages/Claim/ClaimFilter.vue
+++ /dev/null
@@ -1,223 +0,0 @@
-<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,
-    },
-});
-</script>
-
-<template>
-    <fetch-data
-        url="Workers/activeWithInheritedRole"
-        :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="setWorkers"
-        auto-load
-    />
-    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
-        <template #tags="{ tag }">
-            <div class="q-gutter-x-xs">
-                <strong>{{ t(`params.${tag.label}`) }}: </strong>
-                <span>"{{ tag.value }}"</span>
-            </div>
-        </template>
-        <template #body="{ params, searchFn }">
-            <q-list>
-                <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('Name')" v-model="params.name" lazy-rules />
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-input
-                            :label="t('Social Name')"
-                            v-model="params.socialName"
-                            lazy-rules
-                        />
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section v-if="!workers">
-                        <q-skeleton type="QInput" class="full-width" />
-                    </q-item-section>
-                    <q-item-section v-if="workers">
-                        <q-select
-                            @update:model-value="searchFn()"
-                            :label="t('Salesperson')"
-                            v-model="params.salesPersonFk"
-                            :options="workers"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                            use-input
-                            :input-debounce="0"
-                        >
-                            <template #prepend>
-                                <q-avatar color="orange" size="xs">
-                                    <q-img
-                                        v-if="params.salesPersonFk"
-                                        :src="`/api/Images/user/160x160/${params.salesPersonFk}/download?access_token=${token}`"
-                                        spinner-color="white"
-                                    />
-                                </q-avatar>
-                            </template>
-                        </q-select>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section v-if="!provinces">
-                        <q-skeleton type="QInput" class="full-width" />
-                    </q-item-section>
-                    <q-item-section v-if="provinces">
-                        <q-select
-                            @update:model-value="searchFn()"
-                            :label="t('Province')"
-                            v-model="params.provinceFk"
-                            :options="provinces"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                        />
-                    </q-item-section>
-                </q-item>
-                <q-item class="q-mb-md">
-                    <q-item-section>
-                        <q-input :label="t('City')" v-model="params.city" lazy-rules />
-                    </q-item-section>
-                </q-item>
-                <q-separator />
-                <q-expansion-item :label="t('More options')" expand-separator>
-                    <q-item>
-                        <q-item-section>
-                            <q-input
-                                :label="t('Phone')"
-                                v-model="params.phone"
-                                lazy-rules
-                            >
-                                <template #prepend>
-                                    <q-icon name="phone" size="sm"></q-icon>
-                                </template>
-                            </q-input>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-input
-                                :label="t('Email')"
-                                v-model="params.email"
-                                lazy-rules
-                            >
-                                <template #prepend>
-                                    <q-icon name="email" size="sm"></q-icon>
-                                </template>
-                            </q-input>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section v-if="!zones">
-                            <q-skeleton type="QInput" class="full-width" />
-                        </q-item-section>
-                        <q-item-section v-if="zones">
-                            <q-select
-                                @update:model-value="searchFn"
-                                :label="t('Zone')"
-                                v-model="params.zoneFk"
-                                :options="zones"
-                                option-value="id"
-                                option-label="name"
-                                emit-value
-                                map-options
-                            />
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-input
-                                :label="t('Postcode')"
-                                v-model="params.postcode"
-                                lazy-rules
-                            />
-                        </q-item-section>
-                    </q-item>
-                </q-expansion-item>
-            </q-list>
-        </template>
-    </VnFilterPanel>
-</template>
-
-<i18n>
-en:
-  params:
-    fi: FI
-    name: Name
-    socialName: Social Name
-    salesPersonFk: Salesperson
-    provinceFk: Province
-    city: City
-    phone: Phone
-    email: Email
-    zoneFk: Zone
-    postcode: Postcode
-es:
-  params:
-    fi: NIF
-    name: Nombre
-    socialName: Razón Social
-    salesPersonFk: Comercial
-    provinceFk: Provincia
-    city: Ciudad
-    phone: Teléfono
-    email: Email
-    zoneFk: Zona
-    postcode: CP
-  FI: NIF
-  Name: Nombre
-  Social Name: Razón social
-  Salesperson: Comercial
-  Province: Provincia
-  City: Ciudad
-  More options: Más opciones
-  Phone: Teléfono
-  Email: Email
-  Zone: Zona
-  Postcode: Código postal
-</i18n>
-
-<!-- <i18n>
-{
-    "en": {
-        "fi": "Fiscal ID",
-        "name": "Name",
-        "socialName": "Social Name",
-        "salesPersonFk": "Salesperson",
-        "provinceFk": "Province",
-        "city": "City",
-        "zoneFk": "Zone",
-        "postcode": "Postcode"
-    },
-    "es": {
-        "fi": "NIF",
-        "name": "Nombre",
-        "socialName": "Razón social",
-        "salesPersonFk": "Comercial"
-    }
-}
-</i18n> -->
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 4373b0354..6001e02d0 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -1,31 +1,24 @@
 <script setup>
-import { onMounted, onUnmounted } from 'vue';
 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 ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
 import CustomerDescriptorPopover from 'src/pages/Customer/Card/CustomerDescriptorPopover.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import TeleportSlot from 'components/ui/TeleportSlot.vue';
-import ClaimFilter from './ClaimFilter.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
-const state = useStateStore();
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
 
-onMounted(() => state.toggleRightDrawer());
-onUnmounted(() => state.toggleRightDrawer());
-
-// function stateColor(code) {
-//     if (code === 'pending') return 'green';
-//     if (code === 'managed') return 'orange';
-//     if (code === 'resolved') return 'red';
-// }
+function stateColor(code) {
+    if (code === 'pending') return 'green';
+    if (code === 'managed') return 'orange';
+    if (code === 'resolved') return 'red';
+}
 
 function navigate(id) {
     router.push({ path: `/claim/${id}` });
@@ -45,16 +38,8 @@ function viewSummary(id) {
     <teleport-slot to="#searchbar">
         <VnSearchbar data-key="ClaimList" :label="t('Search by claim id or name')" />
     </teleport-slot>
-    <teleport-slot to="#rightPanel">
-        <ClaimFilter data-key="ClaimList" />
-    </teleport-slot>
     <q-page class="q-pa-md">
-        <paginate
-            data-key="ClaimList"
-            url="Claims/filter"
-            sort-by="id DESC"
-            auto-load
-        >
+        <paginate data-key="ClaimList" url="Claims/filter" sort-by="id DESC" auto-load>
             <template #body="{ rows }">
                 <q-card class="card" v-for="row of rows" :key="row.id">
                     <q-item
@@ -73,40 +58,41 @@ function viewSummary(id) {
                             <q-list>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{
-                                            t('claim.list.customer')
-                                        }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('claim.list.customer') }}
+                                        </q-item-label>
                                         <q-item-label>{{ row.clientName }}</q-item-label>
                                     </q-item-section>
                                     <q-item-section>
-                                        <q-item-label caption>{{
-                                            t('claim.list.assignedTo')
-                                        }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('claim.list.assignedTo') }}
+                                        </q-item-label>
                                         <q-item-label>{{ row.workerName }}</q-item-label>
                                     </q-item-section>
                                 </q-item>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{
-                                            t('claim.list.created')
-                                        }}</q-item-label>
-                                        <q-item-label>{{
-                                            toDate(row.created)
-                                        }}</q-item-label>
-                                    </q-item-section>
-                                    <!-- <q-item-section>
-                                        <q-item-label caption>{{
-                                            t('claim.list.state')
-                                        }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('claim.list.created') }}
+                                        </q-item-label>
                                         <q-item-label>
-                                            <q-chip
-                                                :color="stateColor(row.claimState.code)"
+                                            {{ toDate(row.created) }}
+                                        </q-item-label>
+                                    </q-item-section>
+                                    <q-item-section>
+                                        <q-item-label caption>
+                                            {{ t('claim.list.state') }}
+                                        </q-item-label>
+                                        <q-item-label>
+                                            <q-badge
+                                                :color="stateColor(row.stateCode)"
+                                                class="q-ma-none"
                                                 dense
                                             >
-                                                {{ row.claimState.description }}
-                                            </q-chip>
+                                                {{ row.stateDescription }}
+                                            </q-badge>
                                         </q-item-label>
-                                    </q-item-section> -->
+                                    </q-item-section>
                                 </q-item>
                             </q-list>
                         </q-item-section>
@@ -139,9 +125,9 @@ function viewSummary(id) {
                                 icon="arrow_circle_right"
                                 @click="navigate(row.id)"
                             >
-                                <q-tooltip>{{
-                                    t('components.smartCard.openCard')
-                                }}</q-tooltip>
+                                <q-tooltip>
+                                    {{ t('components.smartCard.openCard') }}
+                                </q-tooltip>
                             </q-btn>
                             <q-btn
                                 flat
@@ -150,14 +136,14 @@ function viewSummary(id) {
                                 icon="preview"
                                 @click="viewSummary(row.id)"
                             >
-                                <q-tooltip>{{
-                                    t('components.smartCard.openSummary')
-                                }}</q-tooltip>
+                                <q-tooltip>
+                                    {{ t('components.smartCard.openSummary') }}
+                                </q-tooltip>
                             </q-btn>
                             <q-btn flat round color="grey-7" icon="vn:client">
-                                <q-tooltip>{{
-                                    t('components.smartCard.viewDescription')
-                                }}</q-tooltip>
+                                <q-tooltip>
+                                    {{ t('components.smartCard.viewDescription') }}
+                                </q-tooltip>
                                 <q-popup-proxy>
                                     <customer-descriptor-popover :customer="row.client" />
                                 </q-popup-proxy>
@@ -169,7 +155,8 @@ function viewSummary(id) {
         </paginate>
     </q-page>
 </template>
+
 <i18n>
 es:
-  Search by claim id or name: Buscar por id o nombre de la reclamación
+    Search by claim id or name: Buscar por id o nombre de la reclamación
 </i18n>
diff --git a/src/pages/Claim/ClaimMain.vue b/src/pages/Claim/ClaimMain.vue
index fd50f1521..287beb852 100644
--- a/src/pages/Claim/ClaimMain.vue
+++ b/src/pages/Claim/ClaimMain.vue
@@ -6,7 +6,7 @@ const state = useState();
 </script>
 
 <template>
-    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
+    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="800">
         <q-scroll-area class="fit text-grey-8">
             <LeftMenu />
         </q-scroll-area>
diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index dc2e710e7..e65b6fcae 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -70,9 +70,9 @@ function setWorkers(data) {
                     </q-item-section>
                     <q-item-section v-if="workers">
                         <q-select
-                            @update:model-value="searchFn()"
                             :label="t('Salesperson')"
                             v-model="params.salesPersonFk"
+                            @update:model-value="searchFn()"
                             :options="workers"
                             option-value="id"
                             option-label="name"
@@ -99,9 +99,9 @@ function setWorkers(data) {
                     </q-item-section>
                     <q-item-section v-if="provinces">
                         <q-select
-                            @update:model-value="searchFn()"
                             :label="t('Province')"
                             v-model="params.provinceFk"
+                            @update:model-value="searchFn()"
                             :options="provinces"
                             option-value="id"
                             option-label="name"
@@ -149,9 +149,9 @@ function setWorkers(data) {
                         </q-item-section>
                         <q-item-section v-if="zones">
                             <q-select
-                                @update:model-value="searchFn"
                                 :label="t('Zone')"
                                 v-model="params.zoneFk"
+                                @update:model-value="searchFn()"
                                 :options="zones"
                                 option-value="id"
                                 option-label="name"
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
index d39141de3..5f4feed9d 100644
--- a/src/pages/Customer/CustomerMain.vue
+++ b/src/pages/Customer/CustomerMain.vue
@@ -10,7 +10,7 @@ const stateStore = useStateStore();
         v-model="stateStore.leftDrawer"
         show-if-above
         :width="256"
-        :breakpoint="500"
+        :breakpoint="800"
     >
         <q-scroll-area class="fit text-grey-8">
             <LeftMenu />
diff --git a/src/pages/Dashboard/DashboardMain.vue b/src/pages/Dashboard/DashboardMain.vue
index 87f42226e..aa74d1479 100644
--- a/src/pages/Dashboard/DashboardMain.vue
+++ b/src/pages/Dashboard/DashboardMain.vue
@@ -9,15 +9,13 @@ const state = useState();
 const navigation = useNavigationStore();
 const { t } = useI18n();
 
-onMounted(() => {
-    navigation.fetchPinned();
-});
+onMounted(() => navigation.fetchPinned());
 
 const pinnedModules = computed(() => navigation.getPinnedModules());
 </script>
 
 <template>
-    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
+    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="800">
         <q-scroll-area class="fit text-grey-8">
             <LeftMenu />
         </q-scroll-area>
@@ -26,13 +24,19 @@ const pinnedModules = computed(() => navigation.getPinnedModules());
         <q-page class="q-pa-md">
             <div class="row items-start wrap q-col-gutter-md q-mb-lg">
                 <div class="col-12 col-md">
-                    <div class="text-h6 text-grey-8 q-mb-sm">{{ t('globals.pinnedModules') }}</div>
+                    <div class="text-h6 text-grey-8 q-mb-sm">
+                        {{ t('globals.pinnedModules') }}
+                    </div>
                     <q-card class="row flex-container q-pa-md">
                         <div class="text-grey-5" v-if="pinnedModules.length === 0">
                             {{ t('pinnedInfo') }}
                         </div>
                         <template v-if="pinnedModules.length">
-                            <div v-for="item of pinnedModules" :key="item.title" class="row no-wrap q-pa-xs flex-item">
+                            <div
+                                v-for="item of pinnedModules"
+                                :key="item.title"
+                                class="row no-wrap q-pa-xs flex-item"
+                            >
                                 <q-btn
                                     align="evenly"
                                     padding="16px"
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
index 9820cb21b..bae91708d 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
@@ -1,11 +1,21 @@
 <script setup>
-import { useState } from 'src/composables/useState';
+import { useI18n } from 'vue-i18n';
+import { useState } from 'composables/useState';
 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 state = useState();
+const { t } = useI18n();
 </script>
 <template>
+    <teleport-slot to="#searchbar">
+        <VnSearchbar
+            data-key="InvoiceOutList"
+            :label="t('Search by invoice id or reference')"
+        />
+    </teleport-slot>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit">
             <InvoiceOutDescriptor />
@@ -19,3 +29,8 @@ const state = useState();
         </q-page>
     </q-page-container>
 </template>
+
+<i18n>
+es:
+    Search by invoice id or reference: Buscar por id o referencia de la factura
+</i18n>
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index 8421cf915..a855f2695 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -6,6 +6,9 @@ import Paginate from 'src/components/PaginateData.vue';
 import InvoiceOutSummaryDialog from './Card/InvoiceOutSummaryDialog.vue';
 import { toDate, toCurrency } from 'src/filters/index';
 
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import TeleportSlot from 'components/ui/TeleportSlot.vue';
+
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
@@ -25,54 +28,107 @@ function viewSummary(id) {
 </script>
 
 <template>
+    <teleport-slot to="#searchbar">
+        <VnSearchbar
+            data-key="InvoiceOutList"
+            :label="t('Search by invoice id or reference')"
+        />
+    </teleport-slot>
     <q-page class="q-pa-md">
-        <paginate url="/InvoiceOuts/filter" sort-by="issued DESC, id DESC" auto-load>
+        <paginate
+            data-key="InvoiceOutList"
+            url="InvoiceOuts/filter"
+            sort-by="issued DESC, 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
+                        class="q-pa-none items-start cursor-pointer q-hoverable"
+                        v-ripple
+                        clickable
+                    >
                         <q-item-section class="q-pa-md" @click="navigate(row.id)">
                             <div class="text-h6">{{ row.ref }}</div>
                             <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('invoiceOut.list.issued') }}</q-item-label>
-                                        <q-item-label>{{ toDate(row.issued) }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('invoiceOut.list.issued') }}
+                                        </q-item-label>
+                                        <q-item-label>
+                                            {{ toDate(row.issued) }}
+                                        </q-item-label>
                                     </q-item-section>
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('invoiceOut.list.amount') }}</q-item-label>
-                                        <q-item-label>{{ toCurrency(row.amount) }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('invoiceOut.list.amount') }}
+                                        </q-item-label>
+                                        <q-item-label>
+                                            {{ toCurrency(row.amount) }}
+                                        </q-item-label>
                                     </q-item-section>
                                 </q-item>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('invoiceOut.list.client') }}</q-item-label>
-                                        <q-item-label>{{ row.clientSocialName }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('invoiceOut.list.client') }}
+                                        </q-item-label>
+                                        <q-item-label>
+                                            {{ row.clientSocialName }}
+                                        </q-item-label>
                                     </q-item-section>
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('invoiceOut.list.created') }}</q-item-label>
-                                        <q-item-label>{{ toDate(row.created) }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('invoiceOut.list.created') }}
+                                        </q-item-label>
+                                        <q-item-label>
+                                            {{ toDate(row.created) }}
+                                        </q-item-label>
                                     </q-item-section>
                                 </q-item>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('invoiceOut.list.company') }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('invoiceOut.list.company') }}
+                                        </q-item-label>
                                         <q-item-label>{{ row.companyCode }}</q-item-label>
                                     </q-item-section>
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('invoiceOut.list.dued') }}</q-item-label>
-                                        <q-item-label>{{ toDate(row.dued) }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('invoiceOut.list.dued') }}
+                                        </q-item-label>
+                                        <q-item-label>
+                                            {{ toDate(row.dued) }}
+                                        </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="orange" icon="arrow_circle_right" @click="navigate(row.id)">
-                                <q-tooltip>{{ t('components.smartCard.openCard') }}</q-tooltip>
+                            <q-btn
+                                flat
+                                round
+                                color="orange"
+                                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
+                                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>
@@ -81,3 +137,8 @@ function viewSummary(id) {
         </paginate>
     </q-page>
 </template>
+
+<i18n>
+es:
+    Search by invoice id or reference: Buscar por id o referencia de la factura
+</i18n>
diff --git a/src/pages/InvoiceOut/InvoiceOutMain.vue b/src/pages/InvoiceOut/InvoiceOutMain.vue
index 099e82879..8e63f372c 100644
--- a/src/pages/InvoiceOut/InvoiceOutMain.vue
+++ b/src/pages/InvoiceOut/InvoiceOutMain.vue
@@ -6,7 +6,7 @@ const state = useState();
 </script>
 
 <template>
-    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
+    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="800">
         <q-scroll-area class="fit text-grey-8">
             <LeftMenu />
         </q-scroll-area>
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index 380480274..4a78fc628 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -42,6 +42,8 @@ function formatValue(value) {
 <template>
     <fetch-data url="Provinces" @on-fetch="(data) => (provinces = data)" auto-load />
     <fetch-data url="States" @on-fetch="(data) => (states = data)" auto-load />
+    <fetch-data url="AgencyModes" @on-fetch="(data) => (agencies = data)" auto-load />
+    <fetch-data url="Warehouses" @on-fetch="(data) => (warehouses = data)" auto-load />
     <fetch-data
         url="Workers/activeWithInheritedRole"
         :filter="{ where: { role: 'salesPerson' } }"
@@ -154,6 +156,7 @@ function formatValue(value) {
                     <q-select
                         :label="t('State')"
                         v-model="params.stateFk"
+                        @update:model-value="searchFn()"
                         :options="states"
                         option-value="id"
                         option-label="name"
@@ -224,6 +227,7 @@ function formatValue(value) {
                         <q-select
                             :label="t('Province')"
                             v-model="params.provinceFk"
+                            @update:model-value="searchFn()"
                             :options="provinces"
                             option-value="id"
                             option-label="name"
@@ -237,6 +241,7 @@ function formatValue(value) {
                         <q-select
                             :label="t('Agency')"
                             v-model="params.agencyModeFk"
+                            @update:model-value="searchFn()"
                             :options="agencies"
                             option-value="id"
                             option-label="name"
@@ -250,6 +255,7 @@ function formatValue(value) {
                         <q-select
                             :label="t('Warehouse')"
                             v-model="params.warehouseFk"
+                            @update:model-value="searchFn()"
                             :options="warehouses"
                             option-value="id"
                             option-label="name"
@@ -278,6 +284,9 @@ en:
         pending: Pending
         hasInvoice: Invoiced
         hasRoute: Routed
+        provinceFk: Province
+        agencyModeFk: Agency
+        warehouseFk: Warehouse
 es:
     params:
         search: Contiene
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index e0373e55f..98c5fed13 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -108,13 +108,13 @@ function viewSummary(id) {
                                             {{ t('ticket.list.state') }}
                                         </q-item-label>
                                         <q-item-label>
-                                            <q-chip
+                                            <q-badge
                                                 :color="stateColor(row)"
                                                 class="q-ma-none"
                                                 dense
                                             >
                                                 {{ row.state }}
-                                            </q-chip>
+                                            </q-badge>
                                         </q-item-label>
                                     </q-item-section>
                                 </q-item>
@@ -129,10 +129,10 @@ function viewSummary(id) {
                                     </q-item-section>
                                     <q-item-section>
                                         <q-item-label caption>
-                                            {{ t('ticket.list.landed') }}
+                                            {{ t('Zone') }}
                                         </q-item-label>
                                         <q-item-label>
-                                            {{ toDate(row.landed) }}
+                                            {{ row.zoneName }}
                                         </q-item-label>
                                     </q-item-section>
                                 </q-item>
@@ -149,9 +149,9 @@ function viewSummary(id) {
                                         <q-item-label caption>
                                             {{ t('ticket.list.total') }}
                                         </q-item-label>
-                                        <q-item-label>{{
-                                            toCurrency(row.totalWithVat)
-                                        }}</q-item-label>
+                                        <q-item-label>
+                                            {{ toCurrency(row.totalWithVat) }}
+                                        </q-item-label>
                                     </q-item-section>
                                 </q-item>
                             </q-list>
@@ -165,9 +165,9 @@ function viewSummary(id) {
                                 icon="arrow_circle_right"
                                 @click="navigate(row.id)"
                             >
-                                <q-tooltip>{{
-                                    t('components.smartCard.openCard')
-                                }}</q-tooltip>
+                                <q-tooltip>
+                                    {{ t('components.smartCard.openCard') }}
+                                </q-tooltip>
                             </q-btn>
                             <q-btn
                                 flat
@@ -176,9 +176,9 @@ function viewSummary(id) {
                                 icon="preview"
                                 @click="viewSummary(row.id)"
                             >
-                                <q-tooltip>{{
-                                    t('components.smartCard.openSummary')
-                                }}</q-tooltip>
+                                <q-tooltip>
+                                    {{ t('components.smartCard.openSummary') }}
+                                </q-tooltip>
                             </q-btn>
                         </q-card-actions>
                     </q-item>
@@ -191,4 +191,5 @@ function viewSummary(id) {
 <i18n>
 es:
     Search by ticket id or alias: Buscar por id o nombre del ticket
+    Zone: Zona
 </i18n>

From ed7428268061ef6366d828106dafca1199cb8a1c Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Fri, 24 Feb 2023 13:21:37 +0100
Subject: [PATCH 20/32] Updated unit test

---
 src/components/PaginateData.vue               | 13 ---
 .../__tests__/components/Paginate.spec.js     | 90 ++++++++-----------
 test/vitest/helper.js                         |  6 +-
 3 files changed, 40 insertions(+), 69 deletions(-)

diff --git a/src/components/PaginateData.vue b/src/components/PaginateData.vue
index 88f2157ca..2c091645c 100644
--- a/src/components/PaginateData.vue
+++ b/src/components/PaginateData.vue
@@ -86,19 +86,6 @@ async function paginate() {
 
     if (!props.url) return;
 
-    // const filter = {
-    //     limit: rowsPerPage,
-    //     skip: rowsPerPage * (page - 1),
-    // };
-
-    // Object.assign(filter, props.filter);
-
-    // if (props.where) filter.where = props.where;
-    // if (props.sortBy) filter.order = props.sortBy;
-    // if (props.limit) filter.limit = props.limit;
-
-    // if (sortBy) filter.order = sortBy;
-
     await arrayData.loadMore();
 
     if (!arrayData.hasMoreData.value) {
diff --git a/test/vitest/__tests__/components/Paginate.spec.js b/test/vitest/__tests__/components/Paginate.spec.js
index dd6f31478..cb0109960 100644
--- a/test/vitest/__tests__/components/Paginate.spec.js
+++ b/test/vitest/__tests__/components/Paginate.spec.js
@@ -4,82 +4,65 @@ import Paginate from 'components/PaginateData.vue';
 
 describe('Paginate', () => {
     const expectedUrl = '/api/customers';
+
     let vm;
     beforeAll(() => {
         const options = {
             attrs: {
                 url: expectedUrl,
-                sortBy: 'id DESC',
-                rowsPerPage: 3,
+                dataKey: 'CustomerList',
+                order: 'id DESC',
+                limit: 3,
             },
         };
         vm = createWrapper(Paginate, options).vm;
-
-        vi.spyOn(axios, 'get').mockResolvedValue({
-            data: [
-                { id: 1, name: 'Tony Stark' },
-                { id: 2, name: 'Jessica Jones' },
-                { id: 3, name: 'Bruce Wayne' },
-            ],
-        });
     });
 
     afterEach(() => {
-        vm.rows = [];
+        vm.store.data = [];
         vm.pagination.page = 1;
         vm.hasMoreData = true;
     });
 
     describe('paginate()', () => {
         it('should call to the paginate() method and set the data on the rows property', async () => {
-            const expectedOptions = {
-                params: {
-                    filter: {
-                        order: 'id DESC',
-                        limit: 3,
-                        skip: 0,
-                    },
-                },
-            };
+            vi.spyOn(vm.arrayData, 'loadMore');
+            vm.store.data = [
+                { id: 1, name: 'Tony Stark' },
+                { id: 2, name: 'Jessica Jones' },
+                { id: 3, name: 'Bruce Wayne' },
+            ];
 
             await vm.paginate();
 
-            expect(axios.get).toHaveBeenCalledWith(expectedUrl, expectedOptions);
-            expect(vm.rows.length).toEqual(3);
+            expect(vm.arrayData.loadMore).toHaveBeenCalledWith();
+            expect(vm.store.data.length).toEqual(3);
         });
 
         it('should call to the paginate() method and then call it again to paginate', async () => {
-            const expectedOptions = {
-                params: {
-                    filter: {
-                        order: 'id DESC',
-                        limit: 3,
-                        skip: 0,
-                    },
-                },
-            };
+            vi.spyOn(axios, 'get').mockResolvedValue({
+                data: [
+                    { id: 1, name: 'Tony Stark' },
+                    { id: 2, name: 'Jessica Jones' },
+                    { id: 3, name: 'Bruce Wayne' },
+                ],
+            });
+            vm.arrayData.hasMoreData.value = true;
+            vm.store.data = [
+                { id: 1, name: 'Tony Stark' },
+                { id: 2, name: 'Jessica Jones' },
+                { id: 3, name: 'Bruce Wayne' },
+            ];
 
             await vm.paginate();
 
-            expect(axios.get).toHaveBeenCalledWith(expectedUrl, expectedOptions);
-            expect(vm.rows.length).toEqual(3);
-
-            const expectedOptionsPaginated = {
-                params: {
-                    filter: {
-                        order: 'id DESC',
-                        limit: 3,
-                        skip: 3,
-                    },
-                },
-            };
-
-            vm.pagination.page = 2;
+            expect(vm.store.skip).toEqual(0);
+            expect(vm.store.data.length).toEqual(6);
 
             await vm.paginate();
 
-            expect(axios.get).toHaveBeenCalledWith(expectedUrl, expectedOptionsPaginated);
-            expect(vm.rows.length).toEqual(6);
+            expect(vm.store.skip).toEqual(3);
+            expect(vm.store.data.length).toEqual(9);
         });
     });
 
@@ -95,16 +78,15 @@ describe('Paginate', () => {
         });
 
         it('should increment the pagination and then call to the done() callback', async () => {
-            vm.rows = [
-                { id: 1, name: 'Tony Stark' },
-                { id: 2, name: 'Jessica Jones' },
-                { id: 3, name: 'Bruce Wayne' },
-            ];
-
             expect(vm.pagination.page).toEqual(1);
 
             const index = 1;
             const done = vi.fn();
+            vm.store.data = [
+                { id: 1, name: 'Tony Stark' },
+                { id: 2, name: 'Jessica Jones' },
+                { id: 3, name: 'Bruce Wayne' },
+            ];
 
             await vm.onLoad(index, done);
 
@@ -120,7 +102,7 @@ describe('Paginate', () => {
                 ],
             });
 
-            vm.rows = [
+            vm.store.data = [
                 { id: 1, name: 'Tony Stark' },
                 { id: 2, name: 'Jessica Jones' },
                 { id: 3, name: 'Bruce Wayne' },
diff --git a/test/vitest/helper.js b/test/vitest/helper.js
index 13987080d..6fadc4609 100644
--- a/test/vitest/helper.js
+++ b/test/vitest/helper.js
@@ -13,7 +13,9 @@ installQuasar({
     },
 });
 
+const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false });
 const mockPush = vi.fn();
+
 vi.mock('vue-router', () => ({
     useRouter: () => ({
         push: mockPush,
@@ -21,12 +23,12 @@ vi.mock('vue-router', () => ({
     }),
     useRoute: () => ({
         matched: [],
+        query: {},
+        params: {},
     }),
 }));
 
 export function createWrapper(component, options) {
-    const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false });
-
     const defaultOptions = {
         global: {
             plugins: [i18n, pinia],

From 1528a3649fc93e1828a177df9eed8a1e40b0d4e5 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Fri, 24 Feb 2023 13:42:56 +0100
Subject: [PATCH 21/32] Label formatter function

---
 src/components/ui/VnFilterPanel.vue   | 15 ++++++++++++++-
 src/pages/Customer/CustomerFilter.vue |  4 ++--
 src/pages/Ticket/TicketFilter.vue     | 26 +++-----------------------
 3 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 726956772..f09fa7858 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -2,6 +2,7 @@
 import { onMounted, ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'composables/useArrayData';
+import toDate from 'filters/toDate';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -78,6 +79,18 @@ async function remove(key) {
     delete store.userParams[key];
     await search();
 }
+
+function formatValue(value) {
+    if (typeof value === 'boolean') {
+        return value ? t('Yes') : t('No');
+    }
+
+    if (isNaN(value) && !isNaN(Date.parse(value))) {
+        return toDate(value);
+    }
+
+    return `"${value}"`;
+}
 </script>
 <template>
     <q-form @submit="search">
@@ -136,7 +149,7 @@ async function remove(key) {
                         size="sm"
                         removable
                     >
-                        <slot name="tags" :tag="chip">
+                        <slot name="tags" :tag="chip" :format-fn="formatValue">
                             <div class="q-gutter-x-xs">
                                 <strong>{{ chip.label }}:</strong>
                                 <span>"{{ chip.value }}"</span>
diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index e65b6fcae..df8c5dc16 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -33,10 +33,10 @@ function setWorkers(data) {
         auto-load
     />
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
-        <template #tags="{ tag }">
+        <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
                 <strong>{{ t(`params.${tag.label}`) }}: </strong>
-                <span>"{{ tag.value }}"</span>
+                <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
         <template #body="{ params, searchFn }">
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index 4a78fc628..1672c70c2 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -3,7 +3,6 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import toDate from 'filters/toDate';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -14,29 +13,10 @@ const props = defineProps({
 });
 
 const workers = ref([]);
-const workersCopy = ref([]);
 const provinces = ref([]);
 const states = ref([]);
 const agencies = ref([]);
 const warehouses = ref([]);
-
-function setWorkers(data) {
-    workers.value = data;
-    workersCopy.value = data;
-}
-
-function formatValue(value) {
-    console.log(typeof value);
-    if (typeof value === 'boolean') {
-        return value ? t('Yes') : t('No');
-    }
-
-    if (isNaN(value) && !isNaN(Date.parse(value))) {
-        return toDate(value);
-    }
-
-    return `"${value}"`;
-}
 </script>
 
 <template>
@@ -51,10 +31,10 @@ function formatValue(value) {
         auto-load
     />
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
-        <template #tags="{ tag }">
+        <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
                 <strong>{{ t(`params.${tag.label}`) }}: </strong>
-                <span>{{ formatValue(tag.value) }}</span>
+                <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
         <template #body="{ params, searchFn }">
@@ -129,12 +109,12 @@ function formatValue(value) {
             <q-item>
                 <q-item-section>
                     <q-select
+                        :label="t('Salesperson')"
                         v-model="params.salesPersonFk"
                         :options="workers"
                         option-value="id"
                         option-label="name"
                         emit-value
-                        :label="t('Salesperson')"
                         map-options
                         use-input
                         :input-debounce="0"

From 323e4673716144bdd013a427ad68bb6b3b6c61c0 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Mon, 27 Feb 2023 08:39:14 +0100
Subject: [PATCH 22/32] Updated node version

---
 Jenkinsfile                     | 8 ++++----
 src/composables/useArrayData.js | 9 +--------
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/Jenkinsfile b/Jenkinsfile
index c4e87be4a..de26c7dd0 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -31,8 +31,8 @@ pipeline {
                 NODE_ENV = ""
             }
             steps {
-                nodejs('node-v14') {
-                    sh 'npm install -g @quasar/cli'
+                nodejs('node-v18') {
+                    // sh 'npm install -g @quasar/cli'
                     sh 'npm install --no-audit --prefer-offline'
                 }
             }
@@ -48,7 +48,7 @@ pipeline {
             parallel {
                 stage('Frontend') {
                     steps {
-                        nodejs('node-v14') {
+                        nodejs('node-v18') {
                             sh 'npm run test:unit:ci'
                         }
                     }
@@ -64,7 +64,7 @@ pipeline {
                 CREDENTIALS = credentials('docker-registry')
             }
             steps {
-                nodejs('node-v14') {
+                nodejs('node-v18') {
                     sh 'quasar build'
                 }
                 dockerBuild()
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index c251a2915..2794d6806 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -1,4 +1,4 @@
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import axios from 'axios';
 import { useArrayDataStore } from 'stores/useArrayDataStore';
@@ -34,13 +34,6 @@ export function useArrayData(key, userOptions) {
         }
     });
 
-    onUnmounted(() => {
-        // if (arrayDataStore.get(key)) {
-        //     arrayDataStore.clear(key);
-        // }
-        // do stuff
-    });
-
     async function fetch({ append = false }) {
         if (!store.url) return;
 

From a1f7fdfb37b9998b769f2378c12028cc123b691b Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Mon, 27 Feb 2023 15:04:30 +0100
Subject: [PATCH 23/32] Added claim filters

---
 src/pages/Claim/ClaimFilter.vue     | 259 ++++++++++++++++++++++++++++
 src/pages/Claim/ClaimList.vue       |  11 +-
 src/pages/Customer/CustomerList.vue |   3 +-
 3 files changed, 270 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/Claim/ClaimFilter.vue

diff --git a/src/pages/Claim/ClaimFilter.vue b/src/pages/Claim/ClaimFilter.vue
new file mode 100644
index 000000000..b6d6f0d29
--- /dev/null
+++ b/src/pages/Claim/ClaimFilter.vue
@@ -0,0 +1,259 @@
+<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 workers = ref();
+const workersCopy = ref();
+const states = ref();
+
+function setWorkers(data) {
+    workers.value = data;
+    workersCopy.value = data;
+}
+</script>
+
+<template>
+    <fetch-data url="ClaimStates" @on-fetch="(data) => (states = data)" auto-load />
+    <fetch-data
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="setWorkers"
+        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>
+                <q-item>
+                    <q-item-section>
+                        <q-input
+                            :label="t('Customer ID')"
+                            v-model="params.clientFk"
+                            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('Name')" v-model="params.name" lazy-rules />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section v-if="!workers">
+                        <q-skeleton type="QInput" class="full-width" />
+                    </q-item-section>
+                    <q-item-section v-if="workers">
+                        <q-select
+                            :label="t('Salesperson')"
+                            v-model="params.salesPersonFk"
+                            @update:model-value="searchFn()"
+                            :options="workers"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        >
+                            <template #prepend>
+                                <q-avatar color="orange" size="xs">
+                                    <q-img
+                                        v-if="params.salesPersonFk"
+                                        :src="`/api/Images/user/160x160/${params.salesPersonFk}/download?access_token=${token}`"
+                                        spinner-color="white"
+                                    />
+                                </q-avatar>
+                            </template>
+                        </q-select>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section v-if="!workers">
+                        <q-skeleton type="QInput" class="full-width" />
+                    </q-item-section>
+                    <q-item-section v-if="workers">
+                        <q-select
+                            :label="t('Attender')"
+                            v-model="params.attenderFk"
+                            @update:model-value="searchFn()"
+                            :options="workers"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-select
+                            :label="t('State')"
+                            v-model="params.stateFk"
+                            @update:model-value="searchFn()"
+                            :options="states"
+                            option-value="id"
+                            option-label="description"
+                            emit-value
+                            map-options
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-select
+                            :label="t('Item')"
+                            v-model="params.itemFk"
+                            :options="items"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item class="q-mb-md">
+                    <q-item-section>
+                        <q-input :label="t('City')" v-model="params.city" lazy-rules />
+                    </q-item-section>
+                </q-item>
+                <q-separator />
+                <q-expansion-item :label="t('More options')" expand-separator>
+                    <q-item>
+                        <q-item-section>
+                            <q-input
+                                :label="t('Phone')"
+                                v-model="params.phone"
+                                lazy-rules
+                            >
+                                <template #prepend>
+                                    <q-icon name="phone" size="sm"></q-icon>
+                                </template>
+                            </q-input>
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-input
+                                :label="t('Email')"
+                                v-model="params.email"
+                                lazy-rules
+                            >
+                                <template #prepend>
+                                    <q-icon name="email" size="sm"></q-icon>
+                                </template>
+                            </q-input>
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section v-if="!zones">
+                            <q-skeleton type="QInput" class="full-width" />
+                        </q-item-section>
+                        <q-item-section v-if="zones">
+                            <q-select
+                                :label="t('Zone')"
+                                v-model="params.zoneFk"
+                                @update:model-value="searchFn()"
+                                :options="zones"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                map-options
+                            />
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-input
+                                :label="t('Postcode')"
+                                v-model="params.postcode"
+                                lazy-rules
+                            />
+                        </q-item-section>
+                    </q-item>
+                </q-expansion-item>
+            </q-list>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+    params:
+        search: Contains
+        fi: FI
+        name: Name
+        socialName: Social Name
+        salesPersonFk: Salesperson
+        provinceFk: Province
+        city: City
+        phone: Phone
+        email: Email
+        zoneFk: Zone
+        postcode: Postcode
+es:
+    params:
+        search: Contiene
+        fi: NIF
+        name: Nombre
+        socialName: Razón Social
+        salesPersonFk: Comercial
+        provinceFk: Provincia
+        city: Ciudad
+        phone: Teléfono
+        email: Email
+        zoneFk: Zona
+        postcode: CP
+    FI: NIF
+    Name: Nombre
+    Social Name: Razón social
+    Salesperson: Comercial
+    Province: Provincia
+    City: Ciudad
+    More options: Más opciones
+    Phone: Teléfono
+    Email: Email
+    Zone: Zona
+    Postcode: Código postal
+</i18n>
+
+<!-- <i18n>
+{
+    "en": {
+        "fi": "Fiscal ID",
+        "name": "Name",
+        "socialName": "Social Name",
+        "salesPersonFk": "Salesperson",
+        "provinceFk": "Province",
+        "city": "City",
+        "zoneFk": "Zone",
+        "postcode": "Postcode"
+    },
+    "es": {
+        "fi": "NIF",
+        "name": "Nombre",
+        "socialName": "Razón social",
+        "salesPersonFk": "Comercial"
+    }
+}
+</i18n> -->
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 6001e02d0..07628b906 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -1,19 +1,25 @@
 <script setup>
+import { onMounted, onUnmounted } from 'vue';
 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 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 ClaimFilter from './ClaimFilter.vue';
 
+const state = useStateStore();
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
 
+onMounted(() => state.toggleRightDrawer());
+onUnmounted(() => state.toggleRightDrawer());
+
 function stateColor(code) {
     if (code === 'pending') return 'green';
     if (code === 'managed') return 'orange';
@@ -38,6 +44,9 @@ function viewSummary(id) {
     <teleport-slot to="#searchbar">
         <VnSearchbar data-key="ClaimList" :label="t('Search by claim id or name')" />
     </teleport-slot>
+    <teleport-slot to="#rightPanel">
+        <ClaimFilter data-key="ClaimList" />
+    </teleport-slot>
     <q-page class="q-pa-md">
         <paginate data-key="ClaimList" url="Claims/filter" sort-by="id DESC" auto-load>
             <template #body="{ rows }">
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index d7ace041c..a7cd90996 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -4,11 +4,10 @@ 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 CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import TeleportSlot from 'components/ui/TeleportSlot.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import CustomerFilter from './CustomerFilter.vue';
 
 const state = useStateStore();

From a5f83b553b2e8e965f449c16d1bbeea64f959a9f Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 28 Feb 2023 11:31:24 +0100
Subject: [PATCH 24/32] Added claim & invoice out filters

---
 src/components/ui/VnFilterPanel.vue       |   4 +-
 src/composables/useArrayData.js           |   1 +
 src/pages/Claim/ClaimFilter.vue           | 192 +++++------
 src/pages/Claim/ClaimList.vue             |   5 +-
 src/pages/Customer/CustomerFilter.vue     |  23 +-
 src/pages/InvoiceOut/InvoiceOutFilter.vue | 246 ++++++++++++++
 src/pages/InvoiceOut/InvoiceOutList.vue   |  13 +-
 src/pages/Ticket/TicketFilter.vue         | 391 ++++++++++------------
 8 files changed, 523 insertions(+), 352 deletions(-)
 create mode 100644 src/pages/InvoiceOut/InvoiceOutFilter.vue

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index f09fa7858..06bd16723 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -176,8 +176,8 @@ function formatValue(value) {
                 </q-item>
                 <q-separator />
             </template>
-            <slot name="body" :params="userParams" :search-fn="search"></slot>
         </q-list>
+        <slot name="body" :params="userParams" :search-fn="search"></slot>
     </q-form>
     <q-inner-loading
         :showing="isLoading"
@@ -193,4 +193,6 @@ es:
     Remove filters: Eliminar filtros
     Refresh: Refrescar
     Search: Buscar
+    Yes: Si
+    No: No
 </i18n>
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 2794d6806..9339fb456 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -79,6 +79,7 @@ export function useArrayData(key, userOptions) {
         canceller = null;
     }
 
+    
     function clear() {
         if (arrayDataStore.get(key)) {
             arrayDataStore.clear(key);
diff --git a/src/pages/Claim/ClaimFilter.vue b/src/pages/Claim/ClaimFilter.vue
index b6d6f0d29..ad6e63b5a 100644
--- a/src/pages/Claim/ClaimFilter.vue
+++ b/src/pages/Claim/ClaimFilter.vue
@@ -38,7 +38,7 @@ function setWorkers(data) {
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <q-list>
+            <q-list dense>
                 <q-item>
                     <q-item-section>
                         <q-input
@@ -54,7 +54,11 @@ function setWorkers(data) {
                 </q-item>
                 <q-item>
                     <q-item-section>
-                        <q-input :label="t('Name')" v-model="params.name" lazy-rules />
+                        <q-input
+                            :label="t('Client Name')"
+                            v-model="params.clientName"
+                            lazy-rules
+                        />
                     </q-item-section>
                 </q-item>
                 <q-item>
@@ -73,17 +77,7 @@ function setWorkers(data) {
                             map-options
                             use-input
                             :input-debounce="0"
-                        >
-                            <template #prepend>
-                                <q-avatar color="orange" size="xs">
-                                    <q-img
-                                        v-if="params.salesPersonFk"
-                                        :src="`/api/Images/user/160x160/${params.salesPersonFk}/download?access_token=${token}`"
-                                        spinner-color="white"
-                                    />
-                                </q-avatar>
-                            </template>
-                        </q-select>
+                        />
                     </q-item-section>
                 </q-item>
                 <q-item>
@@ -106,10 +100,29 @@ function setWorkers(data) {
                     </q-item-section>
                 </q-item>
                 <q-item>
+                    <q-item-section v-if="!workers">
+                        <q-skeleton type="QInput" class="full-width" />
+                    </q-item-section>
+                    <q-item-section v-if="workers">
+                        <q-select
+                            :label="t('Responsible')"
+                            v-model="params.claimResponsibleFk"
+                            @update:model-value="searchFn()"
+                            :options="workers"
+                            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-select
                             :label="t('State')"
-                            v-model="params.stateFk"
+                            v-model="params.claimStateFk"
                             @update:model-value="searchFn()"
                             :options="states"
                             option-value="id"
@@ -119,62 +132,14 @@ function setWorkers(data) {
                         />
                     </q-item-section>
                 </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-select
-                            :label="t('Item')"
-                            v-model="params.itemFk"
-                            :options="items"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                        />
-                    </q-item-section>
-                </q-item>
-                <q-item class="q-mb-md">
-                    <q-item-section>
-                        <q-input :label="t('City')" v-model="params.city" lazy-rules />
-                    </q-item-section>
-                </q-item>
                 <q-separator />
                 <q-expansion-item :label="t('More options')" expand-separator>
                     <q-item>
                         <q-item-section>
-                            <q-input
-                                :label="t('Phone')"
-                                v-model="params.phone"
-                                lazy-rules
-                            >
-                                <template #prepend>
-                                    <q-icon name="phone" size="sm"></q-icon>
-                                </template>
-                            </q-input>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-input
-                                :label="t('Email')"
-                                v-model="params.email"
-                                lazy-rules
-                            >
-                                <template #prepend>
-                                    <q-icon name="email" size="sm"></q-icon>
-                                </template>
-                            </q-input>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section v-if="!zones">
-                            <q-skeleton type="QInput" class="full-width" />
-                        </q-item-section>
-                        <q-item-section v-if="zones">
                             <q-select
-                                :label="t('Zone')"
-                                v-model="params.zoneFk"
-                                @update:model-value="searchFn()"
-                                :options="zones"
+                                :label="t('Item')"
+                                v-model="params.itemFk"
+                                :options="items"
                                 option-value="id"
                                 option-label="name"
                                 emit-value
@@ -185,10 +150,32 @@ function setWorkers(data) {
                     <q-item>
                         <q-item-section>
                             <q-input
-                                :label="t('Postcode')"
-                                v-model="params.postcode"
-                                lazy-rules
-                            />
+                                v-model="params.created"
+                                :label="t('Created')"
+                                autofocus
+                                readonly
+                            >
+                                <template #append>
+                                    <q-icon name="event" class="cursor-pointer">
+                                        <q-popup-proxy
+                                            cover
+                                            transition-show="scale"
+                                            transition-hide="scale"
+                                        >
+                                            <q-date v-model="params.created">
+                                                <div class="row items-center justify-end">
+                                                    <q-btn
+                                                        v-close-popup
+                                                        label="Close"
+                                                        color="primary"
+                                                        flat
+                                                    />
+                                                </div>
+                                            </q-date>
+                                        </q-popup-proxy>
+                                    </q-icon>
+                                </template>
+                            </q-input>
                         </q-item-section>
                     </q-item>
                 </q-expansion-item>
@@ -201,59 +188,30 @@ function setWorkers(data) {
 en:
     params:
         search: Contains
-        fi: FI
-        name: Name
-        socialName: Social Name
+        clientFk: Customer
+        clientName: Customer
         salesPersonFk: Salesperson
-        provinceFk: Province
-        city: City
-        phone: Phone
-        email: Email
-        zoneFk: Zone
-        postcode: Postcode
+        attenderFk: Attender
+        claimResponsibleFk: Responsible
+        claimStateFk: State
+        created: Created
 es:
     params:
         search: Contiene
-        fi: NIF
-        name: Nombre
-        socialName: Razón Social
+        clientFk: Cliente
+        clientName: Cliente
         salesPersonFk: Comercial
-        provinceFk: Provincia
-        city: Ciudad
-        phone: Teléfono
-        email: Email
-        zoneFk: Zona
-        postcode: CP
-    FI: NIF
-    Name: Nombre
-    Social Name: Razón social
+        attenderFk: Asistente
+        claimResponsibleFk: Responsable
+        claimStateFk: Estado
+        created: Creada
+    Customer ID: ID cliente
+    Client Name: Nombre del cliente
     Salesperson: Comercial
-    Province: Provincia
-    City: Ciudad
+    Attender: Asistente
+    Responsible: Responsable
+    State: Estado
+    Item: Artículo
+    Created: Creada
     More options: Más opciones
-    Phone: Teléfono
-    Email: Email
-    Zone: Zona
-    Postcode: Código postal
 </i18n>
-
-<!-- <i18n>
-{
-    "en": {
-        "fi": "Fiscal ID",
-        "name": "Name",
-        "socialName": "Social Name",
-        "salesPersonFk": "Salesperson",
-        "provinceFk": "Province",
-        "city": "City",
-        "zoneFk": "Zone",
-        "postcode": "Postcode"
-    },
-    "es": {
-        "fi": "NIF",
-        "name": "Nombre",
-        "socialName": "Razón social",
-        "salesPersonFk": "Comercial"
-    }
-}
-</i18n> -->
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 07628b906..69c436ee9 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -59,9 +59,6 @@ function viewSummary(id) {
                         <q-item-section class="q-pa-md" @click="navigate(row.id)">
                             <div class="text-h6 link">
                                 {{ row.clientName }}
-                                <q-popup-proxy>
-                                    <customer-descriptor-popover :customer="row.client" />
-                                </q-popup-proxy>
                             </div>
                             <q-item-label caption>#{{ row.id }}</q-item-label>
                             <q-list>
@@ -154,7 +151,7 @@ function viewSummary(id) {
                                     {{ t('components.smartCard.viewDescription') }}
                                 </q-tooltip>
                                 <q-popup-proxy>
-                                    <customer-descriptor-popover :customer="row.client" />
+                                    <CustomerDescriptorPopover :id="row.clientFk" />
                                 </q-popup-proxy>
                             </q-btn>
                         </q-card-actions>
diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index df8c5dc16..9d4f8f0f6 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -40,7 +40,7 @@ function setWorkers(data) {
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <q-list>
+            <q-list dense>
                 <q-item>
                     <q-item-section>
                         <q-input :label="t('FI')" v-model="params.fi" lazy-rules>
@@ -214,24 +214,3 @@ es:
     Zone: Zona
     Postcode: Código postal
 </i18n>
-
-<!-- <i18n>
-{
-    "en": {
-        "fi": "Fiscal ID",
-        "name": "Name",
-        "socialName": "Social Name",
-        "salesPersonFk": "Salesperson",
-        "provinceFk": "Province",
-        "city": "City",
-        "zoneFk": "Zone",
-        "postcode": "Postcode"
-    },
-    "es": {
-        "fi": "NIF",
-        "name": "Nombre",
-        "socialName": "Razón social",
-        "salesPersonFk": "Comercial"
-    }
-}
-</i18n> -->
diff --git a/src/pages/InvoiceOut/InvoiceOutFilter.vue b/src/pages/InvoiceOut/InvoiceOutFilter.vue
new file mode 100644
index 000000000..356e5498e
--- /dev/null
+++ b/src/pages/InvoiceOut/InvoiceOutFilter.vue
@@ -0,0 +1,246 @@
+<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 workers = ref();
+const workersCopy = ref();
+const states = ref();
+
+function setWorkers(data) {
+    workers.value = data;
+    workersCopy.value = data;
+}
+</script>
+
+<template>
+    <fetch-data url="ClaimStates" @on-fetch="(data) => (states = data)" auto-load />
+    <fetch-data
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="setWorkers"
+        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('Customer ID')"
+                            v-model="params.clientFk"
+                            lazy-rules
+                        >
+                            <template #prepend>
+                                <q-icon name="vn:client" size="sm"></q-icon>
+                            </template>
+                        </q-input>
+                    </q-item-section>
+                </q-item>
+                <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('Amount')" v-model="params.amount" lazy-rules>
+                            <template #prepend>
+                                <q-icon name="euro" size="sm"></q-icon>
+                            </template>
+                        </q-input>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-input
+                            :label="t('Min')"
+                            type="number"
+                            v-model.number="params.min"
+                            lazy-rules
+                        >
+                            <template #prepend>
+                                <q-icon name="euro" size="sm"></q-icon>
+                            </template>
+                        </q-input>
+                    </q-item-section>
+                    <q-item-section>
+                        <q-input
+                            :label="t('Max')"
+                            type="number"
+                            v-model.number="params.max"
+                            lazy-rules
+                        >
+                            <template #prepend>
+                                <q-icon name="euro" size="sm"></q-icon>
+                            </template>
+                        </q-input>
+                    </q-item-section>
+                </q-item>
+                <q-item class="q-mb-md">
+                    <q-item-section>
+                        <q-checkbox
+                            v-model="params.hasPdf"
+                            @update:model-value="searchFn()"
+                            :label="t('Has PDF')"
+                            toggle-indeterminate
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-separator />
+                <q-expansion-item :label="t('More options')" expand-separator>
+                    <q-item>
+                        <q-item-section>
+                            <q-input
+                                :label="t('Issued')"
+                                v-model="params.issued"
+                                @update:model-value="searchFn()"
+                                type="date"
+                                stack-label
+                            >
+                                <template #append>
+                                    <q-icon name="event" class="cursor-pointer">
+                                        <q-popup-proxy
+                                            cover
+                                            transition-show="scale"
+                                            transition-hide="scale"
+                                        >
+                                            <q-date v-model="params.issued">
+                                                <div class="row items-center justify-end">
+                                                    <q-btn
+                                                        v-close-popup
+                                                        label="Close"
+                                                        color="primary"
+                                                        flat
+                                                    />
+                                                </div>
+                                            </q-date>
+                                        </q-popup-proxy>
+                                    </q-icon>
+                                </template>
+                            </q-input>
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-input
+                                :label="t('Created')"
+                                v-model="params.created"
+                                @update:model-value="searchFn()"
+                                type="date"
+                                stack-label
+                            >
+                                <template #append>
+                                    <q-icon name="event" class="cursor-pointer">
+                                        <q-popup-proxy
+                                            cover
+                                            transition-show="scale"
+                                            transition-hide="scale"
+                                        >
+                                            <q-date v-model="params.created">
+                                                <div class="row items-center justify-end">
+                                                    <q-btn
+                                                        v-close-popup
+                                                        label="Close"
+                                                        color="primary"
+                                                        flat
+                                                    />
+                                                </div>
+                                            </q-date>
+                                        </q-popup-proxy>
+                                    </q-icon>
+                                </template>
+                            </q-input>
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-input
+                                :label="t('Dued')"
+                                v-model="params.dued"
+                                @update:model-value="searchFn()"
+                                type="date"
+                                stack-label
+                            >
+                                <!--        <template #append>
+                                    <q-icon name="event" class="cursor-pointer">
+                                        <q-popup-proxy
+                                            cover
+                                            transition-show="scale"
+                                            transition-hide="scale"
+                                        >
+                                            <q-date v-model="params.dued">
+                                                <div class="row items-center justify-end">
+                                                    <q-btn
+                                                        v-close-popup
+                                                        label="Close"
+                                                        color="primary"
+                                                        flat
+                                                    />
+                                                </div>
+                                            </q-date>
+                                        </q-popup-proxy>
+                                    </q-icon>
+                                </template> -->
+                            </q-input>
+                        </q-item-section>
+                    </q-item>
+                </q-expansion-item>
+            </q-list>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+    params:
+        search: Contains
+        clientFk: Customer
+        fi: FI
+        amount: Amount
+        max: Max
+        min: Min
+        hasPdf: Has PDF
+        issued: Issued
+        created: Created
+        dued: Dued
+es:
+    params:
+        search: Contiene
+        clientFk: Cliente
+        fi: CIF
+        amount: Importe
+        max: Max
+        min: Min
+        hasPdf: Tiene PDF
+        issued: Emitida
+        created: Creada
+        dued: Vencida
+    Customer ID: ID cliente
+    FI: CIF
+    Amount: Importe
+    Has PDF: Tiene PDF
+    Issued: Fecha emisión
+    Created: Fecha creación
+    Dued: Fecha vencimiento
+    More options: Más opciones
+</i18n>
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index a855f2695..2113bfdbb 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -1,18 +1,24 @@
 <script setup>
+import { onMounted, onUnmounted } from 'vue';
 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 InvoiceOutSummaryDialog from './Card/InvoiceOutSummaryDialog.vue';
 import { toDate, toCurrency } from 'src/filters/index';
-
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import TeleportSlot from 'components/ui/TeleportSlot.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import InvoiceOutFilter from './InvoiceOutFilter.vue';
 
+const state = useStateStore();
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
 
+onMounted(() => state.toggleRightDrawer());
+onUnmounted(() => state.toggleRightDrawer());
+
 function navigate(id) {
     router.push({ path: `/invoiceOut/${id}` });
 }
@@ -34,6 +40,9 @@ function viewSummary(id) {
             :label="t('Search by invoice id or reference')"
         />
     </teleport-slot>
+    <teleport-slot to="#rightPanel">
+        <InvoiceOutFilter data-key="InvoiceOutList" />
+    </teleport-slot>
     <q-page class="q-pa-md">
         <paginate
             data-key="InvoiceOutList"
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index 1672c70c2..72cbad627 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -38,177 +38,105 @@ const warehouses = ref([]);
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <q-item>
-                <q-item-section>
-                    <q-input
-                        v-model="params.clientFk"
-                        :label="t('Customer ID')"
-                        lazy-rules
-                        autofocus
-                    />
-                </q-item-section>
-                <q-item-section>
-                    <q-input v-model="params.orderFk" :label="t('Order ID')" lazy-rules />
-                </q-item-section>
-            </q-item>
-            <q-item>
-                <q-item-section>
-                    <q-input
-                        v-model="params.dateFrom"
-                        :label="t('From')"
-                        autofocus
-                        readonly
-                    >
-                        <template #append>
-                            <q-icon name="event" class="cursor-pointer">
-                                <q-popup-proxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
-                                >
-                                    <q-date v-model="params.dateFrom">
-                                        <div class="row items-center justify-end">
-                                            <q-btn
-                                                v-close-popup
-                                                label="Close"
-                                                color="primary"
-                                                flat
-                                            />
-                                        </div>
-                                    </q-date>
-                                </q-popup-proxy>
-                            </q-icon>
-                        </template>
-                    </q-input>
-                </q-item-section>
-                <q-item-section>
-                    <q-input v-model="params.dateTo" :label="t('To')" autofocus readonly>
-                        <template #append>
-                            <q-icon name="event" class="cursor-pointer">
-                                <q-popup-proxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
-                                >
-                                    <q-date v-model="params.dateTo">
-                                        <div class="row items-center justify-end">
-                                            <q-btn
-                                                v-close-popup
-                                                label="Close"
-                                                color="primary"
-                                                flat
-                                            />
-                                        </div>
-                                    </q-date>
-                                </q-popup-proxy>
-                            </q-icon>
-                        </template>
-                    </q-input>
-                </q-item-section>
-            </q-item>
-            <q-item>
-                <q-item-section>
-                    <q-select
-                        :label="t('Salesperson')"
-                        v-model="params.salesPersonFk"
-                        :options="workers"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        map-options
-                        use-input
-                        :input-debounce="0"
-                    >
-                        <template #prepend>
-                            <q-avatar color="orange" size="xs">
-                                <q-img
-                                    v-if="params.salesPersonFk"
-                                    :src="`/api/Images/user/160x160/${params.salesPersonFk}/download?access_token=${token}`"
-                                    spinner-color="white"
-                                />
-                            </q-avatar>
-                        </template>
-                    </q-select>
-                </q-item-section>
-            </q-item>
-            <q-item>
-                <q-item-section>
-                    <q-select
-                        :label="t('State')"
-                        v-model="params.stateFk"
-                        @update:model-value="searchFn()"
-                        :options="states"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        map-options
-                    />
-                </q-item-section>
-            </q-item>
-            <q-item>
-                <q-item-section>
-                    <q-input
-                        v-model="params.refFk"
-                        :label="t('Invoice Ref.')"
-                        lazy-rules
-                    />
-                </q-item-section>
-            </q-item>
-            <q-item>
-                <q-item-section>
-                    <q-checkbox
-                        v-model="params.myTeam"
-                        @update:model-value="searchFn()"
-                        :label="t('My team')"
-                        toggle-indeterminate
-                    />
-                </q-item-section>
-                <q-item-section>
-                    <q-checkbox
-                        v-model="params.pending"
-                        @update:model-value="searchFn()"
-                        :label="t('Pending')"
-                        toggle-indeterminate
-                    />
-                </q-item-section>
-            </q-item>
-            <q-item>
-                <q-item-section>
-                    <q-checkbox
-                        v-model="params.hasInvoice"
-                        @update:model-value="searchFn()"
-                        :label="t('Invoiced')"
-                        toggle-indeterminate
-                    />
-                </q-item-section>
-                <q-item-section>
-                    <q-checkbox
-                        v-model="params.hasRoute"
-                        @update:model-value="searchFn()"
-                        :label="t('Routed')"
-                        toggle-indeterminate
-                    />
-                </q-item-section>
-            </q-item>
-            <q-item>
-                <q-item-section>
-                    <q-checkbox
-                        v-model="params.problems"
-                        @update:model-value="searchFn()"
-                        :label="t('With problems')"
-                        toggle-indeterminate
-                    />
-                </q-item-section>
-            </q-item>
-            <q-separator />
-            <q-expansion-item :label="t('More options')" expand-separator>
+            <q-list dense>
+                <q-item>
+                    <q-item-section>
+                        <q-input
+                            v-model="params.clientFk"
+                            :label="t('Customer ID')"
+                            lazy-rules
+                        />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-input
+                            v-model="params.orderFk"
+                            :label="t('Order ID')"
+                            lazy-rules
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-input v-model="params.dateFrom" :label="t('From')" readonly>
+                            <template #append>
+                                <q-icon name="event" class="cursor-pointer">
+                                    <q-popup-proxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <q-date v-model="params.dateFrom">
+                                            <div class="row items-center justify-end">
+                                                <q-btn
+                                                    v-close-popup
+                                                    label="Close"
+                                                    color="primary"
+                                                    flat
+                                                />
+                                            </div>
+                                        </q-date>
+                                    </q-popup-proxy>
+                                </q-icon>
+                            </template>
+                        </q-input>
+                    </q-item-section>
+                    <q-item-section>
+                        <q-input v-model="params.dateTo" :label="t('To')" readonly>
+                            <template #append>
+                                <q-icon name="event" class="cursor-pointer">
+                                    <q-popup-proxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <q-date v-model="params.dateTo">
+                                            <div class="row items-center justify-end">
+                                                <q-btn
+                                                    v-close-popup
+                                                    label="Close"
+                                                    color="primary"
+                                                    flat
+                                                />
+                                            </div>
+                                        </q-date>
+                                    </q-popup-proxy>
+                                </q-icon>
+                            </template>
+                        </q-input>
+                    </q-item-section>
+                </q-item>
                 <q-item>
                     <q-item-section>
                         <q-select
-                            :label="t('Province')"
-                            v-model="params.provinceFk"
+                            :label="t('Salesperson')"
+                            v-model="params.salesPersonFk"
+                            :options="workers"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        >
+                            <template #prepend>
+                                <q-avatar color="orange" size="xs">
+                                    <q-img
+                                        v-if="params.salesPersonFk"
+                                        :src="`/api/Images/user/160x160/${params.salesPersonFk}/download?access_token=${token}`"
+                                        spinner-color="white"
+                                    />
+                                </q-avatar>
+                            </template>
+                        </q-select>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-select
+                            :label="t('State')"
+                            v-model="params.stateFk"
                             @update:model-value="searchFn()"
-                            :options="provinces"
+                            :options="states"
                             option-value="id"
                             option-label="name"
                             emit-value
@@ -218,33 +146,105 @@ const warehouses = ref([]);
                 </q-item>
                 <q-item>
                     <q-item-section>
-                        <q-select
-                            :label="t('Agency')"
-                            v-model="params.agencyModeFk"
-                            @update:model-value="searchFn()"
-                            :options="agencies"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
+                        <q-input
+                            v-model="params.refFk"
+                            :label="t('Invoice Ref.')"
+                            lazy-rules
                         />
                     </q-item-section>
                 </q-item>
                 <q-item>
                     <q-item-section>
-                        <q-select
-                            :label="t('Warehouse')"
-                            v-model="params.warehouseFk"
+                        <q-checkbox
+                            v-model="params.myTeam"
                             @update:model-value="searchFn()"
-                            :options="warehouses"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
+                            :label="t('My team')"
+                            toggle-indeterminate
+                        />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-checkbox
+                            v-model="params.pending"
+                            @update:model-value="searchFn()"
+                            :label="t('Pending')"
+                            toggle-indeterminate
                         />
                     </q-item-section>
                 </q-item>
-            </q-expansion-item>
+                <q-item>
+                    <q-item-section>
+                        <q-checkbox
+                            v-model="params.hasInvoice"
+                            @update:model-value="searchFn()"
+                            :label="t('Invoiced')"
+                            toggle-indeterminate
+                        />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-checkbox
+                            v-model="params.hasRoute"
+                            @update:model-value="searchFn()"
+                            :label="t('Routed')"
+                            toggle-indeterminate
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-checkbox
+                            v-model="params.problems"
+                            @update:model-value="searchFn()"
+                            :label="t('With problems')"
+                            toggle-indeterminate
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-separator />
+                <q-expansion-item :label="t('More options')" expand-separator>
+                    <q-item>
+                        <q-item-section>
+                            <q-select
+                                :label="t('Province')"
+                                v-model="params.provinceFk"
+                                @update:model-value="searchFn()"
+                                :options="provinces"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                map-options
+                            />
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-select
+                                :label="t('Agency')"
+                                v-model="params.agencyModeFk"
+                                @update:model-value="searchFn()"
+                                :options="agencies"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                map-options
+                            />
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-select
+                                :label="t('Warehouse')"
+                                v-model="params.warehouseFk"
+                                @update:model-value="searchFn()"
+                                :options="warehouses"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                map-options
+                            />
+                        </q-item-section>
+                    </q-item>
+                </q-expansion-item>
+            </q-list>
         </template>
     </VnFilterPanel>
 </template>
@@ -300,24 +300,3 @@ es:
     Yes: Si
     No: No
 </i18n>
-
-<!-- <i18n>
-{
-    "en": {
-        "search": "Contains",
-        "clientFk": 'Customer',
-        "orderFk": 'Order',
-        "dateFrom": 'From',
-        "dateTo": 'To',
-        "salesPersonFk": "Sales Person"
-    },
-    "es": {
-        "search": "Contiene",
-        "clientFk": 'Cliente',
-        "orderFk": 'Pedido',
-        "dateFrom": 'Desde',
-        "dateTo": 'Hasta',
-        "salesPersonFk": "Comercial"
-    }
-}
-</i18n> -->

From 2000081a61cd4bc992313c8d60c111335a61224b Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 28 Feb 2023 14:00:52 +0100
Subject: [PATCH 25/32] Updated filter panels

---
 src/pages/Claim/ClaimFilter.vue              | 20 ++---
 src/pages/Customer/CustomerFilter.vue        | 20 +----
 src/pages/InvoiceOut/Card/InvoiceOutCard.vue |  4 +-
 src/pages/InvoiceOut/InvoiceOutFilter.vue    | 75 ++++++++++-------
 src/pages/InvoiceOut/InvoiceOutList.vue      |  4 +-
 src/pages/Ticket/TicketFilter.vue            | 87 +++++++++++++-------
 6 files changed, 117 insertions(+), 93 deletions(-)

diff --git a/src/pages/Claim/ClaimFilter.vue b/src/pages/Claim/ClaimFilter.vue
index ad6e63b5a..dc33d1808 100644
--- a/src/pages/Claim/ClaimFilter.vue
+++ b/src/pages/Claim/ClaimFilter.vue
@@ -13,13 +13,7 @@ const props = defineProps({
 });
 
 const workers = ref();
-const workersCopy = ref();
 const states = ref();
-
-function setWorkers(data) {
-    workers.value = data;
-    workersCopy.value = data;
-}
 </script>
 
 <template>
@@ -27,7 +21,7 @@ function setWorkers(data) {
     <fetch-data
         url="Workers/activeWithInheritedRole"
         :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="setWorkers"
+        @on-fetch="(data) => (workers = data)"
         auto-load
     />
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
@@ -119,7 +113,10 @@ function setWorkers(data) {
                     </q-item-section>
                 </q-item>
                 <q-item class="q-mb-md">
-                    <q-item-section>
+                    <q-item-section v-if="!states">
+                        <q-skeleton type="QInput" class="full-width" />
+                    </q-item-section>
+                    <q-item-section v-if="states">
                         <q-select
                             :label="t('State')"
                             v-model="params.claimStateFk"
@@ -134,19 +131,22 @@ function setWorkers(data) {
                 </q-item>
                 <q-separator />
                 <q-expansion-item :label="t('More options')" expand-separator>
-                    <q-item>
+                    <!-- <q-item>
                         <q-item-section>
                             <q-select
                                 :label="t('Item')"
                                 v-model="params.itemFk"
                                 :options="items"
+                                :loading="loading"
+                                @filter="filterFn"
+                                @virtual-scroll="onScroll"
                                 option-value="id"
                                 option-label="name"
                                 emit-value
                                 map-options
                             />
                         </q-item-section>
-                    </q-item>
+                    </q-item> -->
                     <q-item>
                         <q-item-section>
                             <q-input
diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index 9d4f8f0f6..0e9c5be83 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -14,13 +14,7 @@ const props = defineProps({
 
 const provinces = ref();
 const workers = ref();
-const workersCopy = ref();
 const zones = ref();
-
-function setWorkers(data) {
-    workers.value = data;
-    workersCopy.value = data;
-}
 </script>
 
 <template>
@@ -29,7 +23,7 @@ function setWorkers(data) {
     <fetch-data
         url="Workers/activeWithInheritedRole"
         :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="setWorkers"
+        @on-fetch="(data) => (workers = data)"
         auto-load
     />
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
@@ -80,17 +74,7 @@ function setWorkers(data) {
                             map-options
                             use-input
                             :input-debounce="0"
-                        >
-                            <template #prepend>
-                                <q-avatar color="orange" size="xs">
-                                    <q-img
-                                        v-if="params.salesPersonFk"
-                                        :src="`/api/Images/user/160x160/${params.salesPersonFk}/download?access_token=${token}`"
-                                        spinner-color="white"
-                                    />
-                                </q-avatar>
-                            </template>
-                        </q-select>
+                        />
                     </q-item-section>
                 </q-item>
                 <q-item>
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
index bae91708d..382da1f0f 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
@@ -13,7 +13,7 @@ const { t } = useI18n();
     <teleport-slot to="#searchbar">
         <VnSearchbar
             data-key="InvoiceOutList"
-            :label="t('Search by invoice id or reference')"
+            :label="t('Search by invoice reference')"
         />
     </teleport-slot>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
@@ -32,5 +32,5 @@ const { t } = useI18n();
 
 <i18n>
 es:
-    Search by invoice id or reference: Buscar por id o referencia de la factura
+    Search by invoice reference: Buscar referencia de la factura
 </i18n>
diff --git a/src/pages/InvoiceOut/InvoiceOutFilter.vue b/src/pages/InvoiceOut/InvoiceOutFilter.vue
index 356e5498e..37283a404 100644
--- a/src/pages/InvoiceOut/InvoiceOutFilter.vue
+++ b/src/pages/InvoiceOut/InvoiceOutFilter.vue
@@ -113,9 +113,7 @@ function setWorkers(data) {
                             <q-input
                                 :label="t('Issued')"
                                 v-model="params.issued"
-                                @update:model-value="searchFn()"
-                                type="date"
-                                stack-label
+                                mask="date"
                             >
                                 <template #append>
                                     <q-icon name="event" class="cursor-pointer">
@@ -124,13 +122,22 @@ function setWorkers(data) {
                                             transition-show="scale"
                                             transition-hide="scale"
                                         >
-                                            <q-date v-model="params.issued">
-                                                <div class="row items-center justify-end">
+                                            <q-date v-model="params.issued" landscape>
+                                                <div
+                                                    class="row items-center justify-end q-gutter-sm"
+                                                >
                                                     <q-btn
-                                                        v-close-popup
-                                                        label="Close"
+                                                        :label="t('globals.cancel')"
                                                         color="primary"
                                                         flat
+                                                        v-close-popup
+                                                    />
+                                                    <q-btn
+                                                        :label="t('globals.confirm')"
+                                                        color="primary"
+                                                        flat
+                                                        @click="save"
+                                                        v-close-popup
                                                     />
                                                 </div>
                                             </q-date>
@@ -145,9 +152,7 @@ function setWorkers(data) {
                             <q-input
                                 :label="t('Created')"
                                 v-model="params.created"
-                                @update:model-value="searchFn()"
-                                type="date"
-                                stack-label
+                                mask="date"
                             >
                                 <template #append>
                                     <q-icon name="event" class="cursor-pointer">
@@ -156,13 +161,22 @@ function setWorkers(data) {
                                             transition-show="scale"
                                             transition-hide="scale"
                                         >
-                                            <q-date v-model="params.created">
-                                                <div class="row items-center justify-end">
+                                            <q-date v-model="params.created" landscape>
+                                                <div
+                                                    class="row items-center justify-end q-gutter-sm"
+                                                >
                                                     <q-btn
-                                                        v-close-popup
-                                                        label="Close"
+                                                        :label="t('globals.cancel')"
                                                         color="primary"
                                                         flat
+                                                        v-close-popup
+                                                    />
+                                                    <q-btn
+                                                        :label="t('globals.confirm')"
+                                                        color="primary"
+                                                        flat
+                                                        @click="save"
+                                                        v-close-popup
                                                     />
                                                 </div>
                                             </q-date>
@@ -174,33 +188,36 @@ function setWorkers(data) {
                     </q-item>
                     <q-item>
                         <q-item-section>
-                            <q-input
-                                :label="t('Dued')"
-                                v-model="params.dued"
-                                @update:model-value="searchFn()"
-                                type="date"
-                                stack-label
-                            >
-                                <!--        <template #append>
+                            <q-input :label="t('Dued')" v-model="params.dued" mask="date">
+                                <template #append>
                                     <q-icon name="event" class="cursor-pointer">
                                         <q-popup-proxy
                                             cover
                                             transition-show="scale"
                                             transition-hide="scale"
                                         >
-                                            <q-date v-model="params.dued">
-                                                <div class="row items-center justify-end">
+                                            <q-date v-model="params.dued" landscape>
+                                                <div
+                                                    class="row items-center justify-end q-gutter-sm"
+                                                >
                                                     <q-btn
-                                                        v-close-popup
-                                                        label="Close"
+                                                        :label="t('globals.cancel')"
                                                         color="primary"
                                                         flat
+                                                        v-close-popup
+                                                    />
+                                                    <q-btn
+                                                        :label="t('globals.confirm')"
+                                                        color="primary"
+                                                        flat
+                                                        @click="save"
+                                                        v-close-popup
                                                     />
                                                 </div>
                                             </q-date>
                                         </q-popup-proxy>
                                     </q-icon>
-                                </template> -->
+                                </template>
                             </q-input>
                         </q-item-section>
                     </q-item>
@@ -217,8 +234,8 @@ en:
         clientFk: Customer
         fi: FI
         amount: Amount
-        max: Max
         min: Min
+        max: Max
         hasPdf: Has PDF
         issued: Issued
         created: Created
@@ -229,8 +246,8 @@ es:
         clientFk: Cliente
         fi: CIF
         amount: Importe
-        max: Max
         min: Min
+        max: Max
         hasPdf: Tiene PDF
         issued: Emitida
         created: Creada
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index 2113bfdbb..650a6d4e6 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -37,7 +37,7 @@ function viewSummary(id) {
     <teleport-slot to="#searchbar">
         <VnSearchbar
             data-key="InvoiceOutList"
-            :label="t('Search by invoice id or reference')"
+            :label="t('Search by invoice reference')"
         />
     </teleport-slot>
     <teleport-slot to="#rightPanel">
@@ -149,5 +149,5 @@ function viewSummary(id) {
 
 <i18n>
 es:
-    Search by invoice id or reference: Buscar por id o referencia de la factura
+    Search by invoice reference: Buscar por referencia de la factura
 </i18n>
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index 72cbad627..9bbc6b7b3 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -12,11 +12,11 @@ const props = defineProps({
     },
 });
 
-const workers = ref([]);
-const provinces = ref([]);
-const states = ref([]);
-const agencies = ref([]);
-const warehouses = ref([]);
+const workers = ref();
+const provinces = ref();
+const states = ref();
+const agencies = ref();
+const warehouses = ref();
 </script>
 
 <template>
@@ -27,7 +27,7 @@ const warehouses = ref([]);
     <fetch-data
         url="Workers/activeWithInheritedRole"
         :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="setWorkers"
+        @on-fetch="(data) => (workers = data)"
         auto-load
     />
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
@@ -57,7 +57,7 @@ const warehouses = ref([]);
                 </q-item>
                 <q-item>
                     <q-item-section>
-                        <q-input v-model="params.dateFrom" :label="t('From')" readonly>
+                        <q-input v-model="params.dateFrom" :label="t('From')" mask="date">
                             <template #append>
                                 <q-icon name="event" class="cursor-pointer">
                                     <q-popup-proxy
@@ -65,13 +65,22 @@ const warehouses = ref([]);
                                         transition-show="scale"
                                         transition-hide="scale"
                                     >
-                                        <q-date v-model="params.dateFrom">
-                                            <div class="row items-center justify-end">
+                                        <q-date v-model="params.dateFrom" landscape>
+                                            <div
+                                                class="row items-center justify-end q-gutter-sm"
+                                            >
                                                 <q-btn
-                                                    v-close-popup
-                                                    label="Close"
+                                                    :label="t('globals.cancel')"
                                                     color="primary"
                                                     flat
+                                                    v-close-popup
+                                                />
+                                                <q-btn
+                                                    :label="t('globals.confirm')"
+                                                    color="primary"
+                                                    flat
+                                                    @click="save"
+                                                    v-close-popup
                                                 />
                                             </div>
                                         </q-date>
@@ -81,7 +90,7 @@ const warehouses = ref([]);
                         </q-input>
                     </q-item-section>
                     <q-item-section>
-                        <q-input v-model="params.dateTo" :label="t('To')" readonly>
+                        <q-input v-model="params.dateTo" :label="t('To')" mask="date">
                             <template #append>
                                 <q-icon name="event" class="cursor-pointer">
                                     <q-popup-proxy
@@ -89,13 +98,22 @@ const warehouses = ref([]);
                                         transition-show="scale"
                                         transition-hide="scale"
                                     >
-                                        <q-date v-model="params.dateTo">
-                                            <div class="row items-center justify-end">
+                                        <q-date v-model="params.dateTo" landscape>
+                                            <div
+                                                class="row items-center justify-end q-gutter-sm"
+                                            >
                                                 <q-btn
-                                                    v-close-popup
-                                                    label="Close"
+                                                    :label="t('globals.cancel')"
                                                     color="primary"
                                                     flat
+                                                    v-close-popup
+                                                />
+                                                <q-btn
+                                                    :label="t('globals.confirm')"
+                                                    color="primary"
+                                                    flat
+                                                    @click="save"
+                                                    v-close-popup
                                                 />
                                             </div>
                                         </q-date>
@@ -106,7 +124,10 @@ const warehouses = ref([]);
                     </q-item-section>
                 </q-item>
                 <q-item>
-                    <q-item-section>
+                    <q-item-section v-if="!workers">
+                        <q-skeleton type="QInput" class="full-width" />
+                    </q-item-section>
+                    <q-item-section v-if="workers">
                         <q-select
                             :label="t('Salesperson')"
                             v-model="params.salesPersonFk"
@@ -117,21 +138,14 @@ const warehouses = ref([]);
                             map-options
                             use-input
                             :input-debounce="0"
-                        >
-                            <template #prepend>
-                                <q-avatar color="orange" size="xs">
-                                    <q-img
-                                        v-if="params.salesPersonFk"
-                                        :src="`/api/Images/user/160x160/${params.salesPersonFk}/download?access_token=${token}`"
-                                        spinner-color="white"
-                                    />
-                                </q-avatar>
-                            </template>
-                        </q-select>
+                        />
                     </q-item-section>
                 </q-item>
                 <q-item>
-                    <q-item-section>
+                    <q-item-section v-if="!states">
+                        <q-skeleton type="QInput" class="full-width" />
+                    </q-item-section>
+                    <q-item-section v-if="states">
                         <q-select
                             :label="t('State')"
                             v-model="params.stateFk"
@@ -202,7 +216,10 @@ const warehouses = ref([]);
                 <q-separator />
                 <q-expansion-item :label="t('More options')" expand-separator>
                     <q-item>
-                        <q-item-section>
+                        <q-item-section v-if="!provinces">
+                            <q-skeleton type="QInput" class="full-width" />
+                        </q-item-section>
+                        <q-item-section v-if="provinces">
                             <q-select
                                 :label="t('Province')"
                                 v-model="params.provinceFk"
@@ -216,7 +233,10 @@ const warehouses = ref([]);
                         </q-item-section>
                     </q-item>
                     <q-item>
-                        <q-item-section>
+                        <q-item-section v-if="!states">
+                            <q-skeleton type="QInput" class="full-width" />
+                        </q-item-section>
+                        <q-item-section v-if="!states">
                             <q-select
                                 :label="t('Agency')"
                                 v-model="params.agencyModeFk"
@@ -230,7 +250,10 @@ const warehouses = ref([]);
                         </q-item-section>
                     </q-item>
                     <q-item>
-                        <q-item-section>
+                        <q-item-section v-if="!warehouses">
+                            <q-skeleton type="QInput" class="full-width" />
+                        </q-item-section>
+                        <q-item-section v-if="warehouses">
                             <q-select
                                 :label="t('Warehouse')"
                                 v-model="params.warehouseFk"

From 0fe96e9455488adffa2ce510bf4b7274796d39e1 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 28 Feb 2023 15:00:51 +0100
Subject: [PATCH 26/32] Updated drawer state

---
 src/components/NavBar.vue             |  8 +++++++-
 src/pages/Claim/ClaimList.vue         |  6 +++---
 src/pages/Dashboard/DashboardMain.vue | 11 ++++++++---
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 246647332..72599d0bc 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -57,7 +57,13 @@ onMounted(() => stateStore.setMounted());
                     </q-tooltip>
                     <PinnedModules />
                 </q-btn>
-                <q-btn flat @click="$emit('onToggleRightDrawer')" 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>
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 69c436ee9..328b93f20 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -12,13 +12,13 @@ import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import ClaimFilter from './ClaimFilter.vue';
 
-const state = useStateStore();
+const stateStore = useStateStore();
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
 
-onMounted(() => state.toggleRightDrawer());
-onUnmounted(() => state.toggleRightDrawer());
+onMounted(() => stateStore.toggleRightDrawer());
+onUnmounted(() => stateStore.toggleRightDrawer());
 
 function stateColor(code) {
     if (code === 'pending') return 'green';
diff --git a/src/pages/Dashboard/DashboardMain.vue b/src/pages/Dashboard/DashboardMain.vue
index aa74d1479..301967afb 100644
--- a/src/pages/Dashboard/DashboardMain.vue
+++ b/src/pages/Dashboard/DashboardMain.vue
@@ -1,11 +1,11 @@
 <script setup>
 import { onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useState } from 'src/composables/useState';
 import LeftMenu from 'components/LeftMenu.vue';
+import { useStateStore } from 'stores/useStateStore';
 import { useNavigationStore } from 'src/stores/useNavigationStore';
 
-const state = useState();
+const stateStore = useStateStore();
 const navigation = useNavigationStore();
 const { t } = useI18n();
 
@@ -15,7 +15,12 @@ const pinnedModules = computed(() => navigation.getPinnedModules());
 </script>
 
 <template>
-    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="800">
+    <q-drawer
+        v-model="stateStore.leftDrawer"
+        show-if-above
+        :width="256"
+        :breakpoint="1000"
+    >
         <q-scroll-area class="fit text-grey-8">
             <LeftMenu />
         </q-scroll-area>

From 55a9df0010636c443ec71e263a3b5d09c08a094f Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Wed, 1 Mar 2023 16:20:28 +0100
Subject: [PATCH 27/32] Claim RMA refactor

---
 src/components/PaginateData.vue              |  47 ++++---
 src/components/ui/VnSearchbar.vue            |  13 ++
 src/composables/useArrayData.js              |  17 +--
 src/filters/toDate.js                        |   2 +-
 src/layouts/MainLayout.vue                   |   1 -
 src/pages/Claim/Card/ClaimCard.vue           |  15 ++-
 src/pages/Claim/Card/ClaimRma.vue            | 112 +++++++---------
 src/pages/Claim/ClaimList.vue                |  24 +++-
 src/pages/Claim/ClaimMain.vue                |   6 +-
 src/pages/Claim/ClaimRmaList.vue             | 131 +++++++++++--------
 src/pages/Customer/Card/CustomerCard.vue     |  10 +-
 src/pages/Customer/CustomerList.vue          |   6 +-
 src/pages/Customer/CustomerMain.vue          |   7 +-
 src/pages/InvoiceOut/Card/InvoiceOutCard.vue |   6 +-
 src/pages/InvoiceOut/InvoiceOutList.vue      |   8 +-
 src/pages/InvoiceOut/InvoiceOutMain.vue      |   6 +-
 src/pages/Ticket/Card/TicketCard.vue         |   6 +-
 src/pages/Ticket/TicketList.vue              |   6 +-
 src/pages/Ticket/TicketMain.vue              |   6 +-
 src/stores/useArrayDataStore.js              |   6 +-
 20 files changed, 239 insertions(+), 196 deletions(-)

diff --git a/src/components/PaginateData.vue b/src/components/PaginateData.vue
index 2c091645c..56b5f82d8 100644
--- a/src/components/PaginateData.vue
+++ b/src/components/PaginateData.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'composables/useArrayData';
 
@@ -61,8 +61,8 @@ const arrayData = useArrayData(props.dataKey, {
 });
 const store = arrayData.store;
 
-onMounted(async () => {
-    if (props.autoLoad) await fetch();
+onMounted(() => {
+    if (props.autoLoad) fetch();
 });
 
 watch(
@@ -106,8 +106,10 @@ async function paginate() {
 }
 
 async function onLoad(...params) {
+    if (!store.data) return;
+
     const done = params[1];
-    if (!store.data || store.data.length === 0 || !props.url) return done(false);
+    if (store.data.length === 0 || !props.url) return done(false);
 
     pagination.value.page = pagination.value.page + 1;
 
@@ -119,22 +121,16 @@ async function onLoad(...params) {
 </script>
 
 <template>
-    <q-infinite-scroll @load="onLoad" :offset="offset" class="column items-center">
-        <div v-if="store" class="card-list q-gutter-y-md">
-            <slot name="body" :rows="store.data"></slot>
-            <div
-                v-if="!store.data.length && !isLoading"
-                class="info-row q-pa-md text-center"
-            >
-                <h5>
-                    {{ t('components.smartCard.noData') }}
-                </h5>
-            </div>
-            <div v-if="isLoading" class="info-row q-pa-md text-center">
-                <q-spinner color="orange" size="md" />
-            </div>
+    <div class="column items-center">
+        <div
+            v-if="store.data && store.data.length === 0 && !isLoading"
+            class="info-row q-pa-md text-center"
+        >
+            <h5>
+                {{ t('components.smartCard.noData') }}
+            </h5>
         </div>
-        <div v-if="!store" class="card-list q-gutter-y-md">
+        <div v-if="props.autoLoad && !store.data" class="card-list q-gutter-y-md">
             <q-card class="card" v-for="$index in $props.limit" :key="$index">
                 <q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
                     <q-item-section class="q-pa-md">
@@ -153,6 +149,19 @@ async function onLoad(...params) {
                 </q-item>
             </q-card>
         </div>
+    </div>
+    <q-infinite-scroll
+        v-if="store.data"
+        @load="onLoad"
+        :offset="offset"
+        class="column items-center"
+    >
+        <div v-if="store" class="card-list q-gutter-y-md">
+            <slot name="body" :rows="store.data"></slot>
+            <div v-if="isLoading" class="info-row q-pa-md text-center">
+                <q-spinner color="orange" size="md" />
+            </div>
+        </div>
     </q-infinite-scroll>
 </template>
 
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 2d75ccb22..04f4d7245 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -13,6 +13,11 @@ const props = defineProps({
         required: false,
         default: 'Search',
     },
+    info: {
+        type: String,
+        required: false,
+        default: '',
+    },
     redirect: {
         type: Boolean,
         required: false,
@@ -73,12 +78,20 @@ async function search() {
                     @click="searchText = ''"
                     class="cursor-pointer"
                 />
+
+                <q-icon v-if="props.info" name="info" class="cursor-info">
+                    <q-tooltip>{{ props.info }}</q-tooltip>
+                </q-icon>
             </template>
         </q-input>
     </q-form>
 </template>
 
 <style lang="scss">
+.cursor-info {
+    cursor: help;
+}
+
 #searchbar .q-field {
     min-width: 350px;
 }
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 9339fb456..10e80c727 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -1,4 +1,4 @@
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, computed } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import axios from 'axios';
 import { useArrayDataStore } from 'stores/useArrayDataStore';
@@ -47,9 +47,7 @@ export function useArrayData(key, userOptions) {
         };
 
         Object.assign(filter, store.userFilter);
-        Object.assign(filter, store.filter);
-
-        store.filter = filter;
+        Object.assign(store.filter, filter);
 
         const params = {
             filter: JSON.stringify(filter),
@@ -67,6 +65,7 @@ export function useArrayData(key, userOptions) {
         hasMoreData.value = response.data.length === limit;
 
         if (append === true) {
+            if (!store.data) store.data = [];
             for (const row of response.data) store.data.push(row);
         }
 
@@ -79,8 +78,7 @@ export function useArrayData(key, userOptions) {
         canceller = null;
     }
 
-    
-    function clear() {
+    function destroy() {
         if (arrayDataStore.get(key)) {
             arrayDataStore.clear(key);
         }
@@ -110,7 +108,7 @@ export function useArrayData(key, userOptions) {
     async function loadMore() {
         if (!hasMoreData.value) return;
 
-        store.skip = store.limit * (page.value - 1);
+        store.skip = store.limit * page.value;
         page.value += 1;
 
         await fetch({ append: true });
@@ -134,15 +132,18 @@ export function useArrayData(key, userOptions) {
         });
     }
 
+    const totalRows = computed(() => store.data && store.data.length | 0);
+
     return {
         fetch,
         applyFilter,
         addFilter,
         refresh,
-        clear,
+        destroy,
         loadMore,
         store,
         hasMoreData,
+        totalRows,
         updateStateParams,
     };
 }
diff --git a/src/filters/toDate.js b/src/filters/toDate.js
index 6f578bc4c..8fe8f3836 100644
--- a/src/filters/toDate.js
+++ b/src/filters/toDate.js
@@ -3,7 +3,7 @@ import { useI18n } from 'vue-i18n';
 export default function (value, options = {}) {
     if (!value) return;
 
-    if (!options.dateStyle) {
+    if (!options.dateStyle && !options.timeStyle) {
         options.day = '2-digit';
         options.month = '2-digit';
         options.year = 'numeric';
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 29fcfc3e9..acbd4a5c0 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -16,7 +16,6 @@ const stateStore = useStateStore();
             v-model="stateStore.rightDrawer"
             side="right"
             :width="256"
-            :breakpoint="1000"
             :persistent="false"
         >
             <q-scroll-area class="fit text-grey-8">
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index 19be5756d..e5116a360 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -1,19 +1,23 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useState } from 'composables/useState';
+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 state = useState();
+const stateStore = useStateStore();
 const { t } = useI18n();
 </script>
 <template>
     <teleport-slot to="#searchbar">
-        <VnSearchbar data-key="ClaimList" :label="t('Search by claim id or name')" />
+        <VnSearchbar
+            data-key="ClaimList"
+            :label="t('Search claim')"
+            :info="t('You can search by claim id or customer name')"
+        />
     </teleport-slot>
-    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
+    <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <q-scroll-area class="fit">
             <claim-descriptor />
             <q-separator />
@@ -29,5 +33,6 @@ const { t } = useI18n();
 
 <i18n>
 es:
-    Search by claim id or name: Buscar por id o nombre de la reclamación
+    Search claim: Buscar reclamación
+    You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
 </i18n>
diff --git a/src/pages/Claim/Card/ClaimRma.vue b/src/pages/Claim/Card/ClaimRma.vue
index 6f734b917..bf0e8294e 100644
--- a/src/pages/Claim/Card/ClaimRma.vue
+++ b/src/pages/Claim/Card/ClaimRma.vue
@@ -1,37 +1,49 @@
 <script setup>
+import axios from 'axios';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
-import axios from 'axios';
+import { useArrayData } from 'src/composables/useArrayData';
 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';
 
 const quasar = useQuasar();
 const route = useRoute();
 const { t } = useI18n();
+const arrayData = useArrayData('ClaimRma');
 
-const claim = ref([]);
+const claim = ref();
 const fetcher = ref();
 
-const filter = {
-    include: {
-        relation: 'rmas',
-        scope: {
-            include: {
-                relation: 'worker',
-                scope: {
-                    include: {
-                        relation: 'user',
-                    },
+const claimFilter = {
+    fields: ['rma'],
+};
+
+async function onFetch(data) {
+    claim.value = data;
+
+    const filter = {
+        include: {
+            relation: 'worker',
+            scope: {
+                include: {
+                    relation: 'user',
                 },
             },
-            order: 'created DESC',
         },
-    },
-};
+        order: 'created DESC',
+        where: {
+            code: claim.value.rma,
+        },
+    };
+
+    arrayData.applyFilter({ filter });
+}
 
 async function addRow() {
     const formData = {
@@ -39,7 +51,7 @@ async function addRow() {
     };
 
     await axios.post(`ClaimRmas`, formData);
-    await fetcher.value.fetch();
+    await arrayData.refresh();
 
     quasar.notify({
         type: 'positive',
@@ -48,19 +60,17 @@ async function addRow() {
     });
 }
 
-const confirmShown = ref(false);
-const rmaId = ref(null);
 function confirmRemove(id) {
-    confirmShown.value = true;
-    rmaId.value = id;
+    quasar
+        .dialog({
+            component: VnConfirm,
+        })
+        .onOk(() => remove(id));
 }
 
-async function remove() {
-    const id = rmaId.value;
-
+async function remove(id) {
     await axios.delete(`ClaimRmas/${id}`);
-    await fetcher.value.fetch();
-    confirmShown.value = false;
+    await arrayData.refresh();
 
     quasar.notify({
         type: 'positive',
@@ -68,41 +78,36 @@ async function remove() {
         icon: 'check',
     });
 }
-
-function hide() {
-    rmaId.value = null;
-}
 </script>
 <template>
     <fetch-data
-        ref="fetcher"
         :url="`Claims/${route.params.id}`"
-        :filter="filter"
-        @on-fetch="(data) => (claim = data)"
+        :filter="claimFilter"
+        @on-fetch="onFetch"
         auto-load
     />
-    <paginate :data="claim.rmas">
+    <paginate data-key="ClaimRma" url="ClaimRmas">
         <template #body="{ rows }">
             <q-card class="card">
-                <template v-for="row of rows" :key="row.id">
+                <template v-for="(row, index) of rows" :key="row.id">
                     <q-item class="q-pa-none items-start">
                         <q-item-section class="q-pa-md">
                             <q-list>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{
-                                            t('claim.rma.user')
-                                        }}</q-item-label>
-                                        <q-item-label>{{
-                                            row.worker.user.name
-                                        }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('claim.rma.user') }}
+                                        </q-item-label>
+                                        <q-item-label>
+                                            {{ row.worker.user.name }}
+                                        </q-item-label>
                                     </q-item-section>
                                 </q-item>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{
-                                            t('claim.rma.created')
-                                        }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('claim.rma.created') }}
+                                        </q-item-label>
                                         <q-item-label>
                                             {{
                                                 toDate(row.created, {
@@ -126,31 +131,12 @@ function hide() {
                             </q-btn>
                         </q-card-actions>
                     </q-item>
-                    <q-separator />
+                    <q-separator v-if="index !== rows.length - 1" />
                 </template>
             </q-card>
         </template>
     </paginate>
 
-    <q-dialog v-model="confirmShown" persistent @hide="hide">
-        <q-card>
-            <q-card-section class="row items-center">
-                <q-avatar icon="warning" color="primary" text-color="white" />
-                <span class="q-ml-sm">{{ t('globals.confirmRemove') }}</span>
-            </q-card-section>
-
-            <q-card-actions align="right">
-                <q-btn
-                    flat
-                    :label="t('globals.no')"
-                    color="primary"
-                    v-close-popup
-                    autofocus
-                />
-                <q-btn flat :label="t('globals.yes')" color="primary" @click="remove()" />
-            </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>
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 328b93f20..2f7f4279c 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -17,8 +17,17 @@ const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
 
-onMounted(() => stateStore.toggleRightDrawer());
-onUnmounted(() => stateStore.toggleRightDrawer());
+onMounted(() => {
+    if (!stateStore.rightDrawer) {
+        stateStore.toggleRightDrawer();
+    }
+});
+
+onUnmounted(() => {
+    if (stateStore.rightDrawer) {
+        stateStore.toggleRightDrawer();
+    }
+});
 
 function stateColor(code) {
     if (code === 'pending') return 'green';
@@ -42,13 +51,17 @@ function viewSummary(id) {
 
 <template>
     <teleport-slot to="#searchbar">
-        <VnSearchbar data-key="ClaimList" :label="t('Search by claim id or name')" />
+        <VnSearchbar
+            data-key="ClaimList"
+            :label="t('Search claim')"
+            :info="t('You can search by claim id or customer name')"
+        />
     </teleport-slot>
     <teleport-slot to="#rightPanel">
         <ClaimFilter data-key="ClaimList" />
     </teleport-slot>
     <q-page class="q-pa-md">
-        <paginate data-key="ClaimList" url="Claims/filter" sort-by="id DESC" auto-load>
+        <paginate data-key="ClaimList" url="Claims/filter" order="id DESC" auto-load>
             <template #body="{ rows }">
                 <q-card class="card" v-for="row of rows" :key="row.id">
                     <q-item
@@ -164,5 +177,6 @@ function viewSummary(id) {
 
 <i18n>
 es:
-    Search by claim id or name: Buscar por id o nombre de la reclamación
+    Search claim: Buscar reclamación
+    You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
 </i18n>
diff --git a/src/pages/Claim/ClaimMain.vue b/src/pages/Claim/ClaimMain.vue
index 287beb852..e4350a6e7 100644
--- a/src/pages/Claim/ClaimMain.vue
+++ b/src/pages/Claim/ClaimMain.vue
@@ -1,12 +1,12 @@
 <script setup>
-import { useState } from 'src/composables/useState';
+import { useStateStore } from 'stores/useStateStore';
 import LeftMenu from 'components/LeftMenu.vue';
 
-const state = useState();
+const stateStore = useStateStore();
 </script>
 
 <template>
-    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="800">
+    <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <q-scroll-area class="fit text-grey-8">
             <LeftMenu />
         </q-scroll-area>
diff --git a/src/pages/Claim/ClaimRmaList.vue b/src/pages/Claim/ClaimRmaList.vue
index 367169dc4..d4ef1fcf0 100644
--- a/src/pages/Claim/ClaimRmaList.vue
+++ b/src/pages/Claim/ClaimRmaList.vue
@@ -4,16 +4,15 @@ import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import axios from 'axios';
 import Paginate from 'src/components/PaginateData.vue';
+import { useArrayData } from 'src/composables/useArrayData';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
 
 const quasar = useQuasar();
 const { t } = useI18n();
 
-const rmas = ref([]);
-const card = ref(null);
-
-function onFetch(data) {
-    rmas.value = data.value;
-}
+const arrayData = useArrayData('ClaimRmaList');
+const isLoading = ref(false);
+const input = ref();
 
 const newRma = ref({
     code: '',
@@ -24,46 +23,38 @@ function onInputUpdate(value) {
     newRma.value.code = value.toUpperCase();
 }
 
-function submit() {
+async function submit() {
     const formData = newRma.value;
     if (formData.code === '') return;
 
-    axios
-        .post('ClaimRmas', formData)
-        .then(() => {
-            newRma.value = {
-                code: '',
-                crated: new Date(),
-            };
-        })
-        .then(() => card.value.refresh());
+    isLoading.value = true;
+    await axios.post('ClaimRmas', formData);
+    await arrayData.refresh();
+    isLoading.value = false;
+    input.value.$el.focus();
+
+    newRma.value = {
+        code: '',
+        created: new Date(),
+    };
 }
 
-const confirmShown = ref(false);
-const rmaId = ref(null);
 function confirm(id) {
-    confirmShown.value = true;
-    rmaId.value = id;
-}
-
-function remove() {
-    const id = rmaId.value;
-    axios
-        .delete(`ClaimRmas/${id}`)
-        .then(() => {
-            confirmShown.value = false;
-
-            quasar.notify({
-                type: 'positive',
-                message: 'Entry deleted',
-                icon: 'check',
-            });
+    quasar
+        .dialog({
+            component: VnConfirm,
         })
-        .then(() => card.value.refresh());
+        .onOk(() => remove(id));
 }
 
-function hide() {
-    rmaId.value = null;
+async function remove(id) {
+    await axios.delete(`ClaimRmas/${id}`);
+    await arrayData.refresh();
+    quasar.notify({
+        type: 'positive',
+        message: t('globals.rowRemoved'),
+        icon: 'check',
+    });
 }
 </script>
 
@@ -73,34 +64,74 @@ function hide() {
             <q-card class="card q-pa-md">
                 <q-form @submit="submit">
                     <q-input
+                        ref="input"
                         v-model="newRma.code"
                         :label="t('claim.rmaList.code')"
                         @update:model-value="onInputUpdate"
                         class="q-mb-md"
+                        :readonly="isLoading"
+                        :loading="isLoading"
                         autofocus
                     />
-                    <div class="text-caption">{{ rmas.length }} {{ t('claim.rmaList.records') }}</div>
+                    <div class="text-caption">
+                        {{ arrayData.totalRows }} {{ t('claim.rmaList.records') }}
+                    </div>
                 </q-form>
             </q-card>
         </q-page-sticky>
-
-        <paginate ref="card" url="/ClaimRmas" @on-fetch="onFetch" sort-by="id DESC" auto-load>
+        <paginate
+            data-key="ClaimRmaList"
+            url="ClaimRmas"
+            order="id DESC"
+            :offset="50"
+            auto-load
+        >
             <template #body="{ rows }">
                 <q-card class="card">
-                    <template v-for="row of rows" :key="row.code">
+                    <template v-if="isLoading">
                         <q-item class="q-pa-none items-start">
                             <q-item-section class="q-pa-md">
                                 <q-list>
                                     <q-item class="q-pa-none">
                                         <q-item-section>
-                                            <q-item-label caption>{{ t('claim.rmaList.code') }}</q-item-label>
+                                            <q-item-label caption>
+                                                <q-skeleton />
+                                            </q-item-label>
+                                            <q-item-label
+                                                ><q-skeleton type="text"
+                                            /></q-item-label>
+                                        </q-item-section>
+                                    </q-item>
+                                </q-list>
+                            </q-item-section>
+                            <q-card-actions vertical class="justify-between">
+                                <q-skeleton type="circle" class="q-mb-md" size="40px" />
+                            </q-card-actions>
+                        </q-item>
+                        <q-separator />
+                    </template>
+                    <template v-for="row of rows" :key="row.id">
+                        <q-item class="q-pa-none items-start">
+                            <q-item-section class="q-pa-md">
+                                <q-list>
+                                    <q-item class="q-pa-none">
+                                        <q-item-section>
+                                            <q-item-label caption>{{
+                                                t('claim.rmaList.code')
+                                            }}</q-item-label>
                                             <q-item-label>{{ row.code }}</q-item-label>
                                         </q-item-section>
                                     </q-item>
                                 </q-list>
                             </q-item-section>
                             <q-card-actions vertical class="justify-between">
-                                <q-btn flat round color="primary" icon="vn:bin" @click="confirm(row.id)">
+                                <q-btn
+                                    flat
+                                    round
+                                    color="primary"
+                                    icon="vn:bin"
+                                    @click="confirm(row.id)"
+                                >
                                     <q-tooltip>{{ t('globals.remove') }}</q-tooltip>
                                 </q-btn>
                             </q-card-actions>
@@ -111,20 +142,6 @@ function hide() {
             </template>
         </paginate>
     </q-page>
-
-    <q-dialog v-model="confirmShown" persistent @hide="hide">
-        <q-card>
-            <q-card-section class="row items-center">
-                <q-avatar icon="warning" color="primary" text-color="white" />
-                <span class="q-ml-sm">{{ t('globals.confirmRemove') }}</span>
-            </q-card-section>
-
-            <q-card-actions align="right">
-                <q-btn flat :label="t('globals.no')" color="primary" v-close-popup autofocus />
-                <q-btn flat :label="t('globals.yes')" color="primary" @click="remove()" />
-            </q-card-actions>
-        </q-card>
-    </q-dialog>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 9cc9cafb8..9c84369e3 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -1,12 +1,12 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useState } from 'src/composables/useState';
+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 state = useState();
+const stateStore = useStateStore();
 const { t } = useI18n();
 </script>
 <template>
@@ -16,7 +16,11 @@ const { t } = useI18n();
             :label="t('Search by customer id or name')"
         />
     </teleport-slot>
-    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
+    <q-drawer
+        v-model="stateStore.leftDrawer"
+        show-if-above
+        :width="256"
+    >
         <q-scroll-area class="fit">
             <CustomerDescriptor />
             <q-separator />
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index a7cd90996..a892a435b 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -10,13 +10,13 @@ import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import CustomerFilter from './CustomerFilter.vue';
 
-const state = useStateStore();
+const stateStore = useStateStore();
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
 
-onMounted(() => state.toggleRightDrawer());
-onUnmounted(() => state.toggleRightDrawer());
+onMounted(() => (stateStore.rightDrawer = true));
+onUnmounted(() => (stateStore.rightDrawer = false));
 
 function navigate(id) {
     router.push({ path: `/customer/${id}` });
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
index 5f4feed9d..7b6f42c7d 100644
--- a/src/pages/Customer/CustomerMain.vue
+++ b/src/pages/Customer/CustomerMain.vue
@@ -6,12 +6,7 @@ const stateStore = useStateStore();
 </script>
 
 <template>
-    <q-drawer
-        v-model="stateStore.leftDrawer"
-        show-if-above
-        :width="256"
-        :breakpoint="800"
-    >
+    <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <q-scroll-area class="fit text-grey-8">
             <LeftMenu />
         </q-scroll-area>
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
index 382da1f0f..44a1ce576 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
@@ -1,12 +1,12 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useState } from 'composables/useState';
+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 state = useState();
+const stateStore = useStateStore();
 const { t } = useI18n();
 </script>
 <template>
@@ -16,7 +16,7 @@ const { t } = useI18n();
             :label="t('Search by invoice reference')"
         />
     </teleport-slot>
-    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
+    <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <q-scroll-area class="fit">
             <InvoiceOutDescriptor />
             <q-separator />
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index 650a6d4e6..1f6baf4dd 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -11,13 +11,13 @@ import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import InvoiceOutFilter from './InvoiceOutFilter.vue';
 
-const state = useStateStore();
+const stateStore = useStateStore();
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
 
-onMounted(() => state.toggleRightDrawer());
-onUnmounted(() => state.toggleRightDrawer());
+onMounted(() => (stateStore.rightDrawer = true));
+onUnmounted(() => (stateStore.rightDrawer = false));
 
 function navigate(id) {
     router.push({ path: `/invoiceOut/${id}` });
@@ -47,7 +47,7 @@ function viewSummary(id) {
         <paginate
             data-key="InvoiceOutList"
             url="InvoiceOuts/filter"
-            sort-by="issued DESC, id DESC"
+            order="issued DESC, id DESC"
             auto-load
         >
             <template #body="{ rows }">
diff --git a/src/pages/InvoiceOut/InvoiceOutMain.vue b/src/pages/InvoiceOut/InvoiceOutMain.vue
index 8e63f372c..2fb079daa 100644
--- a/src/pages/InvoiceOut/InvoiceOutMain.vue
+++ b/src/pages/InvoiceOut/InvoiceOutMain.vue
@@ -1,12 +1,12 @@
 <script setup>
-import { useState } from 'src/composables/useState';
+import { useStateStore } from 'stores/useStateStore';
 import LeftMenu from 'src/components/LeftMenu.vue';
 
-const state = useState();
+const stateStore = useStateStore();
 </script>
 
 <template>
-    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="800">
+    <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <q-scroll-area class="fit text-grey-8">
             <LeftMenu />
         </q-scroll-area>
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index d5beb673a..5592d0ead 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -1,19 +1,19 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useState } from 'src/composables/useState';
+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 state = useState();
+const stateStore = useStateStore();
 const { t } = useI18n();
 </script>
 <template>
     <teleport-slot to="#searchbar">
         <VnSearchbar data-key="TicketList" :label="t('Search by ticket id or alias')" />
     </teleport-slot>
-    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
+    <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <q-scroll-area class="fit">
             <TicketDescriptor />
             <q-separator />
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index 98c5fed13..ce336d83e 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -17,8 +17,8 @@ const quasar = useQuasar();
 const { t } = useI18n();
 const stateStore = useStateStore();
 
-onMounted(() => stateStore.toggleRightDrawer());
-onUnmounted(() => stateStore.toggleRightDrawer());
+onMounted(() => (stateStore.rightDrawer = true));
+onUnmounted(() => (stateStore.rightDrawer = false));
 
 const filter = {
     include: [
@@ -82,7 +82,7 @@ function viewSummary(id) {
             data-key="TicketList"
             url="Tickets/filter"
             :filter="filter"
-            sort-by="id DESC"
+            order="id DESC"
             auto-load
         >
             <template #body="{ rows }">
diff --git a/src/pages/Ticket/TicketMain.vue b/src/pages/Ticket/TicketMain.vue
index 287beb852..e4350a6e7 100644
--- a/src/pages/Ticket/TicketMain.vue
+++ b/src/pages/Ticket/TicketMain.vue
@@ -1,12 +1,12 @@
 <script setup>
-import { useState } from 'src/composables/useState';
+import { useStateStore } from 'stores/useStateStore';
 import LeftMenu from 'components/LeftMenu.vue';
 
-const state = useState();
+const stateStore = useStateStore();
 </script>
 
 <template>
-    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="800">
+    <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <q-scroll-area class="fit text-grey-8">
             <LeftMenu />
         </q-scroll-area>
diff --git a/src/stores/useArrayDataStore.js b/src/stores/useArrayDataStore.js
index 958cafb1e..9d904d757 100644
--- a/src/stores/useArrayDataStore.js
+++ b/src/stores/useArrayDataStore.js
@@ -9,7 +9,7 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
     }
 
     function set(key) {
-        state.value[key] = { 
+        state.value[key] = {
             filter: {},
             userFilter: {},
             userParams: {},
@@ -17,7 +17,7 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
             limit: 10,
             skip: 0,
             order: '',
-            data: ref([]) 
+            data: ref(),
         };
     }
 
@@ -28,6 +28,6 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
     return {
         get,
         set,
-        clear
+        clear,
     };
 });

From fe2d1d8a3ed3172ad9e86772d2f30e070ce53c8c Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Thu, 2 Mar 2023 07:59:15 +0100
Subject: [PATCH 28/32] Updated unit test

---
 test/vitest/__tests__/components/Paginate.spec.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/test/vitest/__tests__/components/Paginate.spec.js b/test/vitest/__tests__/components/Paginate.spec.js
index cb0109960..5a6b08712 100644
--- a/test/vitest/__tests__/components/Paginate.spec.js
+++ b/test/vitest/__tests__/components/Paginate.spec.js
@@ -20,6 +20,7 @@ describe('Paginate', () => {
 
     afterEach(() => {
         vm.store.data = [];
+        vm.store.skip = 0;
         vm.pagination.page = 1;
         vm.hasMoreData = true;
     });
@@ -56,12 +57,12 @@ describe('Paginate', () => {
 
             await vm.paginate();
 
-            expect(vm.store.skip).toEqual(0);
+            expect(vm.store.skip).toEqual(3);
             expect(vm.store.data.length).toEqual(6);
 
             await vm.paginate();
 
-            expect(vm.store.skip).toEqual(3);
+            expect(vm.store.skip).toEqual(6);
             expect(vm.store.data.length).toEqual(9);
         });
     });

From 3b7cf5f3ba5ff2c24776cdbd369d36b62be72382 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Thu, 2 Mar 2023 08:23:02 +0100
Subject: [PATCH 29/32] Removed quasar install from jenkinsfile

---
 Jenkinsfile | 1 -
 1 file changed, 1 deletion(-)

diff --git a/Jenkinsfile b/Jenkinsfile
index de26c7dd0..437332c4e 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -32,7 +32,6 @@ pipeline {
             }
             steps {
                 nodejs('node-v18') {
-                    // sh 'npm install -g @quasar/cli'
                     sh 'npm install --no-audit --prefer-offline'
                 }
             }

From 0bd205a75c9f83ab4ee0bb9a6422c47659d29551 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Thu, 2 Mar 2023 08:29:38 +0100
Subject: [PATCH 30/32] Use browser locale as default lang

---
 src/boot/i18n.js           | 2 +-
 src/components/NavBar.vue  | 2 --
 src/layouts/MainLayout.vue | 2 +-
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/boot/i18n.js b/src/boot/i18n.js
index 837bad936..b23b6d5fd 100644
--- a/src/boot/i18n.js
+++ b/src/boot/i18n.js
@@ -3,7 +3,7 @@ import { createI18n } from 'vue-i18n';
 import messages from 'src/i18n';
 
 const i18n = createI18n({
-    locale: 'en',
+    locale: navigator.language || navigator.userLanguage,
     fallbackLocale: 'en',
     globalInjection: true,
     messages,
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 72599d0bc..9174e4d3a 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -15,8 +15,6 @@ const user = state.getUser();
 const token = session.getToken();
 const appName = 'Lilium';
 
-defineEmits(['onToggleRightDrawer']);
-
 onMounted(() => stateStore.setMounted());
 </script>
 
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index acbd4a5c0..a8d149d0a 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -10,7 +10,7 @@ const stateStore = useStateStore();
 
 <template>
     <q-layout view="hHh LpR fFf">
-        <Navbar @on-toggle-right-drawer="stateStore.toggleRightDrawer()" />
+        <Navbar />
         <router-view></router-view>
         <q-drawer
             v-model="stateStore.rightDrawer"

From 79d6b2139c460aace0c4072b48ba0e7979498a9c Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Thu, 2 Mar 2023 08:39:13 +0100
Subject: [PATCH 31/32] Updated searchbar labels

---
 src/pages/Customer/Card/CustomerCard.vue     | 12 +++++-------
 src/pages/Customer/CustomerList.vue          |  6 ++++--
 src/pages/InvoiceOut/Card/InvoiceOutCard.vue | 10 ++++++----
 src/pages/InvoiceOut/InvoiceOutList.vue      |  6 ++++--
 src/pages/Ticket/Card/TicketCard.vue         |  9 +++++++--
 src/pages/Ticket/TicketList.vue              |  9 +++++++--
 6 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 9c84369e3..010fb7b99 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -13,14 +13,11 @@ const { t } = useI18n();
     <teleport-slot to="#searchbar">
         <VnSearchbar
             data-key="CustomerList"
-            :label="t('Search by customer id or name')"
+            :label="t('Search customer')"
+            :info="t('You can search by customer id or name')"
         />
     </teleport-slot>
-    <q-drawer
-        v-model="stateStore.leftDrawer"
-        show-if-above
-        :width="256"
-    >
+    <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <q-scroll-area class="fit">
             <CustomerDescriptor />
             <q-separator />
@@ -36,5 +33,6 @@ const { t } = useI18n();
 
 <i18n>
 es:
-    Search by customer id or name: Buscar por id o nombre del cliente
+    Search customer: Buscar cliente
+    You can search by customer id or name: Puedes buscar por id o nombre del cliente
 </i18n>
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index a892a435b..745731962 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -36,7 +36,8 @@ function viewSummary(id) {
     <teleport-slot to="#searchbar">
         <VnSearchbar
             data-key="CustomerList"
-            :label="t('Search by customer id or name')"
+            :label="t('Search customer')"
+            :info="t('You can search by customer id or name')"
         />
     </teleport-slot>
     <teleport-slot to="#rightPanel">
@@ -131,5 +132,6 @@ function viewSummary(id) {
 
 <i18n>
 es:
-    Search by customer id or name: Buscar por id o nombre del cliente
+    Search customer: Buscar cliente
+    You can search by customer id or name: Puedes buscar por id o nombre del cliente
 </i18n>
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
index 44a1ce576..8e693fd81 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
@@ -13,7 +13,8 @@ const { t } = useI18n();
     <teleport-slot to="#searchbar">
         <VnSearchbar
             data-key="InvoiceOutList"
-            :label="t('Search by invoice reference')"
+            :label="t('Search invoice')"
+            :info="t('You can search by invoice reference')"
         />
     </teleport-slot>
     <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
@@ -31,6 +32,7 @@ const { t } = useI18n();
 </template>
 
 <i18n>
-es:
-    Search by invoice reference: Buscar referencia de la factura
-</i18n>
+    es:
+        Search invoice: Buscar factura emitida
+        You can search by invoice reference: Puedes buscar por referencia de la factura
+    </i18n>
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index 1f6baf4dd..e1f7334c7 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -37,7 +37,8 @@ function viewSummary(id) {
     <teleport-slot to="#searchbar">
         <VnSearchbar
             data-key="InvoiceOutList"
-            :label="t('Search by invoice reference')"
+            :label="t('Search invoice')"
+            :info="t('You can search by invoice reference')"
         />
     </teleport-slot>
     <teleport-slot to="#rightPanel">
@@ -149,5 +150,6 @@ function viewSummary(id) {
 
 <i18n>
 es:
-    Search by invoice reference: Buscar por referencia de la factura
+    Search invoice: Buscar factura emitida
+    You can search by invoice reference: Puedes buscar por referencia de la factura
 </i18n>
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 5592d0ead..1a8c5a1af 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -11,7 +11,11 @@ const { t } = useI18n();
 </script>
 <template>
     <teleport-slot to="#searchbar">
-        <VnSearchbar data-key="TicketList" :label="t('Search by ticket id or alias')" />
+        <VnSearchbar
+            data-key="TicketList"
+            :label="t('Search ticket')"
+            :info="t('You can search by ticket id or alias')"
+        />
     </teleport-slot>
     <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <q-scroll-area class="fit">
@@ -58,5 +62,6 @@ const { t } = useI18n();
 
 <i18n>
 es:
-    Search by ticket id or alias: Buscar por id o nombre del ticket
+    Search ticket: Buscar ticket
+    You can search by ticket id or alias: Puedes buscar por id o alias del ticket
 </i18n>
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index ce336d83e..0f9cfdd4f 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -72,7 +72,11 @@ function viewSummary(id) {
 
 <template>
     <teleport-slot to="#searchbar">
-        <VnSearchbar data-key="TicketList" :label="t('Search by ticket id or alias')" />
+        <VnSearchbar
+            data-key="TicketList"
+            :label="t('Search ticket')"
+            :info="t('You can search by ticket id or alias')"
+        />
     </teleport-slot>
     <teleport-slot to="#rightPanel">
         <TicketFilter data-key="TicketList" />
@@ -190,6 +194,7 @@ function viewSummary(id) {
 
 <i18n>
 es:
-    Search by ticket id or alias: Buscar por id o nombre del ticket
+    Search ticket: Buscar ticket
+    You can search by ticket id or alias: Puedes buscar por id o alias del ticket
     Zone: Zona
 </i18n>

From c09437f00ed729ecdf33790ecad7685d641df94e Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Thu, 2 Mar 2023 09:23:08 +0100
Subject: [PATCH 32/32] Show claim filter panel

---
 src/pages/Claim/ClaimList.vue | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 2f7f4279c..708472108 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -17,17 +17,8 @@ const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
 
-onMounted(() => {
-    if (!stateStore.rightDrawer) {
-        stateStore.toggleRightDrawer();
-    }
-});
-
-onUnmounted(() => {
-    if (stateStore.rightDrawer) {
-        stateStore.toggleRightDrawer();
-    }
-});
+onMounted(() => (stateStore.rightDrawer = true));
+onUnmounted(() => (stateStore.rightDrawer = false));
 
 function stateColor(code) {
     if (code === 'pending') return 'green';