From 5cff3580b004e33913d4b11b4fcf67f7282697b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kv=C3=A1=C4=8Dek?= <michal.kvacek@performax.cz>
Date: Sat, 9 Mar 2024 23:16:37 +0100
Subject: [PATCH] Pagination prepsano do inteligentnejsi composable

---
 src/composables/pagination.js                 | 31 ++++++++++---------
 .../profile/aircraft/AircraftDetailPage.vue   |  3 +-
 src/pages/profile/aircraft/AircraftsPage.vue  |  6 ++--
 .../profile/copilot/CopilotDetailPage.vue     |  7 ++---
 src/pages/profile/copilot/CopilotsPage.vue    |  5 ++-
 src/pages/profile/event/EventDetailPage.vue   |  3 +-
 src/pages/profile/flight/FlightsPage.vue      |  4 ++-
 .../profile/poi/PointOfInterestDetailPage.vue |  8 ++---
 .../profile/poi/PointsOfInterestPage.vue      |  4 ++-
 .../public/aircraft/AircraftDetailPage.vue    |  3 +-
 .../public/pilotProfile/CopilotDetailPage.vue |  9 ++++--
 .../public/pilotProfile/EventDetailPage.vue   |  3 +-
 .../public/pilotProfile/FlightsListPage.vue   |  3 +-
 .../public/poi/PointOfInterestDetailPage.vue  |  3 +-
 src/pages/public/poi/PointsOfInterestPage.vue |  3 +-
 src/stores/App.js                             |  6 ----
 16 files changed, 56 insertions(+), 45 deletions(-)

diff --git a/src/composables/pagination.js b/src/composables/pagination.js
index cd6ace4..cce2948 100644
--- a/src/composables/pagination.js
+++ b/src/composables/pagination.js
@@ -1,20 +1,23 @@
 import {ref} from "vue";
 
 
