WIP: refactor: #8322 changed supplier component to use VnSection/VnCardBeta #1216

Draft
provira wants to merge 3 commits from 8322-Supplier into dev
5 changed files with 196 additions and 190 deletions

View File

@ -704,6 +704,8 @@ wagon:
name: Name name: Name
supplier: supplier:
search: Search provider
searchInfo: Search provider by id or name
list: list:
payMethod: Pay method payMethod: Pay method
account: Account account: Account

View File

@ -701,6 +701,8 @@ wagon:
volume: Volumen volume: Volumen
name: Nombre name: Nombre
supplier: supplier:
search: Buscar proveedor
searchInfo: Buscar proveedor por id o nombre
list: list:
payMethod: Método de pago payMethod: Método de pago
account: Cuenta account: Cuenta
@ -708,6 +710,7 @@ supplier:
tableVisibleColumns: tableVisibleColumns:
nif: NIF/CIF nif: NIF/CIF
account: Cuenta account: Cuenta
summary: summary:
responsible: Responsable responsible: Responsable
verified: Verificado verified: Verificado

View File

@ -1,19 +1,7 @@
<script setup> <script setup>
import VnCard from 'components/common/VnCard.vue';
import SupplierDescriptor from './SupplierDescriptor.vue'; import SupplierDescriptor from './SupplierDescriptor.vue';
import SupplierListFilter from '../SupplierListFilter.vue'; import VnCardBeta from 'src/components/common/VnCardBeta.vue';
</script> </script>
<template> <template>
<VnCard <VnCardBeta data-key="Supplier" base-url="Suppliers" :descriptor="SupplierDescriptor" />
data-key="Supplier"
base-url="Suppliers"
:descriptor="SupplierDescriptor"
:filter-panel="SupplierListFilter"
search-data-key="SupplierList"
:searchbar-props="{
url: 'Suppliers/filter',
searchUrl: 'table',
label: 'Search suppliers',
}"
/>
</template> </template>

View File

@ -2,12 +2,12 @@
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import VnTable from 'components/VnTable/VnTable.vue'; import VnTable from 'components/VnTable/VnTable.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import SupplierListFilter from './SupplierListFilter.vue'; import SupplierListFilter from './SupplierListFilter.vue';
import VnSection from 'src/components/common/VnSection.vue';
const { t } = useI18n(); const { t } = useI18n();
const tableRef = ref(); const tableRef = ref();
const dataKey = 'SupplierList';
const columns = computed(() => [ const columns = computed(() => [
{ {
@ -98,34 +98,36 @@ const columns = computed(() => [
}, },
]); ]);
</script> </script>
<template> <template>
<VnSearchbar data-key="SuppliersList" :limit="20" :label="t('Search suppliers')" /> <VnSection
<RightMenu> :data-key="dataKey"
<template #right-panel>
<SupplierListFilter data-key="SuppliersList" />
</template>
</RightMenu>
<VnTable
ref="tableRef"
data-key="SuppliersList"
url="Suppliers/filter"
redirect="supplier"
:create="{
urlCreate: 'Suppliers/newSupplier',
title: t('Create Supplier'),
onDataSaved: ({ id }) => tableRef.redirect(id),
formInitialData: {},
mapper: (data) => {
data.name = data.socialName;
delete data.socialName;
return data;
},
}"
:right-search="false"
order="id ASC"
:columns="columns" :columns="columns"
/> prefix="supplier"
:array-data-props="{
url: 'Suppliers/filter',
order: 'id ASC',
}"
>
<template #body>
<VnTable
ref="tableRef"
:data-key="dataKey"
:create="{
urlCreate: 'Suppliers/newSupplier',
title: t('Create Supplier'),
onDataSaved: ({ id }) => tableRef.redirect(id),
formInitialData: {},
mapper: (data) => {
data.name = data.socialName;
delete data.socialName;
return data;
},
}"
:columns="columns"
redirect="supplier"
/>
</template>
</VnSection>
</template> </template>
<i18n> <i18n>

View File

