Reorganizace skeletonu, aktualizace app-vite a quasaru

src/pages/profile/poi/EditPointOfInterestPage.vue

@@ -1,5 +1,5 @@
 <script setup>
-import POIEditSkeleton from "components/poi/POIEditSkeleton.vue";
+import POIEditSkeleton from "components/poi/skeletons/POIEditSkeleton.vue";
 import {computed, onMounted} from "vue";
 import {useRoute, useRouter} from "vue-router";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
@@ -11,23 +11,25 @@ import {storeToRefs} from "pinia";
 import POIForm from "components/poi/POIForm.vue";
 import {useUserStore} from "stores/User";
 import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
-import PhotoEditorSkeleton from "components/photos/PhotoEditorSkeleton.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";
 
 const poiId = parseInt(useRoute().params.id);
 
-onMounted(() => {
-  usePointsOfInterestStore().fetchDetail(poiId).then((p) => {
-    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"},
-    ]);
-  });
+usePointsOfInterestStore().fetchDetail(poiId).then((p) => {
+  if (!p) return;
 
-  usePointsOfInterestTypeStore().fetch();
-})
+  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"},
+  ]);
+});
+
+usePointsOfInterestTypeStore().fetch();
 
 const poiTypes = storeToRefs(usePointsOfInterestTypeStore()).types;
 const loggedUser = storeToRefs(useUserStore()).user;
@@ -48,47 +50,32 @@ const setTitlePhoto = (titlePhoto) => {
   })
 }
 
-const formStep = computed(() => useRoute().params.step || "basic");
+const formStep = computed(() => useRoute().params.step || "info");
 </script>
 
 <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}}"
   />
 
-  <q-tabs active-color="primary" class="q-mb-lg">
-    <q-route-tab
-      icon="edit"
-      label="Informace"
-      replace
-      :to="{name: 'poiEdit', params: {id: pointOfInterest?.id, step: 'basic'}}"
-      exact
-    />
-    <q-route-tab
-      icon="add_a_photo"
-      label="Fotky"
-      replace
-      :to="{name: 'poiEdit', params: {id: pointOfInterest?.id, step: 'photo'}}"
-      exact
-    />
-  </q-tabs>
+  <template v-else>
+    <CommonEditSwitcher :route="{name: 'poiEdit', params: {id: pointOfInterest?.id}}"/>
 
-  <template v-if="formStep === 'basic'">
-    <POIEditSkeleton v-if="isQueryRunning || !pointOfInterest"/>
-    <POIForm :poi="pointOfInterest" :types="poiTypes" v-else @save="handleSave"/>
-  </template>
-  <template v-else-if="formStep === 'photo'">
+    <template v-if="formStep === 'info'">
+      <POIEditSkeleton v-if="isQueryRunning || !pointOfInterest"/>
+      <POIForm :poi="pointOfInterest" :types="poiTypes" v-else @save="handleSave"/>
+    </template>
 
-    <q-spinner v-if="isQueryRunning || !pointOfInterest"/>
-
-    <PhotosEditorList
-      v-else
-      :photos="pointOfInterest.photos"
-      :title-photo="pointOfInterest.titlePhoto"
-      :show-actions="false"
-      @set-title-photo="setTitlePhoto"
-    />
+    <template v-else-if="formStep === 'photo'">
+      <PhotoGallerySkeleton v-if="isQueryRunning || !pointOfInterest"/>
+      <PhotosEditorList
+          v-else
+          :photos="pointOfInterest.photos"
+          :title-photo="pointOfInterest.titlePhoto"
+          :show-actions="false"
+          @set-title-photo="setTitlePhoto"
+      />
+    </template>
   </template>
 </template>