feat: refs #8087 reactive data

src/pages/Travel/Card/TravelBasicData.vue

@@ -21,12 +21,7 @@ const agenciesOptions = ref([]);
         @on-fetch="(data) => (agenciesOptions = data)"
         auto-load
     />
-    <FormModel
+    <FormModel :url-update="`Travels/${route.params.id}`" model="Travel" auto-load>
-        :url="`Travels/${route.params.id}`"
-        :url-update="`Travels/${route.params.id}`"
-        model="Travel"
-        auto-load
-    >
         <template #form="{ data }">
             <VnRow>
                 <VnInput v-model="data.ref" :label="t('travel.basicData.reference')" />

src/pages/Travel/Card/TravelCard.vue

@@ -1,34 +1,7 @@
 <script setup>
 import VnCard from 'components/common/VnCard.vue';
 import TravelDescriptor from './TravelDescriptor.vue';
-
+import filter from './TravelFilter.js';
-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

src/pages/Travel/Card/TravelDescriptor.vue

@@ -7,7 +7,7 @@ import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
 import TravelDescriptorMenuItems from './TravelDescriptorMenuItems.vue';
-
+import filter from './TravelFilter.js';
 import { toDate } from 'src/filters';
 
 const $props = defineProps({
@@ -21,36 +21,6 @@ const $props = defineProps({
 const route = useRoute();
 const { t } = useI18n();
 
-const filter = {
-    fields: [
-        'id',
-        'ref',
-        'shipped',
-        'landed',
-        'totalEntries',
-        'warehouseInFk',
-        'warehouseOutFk',
-        'cargoSupplierFk',
-        'agencyModeFk',
-        'isRaid',
-        'daysInForward',
-    ],
-    include: [
-        {
-            relation: 'warehouseIn',
-            scope: {
-                fields: ['name'],
-            },
-        },
-        {
-            relation: 'warehouseOut',
-            scope: {
-                fields: ['name'],
-            },
-        },
-    ],
-};
-
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
@@ -66,15 +36,15 @@ const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.
         :title="data.title"
         :subtitle="data.subtitle"
         :filter="filter"
-        data-key="travelData"
+        data-key="Travel"
         @on-fetch="setData"
     >
         <template #menu="{ entity }">
             <TravelDescriptorMenuItems :travel="entity" />
         </template>
         <template #body="{ entity }">
-            <VnLv :label="t('globals.wareHouseIn')" :value="entity.warehouseIn.name" />
+            <VnLv :label="t('globals.wareHouseIn')" :value="entity.warehouseIn?.name" />
-            <VnLv :label="t('globals.wareHouseOut')" :value="entity.warehouseOut.name" />
+            <VnLv :label="t('globals.wareHouseOut')" :value="entity.warehouseOut?.name" />
             <VnLv :label="t('globals.shipped')" :value="toDate(entity.shipped)" />
             <VnLv :label="t('globals.landed')" :value="toDate(entity.landed)" />
             <VnLv :label="t('globals.totalEntries')" :value="entity.totalEntries" />

src/pages/Travel/Card/TravelFilter.js

@@ -0,0 +1,29 @@
+export default {
+    fields: [
+        'id',
+        'ref',
+        'shipped',
+        'landed',
+        'totalEntries',
+        'warehouseInFk',
+        'warehouseOutFk',
+        'cargoSupplierFk',
+        'agencyModeFk',
+        'isRaid',
+        'daysInForward',
+    ],
+    include: [
+        {
+            relation: 'warehouseIn',
+            scope: {
+                fields: ['name'],
+            },
+        },
+        {
+            relation: 'warehouseOut',
+            scope: {
+                fields: ['name'],
+            },
+        },
+    ],
+};