lepsi infinite scroll

src/pages/profile/flight/FlightsPage.vue

@@ -1,29 +1,32 @@
 <script setup>
 import FlightsList from "components/flights/FlightsList.vue";
 import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
-import FAB from "components/FAB.vue";
 import {useAppStore} from "stores/App";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {useFlightsStore} from "stores/Flights";
 import {storeToRefs} from "pinia";
 import {usePagination} from "src/composables/pagination";
-import {onMounted} from "vue";
+import PrimaryAction from "components/PrimaryAction.vue";
+import ListFilters from "components/ListFilters.vue";
 
 useAppStore().setPageTitle("Moje lety");
 useAppStore().setBreadcrumbs([]);
 
-const {loadPage, paginationLimit} = usePagination({fetchFunction: useFlightsStore().fetch});
-onMounted(() => {
-  loadPage(false);
-});
-const {flights, totalItemsCount, isQueryRunning} = storeToRefs(useFlightsStore());
+const {loadPage, hasMoreData, handleFiltersChanged} = usePagination({fetchFunction: useFlightsStore().fetch});
+const {flights, isQueryRunning} = storeToRefs(useFlightsStore());
 </script>
 
 <template>
+  <ListFilters @filters-changed="handleFiltersChanged">
+    <template #append>
+      <PrimaryAction mode="add" :router-link="{name: 'addFlight'}"/>
+    </template>
+  </ListFilters>
+
   <FlightsListSkeleton v-if="isQueryRunning && flights.length === 0"/>
 
   <BasicInfoBanner
-    v-else-if="!isQueryRunning && totalItemsCount === 0"
+    v-else-if="!isQueryRunning && flights.length === 0"
     :route-add="{name: 'addFlight'}"
     label-add="Přidat let"
   >
@@ -34,11 +37,7 @@ const {flights, totalItemsCount, isQueryRunning} = storeToRefs(useFlightsStore()
     v-else
     :items="flights"
     :public="false"
-    :is-query-running="isQueryRunning"
-    :items-per-page="paginationLimit"
-    :total-items-count="totalItemsCount"
-    @load-more="loadPage(true)"
+    :has-more-data="hasMoreData"
+    @load-more="loadPage($event.index, $event.done)"
   />
-
-  <FAB mode="add" :router-link="{name: 'addFlight'}"/>
 </template>