Merge pull request 'refactor: #8322 changed Travel component to use VnSection/VnCardBeta' (!1220) from 8322-travel into dev

Reviewed-on: #1220
Reviewed-by: Alex Moreno <alexm@verdnatura.es>

src/components/common/VnCardBeta.vue

@@ -12,6 +12,7 @@ const props = defineProps({
     baseUrl: { type: String, default: undefined },
     customUrl: { type: String, default: undefined },
     filter: { type: Object, default: () => {} },
+    userFilter: { type: Object, default: () => {} },
     descriptor: { type: Object, required: true },
     filterPanel: { type: Object, default: undefined },
     searchDataKey: { type: String, default: undefined },
@@ -32,6 +33,7 @@ const url = computed(() => {
 const arrayData = useArrayData(props.dataKey, {
     url: url.value,
     filter: props.filter,
+    userFilter: props.userFilter,
 });
 
 onBeforeMount(async () => {

src/i18n/locale/en.yml

@@ -683,6 +683,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

@@ -680,6 +680,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,9 +1,8 @@
 <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 = {
+const userFilter = {
     fields: [
         'id',
         'ref',
@@ -35,17 +34,10 @@ const filter = {
 };
 </script>
 <template>
-    <VnCard
+    <VnCardBeta
         data-key="Travel"
         base-url="Travels"
-        search-data-key="TravelList"
-        :filter="filter"
         :descriptor="TravelDescriptor"
-        :filter-panel="TravelFilter"
+        :user-filter="userFilter"
-        :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,
@@ -196,21 +196,23 @@ 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'],
+            userParams: { daysOnward: 7 },
+        }"
+    >
+        <template #advanced-menu>
             <TravelFilter data-key="TravelList" />
         </template>
-    </RightMenu>
+        <template #body>
             <VnTable
                 ref="tableRef"
-        data-key="TravelList"
+                :data-key="dataKey"
-        url="Travels/filter"
-        redirect="travel"
                 :create="{
                     urlCreate: 'Travels',
                     title: t('Create Travels'),
@@ -220,8 +222,7 @@ const columns = computed(() => [
                     },
                 }"
                 :right-search="false"
-        :user-params="{ daysOnward: 7 }"
+                redirect="travel"
-        order="landed DESC"
                 :columns="columns"
                 :is-editable="false"
             >
@@ -281,6 +282,8 @@ const columns = computed(() => [
                 </template>
             </VnTable>
         </template>
+    </VnSection>
+</template>
 <i18n>
 en:
     Add entry: Add entry

src/router/modules/travel.js

@@ -1,60 +1,13 @@
 import { RouterView } from 'vue-router';
 
-export default {
+const travelCard = {
-    path: '/travel',
-    name: 'Travel',
-    meta: {
-        title: 'travel',
-        icon: 'local_airport',
-        moduleName: 'Travel',
-    },
-    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' },
-            children: [
-                {
-                    path: 'list',
-                    name: 'TravelList',
-                    meta: {
-                        title: 'list',
-                        icon: 'view_list',
-                    },
-                    component: () => import('src/pages/Travel/TravelList.vue'),
-                },
-                {
-                    path: 'extra-community',
-                    name: 'ExtraCommunity',
-                    meta: {
-                        title: 'extraCommunity',
-                        icon: 'vn:shipment',
-                    },
-                    component: () => import('src/pages/Travel/ExtraCommunity.vue'),
-                },
-                {
-                    path: 'create',
-                    name: 'TravelCreate',
-                    meta: {
-                        title: 'travelCreate',
-                        icon: 'add',
-                    },
-                    component: () => import('src/pages/Travel/TravelCreate.vue'),
-                },
-            ],
-        },
-        {
     name: 'TravelCard',
     path: ':id',
     component: () => import('src/pages/Travel/Card/TravelCard.vue'),
     redirect: { name: 'TravelSummary' },
+    meta: {
+        menu: ['TravelBasicData', 'TravelHistory', 'TravelThermographs'],
+    },
     children: [
         {
             name: 'TravelSummary',
@@ -119,6 +72,62 @@ export default {
                 },
             ],
         },
+    ]
+};
+
+export default {
+    path: '/travel',
+    name: 'Travel',
+    meta: {
+        title: 'travel',
+        icon: 'local_airport',
+        moduleName: 'Travel',
+        menu: ['TravelList', 'ExtraCommunity'],
+    },
+    component: RouterView,
+    redirect: { name: 'TravelMain' },
+    children: [
+        {
+            path: '',
+            name: 'TravelMain',
+            component: () => import('src/components/common/VnModule.vue'),
+            redirect: { name: 'TravelIndexMain' },
+            children: [
+                {
+                    path: '',
+                    name: 'TravelIndexMain',
+                    redirect: { name: 'TravelList' },
+                    component: () => import('src/pages/Travel/TravelList.vue'),
+                    children: [
+                        {
+                            name: 'TravelList',
+                            path: 'list',
+                            meta: {
+                                title: 'list',
+                                icon: 'view_list',
+                            },
+                        },
+                        travelCard,
+                    ],
+                },
+                {
+                    path: 'extra-community',
+                    name: 'ExtraCommunity',
+                    meta: {
+                        title: 'extraCommunity',
+                        icon: 'vn:shipment',
+                    },
+                    component: () => import('src/pages/Travel/ExtraCommunity.vue'),
+                },
+                {
+                    path: 'create',
+                    name: 'TravelCreate',
+                    meta: {
+                        title: 'travelCreate',
+                        icon: 'add',
+                    },
+                    component: () => import('src/pages/Travel/TravelCreate.vue'),
+                },
             ],
         },
     ],