@ -1,19 +1,13 @@
import { RouterView } from 'vue-router'; import { RouterView } from 'vue-router';
export default { const supplierCard = {
path: '/supplier', name: 'SupplierCard',
name: 'Supplier', path: ':id',
component: () => import('src/pages/Supplier/Card/SupplierCard.vue'),
redirect: { name: 'SupplierSummary' },
meta: { meta: {
title: 'suppliers',
icon: 'vn:supplier', menu: [
moduleName: 'Supplier',
keyBinding: 'p',
},
component: RouterView,
redirect: { name: 'SupplierMain' },
menus: {
main: ['SupplierList'],
card: [
'SupplierBasicData', 'SupplierBasicData',
'SupplierFiscalData', 'SupplierFiscalData',
'SupplierBillingData', 'SupplierBillingData',
@ -26,21 +20,166 @@ export default {
'SupplierDms', 'SupplierDms',
], ],
}, },
children: [
{
name: 'SupplierSummary',
path: 'summary',
meta: {
title: 'summary',
icon: 'launch',
},
component: () =>
import('src/pages/Supplier/Card/SupplierSummary.vue'),
},
{
path: 'basic-data',
name: 'SupplierBasicData',
meta: {
title: 'basicData',
icon: 'vn:settings',
},
component: () =>
import('src/pages/Supplier/Card/SupplierBasicData.vue'),
},
{
path: 'fiscal-data',
name: 'SupplierFiscalData',
meta: {
title: 'fiscalData',
icon: 'vn:dfiscales',
},
component: () =>
import('src/pages/Supplier/Card/SupplierFiscalData.vue'),
},
{
path: 'billing-data',
name: 'SupplierBillingData',
meta: {
title: 'billingData',
icon: 'vn:payment',
},
component: () =>
import('src/pages/Supplier/Card/SupplierBillingData.vue'),
},
{
path: 'log',
name: 'SupplierLog',
meta: {
title: 'log',
icon: 'vn:History',
},
component: () => import('src/pages/Supplier/Card/SupplierLog.vue'),
},
{
path: 'account',
name: 'SupplierAccounts',
meta: {
title: 'accounts',
icon: 'vn:credit',
},
component: () =>
import('src/pages/Supplier/Card/SupplierAccounts.vue'),
},
{
path: 'contact',
name: 'SupplierContacts',
meta: {
title: 'contacts',
icon: 'contact_phone',
},
component: () =>
import('src/pages/Supplier/Card/SupplierContacts.vue'),
},
{
path: 'address',
name: 'SupplierAddresses',
meta: {
title: 'addresses',
icon: 'vn:delivery',
},
component: () =>
import('src/pages/Supplier/Card/SupplierAddresses.vue'),
},
{
path: 'address/create',
name: 'SupplierAddressesCreate',
component: () =>
import('src/pages/Supplier/Card/SupplierAddressesCreate.vue'),
},
{
path: 'consumption',
name: 'SupplierConsumption',
meta: {
title: 'consumption',
icon: 'show_chart',
},
component: () =>
import('src/pages/Supplier/Card/SupplierConsumption.vue'),
},
{
path: 'agency-term',
name: 'SupplierAgencyTerm',
meta: {
title: 'agencyTerm',
icon: 'vn:agency-term',
},
component: () =>
import('src/pages/Supplier/Card/SupplierAgencyTerm.vue'),
},
{
path: 'dms',
name: 'SupplierDms',
meta: {
title: 'dms',
icon: 'smb_share',
},
component: () => import('src/pages/Supplier/Card/SupplierDms.vue'),
},
{
path: 'agency-term/create',
name: 'SupplierAgencyTermCreate',
component: () =>
import('src/pages/Supplier/Card/SupplierAgencyTermCreate.vue'),
},
]
};
export default {
name: 'Supplier',
path: '/supplier',
meta: {
title: 'suppliers',
icon: 'vn:supplier',
moduleName: 'Supplier',
keyBinding: 'p',
menu: ['SupplierList'],
},
component: RouterView,
redirect: { name: 'SupplierMain' },
children: [ children: [
{ {
path: '', path: '',
name: 'SupplierMain', name: 'SupplierMain',
component: () => import('src/components/common/VnModule.vue'), component: () => import('src/components/common/VnModule.vue'),
redirect: { name: 'SupplierList' }, redirect: { name: 'SupplierIndexMain' },
children: [ children: [
{ {
path: 'list', path: '',
name: 'SupplierList', name: 'SupplierIndexMain',
meta: { redirect: { name: 'SupplierList' },
title: 'list',
icon: 'view_list',
},
component: () => import('src/pages/Supplier/SupplierList.vue'), component: () => import('src/pages/Supplier/SupplierList.vue'),
children: [
{
path: 'list',
name: 'SupplierList',
meta: {
title: 'list',
icon: 'view_list',
},
},
supplierCard,
]
}, },
{ {
path: 'create', path: 'create',
@ -53,133 +192,5 @@ export default {
}, },
], ],
}, },
{
name: 'SupplierCard',
path: ':id',
component: () => import('src/pages/Supplier/Card/SupplierCard.vue'),
redirect: { name: 'SupplierSummary' },
children: [
{
name: 'SupplierSummary',
path: 'summary',
meta: {
title: 'summary',
icon: 'launch',
},
component: () =>
import('src/pages/Supplier/Card/SupplierSummary.vue'),
},
{
path: 'basic-data',
name: 'SupplierBasicData',
meta: {
title: 'basicData',
icon: 'vn:settings',
},
component: () =>
import('src/pages/Supplier/Card/SupplierBasicData.vue'),
},
{
path: 'fiscal-data',
name: 'SupplierFiscalData',
meta: {
title: 'fiscalData',
icon: 'vn:dfiscales',
},
component: () =>
import('src/pages/Supplier/Card/SupplierFiscalData.vue'),
},
{
path: 'billing-data',
name: 'SupplierBillingData',
meta: {
title: 'billingData',
icon: 'vn:payment',
},
component: () =>
import('src/pages/Supplier/Card/SupplierBillingData.vue'),
},
{
path: 'log',
name: 'SupplierLog',
meta: {
title: 'log',
icon: 'vn:History',
},
component: () => import('src/pages/Supplier/Card/SupplierLog.vue'),
},
{
path: 'account',
name: 'SupplierAccounts',
meta: {
title: 'accounts',
icon: 'vn:credit',
},
component: () =>
import('src/pages/Supplier/Card/SupplierAccounts.vue'),
},
{
path: 'contact',
name: 'SupplierContacts',
meta: {
title: 'contacts',
icon: 'contact_phone',
},
component: () =>
import('src/pages/Supplier/Card/SupplierContacts.vue'),
},
{
path: 'address',
name: 'SupplierAddresses',
meta: {
title: 'addresses',
icon: 'vn:delivery',
},
component: () =>
import('src/pages/Supplier/Card/SupplierAddresses.vue'),
},
{
path: 'address/create',
name: 'SupplierAddressesCreate',
component: () =>
import('src/pages/Supplier/Card/SupplierAddressesCreate.vue'),
},
{
path: 'consumption',
name: 'SupplierConsumption',
meta: {
title: 'consumption',
icon: 'show_chart',
},
component: () =>
import('src/pages/Supplier/Card/SupplierConsumption.vue'),
},
{
path: 'agency-term',
name: 'SupplierAgencyTerm',
meta: {
title: 'agencyTerm',
icon: 'vn:agency-term',
},
component: () =>
import('src/pages/Supplier/Card/SupplierAgencyTerm.vue'),
},
{
path: 'dms',
name: 'SupplierDms',
meta: {
title: 'dms',
icon: 'smb_share',
},
component: () => import('src/pages/Supplier/Card/SupplierDms.vue'),
},
{
path: 'agency-term/create',
name: 'SupplierAgencyTermCreate',
component: () =>
import('src/pages/Supplier/Card/SupplierAgencyTermCreate.vue'),
},
],
},
], ],
}; };