0
0
Fork 0

refactor(customer_recovery): to vnTable

This commit is contained in:
Alex Moreno 2024-08-05 12:10:15 +02:00
parent cb95f0637f
commit 810e579ea9
4 changed files with 83 additions and 138 deletions

View File

@ -90,6 +90,9 @@ globals:
salesPerson: SalesPerson
send: Send
code: Code
since: Since
from: From
to: To
pageTitles:
logIn: Login
summary: Summary

View File

@ -90,6 +90,9 @@ globals:
salesPerson: Comercial
send: Enviar
code: Código
since: Desde
from: Desde
to: Hasta
pageTitles:
logIn: Inicio de sesión
summary: Resumen
@ -697,8 +700,6 @@ invoiceOut:
percentageText: '{getPercentage}% {getAddressNumber} de {getNAddresses}'
pdfsNumberText: '{nPdfs} de {totalPdfs} PDFs'
negativeBases:
from: Desde
to: Hasta
company: Empresa
country: País
clientId: Id cliente
@ -1240,8 +1241,6 @@ components:
# LatestBuysFilter
salesPersonFk: Comprador
supplierFk: Proveedor
from: Desde
to: Hasta
active: Activo
visible: Visible
floramondo: Floramondo

View File

@ -1,146 +1,107 @@
<script setup>
import axios from 'axios';
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import { toCurrency, toDate } from 'src/filters';
import FetchData from 'components/FetchData.vue';
import VnTable from 'components/VnTable/VnTable.vue';
const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const rows = ref([]);
const filter = {
const tableRef = ref();
const filter = computed(() => {
return {
where: { clientFk: route.params.id },
order: ['started DESC'],
limit: 20,
};
});
const componentColumn = (type) => {
return {
columnFilter: {
component: type,
},
columnCreate: {
component: type,
},
};
};
const tableColumnComponents = {
since: {
component: 'span',
props: () => {},
event: () => {},
},
to: {
component: 'span',
props: () => {},
event: () => {},
},
amount: {
component: 'span',
props: () => {},
event: () => {},
},
period: {
component: 'span',
props: () => {},
event: () => {},
},
};
const columns = computed(() => [
{
align: 'left',
field: 'started',
label: t('Since'),
name: 'since',
format: (value) => toDate(value),
label: t('globals.since'),
name: 'started',
format: ({ started }) => toDate(started),
create: true,
...componentColumn('date'),
},
{
align: 'left',
field: 'finished',
label: t('To'),
name: 'to',
format: (value) => toDate(value),
name: 'finished',
label: t('globals.to'),
format: ({ finished }) => toDate(finished),
create: true,
...componentColumn('date'),
},
{
align: 'left',
field: 'amount',
label: t('Amount'),
name: 'amount',
format: (value) => toCurrency(value),
label: t('globals.amount'),
format: ({ amount }) => toCurrency(amount),
create: true,
...componentColumn('number'),
},
{
align: 'left',
field: 'period',
label: t('Period'),
name: 'period',
label: t('Period'),
create: true,
...componentColumn('number'),
},
{
align: 'left',
name: 'tableActions',
actions: [
{
title: t('Finish that recovery period'),
icon: 'lock',
show: (row) => !row.finished,
action: ({ id }) => setFinished(id),
isPrimary: true,
},
],
},
]);
const toCustomerRecoverieCreate = () => {
router.push({ name: 'CustomerRecoverieCreate' });
};
function setFinished(id) {
axios.patch(`Recoveries/${id}`, { finished: Date.vnNow() });
tableRef.value.reload();
}
</script>
<template>
<FetchData
:filter="filter"
@on-fetch="(data) => (rows = data)"
auto-load
<VnTable
ref="tableRef"
data-key="Recoveries"
url="Recoveries"
/>
<div class="full-width flex justify-center">
<QPage class="card-width q-pa-lg">
<QTable
search-url="recoveries"
:filter="filter"
order="started DESC"
:columns="columns"
:no-data-label="t('globals.noResults')"
:pagination="{ rowsPerPage: 12 }"
:rows="rows"
class="full-width q-mt-md"
row-key="id"
>
<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 }}
</component>
</QTr>
</QTd>
</template>
</QTable>
</QPage>
</div>
<QPageSticky :offset="[18, 18]">
<QBtn @click.stop="toCustomerRecoverieCreate()" color="primary" fab icon="add" />
<QTooltip>
{{ t('New recoverie') }}
</QTooltip>
</QPageSticky>
:use-model="true"
:right-search="false"
:create="{
urlCreate: 'Recoveries',
title: 'New recovery',
onDataSaved: () => tableRef.reload(),
formInitialData: { clientFk: route.params.id, started: Date.vnNew() },
}"
auto-load
/>
</template>
<style lang="scss">
.consignees-card {
border: 2px solid var(--vn-accent-color);
border-radius: 10px;
padding: 10px;
}
.label-color {
color: var(--vn-label-color);
}
</style>
<i18n>
es:
Since: Desde
To: Hasta
Amount: Importe
Period: Periodo
New recoverie: Nuevo recobro
New recovery: Nuevo recobro
Finish that recovery period: Terminar recobro
</i18n>

View File

@ -226,11 +226,6 @@ export default {
},
{
path: 'recoveries',
name: 'RecoveriesCard',
redirect: { name: 'CustomerRecoveries' },
children: [
{
path: '',
name: 'CustomerRecoveries',
meta: {
title: 'recoveries',
@ -239,19 +234,6 @@ export default {
component: () =>
import('src/pages/Customer/Card/CustomerRecoveries.vue'),
},
{
path: 'create',
name: 'CustomerRecoverieCreate',
meta: {
title: 'recoverie-create',
},
component: () =>
import(
'src/pages/Customer/components/CustomerRecoverieCreate.vue'
),
},
],
},
{
path: 'web-access',
name: 'CustomerWebAccess',