refactor: refs #8316 used VnSection and VnCardBeta on ItemCard

src/pages/Item/Card/ItemCard.vue

@@ -1,19 +1,11 @@
 <script setup>
-import VnCard from 'components/common/VnCard.vue';
+import VnCardBeta from 'components/common/VnCardBeta.vue';
 import ItemDescriptor from './ItemDescriptor.vue';
-import ItemListFilter from '../ItemListFilter.vue';
 </script>
 <template>
-    <VnCard
+    <VnCardBeta
         data-key="Item"
         base-url="Items"
         :descriptor="ItemDescriptor"
-        :filter-panel="ItemListFilter"
-        search-data-key="ItemList"
-        :searchbar-props="{
-            url: 'Items/filter',
-            label: 'searchbar.label',
-            info: 'searchbar.info',
-        }"
     />
 </template>

src/pages/Item/ItemList.vue

@@ -6,15 +6,14 @@ import VnImg from 'src/components/ui/VnImg.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
 import { toDate } from 'src/filters';
 import FetchedTags from 'src/components/ui/FetchedTags.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import ItemSummary from '../Item/Card/ItemSummary.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import ItemDescriptorProxy from './Card/ItemDescriptorProxy.vue';
 import ItemTypeDescriptorProxy from './ItemType/Card/ItemTypeDescriptorProxy.vue';
 import { cloneItem } from 'src/pages/Item/composables/cloneItem';
-import RightMenu from 'src/components/common/RightMenu.vue';
 import ItemListFilter from './ItemListFilter.vue';
+import VnSection from 'src/components/common/VnSection.vue';
 
 const entityId = computed(() => route.params.id);
 const { openCloneDialog } = cloneItem();
@@ -22,6 +21,7 @@ const { viewSummary } = useSummaryDialog();
 const { t } = useI18n();
 const tableRef = ref();
 const route = useRoute();
+const dataKey = 'ItemList';
 
 const itemFilter = {
     include: [
@@ -298,20 +298,27 @@ const columns = computed(() => [
     },
 ]);
 </script>
+
 <template>
-    <VnSearchbar
+    <VnSection
-        data-key="ItemList"
+        :data-key="dataKey"
-        :label="t('item.searchbar.label')"
+        :columns="columns"
-        :info="t('You can search by id')"
+        prefix="item"
-    />
+        :array-data-props="{
-    <RightMenu>
+            url: 'Items',
-        <template #right-panel>
+            order: ['isActive DESC', 'name', 'id']
+        }"
+    >
+        <template #rightMenu>
             <ItemListFilter data-key="ItemList" />
         </template>
-    </RightMenu>
+        <template #body>
             <VnTable
                 ref="tableRef"
-        data-key="ItemList"
+                :data-key="dataKey"
+                :columns="columns"
+                :right-search="false"
+                redirect="Item"
                 url="Items/filter"
                 :create="{
                     urlCreate: 'Items',
@@ -321,11 +328,7 @@ const columns = computed(() => [
                         editorFk: entityId,
                     },
                 }"
-        :order="['isActive DESC', 'name', 'id']"
-        :columns="columns"
-        redirect="Item"
                 :is-editable="false"
-        :right-search="false"
                 :filter="itemFilter"
             >
                 <template #column-image="{ row }">
