verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

Updated filter panels

This commit is contained in:
Joan Sanchez 2023-02-28 14:00:52 +01:00
parent a5f83b553b
commit 2000081a61
6 changed files with 117 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/pages/Claim/ClaimFilter.vue
View File

@ -13,13 +13,7 @@ const props = defineProps({
}); });
const workers = ref(); const workers = ref();
const workersCopy = ref();
const states = ref(); const states = ref();
function setWorkers(data) {
workers.value = data;
workersCopy.value = data;
}
</script> </script>
<template> <template>
@ -27,7 +21,7 @@ function setWorkers(data) {
<fetch-data <fetch-data
url="Workers/activeWithInheritedRole" url="Workers/activeWithInheritedRole"
:filter="{ where: { role: 'salesPerson' } }" :filter="{ where: { role: 'salesPerson' } }"
@on-fetch="setWorkers" @on-fetch="(data) => (workers = data)"
auto-load auto-load
/> />
<VnFilterPanel :data-key="props.dataKey" :search-button="true"> <VnFilterPanel :data-key="props.dataKey" :search-button="true">
@ -119,7 +113,10 @@ function setWorkers(data) {
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item class="q-mb-md"> <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 <q-select
:label="t('State')" :label="t('State')"
v-model="params.claimStateFk" v-model="params.claimStateFk"
@ -134,19 +131,22 @@ function setWorkers(data) {
</q-item> </q-item>
<q-separator /> <q-separator />
<q-expansion-item :label="t('More options')" expand-separator> <q-expansion-item :label="t('More options')" expand-separator>
<q-item> <!-- <q-item>
<q-item-section> <q-item-section>
<q-select <q-select
:label="t('Item')" :label="t('Item')"
v-model="params.itemFk" v-model="params.itemFk"
:options="items" :options="items"
:loading="loading"
@filter="filterFn"
@virtual-scroll="onScroll"
option-value="id" option-value="id"
option-label="name" option-label="name"
emit-value emit-value
map-options map-options
/> />
</q-item-section> </q-item-section>
</q-item> </q-item> -->
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-input <q-input

20
src/pages/Customer/CustomerFilter.vue
View File

@ -14,13 +14,7 @@ const props = defineProps({
const provinces = ref(); const provinces = ref();
const workers = ref(); const workers = ref();
const workersCopy = ref();
const zones = ref(); const zones = ref();
function setWorkers(data) {
workers.value = data;
workersCopy.value = data;
}
</script> </script>
<template> <template>
@ -29,7 +23,7 @@ function setWorkers(data) {
<fetch-data <fetch-data
url="Workers/activeWithInheritedRole" url="Workers/activeWithInheritedRole"
:filter="{ where: { role: 'salesPerson' } }" :filter="{ where: { role: 'salesPerson' } }"
@on-fetch="setWorkers" @on-fetch="(data) => (workers = data)"
auto-load auto-load
/> />
<VnFilterPanel :data-key="props.dataKey" :search-button="true"> <VnFilterPanel :data-key="props.dataKey" :search-button="true">
@ -80,17 +74,7 @@ function setWorkers(data) {
map-options map-options
use-input use-input
:input-debounce="0" :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-section>
</q-item> </q-item>
<q-item> <q-item>

4
src/pages/InvoiceOut/Card/InvoiceOutCard.vue
View File

@ -13,7 +13,7 @@ const { t } = useI18n();
<teleport-slot to="#searchbar"> <teleport-slot to="#searchbar">
<VnSearchbar <VnSearchbar
data-key="InvoiceOutList" data-key="InvoiceOutList"
:label="t('Search by invoice id or reference')" :label="t('Search by invoice reference')"
/> />
</teleport-slot> </teleport-slot>
<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="500">
@ -32,5 +32,5 @@ const { t } = useI18n();
<i18n> <i18n>
es: 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> </i18n>

75
src/pages/InvoiceOut/InvoiceOutFilter.vue
View File

@ -113,9 +113,7 @@ function setWorkers(data) {
<q-input <q-input
:label="t('Issued')" :label="t('Issued')"
v-model="params.issued" v-model="params.issued"
@update:model-value="searchFn()" mask="date"
type="date"
stack-label
> >
<template #append> <template #append>
<q-icon name="event" class="cursor-pointer"> <q-icon name="event" class="cursor-pointer">
@ -124,13 +122,22 @@ function setWorkers(data) {
transition-show="scale" transition-show="scale"
transition-hide="scale" transition-hide="scale"
> >
<q-date v-model="params.issued"> <q-date v-model="params.issued" landscape>
<div class="row items-center justify-end"> <div
class="row items-center justify-end q-gutter-sm"
>
<q-btn <q-btn
v-close-popup :label="t('globals.cancel')"
label="Close"
color="primary" color="primary"
flat flat
v-close-popup
/>
<q-btn
:label="t('globals.confirm')"
color="primary"
flat
@click="save"
v-close-popup
/> />
</div> </div>
</q-date> </q-date>
@ -145,9 +152,7 @@ function setWorkers(data) {
<q-input <q-input
:label="t('Created')" :label="t('Created')"
v-model="params.created" v-model="params.created"
@update:model-value="searchFn()" mask="date"
type="date"
stack-label
> >
<template #append> <template #append>
<q-icon name="event" class="cursor-pointer"> <q-icon name="event" class="cursor-pointer">
@ -156,13 +161,22 @@ function setWorkers(data) {
transition-show="scale" transition-show="scale"
transition-hide="scale" transition-hide="scale"
> >
<q-date v-model="params.created"> <q-date v-model="params.created" landscape>
<div class="row items-center justify-end"> <div
class="row items-center justify-end q-gutter-sm"
>
<q-btn <q-btn
v-close-popup :label="t('globals.cancel')"
label="Close"
color="primary" color="primary"
flat flat
v-close-popup
/>
<q-btn
:label="t('globals.confirm')"
color="primary"
flat
@click="save"
v-close-popup
/> />
</div> </div>
</q-date> </q-date>
@ -174,33 +188,36 @@ function setWorkers(data) {
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-input <q-input :label="t('Dued')" v-model="params.dued" mask="date">
:label="t('Dued')" <template #append>
v-model="params.dued"
@update:model-value="searchFn()"
type="date"
stack-label
>
<!-- <template #append>
<q-icon name="event" class="cursor-pointer"> <q-icon name="event" class="cursor-pointer">
<q-popup-proxy <q-popup-proxy
cover cover
transition-show="scale" transition-show="scale"
transition-hide="scale" transition-hide="scale"
> >
<q-date v-model="params.dued"> <q-date v-model="params.dued" landscape>
<div class="row items-center justify-end"> <div
class="row items-center justify-end q-gutter-sm"
>
<q-btn <q-btn
v-close-popup :label="t('globals.cancel')"
label="Close"
color="primary" color="primary"
flat flat
v-close-popup
/>
<q-btn
:label="t('globals.confirm')"
color="primary"
flat
@click="save"
v-close-popup
/> />
</div> </div>
</q-date> </q-date>
</q-popup-proxy> </q-popup-proxy>
</q-icon> </q-icon>
</template> --> </template>
</q-input> </q-input>
</q-item-section> </q-item-section>
</q-item> </q-item>
@ -217,8 +234,8 @@ en:
clientFk: Customer clientFk: Customer
fi: FI fi: FI
amount: Amount amount: Amount
max: Max
min: Min min: Min
max: Max
hasPdf: Has PDF hasPdf: Has PDF
issued: Issued issued: Issued
created: Created created: Created
@ -229,8 +246,8 @@ es:
clientFk: Cliente clientFk: Cliente
fi: CIF fi: CIF
amount: Importe amount: Importe
max: Max
min: Min min: Min
max: Max
hasPdf: Tiene PDF hasPdf: Tiene PDF
issued: Emitida issued: Emitida
created: Creada created: Creada

4
src/pages/InvoiceOut/InvoiceOutList.vue
View File

@ -37,7 +37,7 @@ function viewSummary(id) {
<teleport-slot to="#searchbar"> <teleport-slot to="#searchbar">
<VnSearchbar <VnSearchbar
data-key="InvoiceOutList" data-key="InvoiceOutList"
:label="t('Search by invoice id or reference')" :label="t('Search by invoice reference')"
/> />
</teleport-slot> </teleport-slot>
<teleport-slot to="#rightPanel"> <teleport-slot to="#rightPanel">
@ -149,5 +149,5 @@ function viewSummary(id) {
<i18n> <i18n>
es: 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> </i18n>

87
src/pages/Ticket/TicketFilter.vue
View File

@ -12,11 +12,11 @@ const props = defineProps({
}, },
}); });
const workers = ref([]); const workers = ref();
const provinces = ref([]); const provinces = ref();
const states = ref([]); const states = ref();
const agencies = ref([]); const agencies = ref();
const warehouses = ref([]); const warehouses = ref();
</script> </script>
<template> <template>
@ -27,7 +27,7 @@ const warehouses = ref([]);
<fetch-data <fetch-data
url="Workers/activeWithInheritedRole" url="Workers/activeWithInheritedRole"
:filter="{ where: { role: 'salesPerson' } }" :filter="{ where: { role: 'salesPerson' } }"
@on-fetch="setWorkers" @on-fetch="(data) => (workers = data)"
auto-load auto-load
/> />
<VnFilterPanel :data-key="props.dataKey" :search-button="true"> <VnFilterPanel :data-key="props.dataKey" :search-button="true">
@ -57,7 +57,7 @@ const warehouses = ref([]);
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <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> <template #append>
<q-icon name="event" class="cursor-pointer"> <q-icon name="event" class="cursor-pointer">
<q-popup-proxy <q-popup-proxy
@ -65,13 +65,22 @@ const warehouses = ref([]);
transition-show="scale" transition-show="scale"
transition-hide="scale" transition-hide="scale"
> >
<q-date v-model="params.dateFrom"> <q-date v-model="params.dateFrom" landscape>
<div class="row items-center justify-end"> <div
class="row items-center justify-end q-gutter-sm"
>
<q-btn <q-btn
v-close-popup :label="t('globals.cancel')"
label="Close"
color="primary" color="primary"
flat flat
v-close-popup
/>
<q-btn
:label="t('globals.confirm')"
color="primary"
flat
@click="save"
v-close-popup
/> />
</div> </div>
</q-date> </q-date>
@ -81,7 +90,7 @@ const warehouses = ref([]);
</q-input> </q-input>
</q-item-section> </q-item-section>
<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> <template #append>
<q-icon name="event" class="cursor-pointer"> <q-icon name="event" class="cursor-pointer">
<q-popup-proxy <q-popup-proxy
@ -89,13 +98,22 @@ const warehouses = ref([]);
transition-show="scale" transition-show="scale"
transition-hide="scale" transition-hide="scale"
> >
<q-date v-model="params.dateTo"> <q-date v-model="params.dateTo" landscape>
<div class="row items-center justify-end"> <div
class="row items-center justify-end q-gutter-sm"
>
<q-btn <q-btn
v-close-popup :label="t('globals.cancel')"
label="Close"
color="primary" color="primary"
flat flat
v-close-popup
/>
<q-btn
:label="t('globals.confirm')"
color="primary"
flat
@click="save"
v-close-popup
/> />
</div> </div>
</q-date> </q-date>
@ -106,7 +124,10 @@ const warehouses = ref([]);
</q-item-section> </q-item-section>
</q-item> </q-item>
<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 <q-select
:label="t('Salesperson')" :label="t('Salesperson')"
v-model="params.salesPersonFk" v-model="params.salesPersonFk"
@ -117,21 +138,14 @@ const warehouses = ref([]);
map-options map-options
use-input use-input
:input-debounce="0" :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-section>
</q-item> </q-item>
<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 <q-select
:label="t('State')" :label="t('State')"
v-model="params.stateFk" v-model="params.stateFk"
@ -202,7 +216,10 @@ const warehouses = ref([]);
<q-separator /> <q-separator />
<q-expansion-item :label="t('More options')" expand-separator> <q-expansion-item :label="t('More options')" expand-separator>
<q-item> <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 <q-select
:label="t('Province')" :label="t('Province')"
v-model="params.provinceFk" v-model="params.provinceFk"
@ -216,7 +233,10 @@ const warehouses = ref([]);
</q-item-section> </q-item-section>
</q-item> </q-item>
<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 <q-select
:label="t('Agency')" :label="t('Agency')"
v-model="params.agencyModeFk" v-model="params.agencyModeFk"
@ -230,7 +250,10 @@ const warehouses = ref([]);
</q-item-section> </q-item-section>
</q-item> </q-item>
<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 <q-select
:label="t('Warehouse')" :label="t('Warehouse')"
v-model="params.warehouseFk" v-model="params.warehouseFk"