Slugy, webp, hromada refaktoringu

src/pages/profile/event/EventDetailPage.vue

@@ -8,6 +8,8 @@ import FlightsList from "components/flights/FlightsList.vue";
 import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
 import {useEventsStore} from "stores/Events";
 import {storeToRefs} from "pinia";
+import {loadPage, paginationLimit} from "src/composables/pagination";
+import {useFlightsStore} from "stores/Flights";
 
 const eventId = parseInt(useRoute().params.id);
 onMounted(() => {
@@ -18,9 +20,18 @@ onMounted(() => {
       {label: event.value.name}
     ])
   });
+  loadNextFlightsPage(false);
 })
 
 const {isQueryRunning, event} = storeToRefs(useEventsStore());
+
+const loadNextFlightsPage = (appendItems) => loadPage({
+  fetchFunc: useFlightsStore().fetch,
+  filters: {eventId: eventId},
+  appendItems
+});
+const {isQueryRunning: areFlightsLoading, totalItemsCount, flights} = storeToRefs(useFlightsStore());
+
 </script>
 
 <template>
@@ -49,8 +60,15 @@ const {isQueryRunning, event} = storeToRefs(useEventsStore());
       Zatím tu nemáš uložené žádné lety.
     </q-banner>
 
-    <FlightsList :items="event.flights" :public="false" v-else/>
-
+    <FlightsList
+      v-else-if="flights.length > 0"
+      :public="false"
+      :items="flights"
+      :total-items-count="totalItemsCount"
+      :is-query-running="areFlightsLoading"
+      :items-per-page="paginationLimit"
+      @load-more="loadNextFlightsPage(true)"
+    />
     <FAB mode="edit" :router-link="{name: 'eventEdit', params: {id: eventId}}"/>
   </template>
 </template>