refactor: refs #8316 used VnSection and VnBetaCard

src/pages/Item/ItemType/Card/ItemTypeCard.vue

@@ -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>

src/pages/Item/ItemType/locale/en.yml

@@ -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

src/pages/Item/ItemType/locale/es.yml

@@ -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

src/pages/Item/ItemTypeList.vue

@@ -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>
+    <VnSection 
-        <template #right-panel>
+        :data-key="dataKey"
+        :columns="columns"
+        prefix="itemType"
+        :array-data-props="{
+            url: 'ItemTypes',
+            order: 'name ASC',
+            exprBuilder,
+        }"
+    >
+        <template #rightMenu>
             <ItemTypeFilter data-key="ItemTypeList" />
         </template>
-    </RightMenu>
+        <template #body>
-    <ItemTypeSearchbar />
+            <VnTable
-    <VnTable
+                ref="tableRef"
-        ref="tableRef"
+                :data-key="dataKey"
-        data-key="ItemTypeList"
+                :create="{
-        url="ItemTypes"
+                    urlCreate: 'ItemTypes',
-        :create="{
+                    title: t('Create ItemTypes'),
-            urlCreate: 'ItemTypes',
+                    onDataSaved: () => tableRef.reload(),
-            title: t('Create ItemTypes'),
+                    formInitialData: {},
-            onDataSaved: () => tableRef.reload(),
+                }"
-            formInitialData: {},
+                :user-filter="{
-        }"
-        :user-filter="{
-            include: {
-                relation: 'worker',
-                scope: {
-                    fields: ['id'],
                     include: {
-                        relation: 'user',
+                        relation: 'worker',
                         scope: {
-                            fields: ['id', 'name'],
+                            fields: ['id'],
+                            include: {
+                                relation: 'user',
+                                scope: {
+                                    fields: ['id', 'name'],
+                                },
+                            },
                         },
                     },
-                },
+                }"
-            },
+                :columns="columns"
-        }"
+                auto-load
-        order="name ASC"
+                :right-search="false"
-        :columns="columns"
+                redirect="item/item-type"
-        auto-load
+            >
-        :right-search="false"
+                <template #column-workerFk="{ row }">
-        redirect="item/item-type"
+                    <span class="link" @click.stop>
-    >
+                        {{ row.worker?.user?.name }}
-        <template #column-workerFk="{ row }">
+                        <WorkerDescriptorProxy :id="row.workerFk" />
-            <span class="link" @click.stop>
+                    </span>
-                {{ row.worker?.user?.name }}
+                </template>
-                <WorkerDescriptorProxy :id="row.workerFk" />
+            </VnTable>
-            </span>
         </template>
-    </VnTable>
+    </VnSection>
 </template>
 
 <i18n>

src/router/modules/itemType.js

@@ -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' },
+    redirect: { name: 'ItemTypeMain' },
-    menus: {
-        main: [],
-        card: ['ItemTypeBasicData', 'ItemTypeLog'],
-    },
     children: [
         {
-            name: 'ItemTypeCard',
+            name: 'ItemTypeMain',
-            path: ':id',
+            path: '',
-            component: () => import('src/pages/Item/ItemType/Card/ItemTypeCard.vue'),
+            component: () => import('src/components/common/VnModule.vue'),
-            redirect: { name: 'ItemTypeSummary' },
+            redirect: { name: 'ItemTypeIndexMain' },
-            children: [
+            children: [itemTypeCard],
-                {
-                    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'),
-                },
-            ],
         },
     ],
-};
+};