0
0
Fork 0

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,7 +38,6 @@ const workers = ref();
minimal
>
</QDate>
<QList dense>
<QSeparator />
<QItem>
<QItemSection v-if="!workers">
@ -59,7 +58,6 @@ const workers = ref();
/>
</QItemSection>
</QItem>
</QList>
</template>
</VnFilterPanel>
</template>

View File

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

View File

@ -216,7 +216,9 @@ function formatValue(value) {
</QItem>
<QSeparator />
</QList>
<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">
<QItem>
<QItemSection class="q-py-sm">
@ -242,6 +244,12 @@ function formatValue(value) {
/>
</template>
<style scoped lang="scss">
.list {
width: 256px;
}
</style>
<i18n>
es:
No filters applied: No se han aplicado filtros

View File

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

View File

@ -37,7 +37,6 @@ const zones = ref();
</div>
</template>
<template #body="{ params, searchFn }">
<QList dense class="list">
<QItem class="q-my-sm">
<QItemSection>
<VnInput :label="t('FI')" v-model="params.fi" is-outlined>
@ -115,11 +114,7 @@ const zones = ref();
<QExpansionItem :label="t('More options')" expand-separator>
<QItem>
<QItemSection>
<VnInput
:label="t('Phone')"
v-model="params.phone"
is-outlined
>
<VnInput :label="t('Phone')" v-model="params.phone" is-outlined>
<template #prepend>
<QIcon name="phone" size="xs" />
</template>
@ -128,11 +123,7 @@ const zones = ref();
</QItem>
<QItem>
<QItemSection>
<VnInput
:label="t('Email')"
v-model="params.email"
is-outlined
>
<VnInput :label="t('Email')" v-model="params.email" is-outlined>
<template #prepend>
<QIcon name="email" size="sm" />
</template>
@ -170,20 +161,10 @@ const zones = ref();
</QItemSection>
</QItem>
</QExpansionItem>
</QList>
</template>
</VnFilterPanel>
</template>
<style scoped>
.list {
width: 256px;
}
.list * {
max-width: 100%;
}
</style>
<i18n>
en:
params:

View File

@ -46,7 +46,6 @@ const authors = ref();
</template>
<template #body="{ params }">
<QList dense class="list">
<QItem class="q-mb-sm q-mt-sm">
<QItemSection v-if="clients">
<VnSelectFilter
@ -161,11 +160,7 @@ const authors = ref();
<QItem class="q-mb-sm">
<QItemSection>
<VnInput
:label="t('L. O. Date')"
is-outlined
v-model="params.date"
/>
<VnInput :label="t('L. O. Date')" is-outlined v-model="params.date" />
</QItemSection>
</QItem>
@ -189,20 +184,10 @@ const authors = ref();
</QItemSection>
</QItem>
<QSeparator />
</QList>
</template>
</VnFilterPanel>
</template>
<style scoped>
.list {
width: 256px;
}
.list * {
max-width: 100%;
}
</style>
<i18n>
en:
params:

View File

@ -145,7 +145,6 @@ const shouldRenderColumn = (colName) => {
</div>
</template>
<template #body="{ params, searchFn }">
<QList dense class="list q-gutter-y-sm q-mt-sm">
<QItem v-if="shouldRenderColumn('id')">
<QItemSection>
<VnInput
@ -204,9 +203,7 @@ const shouldRenderColumn = (colName) => {
<QItemSection v-if="workers">
<VnSelectFilter
:label="
t(
'customer.extendedList.tableVisibleColumns.salesPersonFk'
)
t('customer.extendedList.tableVisibleColumns.salesPersonFk')
"
v-model="params.salesPersonFk"
@update:model-value="searchFn()"
@ -237,9 +234,7 @@ const shouldRenderColumn = (colName) => {
<QItemSection>
<VnInput
:label="
t(
'customer.extendedList.tableVisibleColumns.creditInsurance'
)
t('customer.extendedList.tableVisibleColumns.creditInsurance')
"
v-model="params.creditInsurance"
is-outlined
@ -276,9 +271,7 @@ const shouldRenderColumn = (colName) => {
<QItem v-if="shouldRenderColumn('countryFk')">
<QItemSection>
<VnSelectFilter
:label="
t('customer.extendedList.tableVisibleColumns.countryFk')
"
:label="t('customer.extendedList.tableVisibleColumns.countryFk')"
v-model="params.countryFk"
@update:model-value="searchFn()"
:options="countriesOptions"
@ -295,9 +288,7 @@ const shouldRenderColumn = (colName) => {
<QItem v-if="shouldRenderColumn('provinceFk')">
<QItemSection>
<VnSelectFilter
:label="
t('customer.extendedList.tableVisibleColumns.provinceFk')
"
:label="t('customer.extendedList.tableVisibleColumns.provinceFk')"
v-model="params.provinceFk"
@update:model-value="searchFn()"
:options="provincesOptions"
@ -323,9 +314,7 @@ const shouldRenderColumn = (colName) => {
<QItem v-if="shouldRenderColumn('postcode')">
<QItemSection>
<VnInput
:label="
t('customer.extendedList.tableVisibleColumns.postcode')
"
:label="t('customer.extendedList.tableVisibleColumns.postcode')"
v-model="params.postcode"
is-outlined
/>
@ -345,9 +334,7 @@ const shouldRenderColumn = (colName) => {
<QItemSection>
<VnInputDate
v-model="params.created"
:label="
t('customer.extendedList.tableVisibleColumns.created')
"
:label="t('customer.extendedList.tableVisibleColumns.created')"
@update:model-value="searchFn()"
is-outlined
/>
@ -357,9 +344,7 @@ const shouldRenderColumn = (colName) => {
<QItemSection>
<VnSelectFilter
:label="
t(
'customer.extendedList.tableVisibleColumns.businessTypeFk'
)
t('customer.extendedList.tableVisibleColumns.businessTypeFk')
"
v-model="params.businessTypeFk"
:options="businessTypesOptions"
@ -397,9 +382,7 @@ const shouldRenderColumn = (colName) => {
<QItemSection>
<VnSelectFilter
:label="
t(
'customer.extendedList.tableVisibleColumns.sageTaxTypeFk'
)
t('customer.extendedList.tableVisibleColumns.sageTaxTypeFk')
"
v-model="params.sageTaxTypeFk"
@update:model-value="searchFn()"
@ -435,16 +418,12 @@ const shouldRenderColumn = (colName) => {
/>
</QItemSection>
</QItem>
<QItem
v-if="shouldRenderColumn('isActive') || shouldRenderColumn('isVies')"
>
<QItem v-if="shouldRenderColumn('isActive') || shouldRenderColumn('isVies')">
<QItemSection v-if="shouldRenderColumn('isActive')">
<QCheckbox
v-model="params.isActive"
@update:model-value="searchFn()"
:label="
t('customer.extendedList.tableVisibleColumns.isActive')
"
:label="t('customer.extendedList.tableVisibleColumns.isActive')"
toggle-indeterminate
:false-value="undefined"
/>
@ -483,9 +462,7 @@ const shouldRenderColumn = (colName) => {
v-model="params.isEqualizated"
@update:model-value="searchFn()"
:label="
t(
'customer.extendedList.tableVisibleColumns.isEqualizated'
)
t('customer.extendedList.tableVisibleColumns.isEqualizated')
"
toggle-indeterminate
:false-value="undefined"
@ -494,17 +471,14 @@ const shouldRenderColumn = (colName) => {
</QItem>
<QItem
v-if="
shouldRenderColumn('hasToInvoice') ||
shouldRenderColumn('isFreezed')
shouldRenderColumn('hasToInvoice') || shouldRenderColumn('isFreezed')
"
>
<QItemSection v-if="shouldRenderColumn('isFreezed')">
<QCheckbox
v-model="params.isFreezed"
@update:model-value="searchFn()"
:label="
t('customer.extendedList.tableVisibleColumns.isFreezed')
"
:label="t('customer.extendedList.tableVisibleColumns.isFreezed')"
toggle-indeterminate
:false-value="undefined"
/>
@ -514,9 +488,7 @@ const shouldRenderColumn = (colName) => {
v-model="params.hasToInvoice"
@update:model-value="searchFn()"
:label="
t(
'customer.extendedList.tableVisibleColumns.hasToInvoice'
)
t('customer.extendedList.tableVisibleColumns.hasToInvoice')
"
toggle-indeterminate
:false-value="undefined"
@ -547,9 +519,7 @@ const shouldRenderColumn = (colName) => {
v-model="params.isToBeMailed"
@update:model-value="searchFn()"
:label="
t(
'customer.extendedList.tableVisibleColumns.isToBeMailed'
)
t('customer.extendedList.tableVisibleColumns.isToBeMailed')
"
toggle-indeterminate
:false-value="undefined"
@ -557,9 +527,7 @@ const shouldRenderColumn = (colName) => {
</QItemSection>
</QItem>
<QItem
v-if="
shouldRenderColumn('hasLcr') || shouldRenderColumn('hasCoreVnl')
"
v-if="shouldRenderColumn('hasLcr') || shouldRenderColumn('hasCoreVnl')"
>
<QItemSection v-if="shouldRenderColumn('hasLcr')">
<QCheckbox
@ -574,9 +542,7 @@ const shouldRenderColumn = (colName) => {
<QCheckbox
v-model="params.hasCoreVnl"
@update:model-value="searchFn()"
:label="
t('customer.extendedList.tableVisibleColumns.hasCoreVnl')
"
:label="t('customer.extendedList.tableVisibleColumns.hasCoreVnl')"
toggle-indeterminate
:false-value="undefined"
/>
@ -587,9 +553,7 @@ const shouldRenderColumn = (colName) => {
<QCheckbox
v-model="params.hasSepaVnl"
@update:model-value="searchFn()"
:label="
t('customer.extendedList.tableVisibleColumns.hasSepaVnl')
"
:label="t('customer.extendedList.tableVisibleColumns.hasSepaVnl')"
toggle-indeterminate
:false-value="undefined"
/>
@ -597,20 +561,10 @@ const shouldRenderColumn = (colName) => {
</QItem>
<QSeparator />
</QList>
</template>
</VnFilterPanel>
</template>
<style scoped>
.list {
width: 256px;
}
.list * {
max-width: 100%;
}
</style>
<i18n>
es:
Social name: Razón social

View File

@ -36,7 +36,6 @@ const clients = ref();
</template>
<template #body="{ params, searchFn }">
<QList dense class="list">
<QItem class="q-mb-sm q-mt-sm">
<QItemSection>
<VnInput
@ -107,20 +106,10 @@ const clients = ref();
</QItemSection>
</QItem>
<QSeparator />
</QList>
</template>
</VnFilterPanel>
</template>
<style scoped>
.list {
width: 256px;
}
.list * {
max-width: 100%;
}
</style>
<i18n>
en:
params:

View File

@ -27,14 +27,9 @@ function isValidNumber(value) {
</div>
</template>
<template #body="{ params }">
<QList dense class="q-gutter-y-sm q-mt-sm">
<QItem>
<QItemSection>
<VnInput
:label="t('Order ID')"
v-model="params.orderFk"
is-outlined
>
<VnInput :label="t('Order ID')" v-model="params.orderFk" is-outlined>
<template #prepend>
<QIcon name="vn:basket" size="xs" />
</template>
@ -67,8 +62,7 @@ function isValidNumber(value) {
}
"
:rules="[
(val) =>
isValidNumber(val) || !val || 'Please type a number',
(val) => isValidNumber(val) || !val || 'Please type a number',
]"
lazy-rules
>
@ -81,17 +75,12 @@ function isValidNumber(value) {
<QItem>
<QItemSection>
<VnInputDate
v-model="params.from"
:label="t('From')"
is-outlined
/>
<VnInputDate v-model="params.from" :label="t('From')" is-outlined />
</QItemSection>
<QItemSection>
<VnInputDate v-model="params.to" :label="t('To')" is-outlined />
</QItemSection>
</QItem>
</QList>
</template>
</VnFilterPanel>
</template>

View File

@ -54,7 +54,6 @@ const suppliersOptions = ref([]);
</div>
</template>
<template #body="{ params }">
<QList dense class="list q-gutter-y-sm q-mt-sm">
<QItem>
<QItemSection>
<VnInput
@ -198,7 +197,6 @@ const suppliersOptions = ref([]);
/>
</QItemSection>
</QItem>
</QList>
</template>
</VnFilterPanel>
</template>

View File

@ -36,7 +36,6 @@ const suppliersRef = ref();
</div>
</template>
<template #body="{ params, searchFn }">
<QList dense class="list q-gutter-y-sm q-mt-sm">
<QItem>
<QItemSection>
<VnInput
@ -186,11 +185,7 @@ const suppliersRef = ref();
</QItem>
<QItem>
<QItemSection>
<VnInputDate
:label="t('To')"
v-model="params.to"
is-outlined
/>
<VnInputDate :label="t('To')" v-model="params.to" is-outlined />
</QItemSection>
</QItem>
<QItem>
@ -203,20 +198,10 @@ const suppliersRef = ref();
</QItemSection>
</QItem>
</QExpansionItem>
</QList>
</template>
</VnFilterPanel>
</template>
<style scoped>
.list {
width: 256px;
}
.list * {
max-width: 100%;
}
</style>
<i18n>
en:
params:

View File

@ -41,7 +41,6 @@ function setWorkers(data) {
</div>
</template>
<template #body="{ params, searchFn }">
<QList dense class="q-gutter-y-sm q-mt-sm">
<QItem>
<QItemSection>
<VnInput
@ -58,11 +57,7 @@ function setWorkers(data) {
</QItem>
<QItem>
<QItemSection>
<VnInput
:label="t('Amount')"
v-model="params.amount"
is-outlined
/>
<VnInput :label="t('Amount')" v-model="params.amount" is-outlined />
</QItemSection>
</QItem>
<QItem>
@ -129,7 +124,6 @@ function setWorkers(data) {
</QItemSection>
</QItem>
</QExpansionItem>
</QList>
</template>
</VnFilterPanel>
</template>

View File

@ -27,7 +27,6 @@ const props = defineProps({
</div>
</template>
<template #body="{ params }">
<QList dense class="q-gutter-y-sm q-mt-sm">
<QItem>
<QItemSection>
<VnInputDate
@ -101,13 +100,10 @@ const props = defineProps({
/>
</QItemSection>
</QItem>
</QList>
</template>
</VnFilterPanel>
</template>
<style scoped></style>
<i18n>
en:
params:

View File

@ -219,7 +219,6 @@ const getCategoryClass = (category, params) => {
</template>
</template>
<template #body="{ params, searchFn }">
<QList dense style="max-width: 256px">
<QItem class="category-filter q-mt-md">
<div
v-for="category in categoryList"
@ -395,7 +394,6 @@ const getCategoryClass = (category, params) => {
</QItemSection>
</QItem>
<QSeparator />
</QList>
</template>
</VnFilterPanel>
</template>

View File

@ -59,7 +59,6 @@ const sourceList = ref(null);
</div>
</template>
<template #body="{ params }">
<QList id="orderFilter" dense>
<QItem>
<QItemSection>
<VnInput
@ -202,19 +201,10 @@ const sourceList = ref(null);
<QCheckbox v-model="params.showEmpty" :label="t('showEmpty')" />
</QItemSection>
</QItem>
</QList>
</template>
</VnFilterPanel>
</template>
<style lang="scss">
#orderFilter {
.q-item {
padding-top: 8px;
}
}
</style>
<i18n>
en:
params:

View File

@ -61,7 +61,6 @@ const warehouseList = ref([]);
</div>
</template>
<template #body="{ params }">
<QList dense>
<QItem class="q-my-sm">
<QItemSection v-if="workerList">
<VnSelectFilter
@ -198,7 +197,6 @@ const warehouseList = ref([]);
/>
</QItemSection>
</QItem>
</QList>
</template>
</VnFilterPanel>
</template>

View File

@ -28,7 +28,6 @@ const countries = ref();
</div>
</template>
<template #body="{ params }">
<QList dense class="q-gutter-y-sm q-mt-sm">
<QItem>
<QItemSection>
<VnInput
@ -124,7 +123,6 @@ const countries = ref();
/>
</QItemSection>
</QItem>
</QList>
</template>
</VnFilterPanel>
</template>

View File

@ -41,7 +41,11 @@ function setParkings(data) {
@on-fetch="setWorkers"
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 }">
<div class="q-gutter-x-xs">
<strong>{{ t(`params.${tag.label}`) }}: </strong>
@ -49,7 +53,6 @@ function setParkings(data) {
</div>
</template>
<template #body="{ params }">
<QList dense>
<QItem class="q-my-sm">
<QItemSection v-if="!parkings">
<QSkeleton type="QInput" class="full-width" />
@ -101,7 +104,6 @@ function setParkings(data) {
/>
</QItemSection>
</QItem>
</QList>
</template>
</VnFilterPanel>
</template>

View File

@ -56,7 +56,6 @@ const warehouses = ref();
</div>
</template>
<template #body="{ params, searchFn }">
<QList dense class="q-gutter-y-sm q-mt-sm">
<QItem>
<QItemSection>
<VnInput
@ -75,11 +74,7 @@ const warehouses = ref();
</QItem>
<QItem>
<QItemSection>
<VnInputDate
v-model="params.from"
:label="t('From')"
is-outlined
/>
<VnInputDate v-model="params.from" :label="t('From')" is-outlined />
</QItemSection>
<QItemSection>
<VnInputDate v-model="params.to" :label="t('To')" is-outlined />
@ -244,7 +239,6 @@ const warehouses = ref();
</QItemSection>
</QItem>
</QExpansionItem>
</QList>
</template>
</VnFilterPanel>
</template>

View File

@ -66,7 +66,6 @@ const decrement = (paramsObj, key) => {
</div>
</template>
<template #body="{ params }">
<QList dense class="list q-gutter-y-sm q-mt-sm">
<QItem>
<QItemSection>
<VnInput label="id" v-model="params.id" is-outlined />
@ -205,19 +204,11 @@ const decrement = (paramsObj, key) => {
/>
</QItemSection>
</QItem>
</QList>
</template>
</VnFilterPanel>
</template>
<style scoped>
.list {
width: 256px;
}
.list * {
max-width: 100%;
}
.input-number >>> input[type='number'] {
-moz-appearance: textfield;
}

View File

@ -61,7 +61,6 @@ const decrement = (paramsObj, key) => {
</div>
</template>
<template #body="{ params }">
<QList dense class="list q-gutter-y-sm q-mt-sm">
<QItem>
<QItemSection>
<VnInput
@ -258,19 +257,11 @@ const decrement = (paramsObj, key) => {
</QInput>
</QItemSection>
</QItem>
</QList>
</template>
</VnFilterPanel>
</template>
<style scoped>
.list {
width: 256px;
}
.list * {
max-width: 100%;
}
.input-number >>> input[type='number'] {
-moz-appearance: textfield;
}

View File

@ -27,7 +27,6 @@ const departments = ref();
</div>
</template>
<template #body="{ params, searchFn }">
<QList dense class="q-gutter-y-sm q-mt-sm">
<QItem>
<QItemSection>
<VnInput :label="t('FI')" v-model="params.fi" is-outlined
@ -94,7 +93,6 @@ const departments = ref();
/>
</QItemSection>
</QItem>
</QList>
</template>
</VnFilterPanel>
</template>