In TravelList show warehouses name instead warehouseFk

src/pages/Travel/TravelList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
@@ -9,6 +9,7 @@ import CardList from 'src/components/ui/CardList.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import TravelSummaryDialog from './Card/TravelSummaryDialog.vue';
 import TravelFilter from './TravelFilter.vue';
+import FetchData from 'components/FetchData.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters/index';
@@ -18,6 +19,8 @@ const quasar = useQuasar();
 const { t } = useI18n();
 const stateStore = useStateStore();
 
+const warehouses = ref([]);
+
 const navigateToTravelId = (id) => {
     router.push({ path: `/travel/${id}` });
 };
@@ -35,6 +38,10 @@ const redirectCreateEntryView = (travelData) => {
     router.push({ name: 'EntryCreate', query: { travelFk: travelData.id } });
 };
 
+const getWarehouseName = (id) => {
+    return warehouses.value.find((warehouse) => warehouse.id === id).name;
+};
+
 const viewSummary = (id) => {
     quasar.dialog({
         component: TravelSummaryDialog,
@@ -50,6 +57,13 @@ onMounted(async () => {
 </script>
 
 <template>
+    <FetchData
+        url="Warehouses"
+        :filter="{ fields: ['id', 'name'] }"
+        order="name"
+        @on-fetch="(data) => (warehouses = data)"
+        auto-load
+    />
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
             <TravelFilter data-key="TravelList" />
@@ -77,8 +91,9 @@ onMounted(async () => {
                                 :value="row.agencyModeName"
                             />
                             <VnLv
+                                v-if="warehouses.length > 0"
                                 :label="t('globals.wareHouseOut')"
-                                :value="row.warehouseOutFk"
+                                :value="getWarehouseName(row.warehouseOutFk)"
                             />
                             <VnLv
                                 :label="t('globals.shipped')"
@@ -89,10 +104,10 @@ onMounted(async () => {
                                 :value="toDate(row.landed)"
                             />
                             <VnLv
+                                v-if="warehouses.length > 0"
                                 :label="t('globals.wareHouseIn')"
-                                :value="row.warehouseInFk"
+                                :value="getWarehouseName(row.warehouseInFk)"
                             />
-
                             <VnLv
                                 :label="t('globals.totalEntries')"
                                 :value="row.totalEntries"
@@ -143,9 +158,6 @@ onMounted(async () => {
 en:
     addEntry: Add entry
 
-
 es:
     addEntry: Añadir entrada
-
-
 </i18n>