@@ -366,6 +369,8 @@ const columns = computed(() => [
                 </template>
             </VnTable>
         </template>
+    </VnSection>
+</template>
 <style lang="scss" scoped>
 .subName {
     text-transform: uppercase;

src/pages/Item/locale/en.yml

@@ -217,3 +217,5 @@ item:
         minSalesQuantity: 'Cantidad mínima de venta'
         genus: 'Genus'
         specie: 'Specie'
+    search: 'Search item'
+    searchInfo: 'You can search by id'

src/pages/Item/locale/es.yml

@@ -219,3 +219,5 @@ item:
         achieved: 'Conseguido'
         concept: 'Concepto'
         state: 'Estado'
+    search: 'Buscar artículo'
+    searchInfo: 'Puedes buscar por id'

src/router/modules/item.js

@@ -1,25 +1,12 @@
 import { RouterView } from 'vue-router';
 
-export default {
+const itemCard = {
-    path: '/item',
+    name: 'ItemCard',
-    name: 'Item',
+    path: ':id',
+    component: () => import('src/pages/Item/Card/ItemCard.vue'),
+    redirect: { name: 'ItemSummary' },
     meta: {
-        title: 'items',
+        menu: [
-        icon: 'vn:item',
-        moduleName: 'Item',
-        keyBinding: 'a',
-    },
-    component: RouterView,
-    redirect: { name: 'ItemMain' },
-    menus: {
-        main: [
-            'ItemList',
-            'WasteBreakdown',
-            'ItemFixedPrice',
-            'ItemRequest',
-            'ItemTypeList',
-        ],
-        card: [
             'ItemBasicData',
             'ItemLog',
             'ItemDiary',
@@ -29,24 +16,143 @@ export default {
             'ItemBarcode',
             'ItemShelving',
             'ItemLastEntries',
-            'ItemTags',
+        ]
-        ],
     },
     children: [
         {
-            path: '',
+            name: 'ItemSummary',
-            name: 'ItemMain',
+            path: 'summary',
-            component: () => import('src/components/common/VnModule.vue'),
+            meta: {
-            redirect: { name: 'ItemList' },
+                title: 'summary',
+                icon: 'launch',
+            },
+            component: () => import('src/pages/Item/Card/ItemSummary.vue'),
+        },
+        {
+            path: 'basic-data',
+            name: 'ItemBasicData',
+            meta: {
+                title: 'basicData',
+                icon: 'vn:settings',
+            },
+            component: () => import('src/pages/Item/Card/ItemBasicData.vue'),
+        },
+        {
+            path: 'log',
+            name: 'ItemLog',
+            meta: {
+                title: 'log',
+                icon: 'vn:History',
+            },
+            component: () => import('src/pages/Item/Card/ItemLog.vue'),
+        },
+        {
+            path: 'diary',
+            name: 'ItemDiary',
+            meta: {
+                title: 'diary',
+                icon: 'vn:transaction',
+            },
+            component: () => import('src/pages/Item/Card/ItemDiary.vue'),
+        },
+        {
+            path: 'tags',
+            name: 'ItemTags',
+            meta: {
+                title: 'tags',
+                icon: 'vn:tag',
+            },
+            component: () => import('src/pages/Item/Card/ItemTags.vue'),
+        },
+        {
+            path: 'tax',
+            name: 'ItemTax',
+            meta: {
+                title: 'tax',
+                icon: 'vn:tax',
+            },
+            component: () => import('src/pages/Item/Card/ItemTax.vue'),
+        },
+        {
+            path: 'botanical',
+            name: 'ItemBotanical',
+            meta: {
+                title: 'botanical',
+                icon: 'vn:botanical',
+            },
+            component: () => import('src/pages/Item/Card/ItemBotanical.vue'),
+        },
+        {
+            path: 'barcode',
+            name: 'ItemBarcode',
+            meta: {
+                title: 'barcode',
+                icon: 'vn:barcode',
+            },
+            component: () => import('src/pages/Item/Card/ItemBarcode.vue'),
+        },
+        {
+            path: 'shelving',
+            name: 'ItemShelving',
+            meta: {
+                title: 'shelving',
+                icon: 'vn:inventory',
+            },
+            component: () => import('src/pages/Item/Card/ItemShelving.vue'),
+        },
+        {
+            path: 'last-entries',
+            name: 'ItemLastEntries',
+            meta: {
+                title: 'lastEntries',
+                icon: 'vn:regentry',
+            },
+            component: () => import('src/pages/Item/Card/ItemLastEntries.vue'),
+        },
+    ],
+};
+
+export default {
+    name: 'Item',
+    path: '/item',
+    meta: {
+        title: 'items',
+        icon: 'vn:item',
+        moduleName: 'Item',
+        keyBinding: 'a',
+        menu: [
+            'ItemList',
+            'WasteBreakdown',
+            'ItemFixedPrice',
+            'ItemRequest',
+            'ItemTypeList'
+        ],
+    },
+    component: RouterView,
+    redirect: { name: 'ItemMain' },
+    children: [
+        {
+            name: 'ItemMain',            
+            path: '',
+            component: () => import('src/components/common/VnModule.vue'),
+            redirect: { name: 'ItemIndexMain' },
+            children: [
+                {
+                    path:'',
+                    name: 'ItemIndexMain',
+                    redirect: { name: 'ItemList' },
+                    component: () => import('src/pages/Item/ItemList.vue'),
                     children: [
                         {                        
-                    path: 'list',
                             name: 'ItemList',
+                            path: 'list',
                             meta: {
                                 title: 'list',
                                 icon: 'view_list',
                             },
-                    component: () => import('src/pages/Item/ItemList.vue'),
+                        },
+                       itemCard,
+                    ],
                 },
                 {
                     path: 'request',
@@ -99,103 +205,5 @@ export default {
                 },
             ],
         },
-        {
-            name: 'ItemCard',
-            path: ':id',
-            component: () => import('src/pages/Item/Card/ItemCard.vue'),
-            redirect: { name: 'ItemSummary' },
-            children: [
-                {
-                    name: 'ItemSummary',
-                    path: 'summary',
-                    meta: {
-                        title: 'summary',
-                        icon: 'launch',
-                    },
-                    component: () => import('src/pages/Item/Card/ItemSummary.vue'),
-                },
-                {
-                    path: 'basic-data',
-                    name: 'ItemBasicData',
-                    meta: {
-                        title: 'basicData',
-                        icon: 'vn:settings',
-                    },
-                    component: () => import('src/pages/Item/Card/ItemBasicData.vue'),
-                },
-                {
-                    path: 'tags',
-                    name: 'ItemTags',
-                    meta: {
-                        title: 'tags',
-                        icon: 'vn:tags',
-                    },
-                    component: () => import('src/pages/Item/Card/ItemTags.vue'),
-                },
-                {
-                    path: 'last-entries',
-                    name: 'ItemLastEntries',
-                    meta: {
-                        title: 'lastEntries',
-                        icon: 'vn:regentry',
-                    },
-                    component: () => import('src/pages/Item/Card/ItemLastEntries.vue'),
-                },
-                {
-                    path: 'tax',
-                    name: 'ItemTax',
-                    meta: {
-                        title: 'tax',
-                        icon: 'vn:tax',
-                    },
-                    component: () => import('src/pages/Item/Card/ItemTax.vue'),
-                },
-                {
-                    path: 'botanical',
-                    name: 'ItemBotanical',
-                    meta: {
-                        title: 'botanical',
-                        icon: 'local_florist',
-                    },
-                    component: () => import('src/pages/Item/Card/ItemBotanical.vue'),
-                },
-                {
-                    path: 'shelving',
-                    name: 'ItemShelving',
-                    meta: {
-                        title: 'shelving',
-                        icon: 'vn:inventory',
-                    },
-                    component: () => import('src/pages/Item/Card/ItemShelving.vue'),
-                },
-                {
-                    path: 'barcode',
-                    name: 'ItemBarcode',
-                    meta: {
-                        title: 'barcode',
-                        icon: 'vn:barcode',
-                    },
-                    component: () => import('src/pages/Item/Card/ItemBarcode.vue'),
-                },
-                {
-                    path: 'diary',
-                    name: 'ItemDiary',
-                    meta: {
-                        title: 'diary',
-                        icon: 'vn:transaction',
-                    },
-                    component: () => import('src/pages/Item/Card/ItemDiary.vue'),
-                },
-                {
-                    path: 'log',
-                    name: 'ItemLog',
-                    meta: {
-                        title: 'log',
-                        icon: 'vn:History',
-                    },
-                    component: () => import('src/pages/Item/Card/ItemLog.vue'),
-                },
-            ],
-        },
     ],
 };