refactor: refs #8322 changed Wagon component to use VnSection/VnCardBeta

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,79 +94,90 @@ async function remove(row) {
 
 <template>
     <QPage class="column items-center q-pa-md">
-        <VnTable
-            ref="tableRef"
-            data-key="WagonList"
-            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: {},
-            }"
-        >
-            <template #more-create-dialog="{ data }">
-                <VnInput
-                    filled
-                    v-model="data.label"
-                    :label="t('wagon.create.label')"
-                    type="number"
-                    min="0"
-                    :rules="[(val) => !!val || t('wagon.warnings.labelNotEmpty')]"
-                />
-                <VnInput
-                    filled
-                    v-model="data.plate"
-                    :label="t('wagon.list.plate')"
-                    :rules="[(val) => !!val || t('wagon.warnings.plateNotEmpty')]"
-                />
-                <VnInput
-                    filled
-                    v-model="data.volume"
-                    :label="t('wagon.list.volume')"
-                    type="number"
-                    min="0"
-                    :rules="[(val) => !!val || t('wagon.warnings.volumeNotEmpty')]"
-                />
-                <VnSelect
-                    url="WagonTypes"
-                    filled
-                    v-model="data.typeFk"
-                    use-input
-                    fill-input
-                    hide-selected
-                    input-debounce="0"
-                    option-label="name"
-                    option-value="id"
-                    emit-value
-                    map-options
-                    :label="t('globals.type')"
-                    :options="filteredWagonTypes"
-                    :rules="[(val) => !!val || t('wagon.warnings.typeNotEmpty')]"
-                    @filter="filterType"
-                >
-                    <template v-if="data.typeFk" #append>
-                        <QIcon
-                            name="cancel"
-                            @click.stop.prevent="data.typeFk = null"
-                            class="cursor-pointer"
-                        />
-                    </template>
-                    <template #no-option>
-                        <QItem>
-                            <QItemSection class="text-grey">
-                                {{ t('wagon.warnings.noData') }}
-                            </QItemSection>
-                        </QItem>
-                    </template>
-                </VnSelect>
-            </template>
-        </VnTable>
+        <VnSection
+        :data-key="dataKey"
+        :columns="columns"
+        prefix="card"
+        :array-data-props="{
+            url: 'Wagons',
+            exprBuilder,
+        }"
+    >
+        <template #body>
+            <VnTable
+                ref="tableRef"
+                :data-key="dataKey"
+                :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
+                        filled
+                        v-model="data.label"
+                        :label="t('wagon.create.label')"
+                        type="number"
+                        min="0"
+                        :rules="[(val) => !!val || t('wagon.warnings.labelNotEmpty')]"
+                    />
+                    <VnInput
+                        filled
+                        v-model="data.plate"
+                        :label="t('wagon.list.plate')"
+                        :rules="[(val) => !!val || t('wagon.warnings.plateNotEmpty')]"
+                    />
+                    <VnInput
+                        filled
+                        v-model="data.volume"
+                        :label="t('wagon.list.volume')"
+                        type="number"
+                        min="0"
+                        :rules="[(val) => !!val || t('wagon.warnings.volumeNotEmpty')]"
+                    />
+                    <VnSelect
+                        url="WagonTypes"
+                        filled
+                        v-model="data.typeFk"
+                        use-input
+                        fill-input
+                        hide-selected
+                        input-debounce="0"
+                        option-label="name"
+                        option-value="id"
+                        emit-value
+                        map-options
+                        :label="t('globals.type')"
+                        :options="filteredWagonTypes"
+                        :rules="[(val) => !!val || t('wagon.warnings.typeNotEmpty')]"
+                        @filter="filterType"
+                    >
+                        <template v-if="data.typeFk" #append>
+                            <QIcon
+                                name="cancel"
+                                @click.stop.prevent="data.typeFk = null"
+                                class="cursor-pointer"
+                            />
+                        </template>
+                        <template #no-option>
+                            <QItem>
+                                <QItemSection class="text-grey">
+                                    {{ t('wagon.warnings.noData') }}
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </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: 'list',
-                    name: 'WagonList',
-                    meta: {
-                        title: 'list',
-                        icon: 'vn:trolley',
-                    },
+                    path: '',
+                    name: 'WagonIndexMain',
+                    redirect: { name: 'WagonList' },
                     component: () => import('src/pages/Wagon/WagonList.vue'),
+                    children: [
+                        {
+                            name: 'WagonList',
+                            path: 'list',
+                            meta: {
+                                title: 'list',
+                                icon: 'view_list',
+                            },
+                        },
+                        
+                    ]
                 },
                 {
                     path: 'create',