move QList element and classes inside VnFilterPanel

This commit is contained in:
William Buezas 2024-01-22 12:11:51 -03:00
parent bc2d58afaf
commit 78f37f57c4
22 changed files with 2476 additions and 2644 deletions

View File

@ -38,28 +38,26 @@ const workers = ref();
minimal minimal
> >
</QDate> </QDate>
<QList dense> <QSeparator />
<QSeparator /> <QItem>
<QItem> <QItemSection v-if="!workers">
<QItemSection v-if="!workers"> <QSkeleton type="QInput" class="full-width" />
<QSkeleton type="QInput" class="full-width" /> </QItemSection>
</QItemSection> <QItemSection v-if="workers">
<QItemSection v-if="workers"> <QSelect
<QSelect :label="t('User')"
:label="t('User')" v-model="params.userFk"
v-model="params.userFk" @update:model-value="searchFn()"
@update:model-value="searchFn()" :options="workers"
:options="workers" option-value="id"
option-value="id" option-label="name"
option-label="name" emit-value
emit-value map-options
map-options use-input
use-input :input-debounce="0"
:input-debounce="0" />
/> </QItemSection>
</QItemSection> </QItem>
</QItem>
</QList>
</template> </template>
</VnFilterPanel> </VnFilterPanel>
</template> </template>

View File

