Bugfixing infinite scrollu u seznamu letu, novy vzhled detailu letu

src/pages/public/IndexPage.vue

@@ -2,7 +2,7 @@
 import {useMeta} from "quasar";
 import {metaData} from "src/composables/meta";
 import AppFooter from "components/AppFooter.vue";
-import LatestFlightsSlider from "components/flights/slider/LatestFlightsSlider.vue";
+import LatestFlightsSlider from "components/flights/LatestFlightsSlider.vue";
 import {onMounted} from "vue";
 import {useFlightsStore} from "stores/Flights";
 import {storeToRefs} from "pinia";

src/pages/public/aircraft/AircraftDetailPage.vue

@@ -28,27 +28,24 @@ import {homepageBreadcrumbs} from "src/composables/breadcrumbs";
 
 const {aircraft, isQueryRunning} = storeToRefs(useAircraftsStore());
 const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
-const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
 
 useAppStore().setPageTitle(aircraft.value.callSign);
 useMeta(() => metaData({
   title: aircraft.value.callSign,
   image: aircraft.value.titleImage?.url,
-  keywords: [
-    "letadlo", ...aircraftKeywords(aircraft.value)
-  ],
+  keywords: aircraftKeywords(aircraft.value),
   description: aircraft.value.description || `Detail letadla ${aircraft.value.callSign}.`
 }));
 useAppStore().setBreadcrumbs([
-    ...homepageBreadcrumbs(),
+  ...homepageBreadcrumbs(),
   {label: "Letadla"},
   {label: aircraft.value.callSign}
 ]);
 
-const {filters, loadPage, paginationLimit} = usePagination({fetchFunction: useFlightsStore().fetchPublic});
-filters.value = {aircraftId: aircraft.value.id};
+const {handleFiltersChanged, hasMoreData, loadPage} = usePagination({fetchFunction: useFlightsStore().fetchPublic});
 onMounted(() => {
-  loadPage(false);
+  handleFiltersChanged({aircraftId: aircraft.value.id})
   usePhotosStore().fetchPublic({aircraftId: aircraft.value.id});
 });
 </script>
