uprava breadcrumbs v privatni casti, nasazeni prefetche

src/pages/profile/poi/EditPointOfInterestPage.vue

@@ -1,8 +1,17 @@
+<script>
+import {usePointsOfInterestStore} from "stores/PointsOfInterest";
+
+export default {
+  preFetch({currentRoute}) {
+    return usePointsOfInterestStore().fetchDetail(currentRoute.params.id);
+  }
+}
+</script>
+
 <script setup>
 import POIEditSkeleton from "components/poi/skeletons/POIEditSkeleton.vue";
-import {computed, onMounted} from "vue";
+import {computed} from "vue";
 import {useRoute, useRouter} from "vue-router";
-import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 import {useAppStore} from "stores/App";
 import {useQuasar} from "quasar";
 import {successObject} from "src/composables/dialog";
@@ -11,30 +20,25 @@ import {storeToRefs} from "pinia";
 import POIForm from "components/poi/POIForm.vue";
 import {useLoggedUserStore} from "stores/LoggedUser";
 import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
-import PhotoEditorSkeleton from "components/photos/skeletons/PhotoEditorSkeleton.vue";
 import PhotosEditorList from "components/photos/PhotosEditorList.vue";
 import CommonEditSwitcher from "components/navigation/CommonEditSwitcher.vue";
 import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 
 const poiId = parseInt(useRoute().params.id);
+const {isQueryRunning, pointOfInterest, isMutationRunning} = storeToRefs(usePointsOfInterestStore());
 
-usePointsOfInterestStore().fetchDetail(poiId).then((p) => {
-  if (!p) return;
-
-  useAppStore().setPageTitle(`${p.name} - editace`);
-  useAppStore().setBreadcrumbs([
-    {to: {name: "poi"}, label: "Zajímavá místa"},
-    {to: {name: "poiDetail", params: {id: poiId}}, label: p.name},
-    {label: "Editace"},
-  ]);
-});
+useAppStore().setPageTitle(`${pointOfInterest.value.name} - editace`);
+useAppStore().setBreadcrumbs([
+  {to: {name: "poi"}, label: "Zajímavá místa"},
+  {to: {name: "poiDetail", params: {id: poiId}}, label: pointOfInterest.value.name},
+  {label: "Editace"},
+]);
 
 usePointsOfInterestTypeStore().fetch();
 
 const poiTypes = storeToRefs(usePointsOfInterestTypeStore()).types;
 const loggedUser = storeToRefs(useLoggedUserStore()).user;
-const {isQueryRunning, pointOfInterest, isMutationRunning} = storeToRefs(usePointsOfInterestStore());
 
 const $q = useQuasar();
 const router = useRouter();
@@ -56,8 +60,8 @@ const formStep = computed(() => useRoute().params.step || "info");
 
 <template>
   <AccessDeniedBanner
-      v-if="pointOfInterest && !isQueryRunning && pointOfInterest.createdById !== loggedUser?.id"
-      :route-back="{name: 'poiDetail', params: {id: poiId}}"
+    v-if="pointOfInterest && !isQueryRunning && pointOfInterest.createdById !== loggedUser?.id"
+    :route-back="{name: 'poiDetail', params: {id: poiId}}"
   />
 
   <template v-else>
@@ -74,11 +78,11 @@ const formStep = computed(() => useRoute().params.step || "info");
         Toto místo není označené na žádné fotografii.
       </BasicInfoBanner>
       <PhotosEditorList
-          v-else
-          :photos="pointOfInterest.photos"
-          :title-photo="pointOfInterest.titlePhoto"
-          :show-actions="false"
-          @set-title-photo="setTitlePhoto"
+        v-else
+        :photos="pointOfInterest.photos"
+        :title-photo="pointOfInterest.titlePhoto"
+        :show-actions="false"
+        @set-title-photo="setTitlePhoto"
       />
     </template>
   </template>