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,73 +298,78 @@ 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
+            <VnTable
-        ref="tableRef"
+                ref="tableRef"
-        data-key="ItemList"
+                :data-key="dataKey"
-        url="Items/filter"
+                :columns="columns"
-        :create="{
+                :right-search="false"
-            urlCreate: 'Items',
+                redirect="Item"
-            title: t('Create Item'),
+                url="Items/filter"
-            onDataSaved: () => tableRef.redirect(),
+                :create="{
-            formInitialData: {
+                    urlCreate: 'Items',
-                editorFk: entityId,
+                    title: t('Create Item'),
-            },
+                    onDataSaved: () => tableRef.redirect(),
-        }"
+                    formInitialData: {
-        :order="['isActive DESC', 'name', 'id']"
+                        editorFk: entityId,
-        :columns="columns"
+                    },
-        redirect="Item"
+                }"
-        :is-editable="false"
+                :is-editable="false"
-        :right-search="false"
+                :filter="itemFilter"
-        :filter="itemFilter"
+            >
-    >
+                <template #column-image="{ row }">
-        <template #column-image="{ row }">
+                    <VnImg
-            <VnImg
+                        :id="row?.id"
-                :id="row?.id"
+                        zoom-resolution="1600x900"
-                zoom-resolution="1600x900"
+                        :zoom="true"
-                :zoom="true"
+                        class="rounded"
-                class="rounded"
+                    />
-            />
+                </template>
+                <template #column-id="{ row }">
+                    <span class="link" @click.stop>
+                        {{ row.id }}
+                        <ItemDescriptorProxy :id="row.id" />
+                    </span>
+                </template>
+                <template #column-typeName="{ row }">
+                    <span class="link" @click.stop>
+                        {{ row.typeName }}
+                        {{ row.typeFk }}
+                        <ItemTypeDescriptorProxy :id="row.typeFk" />
+                    </span>
+                </template>
+                <template #column-userName="{ row }">
+                    <span class="link" @click.stop>
+                        {{ row.userName }}
+                        <WorkerDescriptorProxy :id="row.buyerFk" />
+                    </span>
+                </template>
+                <template #column-description="{ row }">
+                    <div class="row column full-width justify-between items-start">
+                        {{ row?.name }}
+                        <div v-if="row?.subName" class="subName">
+                            {{ row?.subName.toUpperCase() }}
+                        </div>
+                    </div>
+                    <FetchedTags :item="row" :columns="3" />
+                </template>
+            </VnTable>
         </template>
-        <template #column-id="{ row }">
+    </VnSection>
-            <span class="link" @click.stop>
-                {{ row.id }}
-                <ItemDescriptorProxy :id="row.id" />
-            </span>
-        </template>
-        <template #column-typeName="{ row }">
-            <span class="link" @click.stop>
-                {{ row.typeName }}
-                {{ row.typeFk }}
-                <ItemTypeDescriptorProxy :id="row.typeFk" />
-            </span>
-        </template>
-        <template #column-userName="{ row }">
-            <span class="link" @click.stop>
-                {{ row.userName }}
-                <WorkerDescriptorProxy :id="row.buyerFk" />
-            </span>
-        </template>
-        <template #column-description="{ row }">
-            <div class="row column full-width justify-between items-start">
-                {{ row?.name }}
-                <div v-if="row?.subName" class="subName">
-                    {{ row?.subName.toUpperCase() }}
-                </div>
-            </div>
-            <FetchedTags :item="row" :columns="3" />
-        </template>
-    </VnTable>
 </template>
 <style lang="scss" scoped>
 .subName {

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: [
         {
+            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: '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: '',
-            name: 'ItemMain',
             component: () => import('src/components/common/VnModule.vue'),
-            redirect: { name: 'ItemList' },
+            redirect: { name: 'ItemIndexMain' },
             children: [
                 {
-                    path: 'list',
+                    path:'',
-                    name: 'ItemList',
+                    name: 'ItemIndexMain',
-                    meta: {
+                    redirect: { name: 'ItemList' },
-                        title: 'list',
-                        icon: 'view_list',
-                    },
                     component: () => import('src/pages/Item/ItemList.vue'),
+                    children: [
+                        {                        
+                            name: 'ItemList',
+                            path: 'list',
+                            meta: {
+                                title: 'list',
+                                icon: 'view_list',
+                            },
+                        },
+                       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'),
-                },
-            ],
-        },
     ],
 };