Aktualizace balicku, strnakovani, uprava hlavni stranky

src/pages/public/pilotProfile/CopilotDetailPage.vue

@@ -10,9 +10,8 @@ export default {
 <script setup>
 import FlightsList from "components/flights/FlightsList.vue";
 import {useAppStore} from "stores/App";
-import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import {storeToRefs} from "pinia";
-import {onMounted, onServerPrefetch} from "vue";
+import {onMounted} from "vue";
 import {useFlightsStore} from "stores/Flights";
 import {usePhotosStore} from "stores/Photos";
 import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
@@ -20,8 +19,8 @@ import ContentCard from "components/ContentCard.vue";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
 import {useMeta} from "quasar";
 import {metaData} from "src/composables/meta";
-// import {useCopilotsStore} from "stores/Copilots";
-// import {useRoute} from "vue-router";
+import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
+import {loadPage, paginationLimit} from "src/composables/pagination";
 
 const props = defineProps({
   pilot: {
@@ -30,14 +29,8 @@ const props = defineProps({
   },
 })
 
-// const currentRoute = useRoute();
-//
-// onServerPrefetch(() => {
-//
-// })
-
 const {copilot, isQueryRunning} = storeToRefs(useCopilotsStore());
-const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
 const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
 
 useAppStore().setPageTitle(`${props.pilot.name} + ${copilot.value.name}`);
@@ -54,32 +47,39 @@ useMeta(() => metaData({
   image: copilot.value.titleImage?.url
 }));
 
+
+const loadNextFlightsPage = (appendItems) => loadPage({
+  fetchFunc: useFlightsStore().fetchPublic,
+  filters: {copilotId: copilot.value.id},
+  appendItems
+});
+
 onMounted(() => {
-  useFlightsStore().fetchPublic({copilotId: copilot.value.id});
+  loadNextFlightsPage(false);
+
   usePhotosStore().fetchPublic({copilotId: copilot.value.id})
 })
 </script>
 
 <template>
-
   <ContentCard v-if="!isQueryRunning" :title-photo="copilot.titlePhoto" :title="copilot.name">
     <template #content>
       <q-card-section>
-
-        <q-spinner v-if="arePhotosLoading"/>
+        <PhotoGallerySkeleton v-if="arePhotosLoading"/>
         <PhotoGallery :photos="photos" v-else/>
 
         <h3>Společné lety</h3>
         <FlightsListSkeleton v-if="areFlightsLoading && flights.length === 0"/>
         <FlightsList
-            v-else
-            :items="flights"
-            :public="true"
-            class="q-mb-md"
+          v-else
+          :items="flights"
+          :total-items-count="totalItemsCount"
+          :is-query-running="areFlightsLoading"
+          :items-per-page="paginationLimit"
+          :public="true"
+          @load-more="loadNextFlightsPage(true)"
         />
       </q-card-section>
     </template>
   </ContentCard>
-
-
 </template>