0
0
Fork 0

more filters adaptations

This commit is contained in:
William Buezas 2023-12-13 14:57:27 -03:00
parent b3e0f4979a
commit d369ce7152
6 changed files with 85 additions and 118 deletions

View File

@ -36,7 +36,7 @@ const states = ref();
</div> </div>
</template> </template>
<template #body="{ params, searchFn }"> <template #body="{ params, searchFn }">
<QList dense style="max-width: 256px" class="list"> <QList dense class="list">
<QItem class="q-my-sm"> <QItem class="q-my-sm">
<QItemSection> <QItemSection>
<VnInput <VnInput
@ -184,6 +184,9 @@ const states = ref();
</template> </template>
<style scoped> <style scoped>
.list {
width: 256px;
}
.list * { .list * {
max-width: 100%; max-width: 100%;
} }

View File

@ -37,7 +37,7 @@ const zones = ref();
</div> </div>
</template> </template>
<template #body="{ params, searchFn }"> <template #body="{ params, searchFn }">
<QList dense style="max-width: 256px" class="list"> <QList dense class="list">
<QItem class="q-my-sm"> <QItem class="q-my-sm">
<QItemSection> <QItemSection>
<VnInput :label="t('FI')" v-model="params.fi" is-outlined> <VnInput :label="t('FI')" v-model="params.fi" is-outlined>
@ -176,6 +176,9 @@ const zones = ref();
</template> </template>
<style scoped> <style scoped>
.list {
width: 256px;
}
.list * { .list * {
max-width: 100%; max-width: 100%;
} }

View File

