lepsi infinite scroll

src/components/FAB.vue

@@ -13,7 +13,6 @@ const props = defineProps({
 })
 
 const config = computed(() => {
-
   if (props.mode === "add") {
     return {icon: "add", label: "Přidat"};
   } else if (props.mode === "edit") {
@@ -26,7 +25,11 @@ const config = computed(() => {
 </script>
 
 <template>
-  <q-page-sticky location="bottom" :offset="[30, 30]">
+  <q-page-sticky
+    location="bottom"
+    :offset="[30, 30]"
+    v-if="$q.screen.lt.md"
+  >
     <q-fab :icon="config.icon" color="primary" :label="config.label" @click="$router.push(props.routerLink)"/>
   </q-page-sticky>
 </template>

src/components/ListFilters.vue

@@ -38,14 +38,23 @@ onMounted(() => {
 
   if (search) {
     filters.value.search = search;
+  } else {
+    filters.value = {};
   }
 })
 </script>
 
 <template>
+  <div class="flex">
+    <div class="col-grow">
       <q-input v-model="filters.search" placeholder="Vyhledávání..." v-bind="commonProps" clearable>
         <template #prepend>
           <q-icon name="search"/>
         </template>
       </q-input>
+    </div>
+    <div class="flex items-center">
+      <slot name="append" class="full-height"/>
+    </div>
+  </div>
 </template>

src/components/LoadMoreList.vue

@@ -1,41 +0,0 @@
-<script setup>
-const props = defineProps({
-  totalItemsCount: {
-    type: Number,
-    required: true
-  },
-  itemsLength: {
-    type: Number,
-    required: true,
-  },
-  itemsPerPage: {
-    type: Number,
-    required: false,
-    default: 5,
-  },
-  isQueryRunning: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
-})
-
-
-const emits = defineEmits(["load-more"]);
-const loadMore = () => {
-  emits("load-more", props.itemsPerPage);
-}
-</script>
-
-<template>
-  <div>
-    <slot name="items"/>
-    <slot name="skeleton" v-if="isQueryRunning"/>
-
-    <div class="text-center q-my-md">
-      <q-btn color="primary" :loading="isQueryRunning" rounded size="lg" icon="expand_more" @click="loadMore()" v-if="totalItemsCount > itemsLength">
-        <slot name="loadMoreText"/>
-      </q-btn>
-    </div>
-  </div>
-</template>

src/components/PrimaryAction.vue

@@ -0,0 +1,46 @@
+<script setup>
+import {computed} from "vue";
+
+const props = defineProps({
+  mode: {
+    type: String,
+    required: true
+  },
+  routerLink: {
+    type: Object,
+    required: true
+  }
+})
+
+const config = computed(() => {
+  if (props.mode === "add") {
+    return {icon: "add", label: "Přidat"};
+  } else if (props.mode === "edit") {
+    return {icon: "edit", label: "Upravit"};
+  }
+
+  return {icon: "unknown", label: `Neznámý typ ${props.mode}`}
+})
+</script>
+
+<template>
+  <div>
+    <q-toolbar class="justify-end q-pr-none" v-if="$q.screen.gt.sm">
+      <q-btn color="primary" size="lg" :icon="config.icon" :to="props.routerLink">{{ config.label }}</q-btn>
+    </q-toolbar>
+
+    <q-page-sticky
+      location="bottom"
+      :offset="[30, 30]"
+      v-else
+    >
+      <q-fab
+        :icon="config.icon"
+        color="primary"
+        :label="config.label"
+        @click="$router.push(props.routerLink)"
+      />
+    </q-page-sticky>
+    </div>
+</template>
+

src/components/aircrafts/AircraftsList.vue

@@ -1,33 +1,24 @@
 <script setup>
-import LoadMoreList from "components/LoadMoreList.vue";
+import {useInfiniteScroll} from "src/composables/pagination";
-import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
-import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 
 const props = defineProps({
   items: {
     type: Array,
     required: true
   },
-  totalItemsCount: {
+  ...useInfiniteScroll().propsDef
-    type: Number,
-    required: true
-  },
-  itemsPerPage: {
-    type: Number,
-    required: false,
-    default: 5,
-  },
-  isQueryRunning: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
 });
+
+const emits = defineEmits([...useInfiniteScroll().emitsDef])
+const {emitLoadMore, hasMoreData} = useInfiniteScroll(emits, props)
 </script>
 
 <template>
-  <LoadMoreList :total-items-count="totalItemsCount" :items-length="items.length">
+  <q-infinite-scroll
-    <template #items>
+    :disable="!hasMoreData"
+    @load="emitLoadMore"
+    :offset="250"
+  >
     <q-list bordered separator>
       <q-item
         clickable
@@ -57,12 +48,6 @@ const props = defineProps({
         </q-item-section>
       </q-item>
     </q-list>
-    </template>
+  </q-infinite-scroll>
-    <template #skeleton>
+
-      <BasicListSkeleton :items="itemsPerPage"/>
-    </template>
-    <template #loadMoreText>
-      Další
-    </template>
-  </LoadMoreList>
 </template>

src/components/flightPlans/FlightPlansList.vue

@@ -1,16 +1,27 @@
 <script setup>
 import {formatDatetime} from "src/composables/datetimeUtils";
+import {useInfiniteScroll} from "src/composables/pagination";
 
 const props = defineProps({
   items: {
     type: Array,
     required: true
-  }
+  },
-})
+
+  ...useInfiniteScroll().propsDef
+});
+
+const emits = defineEmits([...useInfiniteScroll().emitsDef])
+const {emitLoadMore, hasMoreData} = useInfiniteScroll(emits, props)
 
 </script>
 
 <template>
+  <q-infinite-scroll
+    :disable="!hasMoreData"
+    @load="emitLoadMore"
+    :offset="250"
+  >
     <q-list bordered separator>
       <q-item
         clickable
@@ -33,4 +44,5 @@ const props = defineProps({
         </q-item-section>
       </q-item>
     </q-list>
+  </q-infinite-scroll>
 </template>

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 {useInfiniteScroll} from "src/composables/pagination";
-import {computed} from "vue";
-import LoadMoreList from "components/LoadMoreList.vue";
-import {pluralize} from "../../composables/utils";
 
 const props = defineProps({
   items: {
@@ -16,37 +13,26 @@ const props = defineProps({
     type: Boolean,
     required: true
   },
-  totalItemsCount: {
+  ...useInfiniteScroll().propsDef
-    type: Number,
-    required: true
-  },
-  itemsPerPage: {
-    type: Number,
-    required: false,
-    default: 5,
-  },
-  isQueryRunning: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
 });
 
+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">
+  <q-infinite-scroll
-    <template #items>
+    :disable="!hasMoreData"
+    @load="emitLoadMore"
+    :offset="250"
+  >
     <q-list bordered separator>
       <q-item
         v-for="flight of items" :key="flight"
@@ -99,13 +85,10 @@ const loadMoreCount = computed(() => {
         </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>
+  </q-infinite-scroll>
-      <FlightsListSkeleton :items="itemsPerPage"/>
-    </template>
-    <template #loadMoreText>
-      Načíst {{ pluralize(loadMoreCount, 'jeden let', `další ${loadMoreCount} lety`, `dalších ${loadMoreCount} letů`) }}
-    </template>
-  </LoadMoreList>
-
 </template>

src/components/poi/POIList.vue

@@ -1,6 +1,5 @@
 <script setup>
-import LoadMoreList from "components/LoadMoreList.vue";
+import {useInfiniteScroll} from "src/composables/pagination";
-import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 
 const props = defineProps({
   items: {
@@ -11,20 +10,7 @@ const props = defineProps({
     type: Boolean,
     required: true
   },
-  totalItemsCount: {
+  ...useInfiniteScroll().propsDef,
-    type: Number,
-    required: true
-  },
-  itemsPerPage: {
-    type: Number,
-    required: false,
-    default: 5,
-  },
-  isQueryRunning: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
 });
 
 const getRoute = (item) => {
@@ -33,10 +19,17 @@ const getRoute = (item) => {
   else
     return {name: "poiDetail", params: {id: item.id}}
 };
+
+const emits = defineEmits(useInfiniteScroll().emitsDef)
+const {emitLoadMore, hasMoreData} = useInfiniteScroll(emits, props)
+
 </script>
 <template>
-  <LoadMoreList :total-items-count="totalItemsCount" :items-length="items.length">
+  <q-infinite-scroll
-    <template #items>
+    :disable="!hasMoreData"
+    @load="emitLoadMore"
+    :offset="250"
+  >
     <q-list bordered separator>
       <q-item clickable v-for="poi of items" :key="poi" :to="getRoute(poi)">
         <q-item-section avatar>
@@ -56,12 +49,5 @@ const getRoute = (item) => {
         </q-item-section>
       </q-item>
     </q-list>
-    </template>
+  </q-infinite-scroll>
-    <template #skeleton>
-      <BasicListSkeleton :items="itemsPerPage"/>
-    </template>
-    <template #loadMoreText>
-      Další
-    </template>
-  </LoadMoreList>
 </template>

src/composables/pagination.js

@@ -1,4 +1,4 @@
-import {ref} from "vue";
+import {computed, ref} from "vue";
 
 
 export const usePagination = ({fetchFunction, itemsPerPage = 10}) => {
@@ -9,19 +9,71 @@ export const usePagination = ({fetchFunction, itemsPerPage = 10}) => {
   const paginationLimit = ref(itemsPerPage);
   const paginationOffset = ref(0);
   const filters = ref({});
+  const hasMoreData = ref(true)
 
-  const loadPage = (appendItems) => {
+  const loadFirstPage = () => {
+    paginationOffset.value = 0
     return fetchFunction({
       ...filters.value,
       limit: paginationLimit.value,
-      offset: paginationOffset.value,
+      offset: 0,
-      appendItems
+      appendItems: false
-    }).then(() => {
+    }).then((data) => {
+      console.log("first page", data, data.length, paginationLimit.value)
       paginationOffset.value += paginationLimit.value;
+      hasMoreData.value = data.length === paginationLimit.value;
     })
   }
 
+  const loadPage = (index, done) => {
+    return fetchFunction({
+      ...filters.value,
+      appendItems: true,
+      limit: paginationLimit.value,
+      offset: paginationOffset.value,
+    }).then((data) => {
+            console.log("load page", data, data.length, paginationOffset.value, paginationLimit.value)
+
+      paginationOffset.value += paginationLimit.value;
+      hasMoreData.value = data.length === paginationLimit.value;
+      if (done) done()
+    })
+  }
+
+  const handleFiltersChanged = (newFilters) => {
+    filters.value = newFilters;
+    loadFirstPage()
+  }
+
   return {
-    paginationOffset, paginationLimit, filters, loadPage
+    paginationOffset, paginationLimit, handleFiltersChanged, filters, loadPage, loadFirstPage, hasMoreData
   }
 }
+
+export const useLoading = (promiseGetter) => {
+  const loading = ref(false)
+  const load = () => {
+    loading.value = true
+    return promiseGetter().finally(() => loading.value = false)
+  }
+
+  return {loading, load}
+}
+
+
+export const useInfiniteScroll = (emits, props) => {
+  const emitsDef = ["load-more"]
+  const propsDef = {
+    hasMoreData: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  }
+
+  const hasMoreData = computed(() => props.hasMoreData)
+  const emitLoadMore = (index, done) => emits("load-more", {index, done});
+
+  return {emitsDef, propsDef, hasMoreData, emitLoadMore}
+}
+

src/graphql/fragments/flight.js

@@ -30,7 +30,6 @@ fragment flightFullInfo on Flight {
   durationMinCalculated
   isPublic
   flightPlanId
-
   socialImageUrl
   titlePhoto {
     thumbnailUrl

src/graphql/queries/aircrafts.js

@@ -2,19 +2,17 @@ import gql from "graphql-tag";
 import {FRAGMENT_AIRCRAFT_FULL_INFO, FRAGMENT_AIRCRAFT_FULL_PRIVATE_INFO, FRAGMENT_AIRCRAFT_LIST_INFO} from "src/graphql/fragments/aircraft";
 
 export const AIRCRAFTS_LIST = gql`
-query AircraftsList ($limit: Int!, $offset: Int) {
+query AircraftsList ($search: String, $limit: Int!, $offset: Int) {
-    aircrafts(limit: $limit, offset: $offset) {
+    aircrafts(search: $search, limit: $limit, offset: $offset) {
       totalItemsCount
       items {
         ...aircraftListInfo
       }
     }
   }
-
 ${FRAGMENT_AIRCRAFT_LIST_INFO}
 `;
 
-
 export const AIRCRAFT_DETAIL = gql`
 query AircraftDetail($id: Int!) {
   aircraft(id: $id) {

src/graphql/queries/flightPlan.js

@@ -2,13 +2,16 @@ import gql from "graphql-tag";
 import {FRAGMENT_FLIGHT_PLAN_FULL_INFO, FRAGMENT_FLIGHT_PLAN_LIST_INFO} from "src/graphql/fragments/flightPlan";
 
 export const FLIGHT_PLANS_LIST = gql`
-query flightPlansList {
+  query flightPlansList($search: String, $limit: Int!, $offset: Int) {
-  flightPlans {
+    flightPlans(search: $search, limit: $limit, offset: $offset) {
+      totalItemsCount
+      items {
         ...flightPlanListInfo
       }
-}
+    }
+  }
 
-${FRAGMENT_FLIGHT_PLAN_LIST_INFO}
+  ${FRAGMENT_FLIGHT_PLAN_LIST_INFO}
 `;
 
 export const FLIGHT_PLAN_DETAIL = gql`

src/graphql/queries/flights.js

@@ -5,12 +5,13 @@ import {FRAGMENT_PHOTO_FULL_INFO} from "src/graphql/fragments/photo";
 import {FRAGMENT_COPILOT_PUBLIC_INFO} from "src/graphql/fragments/copilot";
 
 export const FLIGHTS_LIST = gql`
-query FlightsList($eventId: Int, $aircraftId: Int, $copilotId: Int, $pointOfInterestId: Int, $limit: Int!, $offset: Int) {
+query FlightsList($eventId: Int, $aircraftId: Int, $copilotId: Int, $pointOfInterestId: Int, $search: String, $limit: Int!, $offset: Int) {
   flights(
     eventId: $eventId,
     aircraftId: $aircraftId,
     copilotId: $copilotId,
     pointOfInterestId: $pointOfInterestId,
+    search: $search,
     limit: $limit,
     offset: $offset
   ) {

src/pages/profile/aircraft/AircraftsPage.vue

@@ -1,31 +1,34 @@
 <script setup>
 import AircraftsList from "components/aircrafts/AircraftsList.vue";
-import FAB from "components/FAB.vue";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {useAircraftsStore} from "stores/Aircrafts";
 import {storeToRefs} from "pinia";
 import {useAppStore} from "stores/App";
 import {usePagination} from "src/composables/pagination";
-import {onMounted} from "vue";
+import ListFilters from "components/ListFilters.vue";
+import PrimaryAction from "components/PrimaryAction.vue";
 
 useAppStore().setPageTitle("Letadla");
 useAppStore().setBreadcrumbs([])
 
+const {loadPage, hasMoreData, handleFiltersChanged} = usePagination({fetchFunction: useAircraftsStore().fetch});
 const {aircrafts, totalItemsCount, isQueryRunning} = storeToRefs(useAircraftsStore());
-const {filters, loadPage, paginationLimit} = usePagination({fetchFunction: useAircraftsStore().fetch});
-onMounted(() => {
-  loadPage(false);
-})
 </script>
 
 <template>
-  <BasicListSkeleton :items="paginationLimit" v-if="isQueryRunning && !totalItemsCount"/>
+  <ListFilters @filters-changed="handleFiltersChanged">
+    <template #append>
+      <PrimaryAction mode="add" :router-link="{name: 'addAircraft'}"/>
+    </template>
+  </ListFilters>
+
+  <BasicListSkeleton :items="5" v-if="isQueryRunning && !totalItemsCount"/>
 
   <BasicInfoBanner
     v-if="!isQueryRunning && totalItemsCount === 0"
     :route-add="{name: 'addAircraft'}"
-    label-add="Vytvořit letadlo"
+    label-add="Přidat letadlo"
   >
     Aktuálně nemáš přidané žádné letadlo. Přidej se k existující organizaci nebo si sem ulož vlastní letadlo.
     <br>
@@ -35,13 +38,8 @@ onMounted(() => {
   <AircraftsList
     v-else
     :items="aircrafts"
-    :total-items-count="totalItemsCount"
-    :is-query-running="isQueryRunning"
-    :items-per-page="paginationLimit"
     :public="true"
-    class="q-mb-xl"
+    :has-more-data="hasMoreData"
-    @load-more="loadPage(true)"
+    @load-more="loadPage($event.index, $event.done)"
   />
-
-  <FAB mode="add" :router-link="{name: 'addAircraft'}"/>
 </template>

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});
+const {loadPage, hasMoreData, handleFiltersChanged} = usePagination({fetchFunction: useFlightsStore().fetch});
-onMounted(() => {
+const {flights, isQueryRunning} = storeToRefs(useFlightsStore());
-  loadPage(false);
-});
-const {flights, totalItemsCount, 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"
+    :has-more-data="hasMoreData"
-    :items-per-page="paginationLimit"
+    @load-more="loadPage($event.index, $event.done)"
-    :total-items-count="totalItemsCount"
-    @load-more="loadPage(true)"
   />
-
-  <FAB mode="add" :router-link="{name: 'addFlight'}"/>
 </template>

src/pages/profile/flightPlanner/FlightPlansPage.vue

@@ -1,12 +1,13 @@
 <script setup>
 import {useFlightPlansStore} from "stores/FlightPlans";
 import {storeToRefs} from "pinia";
-import {onMounted} from "vue";
 import {useAppStore} from "stores/App";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
-import FAB from "components/FAB.vue";
 import FlightPlansList from "components/flightPlans/FlightPlansList.vue";
+import ListFilters from "components/ListFilters.vue";
+import PrimaryAction from "components/PrimaryAction.vue";
+import {usePagination} from "src/composables/pagination";
 
 useAppStore().setPageTitle("Nový plán");
 useAppStore().setBreadcrumbs([
@@ -14,14 +15,20 @@ useAppStore().setBreadcrumbs([
   {label: "Plánované lety"},
 ]);
 
-onMounted(() => {
+const {loadPage, hasMoreData, handleFiltersChanged} = usePagination({
-  useFlightPlansStore().fetch();
+  fetchFunction: useFlightPlansStore().fetch,
+  itemsPerPage: 20
 });
-
 const {flightPlans, isQueryRunning} = storeToRefs(useFlightPlansStore());
 </script>
 
 <template>
+  <ListFilters @filters-changed="handleFiltersChanged">
+    <template #append>
+      <PrimaryAction mode="add" :router-link="{name: 'newFlightPlan'}"/>
+    </template>
+  </ListFilters>
+
   <BasicListSkeleton :items=5 v-if="isQueryRunning || !flightPlans"/>
 
   <BasicInfoBanner
@@ -31,6 +38,10 @@ const {flightPlans, isQueryRunning} = storeToRefs(useFlightPlansStore());
     Aktuálně nemáš žádné naplánované lety.
   </BasicInfoBanner>
 
-  <FlightPlansList :items="flightPlans" v-else/>
+  <FlightPlansList
-  <FAB :router-link="{name: 'newFlightPlan'}" mode="add"/>
+    v-else
+    :items="flightPlans"
+    :has-more-data="hasMoreData"
+    @load-more="loadPage($event.index, $event.done)"
+  />
 </template>

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({
+const {loadPage, hasMoreData, handleFiltersChanged} = usePagination({
-  fetchFunction: usePointsOfInterestStore().fetch
+  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"
+    :has-more-data="hasMoreData"
-    :is-query-running="isQueryRunning"
+    @load-more="loadPage($event.index, $event.done)"
-    :items-per-page="paginationLimit"
-    @load-more="loadPage(true)"
   />
-  <FAB :router-link="{name: 'addPOI'}" mode="add"/>
 </template>

src/pages/public/poi/PointsOfInterestPage.vue

@@ -17,21 +17,11 @@ useMeta(() => metaData({
   title: "Místa"
 }))
 
-const {filters, loadPage, paginationOffset, paginationLimit} = usePagination({
+const {loadPage, paginationLimit, hasMoreData, handleFiltersChanged} = usePagination({
   fetchFunction: usePointsOfInterestStore().fetchPublic
 });
 
-onMounted(() => {
+const {pointsOfInterest, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
-  loadPage(false);
-});
-
-const handleFiltersChanged = (newFilters) => {
-  paginationOffset.value = 0;
-  filters.value = newFilters;
-  loadPage(false);
-}
-
-const {pointsOfInterest, totalItemsCount, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
 </script>
 
 <template>
@@ -43,10 +33,8 @@ const {pointsOfInterest, totalItemsCount, isQueryRunning} = storeToRefs(usePoint
       v-else
       :public="true"
       :items="pointsOfInterest"
-      :total-items-count="totalItemsCount"
+      :has-more-data="hasMoreData"
-      :is-query-running="isQueryRunning"
+      @load-more="loadPage($event.index, $event.done)"
-      :items-per-page="paginationLimit"
-      @load-more="loadPage(true)"
     />
   </div>
 </template>

src/stores/Aircrafts.js

@@ -29,11 +29,11 @@ export const useAircraftsStore = defineStore('Aircrafts', () => {
     return item;
   });
 
-  const fetch = ({appendItems, limit = 100, offset = 0}) => query({
+  const fetch = ({search, appendItems, limit = 100, offset = 0}) => query({
     isQueryRunning,
     query: AIRCRAFTS_LIST,
-    variables: {limit, offset}
+    variables: {search, limit, offset}
-  }).then(data => setItems(data, appendItems, aircrafts, totalItemsCount));
+}).then(data => setItems(data, appendItems, aircrafts, totalItemsCount));
 
   const create = (input) => mutate({
     isMutationRunning,
@@ -41,6 +41,7 @@ export const useAircraftsStore = defineStore('Aircrafts', () => {
     variables: {input}
   }).then(item => {
     aircrafts.value.push(item);
+    totalItemsCount.value++;
     return item;
   })
 

src/stores/FlightPlans.js

@@ -1,7 +1,7 @@
 import {defineStore} from 'pinia'
 import {FLIGHT_PLAN_DETAIL, FLIGHT_PLANS_LIST} from "src/graphql/queries/flightPlan";
 import {CREATE_FLIGHT_PLAN, EDIT_FLIGHT_PLAN} from "src/graphql/mutations/flightPlan";
-import {mutate, query, updateInItems} from "stores/helpers";
+import {mutate, query, setItems, updateInItems} from "stores/helpers";
 import {ref} from "vue";
 
 export const useFlightPlansStore = defineStore('FlightPlans', () => {
@@ -9,6 +9,7 @@ export const useFlightPlansStore = defineStore('FlightPlans', () => {
   const flightPlans = ref([]);
   const isMutationRunning = ref(false);
   const isQueryRunning = ref(false);
+  const totalItemsCount = ref(0);
 
   const fetchDetail = (id) => {
     return query({
@@ -26,12 +27,12 @@ export const useFlightPlansStore = defineStore('FlightPlans', () => {
     }).then(item => flightPlan.value = item);
   }
 
-  const fetch = () => {
+  const fetch = ({search, appendItems, offset, limit}) => query({
-    return query({
     isQueryRunning,
     query: FLIGHT_PLANS_LIST,
-    }).then(items => flightPlans.value = items);
+    variables: {search, limit, offset}
-  }
+  }).then(data => setItems(data, appendItems, flightPlans, totalItemsCount));
+
 
   const create = (input) => {
     return mutate({
@@ -40,6 +41,7 @@ export const useFlightPlansStore = defineStore('FlightPlans', () => {
       variables: {input},
     }).then(item => {
       flightPlans.value.push(item);
+      totalItemsCount.value++;
       return item;
     })
   }

src/stores/Flights.js

@@ -37,11 +37,13 @@ export const useFlightsStore = defineStore('Flights', () => {
       pointOfInterestId,
       offset,
       limit,
+      search,
       appendItems
     }) => query({
     isQueryRunning,
     query: FLIGHTS_LIST,
     variables: {
+      search,
       eventId,
       aircraftId,
       copilotId,
@@ -63,6 +65,7 @@ export const useFlightsStore = defineStore('Flights', () => {
     variables: {input},
   }).then(item => {
     flights.value.push(item);
+    totalItemsCount.value++;
     return item;
   })
 

src/stores/PointsOfInterest.js

@@ -30,7 +30,7 @@ export const usePointsOfInterestStore = defineStore('PointsOfInterest', () => {
     return item;
   });
 
-  const fetch = ({limit = 100, offset = 0, appendItems, search = undefined}) => query({
+  const fetch = ({limit, offset, appendItems, search = undefined}) => query({
     isQueryRunning,
     query: POI_LIST,
     variables: {limit, offset, search}