refactor: refs #8322 update WagonCard component and routing structure

This commit is contained in:
Alex Moreno 2025-03-06 13:22:02 +01:00
parent 57c2cc1baf
commit 94918011e6
3 changed files with 136 additions and 158 deletions

View File

@ -2,5 +2,5 @@
import VnCardBeta from 'src/components/common/VnCardBeta.vue'; import VnCardBeta from 'src/components/common/VnCardBeta.vue';
</script> </script>
<template> <template>
<VnCardBeta data-key="Wagon" url="Wagons" :descriptor="WagonDescriptor" /> <VnCardBeta data-key="Wagon" url="Wagons" :descriptor="{}" />
</template> </template>

View File

@ -77,112 +77,110 @@ function navigate(id) {
} }
async function remove(row) { async function remove(row) {
try { await axios.delete(`Wagons/${row.id}`).then(async () => {
await axios.delete(`Wagons/${row.id}`).then(async () => { quasar.notify({
quasar.notify({ message: t('wagon.list.removeItem'),
message: t('wagon.list.removeItem'), type: 'positive',
type: 'positive',
});
store.data.splice(store.data.indexOf(row), 1);
window.location.reload();
}); });
} catch (error) { store.data.splice(store.data.indexOf(row), 1);
// window.location.reload();
} });
} }
</script> </script>
<template> <template>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<VnSection <VnSection
:data-key="dataKey" :data-key="dataKey"
:columns="columns" :columns="columns"
prefix="card" prefix="card"
:array-data-props="{ :array-data-props="{
url: 'Wagons', url: 'Wagons',
exprBuilder, exprBuilder,
}" }"
> >
<template #body> <template #body>
<VnTable <VnTable
ref="tableRef" ref="tableRef"
:data-key="dataKey" :data-key="dataKey"
:create="{ :create="{
urlCreate: 'Wagons', urlCreate: 'Wagons',
title: t('Create new wagon'), title: t('Create new wagon'),
onDataSaved: () => tableRef.reload(), onDataSaved: () => tableRef.reload(),
formInitialData: {}, formInitialData: {},
}" }"
:filter="filter" :filter="filter"
:columns="columns" :columns="columns"
order="id DESC" order="id DESC"
:column-search="false" :column-search="false"
:default-mode="'card'" :default-mode="'card'"
:disable-option="{ table: true }" :disable-option="{ table: true }"
> :right-search="false"
<template #more-create-dialog="{ data }"> >
<VnInput <template #more-create-dialog="{ data }">
filled <VnInput
v-model="data.label" filled
:label="t('wagon.create.label')" v-model="data.label"
type="number" :label="t('wagon.create.label')"
min="0" type="number"
:rules="[(val) => !!val || t('wagon.warnings.labelNotEmpty')]" min="0"
/> :rules="[(val) => !!val || t('wagon.warnings.labelNotEmpty')]"
<VnInput />
filled <VnInput
v-model="data.plate" filled
:label="t('wagon.list.plate')" v-model="data.plate"
:rules="[(val) => !!val || t('wagon.warnings.plateNotEmpty')]" :label="t('wagon.list.plate')"
/> :rules="[(val) => !!val || t('wagon.warnings.plateNotEmpty')]"
<VnInput />
filled <VnInput
v-model="data.volume" filled
:label="t('wagon.list.volume')" v-model="data.volume"
type="number" :label="t('wagon.list.volume')"
min="0" type="number"
:rules="[(val) => !!val || t('wagon.warnings.volumeNotEmpty')]" min="0"
/> :rules="[
<VnSelect (val) => !!val || t('wagon.warnings.volumeNotEmpty'),
url="WagonTypes" ]"
filled />
v-model="data.typeFk" <VnSelect
use-input url="WagonTypes"
fill-input filled
hide-selected v-model="data.typeFk"
input-debounce="0" use-input
option-label="name" fill-input
option-value="id" hide-selected
emit-value input-debounce="0"
map-options option-label="name"
:label="t('globals.type')" option-value="id"
:options="filteredWagonTypes" emit-value
:rules="[(val) => !!val || t('wagon.warnings.typeNotEmpty')]" map-options
@filter="filterType" :label="t('globals.type')"
> :options="filteredWagonTypes"
<template v-if="data.typeFk" #append> :rules="[(val) => !!val || t('wagon.warnings.typeNotEmpty')]"
<QIcon @filter="filterType"
name="cancel" >
@click.stop.prevent="data.typeFk = null" <template v-if="data.typeFk" #append>
class="cursor-pointer" <QIcon
/> name="cancel"
</template> @click.stop.prevent="data.typeFk = null"
<template #no-option> class="cursor-pointer"
<QItem> />
<QItemSection class="text-grey"> </template>
{{ t('wagon.warnings.noData') }} <template #no-option>
</QItemSection> <QItem>
</QItem> <QItemSection class="text-grey">
</template> {{ t('wagon.warnings.noData') }}
</VnSelect> </QItemSection>
</template> </QItem>
</VnTable> </template>
</template> </VnSelect>
</VnSection> </template>
</VnTable>
</template>
</VnSection>
</QPage> </QPage>
</template> </template>
<i18n> <i18n>
es: es:
Create new wagon: Crear nuevo vagón Create new wagon: Crear nuevo vagón
</i18n> </i18n>