@ -116,3 +116,9 @@ watch(options, (newValue) => {
</template> </template>
</QSelect> </QSelect>
</template> </template>
<style scoped lang="scss">
.q-field--outlined {
max-width: 100%;
}
</style>

View File

@ -216,7 +216,9 @@ function formatValue(value) {
</QItem> </QItem>
<QSeparator /> <QSeparator />
</QList> </QList>
<slot name="body" :params="userParams" :search-fn="search"></slot> <QList dense class="list q-gutter-y-sm q-mt-sm">
<slot name="body" :params="userParams" :search-fn="search"></slot>
</QList>
<template v-if="props.searchButton"> <template v-if="props.searchButton">
<QItem> <QItem>
<QItemSection class="q-py-sm"> <QItemSection class="q-py-sm">
@ -242,6 +244,12 @@ function formatValue(value) {
/> />
</template> </template>
<style scoped lang="scss">
.list {
width: 256px;
}
</style>
<i18n> <i18n>
es: es:
No filters applied: No se han aplicado filtros No filters applied: No se han aplicado filtros

View File

@ -36,123 +36,122 @@ const states = ref();
</div> </div>
</template> </template>
<template #body="{ params, searchFn }"> <template #body="{ params, searchFn }">
<QList dense class="list"> <QItem class="q-my-sm">
<QItem class="q-my-sm"> <QItemSection>
<QItemSection> <VnInput
<VnInput :label="t('Customer ID')"
:label="t('Customer ID')" v-model="params.clientFk"
v-model="params.clientFk" lazy-rules
lazy-rules is-outlined
is-outlined >
> <template #prepend>
<template #prepend> <QIcon name="badge" size="xs"></QIcon> </template
<QIcon name="badge" size="xs"></QIcon> </template ></VnInput>
></VnInput> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem class="q-mb-sm">
<QItem class="q-mb-sm"> <QItemSection>
<QItemSection> <VnInput
<VnInput :label="t('Client Name')"
:label="t('Client Name')" v-model="params.clientName"
v-model="params.clientName" lazy-rules
lazy-rules is-outlined
is-outlined />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem class="q-mb-sm">
<QItem class="q-mb-sm"> <QItemSection v-if="!workers">
<QItemSection v-if="!workers"> <QSkeleton type="QInput" class="full-width" />
<QSkeleton type="QInput" class="full-width" /> </QItemSection>
</QItemSection> <QItemSection v-if="workers">
<QItemSection v-if="workers"> <VnSelectFilter
<VnSelectFilter :label="t('Salesperson')"
:label="t('Salesperson')" v-model="params.salesPersonFk"
v-model="params.salesPersonFk" @update:model-value="searchFn()"
@update:model-value="searchFn()" :options="workers"
:options="workers" option-value="id"
option-value="id" option-label="name"
option-label="name" emit-value
emit-value map-options
map-options use-input
use-input hide-selected
hide-selected dense
dense outlined
outlined rounded
rounded :input-debounce="0"
:input-debounce="0" />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem class="q-mb-sm">
<QItem class="q-mb-sm"> <QItemSection v-if="!workers">
<QItemSection v-if="!workers"> <QSkeleton type="QInput" class="full-width" />
<QSkeleton type="QInput" class="full-width" /> </QItemSection>
</QItemSection> <QItemSection v-if="workers">
<QItemSection v-if="workers"> <VnSelectFilter
<VnSelectFilter :label="t('Attender')"
:label="t('Attender')" v-model="params.attenderFk"
v-model="params.attenderFk" @update:model-value="searchFn()"
@update:model-value="searchFn()" :options="workers"
:options="workers" option-value="id"
option-value="id" option-label="name"
option-label="name" emit-value
emit-value map-options
map-options use-input
use-input hide-selected
hide-selected dense
dense outlined
outlined rounded
rounded :input-debounce="0"
:input-debounce="0" />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem class="q-mb-sm">
<QItem class="q-mb-sm"> <QItemSection v-if="!workers">
<QItemSection v-if="!workers"> <QSkeleton type="QInput" class="full-width" />
<QSkeleton type="QInput" class="full-width" /> </QItemSection>
</QItemSection> <QItemSection v-if="workers">
<QItemSection v-if="workers"> <VnSelectFilter
<VnSelectFilter :label="t('Responsible')"
:label="t('Responsible')" v-model="params.claimResponsibleFk"
v-model="params.claimResponsibleFk" @update:model-value="searchFn()"
@update:model-value="searchFn()" :options="workers"
:options="workers" option-value="id"
option-value="id" option-label="name"
option-label="name" emit-value
emit-value map-options
map-options use-input
use-input hide-selected
hide-selected dense
dense outlined
outlined rounded
rounded :input-debounce="0"
:input-debounce="0" />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem class="q-mb-sm">
<QItem class="q-mb-sm"> <QItemSection v-if="!states">
<QItemSection v-if="!states"> <QSkeleton type="QInput" class="full-width" />
<QSkeleton type="QInput" class="full-width" /> </QItemSection>
</QItemSection> <QItemSection v-if="states">
<QItemSection v-if="states"> <VnSelectFilter
<VnSelectFilter :label="t('State')"
:label="t('State')" v-model="params.claimStateFk"
v-model="params.claimStateFk" @update:model-value="searchFn()"
@update:model-value="searchFn()" :options="states"
:options="states" option-value="id"
option-value="id" option-label="description"
option-label="description" emit-value
emit-value map-options
map-options hide-selected
hide-selected dense
dense outlined
outlined rounded
rounded />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QSeparator />
<QSeparator /> <QExpansionItem :label="t('More options')" expand-separator>
<QExpansionItem :label="t('More options')" expand-separator> <!-- <QItem>
<!-- <QItem>
<QItemSection> <QItemSection>
<qSelect <qSelect
:label="t('Item')" :label="t('Item')"
@ -168,30 +167,20 @@ const states = ref();
/> />
</QItemSection> </QItemSection>
</QItem> --> </QItem> -->
<QItem> <QItem>
<QItemSection> <QItemSection>
<VnInputDate <VnInputDate
v-model="params.created" v-model="params.created"
:label="t('Created')" :label="t('Created')"
is-outlined is-outlined
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
</QExpansionItem> </QExpansionItem>
</QList>
</template> </template>
</VnFilterPanel> </VnFilterPanel>
</template> </template>
<style scoped>
.list {
width: 256px;
}
.list * {
max-width: 100%;
}
</style>
<i18n> <i18n>
en: en:
params: params:

View File

@ -37,153 +37,134 @@ const zones = ref();
</div> </div>
</template> </template>
<template #body="{ params, searchFn }"> <template #body="{ params, searchFn }">
<QList dense class="list"> <QItem class="q-my-sm">
<QItem class="q-my-sm"> <QItemSection>
<VnInput :label="t('FI')" v-model="params.fi" is-outlined>
<template #prepend>
<QIcon name="badge" size="xs" />
</template>
</VnInput>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<VnInput :label="t('Name')" v-model="params.name" is-outlined />
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<VnInput
:label="t('Social Name')"
v-model="params.socialName"
is-outlined
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection v-if="!workers">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="workers">
<VnSelectFilter
:label="t('Salesperson')"
v-model="params.salesPersonFk"
@update:model-value="searchFn()"
:options="workers"
option-value="id"
option-label="name"
emit-value
map-options
use-input
hide-selected
dense
outlined
rounded
:input-debounce="0"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection v-if="!provinces">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="provinces">
<VnSelectFilter
:label="t('Province')"
v-model="params.provinceFk"
@update:model-value="searchFn()"
:options="provinces"
option-value="id"
option-label="name"
emit-value
map-options
hide-selected
dense
outlined
rounded
:input-debounce="0"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-md">
<QItemSection>
<VnInput :label="t('City')" v-model="params.city" is-outlined />
</QItemSection>
</QItem>
<QSeparator />
<QExpansionItem :label="t('More options')" expand-separator>
<QItem>
<QItemSection> <QItemSection>
<VnInput :label="t('FI')" v-model="params.fi" is-outlined> <VnInput :label="t('Phone')" v-model="params.phone" is-outlined>
<template #prepend> <template #prepend>
<QIcon name="badge" size="xs" /> <QIcon name="phone" size="xs" />
</template> </template>
</VnInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem>
<QItemSection> <QItemSection>
<VnInput :label="t('Name')" v-model="params.name" is-outlined /> <VnInput :label="t('Email')" v-model="params.email" is-outlined>
<template #prepend>
<QIcon name="email" size="sm" />
</template>
</VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem>
<QItemSection v-if="!zones">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="zones">
<VnSelectFilter
:label="t('Zone')"
v-model="params.zoneFk"
@update:model-value="searchFn()"
:options="zones"
option-value="id"
option-label="name"
emit-value
map-options
hide-selected
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection> <QItemSection>
<VnInput <VnInput
:label="t('Social Name')" :label="t('Postcode')"
v-model="params.socialName" v-model="params.postcode"
is-outlined is-outlined
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> </QExpansionItem>
<QItemSection v-if="!workers">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="workers">
<VnSelectFilter
:label="t('Salesperson')"
v-model="params.salesPersonFk"
@update:model-value="searchFn()"
:options="workers"
option-value="id"
option-label="name"
emit-value
map-options
use-input
hide-selected
dense
outlined
rounded
:input-debounce="0"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection v-if="!provinces">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="provinces">
<VnSelectFilter
:label="t('Province')"
v-model="params.provinceFk"
@update:model-value="searchFn()"
:options="provinces"
option-value="id"
option-label="name"
emit-value
map-options
hide-selected
dense
outlined
rounded
:input-debounce="0"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-md">
<QItemSection>
<VnInput :label="t('City')" v-model="params.city" is-outlined />
</QItemSection>
</QItem>
<QSeparator />
<QExpansionItem :label="t('More options')" expand-separator>
<QItem>
<QItemSection>
<VnInput
:label="t('Phone')"
v-model="params.phone"
is-outlined
>
<template #prepend>
<QIcon name="phone" size="xs" />
</template>
</VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
:label="t('Email')"
v-model="params.email"
is-outlined
>
<template #prepend>
<QIcon name="email" size="sm" />
</template>
</VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection v-if="!zones">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="zones">
<VnSelectFilter
:label="t('Zone')"
v-model="params.zoneFk"
@update:model-value="searchFn()"
:options="zones"
option-value="id"
option-label="name"
emit-value
map-options
hide-selected
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
:label="t('Postcode')"
v-model="params.postcode"
is-outlined
/>
</QItemSection>
</QItem>
</QExpansionItem>
</QList>
</template> </template>
</VnFilterPanel> </VnFilterPanel>
</template> </template>
<style scoped>
.list {
width: 256px;
}
.list * {
max-width: 100%;
}
</style>
<i18n> <i18n>
en: en:
params: params:

View File

@ -46,163 +46,148 @@ const authors = ref();
</template> </template>
<template #body="{ params }"> <template #body="{ params }">
<QList dense class="list"> <QItem class="q-mb-sm q-mt-sm">
<QItem class="q-mb-sm q-mt-sm"> <QItemSection v-if="clients">
<QItemSection v-if="clients"> <VnSelectFilter
<VnSelectFilter :input-debounce="0"
:input-debounce="0" :label="t('Client')"
:label="t('Client')" :options="clients"
:options="clients" dense
dense emit-value
emit-value hide-selected
hide-selected map-options
map-options option-label="name"
option-label="name" option-value="clientTypeFk"
option-value="clientTypeFk" outlined
outlined rounded
rounded use-input
use-input v-model="params.clientFk"
v-model="params.clientFk" />
/> </QItemSection>
</QItemSection> <QItemSection v-else>
<QItemSection v-else> <QSkeleton class="full-width" type="QInput" />
<QSkeleton class="full-width" type="QInput" /> </QItemSection>
</QItemSection> </QItem>
</QItem>
<QItem class="q-mb-sm"> <QItem class="q-mb-sm">
<QItemSection v-if="salespersons"> <QItemSection v-if="salespersons">
<VnSelectFilter <VnSelectFilter
:input-debounce="0" :input-debounce="0"
:label="t('Salesperson')" :label="t('Salesperson')"
:options="salespersons" :options="salespersons"
dense dense
emit-value emit-value
hide-selected hide-selected
map-options map-options
option-label="name" option-label="name"
option-value="id" option-value="id"
outlined outlined
rounded rounded
use-input use-input
v-model="params.salesPersonFk" v-model="params.salesPersonFk"
/> />
</QItemSection> </QItemSection>
<QItemSection v-else> <QItemSection v-else>
<QSkeleton class="full-width" type="QInput" /> <QSkeleton class="full-width" type="QInput" />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem class="q-mb-sm">
<QItemSection v-if="countries"> <QItemSection v-if="countries">
<VnSelectFilter <VnSelectFilter
:input-debounce="0" :input-debounce="0"
:label="t('Country')" :label="t('Country')"
:options="countries" :options="countries"
dense dense
emit-value emit-value
hide-selected hide-selected
map-options map-options
option-label="country" option-label="country"
option-value="id" option-value="id"
outlined outlined
rounded rounded
use-input use-input
v-model="params.countryFk" v-model="params.countryFk"
/> />
</QItemSection> </QItemSection>
<QItemSection v-else> <QItemSection v-else>
<QSkeleton class="full-width" type="QInput" /> <QSkeleton class="full-width" type="QInput" />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem class="q-mb-sm">
<QItemSection> <QItemSection>
<VnInput <VnInput
:label="t('P. Method')" :label="t('P. Method')"
is-outlined is-outlined
v-model="params.paymentMethod" v-model="params.paymentMethod"
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem class="q-mb-sm">
<QItemSection> <QItemSection>
<VnInput <VnInput
:label="t('Balance D.')" :label="t('Balance D.')"
is-outlined is-outlined
v-model="params.balance" v-model="params.balance"
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem class="q-mb-sm">
<QItemSection v-if="authors"> <QItemSection v-if="authors">
<VnSelectFilter <VnSelectFilter
:input-debounce="0" :input-debounce="0"
:label="t('Author')" :label="t('Author')"
:options="authors" :options="authors"
dense dense
emit-value emit-value
hide-selected hide-selected
map-options map-options
option-label="name" option-label="name"
option-value="id" option-value="id"
outlined outlined
rounded rounded
use-input use-input
v-model="params.workerFk" v-model="params.workerFk"
/> />
</QItemSection> </QItemSection>
<QItemSection v-else> <QItemSection v-else>
<QSkeleton class="full-width" type="QInput" /> <QSkeleton class="full-width" type="QInput" />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem class="q-mb-sm">
<QItemSection> <QItemSection>
<VnInput <VnInput :label="t('L. O. Date')" is-outlined v-model="params.date" />
:label="t('L. O. Date')" </QItemSection>
is-outlined </QItem>
v-model="params.date"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm"> <QItem class="q-mb-sm">
<QItemSection> <QItemSection>
<VnInput <VnInput
:label="t('Credit I.')" :label="t('Credit I.')"
is-outlined is-outlined
v-model="params.credit" v-model="params.credit"
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem class="q-mb-sm">
<QItemSection> <QItemSection>
<VnInputDate <VnInputDate
:label="t('From')" :label="t('From')"
is-outlined is-outlined
v-model="params.defaulterSinced" v-model="params.defaulterSinced"
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QSeparator /> <QSeparator />
</QList>
</template> </template>
</VnFilterPanel> </VnFilterPanel>
</template> </template>
<style scoped>
.list {
width: 256px;
}
.list * {
max-width: 100%;
}
</style>
<i18n> <i18n>
en: en:
params: params:

View File

@ -145,27 +145,26 @@ const shouldRenderColumn = (colName) => {
</div> </div>
</template> </template>
<template #body="{ params, searchFn }"> <template #body="{ params, searchFn }">
<QList dense class="list q-gutter-y-sm q-mt-sm"> <QItem v-if="shouldRenderColumn('id')">
<QItem v-if="shouldRenderColumn('id')"> <QItemSection>
<QItemSection> <VnInput
<VnInput :label="t('customer.extendedList.tableVisibleColumns.id')"
:label="t('customer.extendedList.tableVisibleColumns.id')" v-model="params.id"
v-model="params.id" is-outlined
is-outlined clearable
clearable />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem v-if="shouldRenderColumn('name')">
<QItem v-if="shouldRenderColumn('name')"> <QItemSection>
<QItemSection> <VnInput
<VnInput :label="t('customer.extendedList.tableVisibleColumns.name')"
:label="t('customer.extendedList.tableVisibleColumns.name')" v-model="params.name"
v-model="params.name" is-outlined
is-outlined />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <!-- <QItem class="q-mb-sm">
<!-- <QItem class="q-mb-sm">
<QItemSection v-if="!clients"> <QItemSection v-if="!clients">
<QSkeleton type="QInput" class="full-width" /> <QSkeleton type="QInput" class="full-width" />
</QItemSection> </QItemSection>
@ -188,429 +187,384 @@ const shouldRenderColumn = (colName) => {
/> />
</QItemSection> </QItemSection>
</QItem> --> </QItem> -->
<QItem v-if="shouldRenderColumn('fi')"> <QItem v-if="shouldRenderColumn('fi')">
<QItemSection> <QItemSection>
<VnInput <VnInput
:label="t('customer.extendedList.tableVisibleColumns.fi')" :label="t('customer.extendedList.tableVisibleColumns.fi')"
v-model="params.fi" v-model="params.fi"
is-outlined is-outlined
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem v-if="shouldRenderColumn('salesPersonFk')"> <QItem v-if="shouldRenderColumn('salesPersonFk')">
<QItemSection v-if="!workers"> <QItemSection v-if="!workers">
<QSkeleton type="QInput" class="full-width" /> <QSkeleton type="QInput" class="full-width" />
</QItemSection> </QItemSection>
<QItemSection v-if="workers"> <QItemSection v-if="workers">
<VnSelectFilter <VnSelectFilter
:label=" :label="
t( t('customer.extendedList.tableVisibleColumns.salesPersonFk')
'customer.extendedList.tableVisibleColumns.salesPersonFk' "
) v-model="params.salesPersonFk"
" @update:model-value="searchFn()"
v-model="params.salesPersonFk" :options="workers"
@update:model-value="searchFn()" option-value="id"
:options="workers" option-label="name"
option-value="id" emit-value
option-label="name" map-options
emit-value use-input
map-options hide-selected
use-input dense
hide-selected outlined
dense rounded
outlined :input-debounce="0"
rounded />
:input-debounce="0" </QItemSection>
/> </QItem>
</QItemSection> <QItem v-if="shouldRenderColumn('credit')">
</QItem> <QItemSection>
<QItem v-if="shouldRenderColumn('credit')"> <VnInput
<QItemSection> :label="t('customer.extendedList.tableVisibleColumns.credit')"
<VnInput v-model="params.credit"
:label="t('customer.extendedList.tableVisibleColumns.credit')" is-outlined
v-model="params.credit" />
is-outlined </QItemSection>
/> </QItem>
</QItemSection> <QItem v-if="shouldRenderColumn('creditInsurance')">
</QItem> <QItemSection>
<QItem v-if="shouldRenderColumn('creditInsurance')"> <VnInput
<QItemSection> :label="
<VnInput t('customer.extendedList.tableVisibleColumns.creditInsurance')
:label=" "
t( v-model="params.creditInsurance"
'customer.extendedList.tableVisibleColumns.creditInsurance' is-outlined
) />
" </QItemSection>
v-model="params.creditInsurance" </QItem>
is-outlined <QItem v-if="shouldRenderColumn('phone')">
/> <QItemSection>
</QItemSection> <VnInput
</QItem> :label="t('customer.extendedList.tableVisibleColumns.phone')"
<QItem v-if="shouldRenderColumn('phone')"> v-model="params.phone"
<QItemSection> is-outlined
<VnInput />
:label="t('customer.extendedList.tableVisibleColumns.phone')" </QItemSection>
v-model="params.phone" </QItem>
is-outlined <QItem v-if="shouldRenderColumn('mobile')">
/> <QItemSection>
</QItemSection> <VnInput
</QItem> :label="t('customer.extendedList.tableVisibleColumns.mobile')"
<QItem v-if="shouldRenderColumn('mobile')"> v-model="params.mobile"
<QItemSection> is-outlined
<VnInput />
:label="t('customer.extendedList.tableVisibleColumns.mobile')" </QItemSection>
v-model="params.mobile" </QItem>
is-outlined <QItem v-if="shouldRenderColumn('street')">
/> <QItemSection>
</QItemSection> <VnInput
</QItem> :label="t('customer.extendedList.tableVisibleColumns.street')"
<QItem v-if="shouldRenderColumn('street')"> v-model="params.street"
<QItemSection> is-outlined
<VnInput />
:label="t('customer.extendedList.tableVisibleColumns.street')" </QItemSection>
v-model="params.street" </QItem>
is-outlined <QItem v-if="shouldRenderColumn('countryFk')">
/> <QItemSection>
</QItemSection> <VnSelectFilter
</QItem> :label="t('customer.extendedList.tableVisibleColumns.countryFk')"
<QItem v-if="shouldRenderColumn('countryFk')"> v-model="params.countryFk"
<QItemSection> @update:model-value="searchFn()"
<VnSelectFilter :options="countriesOptions"
:label=" option-value="id"
t('customer.extendedList.tableVisibleColumns.countryFk') option-label="country"
" map-options
v-model="params.countryFk" hide-selected
@update:model-value="searchFn()" dense
:options="countriesOptions" outlined
option-value="id" rounded
option-label="country" />
map-options </QItemSection>
hide-selected </QItem>
dense <QItem v-if="shouldRenderColumn('provinceFk')">
outlined <QItemSection>
rounded <VnSelectFilter
/> :label="t('customer.extendedList.tableVisibleColumns.provinceFk')"
</QItemSection> v-model="params.provinceFk"
</QItem> @update:model-value="searchFn()"
<QItem v-if="shouldRenderColumn('provinceFk')"> :options="provincesOptions"
<QItemSection> option-value="id"
<VnSelectFilter option-label="name"
:label=" map-options
t('customer.extendedList.tableVisibleColumns.provinceFk') hide-selected
" dense
v-model="params.provinceFk" outlined
@update:model-value="searchFn()" rounded
:options="provincesOptions" />
option-value="id" </QItemSection>
option-label="name" </QItem>
map-options <QItem v-if="shouldRenderColumn('city')">
hide-selected <QItemSection>
dense <VnInput
outlined :label="t('customer.extendedList.tableVisibleColumns.city')"
rounded v-model="params.city"
/> is-outlined
</QItemSection> />
</QItem> </QItemSection>
<QItem v-if="shouldRenderColumn('city')"> </QItem>
<QItemSection> <QItem v-if="shouldRenderColumn('postcode')">
<VnInput <QItemSection>
:label="t('customer.extendedList.tableVisibleColumns.city')" <VnInput
v-model="params.city" :label="t('customer.extendedList.tableVisibleColumns.postcode')"
is-outlined v-model="params.postcode"
/> is-outlined
</QItemSection> />
</QItem> </QItemSection>
<QItem v-if="shouldRenderColumn('postcode')"> </QItem>
<QItemSection> <QItem v-if="shouldRenderColumn('email')">
<VnInput <QItemSection>
:label=" <VnInput
t('customer.extendedList.tableVisibleColumns.postcode') :label="t('customer.extendedList.tableVisibleColumns.email')"
" v-model="params.email"
v-model="params.postcode" is-outlined
is-outlined />
/> </QItemSection>
</QItemSection> </QItem>
</QItem>
<QItem v-if="shouldRenderColumn('email')">
<QItemSection>
<VnInput
:label="t('customer.extendedList.tableVisibleColumns.email')"
v-model="params.email"
is-outlined
/>
</QItemSection>
</QItem>
<QItem v-if="shouldRenderColumn('created')"> <QItem v-if="shouldRenderColumn('created')">
<QItemSection> <QItemSection>
<VnInputDate <VnInputDate
v-model="params.created" v-model="params.created"
:label=" :label="t('customer.extendedList.tableVisibleColumns.created')"
t('customer.extendedList.tableVisibleColumns.created') @update:model-value="searchFn()"
" is-outlined
@update:model-value="searchFn()" />
is-outlined </QItemSection>
/> </QItem>
</QItemSection> <QItem v-if="shouldRenderColumn('businessTypeFk')">
</QItem> <QItemSection>
<QItem v-if="shouldRenderColumn('businessTypeFk')"> <VnSelectFilter
<QItemSection> :label="
<VnSelectFilter t('customer.extendedList.tableVisibleColumns.businessTypeFk')
:label=" "
t( v-model="params.businessTypeFk"
'customer.extendedList.tableVisibleColumns.businessTypeFk' :options="businessTypesOptions"
) @update:model-value="searchFn()"
" option-value="code"
v-model="params.businessTypeFk" option-label="description"
:options="businessTypesOptions" map-options
@update:model-value="searchFn()" hide-selected
option-value="code" dense
option-label="description" outlined
map-options rounded
hide-selected />
dense </QItemSection>
outlined </QItem>
rounded <QItem v-if="shouldRenderColumn('payMethodFk')">
/> <QItemSection>
</QItemSection> <VnSelectFilter
</QItem> :label="
<QItem v-if="shouldRenderColumn('payMethodFk')"> t('customer.extendedList.tableVisibleColumns.payMethodFk')
<QItemSection> "
<VnSelectFilter v-model="params.payMethodFk"
:label=" :options="paymethodsOptions"
t('customer.extendedList.tableVisibleColumns.payMethodFk') @update:model-value="searchFn()"
" option-value="id"
v-model="params.payMethodFk" option-label="name"
:options="paymethodsOptions" map-options
@update:model-value="searchFn()" hide-selected
option-value="id" dense
option-label="name" outlined
map-options rounded
hide-selected />
dense </QItemSection>
outlined </QItem>
rounded <QItem v-if="shouldRenderColumn('sageTaxTypeFk')">
/> <QItemSection>
</QItemSection> <VnSelectFilter
</QItem> :label="
<QItem v-if="shouldRenderColumn('sageTaxTypeFk')"> t('customer.extendedList.tableVisibleColumns.sageTaxTypeFk')
<QItemSection> "
<VnSelectFilter v-model="params.sageTaxTypeFk"
:label=" @update:model-value="searchFn()"
t( :options="sageTaxTypesOptions"
'customer.extendedList.tableVisibleColumns.sageTaxTypeFk' option-value="id"
) option-label="vat"
" map-options
v-model="params.sageTaxTypeFk" hide-selected
@update:model-value="searchFn()" dense
:options="sageTaxTypesOptions" outlined
option-value="id" rounded
option-label="vat" />
map-options </QItemSection>
hide-selected </QItem>
dense <QItem v-if="shouldRenderColumn('sageTransactionTypeFk')">
outlined <QItemSection>
rounded <VnSelectFilter
/> :label="
</QItemSection> t(
</QItem> 'customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'
<QItem v-if="shouldRenderColumn('sageTransactionTypeFk')"> )
<QItemSection> "
<VnSelectFilter v-model="params.sageTransactionTypeFk"
:label=" @update:model-value="searchFn()"
t( :options="sageTransactionTypesOptions"
'customer.extendedList.tableVisibleColumns.sageTransactionTypeFk' option-value="id"
) option-label="transaction"
" map-options
v-model="params.sageTransactionTypeFk" hide-selected
@update:model-value="searchFn()" dense
:options="sageTransactionTypesOptions" outlined
option-value="id" rounded
option-label="transaction" />
map-options </QItemSection>
hide-selected </QItem>
dense <QItem v-if="shouldRenderColumn('isActive') || shouldRenderColumn('isVies')">
outlined <QItemSection v-if="shouldRenderColumn('isActive')">
rounded <QCheckbox
/> v-model="params.isActive"
</QItemSection> @update:model-value="searchFn()"
</QItem> :label="t('customer.extendedList.tableVisibleColumns.isActive')"
<QItem toggle-indeterminate
v-if="shouldRenderColumn('isActive') || shouldRenderColumn('isVies')" :false-value="undefined"
> />
<QItemSection v-if="shouldRenderColumn('isActive')"> </QItemSection>
<QCheckbox <QItemSection v-if="shouldRenderColumn('isVies')">
v-model="params.isActive" <QCheckbox
@update:model-value="searchFn()" v-model="params.isVies"
:label=" @update:model-value="searchFn()"
t('customer.extendedList.tableVisibleColumns.isActive') :label="t('customer.extendedList.tableVisibleColumns.isVies')"
" toggle-indeterminate
toggle-indeterminate :false-value="undefined"
:false-value="undefined" />
/> </QItemSection>
</QItemSection> </QItem>
<QItemSection v-if="shouldRenderColumn('isVies')"> <QItem
<QCheckbox v-if="
v-model="params.isVies" shouldRenderColumn('isEqualizated') ||
@update:model-value="searchFn()" shouldRenderColumn('isTaxDataChecked')
:label="t('customer.extendedList.tableVisibleColumns.isVies')" "
toggle-indeterminate >
:false-value="undefined" <QItemSection v-if="shouldRenderColumn('isTaxDataChecked')">
/> <QCheckbox
</QItemSection> v-model="params.isTaxDataChecked"
</QItem> @update:model-value="searchFn()"
<QItem :label="
v-if=" t(
shouldRenderColumn('isEqualizated') || 'customer.extendedList.tableVisibleColumns.isTaxDataChecked'
shouldRenderColumn('isTaxDataChecked') )
" "
> toggle-indeterminate
<QItemSection v-if="shouldRenderColumn('isTaxDataChecked')"> :false-value="undefined"
<QCheckbox />
v-model="params.isTaxDataChecked" </QItemSection>
@update:model-value="searchFn()" <QItemSection v-if="shouldRenderColumn('isEqualizated')">
:label=" <QCheckbox
t( v-model="params.isEqualizated"
'customer.extendedList.tableVisibleColumns.isTaxDataChecked' @update:model-value="searchFn()"
) :label="
" t('customer.extendedList.tableVisibleColumns.isEqualizated')
toggle-indeterminate "
:false-value="undefined" toggle-indeterminate
/> :false-value="undefined"
</QItemSection> />
<QItemSection v-if="shouldRenderColumn('isEqualizated')"> </QItemSection>
<QCheckbox </QItem>
v-model="params.isEqualizated" <QItem
@update:model-value="searchFn()" v-if="
:label=" shouldRenderColumn('hasToInvoice') || shouldRenderColumn('isFreezed')
t( "
'customer.extendedList.tableVisibleColumns.isEqualizated' >
) <QItemSection v-if="shouldRenderColumn('isFreezed')">
" <QCheckbox
toggle-indeterminate v-model="params.isFreezed"
:false-value="undefined" @update:model-value="searchFn()"
/> :label="t('customer.extendedList.tableVisibleColumns.isFreezed')"
</QItemSection> toggle-indeterminate
</QItem> :false-value="undefined"
<QItem />
v-if=" </QItemSection>
shouldRenderColumn('hasToInvoice') || <QItemSection v-if="shouldRenderColumn('hasToInvoice')">
shouldRenderColumn('isFreezed') <QCheckbox
" v-model="params.hasToInvoice"
> @update:model-value="searchFn()"
<QItemSection v-if="shouldRenderColumn('isFreezed')"> :label="
<QCheckbox t('customer.extendedList.tableVisibleColumns.hasToInvoice')
v-model="params.isFreezed" "
@update:model-value="searchFn()" toggle-indeterminate
:label=" :false-value="undefined"
t('customer.extendedList.tableVisibleColumns.isFreezed') />
" </QItemSection>
toggle-indeterminate </QItem>
:false-value="undefined" <QItem
/> v-if="
</QItemSection> shouldRenderColumn('isToBeMailed') ||
<QItemSection v-if="shouldRenderColumn('hasToInvoice')"> shouldRenderColumn('hasToInvoiceByAddress')
<QCheckbox "
v-model="params.hasToInvoice" >
@update:model-value="searchFn()" <QItemSection v-if="shouldRenderColumn('hasToInvoiceByAddress')">
:label=" <QCheckbox
t( v-model="params.hasToInvoiceByAddress"
'customer.extendedList.tableVisibleColumns.hasToInvoice' @update:model-value="searchFn()"
) :label="
" t(
toggle-indeterminate 'customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'
:false-value="undefined" )
/> "
</QItemSection> toggle-indeterminate
</QItem> :false-value="undefined"
<QItem />
v-if=" </QItemSection>
shouldRenderColumn('isToBeMailed') || <QItemSection v-if="shouldRenderColumn('isToBeMailed')">
shouldRenderColumn('hasToInvoiceByAddress') <QCheckbox
" v-model="params.isToBeMailed"
> @update:model-value="searchFn()"
<QItemSection v-if="shouldRenderColumn('hasToInvoiceByAddress')"> :label="
<QCheckbox t('customer.extendedList.tableVisibleColumns.isToBeMailed')
v-model="params.hasToInvoiceByAddress" "
@update:model-value="searchFn()" toggle-indeterminate
:label=" :false-value="undefined"
t( />
'customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress' </QItemSection>
) </QItem>
" <QItem
toggle-indeterminate v-if="shouldRenderColumn('hasLcr') || shouldRenderColumn('hasCoreVnl')"
:false-value="undefined" >
/> <QItemSection v-if="shouldRenderColumn('hasLcr')">
</QItemSection> <QCheckbox
<QItemSection v-if="shouldRenderColumn('isToBeMailed')"> v-model="params.hasLcr"
<QCheckbox @update:model-value="searchFn()"
v-model="params.isToBeMailed" :label="t('customer.extendedList.tableVisibleColumns.hasLcr')"
@update:model-value="searchFn()" toggle-indeterminate
:label=" :false-value="undefined"
t( />
'customer.extendedList.tableVisibleColumns.isToBeMailed' </QItemSection>
) <QItemSection v-if="shouldRenderColumn('hasCoreVnl')">
" <QCheckbox
toggle-indeterminate v-model="params.hasCoreVnl"
:false-value="undefined" @update:model-value="searchFn()"
/> :label="t('customer.extendedList.tableVisibleColumns.hasCoreVnl')"
</QItemSection> toggle-indeterminate
</QItem> :false-value="undefined"
<QItem />
v-if=" </QItemSection>
shouldRenderColumn('hasLcr') || shouldRenderColumn('hasCoreVnl') </QItem>
" <QItem v-if="shouldRenderColumn('hasSepaVnl')">
> <QItemSection>
<QItemSection v-if="shouldRenderColumn('hasLcr')"> <QCheckbox
<QCheckbox v-model="params.hasSepaVnl"
v-model="params.hasLcr" @update:model-value="searchFn()"
@update:model-value="searchFn()" :label="t('customer.extendedList.tableVisibleColumns.hasSepaVnl')"
:label="t('customer.extendedList.tableVisibleColumns.hasLcr')" toggle-indeterminate
toggle-indeterminate :false-value="undefined"
:false-value="undefined" />
/> </QItemSection>
</QItemSection> </QItem>
<QItemSection v-if="shouldRenderColumn('hasCoreVnl')">
<QCheckbox
v-model="params.hasCoreVnl"
@update:model-value="searchFn()"
:label="
t('customer.extendedList.tableVisibleColumns.hasCoreVnl')
"
toggle-indeterminate
:false-value="undefined"
/>
</QItemSection>
</QItem>
<QItem v-if="shouldRenderColumn('hasSepaVnl')">
<QItemSection>
<QCheckbox
v-model="params.hasSepaVnl"
@update:model-value="searchFn()"
:label="
t('customer.extendedList.tableVisibleColumns.hasSepaVnl')
"
toggle-indeterminate
:false-value="undefined"
/>
</QItemSection>
</QItem>
<QSeparator /> <QSeparator />
</QList>
</template> </template>
</VnFilterPanel> </VnFilterPanel>
</template> </template>
<style scoped>
.list {
width: 256px;
}
.list * {
max-width: 100%;
}
</style>
<i18n> <i18n>
es: es:
Social name: Razón social Social name: Razón social

View File

@ -36,91 +36,80 @@ const clients = ref();
</template> </template>
<template #body="{ params, searchFn }"> <template #body="{ params, searchFn }">
<QList dense class="list"> <QItem class="q-mb-sm q-mt-sm">
<QItem class="q-mb-sm q-mt-sm"> <QItemSection>
<QItemSection> <VnInput
<VnInput :label="t('Identifier')"
:label="t('Identifier')" is-outlined
is-outlined v-model="params.identifier"
v-model="params.identifier" />
/> </QItemSection>
</QItemSection> </QItem>
</QItem>
<QItem class="q-mb-sm"> <QItem class="q-mb-sm">
<QItemSection v-if="!clients"> <QItemSection v-if="!clients">
<QSkeleton type="QInput" class="full-width" /> <QSkeleton type="QInput" class="full-width" />
</QItemSection> </QItemSection>
<QItemSection v-if="clients"> <QItemSection v-if="clients">
<VnSelectFilter <VnSelectFilter
:input-debounce="0" :input-debounce="0"
:label="t('Social name')" :label="t('Social name')"
:options="clients" :options="clients"
@update:model-value="searchFn()" @update:model-value="searchFn()"
dense dense
emit-value emit-value
hide-selected hide-selected
map-options map-options
option-label="socialName" option-label="socialName"
option-value="socialName" option-value="socialName"
outlined outlined
rounded rounded
use-input use-input
v-model="params.socialName" v-model="params.socialName"
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem class="q-mb-sm">
<QItemSection v-if="!cities"> <QItemSection v-if="!cities">
<QSkeleton type="QInput" class="full-width" /> <QSkeleton type="QInput" class="full-width" />
</QItemSection> </QItemSection>
<QItemSection v-if="cities"> <QItemSection v-if="cities">
<VnSelectFilter <VnSelectFilter
:input-debounce="0" :input-debounce="0"
:label="t('City')" :label="t('City')"
:options="cities" :options="cities"
@update:model-value="searchFn()" @update:model-value="searchFn()"
dense dense
emit-value emit-value
hide-selected hide-selected
map-options map-options
option-label="name" option-label="name"
option-value="name" option-value="name"
outlined outlined
rounded rounded
use-input use-input
v-model="params.city" v-model="params.city"
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem class="q-mb-sm">
<QItemSection> <QItemSection>
<VnInput :label="t('Phone')" is-outlined v-model="params.phone" /> <VnInput :label="t('Phone')" is-outlined v-model="params.phone" />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem class="q-mb-sm">
<QItemSection> <QItemSection>
<VnInput :label="t('Email')" is-outlined v-model="params.email" /> <VnInput :label="t('Email')" is-outlined v-model="params.email" />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QSeparator /> <QSeparator />
</QList>
</template> </template>
</VnFilterPanel> </VnFilterPanel>
</template> </template>
<style scoped>
.list {
width: 256px;
}
.list * {
max-width: 100%;
}
</style>
<i18n> <i18n>
en: en:
params: params:

View File

@ -27,71 +27,60 @@ function isValidNumber(value) {
</div> </div>
</template> </template>
<template #body="{ params }"> <template #body="{ params }">
<QList dense class="q-gutter-y-sm q-mt-sm"> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInput :label="t('Order ID')" v-model="params.orderFk" is-outlined>
<VnInput <template #prepend>
:label="t('Order ID')" <QIcon name="vn:basket" size="xs" />
v-model="params.orderFk" </template>
is-outlined </VnInput>
> </QItemSection>
<template #prepend> </QItem>
<QIcon name="vn:basket" size="xs" /> <QItem>
</template> <QItemSection>
</VnInput> <VnInput
</QItemSection> :label="t('Customer ID')"
</QItem> v-model="params.clientFk"
<QItem> is-outlined
<QItemSection> >
<VnInput <template #prepend>
:label="t('Customer ID')" <QIcon name="vn:client" size="xs" />
v-model="params.clientFk" </template>
is-outlined </VnInput>
> </QItemSection>
<template #prepend> </QItem>
<QIcon name="vn:client" size="xs" /> <QItem>
</template> <QItemSection>
</VnInput> <VnInput
</QItemSection> :label="t('Amount')"
</QItem> v-model="params.amount"
<QItem> is-outlined
<QItemSection> @update:model-value="
<VnInput (value) => {
:label="t('Amount')" if (value.includes(','))
v-model="params.amount" params.amount = params.amount.replace(',', '.');
is-outlined }
@update:model-value=" "
(value) => { :rules="[
if (value.includes(',')) (val) => isValidNumber(val) || !val || 'Please type a number',
params.amount = params.amount.replace(',', '.'); ]"
} lazy-rules
" >
:rules="[ <template #prepend>
(val) => <QIcon name="euro" size="sm" />
isValidNumber(val) || !val || 'Please type a number', </template>
]" </VnInput>
lazy-rules </QItemSection>
> </QItem>
<template #prepend>
<QIcon name="euro" size="sm" />
</template>
</VnInput>
</QItemSection>
</QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<VnInputDate <VnInputDate v-model="params.from" :label="t('From')" is-outlined />
v-model="params.from" </QItemSection>
:label="t('From')" <QItemSection>
is-outlined <VnInputDate v-model="params.to" :label="t('To')" is-outlined />
/> </QItemSection>
</QItemSection> </QItem>
<QItemSection>
<VnInputDate v-model="params.to" :label="t('To')" is-outlined />
</QItemSection>
</QItem>
</QList>
</template> </template>
</VnFilterPanel> </VnFilterPanel>
</template> </template>

View File

@ -54,151 +54,149 @@ const suppliersOptions = ref([]);
</div> </div>
</template> </template>
<template #body="{ params }"> <template #body="{ params }">
<QList dense class="list q-gutter-y-sm q-mt-sm"> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInput
<VnInput v-model="params.search"
v-model="params.search" :label="t('params.search')"
:label="t('params.search')" is-outlined
is-outlined />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInput
<VnInput v-model="params.reference"
v-model="params.reference" :label="t('params.reference')"
:label="t('params.reference')" is-outlined
is-outlined />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInput
<VnInput v-model="params.invoiceNumber"
v-model="params.invoiceNumber" :label="t('params.invoiceNumber')"
:label="t('params.invoiceNumber')" is-outlined
is-outlined />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInput
<VnInput v-model="params.travelFk"
v-model="params.travelFk" :label="t('params.travelFk')"
:label="t('params.travelFk')" is-outlined
is-outlined />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnSelectFilter
<VnSelectFilter :label="t('params.companyFk')"
:label="t('params.companyFk')" v-model="params.companyFk"
v-model="params.companyFk" :options="companiesOptions"
:options="companiesOptions" option-value="id"
option-value="id" option-label="code"
option-label="code" hide-selected
hide-selected dense
dense outlined
outlined rounded
rounded />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnSelectFilter
<VnSelectFilter :label="t('params.currencyFk')"
:label="t('params.currencyFk')" v-model="params.currencyFk"
v-model="params.currencyFk" :options="currenciesOptions"
:options="currenciesOptions" option-value="id"
option-value="id" option-label="name"
option-label="name" hide-selected
hide-selected dense
dense outlined
outlined rounded
rounded />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnSelectFilter
<VnSelectFilter :label="t('params.supplierFk')"
:label="t('params.supplierFk')" v-model="params.supplierFk"
v-model="params.supplierFk" :options="suppliersOptions"
:options="suppliersOptions" option-value="id"
option-value="id" option-label="name"
option-label="name" hide-selected
hide-selected dense
dense outlined
outlined rounded
rounded >
> <template #option="scope">
<template #option="scope"> <QItem v-bind="scope.itemProps">
<QItem v-bind="scope.itemProps"> <QItemSection>
<QItemSection> <QItemLabel>{{
<QItemLabel>{{ scope.opt?.name + ': ' + scope.opt?.nickname
scope.opt?.name + ': ' + scope.opt?.nickname }}</QItemLabel>
}}</QItemLabel> </QItemSection>
</QItemSection> </QItem>
</QItem> </template>
</template> </VnSelectFilter>
</VnSelectFilter> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInputDate
<VnInputDate :label="t('params.created')"
:label="t('params.created')" is-outlined
is-outlined v-model="params.created"
v-model="params.created" />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInputDate
<VnInputDate :label="t('params.from')"
:label="t('params.from')" is-outlined
is-outlined v-model="params.from"
v-model="params.from" />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInputDate
<VnInputDate :label="t('params.to')"
:label="t('params.to')" is-outlined
is-outlined v-model="params.to"
v-model="params.to" />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <QCheckbox
<QCheckbox :label="t('params.isBooked')"
:label="t('params.isBooked')" v-model="params.isBooked"
v-model="params.isBooked" toggle-indeterminate
toggle-indeterminate />
/> </QItemSection>
</QItemSection> <QItemSection>
<QItemSection> <QCheckbox
<QCheckbox :label="t('params.isConfirmed')"
:label="t('params.isConfirmed')" v-model="params.isConfirmed"
v-model="params.isConfirmed" toggle-indeterminate
toggle-indeterminate />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <QCheckbox
<QCheckbox :label="t('params.isOrdered')"
:label="t('params.isOrdered')" v-model="params.isOrdered"
v-model="params.isOrdered" toggle-indeterminate
toggle-indeterminate />
/> </QItemSection>
</QItemSection> </QItem>
</QItem>
</QList>
</template> </template>
</VnFilterPanel> </VnFilterPanel>
</template> </template>

View File

@ -36,55 +36,121 @@ const suppliersRef = ref();
</div> </div>
</template> </template>
<template #body="{ params, searchFn }"> <template #body="{ params, searchFn }">
<QList dense class="list q-gutter-y-sm q-mt-sm"> <QItem>
<QItemSection>
<VnInput
:label="t('Id or Supplier')"
v-model="params.search"
is-outlined
>
<template #prepend>
<QIcon name="badge" size="sm"></QIcon>
</template>
</VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
:label="t('params.supplierRef')"
v-model="params.supplierRef"
is-outlined
lazy-rules
>
<template #prepend>
<QIcon name="vn:client" size="sm"></QIcon>
</template>
</VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnSelectFilter
:label="t('params.supplierFk')"
v-model="params.supplierFk"
:options="suppliers"
option-value="id"
option-label="nickname"
@input-value="suppliersRef.fetch()"
dense
outlined
rounded
>
</VnSelectFilter>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
:label="t('params.fi')"
v-model="params.fi"
is-outlined
lazy-rules
>
<template #prepend>
<QIcon name="badge" size="sm"></QIcon>
</template>
</VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
:label="t('params.serialNumber')"
v-model="params.serialNumber"
is-outlined
lazy-rules
>
<template #prepend>
<QIcon name="badge" size="sm"></QIcon>
</template>
</VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
:label="t('params.serial')"
v-model="params.serial"
is-outlined
lazy-rules
>
<template #prepend>
<QIcon name="badge" size="sm"></QIcon>
</template>
</VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
:label="t('Amount')"
v-model="params.amount"
is-outlined
lazy-rules
>
<template #prepend>
<QIcon name="euro" size="sm"></QIcon>
</template>
</VnInput>
</QItemSection>
</QItem>
<QItem class="q-mb-md">
<QItemSection>
<QCheckbox
:label="t('params.isBooked')"
v-model="params.isBooked"
@update:model-value="searchFn()"
toggle-indeterminate
/>
</QItemSection>
</QItem>
<QExpansionItem :label="t('More options')" expand-separator>
<QItem> <QItem>
<QItemSection> <QItemSection>
<VnInput <VnInput
:label="t('Id or Supplier')" :label="t('params.awb')"
v-model="params.search" v-model="params.awbCode"
is-outlined
>
<template #prepend>
<QIcon name="badge" size="sm"></QIcon>
</template>
</VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
:label="t('params.supplierRef')"
v-model="params.supplierRef"
is-outlined
lazy-rules
>
<template #prepend>
<QIcon name="vn:client" size="sm"></QIcon>
</template>
</VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnSelectFilter
:label="t('params.supplierFk')"
v-model="params.supplierFk"
:options="suppliers"
option-value="id"
option-label="nickname"
@input-value="suppliersRef.fetch()"
dense
outlined
rounded
>
</VnSelectFilter>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
:label="t('params.fi')"
v-model="params.fi"
is-outlined is-outlined
lazy-rules lazy-rules
> >
@ -97,126 +163,45 @@ const suppliersRef = ref();
<QItem> <QItem>
<QItemSection> <QItemSection>
<VnInput <VnInput
:label="t('params.serialNumber')" :label="t('params.account')"
v-model="params.serialNumber" v-model="params.account"
is-outlined is-outlined
lazy-rules lazy-rules
> >
<template #prepend> <template #prepend>
<QIcon name="badge" size="sm"></QIcon> <QIcon name="person" size="sm" />
</template> </template>
</VnInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<VnInput <VnInputDate
:label="t('params.serial')" :label="t('From')"
v-model="params.serial" v-model="params.from"
is-outlined is-outlined
lazy-rules
>
<template #prepend>
<QIcon name="badge" size="sm"></QIcon>
</template>
</VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
:label="t('Amount')"
v-model="params.amount"
is-outlined
lazy-rules
>
<template #prepend>
<QIcon name="euro" size="sm"></QIcon>
</template>
</VnInput>
</QItemSection>
</QItem>
<QItem class="q-mb-md">
<QItemSection>
<QCheckbox
:label="t('params.isBooked')"
v-model="params.isBooked"
@update:model-value="searchFn()"
toggle-indeterminate
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QExpansionItem :label="t('More options')" expand-separator> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInputDate :label="t('To')" v-model="params.to" is-outlined />
<VnInput </QItemSection>
:label="t('params.awb')" </QItem>
v-model="params.awbCode" <QItem>
is-outlined <QItemSection>
lazy-rules <VnInputDate
> :label="t('Issued')"
<template #prepend> v-model="params.issued"
<QIcon name="badge" size="sm"></QIcon> is-outlined
</template> />
</VnInput> </QItemSection>
</QItemSection> </QItem>
</QItem> </QExpansionItem>
<QItem>
<QItemSection>
<VnInput
:label="t('params.account')"
v-model="params.account"
is-outlined
lazy-rules
>
<template #prepend>
<QIcon name="person" size="sm" />
</template>
</VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInputDate
:label="t('From')"
v-model="params.from"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInputDate
:label="t('To')"
v-model="params.to"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInputDate
:label="t('Issued')"
v-model="params.issued"
is-outlined
/>
</QItemSection>
</QItem>
</QExpansionItem>
</QList>
</template> </template>
</VnFilterPanel> </VnFilterPanel>
</template> </template>
<style scoped>
.list {
width: 256px;
}
.list * {
max-width: 100%;
}
</style>
<i18n> <i18n>
en: en:
params: params:

View File

@ -41,95 +41,89 @@ function setWorkers(data) {
</div> </div>
</template> </template>
<template #body="{ params, searchFn }"> <template #body="{ params, searchFn }">
<QList dense class="q-gutter-y-sm q-mt-sm"> <QItem>
<QItemSection>
<VnInput
:label="t('Customer ID')"
v-model="params.clientFk"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput v-model="params.fi" :label="t('FI')" is-outlined />
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput :label="t('Amount')" v-model="params.amount" is-outlined />
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QInput
:label="t('Min')"
dense
lazy-rules
outlined
rounded
type="number"
v-model.number="params.min"
/>
</QItemSection>
<QItemSection>
<QInput
:label="t('Max')"
dense
lazy-rules
outlined
rounded
type="number"
v-model.number="params.max"
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QCheckbox
:label="t('Has PDF')"
@update:model-value="searchFn()"
toggle-indeterminate
v-model="params.hasPdf"
/>
</QItemSection>
</QItem>
<QSeparator />
<QExpansionItem :label="t('More options')" expand-separator>
<QItem> <QItem>
<QItemSection> <QItemSection>
<VnInput <VnInputDate
:label="t('Customer ID')" v-model="params.issued"
v-model="params.clientFk" :label="t('Issued')"
is-outlined is-outlined
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<VnInput v-model="params.fi" :label="t('FI')" is-outlined /> <VnInputDate
</QItemSection> v-model="params.created"
</QItem> :label="t('Created')"
<QItem>
<QItemSection>
<VnInput
:label="t('Amount')"
v-model="params.amount"
is-outlined is-outlined
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInputDate
:label="t('Min')" v-model="params.dued"
dense :label="t('Dued')"
lazy-rules is-outlined
outlined
rounded
type="number"
v-model.number="params.min"
/>
</QItemSection>
<QItemSection>
<QInput
:label="t('Max')"
dense
lazy-rules
outlined
rounded
type="number"
v-model.number="params.max"
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> </QExpansionItem>
<QItemSection>
<QCheckbox
:label="t('Has PDF')"
@update:model-value="searchFn()"
toggle-indeterminate
v-model="params.hasPdf"
/>
</QItemSection>
</QItem>
<QSeparator />
<QExpansionItem :label="t('More options')" expand-separator>
<QItem>
<QItemSection>
<VnInputDate
v-model="params.issued"
:label="t('Issued')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInputDate
v-model="params.created"
:label="t('Created')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInputDate
v-model="params.dued"
:label="t('Dued')"
is-outlined
/>
</QItemSection>
</QItem>
</QExpansionItem>
</QList>
</template> </template>
</VnFilterPanel> </VnFilterPanel>
</template> </template>

View File

@ -27,87 +27,83 @@ const props = defineProps({
</div> </div>
</template> </template>
<template #body="{ params }"> <template #body="{ params }">
<QList dense class="q-gutter-y-sm q-mt-sm"> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInputDate
<VnInputDate v-model="params.from"
v-model="params.from" :label="t('invoiceOut.negativeBases.from')"
:label="t('invoiceOut.negativeBases.from')" is-outlined
is-outlined />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInputDate
<VnInputDate v-model="params.to"
v-model="params.to" :label="t('invoiceOut.negativeBases.to')"
:label="t('invoiceOut.negativeBases.to')" is-outlined
is-outlined />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInput
<VnInput v-model="params.company"
v-model="params.company" :label="t('invoiceOut.negativeBases.company')"
:label="t('invoiceOut.negativeBases.company')" is-outlined
is-outlined />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInput
<VnInput v-model="params.country"
v-model="params.country" :label="t('invoiceOut.negativeBases.country')"
:label="t('invoiceOut.negativeBases.country')" is-outlined
is-outlined />
/> </QItemSection>
</QItemSection> </QItem>
</QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<VnInput <VnInput
v-model="params.clientId" v-model="params.clientId"
:label="t('invoiceOut.negativeBases.clientId')" :label="t('invoiceOut.negativeBases.clientId')"
is-outlined is-outlined
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<VnInput <VnInput
v-model="params.clientSocialName" v-model="params.clientSocialName"
:label="t('invoiceOut.negativeBases.client')" :label="t('invoiceOut.negativeBases.client')"
is-outlined is-outlined
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<VnInput <VnInput
v-model="params.amount" v-model="params.amount"
:label="t('invoiceOut.negativeBases.amount')" :label="t('invoiceOut.negativeBases.amount')"
is-outlined is-outlined
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<VnInput <VnInput
v-model="params.comercialName" v-model="params.comercialName"
:label="t('invoiceOut.negativeBases.comercial')" :label="t('invoiceOut.negativeBases.comercial')"
is-outlined is-outlined
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
</QList>
</template> </template>
</VnFilterPanel> </VnFilterPanel>
</template> </template>
<style scoped></style>
<i18n> <i18n>
en: en:
params: params:

View File

@ -219,183 +219,181 @@ const getCategoryClass = (category, params) => {
</template> </template>
</template> </template>
<template #body="{ params, searchFn }"> <template #body="{ params, searchFn }">
<QList dense style="max-width: 256px"> <QItem class="category-filter q-mt-md">
<QItem class="category-filter q-mt-md"> <div
<div v-for="category in categoryList"
v-for="category in categoryList" :key="category.name"
:key="category.name" :class="['category', getCategoryClass(category, params)]"
:class="['category', getCategoryClass(category, params)]"
>
<QIcon
:name="category.icon"
class="category-icon"
@click="selectCategory(params, category, searchFn)"
>
<QTooltip>
{{ t(category.name) }}
</QTooltip>
</QIcon>
</div>
</QItem>
<QItem class="q-my-md">
<QItemSection>
<VnSelectFilter
:label="t('params.type')"
v-model="params.typeFk"
:options="typeList"
option-value="id"
option-label="name"
dense
outlined
rounded
emit-value
use-input
:disable="!selectedCategoryFk"
@update:model-value="
(value) => {
selectedTypeFk = value;
searchFn();
}
"
>
<template #option="{ itemProps, opt }">
<QItem v-bind="itemProps">
<QItemSection>
<QItemLabel>{{ opt.name }}</QItemLabel>
<QItemLabel caption>
{{ opt.categoryName }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectFilter>
</QItemSection>
</QItem>
<QSeparator />
<QItem class="q-my-md">
<QItemSection>
<VnSelectFilter
:label="t('params.order')"
v-model="selectedOrder"
:options="orderList || []"
option-value="way"
option-label="name"
dense
outlined
rounded
:emit-value="false"
use-input
:is-clearable="false"
@update:model-value="
(value) => onOrderChange(value, params, searchFn)
"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-md">
<QItemSection>
<VnSelectFilter
:label="t('params.order')"
v-model="selectedOrderField"
:options="OrderFields || []"
option-value="field"
option-label="name"
dense
outlined
rounded
:emit-value="false"
use-input
:is-clearable="false"
@update:model-value="
(value) => onOrderFieldChange(value, params, searchFn)
"
/>
</QItemSection>
</QItem>
<QSeparator />
<QItem class="q-mt-md">
<QItemSection>
<VnSelectFilter
:label="t('params.tag')"
v-model="selectedTag"
:options="props.tags || []"
option-value="id"
option-label="name"
dense
outlined
rounded
:emit-value="false"
use-input
/>
</QItemSection>
</QItem>
<QItem
v-for="(value, index) in tagValues"
:key="value"
class="q-mt-md filter-value"
> >
<VnInput <QIcon
v-if="selectedTag?.isFree" :name="category.icon"
v-model="value.value" class="category-icon"
:label="t('params.value')" @click="selectCategory(params, category, searchFn)"
is-outlined >
class="filter-input" <QTooltip>
/> {{ t(category.name) }}
</QTooltip>
</QIcon>
</div>
</QItem>
<QItem class="q-my-md">
<QItemSection>
<VnSelectFilter <VnSelectFilter
v-else :label="t('params.type')"
:label="t('params.value')" v-model="params.typeFk"
v-model="value.value" :options="typeList"
:options="tagOptions || []" option-value="id"
option-value="value" option-label="name"
option-label="value"
dense dense
outlined outlined
rounded rounded
emit-value emit-value
use-input use-input
:disable="!selectedTag" :disable="!selectedCategoryFk"
class="filter-input" @update:model-value="
(value) => {
selectedTypeFk = value;
searchFn();
}
"
>
<template #option="{ itemProps, opt }">
<QItem v-bind="itemProps">
<QItemSection>
<QItemLabel>{{ opt.name }}</QItemLabel>
<QItemLabel caption>
{{ opt.categoryName }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectFilter>
</QItemSection>
</QItem>
<QSeparator />
<QItem class="q-my-md">
<QItemSection>
<VnSelectFilter
:label="t('params.order')"
v-model="selectedOrder"
:options="orderList || []"
option-value="way"
option-label="name"
dense
outlined
rounded
:emit-value="false"
use-input
:is-clearable="false"
@update:model-value="
(value) => onOrderChange(value, params, searchFn)
"
/> />
</QItemSection>
</QItem>
<QItem class="q-mb-md">
<QItemSection>
<VnSelectFilter
:label="t('params.order')"
v-model="selectedOrderField"
:options="OrderFields || []"
option-value="field"
option-label="name"
dense
outlined
rounded
:emit-value="false"
use-input
:is-clearable="false"
@update:model-value="
(value) => onOrderFieldChange(value, params, searchFn)
"
/>
</QItemSection>
</QItem>
<QSeparator />
<QItem class="q-mt-md">
<QItemSection>
<VnSelectFilter
:label="t('params.tag')"
v-model="selectedTag"
:options="props.tags || []"
option-value="id"
option-label="name"
dense
outlined
rounded
:emit-value="false"
use-input
/>
</QItemSection>
</QItem>
<QItem
v-for="(value, index) in tagValues"
:key="value"
class="q-mt-md filter-value"
>
<VnInput
v-if="selectedTag?.isFree"
v-model="value.value"
:label="t('params.value')"
is-outlined
class="filter-input"
/>
<VnSelectFilter
v-else
:label="t('params.value')"
v-model="value.value"
:options="tagOptions || []"
option-value="value"
option-label="value"
dense
outlined
rounded
emit-value
use-input
:disable="!selectedTag"
class="filter-input"
/>
<FetchData <FetchData
v-if="selectedTag && !selectedTag.isFree" v-if="selectedTag && !selectedTag.isFree"
:url="`Tags/${selectedTag?.id}/filterValue`" :url="`Tags/${selectedTag?.id}/filterValue`"
limit="30" limit="30"
auto-load auto-load
@on-fetch="(data) => (tagOptions = data)" @on-fetch="(data) => (tagOptions = data)"
/> />
<QIcon <QIcon
name="delete" name="delete"
class="filter-icon" class="filter-icon"
@click="(tagValues || []).splice(index, 1)" @click="(tagValues || []).splice(index, 1)"
/>
</QItem>
<QItem class="q-mt-lg">
<QIcon
name="add_circle"
class="filter-icon"
@click="tagValues.push({})"
/>
</QItem>
<QItem>
<QItemSection class="q-py-sm">
<QBtn
:label="t('Search')"
class="full-width"
color="primary"
dense
icon="search"
rounded
type="button"
unelevated
:disable="isButtonDisabled"
@click.stop="applyTagFilter(params, searchFn)"
/> />
</QItem> </QItemSection>
<QItem class="q-mt-lg"> </QItem>
<QIcon <QSeparator />
name="add_circle"
class="filter-icon"
@click="tagValues.push({})"
/>
</QItem>
<QItem>
<QItemSection class="q-py-sm">
<QBtn
:label="t('Search')"
class="full-width"
color="primary"
dense
icon="search"
rounded
type="button"
unelevated
:disable="isButtonDisabled"
@click.stop="applyTagFilter(params, searchFn)"
/>
</QItemSection>
</QItem>
<QSeparator />
</QList>
</template> </template>
</VnFilterPanel> </VnFilterPanel>
</template> </template>

View File

@ -59,162 +59,152 @@ const sourceList = ref(null);
</div> </div>
</template> </template>
<template #body="{ params }"> <template #body="{ params }">
<QList id="orderFilter" dense> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInput
<VnInput is-outlined
is-outlined :label="t('customerId')"
:label="t('customerId')" v-model="params.clientFk"
v-model="params.clientFk" lazy-rules
lazy-rules >
> <template #prepend>
<template #prepend> <QIcon name="badge" size="sm"></QIcon>
<QIcon name="badge" size="sm"></QIcon> </template>
</template> </VnInput>
</VnInput> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection v-if="agencyList">
<QItemSection v-if="agencyList"> <VnSelectFilter
<VnSelectFilter :label="t('agency')"
:label="t('agency')" v-model="params.agencyModeFk"
v-model="params.agencyModeFk" :options="agencyList"
:options="agencyList" option-value="id"
option-value="id" option-label="name"
option-label="name" dense
dense outlined
outlined rounded
rounded emit-value
emit-value map-options
map-options use-input
use-input :input-debounce="0"
:input-debounce="0" />
/> </QItemSection>
</QItemSection> <QItemSection v-else>
<QItemSection v-else> <QSkeleton type="QInput" class="full-width" />
<QSkeleton type="QInput" class="full-width" /> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection v-if="salesPersonList">
<QItemSection v-if="salesPersonList"> <VnSelectFilter
<VnSelectFilter :label="t('salesPerson')"
:label="t('salesPerson')" v-model="params.workerFk"
v-model="params.workerFk" :options="salesPersonList"
:options="salesPersonList" option-value="id"
option-value="id" option-label="name"
option-label="name" dense
dense outlined
outlined rounded
rounded emit-value
emit-value map-options
map-options use-input
use-input :input-debounce="0"
:input-debounce="0" >
> <template #option="{ itemProps, opt }">
<template #option="{ itemProps, opt }"> <QItem v-bind="itemProps">
<QItem v-bind="itemProps"> <QItemSection>
<QItemSection> <QItemLabel>{{ opt.name }}</QItemLabel>
<QItemLabel>{{ opt.name }}</QItemLabel> <QItemLabel caption>
<QItemLabel caption> {{ opt.nickname }},{{ opt.code }}
{{ opt.nickname }},{{ opt.code }} </QItemLabel>
</QItemLabel> </QItemSection>
</QItemSection> </QItem>
</QItem> </template>
</template> </VnSelectFilter>
</VnSelectFilter> </QItemSection>
</QItemSection> <QItemSection v-else>
<QItemSection v-else> <QSkeleton type="QInput" class="full-width" />
<QSkeleton type="QInput" class="full-width" /> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInputDate
<VnInputDate v-model="params.from"
v-model="params.from" :label="t('fromLanded')"
:label="t('fromLanded')" dense
dense outlined
outlined rounded
rounded />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInputDate
<VnInputDate v-model="params.to"
v-model="params.to" :label="t('toLanded')"
:label="t('toLanded')" dense
dense outlined
outlined rounded
rounded />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInput
<VnInput :label="t('orderId')"
:label="t('orderId')" v-model="params.orderFk"
v-model="params.orderFk" lazy-rules
lazy-rules is-outlined
is-outlined />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection v-if="sourceList">
<QItemSection v-if="sourceList"> <VnSelectFilter
<VnSelectFilter :label="t('application')"
:label="t('application')" v-model="params.sourceApp"
v-model="params.sourceApp" :options="sourceList"
:options="sourceList" option-label="value"
option-label="value" emit-value
emit-value map-options
map-options use-input
use-input dense
dense outlined
outlined rounded
rounded :input-debounce="0"
:input-debounce="0" />
/> </QItemSection>
</QItemSection> <QItemSection v-else>
<QItemSection v-else> <QSkeleton type="QInput" class="full-width" />
<QSkeleton type="QInput" class="full-width" /> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <QCheckbox
<QCheckbox v-model="params.myTeam"
v-model="params.myTeam" :label="t('myTeam')"
:label="t('myTeam')" toggle-indeterminate
toggle-indeterminate />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <QCheckbox
<QCheckbox v-model="params.isConfirmed"
v-model="params.isConfirmed" :label="t('isConfirmed')"
:label="t('isConfirmed')" toggle-indeterminate
toggle-indeterminate />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <QCheckbox v-model="params.showEmpty" :label="t('showEmpty')" />
<QCheckbox v-model="params.showEmpty" :label="t('showEmpty')" /> </QItemSection>
</QItemSection> </QItem>
</QItem>
</QList>
</template> </template>
</VnFilterPanel> </VnFilterPanel>
</template> </template>
<style lang="scss">
#orderFilter {
.q-item {
padding-top: 8px;
}
}
</style>
<i18n> <i18n>
en: en:
params: params:

View File

@ -61,144 +61,142 @@ const warehouseList = ref([]);
</div> </div>
</template> </template>
<template #body="{ params }"> <template #body="{ params }">
<QList dense> <QItem class="q-my-sm">
<QItem class="q-my-sm"> <QItemSection v-if="workerList">
<QItemSection v-if="workerList"> <VnSelectFilter
<VnSelectFilter :label="t('Worker')"
:label="t('Worker')" v-model="params.workerFk"
v-model="params.workerFk" :options="workerList"
:options="workerList" option-value="id"
option-value="id" option-label="nickname"
option-label="nickname" dense
dense outlined
outlined rounded
rounded emit-value
emit-value map-options
map-options use-input
use-input :input-debounce="0"
:input-debounce="0" >
> <template #option="{ itemProps, opt }">
<template #option="{ itemProps, opt }"> <QItem v-bind="itemProps">
<QItem v-bind="itemProps"> <QItemSection>
<QItemSection> <QItemLabel>{{ opt.name }}</QItemLabel>
<QItemLabel>{{ opt.name }}</QItemLabel> <QItemLabel caption>
<QItemLabel caption> {{ opt.nickname }},{{ opt.code }}
{{ opt.nickname }},{{ opt.code }} </QItemLabel>
</QItemLabel> </QItemSection>
</QItemSection> </QItem>
</QItem> </template>
</template> </VnSelectFilter>
</VnSelectFilter> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem class="q-my-sm">
<QItem class="q-my-sm"> <QItemSection v-if="agencyList">
<QItemSection v-if="agencyList"> <VnSelectFilter
<VnSelectFilter :label="t('Agency')"
:label="t('Agency')" v-model="params.agencyModeFk"
v-model="params.agencyModeFk" :options="agencyList"
:options="agencyList" option-value="id"
option-value="id" option-label="name"
option-label="name" dense
dense outlined
outlined rounded
rounded emit-value
emit-value map-options
map-options use-input
use-input :input-debounce="0"
:input-debounce="0" />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem class="q-my-sm">
<QItem class="q-my-sm"> <QItemSection>
<QItemSection> <VnInputDate
<VnInputDate v-model="params.from"
v-model="params.from" :label="t('From')"
:label="t('From')" is-outlined
is-outlined :disable="Boolean(params.scopeDays)"
:disable="Boolean(params.scopeDays)" @update:model-value="params.scopeDays = null"
@update:model-value="params.scopeDays = null" />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem class="q-my-sm">
<QItem class="q-my-sm"> <QItemSection>
<QItemSection> <VnInputDate
<VnInputDate v-model="params.to"
v-model="params.to" :label="t('To')"
:label="t('To')" is-outlined
is-outlined :disable="Boolean(params.scopeDays)"
:disable="Boolean(params.scopeDays)" @update:model-value="params.scopeDays = null"
@update:model-value="params.scopeDays = null" />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem class="q-my-sm">
<QItem class="q-my-sm"> <QItemSection>
<QItemSection> <VnInput
<VnInput v-model="params.scopeDays"
v-model="params.scopeDays" type="number"
type="number" :label="t('Days Onward')"
:label="t('Days Onward')" is-outlined
is-outlined clearable
clearable :disable="Boolean(params.from || params.to)"
:disable="Boolean(params.from || params.to)" @update:model-value="
@update:model-value=" params.to = null;
params.to = null; params.from = null;
params.from = null; "
" />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem class="q-my-sm">
<QItem class="q-my-sm"> <QItemSection v-if="vehicleList">
<QItemSection v-if="vehicleList"> <VnSelectFilter
<VnSelectFilter :label="t('Vehicle')"
:label="t('Vehicle')" v-model="params.vehicleFk"
v-model="params.vehicleFk" :options="vehicleList"
:options="vehicleList" option-value="id"
option-value="id" option-label="numberPlate"
option-label="numberPlate" dense
dense outlined
outlined rounded
rounded emit-value
emit-value map-options
map-options use-input
use-input :input-debounce="0"
:input-debounce="0" />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem class="q-my-sm">
<QItem class="q-my-sm"> <QItemSection>
<QItemSection> <VnInput v-model="params.m3" label="m³" is-outlined clearable />
<VnInput v-model="params.m3" label="m³" is-outlined clearable /> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem class="q-my-sm">
<QItem class="q-my-sm"> <QItemSection v-if="vehicleList">
<QItemSection v-if="vehicleList"> <VnSelectFilter
<VnSelectFilter :label="t('Warehouse')"
:label="t('Warehouse')" v-model="params.warehouseFk"
v-model="params.warehouseFk" :options="warehouseList"
:options="warehouseList" option-value="id"
option-value="id" option-label="name"
option-label="name" dense
dense outlined
outlined rounded
rounded emit-value
emit-value map-options
map-options use-input
use-input :input-debounce="0"
:input-debounce="0" />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem class="q-my-sm">
<QItem class="q-my-sm"> <QItemSection>
<QItemSection> <VnInput
<VnInput v-model="params.description"
v-model="params.description" :label="t('Description')"
:label="t('Description')" is-outlined
is-outlined clearable
clearable />
/> </QItemSection>
</QItemSection> </QItem>
</QItem>
</QList>
</template> </template>
</VnFilterPanel> </VnFilterPanel>
</template> </template>

View File

@ -28,103 +28,101 @@ const countries = ref();
</div> </div>
</template> </template>
<template #body="{ params }"> <template #body="{ params }">
<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
is-outlined >
> <template #prepend>
<template #prepend> <QIcon name="article" size="sm"></QIcon>
<QIcon name="article" size="sm"></QIcon> </template>
</template> </VnInput>
</VnInput> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <QCheckbox
<QCheckbox :label="t('route.cmr.list.hasCmrDms')"
:label="t('route.cmr.list.hasCmrDms')" v-model="params.hasCmrDms"
v-model="params.hasCmrDms" lazy-rules
lazy-rules />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInput
<VnInput :label="t('route.cmr.list.ticketFk')"
:label="t('route.cmr.list.ticketFk')" v-model="params.ticketFk"
v-model="params.ticketFk" is-outlined
is-outlined >
> <template #prepend>
<template #prepend> <QIcon name="vn:ticket" size="sm"></QIcon>
<QIcon name="vn:ticket" size="sm"></QIcon> </template>
</template> </VnInput>
</VnInput> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInput
<VnInput :label="t('route.cmr.list.routeFk')"
:label="t('route.cmr.list.routeFk')" v-model="params.routeFk"
v-model="params.routeFk" is-outlined
is-outlined >
> <template #prepend>
<template #prepend> <QIcon name="vn:delivery" size="sm"></QIcon>
<QIcon name="vn:delivery" size="sm"></QIcon> </template>
</template> </VnInput>
</VnInput> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInput
<VnInput :label="t('route.cmr.list.clientFk')"
:label="t('route.cmr.list.clientFk')" v-model="params.clientFk"
v-model="params.clientFk" is-outlined
is-outlined >
> <template #prepend>
<template #prepend> <QIcon name="vn:client" size="sm"></QIcon>
<QIcon name="vn:client" size="sm"></QIcon> </template>
</template> </VnInput>
</VnInput> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection v-if="!countries">
<QItemSection v-if="!countries"> <QSkeleton type="QInput" class="full-width" />
<QSkeleton type="QInput" class="full-width" /> </QItemSection>
</QItemSection> <QItemSection v-if="countries" class="q-mb-sm">
<QItemSection v-if="countries" class="q-mb-sm"> <QSelect
<QSelect :label="t('route.cmr.list.country')"
:label="t('route.cmr.list.country')" v-model="params.country"
v-model="params.country" :options="countries"
:options="countries" option-value="country"
option-value="country" option-label="country"
option-label="country" transition-show="jump-down"
transition-show="jump-down" transition-hide="jump-up"
transition-hide="jump-up" emit-value
emit-value map-options
map-options dense
dense outlined
outlined rounded
rounded >
> <template #prepend>
<template #prepend> <QIcon name="flag" size="sm"></QIcon>
<QIcon name="flag" size="sm"></QIcon> </template>
</template> </QSelect>
</QSelect> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInputDate
<VnInputDate v-model="params.shipped"
v-model="params.shipped" :label="t('route.cmr.list.shipped')"
:label="t('route.cmr.list.shipped')" is-outlined
is-outlined />
/> </QItemSection>
</QItemSection> </QItem>
</QItem>
</QList>
</template> </template>
</VnFilterPanel> </VnFilterPanel>
</template> </template>

View File

@ -41,7 +41,11 @@ function setParkings(data) {
@on-fetch="setWorkers" @on-fetch="setWorkers"
auto-load auto-load
/> />
<VnFilterPanel :data-key="props.dataKey" :search-button="true" @search="emit('search')"> <VnFilterPanel
:data-key="props.dataKey"
:search-button="true"
@search="emit('search')"
>
<template #tags="{ tag, formatFn }"> <template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs"> <div class="q-gutter-x-xs">
<strong>{{ t(`params.${tag.label}`) }}: </strong> <strong>{{ t(`params.${tag.label}`) }}: </strong>
@ -49,59 +53,57 @@ function setParkings(data) {
</div> </div>
</template> </template>
<template #body="{ params }"> <template #body="{ params }">
<QList dense> <QItem class="q-my-sm">
<QItem class="q-my-sm"> <QItemSection v-if="!parkings">
<QItemSection v-if="!parkings"> <QSkeleton type="QInput" class="full-width" />
<QSkeleton type="QInput" class="full-width" /> </QItemSection>
</QItemSection> <QItemSection v-if="parkings">
<QItemSection v-if="parkings"> <QSelect
<QSelect dense
dense outlined
outlined rounded
rounded :label="t('params.parkingFk')"
:label="t('params.parkingFk')" v-model="params.parkingFk"
v-model="params.parkingFk" :options="parkings"
:options="parkings" option-value="id"
option-value="id" option-label="code"
option-label="code" emit-value
emit-value map-options
map-options use-input
use-input :input-debounce="0"
:input-debounce="0" />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem class="q-mb-sm">
<QItem class="q-mb-sm"> <QItemSection v-if="!workers">
<QItemSection v-if="!workers"> <QSkeleton type="QInput" class="full-width" />
<QSkeleton type="QInput" class="full-width" /> </QItemSection>
</QItemSection> <QItemSection v-if="workers">
<QItemSection v-if="workers"> <QSelect
<QSelect dense
dense outlined
outlined rounded
rounded :label="t('params.userFk')"
:label="t('params.userFk')" v-model="params.userFk"
v-model="params.userFk" :options="workers"
:options="workers" option-value="id"
option-value="id" option-label="name"
option-label="name" emit-value
emit-value map-options
map-options use-input
use-input :input-debounce="0"
:input-debounce="0" />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem class="q-mb-md">
<QItem class="q-mb-md"> <QItemSection>
<QItemSection> <QCheckbox
<QCheckbox v-model="params.isRecyclable"
v-model="params.isRecyclable" :label="t('params.isRecyclable')"
:label="t('params.isRecyclable')" toggle-indeterminate
toggle-indeterminate />
/> </QItemSection>
</QItemSection> </QItem>
</QItem>
</QList>
</template> </template>
</VnFilterPanel> </VnFilterPanel>
</template> </template>

View File

@ -56,66 +56,138 @@ const warehouses = ref();
</div> </div>
</template> </template>
<template #body="{ params, searchFn }"> <template #body="{ params, searchFn }">
<QList dense class="q-gutter-y-sm q-mt-sm"> <QItem>
<QItemSection>
<VnInput
v-model="params.clientFk"
:label="t('Customer ID')"
is-outlined
/>
</QItemSection>
<QItemSection>
<VnInput
v-model="params.orderFk"
:label="t('Order ID')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInputDate v-model="params.from" :label="t('From')" is-outlined />
</QItemSection>
<QItemSection>
<VnInputDate v-model="params.to" :label="t('To')" is-outlined />
</QItemSection>
</QItem>
<QItem>
<QItemSection v-if="!workers">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="workers">
<QSelect
:label="t('Salesperson')"
v-model="params.salesPersonFk"
:options="workers"
option-value="id"
option-label="name"
emit-value
map-options
use-input
dense
outlined
rounded
:input-debounce="0"
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection v-if="!states">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="states">
<QSelect
:label="t('State')"
v-model="params.stateFk"
@update:model-value="searchFn()"
:options="states"
option-value="id"
option-label="name"
emit-value
map-options
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
v-model="params.refFk"
:label="t('Invoice Ref.')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QCheckbox
v-model="params.myTeam"
@update:model-value="searchFn()"
:label="t('My team')"
toggle-indeterminate
/>
</QItemSection>
<QItemSection>
<QCheckbox
v-model="params.pending"
@update:model-value="searchFn()"
:label="t('Pending')"
toggle-indeterminate
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QCheckbox
v-model="params.hasInvoice"
@update:model-value="searchFn()"
:label="t('Invoiced')"
toggle-indeterminate
/>
</QItemSection>
<QItemSection>
<QCheckbox
v-model="params.hasRoute"
@update:model-value="searchFn()"
:label="t('Routed')"
toggle-indeterminate
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QCheckbox
v-model="params.problems"
@update:model-value="searchFn()"
:label="t('With problems')"
toggle-indeterminate
/>
</QItemSection>
</QItem>
<QSeparator />
<QExpansionItem :label="t('More options')" expand-separator>
<QItem> <QItem>
<QItemSection> <QItemSection v-if="!provinces">
<VnInput
v-model="params.clientFk"
:label="t('Customer ID')"
is-outlined
/>
</QItemSection>
<QItemSection>
<VnInput
v-model="params.orderFk"
:label="t('Order ID')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInputDate
v-model="params.from"
:label="t('From')"
is-outlined
/>
</QItemSection>
<QItemSection>
<VnInputDate v-model="params.to" :label="t('To')" is-outlined />
</QItemSection>
</QItem>
<QItem>
<QItemSection v-if="!workers">
<QSkeleton type="QInput" class="full-width" /> <QSkeleton type="QInput" class="full-width" />
</QItemSection> </QItemSection>
<QItemSection v-if="workers"> <QItemSection v-if="provinces">
<QSelect <QSelect
:label="t('Salesperson')" :label="t('Province')"
v-model="params.salesPersonFk" v-model="params.provinceFk"
:options="workers"
option-value="id"
option-label="name"
emit-value
map-options
use-input
dense
outlined
rounded
:input-debounce="0"
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection v-if="!states">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="states">
<QSelect
:label="t('State')"
v-model="params.stateFk"
@update:model-value="searchFn()" @update:model-value="searchFn()"
:options="states" :options="provinces"
option-value="id" option-value="id"
option-label="name" option-label="name"
emit-value emit-value
@ -127,124 +199,46 @@ const warehouses = ref();
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection v-if="!agencies">
<VnInput <QSkeleton type="QInput" class="full-width" />
v-model="params.refFk" </QItemSection>
:label="t('Invoice Ref.')" <QItemSection v-if="agencies">
is-outlined <QSelect
:label="t('Agency')"
v-model="params.agencyModeFk"
@update:model-value="searchFn()"
:options="agencies"
option-value="id"
option-label="name"
emit-value
map-options
dense
outlined
rounded
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection v-if="!warehouses">
<QCheckbox <QSkeleton type="QInput" class="full-width" />
v-model="params.myTeam"
@update:model-value="searchFn()"
:label="t('My team')"
toggle-indeterminate
/>
</QItemSection> </QItemSection>
<QItemSection> <QItemSection v-if="warehouses">
<QCheckbox <QSelect
v-model="params.pending" :label="t('Warehouse')"
v-model="params.warehouseFk"
@update:model-value="searchFn()" @update:model-value="searchFn()"
:label="t('Pending')" :options="warehouses"
toggle-indeterminate option-value="id"
option-label="name"
emit-value
map-options
dense
outlined
rounded
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> </QExpansionItem>
<QItemSection>
<QCheckbox
v-model="params.hasInvoice"
@update:model-value="searchFn()"
:label="t('Invoiced')"
toggle-indeterminate
/>
</QItemSection>
<QItemSection>
<QCheckbox
v-model="params.hasRoute"
@update:model-value="searchFn()"
:label="t('Routed')"
toggle-indeterminate
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QCheckbox
v-model="params.problems"
@update:model-value="searchFn()"
:label="t('With problems')"
toggle-indeterminate
/>
</QItemSection>
</QItem>
<QSeparator />
<QExpansionItem :label="t('More options')" expand-separator>
<QItem>
<QItemSection v-if="!provinces">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="provinces">
<QSelect
:label="t('Province')"
v-model="params.provinceFk"
@update:model-value="searchFn()"
:options="provinces"
option-value="id"
option-label="name"
emit-value
map-options
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection v-if="!agencies">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="agencies">
<QSelect
:label="t('Agency')"
v-model="params.agencyModeFk"
@update:model-value="searchFn()"
:options="agencies"
option-value="id"
option-label="name"
emit-value
map-options
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection v-if="!warehouses">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="warehouses">
<QSelect
:label="t('Warehouse')"
v-model="params.warehouseFk"
@update:model-value="searchFn()"
:options="warehouses"
option-value="id"
option-label="name"
emit-value
map-options
dense
outlined
rounded
/>
</QItemSection>
</QItem>
</QExpansionItem>
</QList>
</template> </template>
</VnFilterPanel> </VnFilterPanel>
</template> </template>

View File

@ -66,158 +66,149 @@ const decrement = (paramsObj, key) => {
</div> </div>
</template> </template>
<template #body="{ params }"> <template #body="{ params }">
<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 /> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInput
<VnInput :label="t('params.reference')"
:label="t('params.reference')" v-model="params.reference"
v-model="params.reference" is-outlined
is-outlined />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <QInput
<QInput v-model="params.totalEntries"
v-model="params.totalEntries" type="number"
type="number" :label="t('params.totalEntries')"
:label="t('params.totalEntries')" dense
dense outlined
outlined rounded
rounded min="0"
min="0" class="input-number"
class="input-number" >
> <template #append>
<template #append> <QBtn
<QBtn icon="add"
icon="add" flat
flat dense
dense size="12px"
size="12px" @click="add(params, 'totalEntries')"
@click="add(params, 'totalEntries')" />
/> <QBtn
<QBtn icon="remove"
icon="remove" flat
flat dense
dense size="12px"
size="12px" @click="decrement(params, 'totalEntries')"
@click="decrement(params, 'totalEntries')" />
/> </template>
</template> </QInput>
</QInput> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnSelectFilter
<VnSelectFilter :label="t('params.agencyModeFk')"
:label="t('params.agencyModeFk')" v-model="params.agencyModeFk"
v-model="params.agencyModeFk" :options="agenciesOptions"
:options="agenciesOptions" option-value="agencyFk"
option-value="agencyFk" option-label="name"
option-label="name" hide-selected
hide-selected dense
dense outlined
outlined rounded
rounded />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInputDate
<VnInputDate v-model="params.shippedFrom"
v-model="params.shippedFrom" :label="t('params.shippedFrom')"
:label="t('params.shippedFrom')" is-outlined
is-outlined />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInputDate
<VnInputDate v-model="params.landedTo"
v-model="params.landedTo" :label="t('params.landedTo')"
:label="t('params.landedTo')" is-outlined
is-outlined />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnSelectFilter
<VnSelectFilter :label="t('params.warehouseOutFk')"
:label="t('params.warehouseOutFk')" v-model="params.warehouseOutFk"
v-model="params.warehouseOutFk" :options="warehousesOptions"
:options="warehousesOptions" option-value="id"
option-value="id" option-label="name"
option-label="name" hide-selected
hide-selected dense
dense outlined
outlined rounded
rounded />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnSelectFilter
<VnSelectFilter :label="t('params.warehouseInFk')"
:label="t('params.warehouseInFk')" v-model="params.warehouseInFk"
v-model="params.warehouseInFk" :options="warehousesOptions"
:options="warehousesOptions" option-value="id"
option-value="id" option-label="name"
option-label="name" hide-selected
hide-selected dense
dense outlined
outlined rounded
rounded />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnSelectFilter
<VnSelectFilter :label="t('supplier.pageTitles.supplier')"
:label="t('supplier.pageTitles.supplier')" v-model="params.cargoSupplierFk"
v-model="params.cargoSupplierFk" :options="suppliersOptions"
:options="suppliersOptions" option-value="id"
option-value="id" option-label="name"
option-label="name" hide-selected
hide-selected dense
dense outlined
outlined rounded
rounded />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnSelectFilter
<VnSelectFilter :label="t('params.continent')"
:label="t('params.continent')" v-model="params.continent"
v-model="params.continent" :options="continentsOptions"
:options="continentsOptions" option-value="code"
option-value="code" option-label="name"
option-label="name" hide-selected
hide-selected dense
dense outlined
outlined rounded
rounded />
/> </QItemSection>
</QItemSection> </QItem>
</QItem>
</QList>
</template> </template>
</VnFilterPanel> </VnFilterPanel>
</template> </template>
<style scoped> <style scoped>
.list {
width: 256px;
}
.list * {
max-width: 100%;
}
.input-number >>> input[type='number'] { .input-number >>> input[type='number'] {
-moz-appearance: textfield; -moz-appearance: textfield;
} }

View File

@ -61,216 +61,207 @@ const decrement = (paramsObj, key) => {
</div> </div>
</template> </template>
<template #body="{ params }"> <template #body="{ params }">
<QList dense class="list q-gutter-y-sm q-mt-sm"> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInput
<VnInput v-model="params.search"
v-model="params.search" :label="t('params.search')"
:label="t('params.search')" is-outlined
is-outlined />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnSelectFilter
<VnSelectFilter :label="t('params.agencyModeFk')"
:label="t('params.agencyModeFk')" v-model="params.agencyModeFk"
v-model="params.agencyModeFk" :options="agenciesOptions"
:options="agenciesOptions" option-value="agencyFk"
option-value="agencyFk" option-label="name"
option-label="name" hide-selected
hide-selected dense
dense outlined
outlined rounded
rounded />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnSelectFilter
<VnSelectFilter :label="t('params.warehouseOutFk')"
:label="t('params.warehouseOutFk')" v-model="params.warehouseOutFk"
v-model="params.warehouseOutFk" :options="warehousesOptions"
:options="warehousesOptions" option-value="id"
option-value="id" option-label="name"
option-label="name" hide-selected
hide-selected dense
dense outlined
outlined rounded
rounded />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnSelectFilter
<VnSelectFilter :label="t('params.warehouseInFk')"
:label="t('params.warehouseInFk')" v-model="params.warehouseInFk"
v-model="params.warehouseInFk" :options="warehousesOptions"
:options="warehousesOptions" option-value="id"
option-value="id" option-label="name"
option-label="name" hide-selected
hide-selected dense
dense outlined
outlined rounded
rounded />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <QInput
<QInput v-model="params.scopeDays"
v-model="params.scopeDays" type="number"
type="number" :label="t('params.scopeDays')"
:label="t('params.scopeDays')" dense
dense outlined
outlined rounded
rounded class="input-number"
class="input-number" >
> <template #append>
<template #append> <QBtn
<QBtn icon="add"
icon="add" flat
flat dense
dense size="12px"
size="12px" @click="add(params, 'scopeDays')"
@click="add(params, 'scopeDays')" />
/> <QBtn
<QBtn icon="remove"
icon="remove" flat
flat dense
dense size="12px"
size="12px" @click="decrement(params, 'scopeDays')"
@click="decrement(params, 'scopeDays')" />
/> </template>
</template> </QInput>
</QInput> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <QInput
<QInput dense
dense outlined
outlined rounded
rounded placeholder="dd-mm-aaa"
placeholder="dd-mm-aaa" :label="t('params.landedFrom')"
:label="t('params.landedFrom')" :model-value="toDate(params.landedFrom)"
:model-value="toDate(params.landedFrom)" >
> <template #append>
<template #append> <QIcon name="event" class="cursor-pointer">
<QIcon name="event" class="cursor-pointer"> <QPopupProxy
<QPopupProxy cover
cover transition-show="scale"
transition-show="scale" transition-hide="scale"
transition-hide="scale" >
> <QDate v-model="params.landedFrom">
<QDate v-model="params.landedFrom"> <div class="row items-center justify-end">
<div class="row items-center justify-end"> <QBtn
<QBtn v-close-popup
v-close-popup :label="t('globals.close')"
:label="t('globals.close')" color="primary"
color="primary" flat
flat />
/> </div>
</div> </QDate>
</QDate> </QPopupProxy>
</QPopupProxy> </QIcon>
</QIcon> </template>
</template> </QInput>
</QInput> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <QInput
<QInput dense
dense outlined
outlined rounded
rounded placeholder="dd-mm-aaa"
placeholder="dd-mm-aaa" :model-value="toDate(params.landedTo)"
:model-value="toDate(params.landedTo)" :label="t('params.landedTo')"
:label="t('params.landedTo')" >
> <template #append>
<template #append> <QIcon name="event" class="cursor-pointer">
<QIcon name="event" class="cursor-pointer"> <QPopupProxy
<QPopupProxy cover
cover transition-show="scale"
transition-show="scale" transition-hide="scale"
transition-hide="scale" >
> <QDate v-model="params.landedTo">
<QDate v-model="params.landedTo"> <div class="row items-center justify-end">
<div class="row items-center justify-end"> <QBtn
<QBtn v-close-popup
v-close-popup :label="t('globals.close')"
:label="t('globals.close')" color="primary"
color="primary" flat
flat />
/> </div>
</div> </QDate>
</QDate> </QPopupProxy>
</QPopupProxy> </QIcon>
</QIcon> </template>
</template> </QInput>
</QInput> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnSelectFilter
<VnSelectFilter :label="t('params.continent')"
:label="t('params.continent')" v-model="params.continent"
v-model="params.continent" :options="continentsOptions"
:options="continentsOptions" option-value="code"
option-value="code" option-label="name"
option-label="name" hide-selected
hide-selected dense
dense outlined
outlined rounded
rounded />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <QInput
<QInput v-model="params.totalEntries"
v-model="params.totalEntries" type="number"
type="number" :label="t('params.totalEntries')"
:label="t('params.totalEntries')" dense
dense outlined
outlined rounded
rounded min="0"
min="0" class="input-number"
class="input-number" >
> <template #append>
<template #append> <QBtn
<QBtn icon="add"
icon="add" flat
flat dense
dense size="12px"
size="12px" @click="add(params, 'totalEntries')"
@click="add(params, 'totalEntries')" />
/> <QBtn
<QBtn icon="remove"
icon="remove" flat
flat dense
dense size="12px"
size="12px" @click="decrement(params, 'totalEntries')"
@click="decrement(params, 'totalEntries')" />
/> </template>
</template> </QInput>
</QInput> </QItemSection>
</QItemSection> </QItem>
</QItem>
</QList>
</template> </template>
</VnFilterPanel> </VnFilterPanel>
</template> </template>
<style scoped> <style scoped>
.list {
width: 256px;
}
.list * {
max-width: 100%;
}
.input-number >>> input[type='number'] { .input-number >>> input[type='number'] {
-moz-appearance: textfield; -moz-appearance: textfield;
} }

View File

@ -27,74 +27,72 @@ const departments = ref();
</div> </div>
</template> </template>
<template #body="{ params, searchFn }"> <template #body="{ params, searchFn }">
<QList dense class="q-gutter-y-sm q-mt-sm"> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInput :label="t('FI')" v-model="params.fi" is-outlined
<VnInput :label="t('FI')" v-model="params.fi" is-outlined ><template #prepend>
><template #prepend> <QIcon name="badge" size="xs"></QIcon> </template
<QIcon name="badge" size="xs"></QIcon> </template ></VnInput>
></VnInput> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInput
<VnInput :label="t('First Name')"
:label="t('First Name')" v-model="params.firstName"
v-model="params.firstName" is-outlined
is-outlined />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInput
<VnInput :label="t('Last Name')"
:label="t('Last Name')" v-model="params.lastName"
v-model="params.lastName" is-outlined
is-outlined />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInput
<VnInput :label="t('User Name')"
:label="t('User Name')" v-model="params.userName"
v-model="params.userName" is-outlined
is-outlined />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection v-if="!departments">
<QItemSection v-if="!departments"> <QSkeleton type="QInput" class="full-width" />
<QSkeleton type="QInput" class="full-width" /> </QItemSection>
</QItemSection> <QItemSection v-if="departments">
<QItemSection v-if="departments"> <QSelect
<QSelect :label="t('Department')"
:label="t('Department')" v-model="params.departmentFk"
v-model="params.departmentFk" @update:model-value="searchFn()"
@update:model-value="searchFn()" :options="departments"
:options="departments" option-value="id"
option-value="id" option-label="name"
option-label="name" emit-value
emit-value map-options
map-options use-input
use-input dense
dense outlined
outlined rounded
rounded :input-debounce="0"
:input-debounce="0" />
/> </QItemSection>
</QItemSection> </QItem>
</QItem> <QItem>
<QItem> <QItemSection>
<QItemSection> <VnInput
<VnInput :label="t('Extension')"
:label="t('Extension')" v-model="params.extension"
v-model="params.extension" is-outlined
is-outlined />
/> </QItemSection>
</QItemSection> </QItem>
</QItem>
</QList>
</template> </template>
</VnFilterPanel> </VnFilterPanel>
</template> </template>