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>

src/pages/profile/poi/PointOfInterestDetailPage.vue

@@ -1,6 +1,6 @@
 <script setup>
-import {useRoute} from "vue-router";
-import POIDetailSkeleton from "components/poi/POIDetailSkeleton.vue";
+import {useRoute, useRouter} from "vue-router";
+import POIDetailSkeleton from "components/poi/skeletons/POIDetailSkeleton.vue";
 import {useAppStore} from "stores/App";
 import EmbeddedMap from "components/map/EmbeddedMap.vue";
 import {useUserStore} from "stores/User";
@@ -14,10 +14,15 @@ import {toggleVisibility} from "src/composables/form/formHandling";
 import {copyToClipboard, useQuasar} from "quasar";
 import {successObject} from "src/composables/dialog";
 import ContentCardEditButton from "components/ContentCardEditButton.vue";
+import {useFlightsStore} from "stores/Flights";
+import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
 
 const loggedUser = storeToRefs(useUserStore()).user;
+const poiId = parseInt(useRoute().params.id);
+
+usePointsOfInterestStore().fetchDetail(poiId).then((p) => {
+  if (!p) return;
 
-usePointsOfInterestStore().fetchDetail(useRoute().params.id).then((p) => {
   useAppStore().setPageTitle(`${p.name}`);
   useAppStore().setBreadcrumbs([
     {to: {name: "poi"}, label: "Zajímavá místa"},
@@ -25,20 +30,19 @@ usePointsOfInterestStore().fetchDetail(useRoute().params.id).then((p) => {
   ])
 });
 
+useFlightsStore().fetch({pointOfInterestId: poiId});
+
 const {isQueryRunning, pointOfInterest} = storeToRefs(usePointsOfInterestStore());
+const {isQueryRunning: areFlightsLoading, flights} = storeToRefs(useFlightsStore());
 
 const $q = useQuasar();
 const togglePublicVisibility = () => toggleVisibility({
-  $q,
-  store: usePointsOfInterestStore(),
-  object: pointOfInterest.value
+  $q, store: usePointsOfInterestStore(), object: pointOfInterest.value
 });
 
+const $router = useRouter();
 const copyLinkToClipboard = () => {
-  const url = $router.resolve({
-    name: "publicPOIDetail",
-    params: {id: pointOfInterest.value.id}
-  });
+  const url = $router.resolve({name: "publicPOIDetail", params: {id: pointOfInterest.value.id}});
   copyToClipboard(window.location.origin + url.href).then(() => {
     $q.notify(successObject("Odkaz zkopírován"))
   });
@@ -103,11 +107,15 @@ const copyLinkToClipboard = () => {
 
           <h3>Tvoje lety do místa {{ pointOfInterest.name }}</h3>
 
+          <FlightsListSkeleton v-if="areFlightsLoading && !flights.length" />
           <FlightsList
-              :items="pointOfInterest.flights"
+              :items="flights"
               :public="false"
-              v-if="pointOfInterest.flights.length > 0 && loggedUser.id === pointOfInterest.createdById"
+              v-else-if="flights.length > 0"
           />
+          <BasicInfoBanner v-else>
+            Na tomto místě jsi zatím nebyl/a.
+          </BasicInfoBanner>
         </q-card-section>
       </template>
     </ContentCard>

src/pages/profile/poi/PointsOfInterestPage.vue

@@ -1,5 +1,4 @@
 <script setup>
-import {onMounted} from "vue";
 import {useAppStore} from "stores/App";
 import POIList from "components/poi/POIList.vue";
 import FAB from "components/FAB.vue";
@@ -8,28 +7,26 @@ import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 import {storeToRefs} from "pinia";
 
-onMounted(() => {
-  usePointsOfInterestStore().fetch();
-  useAppStore().setPageTitle("Zajímavá místa");
-});
+usePointsOfInterestStore().fetch();
+useAppStore().setPageTitle("Zajímavá místa");
 
 const {isQueryRunning, pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
 </script>
 
 <template>
-  <BasicListSkeleton :items="10" v-if="isQueryRunning"/>
+  <BasicListSkeleton :items="10" v-if="isQueryRunning && !pointsOfInterest.length"/>
   <BasicInfoBanner
-    v-else-if="!isQueryRunning && pointsOfInterest.length === 0"
-    :route-add="{name: 'addPoi'}"
-    label-add="Přidat"
+      v-else-if="!isQueryRunning && pointsOfInterest.length === 0"
+      :route-add="{name: 'addPoi'}"
+      label-add="Přidat"
   >
     Nemáš tu uložené žádné zajímavé místo. Přidej si let, nastav si tam ručně trasu a jednotlivé body se zobrazí
     i v tomto seznamu.
   </BasicInfoBanner>
 
   <POIList
-    v-else
-    :items="pointsOfInterest"
+      v-else
+      :items="pointsOfInterest"
   />
 
   <FAB :router-link="{name: 'addPOI'}" mode="add"/>