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

src/i18n/locale/en.yml

@@ -765,6 +765,9 @@ supplier:
     consumption:
         entry: Entry
 travel:
+    search: Search travel
+    searchInfo: You can search by travel id or name
+    id: Id
     travelList:
         tableVisibleColumns:
             ref: Reference

src/i18n/locale/es.yml

@@ -757,6 +757,9 @@ supplier:
     consumption:
         entry: Entrada
 travel:
+    search: Buscar envío
+    searchInfo: Buscar envío por id o nombre
+    id: Id
     travelList:
         tableVisibleColumns:
             ref: Referencia

src/pages/Travel/Card/TravelCard.vue

@@ -1,48 +1,7 @@
 <script setup>
-import VnCard from 'components/common/VnCard.vue';
 import TravelDescriptor from './TravelDescriptor.vue';
-import TravelFilter from '../TravelFilter.vue';
+import VnCardBeta from 'src/components/common/VnCardBeta.vue';
-
-const filter = {
-    fields: [
-        'id',
-        'ref',
-        'shipped',
-        'landed',
-        'totalEntries',
-        'warehouseInFk',
-        'warehouseOutFk',
-        'cargoSupplierFk',
-        'agencyModeFk',
-    ],
-    include: [
-        {
-            relation: 'warehouseIn',
-            scope: {
-                fields: ['name'],
-            },
-        },
-        {
-            relation: 'warehouseOut',
-            scope: {
-                fields: ['name'],
-            },
-        },
-    ],
-};
 </script>
 <template>
-    <VnCard
+    <VnCardBeta data-key="Travel" base-url="Travels" :descriptor="TravelDescriptor" />
-        data-key="Travel"
-        base-url="Travels"
-        search-data-key="TravelList"
-        :filter="filter"
-        :descriptor="TravelDescriptor"
-        :filter-panel="TravelFilter"
-        :searchbar-props="{
-            url: 'Travels/filter',
-            searchUrl: 'table',
-            label: 'Search travel',
-        }"
-    />
 </template>

src/pages/Travel/TravelList.vue

@@ -5,18 +5,18 @@ import { useRouter, useRoute } from 'vue-router';
 import VnTable from 'components/VnTable/VnTable.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import TravelSummary from './Card/TravelSummary.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import { toDate } from 'src/filters';
 import { getDateQBadgeColor } from 'src/composables/getDateQBadgeColor.js';
-import RightMenu from 'src/components/common/RightMenu.vue';
 import TravelFilter from './TravelFilter.vue';
 import VnInputNumber from 'src/components/common/VnInputNumber.vue';
+import VnSection from 'src/components/common/VnSection.vue';
 
 const { viewSummary } = useSummaryDialog();
 const router = useRouter();
 const { t } = useI18n();
 const route = useRoute();
 const tableRef = ref();