@@ -74,10 +71,9 @@ onMounted(() => {
           <FlightsList
             v-else
             :items="flights"
-            :total-items-count="totalItemsCount"
             :is-query-running="areFlightsLoading"
-            :items-per-page="paginationLimit"
-            @load-more="loadPage(true)"
+            :has-more-data="hasMoreData"
+            @load-more="loadPage($event.index, $event.done)"
             :public="true"
           />
         </q-card-section>

src/pages/public/pilotProfile/EventDetailPage.vue

@@ -39,46 +39,41 @@ useMeta(() => metaData({
   description: event.value.description
 }))
 
-const {filters, loadPage, paginationLimit} = usePagination({fetchFunction: useFlightsStore().fetchPublic});
-filters.value = {username: props.pilot.publicUsername, eventId: event.value.id};
+const {loadPage, hasMoreData, handleFiltersChanged} = usePagination({fetchFunction: useFlightsStore().fetchPublic});
 
 onMounted(() => {
-  loadPage(false);
+  handleFiltersChanged({username: props.pilot.publicUsername, eventId: event.value.id})
 })
 
-const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
 </script>
 
 <template>
-  <div>
-    <EventDetailSkeleton v-if="isQueryRunning || !event"/>
+  <EventDetailSkeleton v-if="isQueryRunning || !event"/>
 
-    <template v-else>
-      <EventBasicInfo :event="event"/>
+  <template v-else>
+    <EventBasicInfo :event="event"/>
 
-      <article class="q-my-lg" v-html="event.description"/>
+    <article class="q-my-lg" v-html="event.description"/>
 
-      <q-no-ssr>
-        <EventFlightsMap :event-url-slug="event.urlSlug" :only-public="true"/>
-      </q-no-ssr>
+    <q-no-ssr>
+<!--      <EventFlightsMap :event-url-slug="event.urlSlug" :only-public="true"/>-->
+    </q-no-ssr>
 
-      <h3>Lety</h3>
+    <h3>Lety</h3>
 
-      <q-banner v-if="event.flights.length === 0" class="bg-light-blue text-white">
-        Zatím tu nemáš uložené žádné lety.
-      </q-banner>
+    <q-banner v-if="flights.length === 0" class="bg-light-blue text-white">
+      Zatím tu nemáš uložené žádné lety.
+    </q-banner>
 
-      <FlightsListSkeleton :items="paginationLimit" v-if="areFlightsLoading && flights?.length === 0"/>
+    <FlightsListSkeleton v-if="areFlightsLoading && flights?.length === 0"/>
 
-      <FlightsList
-        v-else
-        :items="flights"
-        :total-items-count="totalItemsCount"
-        :is-query-running="areFlightsLoading"
-        :items-per-page="paginationLimit"
-        :public="true"
-        @load-more="loadPage(true)"
-      />
-    </template>
-  </div>
+    <FlightsList
+      v-else
+      :items="flights"
+      :public="true"
+      :has-more-data="hasMoreData"
+      @load-more="loadPage($event.index, $event.done)"
+    />
+  </template>
 </template>

src/pages/public/pilotProfile/FlightDetailPage.vue

@@ -35,6 +35,8 @@ import {useAirportsStore} from "stores/Airports";
 import {useFlightPlansStore} from "stores/FlightPlans";
 import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
 import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
+import BreadcrumbsNavigation from "components/navigation/BreadcrumbsNavigation.vue";
+import {publicFlightBreadcrumbs} from "src/composables/breadcrumbs";
 
 const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
 
@@ -58,7 +60,9 @@ const flightNameFormatted = flightName(flight.value);
 const event = computed(() => flight.value.event);
 
 useAppStore().setPageTitle(flightNameFormatted);
-useAppStore().setBreadcrumbs([])//publicFlightBreadcrumbs(pilot.value, flight.value, event.value, false));
+useAppStore().setBreadcrumbs(publicFlightBreadcrumbs(pilot.value, flight.value, event.value, false));
+const {breadcrumbs} = storeToRefs(useAppStore());
+
 
 useMeta(() => metaData({
     title: `${flightNameFormatted} - ${pilot.value.name}`,
@@ -74,62 +78,58 @@ useMeta(() => metaData({
 ));
 
 
-const contentTabs = ref()
+const titleImageBottomAnchor = ref()
 const scrollToContent = () => {
-  contentTabs.value.$el.scrollIntoView({behavior: "smooth"});
+  console.log(titleImageBottomAnchor.value)
+  if (!titleImageBottomAnchor.value) {
+    console.log("nemam anchor")
+    return
+  }
+
+  titleImageBottomAnchor.value.scrollIntoView({behavior: "smooth"});
 }
 
 const tab = ref("photos")
 </script>
 
 <template>
-  <q-img :src="flight.titlePhoto.url" style="height: 85vh" fit="cover">
-    <div class="absolute-full flex flex-center text-center">
-      <div>
-        <h2 class="text-h4">{{ flight.name }}</h2>
-
-        <div class="q-my-lg">
-          {{ formatDatetime(flight.takeoffDatetime, FORMAT_DATE) }}
-        </div>
-
+  <q-img :src="flight.titlePhoto.url" style="height: 100vh" fit="cover">
+    <div class="absolute-full">
+      <div style="height: 20vh; opacity: 0.4">
+        <BreadcrumbsNavigation :items="breadcrumbs || []"/>
+      </div>
+      <div class="flex flex-center text-center">
         <div>
-        <span v-for="(turnPoint, i) in flight.turnPoints">
-          {{ turnPoint.pointOfInterest.name }}
-          <span v-if="i < Object.keys(flight.turnPoints).length - 1" class="q-mx-md"> &bull;</span>
-        </span>
-        </div>
-
-        <div v-if="flight.description !== ''">
-          {{ flight.description }}
-        </div>
-
-        <div>
-          <q-btn dense text icon="arrow_downward" size="lg" class="q-my-lg" @click="scrollToContent">Detail letu</q-btn>
-        </div>
-
-        <div class="absolute-bottom-right">
-          <q-btn class="q-ma-md" :to="{name: 'publicProfileDetail', params: {username: pilot.publicUsername}}">
-            <AvatarFromPhoto :size="32" class="q-mr-sm" :src="pilot.avatarImageUrl"/>
-            {{ pilot.name }}
-          </q-btn>
+          <FlightHeaderInfo :pilot="pilot" :flight="flight">
+            <div class="absolute-bottom">
+            <div class="row">
+              <div class="offset-2 col-grow">
+                <q-tabs
+                  v-model="tab"
+                >
+                  <q-tab @click="scrollToContent" class="q-px-xl" :ripple="false" name="photos" icon="image" label="Fotky" v-if="flightPhotos.length > 0"/>
+                  <q-tab @click="scrollToContent" class="q-px-xl" :ripple="false" name="info" icon="alarm" label="Info"/>
+                  <q-tab @click="scrollToContent" class="q-px-xl" :ripple="false" name="track" icon="route" label="Trasa" v-if="flightPlan || flight.track"/>
+                </q-tabs>
+              </div>
+              <div class="col-2">
+                <q-btn class="q-ma-md" :to="{name: 'publicFlightDetail', params: {username: pilot.publicUsername}}">
+                  <AvatarFromPhoto :size="32" class="q-mr-sm" :src="pilot.avatarImageUrl"/>
+                  {{ pilot.name }}
+                </q-btn>
+              </div>
+            </div>
+          </div>
+          </FlightHeaderInfo>
         </div>
       </div>
+
+      <div class="absolute-bottom" ref="titleImageBottomAnchor"></div>
     </div>
 
   </q-img>
 
 
-  <q-tabs
-    ref="contentTabs"
-    v-model="tab"
-    align="justify"
-    class="q-mt-md"
-  >
-    <q-tab :ripple="false" name="photos" icon="image" label="Fotky" v-if="flightPhotos.length > 0"/>
-    <q-tab :ripple="false" name="info" icon="alarm" label="Info"/>
-    <q-tab :ripple="false" name="track" icon="route" label="Trasa" v-if="flightPlan || flight.track"/>
-  </q-tabs>
-
   <q-tab-panels v-model="tab" style="min-height: 80vh">
     <q-tab-panel name="photos">
       <q-inner-loading v-if="arePhotosLoading"/>

src/pages/public/pilotProfile/FlightsListPage.vue

@@ -28,19 +28,18 @@ useMeta(() => metaData({
 useAppStore().setPageTitle(props.pilot.publicUsername);
 useAppStore().setBreadcrumbs(publicProfileBreadcrumbs(props.pilot, false))
 
-const {filters, loadPage, paginationLimit} = usePagination({fetchFunction: useFlightsStore().fetchPublic});
-filters.value = {username: props.pilot.publicUsername};
+const {loadPage, handleFiltersChanged} = usePagination({fetchFunction: useFlightsStore().fetchPublic});
 onMounted(() => {
-  loadPage(false);
+  handleFiltersChanged({username: props.pilot.publicUsername})
 });
 
-const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
 </script>
 
 <template>
   <PublicFlightEventSwitcher :username="pilot?.publicUsername"/>
 
-  <FlightsListSkeleton :items="paginationLimit" v-if="areFlightsLoading && flights?.length === 0"/>
+  <FlightsListSkeleton v-if="areFlightsLoading && flights?.length === 0"/>
 
   <q-banner class="bg-primary text-white" v-else-if="!areFlightsLoading && flights.length === 0">
     Tento pilot zatím nepublikoval žádný let.
@@ -49,9 +48,6 @@ const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRef
   <FlightsList
     v-else
     :items="flights"
-    :total-items-count="totalItemsCount"
-    :is-query-running="areFlightsLoading"
-    :items-per-page="paginationLimit"
     :public="true"
     @load-more="loadPage(true)"
   />

src/pages/public/poi/PointOfInterestDetailPage.vue

@@ -41,11 +41,11 @@ useAppStore().setBreadcrumbs([
   {label: pointOfInterest.value.name}
 ]);
 
-const {filters, loadPage, paginationLimit} = usePagination({fetchFunction: useFlightsStore().fetchPublic});
-filters.value = {pointOfInterestId: pointOfInterest.value.id};
+const {loadPage, handleFiltersChanged, hasMoreData} = usePagination({fetchFunction: useFlightsStore().fetchPublic});
+
 onMounted(() => {
   usePhotosStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
-  loadPage(false);
+  handleFiltersChanged({pointOfInterestId: pointOfInterest.value.id});
 });
 </script>
 
@@ -79,7 +79,8 @@ onMounted(() => {
           :is-query-running="areFlightsLoading"
           :items-per-page="paginationLimit"
           :public="true"
-          @load-more="loadPage(true)"
+          :has-more-data="hasMoreData"
+          @load-more="loadPage($event.index, $event.done)"
         />
       </q-card-section>
     </template>