lepsi infinite scroll

src/components/flights/FlightsList.vue

@@ -2,10 +2,7 @@
 import {minutesToHumanReadable} from "src/composables/datetimeUtils";
 import {flightName} from "src/composables/flight";
 import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
-import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
-import {computed} from "vue";
-import LoadMoreList from "components/LoadMoreList.vue";
-import {pluralize} from "../../composables/utils";
+import {useInfiniteScroll} from "src/composables/pagination";
 
 const props = defineProps({
   items: {
@@ -16,96 +13,82 @@ const props = defineProps({
     type: Boolean,
     required: true
   },
-  totalItemsCount: {
-    type: Number,
-    required: true
-  },
-  itemsPerPage: {
-    type: Number,
-    required: false,
-    default: 5,
-  },
-  isQueryRunning: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
+  ...useInfiniteScroll().propsDef
 });
 
+const emits = defineEmits([...useInfiniteScroll().emitsDef])
+const {emitLoadMore, hasMoreData} = useInfiniteScroll(emits, props)
+
 const routeDetail = (flight) => {
   if (props.public)
     return {name: "publicFlightDetail", params: {username: flight.pilot.publicUsername, flightSlug: flight.urlSlug}}
   else
     return {name: "flightDetail", params: {id: flight.id}}
 };
-const loadMoreCount = computed(() => {
-  return Math.min(props.itemsPerPage, props.totalItemsCount - props.items.length);
-});
-
 </script>
 
 <template>
-  <LoadMoreList :total-items-count="totalItemsCount" :items-length="items.length">
-    <template #items>
-      <q-list bordered separator>
-        <q-item
-          v-for="flight of items" :key="flight"
-          ripple
-          clickable
-          :to="routeDetail(flight)"
-        >
-          <q-item-section avatar>
-            <AvatarFromPhoto :size="120" v-if="flight.titlePhoto" :src="flight.titlePhoto.thumbnailUrl"/>
-            <q-avatar v-else size="120px" icon="flight" text-color="grey-7" color="grey-4"></q-avatar>
-          </q-item-section>
-          <q-item-section>
-            <div class="text-h5 q-mb-md">{{ flightName(flight) }}</div>
+  <q-infinite-scroll
+    :disable="!hasMoreData"
+    @load="emitLoadMore"
+    :offset="250"
+  >
+    <q-list bordered separator>
+      <q-item
+        v-for="flight of items" :key="flight"
+        ripple
+        clickable
+        :to="routeDetail(flight)"
+      >
+        <q-item-section avatar>
+          <AvatarFromPhoto :size="120" v-if="flight.titlePhoto" :src="flight.titlePhoto.thumbnailUrl"/>
+          <q-avatar v-else size="120px" icon="flight" text-color="grey-7" color="grey-4"></q-avatar>
+        </q-item-section>
+        <q-item-section>
+          <div class="text-h5 q-mb-md">{{ flightName(flight) }}</div>
 
-            <div class="text-secondary" v-if="props.public">
-              <q-icon name="support_agent"/>
-              @{{ flight.pilot.publicUsername }}
-            </div>
+          <div class="text-secondary" v-if="props.public">
+            <q-icon name="support_agent"/>
+            @{{ flight.pilot.publicUsername }}
+          </div>
 
-            <div class="text-secondary" v-if="flight.copilots">
-              <q-icon name="person"/>
-              {{ flight.pilot.name }}
-              {{ flight.copilots }}
-            </div>
+          <div class="text-secondary" v-if="flight.copilots">
+            <q-icon name="person"/>
+            {{ flight.pilot.name }}
+            {{ flight.copilots }}
+          </div>
 
-            <div class="text-secondary">
-              <q-icon name="schedule"/>
-              {{ minutesToHumanReadable(flight.durationMinCalculated) }}
-            </div>
-            <div class="text-secondary">
-              <q-icon name="flight"/>
-              {{ flight.aircraft.callSign }}
-            </div>
+          <div class="text-secondary">
+            <q-icon name="schedule"/>
+            {{ minutesToHumanReadable(flight.durationMinCalculated) }}
+          </div>
+          <div class="text-secondary">
+            <q-icon name="flight"/>
+            {{ flight.aircraft.callSign }}
+          </div>
 
-            <div class="text-secondary" v-if="flight.event">
-              <q-icon name="event"/>
-              {{ flight.event.name }}
-            </div>
-          </q-item-section>
+          <div class="text-secondary" v-if="flight.event">
+            <q-icon name="event"/>
+            {{ flight.event.name }}
+          </div>
+        </q-item-section>
 
-          <q-item-section side top v-if="!props.public">
-            <!-- Zobraz jen v adminu -->
-            <q-icon name="visibility" v-if="flight.isPublic"/>
+        <q-item-section side top v-if="!props.public">
+          <!-- Zobraz jen v adminu -->
+          <q-icon name="visibility" v-if="flight.isPublic"/>
 
-            <q-icon name="warning" color="orange" v-if="flight.isPublic && flight.urlSlug === ''">
-              <q-tooltip>
-                Let je sice publikovaný, nemá ale nastavenou URL adresu!
-              </q-tooltip>
-            </q-icon>
-          </q-item-section>
-        </q-item>
-      </q-list>
+          <q-icon name="warning" color="orange" v-if="flight.isPublic && flight.urlSlug === ''">
+            <q-tooltip>
+              Let je sice publikovaný, nemá ale nastavenou URL adresu!
+            </q-tooltip>
+          </q-icon>
+        </q-item-section>
+      </q-item>
+    </q-list>
+    <template v-slot:loading>
+      <div class="row justify-center q-my-md">
+        <q-spinner-dots color="primary" size="40px"/>
+      </div>
     </template>
-    <template #skeleton>
-      <FlightsListSkeleton :items="itemsPerPage"/>
-    </template>
-    <template #loadMoreText>
-      Načíst {{ pluralize(loadMoreCount, 'jeden let', `další ${loadMoreCount} lety`, `dalších ${loadMoreCount} letů`) }}
-    </template>
-  </LoadMoreList>
-
+  </q-infinite-scroll>
 </template>