From 9379d3bfd687b9a44b60c525a901267d3183ec04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kv=C3=A1=C4=8Dek?= <michal.kvacek@performax.cz>
Date: Wed, 13 Mar 2024 07:31:53 +0100
Subject: [PATCH] Prusunuti nacitani detailu do prefetche (neverejna cast),
 zruseni resetu breadcrumbs a title pred zmenou routy

---
 .../profile/aircraft/AircraftDetailPage.vue   | 29 ++++++++---------
 src/pages/profile/aircraft/AircraftsPage.vue  |  7 +++--
 .../profile/aircraft/EditAircraftPage.vue     | 27 +++++++++-------
 .../profile/copilot/CopilotDetailPage.vue     | 31 +++++++++++++------
 .../profile/poi/PointsOfInterestPage.vue      |  9 +++---
 src/stores/App.js                             |  4 +--
 6 files changed, 61 insertions(+), 46 deletions(-)

diff --git a/src/pages/profile/aircraft/AircraftDetailPage.vue b/src/pages/profile/aircraft/AircraftDetailPage.vue
index 079317c..9804849 100644
--- a/src/pages/profile/aircraft/AircraftDetailPage.vue
+++ b/src/pages/profile/aircraft/AircraftDetailPage.vue
@@ -2,7 +2,7 @@
 import {useAircraftsStore} from "stores/Aircrafts";
 
 export default {
-  serverPrefetch({currentRoute}) {
+  preFetch({currentRoute}) {
     return useAircraftsStore().fetchDetail(currentRoute.params.id);
   }
 }
@@ -16,7 +16,6 @@ import {confirmObject, successObject} from "src/composables/dialog";
 import {useAppStore} from "stores/App";
 import FlightsList from "components/flights/FlightsList.vue";
 import {storeToRefs} from "pinia";
-import {watch} from "vue";
 import {metaData} from "src/composables/meta";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
 import ContentCard from "components/ContentCard.vue";
@@ -30,20 +29,19 @@ import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
 import CopyLinkButton from "components/inputs/CopyLinkButton.vue";
 import PublishButton from "components/inputs/PublishButton.vue";
+import {onMounted} from "vue";
 
 const aircraftId = parseInt(useRoute().params.id);
 
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
 const {aircraft, isQueryRunning} = storeToRefs(useAircraftsStore());
-watch(() => aircraft.value, (newVal) => {
-  if (!newVal) return;
 
-  useAppStore().setPageTitle(newVal.callSign);
-  useMeta(() => metaData({title: newVal.callSign}));
-  useAppStore().setBreadcrumbs([
-    {label: "Letadla", to: {name: "aircrafts"}},
-    {label: newVal.callSign}
-  ])
-});
+useAppStore().setPageTitle(aircraft.value.callSign);
+useMeta(() => metaData({title: aircraft.value.callSign}));
+useAppStore().setBreadcrumbs([
+  {label: "Letadla", to: {name: "aircrafts"}},
+  {label: aircraft.value.callSign}
+])
 
 const $q = useQuasar();
 const $router = useRouter();
@@ -61,13 +59,12 @@ const togglePublicVisibility = (variables) => toggleVisibility({
   $q, store: useAircraftsStore(), object: aircraft.value, variables
 });
 
+const {isQueryRunning: areFlightsLoading, totalItemsCount, flights} = storeToRefs(useFlightsStore());
 const {filters, loadPage, paginationLimit} = usePagination({fetchFunction: useFlightsStore().fetch});
 filters.value = {aircraftId: aircraftId};
-loadPage(false);
-
-const {isQueryRunning: areFlightsLoading, totalItemsCount, flights} = storeToRefs(useFlightsStore());
-
-const loggedUser = storeToRefs(useLoggedUserStore()).user;
+onMounted(() => {
+  loadPage(false);
+})
 </script>
 
 <template>
diff --git a/src/pages/profile/aircraft/AircraftsPage.vue b/src/pages/profile/aircraft/AircraftsPage.vue
index 3aad23f..34e22e9 100644
--- a/src/pages/profile/aircraft/AircraftsPage.vue
+++ b/src/pages/profile/aircraft/AircraftsPage.vue
@@ -10,10 +10,11 @@ import {usePagination} from "src/composables/pagination";
 
 useAppStore().setPageTitle("Letadla");
 
-const {filters, loadPage, paginationLimit} = usePagination({fetchFunction: useAircraftsStore().fetch});
-loadPage(false);
-
 const {aircrafts, totalItemsCount, isQueryRunning} = storeToRefs(useAircraftsStore());
+const {filters, loadPage, paginationLimit} = usePagination({fetchFunction: useAircraftsStore().fetch});
+onMounted(() => {
+  loadPage(false);
+})
 </script>
 
 <template>
diff --git a/src/pages/profile/aircraft/EditAircraftPage.vue b/src/pages/profile/aircraft/EditAircraftPage.vue
index 5c38704..3c87435 100644
--- a/src/pages/profile/aircraft/EditAircraftPage.vue
+++ b/src/pages/profile/aircraft/EditAircraftPage.vue
@@ -1,6 +1,15 @@
+<script>
+import {useAircraftsStore} from "stores/Aircrafts";
+
+export default {
+  preFetch({currentRoute}) {
+    return useAircraftsStore().fetchDetail(currentRoute.params.id);
+  }
+}
+</script>
+
 <script setup>
 import AircraftForm from "components/aircrafts/AircraftForm.vue";
-import {useAircraftsStore} from "stores/Aircrafts";
 import {useRoute, useRouter} from "vue-router";
 import {useQuasar} from "quasar";
 import {computed, onMounted} from "vue";
@@ -22,16 +31,12 @@ const loggedUser = storeToRefs(useLoggedUserStore()).user;
 
 const {aircraft, isMutationRunning, isQueryRunning} = storeToRefs(useAircraftsStore());
 
-onMounted(() => {
-  useAircraftsStore().fetchDetail(aircraftId).then(() => {
-    useAppStore().setPageTitle(`${aircraft.value.callSign} - editace`);
-    useAppStore().setBreadcrumbs([
-      {to: {name: "aircrafts"}, label: "Letadla"},
-      {to: {name: "aircraftDetail", params: {id: aircraftId}}, label: aircraft.value.callSign},
-      {label: "Editace"}
-    ])
-  });
-});
+useAppStore().setPageTitle(`${aircraft.value.callSign} - editace`);
+useAppStore().setBreadcrumbs([
+  {to: {name: "aircrafts"}, label: "Letadla"},
+  {to: {name: "aircraftDetail", params: {id: aircraftId}}, label: aircraft.value.callSign},
+  {label: "Editace"}
+])
 
 const handleSave = (formData) => {
   useAircraftsStore().update(aircraftId, formData).then(() => {
diff --git a/src/pages/profile/copilot/CopilotDetailPage.vue b/src/pages/profile/copilot/CopilotDetailPage.vue
index 90c30ad..016dd95 100644
--- a/src/pages/profile/copilot/CopilotDetailPage.vue
+++ b/src/pages/profile/copilot/CopilotDetailPage.vue
@@ -1,9 +1,18 @@
+<script>
+import {useCopilotsStore} from "stores/Copilots";
+
+export default {
+  preFetch({currentRoute}) {
+    return useCopilotsStore().fetchDetail(currentRoute.params.id);
+  }
+}
+</script>
+
 <script setup>
 import {useRoute} from "vue-router";
 import CopilotDetailSkeleton from "components/copilots/skeletons/CopilotDetailSkeleton.vue";
 import {useAppStore} from "stores/App";
 import FlightsList from "components/flights/FlightsList.vue";
-import {useCopilotsStore} from "stores/Copilots";
 import {storeToRefs} from "pinia";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
 import ContentCard from "components/ContentCard.vue";
@@ -15,15 +24,16 @@ import {useLoggedUserStore} from "stores/LoggedUser";
 import PublishButton from "components/inputs/PublishButton.vue";
 import CopyLinkButton from "components/inputs/CopyLinkButton.vue";
 import {toggleVisibility} from "src/composables/form/formHandling";
+import {onMounted} from "vue";
+
+const {isQueryRunning, copilot} = storeToRefs(useCopilotsStore());
 
 const copilotId = parseInt(useRoute().params.id);
-useCopilotsStore().fetchDetail(copilotId).then(() => {
-  useAppStore().setPageTitle(copilot.value.name);
-  useAppStore().setBreadcrumbs([
-    {to: {name: "copilots"}, label: "Kopiloti"},
-    {label: copilot.value.name}
-  ])
-});
+useAppStore().setPageTitle(copilot.value.name);
+useAppStore().setBreadcrumbs([
+  {to: {name: "copilots"}, label: "Kopiloti"},
+  {label: copilot.value.name}
+])
 
 const $q = useQuasar();
 const togglePublicVisibility = (variables) => toggleVisibility({
@@ -32,10 +42,11 @@ const togglePublicVisibility = (variables) => toggleVisibility({
 
 const {filters, loadPage, paginationLimit} = usePagination({fetchFunction: useFlightsStore().fetch});
 filters.value = {copilotId: copilotId};
-loadPage(false);
+onMounted(() => {
+  loadPage(false);
+});
 
 const {isQueryRunning: areFlightsLoading, totalItemsCount, flights} = storeToRefs(useFlightsStore());
-const {isQueryRunning, copilot} = storeToRefs(useCopilotsStore());
 const loggedUser = storeToRefs(useLoggedUserStore()).user;
 </script>
 
diff --git a/src/pages/profile/poi/PointsOfInterestPage.vue b/src/pages/profile/poi/PointsOfInterestPage.vue
index b8f73d6..eda6d36 100644
--- a/src/pages/profile/poi/PointsOfInterestPage.vue
+++ b/src/pages/profile/poi/PointsOfInterestPage.vue
@@ -8,15 +8,16 @@ import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 import {storeToRefs} from "pinia";
 import {usePagination} from "src/composables/pagination";
 import ListFilters from "components/ListFilters.vue";
+import {onMounted} from "vue";
 
 useAppStore().setPageTitle("Zajímavá místa");
 
-
 const {filters, loadPage, paginationLimit, paginationOffset} = usePagination({
-  fetchFunction: usePointsOfInterestStore().fetch,
-  itemsPerPage: 1 // nefunguje
+  fetchFunction: usePointsOfInterestStore().fetch
 });
-loadPage(false);
+onMounted(() => {
+  loadPage(false);
+})
 const handleFiltersChanged = (newFilters) => {
   paginationOffset.value = 0;
   filters.value = newFilters;
diff --git a/src/stores/App.js b/src/stores/App.js
index f610e7b..b9051ae 100644
--- a/src/stores/App.js
+++ b/src/stores/App.js
@@ -7,9 +7,9 @@ export const useAppStore = defineStore('App', () => {
   const appStatus = ref(200);
 
   const resetBeforeRouteChange = () => {
-    pageTitle.value = null;
+    // pageTitle.value = null;
     // appStatus.value = 200;  // tohle dela problem pri renderu 404 na serveru
-    breadcrumbs.value = null;
+    // breadcrumbs.value = null;
   };
 
   const setPageTitle = (value) => {