From d369ce715232034a80fbc26d11af54601f2cf908 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 13 Dec 2023 14:57:27 -0300
Subject: [PATCH] more filters adaptations
---
src/pages/Claim/ClaimFilter.vue | 5 +-
src/pages/Customer/CustomerFilter.vue | 5 +-
src/pages/InvoiceIn/InvoiceInFilter.vue | 177 ++++++++--------------
src/pages/Route/Cmr/CmrFilter.vue | 6 +-
src/pages/Travel/ExtraCommunityFilter.vue | 5 +-
src/pages/Travel/TravelFilter.vue | 5 +-
6 files changed, 85 insertions(+), 118 deletions(-)
diff --git a/src/pages/Claim/ClaimFilter.vue b/src/pages/Claim/ClaimFilter.vue
index 9fd781dc9..b06f47653 100644
--- a/src/pages/Claim/ClaimFilter.vue
+++ b/src/pages/Claim/ClaimFilter.vue
@@ -36,7 +36,7 @@ const states = ref();
</div>
</template>
<template #body="{ params, searchFn }">
- <QList dense style="max-width: 256px" class="list">
+ <QList dense class="list">
<QItem class="q-my-sm">
<QItemSection>
<VnInput
@@ -184,6 +184,9 @@ const states = ref();
</template>
<style scoped>
+.list {
+ width: 256px;
+}
.list * {
max-width: 100%;
}
diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index d7eac2b6c..36a9add89 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -37,7 +37,7 @@ const zones = ref();
</div>
</template>
<template #body="{ params, searchFn }">
- <QList dense style="max-width: 256px" class="list">
+ <QList dense class="list">
<QItem class="q-my-sm">
<QItemSection>
<VnInput :label="t('FI')" v-model="params.fi" is-outlined>
@@ -176,6 +176,9 @@ const zones = ref();
</template>
<style scoped>
+.list {
+ width: 256px;
+}
.list * {
max-width: 100%;
}
diff --git a/src/pages/InvoiceIn/InvoiceInFilter.vue b/src/pages/InvoiceIn/InvoiceInFilter.vue
index 6348d4167..f8198d237 100644
--- a/src/pages/InvoiceIn/InvoiceInFilter.vue
+++ b/src/pages/InvoiceIn/InvoiceInFilter.vue
@@ -1,9 +1,12 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
+
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import FetchData from 'components/FetchData.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
const { t } = useI18n();
const props = defineProps({
@@ -33,28 +36,32 @@ const suppliersRef = ref();
</div>
</template>
<template #body="{ params, searchFn }">
- <QList dense>
+ <QList dense class="list q-gutter-y-sm q-mt-sm">
<QItem>
<QItemSection>
- <QInput :label="t('Id or Supplier')" v-model="params.search">
+ <VnInput
+ :label="t('Id or Supplier')"
+ v-model="params.search"
+ is-outlined
+ >
<template #prepend>
<QIcon name="badge" size="sm"></QIcon>
</template>
- </QInput>
+ </VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
- <QInput
+ <VnInput
:label="t('params.supplierRef')"
v-model="params.supplierRef"
- @input.
+ is-outlined
lazy-rules
>
<template #prepend>
<QIcon name="vn:client" size="sm"></QIcon>
</template>
- </QInput>
+ </VnInput>
</QItemSection>
</QItem>
<QItem>
@@ -66,52 +73,67 @@ const suppliersRef = ref();
option-value="id"
option-label="nickname"
@input-value="suppliersRef.fetch()"
+ dense
+ outlined
+ rounded
>
</VnSelectFilter>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
- <QInput :label="t('params.fi')" v-model="params.fi" lazy-rules>
+ <VnInput
+ :label="t('params.fi')"
+ v-model="params.fi"
+ is-outlined
+ lazy-rules
+ >
<template #prepend>
<QIcon name="badge" size="sm"></QIcon>
</template>
- </QInput>
+ </VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
- <QInput
+ <VnInput
:label="t('params.serialNumber')"
v-model="params.serialNumber"
+ is-outlined
lazy-rules
>
<template #prepend>
<QIcon name="badge" size="sm"></QIcon>
</template>
- </QInput>
+ </VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
- <QInput
+ <VnInput
:label="t('params.serial')"
v-model="params.serial"
+ is-outlined
lazy-rules
>
<template #prepend>
<QIcon name="badge" size="sm"></QIcon>
</template>
- </QInput>
+ </VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
- <QInput :label="t('Amount')" v-model="params.amount" lazy-rules>
+ <VnInput
+ :label="t('Amount')"
+ v-model="params.amount"
+ is-outlined
+ lazy-rules
+ >
<template #prepend>
<QIcon name="euro" size="sm"></QIcon>
</template>
- </QInput>
+ </VnInput>
</QItemSection>
</QItem>
<QItem class="q-mb-md">
@@ -127,137 +149,57 @@ const suppliersRef = ref();
<QExpansionItem :label="t('More options')" expand-separator>
<QItem>
<QItemSection>
- <QInput
+ <VnInput
:label="t('params.awb')"
v-model="params.awbCode"
+ is-outlined
lazy-rules
>
<template #prepend>
<QIcon name="badge" size="sm"></QIcon>
</template>
- </QInput>
+ </VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
- <QInput
+ <VnInput
:label="t('params.account')"
v-model="params.account"
+ is-outlined
lazy-rules
>
<template #prepend>
<QIcon name="person" size="sm" />
</template>
- </QInput>
+ </VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
- <QInput :label="t('From')" v-model="params.from" mask="date">
- <template #append>
- <QIcon name="event" class="cursor-pointer">
- <QPopupProxy
- cover
- transition-show="scale"
- transition-hide="scale"
- >
- <QDate v-model="params.from" landscape>
- <div
- class="row items-center justify-end q-gutter-sm"
- >
- <QBtn
- :label="t('globals.cancel')"
- color="primary"
- flat
- v-close-popup
- />
- <QBtn
- :label="t('globals.confirm')"
- color="primary"
- flat
- @click="save"
- v-close-popup
- />
- </div>
- </QDate>
- </QPopupProxy>
- </QIcon>
- </template>
- </QInput>
+ <VnInputDate
+ :label="t('From')"
+ v-model="params.from"
+ is-outlined
+ />
</QItemSection>
</QItem>
<QItem>
<QItemSection>
- <QInput :label="t('To')" v-model="params.to" mask="date">
- <template #append>
- <QIcon name="event" class="cursor-pointer">
- <QPopupProxy
- cover
- transition-show="scale"
- transition-hide="scale"
- >
- <QDate v-model="params.to" landscape>
- <div
- class="row items-center justify-end q-gutter-sm"
- >
- <QBtn
- :label="t('globals.cancel')"
- color="primary"
- flat
- v-close-popup
- />
- <QBtn
- :label="t('globals.confirm')"
- color="primary"
- flat
- @click="save"
- v-close-popup
- />
- </div>
- </QDate>
- </QPopupProxy>
- </QIcon>
- </template>
- </QInput>
+ <VnInputDate
+ :label="t('To')"
+ v-model="params.to"
+ is-outlined
+ />
</QItemSection>
</QItem>
<QItem>
<QItemSection>
- <QInput
+ <VnInputDate
:label="t('Issued')"
v-model="params.issued"
- mask="date"
- >
- <template #append>
- <QIcon name="event" class="cursor-pointer">
- <QPopupProxy
- cover
- transition-show="scale"
- transition-hide="scale"
- >
- <QDate v-model="params.issued" landscape>
- <div
- class="row items-center justify-end q-gutter-sm"
- >
- <QBtn
- :label="t('globals.cancel')"
- color="primary"
- flat
- v-close-popup
- />
- <QBtn
- :label="t('globals.confirm')"
- color="primary"
- flat
- @click="save"
- v-close-popup
- />
- </div>
- </QDate>
- </QPopupProxy>
- </QIcon>
- </template>
- </QInput>
+ is-outlined
+ />
</QItemSection>
</QItem>
</QExpansionItem>
@@ -266,6 +208,15 @@ const suppliersRef = ref();
</VnFilterPanel>
</template>
+<style scoped>
+.list {
+ width: 256px;
+}
+.list * {
+ max-width: 100%;
+}
+</style>
+
<i18n>
en:
params:
diff --git a/src/pages/Route/Cmr/CmrFilter.vue b/src/pages/Route/Cmr/CmrFilter.vue
index 89cc822b3..a5bf5513b 100644
--- a/src/pages/Route/Cmr/CmrFilter.vue
+++ b/src/pages/Route/Cmr/CmrFilter.vue
@@ -28,12 +28,13 @@ const countries = ref();
</div>
</template>
<template #body="{ params }">
- <QList dense>
+ <QList dense class="q-gutter-y-sm q-mt-sm">
<QItem>
<QItemSection>
<VnInput
:label="t('route.cmr.list.cmrFk')"
v-model="params.cmrFk"
+ is-outlined
>
<template #prepend>
<QIcon name="article" size="sm"></QIcon>
@@ -55,6 +56,7 @@ const countries = ref();
<VnInput
:label="t('route.cmr.list.ticketFk')"
v-model="params.ticketFk"
+ is-outlined
>
<template #prepend>
<QIcon name="vn:ticket" size="sm"></QIcon>
@@ -67,6 +69,7 @@ const countries = ref();
<VnInput
:label="t('route.cmr.list.routeFk')"
v-model="params.routeFk"
+ is-outlined
>
<template #prepend>
<QIcon name="vn:delivery" size="sm"></QIcon>
@@ -79,6 +82,7 @@ const countries = ref();
<VnInput
:label="t('route.cmr.list.clientFk')"
v-model="params.clientFk"
+ is-outlined
>
<template #prepend>
<QIcon name="vn:client" size="sm"></QIcon>
diff --git a/src/pages/Travel/ExtraCommunityFilter.vue b/src/pages/Travel/ExtraCommunityFilter.vue
index b7c97649c..57c3ec4bf 100644
--- a/src/pages/Travel/ExtraCommunityFilter.vue
+++ b/src/pages/Travel/ExtraCommunityFilter.vue
@@ -72,7 +72,7 @@ const decrement = (paramsObj, key) => {
</div>
</template>
<template #body="{ params }">
- <QList dense style="max-width: 256px" class="list q-gutter-y-sm q-mt-sm">
+ <QList dense class="list q-gutter-y-sm q-mt-sm">
<QItem>
<QItemSection>
<VnInput label="id" v-model="params.id" is-outlined />
@@ -217,6 +217,9 @@ const decrement = (paramsObj, key) => {
</template>
<style scoped>
+.list {
+ width: 256px;
+}
.list * {
max-width: 100%;
}
diff --git a/src/pages/Travel/TravelFilter.vue b/src/pages/Travel/TravelFilter.vue
index 51f398f4e..d4cb286c2 100644
--- a/src/pages/Travel/TravelFilter.vue
+++ b/src/pages/Travel/TravelFilter.vue
@@ -67,7 +67,7 @@ const decrement = (paramsObj, key) => {
</div>
</template>
<template #body="{ params }">
- <QList dense style="max-width: 256px" class="list q-gutter-y-sm q-mt-sm">
+ <QList dense class="list q-gutter-y-sm q-mt-sm">
<QItem>
<QItemSection>
<VnInput
@@ -270,6 +270,9 @@ const decrement = (paramsObj, key) => {
</template>
<style scoped>
+.list {
+ width: 256px;
+}
.list * {
max-width: 100%;
}