Pagination prepsano do inteligentnejsi composable

src/composables/pagination.js

@@ -1,14 +1,11 @@
 import {ref} from "vue";
 
 
-// TODO: predelat na usePagination() composable!
-
-export const paginationLimit = ref(10);
-export const paginationOffset = ref(0);
-
-export const filters = ref({});
-
-export const loadPage = ({fetchFunc, appendItems}) => {
+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,
@@ -17,4 +14,10 @@ export const loadPage = ({fetchFunc, appendItems}) => {
     }).then(() => {
       paginationOffset.value += paginationLimit.value;
     })
+  }
+
+
+  return {
+    paginationOffset, paginationLimit, filters, loadPage
+  }
 }

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,

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
 });

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

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>

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

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
 });

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,

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

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({

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

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

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,

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,

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
 });

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) => {