forked from verdnatura/salix-front
more filters adaptations
This commit is contained in:
parent
b3e0f4979a
commit
d369ce7152
|
@ -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%;
|
||||
}
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue