lepsi infinite scroll

src/pages/profile/poi/PointsOfInterestPage.vue

@@ -9,27 +9,25 @@ import {storeToRefs} from "pinia";
 import {usePagination} from "src/composables/pagination";
 import ListFilters from "components/ListFilters.vue";
 import {onMounted} from "vue";
+import PrimaryAction from "components/PrimaryAction.vue";
 
 useAppStore().setPageTitle("Zajímavá místa");
 useAppStore().setBreadcrumbs([]);
 
-const {filters, loadPage, paginationLimit, paginationOffset} = usePagination({
-  fetchFunction: usePointsOfInterestStore().fetch
+const {loadPage, hasMoreData, handleFiltersChanged} = usePagination({
+  fetchFunction: usePointsOfInterestStore().fetch,
+  itemsPerPage: 20
 });
-onMounted(() => {
-  loadPage(false);
-})
-const handleFiltersChanged = (newFilters) => {
-  paginationOffset.value = 0;
-  filters.value = newFilters;
-  loadPage(false);
-}
 
-const {isQueryRunning, totalItemsCount, pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
+const {isQueryRunning, pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
 </script>
 
 <template>
-  <ListFilters @filters-changed="handleFiltersChanged"/>
+  <ListFilters @filters-changed="handleFiltersChanged">
+    <template #append>
+      <PrimaryAction mode="add" :router-link="{name: 'addPOI'}"/>
+    </template>
+  </ListFilters>
 
   <BasicListSkeleton :items="10" v-if="isQueryRunning && !pointsOfInterest.length"/>
   <BasicInfoBanner
@@ -45,10 +43,7 @@ const {isQueryRunning, totalItemsCount, pointsOfInterest} = storeToRefs(usePoint
     v-else
     :public="false"
     :items="pointsOfInterest"
-    :total-items-count="totalItemsCount"
-    :is-query-running="isQueryRunning"
-    :items-per-page="paginationLimit"
-    @load-more="loadPage(true)"
+    :has-more-data="hasMoreData"
+    @load-more="loadPage($event.index, $event.done)"
   />
-  <FAB :router-link="{name: 'addPOI'}" mode="add"/>
 </template>