src/pages/Wagon/Card/WagonCard.vue

@@ -1,6 +1,6 @@
 <script setup>
-import VnCard from 'components/common/VnCard.vue';
+import VnCardBeta from 'src/components/common/VnCardBeta.vue';
 </script>
 <template>
-    <VnCard data-key="Wagon" base-url="Wagons" />
+    <VnCardBeta data-key="Wagon" base-url="Wagons" :descriptor="WagonDescriptor" />
 </template>

src/pages/Wagon/WagonList.vue

@@ -8,6 +8,7 @@ import VnTable from 'src/components/VnTable/VnTable.vue';
 import { computed, ref } from 'vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
+import VnSection from 'src/components/common/VnSection.vue';
 
 const quasar = useQuasar();
 const arrayData = useArrayData('WagonList');
@@ -15,6 +16,7 @@ const store = arrayData.store;
 const router = useRouter();
 const { t } = useI18n();
 const tableRef = ref();
+const dataKey = 'WagonList';
 const filter = {
     include: {
         relation: 'type',
@@ -92,22 +94,31 @@ async function remove(row) {
 
 <template>
     <QPage class="column items-center q-pa-md">
+        <VnSection
+        :data-key="dataKey"
+        :columns="columns"
+        prefix="card"
+        :array-data-props="{
+            url: 'Wagons',
+            exprBuilder,
+        }"
+    >
+        <template #body>
             <VnTable
                 ref="tableRef"
-            data-key="WagonList"
+                :data-key="dataKey"
-            url="Wagons"
-            :filter="filter"
-            :columns="columns"
-            order="id DESC"
-            :column-search="false"
-            :default-mode="'card'"
-            :disable-option="{ table: true }"
                 :create="{
                     urlCreate: 'Wagons',
                     title: t('Create new wagon'),
                     onDataSaved: () => tableRef.reload(),
                     formInitialData: {},
                 }"
+                :filter="filter"
+                :columns="columns"
+                order="id DESC"
+                :column-search="false"
+                :default-mode="'card'"
+                :disable-option="{ table: true }"
             >
                 <template #more-create-dialog="{ data }">
                     <VnInput
@@ -166,6 +177,8 @@ async function remove(row) {
                     </VnSelect>
                 </template>
             </VnTable>
+        </template>
+    </VnSection>
     </QPage>
 </template>
 

src/router/modules/wagon.js

@@ -1,34 +1,55 @@
 import { RouterView } from 'vue-router';
 
+const wagonCard = {
+    
+    name: 'WagonCard',
+    path: ':id',
+    component: () => import('src/pages/Ticket/Card/WagonCard.vue'),
+    redirect: { name: 'WagonSummary' },
+    meta: {
+        //main: ['WagonList', 'WagonTypeList', 'WagonCounter', 'WagonTray'],
+        menu: [],
+    },
+    children: [
+        {},
+    ],
+};
+
 export default {
-    path: '/wagon',
     name: 'Wagon',
+    path: '/wagon',
     meta: {
         title: 'wagons',
         icon: 'vn:trolley',
         moduleName: 'Wagon',
+        keyBinding: 'w',
+        menu: ['WagonList', 'WagonTypeList', 'WagonCounter', 'WagonTray'],
     },
     component: RouterView,
     redirect: { name: 'WagonMain' },
-    menus: {
-        main: ['WagonList', 'WagonTypeList', 'WagonCounter', 'WagonTray'],
-        card: [],
-    },
     children: [
         {
-            path: '/wagon',
+            path: '',
             name: 'WagonMain',
             component: () => import('src/components/common/VnModule.vue'),
-            redirect: { name: 'WagonList' },
+            redirect: { name: 'WagonIndexMain' },
+            children: [
+                {
+                    path: '',
+                    name: 'WagonIndexMain',
+                    redirect: { name: 'WagonList' },
+                    component: () => import('src/pages/Wagon/WagonList.vue'),
                     children: [
                         {
-                    path: 'list',
                             name: 'WagonList',
+                            path: 'list',
                             meta: {
                                 title: 'list',
-                        icon: 'vn:trolley',
+                                icon: 'view_list',
                             },
-                    component: () => import('src/pages/Wagon/WagonList.vue'),
+                        },
+                        
+                    ]
                 },
                 {
                     path: 'create',