-// TODO: predelat na usePagination() composable!
+export const usePagination = () => {
+  const paginationLimit = ref(10);
+  const paginationOffset = ref(0);
+  const filters = ref({});
+  const loadPage = ({fetchFunc, appendItems}) => {
+    return fetchFunc({
+      ...filters.value,
+      limit: paginationLimit.value,
+      offset: paginationOffset.value,
+      appendItems
+    }).then(() => {
+      paginationOffset.value += paginationLimit.value;
+    })
+  }
 
-export const paginationLimit = ref(10);
-export const paginationOffset = ref(0);
 
-export const filters = ref({});
-
-export const loadPage = ({fetchFunc, appendItems}) => {
-  return fetchFunc({
-    ...filters.value,
-    limit: paginationLimit.value,
-    offset: paginationOffset.value,
-    appendItems
-  }).then(() => {
-    paginationOffset.value += paginationLimit.value;
-  })
+  return {
+    paginationOffset, paginationLimit, filters, loadPage
+  }
 }
diff --git a/src/pages/profile/aircraft/AircraftDetailPage.vue b/src/pages/profile/aircraft/AircraftDetailPage.vue
index c94cc5f..14843ed 100644
--- a/src/pages/profile/aircraft/AircraftDetailPage.vue
+++ b/src/pages/profile/aircraft/AircraftDetailPage.vue
@@ -16,7 +16,7 @@ import {useLoggedUserStore} from "stores/LoggedUser";
 import {useFlightsStore} from "stores/Flights";
 import {toggleVisibility} from "src/composables/form/formHandling";
 import ContentCardEditButton from "components/ContentCardEditButton.vue";
-import {filters, loadPage, paginationLimit} from "src/composables/pagination";
+import {usePagination} from "src/composables/pagination";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
 import CopyLinkButton from "components/inputs/CopyLinkButton.vue";
@@ -53,6 +53,7 @@ const togglePublicVisibility = (variables) => toggleVisibility({
   $q, store: useAircraftsStore(), object: aircraft.value, variables
 });
 
+const {filters, loadPage, paginationLimit} = usePagination();
 filters.value = {aircraftId: aircraftId};
 const loadNextFlightsPage = (appendItems) => loadPage({
   fetchFunc: useFlightsStore().fetch,
diff --git a/src/pages/profile/aircraft/AircraftsPage.vue b/src/pages/profile/aircraft/AircraftsPage.vue
index da064e4..d888d48 100644
--- a/src/pages/profile/aircraft/AircraftsPage.vue
+++ b/src/pages/profile/aircraft/AircraftsPage.vue
@@ -6,13 +6,11 @@ import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {useAircraftsStore} from "stores/Aircrafts";
 import {storeToRefs} from "pinia";
 import {useAppStore} from "stores/App";
-import FlightsList from "components/flights/FlightsList.vue";
-import {ref} from "vue";
-import {useFlightsStore} from "stores/Flights";
-import {loadPage, paginationLimit} from "src/composables/pagination";
+import {usePagination} from "src/composables/pagination";
 
 useAppStore().setPageTitle("Letadla");
 
+const {filters, loadPage, paginationLimit} = usePagination();
 const loadNextAircraftsPage = (appendItems) => loadPage({
   fetchFunc: useAircraftsStore().fetch, appendItems
 });
diff --git a/src/pages/profile/copilot/CopilotDetailPage.vue b/src/pages/profile/copilot/CopilotDetailPage.vue
index 3655668..09e8ebd 100644
--- a/src/pages/profile/copilot/CopilotDetailPage.vue
+++ b/src/pages/profile/copilot/CopilotDetailPage.vue
@@ -1,6 +1,5 @@
 <script setup>
 import {useRoute} from "vue-router";
-import {onMounted} from "vue";
 import CopilotDetailSkeleton from "components/copilots/skeletons/CopilotDetailSkeleton.vue";
 import {useAppStore} from "stores/App";
 import FlightsList from "components/flights/FlightsList.vue";
@@ -8,15 +7,14 @@ import {useCopilotsStore} from "stores/Copilots";
 import {storeToRefs} from "pinia";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
 import ContentCard from "components/ContentCard.vue";
-import {filters, loadPage, paginationLimit} from "src/composables/pagination";
+import {usePagination} from "src/composables/pagination";
 import {useFlightsStore} from "stores/Flights";
 import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
-import {useMeta, useQuasar} from "quasar";
+import {useQuasar} from "quasar";
 import {useLoggedUserStore} from "stores/LoggedUser";
 import PublishButton from "components/inputs/PublishButton.vue";
 import CopyLinkButton from "components/inputs/CopyLinkButton.vue";
 import {toggleVisibility} from "src/composables/form/formHandling";
-import {metaData} from "src/composables/meta";
 
 const copilotId = parseInt(useRoute().params.id);
 useCopilotsStore().fetchDetail(copilotId).then(() => {
@@ -32,6 +30,7 @@ const togglePublicVisibility = (variables) => toggleVisibility({
   $q, store: useCopilotsStore(), object: copilot.value, variables
 });
 
+const {filters, loadPage, paginationLimit} = usePagination();
 filters.value = {copilotId: copilotId};
 const loadNextFlightsPage = (appendItems) => loadPage({
   fetchFunc: useFlightsStore().fetch, appendItems
diff --git a/src/pages/profile/copilot/CopilotsPage.vue b/src/pages/profile/copilot/CopilotsPage.vue
index 059bffd..9711dcc 100644
--- a/src/pages/profile/copilot/CopilotsPage.vue
+++ b/src/pages/profile/copilot/CopilotsPage.vue
@@ -6,9 +6,12 @@ import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {useCopilotsStore} from "stores/Copilots";
 import {storeToRefs} from "pinia";
+import {onMounted} from "vue";
 
-useCopilotsStore().fetch();
 useAppStore().setPageTitle("Spolucestující");
+onMounted(() => {
+  useCopilotsStore().fetch();
+});
 
 const {isQueryRunning, copilots} = storeToRefs(useCopilotsStore());
 </script>
diff --git a/src/pages/profile/event/EventDetailPage.vue b/src/pages/profile/event/EventDetailPage.vue
index 36d64bb..29aa121 100644
--- a/src/pages/profile/event/EventDetailPage.vue
+++ b/src/pages/profile/event/EventDetailPage.vue
@@ -7,7 +7,7 @@ import FAB from "components/FAB.vue";
 import FlightsList from "components/flights/FlightsList.vue";
 import {useEventsStore} from "stores/Events";
 import {storeToRefs} from "pinia";
-import {filters, loadPage, paginationLimit} from "src/composables/pagination";
+import {usePagination} from "src/composables/pagination";
 import {useFlightsStore} from "stores/Flights";
 import PublishButton from "components/inputs/PublishButton.vue";
 import {useLoggedUserStore} from "stores/LoggedUser";
@@ -37,6 +37,7 @@ const togglePublicVisibility = (variables) => toggleVisibility({
 
 const {isQueryRunning, event} = storeToRefs(useEventsStore());
 
+const {filters, loadPage, paginationLimit} = usePagination();
 filters.value = {eventId: eventId}
 const loadNextFlightsPage = (appendItems) => loadPage({
   fetchFunc: useFlightsStore().fetch, appendItems
diff --git a/src/pages/profile/flight/FlightsPage.vue b/src/pages/profile/flight/FlightsPage.vue
index 299fa85..98d8ac8 100644
--- a/src/pages/profile/flight/FlightsPage.vue
+++ b/src/pages/profile/flight/FlightsPage.vue
@@ -6,11 +6,13 @@ import {useAppStore} from "stores/App";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {useFlightsStore} from "stores/Flights";
 import {storeToRefs} from "pinia";
-import {loadPage, paginationLimit} from "src/composables/pagination";
+import {usePagination} from "src/composables/pagination";
 import {onMounted} from "vue";
 
 useAppStore().setPageTitle("Moje lety");
 
+const {loadPage, paginationLimit} = usePagination();
+
 const loadNextPage = (appendItems) => loadPage({
   fetchFunc: useFlightsStore().fetch, appendItems
 });
diff --git a/src/pages/profile/poi/PointOfInterestDetailPage.vue b/src/pages/profile/poi/PointOfInterestDetailPage.vue
index c0374c9..d020090 100644
--- a/src/pages/profile/poi/PointOfInterestDetailPage.vue
+++ b/src/pages/profile/poi/PointOfInterestDetailPage.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {useRoute, useRouter} from "vue-router";
+import {useRoute} from "vue-router";
 import POIDetailSkeleton from "components/poi/skeletons/POIDetailSkeleton.vue";
 import {useAppStore} from "stores/App";
 import EmbeddedMap from "components/map/EmbeddedMap.vue";
@@ -11,12 +11,11 @@ import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
 import ContentCard from "components/ContentCard.vue";
 import {toggleVisibility} from "src/composables/form/formHandling";
-import {copyToClipboard, useQuasar} from "quasar";
-import {successObject} from "src/composables/dialog";
+import { useQuasar} from "quasar";
 import ContentCardEditButton from "components/ContentCardEditButton.vue";
 import {useFlightsStore} from "stores/Flights";
 import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
-import {filters, loadPage, paginationLimit} from "src/composables/pagination";
+import {usePagination} from "src/composables/pagination";
 import PublishButton from "components/inputs/PublishButton.vue";
 import CopyLinkButton from "components/inputs/CopyLinkButton.vue";
 
@@ -39,6 +38,7 @@ const togglePublicVisibility = (variables) => toggleVisibility({
   $q, store: usePointsOfInterestStore(), object: pointOfInterest.value, variables
 });
 
+const {filters, loadPage, paginationLimit} = usePagination();
 filters.value = {pointOfInterestId: poiId};
 const loadNextFlightsPage = (appendItems) => loadPage({
   fetchFunc: useFlightsStore().fetch,
diff --git a/src/pages/profile/poi/PointsOfInterestPage.vue b/src/pages/profile/poi/PointsOfInterestPage.vue
index 0dea3aa..c0ac74c 100644
--- a/src/pages/profile/poi/PointsOfInterestPage.vue
+++ b/src/pages/profile/poi/PointsOfInterestPage.vue
@@ -6,11 +6,13 @@ import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 import {storeToRefs} from "pinia";
-import {filters, loadPage, paginationLimit, paginationOffset} from "src/composables/pagination";
+import {usePagination} from "src/composables/pagination";
 import ListFilters from "components/ListFilters.vue";
 
 useAppStore().setPageTitle("Zajímavá místa");
 
+
+const {filters, loadPage, paginationLimit, paginationOffset} = usePagination();
 paginationLimit.value = 15;
 const loadNextPage = (appendItems) => loadPage({
   fetchFunc: usePointsOfInterestStore().fetch, appendItems
diff --git a/src/pages/public/aircraft/AircraftDetailPage.vue b/src/pages/public/aircraft/AircraftDetailPage.vue
index 3cde710..ac71b60 100644
--- a/src/pages/public/aircraft/AircraftDetailPage.vue
+++ b/src/pages/public/aircraft/AircraftDetailPage.vue
@@ -24,7 +24,7 @@ import {useFlightsStore} from "stores/Flights";
 import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
-import {filters, loadPage, paginationLimit} from "src/composables/pagination";
+import {usePagination} from "src/composables/pagination";
 
 const $q = useQuasar();
 const $router = useRouter();
@@ -48,6 +48,7 @@ useAppStore().setBreadcrumbs([
   {label: aircraft.value.callSign}
 ]);
 
+const {filters, loadPage, paginationLimit} = usePagination();
 
 filters.value = {aircraftId: aircraft.value.id};
 const loadNextFlightsPage = (appendItems) => loadPage({
diff --git a/src/pages/public/pilotProfile/CopilotDetailPage.vue b/src/pages/public/pilotProfile/CopilotDetailPage.vue
index 4733b2b..e67a891 100644
--- a/src/pages/public/pilotProfile/CopilotDetailPage.vue
+++ b/src/pages/public/pilotProfile/CopilotDetailPage.vue
@@ -3,7 +3,10 @@ import {useCopilotsStore} from "stores/Copilots";
 
 export default {
   preFetch({currentRoute}) {
-    return useCopilotsStore().fetchPublicDetail({urlSlug: currentRoute.params.copilotSlug, username: currentRoute.params.username});
+    return useCopilotsStore().fetchPublicDetail({
+      urlSlug: currentRoute.params.copilotSlug,
+      username: currentRoute.params.username
+    });
   }
 }
 </script>
@@ -20,8 +23,8 @@ import PhotoGallery from "components/photos/PhotoGallery.vue";
 import {useMeta} from "quasar";
 import {metaData} from "src/composables/meta";
 import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
-import {filters, loadPage, paginationLimit} from "src/composables/pagination";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
+import {usePagination} from "src/composables/pagination";
 
 const props = defineProps({
   pilot: {
@@ -48,7 +51,7 @@ useMeta(() => metaData({
   image: copilot.value.titleImage?.url
 }));
 
-
+const {filters, loadPage, paginationLimit} = usePagination();
 filters.value = {copilotId: copilot.value.id};
 const loadNextFlightsPage = (appendItems) => loadPage({
   fetchFunc: useFlightsStore().fetchPublic, appendItems
diff --git a/src/pages/public/pilotProfile/EventDetailPage.vue b/src/pages/public/pilotProfile/EventDetailPage.vue
index 339de67..ad6867d 100644
--- a/src/pages/public/pilotProfile/EventDetailPage.vue
+++ b/src/pages/public/pilotProfile/EventDetailPage.vue
@@ -13,7 +13,7 @@ import {useAppStore} from "stores/App";
 import EventDetailSkeleton from "components/event/skeletons/EventDetailSkeleton.vue";
 import FlightsList from "components/flights/FlightsList.vue";
 import {storeToRefs} from "pinia";
-import {filters, loadPage, paginationLimit} from "src/composables/pagination";
+import {usePagination} from "src/composables/pagination";
 import {useFlightsStore} from "stores/Flights";
 import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
 import {useMeta} from "quasar";
@@ -42,6 +42,7 @@ useMeta(() => metaData({
   description: event.value.description
 }))
 
+const {filters, loadPage, paginationLimit} = usePagination();
 filters.value = {username: props.pilot.publicUsername, eventId: event.value.id};
 const loadNextFlightsPage = (appendItems) => loadPage({
   fetchFunc: useFlightsStore().fetchPublic, appendItems
diff --git a/src/pages/public/pilotProfile/FlightsListPage.vue b/src/pages/public/pilotProfile/FlightsListPage.vue
index f1e58bc..8b37883 100644
--- a/src/pages/public/pilotProfile/FlightsListPage.vue
+++ b/src/pages/public/pilotProfile/FlightsListPage.vue
@@ -7,7 +7,7 @@ import {useFlightsStore} from "stores/Flights";
 import {storeToRefs} from "pinia";
 import {commonKeywords, metaData} from "src/composables/meta";
 import {useMeta} from "quasar";
-import {filters, loadPage, paginationLimit} from "src/composables/pagination";
+import {usePagination} from "src/composables/pagination";
 
 const props = defineProps({
   pilot: {
@@ -29,6 +29,7 @@ useAppStore().setBreadcrumbs([
   {label: `@${props.pilot.publicUsername}`},
 ])
 
+const {filters, loadPage, paginationLimit} = usePagination();
 filters.value = {username: props.pilot.publicUsername};
 const loadNextFlightsPage = (appendItems) => loadPage({
   fetchFunc: useFlightsStore().fetchPublic,
diff --git a/src/pages/public/poi/PointOfInterestDetailPage.vue b/src/pages/public/poi/PointOfInterestDetailPage.vue
index 59a71da..607a7a5 100644
--- a/src/pages/public/poi/PointOfInterestDetailPage.vue
+++ b/src/pages/public/poi/PointOfInterestDetailPage.vue
@@ -23,7 +23,7 @@ import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleto
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {onMounted} from "vue";
 import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
-import {filters, loadPage, paginationLimit} from "src/composables/pagination";
+import {usePagination} from "src/composables/pagination";
 
 const {pointOfInterest, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
 const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
@@ -41,6 +41,7 @@ useAppStore().setBreadcrumbs([
   {label: pointOfInterest.value.name}
 ]);
 
+const {filters, loadPage, paginationLimit} = usePagination();
 filters.value = {pointOfInterestId: pointOfInterest.value.id};
 const loadNextFlightsPage = (appendItems) => loadPage({
   fetchFunc: useFlightsStore().fetchPublic,
diff --git a/src/pages/public/poi/PointsOfInterestPage.vue b/src/pages/public/poi/PointsOfInterestPage.vue
index bfc2c1e..163aa28 100644
--- a/src/pages/public/poi/PointsOfInterestPage.vue
+++ b/src/pages/public/poi/PointsOfInterestPage.vue
@@ -6,7 +6,7 @@ import POIList from "components/poi/POIList.vue";
 import {useAppStore} from "stores/App";
 import {useMeta} from "quasar";
 import {metaData} from "src/composables/meta";
-import {filters, loadPage, paginationLimit, paginationOffset} from "src/composables/pagination";
+import {usePagination} from "src/composables/pagination";
 import ListFilters from "components/ListFilters.vue";
 
 useAppStore().setPageTitle("Místa");
@@ -18,6 +18,7 @@ useMeta(() => metaData({
   title: "Místa"
 }))
 
+const {filters, loadPage, paginationOffset, paginationLimit} = usePagination();
 const loadNextPage = (appendItems) => loadPage({
   fetchFunc: usePointsOfInterestStore().fetchPublic, appendItems
 });
diff --git a/src/stores/App.js b/src/stores/App.js
index b5e7818..f610e7b 100644
--- a/src/stores/App.js
+++ b/src/stores/App.js
@@ -1,6 +1,5 @@
 import {defineStore} from 'pinia'
 import {ref} from "vue";
-import {filters, paginationLimit, paginationOffset} from "src/composables/pagination";
 
 export const useAppStore = defineStore('App', () => {
   const pageTitle = ref(null);
@@ -11,11 +10,6 @@ export const useAppStore = defineStore('App', () => {
     pageTitle.value = null;
     // appStatus.value = 200;  // tohle dela problem pri renderu 404 na serveru
     breadcrumbs.value = null;
-
-    // reset strankovani po prechodu na strankach
-    paginationLimit.value = 10;
-    paginationOffset.value = 0;
-    filters.value = {};
   };
 
   const setPageTitle = (value) => {