+const dataKey = 'TravelList';
 const $props = defineProps({
     id: {
         type: Number,
@@ -189,90 +189,94 @@ const columns = computed(() => [
 </script>
 
 <template>
-    <VnSearchbar
+    <VnSection
-        :info="t('You can search by travel id or name')"
+        :data-key="dataKey"
-        :label="t('Search travel')"
+        :columns="columns"
-        data-key="TravelList"
+        prefix="travel"
-    />
+        :array-data-props="{
-    <RightMenu>
+            url: 'Travels/filter',
-        <template #right-panel>
+            order: ['landed DESC'],
+        }"
+    >
+        <template #rightMenu>
             <TravelFilter data-key="TravelList" />
         </template>
-    </RightMenu>
+        <template #body>
-    <VnTable
+            <VnTable
-        ref="tableRef"
+                ref="tableRef"
-        data-key="TravelList"
+                :data-key="dataKey"
-        url="Travels/filter"
+                :create="{
-        redirect="travel"
+                    urlCreate: 'Travels',
-        :create="{
+                    title: t('Create Travels'),
-            urlCreate: 'Travels',
+                    onDataSaved: ({ id }) => tableRef.redirect(id),
-            title: t('Create Travels'),
+                    formInitialData: {
-            onDataSaved: ({ id }) => tableRef.redirect(id),
+                        editorFk: entityId,
-            formInitialData: {
+                    },
-                editorFk: entityId,
+                }"
-            },
+                :right-search="false"
-        }"
+                :user-params="{ daysOnward: 7 }"
-        :right-search="false"
+
-        :user-params="{ daysOnward: 7 }"
+                redirect="travel"
-        order="landed DESC"
+                :columns="columns"
-        :columns="columns"
+                :is-editable="false"
-        :is-editable="false"
+            >
-    >
+                <template #column-status="{ row }">
-        <template #column-status="{ row }">
+                    <div class="row">
-            <div class="row">
+                        <QIcon v-if="!!row.isRaid" name="vn:net" color="primary">
-                <QIcon v-if="!!row.isRaid" name="vn:net" color="primary">
+                            <QTooltip>
-                    <QTooltip>
+                                {{
-                        {{
+                                    t('globals.raid', {
-                            t('globals.raid', {
+                                        daysInForward: row.daysInForward,
-                                daysInForward: row.daysInForward,
+                                    })
-                            })
+                                }}</QTooltip
-                        }}</QTooltip
+                            >
+                        </QIcon>
+                    </div>
+                </template>
+                <template #column-shipped="{ row }">
+                    <QBadge
+                        text-color="black"
+                        v-if="getDateQBadgeColor(row.shipped)"
+                        :color="getDateQBadgeColor(row.shipped)"
                     >
-                </QIcon>
+                        {{ toDate(row.shipped) }}
-            </div>
+                    </QBadge>
+                    <span v-else>{{ toDate(row.shipped) }}</span>
+                    <QIcon
+                        name="flight_takeoff"
+                        size="sm"
+                        :class="{ 'is-active': row.isDelivered }"
+                    />
+                </template>
+                <template #column-landed="{ row }">
+                    <QBadge
+                        text-color="black"
+                        v-if="getDateQBadgeColor(row.landed)"
+                        :color="getDateQBadgeColor(row.landed)"
+                    >
+                        {{ toDate(row.landed) }}
+                    </QBadge>
+                    <span v-else>{{ toDate(row.landed) }}</span>
+                    <QIcon
+                        name="flight_land"
+                        size="sm"
+                        :class="{ 'is-active': row.isReceived }"
+                    />
+                </template>
+                <template #moreFilterPanel="{ params }">
+                    <VnInputNumber
+                        :label="t('params.scopeDays')"
+                        v-model.number="params.scopeDays"
+                        @keyup.enter="(evt) => handleScopeDays(evt.target.value)"
+                        @remove="handleScopeDays()"
+                        class="q-px-xs q-pr-lg"
+                        filled
+                        dense
+                    />
+                </template>
+            </VnTable>
         </template>
-        <template #column-shipped="{ row }">
+    </VnSection>
-            <QBadge
-                text-color="black"
-                v-if="getDateQBadgeColor(row.shipped)"
-                :color="getDateQBadgeColor(row.shipped)"
-            >
-                {{ toDate(row.shipped) }}
-            </QBadge>
-            <span v-else>{{ toDate(row.shipped) }}</span>
-            <QIcon
-                name="flight_takeoff"
-                size="sm"
-                :class="{ 'is-active': row.isDelivered }"
-            />
-        </template>
-        <template #column-landed="{ row }">
-            <QBadge
-                text-color="black"
-                v-if="getDateQBadgeColor(row.landed)"
-                :color="getDateQBadgeColor(row.landed)"
-            >
-                {{ toDate(row.landed) }}
-            </QBadge>
-            <span v-else>{{ toDate(row.landed) }}</span>
-            <QIcon
-                name="flight_land"
-                size="sm"
-                :class="{ 'is-active': row.isReceived }"
-            />
-        </template>
-        <template #moreFilterPanel="{ params }">
-            <VnInputNumber
-                :label="t('params.scopeDays')"
-                v-model.number="params.scopeDays"
-                @keyup.enter="(evt) => handleScopeDays(evt.target.value)"
-                @remove="handleScopeDays()"
-                class="q-px-xs q-pr-lg"
-                filled
-                dense
-            />
-        </template>
-    </VnTable>
 </template>
 <i18n>
 en:

src/router/modules/travel.js

@@ -1,5 +1,80 @@
 import { RouterView } from 'vue-router';
 
+const travelCard = {
+    name: 'TravelCard',
+    path: ':id',
+    component: () => import('src/pages/Travel/Card/TravelCard.vue'),
+    redirect: { name: 'TravelSummary' },
+    meta: {
+        menu: ['TravelBasicData', 'TravelHistory', 'TravelThermographs'],
+    },
+    children: [
+        {
+            name: 'TravelSummary',
+            path: 'summary',
+            meta: {
+                title: 'summary',
+            },
+            component: () => import('src/pages/Travel/Card/TravelSummary.vue'),
+        },
+        {
+            name: 'TravelBasicData',
+            path: 'basic-data',
+            meta: {
+                title: 'basicData',
+                icon: 'vn:settings',
+            },
+            component: () => import('src/pages/Travel/Card/TravelBasicData.vue'),
+        },
+        {
+            name: 'TravelHistory',
+            path: 'log',
+            meta: {
+                title: 'log',
+                icon: 'history',
+            },
+            component: () => import('src/pages/Travel/Card/TravelLog.vue'),
+        },
+        {
+            name: 'TravelThermographs',
+            path: 'thermographs/:thermographId?',
+            meta: {
+                title: 'thermographs',
+                icon: 'vn:thermometer',
+            },
+            redirect: {
+                name: 'TravelThermographsIndex',
+            },
+            children: [
+                {
+                    name: 'TravelThermographsIndex',
+                    path: 'index',
+                    component: () =>
+                        import('src/pages/Travel/Card/TravelThermographs.vue'),
+                },
+                {
+                    name: 'TravelThermographsCreate',
+                    path: 'create',
+                    props: { viewAction: 'create' },
+                    component: () =>
+                        import(
+                            'src/pages/Travel/Card/TravelThermographsForm.vue'
+                        ),
+                },
+                {
+                    name: 'TravelThermographsEdit',
+                    path: 'edit',
+                    props: { viewAction: 'edit' },
+                    component: () =>
+                        import(
+                            'src/pages/Travel/Card/TravelThermographsForm.vue'
+                        ),
+                },
+            ],
+        },
+    ]
+};
+
 export default {
     path: '/travel',
     name: 'Travel',
@@ -7,28 +82,33 @@ export default {
         title: 'travel',
         icon: 'local_airport',
         moduleName: 'Travel',
+        menu: ['TravelList', 'ExtraCommunity'],
     },
     component: RouterView,
     redirect: { name: 'TravelMain' },
-    menus: {
-        main: ['TravelList', 'ExtraCommunity'],
-        card: ['TravelBasicData', 'TravelHistory', 'TravelThermographs'],
-    },
     children: [
         {
             path: '',
             name: 'TravelMain',
             component: () => import('src/components/common/VnModule.vue'),
-            redirect: { name: 'TravelList' },
+            redirect: { name: 'TravelIndexMain' },
             children: [
                 {
-                    path: 'list',
+                    path: '',
-                    name: 'TravelList',
+                    name: 'TravelIndexMain',
-                    meta: {
+                    redirect: { name: 'TravelList' },
-                        title: 'list',
-                        icon: 'view_list',
-                    },
                     component: () => import('src/pages/Travel/TravelList.vue'),
+                    children: [
+                        {
+                            name: 'TravelList',
+                            path: 'list',
+                            meta: {
+                                title: 'list',
+                                icon: 'view_list',
+                            },
+                        },
+                        travelCard,
+                    ],
                 },
                 {
                     path: 'extra-community',
@@ -50,76 +130,5 @@ export default {
                 },
             ],
         },
-        {
-            name: 'TravelCard',
-            path: ':id',
-            component: () => import('src/pages/Travel/Card/TravelCard.vue'),
-            redirect: { name: 'TravelSummary' },
-            children: [
-                {
-                    name: 'TravelSummary',
-                    path: 'summary',
-                    meta: {
-                        title: 'summary',
-                    },
-                    component: () => import('src/pages/Travel/Card/TravelSummary.vue'),
-                },
-                {
-                    name: 'TravelBasicData',
-                    path: 'basic-data',
-                    meta: {
-                        title: 'basicData',
-                        icon: 'vn:settings',
-                    },
-                    component: () => import('src/pages/Travel/Card/TravelBasicData.vue'),
-                },
-                {
-                    name: 'TravelHistory',
-                    path: 'log',
-                    meta: {
-                        title: 'log',
-                        icon: 'history',
-                    },
-                    component: () => import('src/pages/Travel/Card/TravelLog.vue'),
-                },
-                {
-                    name: 'TravelThermographs',
-                    path: 'thermographs/:thermographId?',
-                    meta: {
-                        title: 'thermographs',
-                        icon: 'vn:thermometer',
-                    },
-                    redirect: {
-                        name: 'TravelThermographsIndex',
-                    },
-                    children: [
-                        {
-                            name: 'TravelThermographsIndex',
-                            path: 'index',
-                            component: () =>
-                                import('src/pages/Travel/Card/TravelThermographs.vue'),
-                        },
-                        {
-                            name: 'TravelThermographsCreate',
-                            path: 'create',
-                            props: { viewAction: 'create' },
-                            component: () =>
-                                import(
-                                    'src/pages/Travel/Card/TravelThermographsForm.vue'
-                                ),
-                        },
-                        {
-                            name: 'TravelThermographsEdit',
-                            path: 'edit',
-                            props: { viewAction: 'edit' },
-                            component: () =>
-                                import(
-                                    'src/pages/Travel/Card/TravelThermographsForm.vue'
-                                ),
-                        },
-                    ],
-                },
-            ],
-        },
     ],
 };