Aktualizace balicku, strnakovani, uprava hlavni stranky

src/pages/public/pilotProfile/EventDetailPage.vue

@@ -3,33 +3,53 @@ import {useEventsStore} from "stores/Events";
 
 export default {
   preFetch({currentRoute}) {
-    return useEventsStore().fetchDetail(currentRoute.params.id, currentRoute.params.username);
+    return useEventsStore().fetchPublicDetail(currentRoute.params.id, currentRoute.params.username);
   }
 }
 </script>
 
 <script setup>
-import {watch} from "vue";
-import {useRoute} from "vue-router";
 import {useAppStore} from "stores/App";
 import EventDetailSkeleton from "components/event/skeletons/EventDetailSkeleton.vue";
 import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
 import FlightsList from "components/flights/FlightsList.vue";
 import {storeToRefs} from "pinia";
+import {loadPage, paginationLimit} from "src/composables/pagination";
+import {useFlightsStore} from "stores/Flights";
+import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
+import {useMeta} from "quasar";
+import {metaData} from "src/composables/meta";
 
-const routeParams = useRoute().params;
+const props = defineProps({
+  pilot: {
+    type: Object,
+    required: false
+  },
+})
 
 const {isQueryRunning, event} = storeToRefs(useEventsStore());
 
-watch(() => event.value, (newVal) => {
-  useAppStore().setPageTitle(newVal.name);
-  useAppStore().setBreadcrumbs([
-    {to: {name: 'homepage'}, label: "Polétání.cz"},
-    {to: {name: "publicProfileDetail", params: {username: routeParams.username}}, label: `@${routeParams.username}`},
-    {to: {name: "publicEventsList", params: {username: routeParams.username}}, label: "Události"},
-    {label: newVal.name}
-  ]);
+useAppStore().setPageTitle(event.value.name);
+useAppStore().setBreadcrumbs([
+  {to: {name: 'homepage'}, label: "Polétání.cz"},
+  {to: {name: "publicProfileDetail", params: {username: props.pilot.publicUsername}}, label: `@${props.pilot.publicUsername}`},
+  {to: {name: "publicEventsList", params: {username: props.pilot.publicUsername}}, label: "Události"},
+  {label: event.value.name}
+]);
+useMeta(() => metaData({
+  title: event.value.name,
+  description: event.value.description
+}))
+
+const loadNextFlightsPage = (appendItems) => loadPage({
+  fetchFunc: useFlightsStore().fetchPublic,
+  filters: {username: props.pilot.publicUsername},
+  appendItems
 });
+loadNextFlightsPage(false);
+
+const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+
 </script>
 
 <template>
@@ -37,11 +57,6 @@ watch(() => event.value, (newVal) => {
     <EventDetailSkeleton v-if="isQueryRunning || !event"/>
 
     <template v-else>
-      <q-banner class="bg-warning text-white q-mx-md q-my-md" v-if="!event.isPublic">
-        Pozor! Tento event není publikován a nebude tak dostupný pro ostatní!
-      </q-banner>
-
-
       <q-list bordered separator class="q-my-lg" v-if="event.dateFrom && event.dateTo">
         <q-item>
           <q-item-section>
@@ -63,11 +78,16 @@ watch(() => event.value, (newVal) => {
         Zatím tu nemáš uložené žádné lety.
       </q-banner>
 
+      <FlightsListSkeleton :items="paginationLimit" v-if="areFlightsLoading && flights?.length === 0"/>
+
       <FlightsList
         v-else
-        :items="event.flights"
+        :items="flights"
+        :total-items-count="totalItemsCount"
+        :is-query-running="areFlightsLoading"
+        :items-per-page="paginationLimit"
         :public="true"
-        class="q-my-lg"
+        @load-more="loadNextFlightsPage(true)"
       />
 
     </template>