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

Se crea tabla y filtros de morosos en clientes

This commit is contained in:
carlosfonseca 2023-12-28 10:25:23 -05:00
parent 5e1e49e253
commit 5729204a3b
13 changed files with 552 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -113,6 +113,7 @@ export default {
webPayments: 'Web Payments',
extendedList: 'Extended list',
notifications: 'Notifications',
defaulter: 'Defaulter',
createCustomer: 'Create customer',
summary: 'Summary',
basicData: 'Basic Data',
@ -568,7 +569,7 @@ export default {
landed: 'Landed',
hour: 'Hour',
agency: 'Agency',
total: 'Total'
total: 'Total',
},
form: {
clientFk: 'Client',
@ -577,7 +578,7 @@ export default {
agencyModeFk: 'Agency',
},
list: {
newOrder: 'New Order'
newOrder: 'New Order',
},
summary: {
basket: 'Basket',
@ -603,8 +604,8 @@ export default {
description: 'Description',
quantity: 'Quantity',
price: 'Price',
amount: 'Amount'
}
amount: 'Amount',
},
},
worker: {
pageTitles: {

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

@ -113,6 +113,7 @@ export default {
webPayments: 'Pagos Web',
extendedList: 'Listado extendido',
notifications: 'Notificaciones',
defaulter: 'Morosos',
createCustomer: 'Crear cliente',
basicData: 'Datos básicos',
summary: 'Resumen',
@ -477,7 +478,7 @@ export default {
landed: 'F. entrega',
hour: 'Hora',
agency: 'Agencia',
total: 'Total'
total: 'Total',
},
form: {
clientFk: 'Cliente',
@ -486,7 +487,7 @@ export default {
agencyModeFk: 'Agencia',
},
list: {
newOrder: 'Nuevo Pedido'
newOrder: 'Nuevo Pedido',
},
summary: {
basket: 'Cesta',
@ -512,8 +513,8 @@ export default {
description: 'Descripción',
quantity: 'Cantidad',
price: 'Precio',
amount: 'Monto'
}
amount: 'Monto',
},
},
shelving: {
pageTitles: {

253
src/pages/Customer/Defaulter/CustomerDefaulter.vue Normal file
View File

@ -0,0 +1,253 @@
<script setup>
import { ref, computed, onBeforeMount } from 'vue';
import { useI18n } from 'vue-i18n';
import { QBtn, QCheckbox } from 'quasar';
import { useArrayData } from 'composables/useArrayData';
import { useStateStore } from 'stores/useStateStore';
import { toCurrency, toDate } from 'filters/index';
import CustomerNotificationsFilter from './CustomerDefaulterFilter.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
const { t } = useI18n();
const stateStore = useStateStore();
const arrayData = ref(null);
onBeforeMount(async () => {
arrayData.value = useArrayData('CustomerDefaulter', {
url: 'Defaulters/filter',
limit: 0,
});
await arrayData.value.fetch({ append: false });
stateStore.rightDrawer = true;
});
const rows = computed(() => arrayData.value.store.data);
const selected = ref([]);
const worderId = ref(0);
const customerId = ref(0);
const tableColumnComponents = {
client: {
component: QBtn,
props: () => ({ flat: true, color: 'blue' }),
event: (prop) => selectClientId(prop.row.clientFk),
},
isWorker: {
component: QCheckbox,
props: (prop) => ({
disable: true,
'model-value': Boolean(prop.value),
}),
event: () => {},
},
salesperson: {
component: QBtn,
props: () => ({ flat: true, color: 'blue' }),
event: (prop) => selectSalespersonId(prop.row.salesPersonFk),
},
country: {
component: 'span',
props: () => {},
event: () => {},
},
paymentMethod: {
component: 'span',
props: () => {},
event: () => {},
},
balance: {
component: 'span',
props: () => {},
event: () => {},
},
author: {
component: QBtn,
props: () => ({ flat: true, color: 'blue' }),
event: (prop) => selectAuthorId(prop.row.workerFk),
},
lastObservation: {
component: 'span',
props: () => {},
event: () => {},
},
date: {
component: 'span',
props: () => {},
event: () => {},
},
credit: {
component: 'span',
props: () => {},
event: () => {},
},
from: {
component: 'span',
props: () => {},
event: () => {},
},
};
const columns = computed(() => {
return [
{
align: 'left',
field: 'clientName',
label: t('Client'),
name: 'client',
},
{
align: 'left',
field: 'isWorker',
label: t('Is worker'),
name: 'isWorker',
},
{
align: 'left',
field: 'salesPersonName',
label: t('Salesperson'),
name: 'salesperson',
},
{
align: 'left',
field: 'country',
label: t('Country'),
name: 'country',
},
{
align: 'left',
field: 'payMethod',
label: t('P. Method'),
name: 'paymentMethod',
},
{
align: 'left',
field: (row) => toCurrency(row.amount),
label: t('Balance D.'),
name: 'balance',
},
{
align: 'left',
field: 'workerName',
label: t('Author'),
name: 'author',
},
{
align: 'left',
field: 'observation',
label: t('Last observation'),
name: 'lastObservation',
},
{
align: 'left',
field: (row) => toDate(row.created),
label: t('L. O. Date'),
name: 'date',
},
{
align: 'left',
field: (row) => toCurrency(row.creditInsurance),
label: t('Credit I.'),
name: 'credit',
},
{
align: 'left',
field: (row) => toDate(row.defaulterSinced),
label: t('From'),
name: 'from',
},
];
});
const selectClientId = (id) => {
worderId.value = 0;
customerId.value = id;
};
const selectSalespersonId = (id) => {
customerId.value = 0;
worderId.value = id;
};
const selectAuthorId = (id) => {
customerId.value = 0;
worderId.value = id;
};
</script>
<template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<CustomerNotificationsFilter data-key="CustomerDefaulter" />
</QScrollArea>
</QDrawer>
<QToolbar class="bg-vn-dark">
<div id="st-data"></div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<QPage class="column items-center q-pa-md">
<QTable
:columns="columns"
:pagination="{ rowsPerPage: 0 }"
:rows="rows"
class="full-width q-mt-md"
hide-bottom
row-key="id"
selection="multiple"
v-model:selected="selected"
>
<template #top>
<div v-if="rows" class="full-width flex justify-end">
{{ `${rows.length} ${t('route.cmr.list.results')}` }}
</div>
</template>
<template #body-cell="props">
<QTd :props="props">
<QTr :props="props" class="cursor-pointer">
<component
:is="tableColumnComponents[props.col.name].component"
class="col-content"
v-bind="tableColumnComponents[props.col.name].props(props)"
@click="tableColumnComponents[props.col.name].event(props)"
>
{{ props.value }}
<WorkerDescriptorProxy v-if="worderId" :id="worderId" />
<CustomerDescriptorProxy v-else :id="customerId" />
</component>
</QTr>
</QTd>
</template>
</QTable>
</QPage>
</template>
<style lang="scss" scoped>
.col-content {
border-radius: 4px;
padding: 6px 6px 6px 6px;
}
</style>
<i18n>
es:
Client: Cliente
Is worker: Es trabajador
Salesperson: Comercial
Country: País
P. Method: F. Pago
Balance D.: Saldo V.
Author: Autor
Last observation: Última observación
L. O. Date: Fecha Ú. O.
Credit I.: Crédito A.
From: Desde
</i18n>

238
src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue Normal file
View File

@ -0,0 +1,238 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
const { t } = useI18n();
const props = defineProps({
dataKey: {
type: String,
required: true,
},
});
const clients = ref();
const salespersons = ref();
const countries = ref();
const authors = ref();
</script>
<template>
<FetchData @on-fetch="(data) => (clients = data)" auto-load url="Clients" />
<FetchData
:filter="{ where: { role: 'salesPerson' } }"
@on-fetch="(data) => (salespersons = data)"
auto-load
url="Workers/activeWithInheritedRole"
/>
<FetchData @on-fetch="(data) => (countries = data)" auto-load url="Countries" />
<FetchData
@on-fetch="(data) => (authors = data)"
auto-load
url="Workers/activeWithInheritedRole"
/>
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
<template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs">
<strong>{{ t(`params.${tag.label}`) }}: </strong>
<span>{{ formatFn(tag.value) }}</span>
</div>
</template>
<template #body="{ params }">
<QList dense class="list">
<QItem class="q-mb-sm q-mt-sm">
<QItemSection v-if="clients">
<VnSelectFilter
:input-debounce="0"
:label="t('Client')"
:options="clients"
dense
emit-value
hide-selected
map-options
option-label="name"
option-value="clientTypeFk"
outlined
rounded
use-input
v-model="params.clientFk"
/>
</QItemSection>
<QItemSection v-else>
<QSkeleton class="full-width" type="QInput" />
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection v-if="salespersons">
<VnSelectFilter
:input-debounce="0"
:label="t('Salesperson')"
:options="salespersons"
dense
emit-value
hide-selected
map-options
option-label="name"
option-value="id"
outlined
rounded
use-input
v-model="params.salesPersonFk"
/>
</QItemSection>
<QItemSection v-else>
<QSkeleton class="full-width" type="QInput" />
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection v-if="countries">
<VnSelectFilter
:input-debounce="0"
:label="t('Country')"
:options="countries"
dense
emit-value
hide-selected
map-options
option-label="country"
option-value="id"
outlined
rounded
use-input
v-model="params.countryFk"
/>
</QItemSection>
<QItemSection v-else>
<QSkeleton class="full-width" type="QInput" />
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<VnInput
:label="t('P. Method')"
is-outlined
v-model="params.paymentMethod"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<VnInput
:label="t('Balance D.')"
is-outlined
v-model="params.balance"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection v-if="authors">
<VnSelectFilter
:input-debounce="0"
:label="t('Author')"
:options="authors"
dense
emit-value
hide-selected
map-options
option-label="name"
option-value="id"
outlined
rounded
use-input
v-model="params.workerFk"
/>
</QItemSection>
<QItemSection v-else>
<QSkeleton class="full-width" type="QInput" />
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<VnInput
:label="t('L. O. Date')"
is-outlined
v-model="params.date"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<VnInput
:label="t('Credit I.')"
is-outlined
v-model="params.credit"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<VnInputDate
:label="t('From')"
is-outlined
v-model="params.defaulterSinced"
/>
</QItemSection>
</QItem>
<QSeparator />
</QList>
</template>
</VnFilterPanel>
</template>
<style scoped>
.list {
width: 256px;
}
.list * {
max-width: 100%;
}
</style>
<i18n>
en:
params:
clientFk: Client
salesPersonFk: Salesperson
countryFk: Country
paymentMethod: P. Method
balance: Balance D.
workerFk: Author
date: L. O. Date
credit: Credit I.
defaulterSinced: From
es:
params:
clientFk: Cliente
salesPersonFk: Comercial
countryFk: País
paymentMethod: F. Pago
balance: Saldo V.
workerFk: Autor
date: Fecha Ú. O.
credit: Crédito A.
defaulterSinced: Desde
Client: Cliente
Salesperson: Comercial
Country: País
P. Method: F. Pago
Balance D.: Saldo V.
Author: Autor
L. O. Date: Fecha Ú. O.
Credit I.: Crédito A.
From: Desde
</i18n>

0
src/pages/Customer/CustomerExtendedList.vue → src/pages/Customer/ExtendedList/CustomerExtendedList.vue
View File

2
src/pages/Customer/CustomerExtendedListActions.vue → src/pages/Customer/ExtendedList/CustomerExtendedListActions.vue
View File

@ -4,7 +4,7 @@ import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
import CustomerSummaryDialog from '../Card/CustomerSummaryDialog.vue';
const { t } = useI18n();
const quasar = useQuasar();

17
src/pages/Customer/CustomerExtendedListFilter.vue → src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue
View File

@ -80,7 +80,7 @@ const workers = ref();
<QItemSection v-if="workers">
<VnSelectFilter
:label="t('Salesperson')"
v-model="params.salesPersonFk"
v-model="params.salesPerson"
@update:model-value="searchFn()"
:options="workers"
option-value="id"
@ -128,22 +128,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

2
src/pages/Customer/CustomerNotifications.vue → src/pages/Customer/Notifications/CustomerNotifications.vue
View File

@ -8,7 +8,7 @@ import { useArrayData } from 'composables/useArrayData';
import { useStateStore } from 'stores/useStateStore';
import CustomerNotificationsFilter from './CustomerNotificationsFilter.vue';
import CustomerDescriptorProxy from './Card/CustomerDescriptorProxy.vue';
import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
const { t } = useI18n();
const stateStore = useStateStore();

50
src/pages/Customer/CustomerNotificationsFilter.vue → src/pages/Customer/Notifications/CustomerNotificationsFilter.vue
View File

@ -4,8 +4,8 @@ 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 VnSelectFilter from 'components/common/VnSelectFilter.vue';
const { t } = useI18n();
const props = defineProps({
@ -15,18 +15,18 @@ const props = defineProps({
},
});
const clients = ref();
const cities = ref();
const clients = ref();
</script>
<template>
<FetchData
url="Clients"
:filter="{ where: { role: 'socialName' } }"
@on-fetch="(data) => (clients = data)"
auto-load
url="Clients"
/>
<FetchData url="Towns" @on-fetch="(data) => (cities = data)" auto-load />
<FetchData @on-fetch="(data) => (cities = data)" auto-load url="Towns" />
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
<template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs">
@ -41,8 +41,8 @@ const cities = ref();
<QItemSection>
<VnInput
:label="t('Identifier')"
v-model="params.identifier"
is-outlined
v-model="params.identifier"
/>
</QItemSection>
</QItem>
@ -53,20 +53,20 @@ const cities = ref();
</QItemSection>
<QItemSection v-if="clients">
<VnSelectFilter
:input-debounce="0"
:label="t('Social name')"
v-model="params.socialName"
@update:model-value="searchFn()"
:options="clients"
option-value="socialName"
option-label="socialName"
emit-value
map-options
use-input
hide-selected
@update:model-value="searchFn()"
dense
emit-value
hide-selected
map-options
option-label="socialName"
option-value="socialName"
outlined
rounded
:input-debounce="0"
use-input
v-model="params.socialName"
/>
</QItemSection>
</QItem>
@ -77,33 +77,33 @@ const cities = ref();
</QItemSection>
<QItemSection v-if="cities">
<VnSelectFilter
:input-debounce="0"
:label="t('City')"
v-model="params.city"
@update:model-value="searchFn()"
:options="cities"
option-value="name"
option-label="name"
emit-value
map-options
use-input
hide-selected
@update:model-value="searchFn()"
dense
emit-value
hide-selected
map-options
option-label="name"
option-value="name"
outlined
rounded
:input-debounce="0"
use-input
v-model="params.city"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<VnInput :label="t('Phone')" v-model="params.phone" is-outlined />
<VnInput :label="t('Phone')" is-outlined v-model="params.phone" />
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<VnInput :label="t('Email')" v-model="params.email" is-outlined />
<VnInput :label="t('Email')" is-outlined v-model="params.email" />
</QItemSection>
</QItem>
<QSeparator />

2
src/pages/Customer/CustomerPayments.vue → src/pages/Customer/Payments/CustomerPayments.vue
View File

@ -7,7 +7,7 @@ import { useStateStore } from 'stores/useStateStore';
import { useArrayData } from 'composables/useArrayData';
import VnPaginate from 'components/ui/VnPaginate.vue';
import VnConfirm from 'components/ui/VnConfirm.vue';
import CustomerDescriptorProxy from './Card/CustomerDescriptorProxy.vue';
import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
import { toDate, toCurrency } from 'filters/index';
import CustomerPaymentsFilter from './CustomerPaymentsFilter.vue';

0
src/pages/Customer/CustomerPaymentsFilter.vue → src/pages/Customer/Payments/CustomerPaymentsFilter.vue
View File

22
src/router/modules/customer.js
View File

@ -15,6 +15,7 @@ export default {
'CustomerPayments',
'CustomerExtendedList',
'CustomerNotifications',
'CustomerDefaulter',
],
card: ['CustomerBasicData'],
},
@ -49,7 +50,8 @@ export default {
title: 'webPayments',
icon: 'vn:onlinepayment',
},
component: () => import('src/pages/Customer/CustomerPayments.vue'),
component: () =>
import('src/pages/Customer/Payments/CustomerPayments.vue'),
},
{
path: 'extendedList',
@ -59,7 +61,9 @@ export default {
icon: 'vn:client',
},
component: () =>
import('src/pages/Customer/CustomerExtendedList.vue'),
import(
'src/pages/Customer/ExtendedList/CustomerExtendedList.vue'
),
},
{
path: 'notifications',
@ -69,7 +73,19 @@ export default {
icon: 'notifications',
},
component: () =>
import('src/pages/Customer/CustomerNotifications.vue'),
import(
'src/pages/Customer/Notifications/CustomerNotifications.vue'
),
},
{
path: 'defaulter',
name: 'CustomerDefaulter',
meta: {
title: 'defaulter',
icon: 'vn:risk',
},
component: () =>
import('src/pages/Customer/Defaulter/CustomerDefaulter.vue'),
},
],
},

8
test/vitest/__tests__/pages/Customer/CustomerPayments.spec.js
View File

@ -1,11 +1,10 @@
import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
import { createWrapper, axios } from 'app/test/vitest/helper';
import CustomerPayments from 'pages/Customer/CustomerPayments.vue';
import CustomerPayments from 'src/pages/Customer/Payments/CustomerPayments.vue';
describe('CustomerPayments', () => {
let vm;
beforeAll(() => {
vm = createWrapper(CustomerPayments, {
global: {
@ -13,7 +12,7 @@ describe('CustomerPayments', () => {
mocks: {
fetch: vi.fn(),
},
}
},
}).vm;
});
@ -28,11 +27,10 @@ describe('CustomerPayments', () => {
await vm.confirmTransaction({ id: 1 });
expect(vm.quasar.notify).toHaveBeenCalledWith(
expect.objectContaining({
message: 'Payment confirmed',
type: 'positive'
type: 'positive',
})
);
});