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] 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"