Ne uplne otestovany prepis storu

src/pages/profile/poi/EditPointOfInterestPage.vue

@@ -1,6 +1,5 @@
 <script setup>
 import POIEditSkeleton from "components/poi/POIEditSkeleton.vue";
-import {fetchPoi, loading, poi} from "src/composables/objects/poi";
 import {onMounted} from "vue";
 import {useRoute, useRouter} from "vue-router";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
@@ -16,11 +15,11 @@ import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
 const poiId = parseInt(useRoute().params.id);
 
 onMounted(() => {
-  fetchPoi(poiId).then(() => {
-    useAppStore().setPageTitle(`${poi.value.name} - editace`);
+  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: poi.value.name},
+      {to: {name: "poiDetail", params: {id: poiId}}, label: p.name},
       {label: "Editace"},
     ]);
   });
@@ -30,6 +29,7 @@ onMounted(() => {
 
 const poiTypes = storeToRefs(usePointsOfInterestTypeStore()).items;
 const loggedUser = storeToRefs(useUserStore()).user;
+const {isQueryRunning, pointOfInterest, isMutationRunning} = storeToRefs(usePointsOfInterestStore());
 
 const $q = useQuasar();
 const router = useRouter();
@@ -42,10 +42,10 @@ const handleSave = (data) => {
 </script>
 
 <template>
-  <POIEditSkeleton v-if="loading"/>
+  <POIEditSkeleton v-if="isQueryRunning"/>
   <AccessDeniedBanner
-    v-else-if="poi.createdById !== loggedUser.id"
+    v-else-if="pointOfInterest.createdById !== loggedUser.id"
     :route-back="{name: 'poiDetail', params: {id: poiId}}"
   />
-  <POIForm :poi="poi" :types="poiTypes" v-else @save="handleSave"/>
+  <POIForm :poi="pointOfInterest" :types="poiTypes" v-else @save="handleSave"/>
 </template>

src/pages/profile/poi/NewPointOfInterestPage.vue

@@ -16,15 +16,16 @@ const handleSave = (formData) => {
     router.push({name: "poi"});
   })
 }
-const isRequestPending = storeToRefs(usePointsOfInterestStore()).isMutationRunning;
-
 useAppStore().setPageTitle("Nové zajímavé místo");
 useAppStore().setBreadcrumbs([
   {to: "poi", label: "Zajímavá místa"},
   {label: "Nové"},
 ])
+
+const {isMutationRunning} = storeToRefs(usePointsOfInterestStore());
+
 </script>
 
 <template>
-  <POIForm @save="handleSave" :is-request-pending="isRequestPending"/>
+  <POIForm @save="handleSave" :is-request-pending="isMutationRunnin"/>
 </template>

src/pages/profile/poi/PointOfInterestDetailPage.vue

@@ -3,57 +3,58 @@ import {onMounted} from "vue";
 import {useRoute} from "vue-router";
 import POIDetailSkeleton from "components/poi/POIDetailSkeleton.vue";
 import FAB from "components/FAB.vue";
-import {fetchPoi, loading, poi} from "src/composables/objects/poi";
-import PhotosList from "components/photos/PhotosEditorList.vue";
 import {useAppStore} from "stores/App";
 import EmbeddedMap from "components/map/EmbeddedMap.vue";
 import {useUserStore} from "stores/User";
 import {storeToRefs} from "pinia";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import FlightsList from "components/flights/FlightsList.vue";
+import {usePointsOfInterestStore} from "stores/PointsOfInterest";
+import PhotoGallery from "components/photos/PhotoGallery.vue";
 
 const loggedUser = storeToRefs(useUserStore()).user;
 
 onMounted(() => {
-  fetchPoi(useRoute().params.id).then(() => {
-    useAppStore().setPageTitle(`${poi.value.name}`);
+  usePointsOfInterestStore().fetchDetail(useRoute().params.id).then((p) => {
+    useAppStore().setPageTitle(`${p.name}`);
     useAppStore().setBreadcrumbs([
       {to: {name: "poi"}, label: "Zajímavá místa"},
-      {label: poi.value.name},
+      {label: p.name},
     ])
   });
-})
+});
+
+const {isQueryRunning, pointOfInterest} = storeToRefs(usePointsOfInterestStore());
 </script>
 
 <template>
-  <POIDetailSkeleton v-if="loading || !poi"/>
+  <POIDetailSkeleton v-if="isQueryRunning || !pointOfInterest"/>
 
   <template v-else>
-    <article v-html="poi.description" class="q-my-lg" />
+    <article v-html="pointOfInterest.description" class="q-my-lg" />
 
     <EmbeddedMap
-      v-if="poi.gpsLatitude && poi.gpsLongitude"
-      :gps-latitude="poi.gpsLatitude"
-      :gps-longitude="poi.gpsLongitude"
+      v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
+      :gps-latitude="pointOfInterest.gpsLatitude"
+      :gps-longitude="pointOfInterest.gpsLongitude"
       :zoom="13"
     />
     <BasicInfoBanner v-else>
       Tento bod nemá nastavenou polohu. Po nastavení polohy tu bude zobrazena mapa.
     </BasicInfoBanner>
 
-    <PhotosList
-      :photos="poi.photos"
-      :show-actions="false"
-      v-if="poi.photos.length > 0"
+    <PhotoGallery
+      :photos="pointOfInterest.photos"
+      v-if="pointOfInterest.photos.length > 0"
     />
 
     <BasicInfoBanner v-else>
       Pokud přidáš toto místo k nějaké fotce, zobrazí se tu.
     </BasicInfoBanner>
 
-    <FlightsList :items="poi.flights" v-if="poi.flights.length > 0 && loggedUser.id === poi.createdById"/>
+    <FlightsList :items="pointOfInterest.flights" v-if="pointOfInterest.flights.length > 0 && loggedUser.id === pointOfInterest.createdById"/>
 
-    <FAB v-if="poi.createdById === loggedUser.id" :router-link="{name: 'poiEdit', params:{id: poi.id}}" mode="edit"/>
+    <FAB v-if="pointOfInterest.createdById === loggedUser.id" :router-link="{name: 'poiEdit', params:{id: pointOfInterest.id}}" mode="edit"/>
   </template>
 
 </template>

src/pages/profile/poi/PointsOfInterestPage.vue

@@ -1,24 +1,25 @@
 <script setup>
 import {onMounted} from "vue";
-import {fetchPOIList, loading, pointsOfInterest} from "src/composables/objects/poi";
 import {useAppStore} from "stores/App";
 import POIList from "components/poi/POIList.vue";
 import FAB from "components/FAB.vue";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
-import {flights} from "src/composables/objects/flight";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
+import {usePointsOfInterestStore} from "stores/PointsOfInterest";
+import {storeToRefs} from "pinia";
 
 onMounted(() => {
-  fetchPOIList();
+  usePointsOfInterestStore().fetch();
+  useAppStore().setPageTitle("Zajímavá místa");
 });
 
-useAppStore().setPageTitle("Zajímavá místa")
+const {isQueryRunning, pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
 </script>
 
 <template>
-  <BasicListSkeleton :items-count-min="5" :items-count-max="10" v-if="loading"/>
+  <BasicListSkeleton :items="10" v-if="isQueryRunning"/>
   <BasicInfoBanner
-    v-else-if="!loading && pointsOfInterest.length === 0"
+    v-else-if="!isQueryRunning && pointsOfInterest.length === 0"
     :route-add="{name: 'addPoi'}"
     label-add="Přidat"
   >