Aktualizace balicku, strnakovani, uprava hlavni stranky

src/pages/profile/flight/FlightsPage.vue

@@ -6,24 +6,48 @@ import {useAppStore} from "stores/App";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {useFlightsStore} from "stores/Flights";
 import {storeToRefs} from "pinia";
+import {ref} from "vue";
 
 useAppStore().setPageTitle("Moje lety");
-useFlightsStore().fetch({});
-const {flights, isQueryRunning} = storeToRefs(useFlightsStore());
+
+const paginationLimit = ref(10);
+const paginationOffset = ref(0);
+
+const loadNextPage = (appendItems) => {
+  return useFlightsStore().fetch({
+    limit: paginationLimit.value,
+    offset: paginationOffset.value,
+    appendItems
+  }).then(() => {
+    paginationOffset.value += paginationLimit.value;
+  })
+}
+
+loadNextPage(false);
+const {flights, totalItemsCount, isQueryRunning} = storeToRefs(useFlightsStore());
 </script>
 
 <template>
   <FlightsListSkeleton v-if="isQueryRunning"/>
 
   <BasicInfoBanner
-    v-else-if="!isQueryRunning && flights.length === 0"
+    v-else-if="!isQueryRunning && totalItemsCount === 0"
     :route-add="{name: 'addFlight'}"
     label-add="Přidat let"
   >
     Nemáš zaznamenaný žádný let.
   </BasicInfoBanner>
 
-  <FlightsList v-else :items="flights" :public="false" />
+  <FlightsList
+    v-else
+    :items="flights"
+    :public="false"
+    :is-query-running="isQueryRunning"
+    :items-per-page="paginationLimit"
+    :total-items-count="totalItemsCount"
+    @load-more="loadNextPage(true)"
+
+  />
 
   <FAB mode="add" :router-link="{name: 'addFlight'}"/>
 </template>