wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

Merge pull request 'Extended List big modifications and column add column filter component' (#48) from feature/ms-100-ExtendedListColumnFilter into dev 

Reviewed-on: hyervoni/salix-front-mindshore#48
This commit is contained in:
William Buezas 2023-12-31 01:17:18 +00:00
parent 113df44705 1ab31a1e51
commit d476d504e1
6 changed files with 1089 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
src/components/common/TableVisibleColumns.vue Normal file
View File

@ -0,0 +1,140 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { ref, computed } from 'vue';
import FetchData from 'components/FetchData.vue';
import { useState } from 'src/composables/useState';
import axios from 'axios';
const $props = defineProps({
allColumns: {
type: Array,
default: () => [],
},
tableCode: {
type: String,
default: '',
},
labelsTraductionsPath: {
type: String,
default: '',
},
});
const emit = defineEmits(['onConfigSaved']);
const state = useState();
const { t } = useI18n();
const popupProxyRef = ref(null);
const user = state.getUser();
const initialUserConfigViewData = ref(null);
const userConfigFilter = {
where: {
tableCode: $props.tableCode,
userFk: user.id,
},
};
const formattedCols = ref([]);
const areAllChecksMarked = computed(() => {
return formattedCols.value.every((col) => col.active);
});
const setUserConfigViewData = (data) => {
initialUserConfigViewData.value = data;
if (data.length === 0) return;
formattedCols.value = $props.allColumns.map((col) => {
// Importante: El name de las columnas de la tabla debe conincidir con el name de las variables que devuelve la view config
const obj = {
name: col,
active: data[0].configuration[col],
};
return obj;
});
emitSavedConfig();
};
const toggleMarkAll = (val) => {
formattedCols.value.forEach((col) => (col.active = val));
};
const saveConfig = async () => {
try {
const data = {
id: initialUserConfigViewData.value[0].id,
userFk: 9,
tableCode: $props.tableCode,
configuration: {},
};
formattedCols.value.forEach((col) => {
data.configuration[col.name] = col.active;
});
await axios.patch('UserConfigViews', data);
emitSavedConfig();
popupProxyRef.value.hide();
} catch (err) {
console.error('Error saving user view config');
}
};
const emitSavedConfig = () => {
const filteredCols = formattedCols.value.filter((col) => col.active);
const mappedCols = filteredCols.map((col) => col.name);
emit('onConfigSaved', mappedCols);
};
</script>
<template>
<fetch-data
v-if="user"
url="UserConfigViews"
:filter="userConfigFilter"
@on-fetch="(data) => setUserConfigViewData(data)"
auto-load
/>
<QBtn color="primary" icon="view_column">
<QPopupProxy ref="popupProxyRef">
<QCard class="column q-pa-md">
<QIcon name="info" size="sm" class="info-icon">
<QTooltip>{{ t('Check the columns you want to see') }}</QTooltip>
</QIcon>
<span class="text-body1 q-mb-sm">{{ t('Visible columns') }}</span>
<QCheckbox
:label="t('Tick all')"
:model-value="areAllChecksMarked"
@update:model-value="toggleMarkAll($event)"
class="q-mb-sm"
/>
<div
v-if="allColumns.length !== 0 && formattedCols.length !== 0"
class="checks-layout"
>
<QCheckbox
v-for="(col, index) in allColumns"
:key="index"
:label="t(`${$props.labelsTraductionsPath + '.' + col}`)"
v-model="formattedCols[index].active"
/>
</div>
<QBtn class="full-width q-mt-md" color="primary" @click="saveConfig()">{{
t('globals.save')
}}</QBtn>
</QCard>
</QPopupProxy>
</QBtn>
</template>
<style lang="scss" scoped>
.info-icon {
position: absolute;
top: 20px;
right: 20px;
}
.checks-layout {
display: grid;
grid-template-columns: repeat(3, 200px);
}
</style>

34
src/i18n/en/index.js
View File

@ -206,6 +206,40 @@ export default {
salesPerson: 'Sales person',
contactChannel: 'Contact channel',
},
extendedList: {
tableVisibleColumns: {
id: 'Identifier',
name: 'Name',
fi: 'Tax number',
salesPersonFk: 'Salesperson',
credit: 'Credit',
creditInsurance: 'Credit insurance',
phone: 'Phone',
mobile: 'Mobile',
street: 'Street',
countryFk: 'Country',
provinceFk: 'Province',
city: 'City',
postcode: 'Postcode',
email: 'Email',
created: 'Created',
businessTypeFk: 'Business type',
payMethodFk: 'Billing data',
sageTaxTypeFk: 'Sage tax type',
sageTransactionTypeFk: 'Sage tr. type',
isActive: 'Active',
isVies: 'Vies',
isTaxDataChecked: 'Verified data',
isEqualizated: 'Is equalizated',
isFreezed: 'Freezed',
hasToInvoice: 'Invoice',
hasToInvoiceByAddress: 'Invoice by address',
isToBeMailed: 'Mailing',
hasLcr: 'Received LCR',
hasCoreVnl: 'VNL core received',
hasSepaVnl: 'VNL B2B received',
},
},
},
entry: {
pageTitles: {

34
src/i18n/es/index.js
View File

@ -205,6 +205,40 @@ export default {
salesPerson: 'Comercial',
contactChannel: 'Canal de contacto',
},
extendedList: {
tableVisibleColumns: {
id: 'Identificador',
name: 'Nombre',
fi: 'NIF / CIF',
salesPersonFk: 'Comercial',
credit: 'Crédito',
creditInsurance: 'Crédito asegurado',
phone: 'Teléfono',
mobile: 'Móvil',
street: 'Dirección fiscal',
countryFk: 'País',
provinceFk: 'Provincia',
city: 'Población',
postcode: 'Código postal',
email: 'Email',
created: 'Fecha creación',
businessTypeFk: 'Tipo de negocio',
payMethodFk: 'Forma de pago',
sageTaxTypeFk: 'Tipo de impuesto Sage',
sageTransactionTypeFk: 'Tipo tr. sage',
isActive: 'Activo',
isVies: 'Vies',
isTaxDataChecked: 'Datos comprobados',
isEqualizated: 'Recargo de equivalencias',
isFreezed: 'Congelado',
hasToInvoice: 'Factura',
hasToInvoiceByAddress: 'Factura por consigna',
isToBeMailed: 'Env. emails',
hasLcr: 'Recibido LCR',
hasCoreVnl: 'Recibido core VNL',
hasSepaVnl: 'Recibido B2B VNL',
},
},
},
entry: {
pageTitles: {

439
src/pages/Customer/CustomerExtendedList.vue
View File

@ -1,16 +1,18 @@
<script setup>
import { ref, computed, onBeforeMount } from 'vue';
import { ref, computed, onBeforeMount, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { QBtn } from 'quasar';
import { useArrayData } from 'composables/useArrayData';
import { useStateStore } from 'stores/useStateStore';
import { QBtn, QIcon } from 'quasar';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import CustomerExtendedListActions from './CustomerExtendedListActions.vue';
import CustomerExtendedListFilter from './CustomerExtendedListFilter.vue';
import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
import { useArrayData } from 'composables/useArrayData';
import { useStateStore } from 'stores/useStateStore';
import { dashIfEmpty, toDate } from 'src/filters';
const { t } = useI18n();
const router = useRouter();
@ -27,22 +29,62 @@ onBeforeMount(async () => {
stateStore.rightDrawer = true;
});
onMounted(() => {
const filteredColumns = columns.value.filter(
(col) => col.name !== 'actions' && col.name !== 'customerStatus'
);
allColumnNames.value = filteredColumns.map((col) => col.name);
});
const rows = computed(() => arrayData.value.store.data);
const selectedCustomerId = ref(0);
const selectedSalesPersonId = ref(0);
const allColumnNames = ref([]);
const visibleColumns = ref([]);
const tableColumnComponents = {
customerStatus: {
component: QIcon,
props: (prop) => ({
name: !prop.row.isActive
? 'vn:disabled'
: prop.row.isActive && prop.row.isFreezed
? 'vn:frozen'
: '',
color: 'primary',
size: 'sm',
}),
event: () => {},
},
id: {
component: QBtn,
props: () => ({ flat: true, color: 'blue' }),
event: (prop) => selectCustomerId(prop.row.id),
event: (prop) => {
selectCustomerId(prop.row.id);
},
socialName: {
},
name: {
component: 'span',
props: () => {},
event: () => {},
},
salesPerson: {
fi: {
component: 'span',
props: () => {},
event: () => {},
},
salesPersonFk: {
component: QBtn,
props: () => ({ flat: true, color: 'blue' }),
event: (prop) => selectSalesPersonId(prop.row.salesPersonFk),
},
credit: {
component: 'span',
props: () => {},
event: () => {},
},
creditInsurance: {
component: 'span',
props: () => {},
event: () => {},
@ -52,16 +94,165 @@ const tableColumnComponents = {
props: () => {},
event: () => {},
},
mobile: {
component: 'span',
props: () => {},
event: () => {},
},
street: {
component: 'span',
props: () => {},
event: () => {},
},
countryFk: {
component: 'span',
props: () => {},
event: () => {},
},
provinceFk: {
component: 'span',
props: () => {},
event: () => {},
},
city: {
component: 'span',
props: () => {},
event: () => {},
},
postcode: {
component: 'span',
props: () => {},
event: () => {},
},
email: {
component: 'span',
props: () => {},
event: () => {},
},
created: {
component: 'span',
props: () => {},
event: () => {},
},
businessTypeFk: {
component: 'span',
props: () => {},
event: () => {},
},
payMethodFk: {
component: 'span',
props: () => {},
event: () => {},
},
sageTaxTypeFk: {
component: 'span',
props: () => {},
event: () => {},
},
sageTransactionTypeFk: {
component: 'span',
props: () => {},
event: () => {},
},
isActive: {
component: QIcon,
props: (prop) => ({
name: prop.row.isActive ? 'check' : 'close',
color: prop.row.isActive ? 'positive' : 'negative',
size: 'sm',
}),
event: () => {},
},
isVies: {
component: QIcon,
props: (prop) => ({
name: prop.row.isVies ? 'check' : 'close',
color: prop.row.isVies ? 'positive' : 'negative',
size: 'sm',
}),
event: () => {},
},
isTaxDataChecked: {
component: QIcon,
props: (prop) => ({
name: prop.row.isTaxDataChecked ? 'check' : 'close',
color: prop.row.isTaxDataChecked ? 'positive' : 'negative',
size: 'sm',
}),
event: () => {},
},
isEqualizated: {
component: QIcon,
props: (prop) => ({
name: prop.row.isEqualizated ? 'check' : 'close',
color: prop.row.isEqualizated ? 'positive' : 'negative',
size: 'sm',
}),
event: () => {},
},
isFreezed: {
component: QIcon,
props: (prop) => ({
name: prop.row.isFreezed ? 'check' : 'close',
color: prop.row.isFreezed ? 'positive' : 'negative',
size: 'sm',
}),
event: () => {},
},
hasToInvoice: {
component: QIcon,
props: (prop) => ({
name: prop.row.hasToInvoice ? 'check' : 'close',
color: prop.row.hasToInvoice ? 'positive' : 'negative',
size: 'sm',
}),
event: () => {},
},
hasToInvoiceByAddress: {
component: QIcon,
props: (prop) => ({
name: prop.row.hasToInvoiceByAddress ? 'check' : 'close',
color: prop.row.hasToInvoiceByAddress ? 'positive' : 'negative',
size: 'sm',
}),
event: () => {},
},
isToBeMailed: {
component: QIcon,
props: (prop) => ({
name: prop.row.isToBeMailed ? 'check' : 'close',
color: prop.row.isToBeMailed ? 'positive' : 'negative',
size: 'sm',
}),
event: () => {},
},
hasLcr: {
component: QIcon,
props: (prop) => ({
name: prop.row.hasLcr ? 'check' : 'close',
color: prop.row.hasLcr ? 'positive' : 'negative',
size: 'sm',
}),
event: () => {},
},
hasCoreVnl: {
component: QIcon,
props: (prop) => ({
name: prop.row.hasCoreVnl ? 'check' : 'close',
color: prop.row.hasCoreVnl ? 'positive' : 'negative',
size: 'sm',
}),
event: () => {},
},
hasSepaVnl: {
component: QIcon,
props: (prop) => ({
name: prop.row.hasSepaVnl ? 'check' : 'close',
color: prop.row.hasSepaVnl ? 'positive' : 'negative',
size: 'sm',
}),
event: () => {},
},
actions: {
component: CustomerExtendedListActions,
props: (prop) => ({
@ -73,42 +264,205 @@ const tableColumnComponents = {
const columns = computed(() => {
return [
{
align: 'left',
field: '',
label: '',
name: 'customerStatus',
format: () => ' ',
},
{
align: 'left',
field: 'id',
label: t('Identifier'),
label: t('customer.extendedList.tableVisibleColumns.id'),
name: 'id',
},
{
align: 'left',
field: 'socialName',
label: t('Social name'),
name: 'socialName',
field: 'name',
label: t('customer.extendedList.tableVisibleColumns.name'),
name: 'name',
},
{
align: 'left',
field: 'fi',
label: t('customer.extendedList.tableVisibleColumns.fi'),
name: 'fi',
},
{
align: 'left',
field: 'salesPerson',
label: t('Salesperson'),
name: 'salesPerson',
label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'),
name: 'salesPersonFk',
},
{
align: 'left',
field: 'credit',
label: t('customer.extendedList.tableVisibleColumns.credit'),
name: 'credit',
},
{
align: 'left',
field: 'creditInsurance',
label: t('customer.extendedList.tableVisibleColumns.creditInsurance'),
name: 'creditInsurance',
},
{
align: 'left',
field: 'phone',
label: t('Phone'),
label: t('customer.extendedList.tableVisibleColumns.phone'),
name: 'phone',
},
{
align: 'left',
field: 'mobile',
label: t('customer.extendedList.tableVisibleColumns.mobile'),
name: 'mobile',
},
{
align: 'left',
field: 'street',
label: t('customer.extendedList.tableVisibleColumns.street'),
name: 'street',
},
{
align: 'left',
field: 'country',
label: t('customer.extendedList.tableVisibleColumns.countryFk'),
name: 'countryFk',
},
{
align: 'left',
field: 'province',
label: t('customer.extendedList.tableVisibleColumns.provinceFk'),
name: 'provinceFk',
},
{
align: 'left',
field: 'city',
label: t('City'),
label: t('customer.extendedList.tableVisibleColumns.city'),
name: 'city',
},
{
align: 'left',
field: 'postcode',
label: t('customer.extendedList.tableVisibleColumns.postcode'),
name: 'postcode',
},
{
align: 'left',
field: 'email',
label: t('Email'),
label: t('customer.extendedList.tableVisibleColumns.email'),
name: 'email',
},
{
align: 'left',
field: 'created',
label: t('customer.extendedList.tableVisibleColumns.created'),
name: 'created',
format: (value) => toDate(value),
},
{
align: 'left',
field: 'businessType',
label: t('customer.extendedList.tableVisibleColumns.businessTypeFk'),
name: 'businessTypeFk',
},
{
align: 'left',
field: 'payMethod',
label: t('customer.extendedList.tableVisibleColumns.payMethodFk'),
name: 'payMethodFk',
},
{
align: 'left',
field: 'sageTaxType',
label: t('customer.extendedList.tableVisibleColumns.sageTaxTypeFk'),
name: 'sageTaxTypeFk',
},
{
align: 'left',
field: 'sageTransactionType',
label: t('customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'),
name: 'sageTransactionTypeFk',
},
{
align: 'left',
field: 'isActive',
label: t('customer.extendedList.tableVisibleColumns.isActive'),
name: 'isActive',
format: () => ' ',
},
{
align: 'left',
field: 'isVies',
label: t('customer.extendedList.tableVisibleColumns.isVies'),
name: 'isVies',
format: () => ' ',
},
{
align: 'left',
field: 'isTaxDataChecked',
label: t('customer.extendedList.tableVisibleColumns.isTaxDataChecked'),
name: 'isTaxDataChecked',
format: () => ' ',
},
{
align: 'left',
field: 'isEqualizated',
label: t('customer.extendedList.tableVisibleColumns.isEqualizated'),
name: 'isEqualizated',
format: () => ' ',
},
{
align: 'left',
field: 'isFreezed',
label: t('customer.extendedList.tableVisibleColumns.isFreezed'),
name: 'isFreezed',
format: () => ' ',
},
{
align: 'left',
field: 'hasToInvoice',
label: t('customer.extendedList.tableVisibleColumns.hasToInvoice'),
name: 'hasToInvoice',
format: () => ' ',
},
{
align: 'left',
field: 'hasToInvoiceByAddress',
label: t('customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'),
name: 'hasToInvoiceByAddress',
format: () => ' ',
},
{
align: 'left',
field: 'isToBeMailed',
label: t('customer.extendedList.tableVisibleColumns.isToBeMailed'),
name: 'isToBeMailed',
format: () => ' ',
},
{
align: 'left',
field: 'hasLcr',
label: t('customer.extendedList.tableVisibleColumns.hasLcr'),
name: 'hasLcr',
format: () => ' ',
},
{
align: 'left',
field: 'hasCoreVnl',
label: t('customer.extendedList.tableVisibleColumns.hasCoreVnl'),
name: 'hasCoreVnl',
format: () => ' ',
},
{
align: 'left',
field: 'hasSepaVnl',
label: t('customer.extendedList.tableVisibleColumns.hasSepaVnl'),
name: 'hasSepaVnl',
format: () => ' ',
},
{
align: 'right',
field: 'actions',
@ -119,7 +473,7 @@ const columns = computed(() => {
});
const stopEventPropagation = (event, col) => {
if (!['ref', 'id', 'supplier'].includes(col.name)) return;
if (!['id', 'salesPersonFk'].includes(col.name)) return;
event.preventDefault();
event.stopPropagation();
};
@ -131,17 +485,35 @@ const navigateToTravelId = (id) => {
const selectCustomerId = (id) => {
selectedCustomerId.value = id;
};
const selectSalesPersonId = (id) => {
console.log('selectedSalesPersonId:: ', selectedSalesPersonId.value);
selectedSalesPersonId.value = id;
};
</script>
<template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<CustomerExtendedListFilter data-key="CustomerExtendedList" />
<CustomerExtendedListFilter
v-if="visibleColumns.length !== 0"
data-key="CustomerExtendedList"
:visible-columns="visibleColumns"
/>
</QScrollArea>
</QDrawer>
<QToolbar class="bg-vn-dark">
<div id="st-data"></div>
<div id="st-data">
<TableVisibleColumns
:all-columns="allColumnNames"
table-code="clientsDetail"
labels-traductions-path="customer.extendedList.tableVisibleColumns"
@on-config-saved="
visibleColumns = ['customerStatus', ...$event, 'actions']
"
/>
</div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
@ -149,11 +521,11 @@ const selectCustomerId = (id) => {
<QPage class="column items-center q-pa-md">
<QTable
:columns="columns"
:pagination="{ rowsPerPage: 0 }"
:pagination="{ rowsPerPage: 12 }"
:rows="rows"
class="full-width q-mt-md"
hide-bottom
row-key="id"
:visible-columns="visibleColumns"
>
<template #body="props">
<QTr
@ -173,8 +545,15 @@ const selectCustomerId = (id) => {
v-bind="tableColumnComponents[col.name].props(props)"
@click="tableColumnComponents[col.name].event(props)"
>
{{ col.value }}
<CustomerDescriptorProxy :id="selectedCustomerId" />
{{ dashIfEmpty(col.value) }}
<WorkerDescriptorProxy
v-if="props.row.salesPersonFk"
:id="selectedSalesPersonId"
/>
<CustomerDescriptorProxy
v-if="props.row.id"
:id="selectedCustomerId"
/>
</component>
</QTd>
</QTr>
@ -189,13 +568,3 @@ const selectCustomerId = (id) => {
padding: 6px 6px 6px 6px;
}
</style>
<i18n>
es:
Identifier: Identificador
Social name: Razón social
Salesperson: Comercial
Phone: Teléfono
City: Población
Email: Email
</i18n>

9
src/pages/Customer/CustomerExtendedListActions.vue
View File

@ -39,7 +39,13 @@ const viewSummary = () => {
</script>
<template>
<QIcon @click.stop="redirectToCreateView" color="primary" name="vn:ticket" size="sm">
<div>
<QIcon
@click.stop="redirectToCreateView"
color="primary"
name="vn:ticket"
size="sm"
>
<QTooltip>
{{ t('Client ticket list') }}
</QTooltip>
@ -55,6 +61,7 @@ const viewSummary = () => {
{{ t('Preview') }}
</QTooltip>
</QIcon>
</div>
</template>
<i18n>

490
src/pages/Customer/CustomerExtendedListFilter.vue
View File

@ -1,22 +1,40 @@
<script setup>
import { ref } from 'vue';
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
const { t } = useI18n();
const props = defineProps({
dataKey: {
type: String,
required: true,
},
visibleColumns: {
type: Array,
required: true,
},
});
const { t } = useI18n();
const clients = ref();
const workers = ref();
const countriesOptions = ref([]);
const provincesOptions = ref([]);
const paymethodsOptions = ref([]);
const businessTypesOptions = ref([]);
const sageTaxTypesOptions = ref([]);
const sageTransactionTypesOptions = ref([]);
const visibleColumnsSet = computed(() => new Set(props.visibleColumns));
const shouldRenderColumn = (colName) => {
return visibleColumnsSet.value.has(colName);
};
</script>
<template>
@ -32,25 +50,75 @@ const workers = ref();
@on-fetch="(data) => (workers = data)"
auto-load
/>
<FetchData
url="Workers/activeWithInheritedRole"
:filter="{ where: { role: 'salesPerson' } }"
@on-fetch="(data) => (workers = data)"
auto-load
/>
<FetchData
url="Countries"
:filter="{ fields: ['id', 'country'], order: 'country ASC' }"
@on-fetch="(data) => (countriesOptions = data)"
auto-load
/>
<FetchData
ref="provincesFetchDataRef"
@on-fetch="(data) => (provincesOptions = data)"
auto-load
url="Provinces"
/>
<FetchData
url="Paymethods"
@on-fetch="(data) => (paymethodsOptions = data)"
auto-load
/>
<FetchData
url="BusinessTypes"
@on-fetch="(data) => (businessTypesOptions = data)"
auto-load
/>
<FetchData
url="SageTaxTypes"
auto-load
@on-fetch="(data) => (sageTaxTypesOptions = data)"
/>
<FetchData
url="sageTransactionTypes"
auto-load
@on-fetch="(data) => (sageTransactionTypesOptions = data)"
/>
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
<template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs">
<strong>{{ t(`params.${tag.label}`) }}: </strong>
<strong
>{{ t(`customer.extendedList.tableVisibleColumns.${tag.label}`) }}:
</strong>
<span>{{ formatFn(tag.value) }}</span>
</div>
</template>
<template #body="{ params, searchFn }">
<QList dense class="list">
<QItem class="q-mb-sm q-mt-sm">
<QList dense class="list q-gutter-y-sm q-mt-sm">
<QItem v-if="shouldRenderColumn('id')">
<QItemSection>
<VnInput
:label="t('Identifier')"
v-model="params.identifier"
:label="t('customer.extendedList.tableVisibleColumns.id')"
v-model="params.id"
is-outlined
clearable
/>
</QItemSection>
</QItem>
<QItem v-if="shouldRenderColumn('name')">
<QItemSection>
<VnInput
:label="t('customer.extendedList.tableVisibleColumns.name')"
v-model="params.name"
is-outlined
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<!-- <QItem class="q-mb-sm">
<QItemSection v-if="!clients">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
@ -72,14 +140,27 @@ const workers = ref();
:input-debounce="0"
/>
</QItemSection>
</QItem> -->
<QItem v-if="shouldRenderColumn('fi')">
<QItemSection>
<VnInput
:label="t('customer.extendedList.tableVisibleColumns.fi')"
v-model="params.fi"
is-outlined
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItem v-if="shouldRenderColumn('salesPersonFk')">
<QItemSection v-if="!workers">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="workers">
<VnSelectFilter
:label="t('Salesperson')"
:label="
t(
'customer.extendedList.tableVisibleColumns.salesPersonFk'
)
"
v-model="params.salesPersonFk"
@update:model-value="searchFn()"
:options="workers"
@ -96,19 +177,375 @@ const workers = ref();
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItem v-if="shouldRenderColumn('credit')">
<QItemSection>
<VnInput :label="t('Phone')" v-model="params.phone" is-outlined />
<VnInput
:label="t('customer.extendedList.tableVisibleColumns.credit')"
v-model="params.credit"
is-outlined
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItem v-if="shouldRenderColumn('creditInsurance')">
<QItemSection>
<VnInput :label="t('City')" v-model="params.city" is-outlined />
<VnInput
:label="
t(
'customer.extendedList.tableVisibleColumns.creditInsurance'
)
"
v-model="params.creditInsurance"
is-outlined
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItem v-if="shouldRenderColumn('phone')">
<QItemSection>
<VnInput :label="t('Email')" v-model="params.email" is-outlined />
<VnInput
:label="t('customer.extendedList.tableVisibleColumns.phone')"
v-model="params.phone"
is-outlined
/>
</QItemSection>
</QItem>
<QItem v-if="shouldRenderColumn('mobile')">
<QItemSection>
<VnInput
:label="t('customer.extendedList.tableVisibleColumns.mobile')"
v-model="params.mobile"
is-outlined
/>
</QItemSection>
</QItem>
<QItem v-if="shouldRenderColumn('street')">
<QItemSection>
<VnInput
:label="t('customer.extendedList.tableVisibleColumns.street')"
v-model="params.street"
is-outlined
/>
</QItemSection>
</QItem>
<QItem v-if="shouldRenderColumn('countryFk')">
<QItemSection>
<VnSelectFilter
:label="
t('customer.extendedList.tableVisibleColumns.countryFk')
"
v-model="params.countryFk"
@update:model-value="searchFn()"
:options="countriesOptions"
option-value="id"
option-label="country"
map-options
hide-selected
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem v-if="shouldRenderColumn('provinceFk')">
<QItemSection>
<VnSelectFilter
:label="
t('customer.extendedList.tableVisibleColumns.provinceFk')
"
v-model="params.provinceFk"
@update:model-value="searchFn()"
:options="provincesOptions"
option-value="id"
option-label="name"
map-options
hide-selected
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem v-if="shouldRenderColumn('city')">
<QItemSection>
<VnInput
:label="t('customer.extendedList.tableVisibleColumns.city')"
v-model="params.city"
is-outlined
/>
</QItemSection>
</QItem>
<QItem v-if="shouldRenderColumn('postcode')">
<QItemSection>
<VnInput
:label="
t('customer.extendedList.tableVisibleColumns.postcode')
"
v-model="params.postcode"
is-outlined
/>
</QItemSection>
</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')">
<QItemSection>
<VnInputDate
v-model="params.created"
:label="
t('customer.extendedList.tableVisibleColumns.created')
"
@update:model-value="searchFn()"
is-outlined
/>
</QItemSection>
</QItem>
<QItem v-if="shouldRenderColumn('businessTypeFk')">
<QItemSection>
<VnSelectFilter
:label="
t(
'customer.extendedList.tableVisibleColumns.businessTypeFk'
)
"
v-model="params.businessTypeFk"
:options="businessTypesOptions"
@update:model-value="searchFn()"
option-value="code"
option-label="description"
map-options
hide-selected
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem v-if="shouldRenderColumn('payMethodFk')">
<QItemSection>
<VnSelectFilter
:label="
t('customer.extendedList.tableVisibleColumns.payMethodFk')
"
v-model="params.payMethodFk"
:options="paymethodsOptions"
@update:model-value="searchFn()"
option-value="id"
option-label="name"
map-options
hide-selected
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem v-if="shouldRenderColumn('sageTaxTypeFk')">
<QItemSection>
<VnSelectFilter
:label="
t(
'customer.extendedList.tableVisibleColumns.sageTaxTypeFk'
)
"
v-model="params.sageTaxTypeFk"
@update:model-value="searchFn()"
:options="sageTaxTypesOptions"
option-value="id"
option-label="vat"
map-options
hide-selected
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem v-if="shouldRenderColumn('sageTransactionTypeFk')">
<QItemSection>
<VnSelectFilter
:label="
t(
'customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'
)
"
v-model="params.sageTransactionTypeFk"
@update:model-value="searchFn()"
:options="sageTransactionTypesOptions"
option-value="id"
option-label="transaction"
map-options
hide-selected
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<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')
"
toggle-indeterminate
:false-value="undefined"
/>
</QItemSection>
<QItemSection v-if="shouldRenderColumn('isVies')">
<QCheckbox
v-model="params.isVies"
@update:model-value="searchFn()"
:label="t('customer.extendedList.tableVisibleColumns.isVies')"
toggle-indeterminate
:false-value="undefined"
/>
</QItemSection>
</QItem>
<QItem
v-if="
shouldRenderColumn('isEqualizated') ||
shouldRenderColumn('isTaxDataChecked')
"
>
<QItemSection v-if="shouldRenderColumn('isTaxDataChecked')">
<QCheckbox
v-model="params.isTaxDataChecked"
@update:model-value="searchFn()"
:label="
t(
'customer.extendedList.tableVisibleColumns.isTaxDataChecked'
)
"
toggle-indeterminate
:false-value="undefined"
/>
</QItemSection>
<QItemSection v-if="shouldRenderColumn('isEqualizated')">
<QCheckbox
v-model="params.isEqualizated"
@update:model-value="searchFn()"
:label="
t(
'customer.extendedList.tableVisibleColumns.isEqualizated'
)
"
toggle-indeterminate
:false-value="undefined"
/>
</QItemSection>
</QItem>
<QItem
v-if="
shouldRenderColumn('hasToInvoice') ||
shouldRenderColumn('isFreezed')
"
>
<QItemSection v-if="shouldRenderColumn('isFreezed')">
<QCheckbox
v-model="params.isFreezed"
@update:model-value="searchFn()"
:label="
t('customer.extendedList.tableVisibleColumns.isFreezed')
"
toggle-indeterminate
:false-value="undefined"
/>
</QItemSection>
<QItemSection v-if="shouldRenderColumn('hasToInvoice')">
<QCheckbox
v-model="params.hasToInvoice"
@update:model-value="searchFn()"
:label="
t(
'customer.extendedList.tableVisibleColumns.hasToInvoice'
)
"
toggle-indeterminate
:false-value="undefined"
/>
</QItemSection>
</QItem>
<QItem
v-if="
shouldRenderColumn('isToBeMailed') ||
shouldRenderColumn('hasToInvoiceByAddress')
"
>
<QItemSection v-if="shouldRenderColumn('hasToInvoiceByAddress')">
<QCheckbox
v-model="params.hasToInvoiceByAddress"
@update:model-value="searchFn()"
:label="
t(
'customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'
)
"
toggle-indeterminate
:false-value="undefined"
/>
</QItemSection>
<QItemSection v-if="shouldRenderColumn('isToBeMailed')">
<QCheckbox
v-model="params.isToBeMailed"
@update:model-value="searchFn()"
:label="
t(
'customer.extendedList.tableVisibleColumns.isToBeMailed'
)
"
toggle-indeterminate
:false-value="undefined"
/>
</QItemSection>
</QItem>
<QItem
v-if="
shouldRenderColumn('hasLcr') || shouldRenderColumn('hasCoreVnl')
"
>
<QItemSection v-if="shouldRenderColumn('hasLcr')">
<QCheckbox
v-model="params.hasLcr"
@update:model-value="searchFn()"
:label="t('customer.extendedList.tableVisibleColumns.hasLcr')"
toggle-indeterminate
:false-value="undefined"
/>
</QItemSection>
<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>
@ -128,26 +565,7 @@ const workers = ref();
</style>
<i18n>
en:
params:
identifier: Identifier
socialName: Social name
salesPerson: Salesperson
phone: Phone
city: City
email: Email
es:
params:
identifier: Identificador
socialName: Razón social
salesPerson: Comercial
phone: Teléfono
city: Población
email: Email
Identifier: Identificador
Social name: Razón social
Salesperson: Comercial
Phone: Teléfono
City: Población
Email: Email
</i18n>