@ -1,9 +1,12 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import VnSelectFilter from 'components/common/VnSelectFilter.vue'; import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import FetchData from 'components/FetchData.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 { t } = useI18n();
const props = defineProps({ const props = defineProps({
@ -33,28 +36,32 @@ const suppliersRef = ref();
</div> </div>
</template> </template>
<template #body="{ params, searchFn }"> <template #body="{ params, searchFn }">
<QList dense> <QList dense class="list q-gutter-y-sm q-mt-sm">
<QItem> <QItem>
<QItemSection> <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> <template #prepend>
<QIcon name="badge" size="sm"></QIcon> <QIcon name="badge" size="sm"></QIcon>
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('params.supplierRef')" :label="t('params.supplierRef')"
v-model="params.supplierRef" v-model="params.supplierRef"
@input. is-outlined
lazy-rules lazy-rules
> >
<template #prepend> <template #prepend>
<QIcon name="vn:client" size="sm"></QIcon> <QIcon name="vn:client" size="sm"></QIcon>
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
@ -66,52 +73,67 @@ const suppliersRef = ref();
option-value="id" option-value="id"
option-label="nickname" option-label="nickname"
@input-value="suppliersRef.fetch()" @input-value="suppliersRef.fetch()"
dense
outlined
rounded
> >
</VnSelectFilter> </VnSelectFilter>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <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> <template #prepend>
<QIcon name="badge" size="sm"></QIcon> <QIcon name="badge" size="sm"></QIcon>
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('params.serialNumber')" :label="t('params.serialNumber')"
v-model="params.serialNumber" v-model="params.serialNumber"
is-outlined
lazy-rules lazy-rules
> >
<template #prepend> <template #prepend>
<QIcon name="badge" size="sm"></QIcon> <QIcon name="badge" size="sm"></QIcon>
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('params.serial')" :label="t('params.serial')"
v-model="params.serial" v-model="params.serial"
is-outlined
lazy-rules lazy-rules
> >
<template #prepend> <template #prepend>
<QIcon name="badge" size="sm"></QIcon> <QIcon name="badge" size="sm"></QIcon>
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <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> <template #prepend>
<QIcon name="euro" size="sm"></QIcon> <QIcon name="euro" size="sm"></QIcon>
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-md"> <QItem class="q-mb-md">
@ -127,137 +149,57 @@ const suppliersRef = ref();
<QExpansionItem :label="t('More options')" expand-separator> <QExpansionItem :label="t('More options')" expand-separator>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('params.awb')" :label="t('params.awb')"
v-model="params.awbCode" v-model="params.awbCode"
is-outlined
lazy-rules lazy-rules
> >
<template #prepend> <template #prepend>
<QIcon name="badge" size="sm"></QIcon> <QIcon name="badge" size="sm"></QIcon>
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('params.account')" :label="t('params.account')"
v-model="params.account" v-model="params.account"
is-outlined
lazy-rules lazy-rules
> >
<template #prepend> <template #prepend>
<QIcon name="person" size="sm" /> <QIcon name="person" size="sm" />
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput :label="t('From')" v-model="params.from" mask="date"> <VnInputDate
<template #append> :label="t('From')"
<QIcon name="event" class="cursor-pointer"> v-model="params.from"
<QPopupProxy is-outlined
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>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput :label="t('To')" v-model="params.to" mask="date"> <VnInputDate
<template #append> :label="t('To')"
<QIcon name="event" class="cursor-pointer"> v-model="params.to"
<QPopupProxy is-outlined
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>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInputDate
:label="t('Issued')" :label="t('Issued')"
v-model="params.issued" v-model="params.issued"
mask="date" is-outlined
> />
<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>
</QItemSection> </QItemSection>
</QItem> </QItem>
</QExpansionItem> </QExpansionItem>
@ -266,6 +208,15 @@ const suppliersRef = ref();
</VnFilterPanel> </VnFilterPanel>
</template> </template>
<style scoped>
.list {
width: 256px;
}
.list * {
max-width: 100%;
}
</style>
<i18n> <i18n>
en: en:
params: params:

View File

@ -28,12 +28,13 @@ const countries = ref();
</div> </div>
</template> </template>
<template #body="{ params }"> <template #body="{ params }">
<QList dense> <QList dense class="q-gutter-y-sm q-mt-sm">
<QItem> <QItem>
<QItemSection> <QItemSection>
<VnInput <VnInput
:label="t('route.cmr.list.cmrFk')" :label="t('route.cmr.list.cmrFk')"
v-model="params.cmrFk" v-model="params.cmrFk"
is-outlined
> >
<template #prepend> <template #prepend>
<QIcon name="article" size="sm"></QIcon> <QIcon name="article" size="sm"></QIcon>
@ -55,6 +56,7 @@ const countries = ref();
<VnInput <VnInput
:label="t('route.cmr.list.ticketFk')" :label="t('route.cmr.list.ticketFk')"
v-model="params.ticketFk" v-model="params.ticketFk"
is-outlined
> >
<template #prepend> <template #prepend>
<QIcon name="vn:ticket" size="sm"></QIcon> <QIcon name="vn:ticket" size="sm"></QIcon>
@ -67,6 +69,7 @@ const countries = ref();
<VnInput <VnInput
:label="t('route.cmr.list.routeFk')" :label="t('route.cmr.list.routeFk')"
v-model="params.routeFk" v-model="params.routeFk"
is-outlined
> >
<template #prepend> <template #prepend>
<QIcon name="vn:delivery" size="sm"></QIcon> <QIcon name="vn:delivery" size="sm"></QIcon>
@ -79,6 +82,7 @@ const countries = ref();
<VnInput <VnInput
:label="t('route.cmr.list.clientFk')" :label="t('route.cmr.list.clientFk')"
v-model="params.clientFk" v-model="params.clientFk"
is-outlined
> >
<template #prepend> <template #prepend>
<QIcon name="vn:client" size="sm"></QIcon> <QIcon name="vn:client" size="sm"></QIcon>

View File

@ -72,7 +72,7 @@ const decrement = (paramsObj, key) => {
</div> </div>
</template> </template>
<template #body="{ params }"> <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> <QItem>
<QItemSection> <QItemSection>
<VnInput label="id" v-model="params.id" is-outlined /> <VnInput label="id" v-model="params.id" is-outlined />
@ -217,6 +217,9 @@ const decrement = (paramsObj, key) => {
</template> </template>
<style scoped> <style scoped>
.list {
width: 256px;
}
.list * { .list * {
max-width: 100%; max-width: 100%;
} }

View File

@ -67,7 +67,7 @@ const decrement = (paramsObj, key) => {
</div> </div>
</template> </template>
<template #body="{ params }"> <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> <QItem>
<QItemSection> <QItemSection>
<VnInput <VnInput
@ -270,6 +270,9 @@ const decrement = (paramsObj, key) => {
</template> </template>
<style scoped> <style scoped>
.list {
width: 256px;
}
.list * { .list * {
max-width: 100%; max-width: 100%;
} }