Reorganizace skeletonu, aktualizace app-vite a quasaru

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>