View File

@ -1,17 +1,23 @@
import { RouterView } from 'vue-router'; import { RouterView } from 'vue-router';
const wagonCard = { const wagonCard = {
name: 'WagonCard', name: 'WagonCard',
path: ':id', path: ':id',
component: () => import('src/pages/Ticket/Card/WagonCard.vue'), component: () => import('src/pages/Wagon/Card/WagonCard.vue'),
redirect: { name: 'WagonSummary' }, redirect: { name: 'WagonEdit' },
meta: { meta: {
//main: ['WagonList', 'WagonTypeList', 'WagonCounter', 'WagonTray'], menu: ['WagonEdit'],
menu: [],
}, },
children: [ children: [
{}, {
path: 'edit',
name: 'WagonEdit',
meta: {
title: 'wagonEdit',
icon: 'edit',
},
component: () => import('src/pages/Wagon/WagonCreate.vue'),
},
], ],
}; };
@ -23,7 +29,7 @@ export default {
icon: 'vn:trolley', icon: 'vn:trolley',
moduleName: 'Wagon', moduleName: 'Wagon',
keyBinding: 'w', keyBinding: 'w',
menu: ['WagonList', 'WagonTypeList', 'WagonCounter', 'WagonTray'], menu: ['WagonList', 'WagonTypeList', 'WagonCounter'],
}, },
component: RouterView, component: RouterView,
redirect: { name: 'WagonMain' }, redirect: { name: 'WagonMain' },
@ -48,26 +54,8 @@ export default {
icon: 'view_list', icon: 'view_list',
}, },
}, },
wagonCard,
] ],
},
{
path: 'create',
name: 'WagonCreate',
meta: {
title: 'wagonCreate',
icon: 'create',
},
component: () => import('src/pages/Wagon/WagonCreate.vue'),
},
{
path: ':id/edit',
name: 'WagonEdit',
meta: {
title: 'wagonEdit',
icon: 'edit',
},
component: () => import('src/pages/Wagon/WagonCreate.vue'),
}, },
{ {
path: 'counter', path: 'counter',
@ -78,40 +66,32 @@ export default {
}, },
component: () => import('src/pages/Wagon/WagonCounter.vue'), component: () => import('src/pages/Wagon/WagonCounter.vue'),
}, },
],
},
{
path: '/wagon/type',
name: 'WagonTypeMain',
component: () => import('src/components/common/VnModule.vue'),
redirect: { name: 'WagonTypeList' },
children: [
{ {
path: 'list', path: 'type',
name: 'WagonTypeList', name: 'WagonTypeMain',
meta: { redirect: { name: 'WagonTypeList' },
title: 'typesList', children: [
icon: 'view_list', {
}, path: 'list',
component: () => import('src/pages/Wagon/Type/WagonTypeList.vue'), name: 'WagonTypeList',
}, meta: {
{ title: 'typesList',
path: 'create', icon: 'view_list',
name: 'WagonTypeCreate', },
meta: { component: () =>
title: 'typeCreate', import('src/pages/Wagon/Type/WagonTypeList.vue'),
icon: 'create', },
}, {
component: () => import('src/pages/Wagon/Type/WagonTypeList.vue'), path: ':id/edit',
}, name: 'WagonTypeEdit',
{ meta: {
path: ':id/edit', title: 'typeEdit',
name: 'WagonTypeEdit', icon: 'edit',
meta: { },
title: 'typeEdit', component: () =>
icon: 'edit', import('src/pages/Wagon/Type/WagonTypeEdit.vue'),
}, },
component: () => import('src/pages/Wagon/Type/WagonTypeEdit.vue'), ],
}, },
], ],
}, },