refactor: refs #8316 used VnSection and VnCardBeta #1148

Closed
jtubau wants to merge 1 commits from 8316-itemTypeCardWithVnCardBeta into dev
5 changed files with 105 additions and 92 deletions

View File

@ -1,20 +1,12 @@
<script setup>
import VnCard from 'components/common/VnCard.vue';
import VnCardBeta from 'components/common/VnCardBeta.vue';
import ItemTypeDescriptor from 'src/pages/Item/ItemType/Card/ItemTypeDescriptor.vue';
import ItemTypeFilter from 'src/pages/Item/ItemType/ItemTypeFilter.vue';
import ItemTypeSearchbar from '../ItemTypeSearchbar.vue';
</script>
<template>
<VnCard
<VnCardBeta
data-key="ItemTypeSummary"
base-url="ItemTypes"
:descriptor="ItemTypeDescriptor"
:filter-panel="ItemTypeFilter"
search-data-key="ItemTypeList"
search-url="ItemTypes"
>
<template #searchbar>
<ItemTypeSearchbar />
</template>
</VnCard>
/>
</template>

View File

@ -15,3 +15,5 @@ itemType:
promo: Promo
itemPackingType: Item packing type
isUnconventionalSize: Is unconventional size
search: Search item type
searchInfo: Search item type by id, name or code

View File

@ -15,3 +15,5 @@ itemType:
promo: Promoción
itemPackingType: Tipo de embalaje
isUnconventionalSize: Es de tamaño poco convencional
search: Buscar familia
searchInfo: Buscar familia por id, nombre o código

View File

@ -1,17 +1,17 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { ref, computed } from 'vue';
import ItemTypeSearchbar from 'src/pages/Item/ItemType/ItemTypeSearchbar.vue';
import VnTable from 'components/VnTable/VnTable.vue';
import FetchData from 'components/FetchData.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import ItemTypeFilter from './ItemType/ItemTypeFilter.vue';
import WorkerDescriptorProxy from '../Worker/Card/WorkerDescriptorProxy.vue';
import VnSection from 'src/components/common/VnSection.vue';
const { t } = useI18n();
const tableRef = ref();
const itemCategoriesOptions = ref([]);
const temperatureOptions = ref([]);
const dataKey='ItemTypeList';
const columns = computed(() => [
{
@ -103,49 +103,57 @@ const columns = computed(() => [
@on-fetch="(data) => (temperatureOptions = data)"
auto-load
/>
<RightMenu>
<template #right-panel>
<VnSection
:data-key="dataKey"
:columns="columns"
prefix="itemType"
:array-data-props="{
url: 'ItemTypes/filter',
order: 'name ASC',
exprBuilder,
}"
>
<template #rightMenu>
<ItemTypeFilter data-key="ItemTypeList" />
</template>
</RightMenu>
<ItemTypeSearchbar />
<VnTable
ref="tableRef"
data-key="ItemTypeList"
url="ItemTypes"
:create="{
urlCreate: 'ItemTypes',
title: t('Create ItemTypes'),
onDataSaved: () => tableRef.reload(),
formInitialData: {},
}"
:user-filter="{
include: {
relation: 'worker',
scope: {
fields: ['id'],
<template #body>
<VnTable
ref="tableRef"
:data-key="dataKey"
:create="{
urlCreate: 'ItemTypes',
title: t('Create ItemTypes'),
onDataSaved: () => tableRef.reload(),
formInitialData: {},
}"
:user-filter="{
include: {
relation: 'user',
relation: 'worker',
scope: {
fields: ['id', 'name'],
fields: ['id'],
include: {
relation: 'user',
scope: {
fields: ['id', 'name'],
},
},
},
},
},
},
}"
order="name ASC"
:columns="columns"
auto-load
:right-search="false"
redirect="item/item-type"
>
<template #column-workerFk="{ row }">
<span class="link" @click.stop>
{{ row.worker?.user?.name }}
<WorkerDescriptorProxy :id="row.workerFk" />
</span>
}"
:columns="columns"
auto-load
:right-search="false"
redirect="item/item-type"
>
<template #column-workerFk="{ row }">
<span class="link" @click.stop>
{{ row.worker?.user?.name }}
<WorkerDescriptorProxy :id="row.workerFk" />
</span>
</template>
</VnTable>
</template>
</VnTable>
</VnSection>
</template>
<i18n>

View File

@ -1,56 +1,65 @@
import { RouterView } from 'vue-router';
const itemTypeCard = {
name: 'ItemTypeCard',
path: ':id',
component: () => import('src/pages/Item/ItemType/Card/ItemTypeCard.vue'),
redirect: { name: 'ItemTypeSummary' },
meta: {
menu: [
'ItemTypeBasicData',
'ItemTypeLog',
]
},
children: [
{
path: 'summary',
name: 'ItemTypeSummary',
meta: {
title: 'summary',
icon: 'launch',
},
component: () => import('src/pages/Item/ItemType/Card/ItemTypeSummary.vue'),
},
{
path: 'basic-data',
name: 'ItemTypeBasicData',
meta: {
title: 'basicData',
icon: 'vn:settings',
},
component: () => import('src/pages/Item/ItemType/Card/ItemTypeBasicData.vue'),
},
{
path: 'log',
name: 'ItemTypeLog',
meta: {
title: 'log',
icon: 'vn:History',
},
component: () => import('src/pages/Item/ItemType/Card/ItemTypeLog.vue'),
},
],
};
export default {
path: '/item/item-type',
name: 'ItemType',
path: '/item/item-type',
meta: {
title: 'itemType',
icon: 'contact_support',
moduleName: 'ItemType',
menu: [],
},
component: RouterView,
redirect: { name: 'ItemTypeList' },
menus: {
main: [],
card: ['ItemTypeBasicData', 'ItemTypeLog'],
},
redirect: { name: 'ItemTypeMain' },
children: [
{
name: 'ItemTypeCard',
path: ':id',
component: () => import('src/pages/Item/ItemType/Card/ItemTypeCard.vue'),
redirect: { name: 'ItemTypeSummary' },
children: [
{
name: 'ItemTypeSummary',
path: 'summary',
meta: {
title: 'summary',
},
component: () =>
import('src/pages/Item/ItemType/Card/ItemTypeSummary.vue'),
},
{
name: 'ItemTypeBasicData',
path: 'basic-data',
meta: {
title: 'basicData',
icon: 'vn:settings',
},
component: () =>
import('src/pages/Item/ItemType/Card/ItemTypeBasicData.vue'),
},
{
path: 'log',
name: 'ItemTypeLog',
meta: {
title: 'log',
icon: 'vn:History',
},
component: () =>
import('src/pages/Item/ItemType/Card/ItemTypeLog.vue'),
},
],
name: 'ItemTypeMain',
path: '',
component: () => import('src/components/common/VnModule.vue'),
redirect: { name: 'ItemTypeIndexMain' },
children: [itemTypeCard],
},
],
};
};