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] 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 e1492d3bb1..837bad9360 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 29967d8c7a..b99598e107 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 0000000000..a64ee73672
--- /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 9ab22117e4..4373b0354a 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 5b44fceb6f..6f0b92a1b2 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 26469c2862..63ba0ba82d 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> -->