Ne uplne otestovany prepis storu

quasar.config.js

@@ -30,6 +30,7 @@ module.exports = configure(function (ctx) {
     // https://v2.quasar.dev/quasar-cli/boot-files
     boot: [
       "axios",
+      "apollo",
       "chartJs",
     ],
 

src/boot/apollo.js

@@ -0,0 +1,96 @@
+// import {boot} from "quasar/wrappers";
+import {ApolloClient, ApolloLink, fromPromise, InMemoryCache} from '@apollo/client/core'
+import {createUploadLink} from 'apollo-upload-client';
+import {onError} from "@apollo/client/link/error";
+import {useUserStore} from "stores/User";
+import {useAppStore} from "stores/App";
+import {Notify} from "quasar";
+import {errorObject, warningObject} from "src/composables/dialog";
+
+const handleRefreshToken = (store, forward, operation) => {
+    return fromPromise(useUserStore(store).refreshAccessToken()
+        .catch((error) => {
+            Notify.create(warningObject("Tvoje přihlášení vypřešlo. Přihlaš se prosím znovu."));
+            window.location = "/login";
+        }))
+        .filter((value) => Boolean(value))
+        .flatMap((accessToken) => {
+            const oldHeaders = operation.getContext().headers;
+            operation.setContext({
+                headers: {
+                    ...oldHeaders, authorization: `Bearer ${accessToken}`,
+                },
+            });
+
+            // retry the request, returning the new observable
+            return forward(operation);
+        });
+}
+
+
+
+export const apolloWrapper = {};
+export default (({store}) => {
+    const uploadLink = createUploadLink({
+        uri: process.env.API_URL + '/graphql',
+    })
+
+    const authLink = new ApolloLink((operation, forward) => {
+        const accessToken = useUserStore(store).getAccessToken();
+
+        if (accessToken) {
+            operation.setContext({
+                headers: {"Authorization": `Bearer ${accessToken}`},
+            });
+        }
+        return forward(operation);
+    });
+
+    const errorLink = onError(({graphQLErrors, networkError, operation, forward}) => {
+        if (networkError?.statusCode === 401) {
+            return handleRefreshToken(store, forward, operation);
+        }
+
+        if (graphQLErrors) {
+            for (const error of graphQLErrors) {
+                if (error.message === "Not found") {
+                    useAppStore(store).appStatus = 404;
+                } else if (error.message.includes("401") || error.message.includes("Not authorized")) {
+                    return handleRefreshToken(store, forward, operation);
+                } else {
+                    Notify.create(errorObject("API error: " + error.message));
+                }
+            }
+        }
+    });
+
+
+    const apolloClient = new ApolloClient({
+        link: ApolloLink.from([authLink, errorLink, uploadLink]), cache: new InMemoryCache(), connectToDevTools: true,
+    });
+    // const  apolloProvider = createApolloProvider({
+    //     defaultClient: apolloClient,
+    // });
+
+
+    apolloWrapper.query = (query, variables = {}) => {
+        return apolloClient.query({
+            query: query, fetchPolicy: 'no-cache', variables: variables
+        })
+            .then((response) => response)
+            .catch(err => {
+                console.error("Error during query: ", err)
+                return err;
+            })
+    };
+    apolloWrapper.mutate = (mutation, variables) => {
+        return apolloClient
+            .mutate({
+                mutation: mutation, fetchPolicy: 'no-cache', variables: variables,
+            })
+            .then((response) => response)
+            .catch(err => {
+                console.error("Error during mutation: ", err);
+            })
+    };
+});

src/boot/axios.js

@@ -12,8 +12,9 @@ const api = axios.create({
     },
 })
 
+export default boot(({store}) => {
     api.interceptors.request.use((config) => {
-  const token = useUserStore().getAccessToken();
+        const token = useUserStore(store).getAccessToken();
         if (token) {
             config.headers['Authorization'] = `Bearer ${token}`
         }
@@ -26,12 +27,12 @@ api.interceptors.request.use((config) => {
     })
 
     // Response interceptor for API calls
-api.interceptors.response.use((response) => {
+    api.interceptors.response.use(
-  return response
+        (response) => response,
-}, async function (error) {
+        async function (error) {
             const originalRequest = error.config;
             if (error.response.status === 401 && !['/refresh', '/login'].includes(originalRequest.url)) {
-    const newToken = await useUserStore().refreshAccessToken().catch(err => {
+                const newToken = await useUserStore(store).refreshAccessToken().catch(err => {
                     console.error(err);
                     return Promise.reject("Logged out");
                 })
@@ -40,18 +41,6 @@ api.interceptors.response.use((response) => {
             }
             return Promise.reject(error);
         });
-
-
-export default boot(({app}) => {
-  // for use inside Vue files (Options API) through this.$axios and this.$api
-
-  // app.config.globalProperties.$axios = axios
-  // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
-  //       so you won't necessarily have to import axios in each vue file
-
-  app.config.globalProperties.$api = api
-  // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
-  //       so you can easily perform requests against your app's API
 })
 
 export {axios, api}

src/boot/chartJs.js

@@ -2,5 +2,5 @@ import {boot} from "quasar/wrappers";
 import {BarElement, CategoryScale, Chart as ChartJS, Filler, Legend, LinearScale, LineElement, PointElement, Title, Tooltip} from "chart.js";
 
 export default boot(({app}) => {
-  ChartJS.register(Title, Tooltip, Legend, PointElement, LineElement, Filler, BarElement, CategoryScale, LinearScale)
+  ChartJS.register(Title, Tooltip, Legend, PointElement, LineElement, Filler, BarElement, CategoryScale, LinearScale);
-})
+});

src/components/FormSubmitButton.vue

@@ -0,0 +1,43 @@
+<script setup>
+import {computed} from "vue";
+import {useQuasar} from "quasar";
+
+const props = defineProps({
+  saveButton: {
+    type: [Object, Boolean],
+    required: false,
+    default: () => ({
+      label: "Uložit",
+      icon: "save",
+      align: "left"
+    })
+  }
+})
+const $q = useQuasar();
+const fullwidthBtn = computed(() => $q.screen.width <= $q.screen.sizes.md);
+</script>
+
+<template>
+  <div class="text-right">
+    <q-btn
+        color="primary"
+        type="submit"
+        size="lg"
+        :class="{'q-my-lg': true, 'btn--fullwidth': fullwidthBtn}"
+        :icon="props.saveButton.icon"
+        :loading="props.isRequestPending"
+    >
+      {{ props.saveButton.label }}
+
+      <template v-slot:loading>
+        <q-spinner/>
+      </template>
+    </q-btn>
+  </div>
+</template>
+
+<style>
+.btn--fullwidth {
+  width: 100%;
+}
+</style>

src/components/FormWrapper.vue

@@ -2,6 +2,7 @@
 import {isRequestPending} from "src/composables/form/props";
 import {computed, useSlots} from "vue";
 import {useQuasar} from "quasar";
+import FormSubmitButton from "components/FormSubmitButton.vue";
 
 const props = defineProps({
   modelValue: {
@@ -23,38 +24,11 @@ const emits = defineEmits(["save"]);
 const saveForm = () => {
   emits("save", props.modelValue);
 }
-
-const $q = useQuasar();
-const fullwidthBtn = computed(() => $q.screen.width <= $q.screen.sizes.md);
-
 </script>
 
 <template>
   <q-form @submit.prevent="saveForm" ref="form">
     <slot name="default"/>
-
+    <FormSubmitButton v-if="saveButton" :save-button="saveButton" />
-    <div class="text-right">
-      <q-btn
-        color="primary"
-        type="submit"
-        size="lg"
-        :class="{'q-my-lg': true, 'btn--fullwidth': fullwidthBtn}"
-        v-if="saveButton"
-        :icon="props.saveButton.icon"
-        :loading="props.isRequestPending"
-      >
-        {{ props.saveButton.label }}
-
-        <template v-slot:loading>
-          <q-spinner />
-        </template>
-      </q-btn>
-    </div>
   </q-form>
 </template>
-
-<style>
-.btn--fullwidth {
-  width: 100%;
-}
-</style>

src/components/aircrafts/AircraftDetailCard.vue

@@ -1,5 +1,4 @@
 <script setup>
-import {aircraft} from "src/composables/objects/aircraft";
 import {confirmObject} from "src/composables/dialog";
 import {useQuasar} from "quasar";
 import {storeToRefs} from "pinia";
@@ -17,7 +16,6 @@ const $q = useQuasar();
 
 const loggedUser = storeToRefs(useUserStore()).user;
 
-
 const confirmDelete = (aircraftId) => {
   $q.dialog(confirmObject('Opravdu chceš smazat toto letadlo?'))
     .onOk(() => {

src/components/banners/AccessDeniedBanner.vue

@@ -1,6 +1,4 @@
 <script setup>
-import {poi} from "src/composables/objects/poi";
-
 const props = defineProps({
     routeBack: {
     type: Object,

src/components/basicSkeletons/BasicListSkeleton.vue

@@ -1,5 +1,6 @@
 <script setup>
 import {randomInt} from "src/composables/random";
+import {computed} from "vue";
 
 const props = defineProps({
   itemsCountMin: {
@@ -11,14 +12,18 @@ const props = defineProps({
     type: Number,
     required:false,
     default: 5
+  },
+  items: {
+    type: Number, required: false,
   }
 })
 
+const renderedItems = computed(() => props.items || randomInt(props.itemsCountMin, props.itemsCountMax));
 </script>
 
 <template>
   <q-list bordered separator>
-    <q-item v-ripple v-for="i in randomInt(itemsCountMin, itemsCountMax)" :key="i">
+    <q-item v-ripple v-for="i in renderedItems" :key="i">
       <q-item-section avatar>
         <q-skeleton type="QAvatar" />
       </q-item-section>

src/components/event/EventsList.vue

@@ -19,14 +19,14 @@ const getCoverPhotos = (item) => item.flights.filter(f => !!f.coverPhoto).map(f
 <template>
   <q-list bordered separator>
     <q-item
+      v-for="event of items" :key="event"
       clickable
       :to="{name: routeDetail.name, params: {...routeDetail.params, id: event.id}}"
       v-ripple
-      v-for="event of items" :key="event"
     >
       <q-item-section>
         <q-item-label>
-          <q-avatar icon="event" color="primary" text-color="white" v-if="event.flights.length === 0"/>
+          <q-avatar icon="event" color="primary" text-color="white" v-if="!event.flights || event.flights.length === 0"/>
           <AvatarsGroup :avatars="getCoverPhotos(event)" v-else/>
 
           {{ event.name }}

src/components/flights/FlightBasicInfo.vue

@@ -1,5 +1,4 @@
 <script setup>
-import {flight} from "src/composables/objects/flight";
 import {FORMAT_DATE, FORMAT_TIME, formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
 import WeatherInfo from "components/weather/WeatherInfo.vue";
 

src/components/flights/FlightDetailSkeleton.vue

@@ -1,5 +1,4 @@
 <script setup>
-import {randomInt} from "src/composables/random";
 import ListItemSkeleton from "components/basicSkeletons/ListItemSkeleton.vue";
 import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
 </script>
@@ -16,7 +15,7 @@ import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
 
         <q-item>
           <q-list>
-            <ListItemSkeleton v-for="i in randomInt(1, 3)" :key="i"/>
+            <ListItemSkeleton v-for="i in 3" :key="i"/>
           </q-list>
         </q-item>
 
@@ -26,7 +25,7 @@ import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
       </q-list>
 
       <article class="q-my-lg">
-        <BasicTextSkeleton :lines="randomInt(2, 5)" :paragraphs="randomInt(1, 2)" />
+        <BasicTextSkeleton :lines="4" :paragraphs="2" />
       </article>
 
       <q-skeleton height="400px" square class="q-mt-lg"/>

src/components/flights/FlightTrackMap.vue

@@ -1,7 +1,6 @@
 <script setup>
-import {flight} from "src/composables/objects/flight";
 import MapWithMarkers from "components/map/MapWithMarkers.vue";
-import {computed, ref} from "vue";
+import {computed, reactive, ref} from "vue";
 import {Line} from "vue-chartjs"
 
 const props = defineProps({
@@ -12,23 +11,23 @@ const props = defineProps({
 })
 
 
-const mapPhotos = computed(() => flight.value.photos.filter(photo => photo.gpsLatitude && photo.gpsLongitude));
+const mapPhotos = computed(() => props.flight.photos.filter(photo => photo.gpsLatitude && photo.gpsLongitude));
-const poisWithGPS = computed(() => flight.value.track.map(poi => poi.pointOfInterest || poi.airport));
+const poisWithGPS = computed(() => props.flight.track.map(poi => poi.pointOfInterest || poi.airport));
 
-const mapMarkers = [flight.value.takeoffAirport].concat(poisWithGPS.value).concat([flight.value.landingAirport]);
+const mapMarkers = [props.flight.takeoffAirport].concat(poisWithGPS.value).concat([props.flight.landingAirport]);
 const pointsOfInterests = computed(() => mapMarkers
   .filter(marker => marker.gpsLatitude && marker.gpsLongitude)
   .map(
     marker => ({label: marker.name, position: {lat: marker.gpsLatitude, lng: marker.gpsLongitude}})
   ));
 
-const gpxTrack = flight.value.gpxTrack;
+const gpxTrack = props.flight.gpxTrack ? reactive(props.flight.gpxTrack) : null;
 const displayMap = computed(() => {
   return (
     !!gpxTrack ||
     mapPhotos.value.length > 0 ||
     poisWithGPS.value.length > 0 ||
-    flight.value.landingAirport.id !== flight.value.takeoffAirport.id
+    props.flight.landingAirport.id !== props.flight.takeoffAirport.id
   )
 });
 
@@ -82,7 +81,7 @@ const drawCurrentPositionMarker = (e) => {
     return;
   }
   const idx = res[0].index;
-  currentPositionMarker.value = flight.value.gpxTrack.coordinates[idx];
+  currentPositionMarker.value = props.flight.gpxTrack.coordinates[idx];
 }
 
 const chartOptions = {

src/components/flights/form/FlightFormNotes.vue

@@ -5,7 +5,6 @@ import {setDefaultData} from "src/composables/form/formHandling";
 import RichTextEditor from "components/inputs/RichTextEditor.vue";
 import {commonProps} from "src/composables/inputs";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";
-import {isRequestPending} from "src/composables/objects/flight";
 
 const props = defineProps({
   flight: {

src/components/poi/POIForm.vue

@@ -24,7 +24,7 @@ const props = defineProps({
 
 const formData = reactive({
   name: null,
-  description: null,
+  description: "",
   gpsLatitude: null,
   gpsLongitude: null,
   type: null,

src/components/profile/PilotProfileCard.vue

@@ -1,7 +1,13 @@
 <script setup>
-import {user as pilot} from "src/composables/objects/user";
 import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
 import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
+
+const props = defineProps({
+  pilot: {
+    type: Object,
+    required: true
+  }
+});
 </script>
 
 <template>

src/composables/objects/aircraft.js

@@ -1,25 +0,0 @@
-import {useAircraftsStore} from "stores/Aircrafts";
-import {ref} from "vue";
-import {storeToRefs} from "pinia";
-
-export const loading = ref(true);
-
-export const aircraft = ref(null);
-
-export const fetchAircraft = (aircraftId) => {
-  loading.value = true;
-  return useAircraftsStore().fetchDetail(aircraftId).then((data) => {
-    aircraft.value = data;
-  }).catch(err => {
-    console.error(err);
-  }).finally(() => loading.value = false);
-}
-
-
-export const aircrafts = storeToRefs(useAircraftsStore()).items;
-export const fetchAircrafts = () => {
-  loading.value = true;
-  useAircraftsStore().fetch().finally(() => loading.value = false);
-}
-
-export const isRequestPending = storeToRefs(useAircraftsStore).isMutationRunning;

src/composables/objects/copilot.js

@@ -1,23 +0,0 @@
-import {ref} from "vue";
-import {useCopilotsStore} from "stores/Copilots";
-import {storeToRefs} from "pinia";
-
-export const loading = ref(true);
-export const copilot = ref(null);
-export const fetchCopilot = (copilotId, pilotUsername) => {
-  loading.value = true;
-  return useCopilotsStore().fetchDetail(parseInt(copilotId), pilotUsername)
-    .then(resp => {
-      copilot.value = resp;
-      return resp;
-    })
-    .finally(() => loading.value = false);
-}
-
-export const copilots = storeToRefs(useCopilotsStore()).items;
-export const fetchCopilots = () => {
-  loading.value = true;
-  return useCopilotsStore().fetch().finally(() => loading.value = false);
-}
-
-export const isRequestPending = storeToRefs(useCopilotsStore()).isMutationRunning;

src/composables/objects/event.js

@@ -1,37 +0,0 @@
-import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
-import {useEventsStore} from "stores/Events";
-import {ref} from "vue";
-import {storeToRefs} from "pinia";
-import {confirmObject} from "src/composables/dialog";
-import {useAppStore} from "stores/App";
-export const loading = ref(true);
-export const event = ref(null);
-export const fetchEvent = (eventId, username) => {
-  loading.value = true;
-  return useEventsStore().fetchDetail(parseInt(eventId), username)
-    .then(respEvent => {
-      event.value = respEvent;
-      return respEvent;
-    })
-    .finally(() => loading.value = false);
-};
-
-export const events = storeToRefs(useEventsStore()).items;
-
-export const fetchEvents = (username) => {
-  loading.value = true;
-  useEventsStore().fetch(username).finally(() => {
-    loading.value = false;
-  });
-};
-
-
-export const handleDeleteEvent = ($q, eventId, onOkCallback = () => {
-}) => {
-  $q.dialog(confirmObject(`Opravdu chceš smazat tento let?`))
-    .onOk(() => {
-      useEventsStore().delete(eventId).then(onOkCallback);
-    });
-};
-
-export const isRequestPending = storeToRefs(useEventsStore()).isRequestPending;

src/composables/objects/flight.js

@@ -1,8 +1,4 @@
 import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
-import {useFlightsStore} from "stores/Flights";
-import {ref} from "vue";
-import {storeToRefs} from "pinia";
-import {confirmObject} from "src/composables/dialog";
 
 export const flightName = (flight) => {
   const date = formatDatetime(flight.takeoffDatetime, FORMAT_DATE);
@@ -15,35 +11,3 @@ export const flightName = (flight) => {
     return `${flight.takeoffAirport.icaoCode} ${trackStr} ${flight.landingAirport.icaoCode} (${date})`;
   }
 }
-
-export const loading = ref(true);
-export const flight = ref(null);
-export const fetchFlight = (flightId, username) => {
-  loading.value = true;
-  return useFlightsStore().fetchDetail(parseInt(flightId), username)
-    .then(respFlight => {
-      flight.value = respFlight;
-      return respFlight;
-    })
-    .finally(() => loading.value = false);
-};
-
-export const flights = storeToRefs(useFlightsStore()).items;
-
-export const fetchFlights = (username = null) => {
-  loading.value = true;
-  useFlightsStore().fetch(username).finally(() => {
-    loading.value = false;
-  });
-};
-
-
-export const handleDeleteFlight = ($q, flightId, onOkCallback = () => {
-}) => {
-  $q.dialog(confirmObject(`Opravdu chceš smazat tento let?`))
-    .onOk(() => {
-      useFlightsStore().delete(flightId).then(onOkCallback);
-    });
-};
-
-export const isRequestPending = storeToRefs(useFlightsStore()).isRequestPending;

src/composables/objects/organization.js

@@ -1,42 +0,0 @@
-import {computed, ref} from "vue";
-import {storeToRefs} from "pinia";
-import {useOrganizationsStore} from "stores/Organizations";
-import {useUserStore} from "stores/User";
-import {successObject} from "src/composables/dialog";
-
-export const loading = ref(true);
-export const organization = ref(null);
-export const fetchOrganization = (organizationId) => {
-  loading.value = true;
-  return useOrganizationsStore().fetchDetail(parseInt(organizationId))
-    .then(resp => {
-      organization.value = resp;
-      return resp;
-    })
-    .finally(() => loading.value = false);
-}
-
-export const organizations = storeToRefs(useOrganizationsStore()).items;
-export const fetchOrganizations = () => {
-  loading.value = true;
-  return useOrganizationsStore().fetch().finally(() => loading.value = false);
-}
-
-export const isRequestPending = storeToRefs(useOrganizationsStore()).isMutationRunning;
-
-const loggedUser = storeToRefs(useUserStore()).user;
-export const myOrganizationIds = computed(() => loggedUser.value.organizations?.map(o => o.id) || []);
-
-export const addToOrganization = async (organizationId) => {
-  useOrganizationsStore().addUserToOrganization(organizationId).then((data) => {
-    organization.value.users = data.users;
-    useUserStore().fetchLoggedUserDetail();
-  });
-};
-
-export const removeFromOrganization = async (organizationId) => {
-  useOrganizationsStore().removeUserFromOrganization(organizationId).then((data) => {
-    organization.value.users = data.users;
-    useUserStore().fetchLoggedUserDetail();
-  });
-}

src/composables/objects/poi.js

@@ -1,22 +0,0 @@
-import {ref} from "vue";
-import {usePointsOfInterestStore} from "stores/PointsOfInterest";
-import {storeToRefs} from "pinia";
-
-export const loading = ref(true);
-export const poi = ref(null);
-export const fetchPoi = (poiId) => {
-  loading.value = true;
-  return usePointsOfInterestStore().fetchDetail(poiId)
-    .then(data => {
-      poi.value = data;
-      return data;
-    })
-    .finally(() => loading.value = false);
-};
-
-
-export const pointsOfInterest = storeToRefs(usePointsOfInterestStore()).items;
-export const fetchPOIList = () => {
-  loading.value = true;
-  return usePointsOfInterestStore().fetch().finally(() => loading.value = false);
-}

src/composables/photos/batchEdit.js

@@ -1,40 +0,0 @@
-import {ref} from "vue";
-import {usePhotosStore} from "stores/Photo";
-import {fetchFlight} from "src/composables/objects/flight";
-import {usePointsOfInterestStore} from "stores/PointsOfInterest";
-
-export const openBatchEdit = ref(false);
-export const editBatchPhotos = ref([]);
-export const openBatchPhotoForm = (photos) => {
-  openBatchEdit.value = true;
-  editBatchPhotos.value = photos;
-}
-
-export const handleBatchPhotoEdit = async (flightId, data) => {
-  const photoIds = data.photoIds;
-  delete data.photoIds;
-  delete data.id;
-
-  if (data.pointOfInterest && !data.pointOfInterest.id) {
-    const poiData = {
-      ...data.pointOfInterest,
-      isPublic: false,
-      description: "",
-    }
-    await usePointsOfInterestStore().create(poiData).then(poi => data.pointOfInterest = {id: poi.id, name: poi.name});
-  }
-
-  const promises = [];
-  for (const id of photoIds) {
-    const updateData = {};
-    if (data.name !== '') updateData.name = data.name;
-    if (data.description !== '') updateData.description = data.description;
-    if (data.pointOfInterest) updateData.pointOfInterest = data.pointOfInterest;
-
-    if (Object.keys(updateData).length === 0) continue;
-
-    promises.push(usePhotosStore().update(id, updateData));
-  }
-
-  Promise.all(promises).finally(() => fetchFlight(flightId))
-}

src/composables/photos/editor/crop.js

@@ -1,13 +1,19 @@
 import {computed, ref, watch} from "vue";
 import {cropper} from "vue-picture-cropper";
 import {roundWithPrecision} from "src/composables/utils";
-import {photoAspectRatio} from "src/composables/photos/editor/photo";
 
-export const cropperImgSizes = computed(() => [cropper.getImageData().width, cropper.getImageData().height]);
+export const photoAspectRatio = ref(0);
+
+export const cropperImgSizes = computed(() => {
+    if (!cropper) return [];
+
+    return [cropper.getImageData().width, cropper.getImageData().height]
+});
 export const croppedArea = ref(null);
 export const selectedAspectRatio = ref(null);
 
 watch(() => selectedAspectRatio.value, (newVal) => {
+    console.log(newVal);
     cropper.setAspectRatio(newVal);
 })
 
@@ -15,8 +21,6 @@ watch(() => selectedAspectRatio.value, (newVal) => {
 export const setCropData = () => {
     const [w, h] = cropperImgSizes.value;
 
-  console.log("crop end");
-
     const cropData = cropper.getCropBoxData();
     croppedArea.value = {
         left: roundWithPrecision(cropData.left / w, 5),
@@ -26,8 +30,7 @@ export const setCropData = () => {
     };
 }
 
-export const aspectRatioOptions = computed(() =>
+export const aspectRatioOptions = computed(() => [
-  [
         {label: '16:9', value: roundWithPrecision(16 / 9, 5)},
         {label: '4:3', value: roundWithPrecision(4 / 3, 5)},
         {label: '9:16', value: roundWithPrecision(9 / 16, 5)},
@@ -39,7 +42,7 @@ export const aspectRatioOptions = computed(() =>
 );
 
 export const cropperReady = (e) => {
-  if (croppedArea.value) {
+    if (croppedArea.value && croppedArea.value.height) {
         const [w, h] = cropperImgSizes.value;
         selectedAspectRatio.value = roundWithPrecision((croppedArea.value.width * w) / (croppedArea.value.height * h), 5);
 

src/composables/photos/editor/photo.js

@@ -1,16 +0,0 @@
-import {computed, ref} from "vue";
-import {usePhotosStore} from "stores/Photo";
-
-export const loading = ref(true);
-export const photo = ref(null);
-export const fetchPhoto = (id) => {
-    loading.value = true;
-    return usePhotosStore().fetchDetail(id)
-        .then(resp => {
-            photo.value = resp;
-            return resp;
-        })
-        .finally(() => loading.value = false);
-};
-
-export const photoAspectRatio = computed(() => photo.value.width / photo.value.height);

src/composables/photos/simpleEdit.js

@@ -1,22 +0,0 @@
-import {usePhotosStore} from "stores/Photo";
-import {fetchFlight} from "src/composables/objects/flight";
-import {usePointsOfInterestStore} from "stores/PointsOfInterest";
-import {ref} from "vue";
-
-export const handlePhotoUpdate = (flightId, formData) => {
-    const photoId = formData.id;
-    delete formData.id;
-
-    usePhotosStore().update(photoId, formData).then((data) => {
-        fetchFlight(flightId); // nenacita se mi nove vytvoreny POI z comboboxu
-        usePointsOfInterestStore().fetch();
-    });
-};
-
-export const openEdit = ref(false);
-export const editPhoto = ref(null);
-
-export const openPhotoEdit = (photo) => {
-    openEdit.value = true;
-    editPhoto.value = photo;
-};

src/graphql/apollo.js

@@ -1,109 +0,0 @@
-import {ApolloClient, ApolloLink, fromPromise, InMemoryCache} from '@apollo/client/core'
-import {createApolloProvider} from "@vue/apollo-option";
-import {createUploadLink} from 'apollo-upload-client';
-import {onError} from "@apollo/client/link/error";
-import {useUserStore} from "stores/User";
-import {useAppStore} from "stores/App";
-import {Notify} from "quasar";
-import {errorObject, warningObject} from "src/composables/dialog";
-
-
-const uploadLink = createUploadLink({
-  uri: process.env.API_URL + '/graphql',
-})
-
-const handleRefreshToken = (forward, operation) => {
-  return fromPromise(
-    useUserStore().refreshAccessToken()
-      .catch((error) => {
-        Notify.create(warningObject("Tvoje přihlášení vypřešlo. Přihlaš se prosím znovu."));
-        window.location = "/login";
-      })
-  )
-    .filter((value) => Boolean(value))
-    .flatMap((accessToken) => {
-      const oldHeaders = operation.getContext().headers;
-      operation.setContext({
-        headers: {
-          ...oldHeaders,
-          authorization: `Bearer ${accessToken}`,
-        },
-      });
-
-      // retry the request, returning the new observable
-      return forward(operation);
-    });
-}
-
-const errorLink = onError(
-  ({graphQLErrors, networkError, operation, forward}) => {
-    if (networkError?.statusCode === 401) {
-      return handleRefreshToken(forward, operation);
-    }
-
-    if (graphQLErrors) {
-      for (const error of graphQLErrors) {
-        if (error.message === "Not found") {
-          useAppStore().appStatus = 404;
-        } else if (error.message.includes("401") || error.message.includes("Not authorized")) {
-          return handleRefreshToken(forward, operation);
-        } else {
-          Notify.create(errorObject("API error: " + error.message));
-        }
-      }
-    }
-  });
-
-const authLink = new ApolloLink((operation, forward) => {
-  const accessToken = useUserStore().getAccessToken();
-
-  if (accessToken) {
-    operation.setContext({
-      headers: {"Authorization": `Bearer ${accessToken}`},
-    });
-  }
-  return forward(operation);
-});
-
-export const apolloClient = new ApolloClient({
-  link: ApolloLink.from([authLink, errorLink, uploadLink]),
-  cache: new InMemoryCache(),
-  connectToDevTools: true,
-})
-
-export const apolloWrapper = {
-  query(query, variables = {}) {
-    return apolloClient.query({
-      query: query,
-      fetchPolicy: 'no-cache',
-      variables: variables
-    })
-      .then((response) => response)
-      .catch(err => {
-        console.error("Error during query: ", err)
-        return err;
-      })
-  },
-
-  mutate(mutation, variables, onUpdate = () => {
-  }) {
-    return apolloClient
-      .mutate({
-        mutation: mutation,
-        fetchPolicy: 'no-cache',
-        variables: variables,
-        update: () => {
-          onUpdate();
-        },
-      })
-      .then((response) => response)
-      .catch(err => {
-        console.error("Error during mutation: ", err);
-      })
-  },
-}
-
-// @see https://v4.apollo.vuejs.org/migration/
-export const apolloProvider = createApolloProvider({
-  defaultClient: apolloClient,
-})

src/graphql/mutations/flight.js

@@ -4,11 +4,12 @@ import {FRAGMENT_FLIGHT_FULL_INFO} from "src/graphql/fragments/flight";
 export const CREATE_FLIGHT = gql`
 mutation createFlight($input: CreateFlightInput!) {
     createFlight(input: $input) {
-      id
+      ...flightFullInfo
     }
   }
-`
+  ${FRAGMENT_FLIGHT_FULL_INFO}
-// ^^ nesmim se tu ptat na aircraft, jinak mi to upadne
+`;
+
 export const EDIT_FLIGHT = gql`
 mutation editFlight($id: Int!, $input: EditFlightInput!) {
     editFlight(id: $id, input: $input) {

src/graphql/mutations/organization.js

@@ -7,7 +7,6 @@ export const CREATE_ORGANIZATION = gql`
       ...organizationFullInfo
     }
   }
-
   ${FRAGMENT_ORGANIZATION_FULL_INFO}
 `;
 
@@ -17,33 +16,26 @@ mutation editOrganization($id: Int!, $input: EditOrganizationInput!) {
     ...organizationFullInfo
   }
 }
-
 ${FRAGMENT_ORGANIZATION_FULL_INFO}
 `;
 
 export const ADD_USER_TO_ORGANIZATION = gql`
 mutation addToOrganization($organizationId: Int!) {
   addToOrganization(organizationId: $organizationId) {
-    users {
+    ...organizationFullInfo
-      id
-      name
-      email
-      avatarImageUrl
   }
 }
-}`;
+${FRAGMENT_ORGANIZATION_FULL_INFO}
+`;
 
 export const REMOVE_USER_FROM_ORGANIZATION = gql`
 mutation removeFromOrganization($organizationId: Int!) {
   removeFromOrganization(organizationId: $organizationId) {
-    users {
+    ...organizationFullInfo
-      id
-      name
-      email
-      avatarImageUrl
   }
 }
-}`;
+${FRAGMENT_ORGANIZATION_FULL_INFO}
+`;
 
 // export const DELETE_ORGANIZATION = gql`
 // mutation deleteOrganization($id: Int!) {

src/layouts/ProfileLayout.vue

@@ -15,7 +15,7 @@
           {{ pageTitle || "Polétání.cz" }}
         </q-toolbar-title>
 
-        <TopMenuButton :logged-user="loggedUser" @logout="logout"/>
+        <TopMenuButton v-if="!isQueryRunning && user" :logged-user="user" @logout="logout"/>
 
       </q-toolbar>
     </q-header>
@@ -26,7 +26,9 @@
       bordered
     >
 
-      <q-img class="absolute-top" :src="loggedUser.titleImageUrl" style="height: 150px"/>
+      <q-img class="absolute-top" v-if="!isQueryRunning && user" :src="user.titleImageUrl" style="height: 150px" />
+      <q-spinner v-else />
+
       <q-scroll-area style="height: calc(100% - 150px); margin-top: 150px; border-right: 1px solid #ddd">
         <SidebarNavigation/>
       </q-scroll-area>
@@ -42,7 +44,7 @@
 </template>
 
 <script setup>
-import {onMounted, ref} from 'vue'
+import {onBeforeMount, onMounted, ref} from 'vue'
 import NavigationButton from "components/navigation/NavigationButton.vue";
 import {useUserStore} from "stores/User";
 import {storeToRefs} from "pinia";
@@ -68,10 +70,10 @@ const toggleLeftDrawer = () => {
   leftDrawerOpen.value = !leftDrawerOpen.value
 };
 
-onMounted(() => {
+onBeforeMount(() => {
   useUserStore().fetchLoggedUserDetail();
 })
-const loggedUser = storeToRefs(useUserStore()).user;
+const {isQueryRunning, user} = storeToRefs(useUserStore());
 
 const logout = () => {
   useUserStore().logout().then(() => {

src/layouts/PublicLayout.vue

@@ -6,7 +6,7 @@
           {{ pageTitle }}
         </q-toolbar-title>
 
-        <template v-if="loggedUser.id">
+        <template v-if="loggedUser && loggedUser.id">
           <router-link :to="{name: 'myFlights'}">
             <AvatarFromPhoto :size="35" :src="loggedUser.avatarImageUrl"/>
           </router-link>
@@ -46,11 +46,13 @@ useMeta(() => ({
   title: pageTitle.value !== '' ? `${pageTitle.value} - Polétání.cz` : 'Polétání.cz'
 }));
 
-// onMounted(() => {
+onMounted(() => {
-//   if (loggedUser || useUserStore().hasAccessToken()) {
+  useUserStore().fetchLoggedUserDetail();
-//     // poll once per 5 minutes to keep access token active
+
-//     setInterval(useUserStore().fetchLoggedUserDetail, 5*60*1000);
+  if (loggedUser || useUserStore().hasAccessToken()) {
-//   }
+    // poll once per 5 minutes to keep access token active
-// })
+    setInterval(useUserStore().fetchLoggedUserDetail, 5*60*1000);
+  }
+})
 
 </script>

src/pages/profile/aircraft/AircraftDetailPage.vue

@@ -5,43 +5,46 @@ import {useRoute, useRouter} from "vue-router";
 import {useQuasar} from "quasar";
 import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
 import {successObject} from "src/composables/dialog";
-import {loading, aircraft, fetchAircraft} from "src/composables/objects/aircraft";
 import {useAppStore} from "stores/App";
 import FlightsList from "components/flights/FlightsList.vue";
 import AircraftDetailCard from "components/aircrafts/AircraftDetailCard.vue";
-import {poi} from "src/composables/objects/poi";
-import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
 import {storeToRefs} from "pinia";
-import {useUserStore} from "stores/User";
 
 const $q = useQuasar();
 const $router = useRouter();
 
 const aircraftId = parseInt(useRoute().params.id);
 onMounted(() => {
-  fetchAircraft(aircraftId);
+  useAircraftsStore().fetchDetail(aircraftId);
 })
 
-const deleteAircraft = (id) => {
+const {aircraft, isQueryRunning} = storeToRefs(useAircraftsStore());
-  useAircraftsStore().delete(id).then(() => {
+watch(() => aircraft.value, (newVal) => {
-    $router.push({name: "aircrafts"});
+  if (!newVal) return;
-    $q.notify(successObject("Letadlo úspěšně odstraněno"));
-  });
-}
 
-watch(aircraft, (newVal) => {
   useAppStore().setPageTitle(newVal.callSign);
   useAppStore().setBreadcrumbs([
     {label: "Letadla", to: {name: "aircrafts"}},
     {label: newVal.callSign}
   ])
 });
+
+const deleteAircraft = (id) => {
+  useAircraftsStore().destroy(id).then(() => {
+    $router.push({name: "aircrafts"});
+    $q.notify(successObject("Letadlo úspěšně odstraněno"));
+  });
+}
 </script>
 
 <template>
-  <AircraftDetailSkeleton v-if="loading || !aircraft"/>
+  <AircraftDetailSkeleton v-if="isQueryRunning || !aircraft"/>
+
   <template v-else>
-    <AircraftDetailCard :aircraft="aircraft" @delete="deleteAircraft" />
+    <AircraftDetailCard
+      :aircraft="aircraft"
+      @delete="deleteAircraft"
+    />
 
     <q-card class="flight-detail-card" flat>
       <h3>Lety</h3>

src/pages/profile/aircraft/AircraftsPage.vue

@@ -1,21 +1,25 @@
 <script setup>
 import {onMounted} from "vue";
 import AircraftsList from "components/aircrafts/AircraftsList.vue";
-import {aircrafts, fetchAircrafts, loading} from "src/composables/objects/aircraft";
 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";
 
+const store = useAircraftsStore();
 onMounted(() => {
-  fetchAircrafts();
+  store.fetch();
 })
+
+const {aircrafts, isQueryRunning} = storeToRefs(store);
 </script>
 
 <template>
-  <BasicListSkeleton v-if="loading"/>
+  <BasicListSkeleton v-if="isQueryRunning"/>
 
   <BasicInfoBanner
-    v-if="!loading && aircrafts.length === 0"
+    v-if="!isQueryRunning && aircrafts.length === 0"
     :route-add="{name: 'addAircraft'}"
     label-add="Vytvořit letadlo"
   >

src/pages/profile/aircraft/EditAircraftPage.vue

@@ -6,9 +6,7 @@ import {useQuasar} from "quasar";
 import {onMounted} from "vue";
 import AircraftEditSkeleton from "components/aircrafts/AircraftEditSkeleton.vue";
 import {successObject} from "src/composables/dialog";
-import {aircraft, fetchAircraft, loading, isRequestPending} from "src/composables/objects/aircraft";
 import {useAppStore} from "stores/App";
-import {fetchOrganizations, organizations} from "src/composables/objects/organization";
 import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
 import {storeToRefs} from "pinia";
 import {useUserStore} from "stores/User";
@@ -25,9 +23,10 @@ const handleSave = (formData) => {
     $router.push({name: "aircraftDetail", params: {id: aircraftId}});
   })
 }
+const {aircraft, isMutationRunning, isQueryRunning} = storeToRefs(useAircraftsStore());
 
 onMounted(() => {
-  fetchAircraft(aircraftId).then(() => {
+  useAircraftsStore().fetchDetail(aircraftId).then(() => {
     useAppStore().setPageTitle(`${aircraft.value.callSign} - editace`);
     useAppStore().setBreadcrumbs([
       {to: {name: "aircraft"}, label: "Letadla"},
@@ -36,10 +35,11 @@ onMounted(() => {
     ])
   });
 });
+
 </script>
 
 <template>
-  <AircraftEditSkeleton v-if="loading"/>
+  <AircraftEditSkeleton v-if="isQueryRunning || !aircraft"/>
 
   <AccessDeniedBanner
     v-else-if="aircraft.createdById !== loggedUser.id"
@@ -52,7 +52,7 @@ onMounted(() => {
         @save="handleSave"
         :default-values="aircraft"
         :organizations="loggedUser.organizations"
-        :is-request-pending="isRequestPending"
+        :is-request-pending="isMutationRunning"
       />
     </q-card-section>
   </q-card>

src/pages/profile/aircraft/NewAircraftsPage.vue

@@ -5,8 +5,7 @@ import {useRouter} from "vue-router";
 import {useQuasar} from "quasar";
 import {useAppStore} from "stores/App";
 import {successObject} from "src/composables/dialog";
-import {isRequestPending} from "src/composables/objects/aircraft";
+import {fetchOrganizations} from "src/composables/objects/organization";
-import {fetchOrganizations, organizations} from "src/composables/objects/organization";
 import {onMounted} from "vue";
 import {storeToRefs} from "pinia";
 import {useUserStore} from "stores/User";
@@ -30,13 +29,16 @@ onMounted(() => {
     {label: "Nové"}
   ]);
 });
+
+const {isMutationRunning} = storeToRefs(useAircraftsStore());
+
 </script>
 
 <template>
   <q-card class="q-mx-md q-my-md">
     <q-card-section>
       <AircraftForm
-        :is-request-pending="isRequestPending"
+        :is-request-pending="isMutationRunning"
         :organizations="loggedUser.organizations"
         @save="handleSave"
       />

src/pages/profile/copilot/CopilotDetailPage.vue

@@ -1,26 +1,29 @@
 <script setup>
 import {useRoute} from "vue-router";
 import {onMounted} from "vue";
-import {copilot, fetchCopilot, loading} from "src/composables/objects/copilot";
 import CopilotDetailSkeleton from "components/copilots/CopilotDetailSkeleton.vue";
 import {useAppStore} from "stores/App";
 import FAB from "components/FAB.vue";
 import FlightsList from "components/flights/FlightsList.vue";
+import {useCopilotsStore} from "stores/Copilots";
+import {storeToRefs} from "pinia";
 
 const copilotId = parseInt(useRoute().params.id);
 onMounted(() => {
-  fetchCopilot(copilotId).then(() => {
+  useCopilotsStore().fetchDetail(copilotId).then(() => {
     useAppStore().setPageTitle(copilot.value.name);
     useAppStore().setBreadcrumbs([
       {to: {name: "copilots"}, label: "Kopiloti"},
       {label: copilot.value.name}
     ])
   });
-})
+});
+
+const {isQueryRunning, copilot} = storeToRefs(useCopilotsStore());
 </script>
 
 <template>
-  <CopilotDetailSkeleton v-if="loading || !copilot"/>
+  <CopilotDetailSkeleton v-if="isQueryRunning || !copilot"/>
 
   <template v-else>
     <h3>Společné lety</h3>

src/pages/profile/copilot/CopilotsPage.vue

@@ -1,23 +1,26 @@
 <script setup>
 import {onMounted} from "vue";
-import {fetchCopilots, loading, copilots} from "src/composables/objects/copilot";
 import CopilotsList from "components/copilots/CopilotsList.vue";
 import FAB from "components/FAB.vue";
 import {useAppStore} from "stores/App";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
+import {useCopilotsStore} from "stores/Copilots";
+import {storeToRefs} from "pinia";
 
 onMounted(() => {
-  fetchCopilots();
+  useCopilotsStore().fetch();
   useAppStore().setPageTitle("Spolucestující");
-})
+});
+
+const {isQueryRunning, copilots} = storeToRefs(useCopilotsStore());
 </script>
 
 <template>
-  <BasicListSkeleton :items-count-min="5" :items-count-max="10" v-if="loading"/>
+  <BasicListSkeleton :items="10" v-if="isQueryRunning"/>
 
   <BasicInfoBanner
-    v-else-if="!loading && copilots.length === 0"
+    v-else-if="!isQueryRunning && copilots.length === 0"
     :router-add="{name: 'addCopilot'}"
   >
     V tomto seznamu budou uvedeni všichni, kteří s tebou absolvovali nějaký tvůj let.

src/pages/profile/copilot/EditCopilotPage.vue

@@ -1,6 +1,5 @@
 <script setup>
 import {onMounted} from "vue";
-import {loading, copilot, fetchCopilot, isRequestPending} from "src/composables/objects/copilot";
 import {useAppStore} from "stores/App";
 import CopilotEditSkeleton from "components/copilots/CopilotEditSkeleton.vue";
 import CopilotEditForm from "components/copilots/CopilotForm.vue";
@@ -8,22 +7,24 @@ import {useRoute, useRouter} from "vue-router";
 import {useCopilotsStore} from "stores/Copilots";
 import {successObject} from "src/composables/dialog";
 import {useQuasar} from "quasar";
+import {storeToRefs} from "pinia";
 
-const copilotId = parseInt(useRoute().params.id);
+const $q = useQuasar();
+const $router = useRouter();
+const $route = useRoute();
+
+const copilotId = parseInt($route.params.id);
 
 onMounted(() => {
-  fetchCopilot(copilotId).then(() => {
+  useCopilotsStore().fetchDetail(copilotId).then(() => {
     useAppStore().setPageTitle(`${copilot.value.name} - editace`);
     useAppStore().setBreadcrumbs([
       {to: {name: "copilots"}, label: "Kopiloti"},
       {to: {name: "copilotDetail", params: {id: copilotId}}, label: copilot.value.name},
       {label: "Editace"}
     ])
-  })
   });
-
+});
-const $q = useQuasar();
-const $router = useRouter();
 
 const handleSave = (formData) => {
   useCopilotsStore().update(copilotId, formData).then(() => {
@@ -31,15 +32,17 @@ const handleSave = (formData) => {
     $router.push({name: "copilotDetail", params: {id: copilotId}});
   });
 }
+
+const {isQueryRunning, isMutationRunning, copilot} = storeToRefs(useCopilotsStore());
 </script>
 
 <template>
-  <CopilotEditSkeleton v-if="loading"/>
+  <CopilotEditSkeleton v-if="isQueryRunning || !copilot"/>
 
   <CopilotEditForm
     v-else
     :copilot="copilot"
-    :is-request-pending="isRequestPending"
+    :is-request-pending="isMutationRunning"
     @save="handleSave"
   />
 </template>

src/pages/profile/copilot/NewCopilotPage.vue

@@ -5,7 +5,7 @@ import {successObject} from "src/composables/dialog";
 import {useCopilotsStore} from "stores/Copilots";
 import CopilotForm from "components/copilots/CopilotForm.vue";
 import {useAppStore} from "stores/App";
-import {isRequestPending} from "src/composables/objects/copilot";
+import {storeToRefs} from "pinia";
 
 const $q = useQuasar();
 const router = useRouter();
@@ -21,8 +21,13 @@ useAppStore().setBreadcrumbs([
   {to: {name: "copilots"}, label: "Spolucestující"},
   {label: "Nový"}
 ]);
+
+const {isMutationRunning} = storeToRefs(useCopilotsStore());
 </script>
 
 <template>
-  <CopilotForm @save="handleSave" :is-request-pending="isRequestPending"/>
+  <CopilotForm
+    :is-request-pending="isMutationRunning"
+    @save="handleSave"
+  />
 </template>

src/pages/profile/event/EditEventPage.vue

@@ -1,6 +1,5 @@
 <script setup>
 import {onMounted} from "vue";
-import {loading, event, fetchEvent, isRequestPending} from "src/composables/objects/event";
 import {useAppStore} from "stores/App";
 import {useRoute, useRouter} from "vue-router";
 import {useEventsStore} from "stores/Events";
@@ -8,15 +7,16 @@ import {successObject} from "src/composables/dialog";
 import {useQuasar} from "quasar";
 import EventEditSkeleton from "components/event/EventEditSkeleton.vue";
 import EventForm from "components/event/EventForm.vue";
+import {storeToRefs} from "pinia";
 
 const eventId = parseInt(useRoute().params.id);
 
 onMounted(() => {
-  fetchEvent(eventId).then(() => {
+  useEventsStore().fetchDetail(eventId).then((e) => {
-    useAppStore().setPageTitle(`${event.value.name} - editace`);
+    useAppStore().setPageTitle(`${e.name} - editace`);
     useAppStore().setBreadcrumbs([
       {to: {name: "events"}, label: "Události"},
-      {to: {name: "eventDetail", params: {id: eventId}}, label: event.value.name},
+      {to: {name: "eventDetail", params: {id: eventId}}, label: e.name},
       {label: "Editace"}
     ])
   })
@@ -31,15 +31,17 @@ const handleSave = (formData) => {
     $router.push({name: "eventDetail", params: {id: eventId}});
   });
 }
+
+const {isQueryRunning, isMutationRunning, event} = storeToRefs(useEventsStore());
 </script>
 
 <template>
-  <EventEditSkeleton v-if="loading"/>
+  <EventEditSkeleton v-if="isQueryRunning"/>
 
   <EventForm
     v-else
     :event="event"
-    :is-request-pending="isRequestPending"
+    :is-request-pending="isMutationRunning"
     @save="handleSave"
   />
 </template>

src/pages/profile/event/EventDetailPage.vue

@@ -1,17 +1,17 @@
 <script setup>
 import {useRoute} from "vue-router";
 import {onMounted} from "vue";
-import {event, fetchEvent, loading} from "src/composables/objects/event";
 import EventDetailSkeleton from "components/event/EventDetailSkeleton.vue";
 import {useAppStore} from "stores/App";
 import FAB from "components/FAB.vue";
 import FlightsList from "components/flights/FlightsList.vue";
-import ListItemSkeleton from "components/basicSkeletons/ListItemSkeleton.vue";
+import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
-import {FORMAT_DATE, FORMAT_DATETIME_LONG, formatDatetime} from "../../../composables/datetimeUtils";
+import {useEventsStore} from "stores/Events";
+import {storeToRefs} from "pinia";
 
 const eventId = parseInt(useRoute().params.id);
 onMounted(() => {
-  fetchEvent(eventId).then(() => {
+  useEventsStore().fetchDetail(eventId).then(() => {
     useAppStore().setPageTitle(event.value.name);
     useAppStore().setBreadcrumbs([
       {to: {name: "events"}, label: "Události"},
@@ -19,13 +19,14 @@ onMounted(() => {
     ])
   });
 })
+
+const {isQueryRunning, event} = storeToRefs(useEventsStore());
 </script>
 
 <template>
-  <EventDetailSkeleton v-if="loading || !event"/>
+  <EventDetailSkeleton v-if="isQueryRunning || !event"/>
 
   <template v-else>
-
     <q-list bordered separator class="q-my-lg" v-if="event.dateFrom && event.dateTo">
       <q-item>
         <q-item-section>

src/pages/profile/event/EventsPage.vue

@@ -4,20 +4,22 @@ import {useAppStore} from "stores/App";
 import FAB from "components/FAB.vue";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
-import {events, fetchEvents, loading} from "src/composables/objects/event";
 import EventsList from "components/event/EventsList.vue";
+import {storeToRefs} from "pinia";
+import {useEventsStore} from "stores/Events";
 
 onMounted(() => {
-  fetchEvents();
+  useEventsStore().fetch();
+  useAppStore().setPageTitle("Letecké události");
 });
 
-useAppStore().setPageTitle("Letecké události")
+const {isQueryRunning, events} = storeToRefs(useEventsStore());
 </script>
 
 <template>
-  <BasicListSkeleton :items-count-min="3" :items-count-max="8" v-if="loading"/>
+  <BasicListSkeleton :items-count-min="3" :items-count-max="8" v-if="isQueryRunning"/>
   <BasicInfoBanner
-    v-else-if="!loading && events.length === 0"
+    v-else-if="!isQueryRunning && events.length === 0"
     :route-add="{name: 'addEvent'}"
     label-add="Přidat"
   >

src/pages/profile/event/NewEventPage.vue

@@ -4,8 +4,8 @@ import {useQuasar} from "quasar";
 import {successObject} from "src/composables/dialog";
 import {useEventsStore} from "stores/Events";
 import {useAppStore} from "stores/App";
-import {isRequestPending} from "src/composables/objects/event";
 import EventForm from "components/event/EventForm.vue";
+import {storeToRefs} from "pinia";
 
 const $q = useQuasar();
 const router = useRouter();
@@ -21,8 +21,10 @@ useAppStore().setBreadcrumbs([
   {to: {name: "events"}, label: "Události"},
   {label: "Nová"}
 ]);
+
+const {isMutationRunning} = storeToRefs(useEventsStore());
 </script>
 
 <template>
-  <EventForm @save="handleSave" :is-request-pending="isRequestPending"/>
+  <EventForm @save="handleSave" :is-request-pending="isMutationRunning"/>
 </template>

src/pages/profile/flight/EditFlightPage.vue

@@ -19,23 +19,21 @@ import PhotosList from "components/photos/PhotosEditorList.vue";
 import {errorObject, successObject, warningObject} from "src/composables/dialog";
 import PhotoFormDialog from "components/photos/PhotoFormDialog.vue";
 import FlightFormTrack from "components/flights/form/FlightFormTrack.vue";
-import {fetchFlight, flight, loading} from "src/composables/objects/flight";
 import FlightEditSkeleton from "components/flights/FlightEditSkeleton.vue";
 import BatchPhotoFormDialog from "components/photos/BatchPhotoFormDialog.vue";
 import {useAppStore} from "stores/App";
-import {editBatchPhotos, handleBatchPhotoEdit, openBatchEdit, openBatchPhotoForm} from "src/composables/photos/batchEdit";
+import {useEventsStore} from "stores/Events";
-import {editPhoto, handlePhotoUpdate, openEdit, openPhotoEdit} from "src/composables/photos/simpleEdit";
-import {fetchEvents, events} from "src/composables/objects/event";
 
 const $q = useQuasar();
 const $route = useRoute();
 const flightId = parseInt($route.params.id);
 
-const aircrafts = storeToRefs(useAircraftsStore()).items;
+const {aircrafts} = storeToRefs(useAircraftsStore());
-const locations = storeToRefs(usePointsOfInterestStore()).items;
+const {pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
-const airports = storeToRefs(useAirportsStore()).items;
+const {airports} = storeToRefs(useAirportsStore());
-const copilots = storeToRefs(useCopilotsStore()).items;
+const {copilots} = storeToRefs(useCopilotsStore());
-
+const {events} = storeToRefs(useEventsStore());
+const {flight, isQueryRunning, isMutationRunning} = storeToRefs(useFlightsStore());
 
 const formStep = ref("basic");
 watch(() => $route.params.step, (val) => formStep.value = val);
@@ -47,12 +45,10 @@ onMounted(() => {
   usePointsOfInterestStore().fetch();
   useAirportsStore().fetch();
   useCopilotsStore().fetch();
+  useEventsStore().fetch();
 
-  fetchEvents();
+  useFlightsStore().fetchDetail(flightId).then((f) => {
-
+    const flightNameFormatted = flightName(f);
-  fetchFlight(flightId).then(() => {
-    const flightNameFormatted = flightName(flight.value);
-
     useAppStore().setPageTitle(`Editace - ${flightNameFormatted}`);
     useAppStore().setBreadcrumbs([
       {to: {name: "myFlights"}, label: "Moje lety"},
@@ -65,13 +61,13 @@ onMounted(() => {
 const handleFlightEdit = (data) => {
   useFlightsStore().update(flightId, data).then((data) => {
     $q.notify(successObject("Úspěšně upraveno"));
-    flight.value = data;
   })
 }
 
 const isRequestPending = storeToRefs(useFlightsStore()).isMutationRunning;
 const uploadInProgress = ref(false);
 
+
 const handlePhotosUpload = (data) => {
   // todo udelat batch napr. po 5 requestech
   // TODO: udelat batch i pro rotace a davkove upravy (info)
@@ -100,7 +96,7 @@ const handlePhotosUpload = (data) => {
 
 const _findPhotoIndex = (photoId) => flight.value.photos.findIndex((object) => object.id === photoId);
 const deletePhoto = (id) => {
-  usePhotosStore().delete(id).then((data) => {
+  usePhotosStore().destroy(id).then((data) => {
     flight.value.photos.splice(_findPhotoIndex(data.id), 1);
   });
 }
@@ -108,37 +104,100 @@ const deletePhoto = (id) => {
 const rotatePhotos = ({photos, direction}) => {
   const promises = [];
   for (const photo of photos) {
-    promises.push(usePhotosStore().changeOrientation(photo.id, direction));
+    promises.push(usePhotosStore().changeOrientation(photo.id, direction).then(data => {
+      const idx = _findPhotoIndex(data.id);
+      data.thumbnailUrl += "?t=" + (new Date()).getTime();
+      flight.value.photos[idx] = data;
+    }));
   }
 
   let success = 0;
   Promise.allSettled(promises).then(result => {
-    for (const updatedPhoto of result) {
+    for (const item of result) {
-      const {status, value} = updatedPhoto;
+      if (item.status === 'fulfilled') success++;
-      if (status === 'fulfilled') success++;
-
-      const idx =_findPhotoIndex(value.id);
-      value.thumbnailUrl += "?t=" + (new Date()).getTime();
-      flight.value.photos[idx] = value;
     }
-
     const error = result.length - success;
 
-    if (success > 0) {
+    if (success > 0) $q.notify(successObject("Otočeno " + success + " fotografií"));
-      $q.notify(successObject("Otočeno " + success + " fotografií"));
+    if (error > 0) $q.notify(errorObject(`Nepovedlo se otočit ${error} fotografi`))
-    }
-
-    if (error > 0) {
-      $q.notify(errorObject(`Nepovedlo se otočit ${error} fotografi`))
-    }
   });
 }
+
+const updateSinglePhoto = (id, formData) => usePhotosStore().update(id, formData).then((data) => {
+  const idx = _findPhotoIndex(data.id);
+  flight.value.photos[idx] = data;
+  usePointsOfInterestStore().fetch();
+});
+
+const handlePhotoUpdate = (flightId, formData) => {
+  const photoId = formData.id;
+  delete formData.id;
+
+  return updateSinglePhoto(photoId, formData);
+};
+
+const openEdit = ref(false);
+const editPhoto = ref(null);
+
+const openPhotoEdit = (photo) => {
+  openEdit.value = true;
+  editPhoto.value = photo;
+};
+
+
+// batch edit
+
+const openBatchEdit = ref(false);
+const editBatchPhotos = ref([]);
+const openBatchPhotoForm = (photos) => {
+  openBatchEdit.value = true;
+  editBatchPhotos.value = photos;
+}
+
+const handleBatchPhotoEdit = async (flightId, data) => {
+  const photoIds = data.photoIds;
+  delete data.photoIds;
+  delete data.id;
+
+  if (data.pointOfInterest && !data.pointOfInterest.id) {
+    const poiData = {
+      ...data.pointOfInterest,
+      isPublic: false,
+      description: "",
+    }
+    await usePointsOfInterestStore().create(poiData).then(poi => data.pointOfInterest = {id: poi.id, name: poi.name});
+  }
+
+  const promises = [];
+  for (const id of photoIds) {
+    const updateData = {};
+    if (data.name !== '') updateData.name = data.name;
+    if (data.description !== '') updateData.description = data.description;
+    if (data.pointOfInterest) updateData.pointOfInterest = data.pointOfInterest;
+
+    if (Object.keys(updateData).length === 0) continue;
+
+    promises.push(updateSinglePhoto(id, data));
+  }
+
+  let success = 0;
+  Promise.allSettled(promises).then(result => {
+    for (const item of result) {
+      if (item.status === 'fulfilled') success++;
+    }
+    const error = result.length - success;
+
+    if (success > 0) $q.notify(successObject("Upraveno " + success + " fotografií"));
+    if (error > 0) $q.notify(errorObject(`Nepovedlo se uložit ${error} fotografií`))
+  });
+}
+
 </script>
 
 <template>
   <FlightFormSteps :router-edit-mode="true" :flightId="flightId"/>
 
-  <FlightEditSkeleton :step="formStep" v-if="loading"/>
+  <FlightEditSkeleton :step="formStep" v-if="isQueryRunning || !flight"/>
 
   <template v-else>
     <q-tab-panels v-model="formStep">
@@ -146,7 +205,7 @@ const rotatePhotos = ({photos, direction}) => {
         <FlightFormBasic
             @save="handleFlightEdit"
             :flight="flight"
-          :locations="locations"
+            :locations="pointsOfInterest"
             :airports="airports"
             :aircrafts="aircrafts"
         />
@@ -158,9 +217,9 @@ const rotatePhotos = ({photos, direction}) => {
 
       <q-tab-panel name="track">
         <FlightFormTrack
-          v-if="locations"
+            v-if="pointsOfInterest"
             :flight="flight"
-          :locations="locations"
+            :locations="pointsOfInterest"
             :airports="airports"
             @save="handleFlightEdit"
         />
@@ -184,14 +243,14 @@ const rotatePhotos = ({photos, direction}) => {
         <!-- Dialogs for photo edit -->
         <PhotoFormDialog
             v-model="openEdit"
-          :locations="locations"
+            :locations="pointsOfInterest"
             :photo="editPhoto"
             @save="handlePhotoUpdate(flightId, $event)"
         />
 
         <BatchPhotoFormDialog
             v-model="openBatchEdit"
-          :locations="locations"
+            :locations="pointsOfInterest"
             :photos="editBatchPhotos"
             @save="handleBatchPhotoEdit(flightId, $event)"
             @delete="deletePhoto"

src/pages/profile/flight/FlightDetailPage.vue

@@ -2,11 +2,11 @@
 import {useRoute, useRouter} from "vue-router";
 import {computed, onMounted, ref, watch} from "vue";
 import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
-import {fetchFlight, flight, flightName, handleDeleteFlight, loading} from "src/composables/objects/flight";
+import {flightName} from "src/composables/objects/flight";
 import {useAppStore} from "stores/App";
 import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
 import {copyToClipboard, useQuasar} from "quasar";
-import {successObject} from "src/composables/dialog";
+import {confirmObject, successObject} from "src/composables/dialog";
 import {useFlightsStore} from "stores/Flights";
 import FlightTrackMap from "components/flights/FlightTrackMap.vue";
 import {useUserStore} from "stores/User";
@@ -19,26 +19,25 @@ const $router = useRouter();
 const flightId = parseInt(useRoute().params.id);
 const loggedUser = storeToRefs(useUserStore()).user;
 
-onMounted(() => {
+onMounted(() => {flight.value
-  fetchFlight(flightId);
+  useFlightsStore().fetchDetail(flightId).then(f => {
-})
+    const flightNameFormatted = flightName(f);
-
-watch(flight, (newVal) => {
-  const flightNameFormatted = flightName(newVal);
     useAppStore().setPageTitle(flightNameFormatted);
     useAppStore().setBreadcrumbs([
       {to: {name: "myFlights"}, label: "Moje lety"},
       {label: flightNameFormatted}
     ]);
-});
+  })
+})
 
 const handleDeleteAndRedirect = () => {
-  const flightId = flight.value.id;
+  $q.dialog(confirmObject("Opravdu chceš smazat tento let?"))
-
+    .onOk(() => {
-  handleDeleteFlight($q, flightId, (flight) => {
+      useFlightsStore().destroy(flightId).then(() => {
         $router.push({name: "myFlights"});
         $q.notify(successObject(`Úspěšně smazáno`));
-  })
+      });
+    });
 }
 
 
@@ -46,8 +45,7 @@ const togglePublicVisibility = () => {
   const newVisibility = !flight.value.isPublic;
   useFlightsStore()
     .update(flightId, {isPublic: newVisibility})
-      .then((updatedFlight) => {
+    .then(() => {
-        flight.value = updatedFlight;
       $q.notify(successObject(newVisibility ? "Úspěšně publikováno" : "Úspěšně skryto"));
     });
 };
@@ -62,11 +60,12 @@ const copyLinkToClipboard = () => {
     $q.notify(successObject("Odkaz zkopírován"))
   });
 };
+
+const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
 </script>
 
-
 <template>
-  <FlightDetailSkeleton v-if="loading || !flight"/>
+  <FlightDetailSkeleton v-if="isQueryRunning || !flight"/>
 
   <q-card class="flight-detail-card" v-else>
     <q-img :src="flight.coverPhoto.url" v-if="flight.coverPhoto">
@@ -77,14 +76,6 @@ const copyLinkToClipboard = () => {
 
     <q-card-actions class="q-my-md">
       <div class="col-grow">
-<!--        <q-btn-->
-<!--            flat-->
-<!--            :to="{name: 'flightEdit', params:{id: flight.id}}"-->
-<!--            icon="edit"-->
-<!--            text-color="primary"-->
-<!--            label="Upravit"-->
-<!--        />-->
-
         <q-btn
           @click="togglePublicVisibility"
           :icon="flight.isPublic ? 'visibility_off' : 'visibility'"
@@ -137,7 +128,7 @@ const copyLinkToClipboard = () => {
       <q-separator/>
 
       <div class="text-right">
-        <q-btn class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}" icon="edit" color="primary">Upravit trasu</q-btn>
+        <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}" icon="edit" color="primary">Upravit trasu</q-btn>
       </div>
       <BasicInfoBanner
         v-if="flight.track.length === 0 && !flight.gpxTrack"

src/pages/profile/flight/FlightsPage.vue

@@ -4,30 +4,33 @@ import {useQuasar} from "quasar";
 import FlightsList from "components/flights/FlightsList.vue";
 import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
 import FAB from "components/FAB.vue";
-import {fetchFlights, flights, handleDeleteFlight, loading} from "src/composables/objects/flight";
 import {useAppStore} from "stores/App";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
+import {useFlightsStore} from "stores/Flights";
+import {storeToRefs} from "pinia";
 
 const $q = useQuasar();
 
 useAppStore().setPageTitle("Moje lety")
 onMounted(() => {
-  fetchFlights();
+  useFlightsStore().fetch();
 })
+
+const {flights, isQueryRunning} = storeToRefs(useFlightsStore());
 </script>
 
 <template>
-  <FlightsListSkeleton v-if="loading"/>
+  <FlightsListSkeleton v-if="isQueryRunning"/>
 
   <BasicInfoBanner
-    v-else-if="!loading && flights.length === 0"
+    v-else-if="!isQueryRunning && flights.length === 0"
     :route-add="{name: 'addFlight'}"
     label-add="Přidat let"
   >
     Nemáš zaznamenaný žádný let.
   </BasicInfoBanner>
 
-  <FlightsList v-else :items="flights" @delete="handleDeleteFlight($q, $event)"/>
+  <FlightsList v-else :items="flights"/>
 
   <FAB mode="add" :router-link="{name: 'addFlight'}"/>
 </template>

src/pages/profile/flight/NewFlightPage.vue

@@ -1,28 +1,21 @@
 <script setup>
-import {onMounted, ref} from "vue";
+import {computed, onMounted, ref} from "vue";
 import {useAircraftsStore} from "stores/Aircrafts";
 import {useFlightsStore} from "stores/Flights";
 import {useRouter} from "vue-router";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 import {storeToRefs} from "pinia";
 import {useAirportsStore} from "stores/Airports";
+import {useAppStore} from "stores/App";
 import FlightFormSteps from "components/flights/form/FlightFormSteps.vue";
 import FlightFormBasic from "components/flights/form/FlightFormBasic.vue";
-import {useAppStore} from "stores/App";
-import {isRequestPending} from "src/composables/objects/flight";
 import FlightEditSkeleton from "components/flights/FlightEditSkeleton.vue";
 
-const loading = ref(true);
 onMounted(() => {
-  const promises = [
+  useAircraftsStore().fetch()
-    useAircraftsStore().fetch(),
+  usePointsOfInterestStore().fetch()
-    usePointsOfInterestStore().fetch(),
+  useFlightsStore().fetch()
-    useFlightsStore().fetch(),
+  useAirportsStore().fetch()
-    useAirportsStore().fetch(),
-  ];
-
-  loading.value = true;
-  Promise.all(promises).finally(() => loading.value = false);
 
   useAppStore().setPageTitle("Nový let");
   useAppStore().setBreadcrumbs([
@@ -31,9 +24,14 @@ onMounted(() => {
   ]);
 });
 
-const aircrafts = storeToRefs(useAircraftsStore()).items;
+const {isMutationRunning} = storeToRefs(useFlightsStore());
-const locations = storeToRefs(usePointsOfInterestStore()).items;
+const {aircrafts} = storeToRefs(useAircraftsStore());
-const airports = storeToRefs(useAirportsStore()).items;
+const {pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
+const {airports} = storeToRefs(useAirportsStore());
+
+const loading = computed(() => [
+  useAircraftsStore().isQueryRunning, usePointsOfInterestStore().isQueryRunning, useAirportsStore().isQueryRunning
+].some(i => i.value))
 
 const router = useRouter();
 const handleSave = (formData) => {
@@ -50,10 +48,10 @@ const handleSave = (formData) => {
   <template v-else>
     <FlightFormBasic
         @save="handleSave"
-      :is-request-pending="isRequestPending"
+        :is-request-pending="isMutationRunning"
         :aircrafts="aircrafts"
         :airports="airports"
-      :locations="locations"
+        :locations="pointsOfInterest"
     />
   </template>
 </template>

src/pages/profile/flight/PhotoEditorPage.vue

@@ -7,11 +7,13 @@ import {flightName} from "src/composables/objects/flight";
 import VuePictureCropper from 'vue-picture-cropper';
 import {croppedAreaForPreview, getPreviewUrl} from "src/composables/photos/editor/preview";
 import {compare, onResize, splitter, splitterWidth} from "src/composables/photos/editor/splitter";
-import {aspectRatioOptions, croppedArea, cropperReady, selectedAspectRatio, setCropData} from "src/composables/photos/editor/crop";
+import {aspectRatioOptions, croppedArea, cropperReady, photoAspectRatio, selectedAspectRatio, setCropData} from "src/composables/photos/editor/crop";
-import {fetchPhoto, loading, photo, photoAspectRatio} from "src/composables/photos/editor/photo";
 import {debounce, useQuasar} from "quasar";
 import {successObject} from "src/composables/dialog";
 import PhotoEditorSkeleton from "components/photos/PhotoEditorSkeleton.vue";
+import {storeToRefs} from "pinia";
+import FormSubmitButton from "components/FormSubmitButton.vue";
+import FormWrapper from "components/FormWrapper.vue";
 
 const $route = useRoute();
 const $q = useQuasar();
@@ -43,24 +45,24 @@ watch(() => [adjustment.value, croppedAreaForPreview.value], debounce(() => {
 const savePhotoAdjustment = (photoId) => {
   const adjustmentInput = {...adjustment.value};
 
-  if (croppedArea.value.left !== null) {
+  if (croppedArea.value && croppedArea.value.left !== null) {
     adjustmentInput.crop = {...croppedArea.value}
   }
 
   usePhotosStore().adjust(photoId, adjustmentInput).then((data) => {
     noCacheTimestamp.value = (new Date()).getTime();
-    photo.value = data;
-
     $q.notify(successObject("Fotka úspěšně upravena"));
   });
 };
 
 onMounted(() => {
-  fetchPhoto(photoId).then(() => {
+  usePhotosStore().fetchDetail(photoId).then((p) => {
-    const flightNameFormatted = flightName(photo.value.flight);
+    const flightNameFormatted = flightName(p.flight);
 
-    if (photo.value.adjustment) {
+    photoAspectRatio.value = p.width / p.height;
-      const photoAdjustment = photo.value.adjustment;
+
+    if (p.adjustment) {
+      const photoAdjustment = p.adjustment;
       const src = photoAdjustment || defaultAdjustments;
       for (const i in defaultAdjustments) {
         adjustment.value[i] = src[i];
@@ -77,22 +79,24 @@ onMounted(() => {
     }
     useAppStore().setBreadcrumbs([
       {to: {name: "myFlights"}, label: "Moje lety"},
-      {to: {name: "flightDetail", params: {id: photo.value.flightId}}, label: flightNameFormatted},
+      {to: {name: "flightDetail", params: {id: p.flightId}}, label: flightNameFormatted},
-      {to: {name: "flightEdit", params: {id: photo.value.flightId, step: 'photos'}}, label: "Fotografie"},
+      {to: {name: "flightEdit", params: {id: p.flightId, step: 'photos'}}, label: "Fotografie"},
       {label: "Foto editor"}
     ]);
   })
 
   useAppStore().setPageTitle("Foto editor");
 });
+
+const {isQueryRunning, isMutationRunning, photo} = storeToRefs(usePhotosStore());
 </script>
 
 <template>
   <q-resize-observer @resize="onResize" :debounce="100"/>
 
-  <PhotoEditorSkeleton v-if="loading" />
+  <PhotoEditorSkeleton v-if="isQueryRunning"/>
 
-  <template v-if="!loading">
+  <template v-if="!isQueryRunning">
     <q-card :style="`width: ${splitterWidth}px; margin: 0 auto`">
       <VuePictureCropper
           v-if="editorTab === 'crop'"
@@ -167,6 +171,8 @@ onMounted(() => {
         </q-tabs>
         <q-separator/>
 
+
+        <FormWrapper :is-request-pending="isMutationRunning" @save="savePhotoAdjustment(photoId)">
           <q-tab-panels v-model="editorTab" animated>
             <q-tab-panel name="colors">
               <q-list>
@@ -277,11 +283,8 @@ onMounted(() => {
               />
             </q-tab-panel>
           </q-tab-panels>
+        </FormWrapper>
       </q-card-section>
-      <q-card-actions>
-        <q-space/>
-        <q-btn color="primary" icon="save" @click="savePhotoAdjustment(photoId)">Uložit</q-btn>
-      </q-card-actions>
     </q-card>
   </template>
 </template>

src/pages/profile/organization/EditOrganizationPage.vue

@@ -1,6 +1,5 @@
 <script setup>
 import {onMounted} from "vue";
-import {loading, organization, fetchOrganization, isRequestPending} from "src/composables/objects/organization";
 import {useAppStore} from "stores/App";
 import {useRoute, useRouter} from "vue-router";
 import {useOrganizationsStore} from "stores/Organizations";
@@ -8,15 +7,16 @@ import {successObject} from "src/composables/dialog";
 import {useQuasar} from "quasar";
 import OrganizationEditSkeleton from "components/organizations/OrganizationEditSkeleton.vue";
 import OrganizationForm from "components/organizations/OrganizationForm.vue";
+import {storeToRefs} from "pinia";
 
 const organizationId = parseInt(useRoute().params.id);
 
 onMounted(() => {
-  fetchOrganization(organizationId).then(() => {
+  useOrganizationsStore().fetchDetail(organizationId).then((o) => {
-    useAppStore().setPageTitle(`${organization.value.name} - editace`);
+    useAppStore().setPageTitle(`${o.name} - editace`);
     useAppStore().setBreadcrumbs([
       {to: {name: "organizations"}, label: "Organizace"},
-      {to: {name: "organizationDetail", params: {id: organizationId}}, label: organization.value.name},
+      {to: {name: "organizationDetail", params: {id: organizationId}}, label: o.name},
       {label: "Editace"}
     ])
   })
@@ -30,15 +30,17 @@ const handleSave = (formData) => {
     $router.push({name: "organizationDetail", params: {id: organizationId}});
   });
 }
+
+const {isQueryRunning, isMutationRunning, organization} = storeToRefs(useOrganizationsStore());
 </script>
 
 <template>
-  <OrganizationEditSkeleton v-if="loading"/>
+  <OrganizationEditSkeleton v-if="isQueryRunning"/>
 
   <OrganizationForm
     v-else
     :organization="organization"
-    :is-request-pending="isRequestPending"
+    :is-request-pending="isMutationRunning"
     @save="handleSave"
   />
 </template>

src/pages/profile/organization/NewOrganizationPage.vue

@@ -4,8 +4,8 @@ import {useQuasar} from "quasar";
 import {successObject} from "src/composables/dialog";
 import {useOrganizationsStore} from "stores/Organizations";
 import {useAppStore} from "stores/App";
-import {isRequestPending} from "src/composables/objects/organization";
 import OrganizationForm from "components/organizations/OrganizationForm.vue";
+import {storeToRefs} from "pinia";
 
 const $q = useQuasar();
 const router = useRouter();
@@ -21,8 +21,10 @@ useAppStore().setBreadcrumbs([
   {to: {name: "organizations"}, label: "Organizace"},
   {label: "Nová"}
 ]);
+
+const {isMutationRunning} = storeToRefs(useOrganizationsStore());
 </script>
 
 <template>
-  <OrganizationForm @save="handleSave" :is-request-pending="isRequestPending"/>
+  <OrganizationForm @save="handleSave" :is-request-pending="isMutationRunning"/>
 </template>

src/pages/profile/organization/OrganizationDetailPage.vue

@@ -1,7 +1,6 @@
 <script setup>
 import {useRoute} from "vue-router";
-import {onMounted} from "vue";
+import {computed, onMounted} from "vue";
-import {organization, fetchOrganization, loading, myOrganizationIds, addToOrganization, removeFromOrganization} from "src/composables/objects/organization";
 import {useAppStore} from "stores/App";
 import FAB from "components/FAB.vue";
 import {storeToRefs} from "pinia";
@@ -11,39 +10,41 @@ import AircraftsList from "components/aircrafts/AircraftsList.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {useQuasar} from "quasar";
 import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
+import {useOrganizationsStore} from "stores/Organizations";
 
 const organizationId = parseInt(useRoute().params.id);
 const loggedUser = storeToRefs(useUserStore()).user;
 const $q = useQuasar();
 
 onMounted(() => {
-  fetchOrganization(organizationId).then(() => {
+  useOrganizationsStore().fetchDetail(organizationId).then((o) => {
-    useAppStore().setPageTitle(organization.value.name);
+    useAppStore().setPageTitle(o.name);
     useAppStore().setBreadcrumbs([
       {to: {name: "organizations"}, label: "Organizace"},
-      {label: organization.value.name}
+      {label: o.name}
     ])
   });
 });
 
+const myOrganizationIds = computed(() =>  (loggedUser.value && loggedUser.value.organizations?.map(o => o.id)) || []);
+const {isQueryRunning, organization} = storeToRefs(useOrganizationsStore());
 </script>
 
 <template>
   <h3>Členové</h3>
 
-
   <div class="q-my-md">
-    <q-btn color="positive" @click="addToOrganization(organizationId)" v-if="!myOrganizationIds.includes(organizationId)">
+    <q-btn color="positive" @click="useOrganizationsStore().addUserToOrganization(organizationId)" v-if="!myOrganizationIds.includes(organizationId)">
       <q-icon name="add"/>
       Přidat se
     </q-btn>
-    <q-btn color="warning" @click="removeFromOrganization(organizationId)" v-else>
+    <q-btn color="warning" @click="useOrganizationsStore().removeUserFromOrganization(organizationId)" v-else>
       <q-icon name="remove"/>
       Opustit organizaci
     </q-btn>
   </div>
 
-  <BasicListSkeleton :items-count-min="1" :items-count-max="5" v-if="loading || !organization"/>
+  <BasicListSkeleton :items-count-min="1" :items-count-max="5" v-if="isQueryRunning || !organization"/>
   <template v-else>
     <q-list bordered separator v-if="organization.users.length > 0">
       <q-item v-for="user in organization.users" :key="user">
@@ -64,7 +65,7 @@ onMounted(() => {
 
   <h3>Letadla</h3>
 
-  <BasicListSkeleton :items-count-min="1" :items-count-max="5" v-if="loading || !organization"/>
+  <BasicListSkeleton :items-count-min="1" :items-count-max="5" v-if="isQueryRunning || !organization"/>
   <template v-else>
     <AircraftsList :items="organization.aircrafts" v-if="organization.aircrafts.length > 0"/>
     <BasicInfoBanner v-else>

src/pages/profile/organization/OrganizationsPage.vue

@@ -1,22 +1,28 @@
 <script setup>
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
-import { onMounted} from "vue";
+import {computed, onMounted} from "vue";
-import {fetchOrganizations, loading, myOrganizationIds, organizations} from "src/composables/objects/organization";
 import {useAppStore} from "stores/App";
 import FAB from "components/FAB.vue";
 import OrganizationsList from "components/organizations/OrganizationsList.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
+import {useOrganizationsStore} from "stores/Organizations";
+import {storeToRefs} from "pinia";
+import {useUserStore} from "stores/User";
 
 onMounted(() => {
-  fetchOrganizations();
+  useOrganizationsStore().fetch();
   useAppStore().setPageTitle("Organizace");
 });
 
+const loggedUser = storeToRefs(useUserStore()).user;
+const myOrganizationIds = computed(() => (loggedUser.value && loggedUser.value.organizations?.map(o => o.id)) || []);
+
+const {isQueryRunning, organizations} = storeToRefs(useOrganizationsStore());
 </script>
 
 <template>
-  <BasicListSkeleton v-if="loading"/>
+  <BasicListSkeleton v-if="isQueryRunning"/>
-  <BasicInfoBanner v-else-if="!loading && organizations.length === 0" :route-add='{name: "addOrganization"}'>
+  <BasicInfoBanner v-else-if="!isQueryRunning && organizations.length === 0" :route-add='{name: "addOrganization"}'>
     Aktuálně nejsou dostupné žádné organizace, ke kterým by ses mohl/a přidat.
     Zaregistruj sem svůj aeroklub, abyste mohli sdílet letadla.
   </BasicInfoBanner>

src/pages/profile/poi/EditPointOfInterestPage.vue

@@ -1,6 +1,5 @@
 <script setup>
 import POIEditSkeleton from "components/poi/POIEditSkeleton.vue";
-import {fetchPoi, loading, poi} from "src/composables/objects/poi";
 import {onMounted} from "vue";
 import {useRoute, useRouter} from "vue-router";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
@@ -16,11 +15,11 @@ import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
 const poiId = parseInt(useRoute().params.id);
 
 onMounted(() => {
-  fetchPoi(poiId).then(() => {
+  usePointsOfInterestStore().fetchDetail(poiId).then((p) => {
-    useAppStore().setPageTitle(`${poi.value.name} - editace`);
+    useAppStore().setPageTitle(`${p.name} - editace`);
     useAppStore().setBreadcrumbs([
       {to: {name: "poi"}, label: "Zajímavá místa"},
-      {to: {name: "poiDetail", params: {id: poiId}}, label: poi.value.name},
+      {to: {name: "poiDetail", params: {id: poiId}}, label: p.name},
       {label: "Editace"},
     ]);
   });
@@ -30,6 +29,7 @@ onMounted(() => {
 
 const poiTypes = storeToRefs(usePointsOfInterestTypeStore()).items;
 const loggedUser = storeToRefs(useUserStore()).user;
+const {isQueryRunning, pointOfInterest, isMutationRunning} = storeToRefs(usePointsOfInterestStore());
 
 const $q = useQuasar();
 const router = useRouter();
@@ -42,10 +42,10 @@ const handleSave = (data) => {
 </script>
 
 <template>
-  <POIEditSkeleton v-if="loading"/>
+  <POIEditSkeleton v-if="isQueryRunning"/>
   <AccessDeniedBanner
-    v-else-if="poi.createdById !== loggedUser.id"
+    v-else-if="pointOfInterest.createdById !== loggedUser.id"
     :route-back="{name: 'poiDetail', params: {id: poiId}}"
   />
-  <POIForm :poi="poi" :types="poiTypes" v-else @save="handleSave"/>
+  <POIForm :poi="pointOfInterest" :types="poiTypes" v-else @save="handleSave"/>
 </template>

src/pages/profile/poi/NewPointOfInterestPage.vue

@@ -16,15 +16,16 @@ const handleSave = (formData) => {
     router.push({name: "poi"});
   })
 }
-const isRequestPending = storeToRefs(usePointsOfInterestStore()).isMutationRunning;
-
 useAppStore().setPageTitle("Nové zajímavé místo");
 useAppStore().setBreadcrumbs([
   {to: "poi", label: "Zajímavá místa"},
   {label: "Nové"},
 ])
+
+const {isMutationRunning} = storeToRefs(usePointsOfInterestStore());
+
 </script>
 
 <template>
-  <POIForm @save="handleSave" :is-request-pending="isRequestPending"/>
+  <POIForm @save="handleSave" :is-request-pending="isMutationRunnin"/>
 </template>

src/pages/profile/poi/PointOfInterestDetailPage.vue

@@ -3,57 +3,58 @@ import {onMounted} from "vue";
 import {useRoute} from "vue-router";
 import POIDetailSkeleton from "components/poi/POIDetailSkeleton.vue";
 import FAB from "components/FAB.vue";
-import {fetchPoi, loading, poi} from "src/composables/objects/poi";
-import PhotosList from "components/photos/PhotosEditorList.vue";
 import {useAppStore} from "stores/App";
 import EmbeddedMap from "components/map/EmbeddedMap.vue";
 import {useUserStore} from "stores/User";
 import {storeToRefs} from "pinia";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import FlightsList from "components/flights/FlightsList.vue";
+import {usePointsOfInterestStore} from "stores/PointsOfInterest";
+import PhotoGallery from "components/photos/PhotoGallery.vue";
 
 const loggedUser = storeToRefs(useUserStore()).user;
 
 onMounted(() => {
-  fetchPoi(useRoute().params.id).then(() => {
+  usePointsOfInterestStore().fetchDetail(useRoute().params.id).then((p) => {
-    useAppStore().setPageTitle(`${poi.value.name}`);
+    useAppStore().setPageTitle(`${p.name}`);
     useAppStore().setBreadcrumbs([
       {to: {name: "poi"}, label: "Zajímavá místa"},
-      {label: poi.value.name},
+      {label: p.name},
     ])
   });
-})
+});
+
+const {isQueryRunning, pointOfInterest} = storeToRefs(usePointsOfInterestStore());
 </script>
 
 <template>
-  <POIDetailSkeleton v-if="loading || !poi"/>
+  <POIDetailSkeleton v-if="isQueryRunning || !pointOfInterest"/>
 
   <template v-else>
-    <article v-html="poi.description" class="q-my-lg" />
+    <article v-html="pointOfInterest.description" class="q-my-lg" />
 
     <EmbeddedMap
-      v-if="poi.gpsLatitude && poi.gpsLongitude"
+      v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
-      :gps-latitude="poi.gpsLatitude"
+      :gps-latitude="pointOfInterest.gpsLatitude"
-      :gps-longitude="poi.gpsLongitude"
+      :gps-longitude="pointOfInterest.gpsLongitude"
       :zoom="13"
     />
     <BasicInfoBanner v-else>
       Tento bod nemá nastavenou polohu. Po nastavení polohy tu bude zobrazena mapa.
     </BasicInfoBanner>
 
-    <PhotosList
+    <PhotoGallery
-      :photos="poi.photos"
+      :photos="pointOfInterest.photos"
-      :show-actions="false"
+      v-if="pointOfInterest.photos.length > 0"
-      v-if="poi.photos.length > 0"
     />
 
     <BasicInfoBanner v-else>
       Pokud přidáš toto místo k nějaké fotce, zobrazí se tu.
     </BasicInfoBanner>
 
-    <FlightsList :items="poi.flights" v-if="poi.flights.length > 0 && loggedUser.id === poi.createdById"/>
+    <FlightsList :items="pointOfInterest.flights" v-if="pointOfInterest.flights.length > 0 && loggedUser.id === pointOfInterest.createdById"/>
 
-    <FAB v-if="poi.createdById === loggedUser.id" :router-link="{name: 'poiEdit', params:{id: poi.id}}" mode="edit"/>
+    <FAB v-if="pointOfInterest.createdById === loggedUser.id" :router-link="{name: 'poiEdit', params:{id: pointOfInterest.id}}" mode="edit"/>
   </template>
 
 </template>

src/pages/profile/poi/PointsOfInterestPage.vue

@@ -1,24 +1,25 @@
 <script setup>
 import {onMounted} from "vue";
-import {fetchPOIList, loading, pointsOfInterest} from "src/composables/objects/poi";
 import {useAppStore} from "stores/App";
 import POIList from "components/poi/POIList.vue";
 import FAB from "components/FAB.vue";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
-import {flights} from "src/composables/objects/flight";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
+import {usePointsOfInterestStore} from "stores/PointsOfInterest";
+import {storeToRefs} from "pinia";
 
 onMounted(() => {
-  fetchPOIList();
+  usePointsOfInterestStore().fetch();
+  useAppStore().setPageTitle("Zajímavá místa");
 });
 
-useAppStore().setPageTitle("Zajímavá místa")
+const {isQueryRunning, pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
 </script>
 
 <template>
-  <BasicListSkeleton :items-count-min="5" :items-count-max="10" v-if="loading"/>
+  <BasicListSkeleton :items="10" v-if="isQueryRunning"/>
   <BasicInfoBanner
-    v-else-if="!loading && pointsOfInterest.length === 0"
+    v-else-if="!isQueryRunning && pointsOfInterest.length === 0"
     :route-add="{name: 'addPoi'}"
     label-add="Přidat"
   >

src/pages/public/IndexPage.vue

@@ -24,7 +24,7 @@
 
           <div class="col col-md-6">
             <div class="info-box bg-semi-transparent q-mx-lg  q-py-lg q-px-lg rounded-borders">
-              <div class="text-h2 text-center">Pochlub se polétáním</div>
+              <div class="text-h3 text-center">Pochlub se polétáním</div>
 
               <q-timeline color="primary" class="q-my-lg">
                 <q-timeline-entry title="Zaznamenej si let">

src/pages/public/PilotProfilePage.vue

@@ -1,13 +1,19 @@
 <script setup>
 import {useRoute} from "vue-router";
-import {user as pilot, loading as pilotLoading} from "src/composables/objects/user";
 import PublicProfileSkeleton from "components/profile/PublicProfileSkeleton.vue";
 import {storeToRefs} from "pinia";
 import {useUserStore} from "stores/User";
 import PilotProfileCard from "components/profile/PilotProfileCard.vue";
+import {onMounted} from "vue";
 
 const loggedUser = storeToRefs(useUserStore()).user;
 const username = useRoute().params.username;
+
+const {publicUser: pilot, isQueryRunning: pilotLoading} = storeToRefs(useUserStore());
+
+onMounted(() => {
+  useUserStore().fetchPublicUserDetail(username);
+})
 </script>
 
 <template>
@@ -16,7 +22,7 @@ const username = useRoute().params.username;
       <router-view :logged-user="loggedUser" :username="username"/>
     </div>
     <div class="col-12 col-md-4">
-      <PublicProfileSkeleton v-if="pilotLoading"/>
+      <PublicProfileSkeleton v-if="pilotLoading || !pilot"/>
       <PilotProfileCard v-else :pilot="pilot"/>
     </div>
   </div>

src/pages/public/pilotProfile/CopilotDetailPage.vue

@@ -1,11 +1,12 @@
 <script setup>
 import {useRoute} from "vue-router";
-import {copilot, fetchCopilot, loading as copilotLoading} from "src/composables/objects/copilot";
-import {fetchUser, user as pilot, loading as pilotLoading} from "src/composables/objects/user";
 import {onMounted} from "vue";
 import FlightsList from "components/flights/FlightsList.vue";
 import {useAppStore} from "stores/App";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+import {useUserStore} from "stores/User";
+import {useCopilotsStore} from "stores/Copilots";
+import {storeToRefs} from "pinia";
 
 const $route = useRoute();
 const copilotId = parseInt($route.params.id);
@@ -22,17 +23,19 @@ const props = defineProps({
   }
 });
 
+const {copilot, isQueryRunning} = storeToRefs(useCopilotsStore());
+const {publicUser, isQueryRunning: isPilotQueryRunning} = storeToRefs(useUserStore());
 
 onMounted(() => {
   Promise.all([
-    fetchUser(props.username),
+    useUserStore().fetchPublicUserDetail(props.username),
-    fetchCopilot(copilotId, props.username)
+    useCopilotsStore().fetchDetail(copilotId, props.username)
   ]).then(() => {
-    useAppStore().setPageTitle(`${pilot.value.name} + ${copilot.value.name}`);
+    useAppStore().setPageTitle(`${publicUser.value.name} + ${copilot.value.name}`);
     useAppStore().setBreadcrumbs([
       {to: {name: 'homepage'}, label: "Polétání.cz"},
       {to: {name: "publicProfileDetail", params: {username: props.username}}, label: `@${props.username}`},
-      {label: pilot.value.name}
+      {label: publicUser.value.name}
     ]);
   });
 });
@@ -40,7 +43,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <BasicListSkeleton v-if="copilotLoading || pilotLoading" class="q-mb-md"/>
+  <BasicListSkeleton v-if="isQueryRunning || isPilotQueryRunning || !copilot" class="q-mb-md"/>
 
   <template v-else>
     <h3>Společné lety</h3>

src/pages/public/pilotProfile/EventDetailPage.vue

@@ -1,25 +1,23 @@
 <script setup>
 import {onMounted, watch} from "vue";
-import {event, fetchEvent, loading} from "src/composables/objects/event";
 import {useRoute} from "vue-router";
 import {useAppStore} from "stores/App";
-import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
-import {fetchUser, loading as pilotLoading, user as pilot} from "src/composables/objects/user";
-import PublicProfileSkeleton from "components/profile/PublicProfileSkeleton.vue";
-import PilotProfileCard from "components/profile/PilotProfileCard.vue";
 import EventDetailSkeleton from "components/event/EventDetailSkeleton.vue";
 import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
-import FAB from "components/FAB.vue";
 import FlightsList from "components/flights/FlightsList.vue";
+import {useEventsStore} from "stores/Events";
+import {useUserStore} from "stores/User";
+import {storeToRefs} from "pinia";
 
 const routeParams = useRoute().params;
 onMounted(() => {
-  fetchEvent(routeParams.id, routeParams.username);
+  useEventsStore().fetchDetail(routeParams.id, routeParams.username);
-  fetchUser(routeParams.username)
+  useUserStore().fetchPublicUserDetail(routeParams.username);
 })
 
-watch(event, (newVal) => {
+const {isQueryRunning, event} = storeToRefs(useEventsStore());
-  // const eventNameFormatted = eventName(newVal);
+
+watch(() => event.value, (newVal) => {
   useAppStore().setPageTitle(newVal.name);
   useAppStore().setBreadcrumbs([
     {to: {name: 'homepage'}, label: "Polétání.cz"},
@@ -33,8 +31,7 @@ watch(event, (newVal) => {
 
 <template>
   <div>
-    <EventDetailSkeleton v-if="loading || !event"/>
+    <EventDetailSkeleton v-if="isQueryRunning || !event"/>
-
 
     <template v-else>
       <q-banner class="bg-warning text-white q-mx-md q-my-md" v-if="!event.isPublic">
@@ -66,6 +63,7 @@ watch(event, (newVal) => {
       <FlightsList
         v-else
         :items="event.flights"
+        class="q-my-lg"
         :route-detail="{name: 'publicFlightDetail', params: {username: routeParams.username}}"
       />
 

src/pages/public/pilotProfile/EventsListPage.vue

@@ -1,10 +1,11 @@
 <script setup>
 import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
-import {event, events, fetchEvents, loading} from "src/composables/objects/event";
 import EventsList from "components/event/EventsList.vue";
 import {onMounted, watch} from "vue";
 import PublicFlightEventSwitcher from "components/navigation/PublicFlightEventSwitcher.vue";
 import {useAppStore} from "stores/App";
+import {useEventsStore} from "stores/Events";
+import {storeToRefs} from "pinia";
 
 const props = defineProps({
   loggedUser: {
@@ -28,20 +29,19 @@ onMounted(() => {
       {to: {name: "publicProfileDetail", params: {username: props.username}}, label: `@${props.username}`},
       {label: "Události"}
     ]);
-    fetchEvents(props.username);
+    useEventsStore().fetch(props.username);
   }
 );
 
-
+const {isQueryRunning, events} = storeToRefs(useEventsStore());
 </script>
 
 <template>
   <PublicFlightEventSwitcher :username="username"/>
 
-  <FlightsListSkeleton v-if="loading"/>
+  <FlightsListSkeleton v-if="isQueryRunning"/>
 
-
+  <q-banner class="bg-primary text-white" v-else-if="!isQueryRunning && events.length === 0">
-  <q-banner class="bg-primary text-white" v-else-if="!loading && events.length === 0">
     Tento pilot zatím nepublikoval žádnou udalost.
   </q-banner>
 

src/pages/public/pilotProfile/FlightDetailPage.vue

@@ -1,34 +1,34 @@
 <script setup>
 import {onMounted, watch} from "vue";
-import {fetchFlight, flight, flightName, loading} from "src/composables/objects/flight";
 import {useRoute} from "vue-router";
 import FlightTrackMap from "components/flights/FlightTrackMap.vue";
 import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
 import {useAppStore} from "stores/App";
 import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
-import {fetchUser, loading as pilotLoading, user as pilot} from "src/composables/objects/user";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
+import {storeToRefs} from "pinia";
+import {useFlightsStore} from "stores/Flights";
+import {flightName} from "src/composables/objects/flight";
 
 const routeParams = useRoute().params;
 onMounted(() => {
-  fetchFlight(routeParams.id, routeParams.username);
+  useFlightsStore().fetchDetail(routeParams.id, routeParams.username).then(f => {
-  fetchUser(routeParams.username)
+    const flightNameFormatted = flightName(f);
-})
-
-watch(flight, (newVal) => {
-  const flightNameFormatted = flightName(newVal);
     useAppStore().setPageTitle(flightNameFormatted);
     useAppStore().setBreadcrumbs([
       {to: {name: 'homepage'}, label: "Polétání.cz"},
       {to: {name: "publicProfileDetail", params: {username: routeParams.username}}, label: `@${routeParams.username}`},
       {label: flightNameFormatted}
     ]);
-});
+  })
+})
+
+const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
 </script>
 
 <template>
   <div>
-    <FlightDetailSkeleton v-if="loading || !flight"/>
+    <FlightDetailSkeleton v-if="isQueryRunning || !flight"/>
 
     <template v-else>
       <q-banner class="bg-warning text-white q-mx-md q-my-md" v-if="!flight.isPublic">

src/pages/public/pilotProfile/FlightsListPage.vue

@@ -1,11 +1,12 @@
 <script setup>
-import {fetchFlights, flights, loading as flightsLoading} from "src/composables/objects/flight";
-import {fetchUser, user as pilot} from "src/composables/objects/user";
 import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
 import FlightsList from "components/flights/FlightsList.vue";
 import PublicFlightEventSwitcher from "components/navigation/PublicFlightEventSwitcher.vue";
 import {onMounted} from "vue";
 import {useAppStore} from "stores/App";
+import {useUserStore} from "stores/User";
+import {useFlightsStore} from "stores/Flights";
+import {storeToRefs} from "pinia";
 
 const props = defineProps({
   loggedUser: {
@@ -20,23 +21,27 @@ const props = defineProps({
 });
 
 onMounted(() => {
-  fetchUser(props.username).then(user => {
+  useUserStore().fetchPublicUserDetail(props.username).then(user => {
     useAppStore().setPageTitle(user.publicUsername);
     useAppStore().setBreadcrumbs([
       {to: {name: 'homepage'}, label: "Polétání.cz"},
       {label: `@${user.publicUsername}`},
     ])
   })
-  fetchFlights(props.username);
+
-})
+  useFlightsStore().fetch(props.username);
+});
+
+const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+const {publicUser: pilot} = storeToRefs(useUserStore());
 </script>
 
 <template>
   <PublicFlightEventSwitcher :username="username" />
 
-  <FlightsListSkeleton v-if="flightsLoading"/>
+  <FlightsListSkeleton v-if="areFlightsLoading"/>
 
-  <q-banner class="bg-primary text-white" v-else-if="!flightsLoading && flights.length === 0">
+  <q-banner class="bg-primary text-white" v-else-if="!areFlightsLoading && flights.length === 0">
     Tento pilot zatím nepublikoval žádný let.
   </q-banner>
 

src/stores/Aircrafts.js

@@ -1,57 +1,57 @@
-import {defineStore} from 'pinia'
+import {defineStore} from "pinia";
-import {apolloWrapper} from "src/graphql/apollo";
+import {ref} from "vue";
 import {AIRCRAFT_DETAIL, AIRCRAFTS_LIST} from "src/graphql/queries/aircrafts";
-import {CREATE_AIRCRAFT, DELETE_AIRCRAFT, EDIT_AIRCRAFT} from "src/graphql/mutations/aircrafts";
+import {deleteFromItems, mutate, query, updateInItems} from "stores/helpers";
-import {deleteFromItems, updateInItems} from "stores/helpers";
+import {CREATE_AIRCRAFT, EDIT_AIRCRAFT, DELETE_AIRCRAFT} from "src/graphql/mutations/aircrafts";
 
-export const useAircraftsStore = defineStore('Aircrafts', {
+export const useAircraftsStore = defineStore('Aircrafts', () => {
-  state: () => ({
+    const aircraft = ref(null);
-    items: [],
+    const aircrafts = ref([]);
-    isMutationRunning: false
+    const isMutationRunning = ref(false);
-  }),
+    const isQueryRunning = ref(false);
 
-  getters: {
+    const fetchDetail = (id) => {
-    getDetail: (state) => (aircraftId) => state.items.find(a => a.id === aircraftId) || {}
+      return query({
-  },
+        isQueryRunning,
+        query: AIRCRAFT_DETAIL,
+        variables: {id},
+      }).then(item => aircraft.value = item);
+    };
 
-  actions: {
+    const fetch = () => {
-    fetchDetail(id) {
+      return query({
-      return apolloWrapper
+        isQueryRunning,
-        .query(AIRCRAFT_DETAIL, {id})
+        query: AIRCRAFTS_LIST
-        .then((result) => result.data.aircraft);
+      }).then(items => aircrafts.value = items);
-    },
+    }
-    create(formData) {
-      delete formData['id'];
 
-      this.isMutationRunning = true;
+    const create = (input) => {
-      return apolloWrapper.mutate(CREATE_AIRCRAFT, {input: formData}).then(({data}) => {
+      return mutate({
-        // this.items.push(data.createAircraft);
+        isMutationRunning,
+        mutation: CREATE_AIRCRAFT,
+        variables: {input}
+      }).then(item => aircrafts.value.push(item))
+    }
 
-        return data.createAircraft;
+    const update = (id, input) => {
-      }).finally(() => this.isMutationRunning = false);
+      return mutate({
-    },
+        isMutationRunning,
-    delete(id) {
+        mutation: EDIT_AIRCRAFT,
-      return apolloWrapper.mutate(DELETE_AIRCRAFT, {id}).then(({data}) => {
+        variables: {id, input}
-        deleteFromItems(this.items, 'id', id);
+      }).then(item => updateInItems(aircrafts.value, 'id', item))
+    }
 
-        return data;
+    const destroy = (id) => {
-      });
+      return mutate({
-    },
+        isMutationRunning,
-    update(id, formData) {
+        mutation: DELETE_AIRCRAFT,
-      this.isMutationRunning = true;
+        variables: {id}
-      return apolloWrapper.mutate(EDIT_AIRCRAFT, {id: id, input: formData}).then(({data}) => {
+      }).then(item => deleteFromItems(aircrafts.value, 'id', item))
-        const aircraft = data.editAircraft;
+    }
-        updateInItems(this.items, 'id', aircraft);
+
-        return aircraft;
+    return {
-      }).finally(() => this.isMutationRunning = false);
+      aircrafts, aircraft, isQueryRunning, isMutationRunning, fetchDetail, fetch, create,
-    },
+      update, destroy
-    fetch() {
-      return apolloWrapper
-        .query(AIRCRAFTS_LIST)
-        .then((result) => {
-          this.items = result.data.aircrafts;
-          return this.items;
-        });
     }
   }
-})
+);

src/stores/Airports.js

@@ -1,20 +1,18 @@
 import {defineStore} from 'pinia'
-import {apolloWrapper} from "src/graphql/apollo";
 import {AIRPORTS_LIST} from "src/graphql/queries/airports";
+import {ref} from "vue";
+import {query} from "stores/helpers";
 
-export const useAirportsStore = defineStore('Airports', {
+export const useAirportsStore = defineStore('Airports', () => {
-  state: () => ({
+  const airports = ref([])
-    items: [],
+  const isQueryRunning = ref(false);
-  }),
 
-  actions: {
+  const fetch = () => {
-    fetch() {
+    return query({
-      return apolloWrapper
+      isQueryRunning,
-        .query(AIRPORTS_LIST)
+      query: AIRPORTS_LIST,
-        .then((result) => {
+    }).then(items => airports.value = items);
-          this.items = result.data.airports;
-          return result.data.airports;
-        });
-    }
   }
+
+  return {airports, isQueryRunning, fetch};
 })

src/stores/App.js

@@ -1,22 +1,27 @@
 import {defineStore} from 'pinia'
+import {ref} from "vue";
 
-export const useAppStore = defineStore('App', {
+export const useAppStore = defineStore('App', () => {
-  state: () => ({
+  const pageTitle = ref(null);
-    pageTitle: null,
+  const breadcrumbs = ref([]);
-    breadcrumbs: [],
+  const appStatus = ref(200);  // TODO: toto nejspis nebude potreba!
-    appStatus: 200
+
-  }),
+  const resetAfterRouteChange = () => {
-  actions: {
+    setPageTitle("");
-    resetAfterRouteChange() {
+    setBreadcrumbs([]);
-      this.setPageTitle("");
+    appStatus.value = 200;
-      this.setBreadcrumbs([]);
+  };
-      this.appStatus = 200;
+
-    },
+  const setPageTitle = (value) => {
-    setPageTitle(pageTitle) {
+    // TODO: je toto vubec potreba?
-      this.pageTitle = pageTitle;
+    pageTitle.value = value;
-    },
-    setBreadcrumbs(breadcrumbs) {
-      this.breadcrumbs = breadcrumbs;
   }
+  const setBreadcrumbs = (items) => {
+    // TODO: je toto vubec potreba?
+    breadcrumbs.value = items;
+  }
+
+  return {
+    pageTitle, breadcrumbs, appStatus, resetAfterRouteChange, setPageTitle, setBreadcrumbs
   }
 })

src/stores/Copilots.js

@@ -1,41 +1,48 @@
 import {defineStore} from 'pinia'
-import {apolloWrapper} from "src/graphql/apollo";
 import {COPILOT_DETAIL, COPILOTS_LIST} from "src/graphql/queries/copilots";
 import {CREATE_COPILOT, EDIT_COPILOT} from "src/graphql/mutations/copilot";
-import {updateInItems} from "stores/helpers";
+import {mutate, query, updateInItems} from "stores/helpers";
+import {ref} from "vue";
 
-export const useCopilotsStore = defineStore('Copilots', {
+export const useCopilotsStore = defineStore('Copilots', () => {
-  state: () => ({
+  const copilot = ref(null);
-    items: [],
+  const copilots = ref([]);
-    isMutationRunning: false,
+  const isMutationRunning = ref(false);
-  }),
+  const isQueryRunning = ref(false);
 
-  actions: {
+  const fetchDetail = (id) => {
-    fetchDetail(copilotId, pilotUsername) {
+    return query({
-      return apolloWrapper.query(COPILOT_DETAIL, {id: copilotId, pilotUsername: pilotUsername}).then(({data}) => data.copilot);
+      isQueryRunning,
-    },
+      query: COPILOT_DETAIL,
-    fetch() {
+      variables: {id},
-      return apolloWrapper.query(COPILOTS_LIST).then(result => {
+    }).then(item => copilot.value = item);
-        this.items = result.data.copilots;
+  };
-        return result.data.copilots;
-      });
-    },
-    create(formData) {
-      delete formData['id'];
 
-      this.isMutationRunning = true;
+  const fetch = () => {
-      return apolloWrapper.mutate(CREATE_COPILOT, {input: formData}).then(({data}) => {
+    return query({
-        const copilot = data.createCopilot;
+      isQueryRunning,
-        this.items.push(copilot);
+      query: COPILOTS_LIST,
-        return copilot;
+    }).then(items => copilots.value = items);
-      }).finally(() => this.isMutationRunning = false);
+  }
-    },
+
-    update(id, formData) {
+  const create = (input) => {
-      return apolloWrapper.mutate(EDIT_COPILOT, {id: id, input: formData}).then(({data}) => {
+    return mutate({
-        const copilot = data.editCopilot;
+      isMutationRunning,
-        updateInItems(this.items, "id", copilot);
+      mutation: CREATE_COPILOT,
-        return copilot;
+      variables: {input},
-      }).finally(() => this.isMutationRunning = false);
+    }).then(item => copilots.value.push(item))
-    },
+  }
+
+  const update = (id, input) => {
+    return mutate({
+      isMutationRunning,
+      mutation: EDIT_COPILOT,
+      variables: {id, input}
+    }).then(item => updateInItems(copilots.value, 'id', item))
+  }
+
+  return {
+    copilot, copilots, isMutationRunning, isQueryRunning,
+    fetch, fetchDetail, create, update
   }
 })

src/stores/Events.js

@@ -1,42 +1,48 @@
 import {defineStore} from 'pinia'
-import {apolloWrapper} from "src/graphql/apollo";
 import {CREATE_EVENT, EDIT_EVENT} from "src/graphql/mutations/event";
-import {updateInItems} from "stores/helpers";
+import {mutate, query, updateInItems} from "stores/helpers";
+import {ref} from "vue";
 import {EVENT_DETAIL, EVENTS_LIST} from "src/graphql/queries/event";
 
-export const useEventsStore = defineStore('Events', {
+export const useEventsStore = defineStore('Copilots', () => {
-  state: () => ({
+  const event = ref(null);
-    items: [],
+  const events = ref([]);
-    isMutationRunning: false,
+  const isMutationRunning = ref(false);
-  }),
+  const isQueryRunning = ref(false);
 
-  actions: {
+  const fetchDetail = (id) => {
-    fetchDetail(eventId, username) {
+    return query({
-      return apolloWrapper.query(EVENT_DETAIL, {id: eventId, username: username}).then(({data}) => data.event);
+      isQueryRunning,
-    },
+      query: EVENT_DETAIL,
-    fetch(username) {
+      variables: {id},
-      return apolloWrapper.query(EVENTS_LIST, {username}).then(result => {
+    }).then(item => event.value = item);
-        this.items = result.data.events;
+  };
-        return result.data.events;
-      });
-    },
-    create(formData) {
-      delete formData['id'];
 
-      this.isMutationRunning = true;
+  const fetch = (username = undefined) => {
-      return apolloWrapper.mutate(CREATE_EVENT, {input: formData}).then(({data}) => {
+    return query({
-        const event = data.createEvent;
+      isQueryRunning,
-        event.flights = event.flights || [];
+      query: EVENTS_LIST,
-        this.items.push(event);
+      variables: {username}
-        return event;
+    }).then(items => events.value = items);
-      }).finally(() => this.isMutationRunning = false);
+  }
-    },
+
-    update(id, formData) {
+  const create = (input) => {
-      return apolloWrapper.mutate(EDIT_EVENT, {id: id, input: formData}).then(({data}) => {
+    return mutate({
-        const event = data.editEvent;
+      isMutationRunning,
-        updateInItems(this.items, "id", event);
+      mutation: CREATE_EVENT,
-        return event;
+      variables: {input},
-      }).finally(() => this.isMutationRunning = false);
+    }).then(item => events.value.push(item))
-    },
+  }
+
+  const update = (id, input) => {
+    return mutate({
+      isMutationRunning,
+      mutation: EDIT_EVENT,
+      variables: {id, input}
+    }).then(item => updateInItems(events.value, 'id', item))
+  }
+
+  return {
+    event, events, isMutationRunning, isQueryRunning, fetch, fetchDetail, create, update
   }
 })

src/stores/Flights.js

@@ -1,67 +1,114 @@
 import {defineStore} from 'pinia'
-import {apolloWrapper} from "src/graphql/apollo"
 import {FLIGHT_DETAIL, FLIGHTS_LIST} from "src/graphql/queries/flights";
 import {EDIT_FLIGHT, CREATE_FLIGHT, DELETE_FLIGHT} from "src/graphql/mutations/flight";
-import {updateInItems} from "stores/helpers";
+import {deleteFromItems, mutate, query, updateInItems} from "stores/helpers";
+import {ref} from "vue";
+import {DELETE_AIRCRAFT} from "src/graphql/mutations/aircrafts";
 
-export const useFlightsStore = defineStore('Flights', {
+export const useFlightsStore = defineStore('Flights', () => {
-  state: () => ({
+  const flight = ref(null);
-    items: [],
+  const flights = ref([]);
-    isMutationRunning: false
+  const isMutationRunning = ref(false);
-  }),
+  const isQueryRunning = ref(false);
 
-  getters: {
+   const fetchDetail = (id, username) => {
-    getDetail: (state) => (flightId) => {
+    return query({
-      return state.items.find(f => f.id === flightId);
+      isQueryRunning,
-    },
+      query: FLIGHT_DETAIL,
-  },
+      variables: {username, id},
+    }).then(item => flight.value = item);
+  };
 
-  actions: {
+  const fetch = (username = undefined) => {
-    create(formData) {
+    return query({
-      delete formData['id'];
+      isQueryRunning,
-      return apolloWrapper.mutate(CREATE_FLIGHT, {input: formData}).then(({data}) => {
+      query: FLIGHTS_LIST,
-        const flightId = data.createFlight.id;
+      variables: {username}
-
+    }).then(items => flights.value = items);
-        // pitomy ohack kvuli tomu, ze se mi nedari dostat z API rovnou informace o nove vytvorenem letadle
-        this.fetchDetail(flightId).then(flight => {
-          this.items.push(flight);
-        })
-
-        return data.createFlight;
-      })
-    },
-    update(id, formData) {
-      this.isMutationRunning = true;
-      return apolloWrapper.mutate(EDIT_FLIGHT, {id: id, input: formData}).then(({data}) => {
-        const flight = data.editFlight;
-        updateInItems(this.items, "id", flight);
-
-        return flight;
-      }).finally(() => this.isMutationRunning = false);
-    },
-    fetchDetail(id, username = null) {
-      if (typeof id !== "number") {
-        id = parseInt(id);
   }
-      return apolloWrapper.query(FLIGHT_DETAIL, {id, username}).then(result => result.data.flight);
-    },
-    fetch(username = null) {
-      return apolloWrapper
-        .query(FLIGHTS_LIST, {username})
-        .then((resp) => {
-          const data = resp.data;
-          this.items = data.flights;
-          return data.flights;
-        }).catch(err => console.log(err));
-    },
-    delete(id) {
-      return apolloWrapper.mutate(DELETE_FLIGHT, {id}).then(({data}) => {
 
-        const idx = this.items.indexOf(this.items.find(f => f.id === id));
-        this.items.splice(idx, 1);
 
-        return data.deleteFlight;
+  const create = (input) => {
+    return mutate({
+      isMutationRunning,
+      mutation: CREATE_FLIGHT,
+      variables: {input},
+    }).then(item => {
+      flights.value.push(item);
+      return item;
     })
-    },
+  }
-  },
+
+  const update = (id, input) => {
+    return mutate({
+      isMutationRunning,
+      mutation: EDIT_FLIGHT,
+      variables: {id, input}
+    }).then(item => {
+      updateInItems(flights.value, 'id', item);
+      flight.value = item;
+    })
+  }
+
+   const destroy = (id) => {
+      return mutate({
+        isMutationRunning,
+        mutation: DELETE_FLIGHT,
+        variables: {id}
+      }).then(item => deleteFromItems(flights.value, 'id', item))
+    }
+
+
+  return {
+    flight, flights, isMutationRunning, isQueryRunning, fetchDetail, fetch, create, update, destroy
+  }
+  //
+  // actions: {
+  //   create(formData) {
+  //     delete formData['id'];
+  //     return apolloWrapper.mutate(CREATE_FLIGHT, {input: formData}).then(({data}) => {
+  //       const flightId = data.createFlight.id;
+  //
+  //       // pitomy ohack kvuli tomu, ze se mi nedari dostat z API rovnou informace o nove vytvorenem letadle
+  //       this.fetchDetail(flightId).then(flight => {
+  //         this.items.push(flight);
+  //       })
+  //
+  //       return data.createFlight;
+  //     })
+  //   },
+  //   update(id, formData) {
+  //     this.isMutationRunning = true;
+  //     return apolloWrapper.mutate(EDIT_FLIGHT, {id: id, input: formData}).then(({data}) => {
+  //       const flight = data.editFlight;
+  //       updateInItems(this.items, "id", flight);
+  //
+  //       return flight;
+  //     }).finally(() => this.isMutationRunning = false);
+  //   },
+  //   fetchDetail(id, username = null) {
+  //     if (typeof id !== "number") {
+  //       id = parseInt(id);
+  //     }
+  //     return apolloWrapper.query(FLIGHT_DETAIL, {id, username}).then(result => result.data.flight);
+  //   },
+  //   fetch(username = null) {
+  //     return apolloWrapper
+  //       .query(FLIGHTS_LIST, {username})
+  //       .then((resp) => {
+  //         const data = resp.data;
+  //         this.items = data.flights;
+  //         return data.flights;
+  //       }).catch(err => console.log(err));
+  //   },
+  //   delete(id) {
+  //     return apolloWrapper.mutate(DELETE_FLIGHT, {id}).then(({data}) => {
+  //
+  //       const idx = this.items.indexOf(this.items.find(f => f.id === id));
+  //       this.items.splice(idx, 1);
+  //
+  //       return data.deleteFlight;
+  //     })
+  //   },
+  // },
 });

src/stores/Organizations.js

@@ -1,56 +1,118 @@
 import {defineStore} from 'pinia'
-import {apolloWrapper} from "src/graphql/apollo";
+import {apolloWrapper} from "boot/apollo";
 import {ADD_USER_TO_ORGANIZATION, CREATE_ORGANIZATION, EDIT_ORGANIZATION, REMOVE_USER_FROM_ORGANIZATION} from "src/graphql/mutations/organization";
 import {ORGANIZATION_DETAIL, ORGANIZATIONS_LIST} from "src/graphql/queries/organization";
-import {updateInItems} from "stores/helpers";
+import {mutate, query, updateInItems} from "stores/helpers";
+import {ref} from "vue";
+import {useUserStore} from "stores/User";
 
-export const useOrganizationsStore = defineStore('Organizations', {
+export const useOrganizationsStore = defineStore('Organizations', () => {
-  state: () => ({
-    items: [],
-    isMutationRunning: false,
-  }),
 
-  actions: {
+    const organization = ref(null);
-    fetchDetail(organizationId) {
+    const organizations = ref([]);
-      return apolloWrapper.query(ORGANIZATION_DETAIL, {id: organizationId}).then(({data}) => data.organization);
+    const isMutationRunning = ref(false);
-    },
+    const isQueryRunning = ref(false);
-    fetch() {
+
-      return apolloWrapper.query(ORGANIZATIONS_LIST).then(result => {
+    const fetchDetail = (id) => query({
-        this.items = result.data.organizations;
+        isQueryRunning,
-        return result.data.organizations;
+        query: ORGANIZATION_DETAIL,
+        variables: {id}
+    }).then(item => organization.value = item);
+
+    const fetch = () => query({
+        isQueryRunning,
+        query: ORGANIZATIONS_LIST
+    }).then(items => organizations.value = items);
+
+    const create = (input) => mutate({
+        isMutationRunning,
+        mutation: CREATE_ORGANIZATION,
+        variables: {input}
+    }).then(item => organizations.value.push(item));
+
+    const update = (id, input) => mutate({
+        isMutationRunning,
+        mutation: EDIT_ORGANIZATION,
+        variables: {id, input}
+    }).then(item => {
+        updateInItems(organizations.value, 'id', item);
+        return item;
     });
-    },
-    create(formData) {
-      delete formData['id'];
 
-      this.isMutationRunning = true;
+    const addUserToOrganization = (organizationId) => mutate({
-      return apolloWrapper.mutate(CREATE_ORGANIZATION, {input: formData}).then(({data}) => {
+        isMutationRunning,
-        const organization = data.createOrganization;
+        mutation: ADD_USER_TO_ORGANIZATION,
-        this.items.push(organization);
+        variables: {organizationId}
-        return organization;
+    }).then(item => {
-      }).finally(() => this.isMutationRunning = false);
+        useUserStore().user.organizations.push(item);
-    },
+        organization.value.users = item.users;
+        return item;
+    });
 
-    addUserToOrganization(organizationId) {
+    const removeUserFromOrganization = (organizationId) => mutate({
-      this.isMutationRunning = true;
+        isMutationRunning,
-      return apolloWrapper.mutate(ADD_USER_TO_ORGANIZATION, {organizationId}).then(({data}) => {
+        mutation: REMOVE_USER_FROM_ORGANIZATION,
-        return data.addToOrganization;
+        variables: {organizationId},
-      }).finally(() => this.isMutationRunning = false);
+    }).then(item => {
-    },
+        const idx = useUserStore().user.organizations.findIndex(o => o.id === organizationId);
+        useUserStore().user.organizations.splice(idx, 1);
+        organization.value.users = item.users;
+        return item;
+    });
 
-    removeUserFromOrganization(organizationId) {
+    return {
-      this.isMutationRunning = true;
+        organization, organizations, isMutationRunning, isQueryRunning, fetchDetail, fetch, create, update,
-      return apolloWrapper.mutate(REMOVE_USER_FROM_ORGANIZATION, {organizationId}).then(({data}) => {
+        addUserToOrganization, removeUserFromOrganization
-        return data.removeFromOrganization;
+    };
-      }).finally(() => this.isMutationRunning = false);
-    },
 
-    update(id, formData) {
+    //
-      return apolloWrapper.mutate(EDIT_ORGANIZATION, {id: id, input: formData}).then(({data}) => {
+    //
-        const organization = data.editOrganization;
+    // state: () => ({
-        updateInItems(this.items, "id", organization);
+    //   items: [],
-        return organization;
+    //   isMutationRunning: false,
-      }).finally(() => this.isMutationRunning = false);
+    // }),
-    },
+    //
-  }
+    // actions: {
-})
+    //   fetchDetail(organizationId) {
+    //     return apolloWrapper.query(ORGANIZATION_DETAIL, {id: organizationId}).then(({data}) => data.organization);
+    //   },
+    //   fetch() {
+    //     return apolloWrapper.query(ORGANIZATIONS_LIST).then(result => {
+    //       this.items = result.data.organizations;
+    //       return result.data.organizations;
+    //     });
+    //   },
+    //   create(formData) {
+    //     delete formData['id'];
+    //
+    //     this.isMutationRunning = true;
+    //     return apolloWrapper.mutate(CREATE_ORGANIZATION, {input: formData}).then(({data}) => {
+    //       const organization = data.createOrganization;
+    //       this.items.push(organization);
+    //       return organization;
+    //     }).finally(() => this.isMutationRunning = false);
+    //   },
+    //
+    //   addUserToOrganization(organizationId) {
+    //     this.isMutationRunning = true;
+    //     return apolloWrapper.mutate(ADD_USER_TO_ORGANIZATION, {organizationId}).then(({data}) => {
+    //       return data.addToOrganization;
+    //     }).finally(() => this.isMutationRunning = false);
+    //   },
+    //
+    //   removeUserFromOrganization(organizationId) {
+    //     this.isMutationRunning = true;
+    //     return apolloWrapper.mutate(REMOVE_USER_FROM_ORGANIZATION, {organizationId}).then(({data}) => {
+    //       return data.removeFromOrganization;
+    //     }).finally(() => this.isMutationRunning = false);
+    //   },
+    //
+    //   update(id, formData) {
+    //     return apolloWrapper.mutate(EDIT_ORGANIZATION, {id: id, input: formData}).then(({data}) => {
+    //       const organization = data.editOrganization;
+    //       updateInItems(this.items, "id", organization);
+    //       return organization;
+    //     }).finally(() => this.isMutationRunning = false);
+    //   },
+    // }
+});

src/stores/Photo.js

@@ -1,65 +1,79 @@
 import {defineStore} from "pinia";
-import {apolloWrapper} from "src/graphql/apollo";
 import {ADJUST_PHOTO, CHANGE_PHOTO_ORIENTATION, DELETE_PHOTO, EDIT_PHOTO, UPLOAD_PHOTO} from "src/graphql/mutations/photo";
 import {PHOTO_DETAIL} from "src/graphql/queries/photo";
+import {ref} from "vue";
+import {mutate, query} from "stores/helpers";
 
-export const usePhotosStore = defineStore('Photos', {
+export const usePhotosStore = defineStore('Photos', () => {
-  state: () => ({
+    const photo = ref(null);
-    isMutationRunning: false,
+    const isMutationRunning = ref(false);
-  }),
+    const isQueryRunning = ref(false);
 
-  actions: {
+    const fetchDetail = (id) => query({
-    fetchDetail(id) {
+        isQueryRunning,
-      return apolloWrapper.query(PHOTO_DETAIL, {id}).then(({data}) => {
+        query: PHOTO_DETAIL,
-        return data.photo;
+        variables: {id}
-      });
+    }).then(item => photo.value = item);
-    },
+
-    upload(flightId, formData) {
+    const upload = (flightId, input) => {
         if (!flightId) {
             console.error("No flightId specified for photo upload! Aborting");
             return;
         }
 
-      formData.flightId = flightId;
+        input.flightId = flightId;
 
-      if (!formData.name) {
+        if (!input.name) {
-        formData.name = "";
+            input.name = "";
         }
 
-      if (!formData.description) {
+        if (!input.description) {
-        formData.description = "";
+            input.description = "";
         }
 
-      this.isMutationRunning = true;
+        // TODO: ^^ patri tohle do storu?
-      return apolloWrapper.mutate(UPLOAD_PHOTO, {input: formData}).then(({data}) => {
-        return data.uploadPhoto;
-      }).finally(() => this.isMutationRunning = false);
-    },
-    update(id, formData) {
-      this.isMutationRunning = true;
-      return apolloWrapper.mutate(EDIT_PHOTO, {id, input: formData}).then(({data}) => {
-        return data.editPhoto;
-      }).finally(() => this.isMutationRunning = false);
-    },
 
-    changeOrientation(id, direction) {
+        return mutate({
-      this.isMutationRunning = true;
+            isMutationRunning,
-      return apolloWrapper.mutate(CHANGE_PHOTO_ORIENTATION, {id, direction}).then(({data}) => {
+            mutation: UPLOAD_PHOTO,
-        return data.changeOrientation;
+            variables: {input}
-      }).finally(() => this.isMutationRunning = false);
+        })
-    },
+    };
 
-    adjust(id, adjustment) {
+    const update = (id, input) => mutate({
-      this.isMutationRunning = true;
+        isMutationRunning,
-      return apolloWrapper.mutate(ADJUST_PHOTO, {id, adjustment}).then(({data}) => {
+        mutation: EDIT_PHOTO,
-        return data.adjustPhoto;
+        variables: {id, input}
-      }).finally(() => this.isMutationRunning = false);
+    }).then(item => {
-    },
+        photo.value = item;
-    delete(photoId) {
+        return item;
-      this.isMutationRunning = true;
+    })
-      return apolloWrapper.mutate(DELETE_PHOTO, {id: photoId}).then(({data}) => {
+
-        return data.deletePhoto;
+    const changeOrientation = (id, direction) => mutate({
-      }).finally(() => this.isMutationRunning = false);
+        isMutationRunning,
-    }
+        mutation: CHANGE_PHOTO_ORIENTATION,
+        variables: {id, direction}
+    }).then(item => {
+        photo.value = item;
+        return item;
+    });
+
+    const adjust = (id, adjustment) => mutate({
+        isMutationRunning,
+        mutation: ADJUST_PHOTO,
+        variables: {id, adjustment}
+    }).then(item => {
+        photo.value = item;
+        return item;
+    });
+
+    const destroy = (id) => mutate({
+        isMutationRunning,
+        mutation: DELETE_PHOTO,
+        variables: {id}
+    });
+
+    return {
+        photo, isMutationRunning, isQueryRunning, fetchDetail, upload, update, changeOrientation, adjust, destroy
     }
 });

src/stores/PointOfInterestType.js

@@ -1,39 +1,25 @@
 import {defineStore} from 'pinia'
-import {apolloWrapper} from "src/graphql/apollo";
 import {POI_TYPE_DETAIL, POI_TYPE_LIST} from "src/graphql/queries/poi_type";
+import {ref} from "vue";
+import {query} from "stores/helpers";
 
-export const usePointsOfInterestTypeStore = defineStore('PointsOfInterestType', {
+export const usePointsOfInterestTypeStore = defineStore('PointsOfInterestType', () => {
-  state: () => ({
+
-    items: []
+    const type = ref(null);
-  }),
+    const types = ref([]);
+    const isQueryRunning = ref(false);
+
+    const fetchDetail = (id) => query({
+        isQueryRunning,
+        query: POI_TYPE_DETAIL,
+        variables: {id}
+    }).then(item => type.value = item);
 
 
-  actions: {
+    const fetch = () => query({
-    // create(input) {
+        isQueryRunning,
-    //   return apolloWrapper.mutate(CREATE_POI, {input}).then((data) => {
+        query: POI_TYPE_LIST,
-    //     const poi = data.data.createPointOfInterest;
+    }).then(item => types.value = item);
-    //     this.items.push(poi);
-    //     return poi;
-    //   })
-    // },
-    // update(id, input) {
-    //   return apolloWrapper.mutate(EDIT_POI, {id, input}).then((data) => {
-    //     console.log("Pridat update POI ve store");
-    //     return data.data.editPointOfInterest;
-    //   })
-    // },
 
-    fetchDetail(id) {
+    return {types, fetchDetail, fetch};
-      if (typeof id !== "number") {
-        id = parseInt(id);
-      }
-      return apolloWrapper.query(POI_TYPE_DETAIL, {id}).then(result => result.data.pointOfInterest);
-    },
-    fetch() {
-      return apolloWrapper.query(POI_TYPE_LIST).then(result => {
-        this.items = result.data.pointOfInterestTypes;
-        return result.data.pointOfInterestTypes;
-      });
-    }
-  }
 })

src/stores/PointsOfInterest.js

@@ -1,52 +1,49 @@
 import {defineStore} from 'pinia'
-import {apolloWrapper} from "src/graphql/apollo";
 import {POI_DETAIL, POI_LIST} from "src/graphql/queries/poi";
 import {CREATE_POI, EDIT_POI} from "src/graphql/mutations/poi";
-import {updateInItems} from "stores/helpers";
+import {mutate, query, updateInItems} from "stores/helpers";
+import {ref} from "vue";
 
 
-export const usePointsOfInterestStore = defineStore('PointsOfInterest', {
+export const usePointsOfInterestStore = defineStore('PointsOfInterest', () => {
-  state: () => ({
-    items: [],
-    isMutationRunning: false,
-  }),
 
-  getters: {
+    const pointOfInterest = ref(null);
-    getDetail: (state) => (poiId) => {
+    const pointsOfInterest = ref([]);
-      return state.items.find(p => p.id === poiId);
+    const isMutationRunning = ref(false);
-    },
+    const isQueryRunning = ref(false);
-  },
 
-  actions: {
+    const fetchDetail = (id) => {
-    create(input) {
+        return query({
-      this.isMutationRunning = true;
+            isQueryRunning,
-      return apolloWrapper.mutate(CREATE_POI, {input}).then((data) => {
+            query: POI_DETAIL,
-        const poi = data.data.createPointOfInterest;
+            variables: {id},
-        this.items.push(poi);
+        }).then(item => pointOfInterest.value = item);
-        return poi;
+    };
-      }).finally(() => this.isMutationRunning = false);
-    },
-    update(id, input) {
-      this.isMutationRunning = true;
 
-      return apolloWrapper.mutate(EDIT_POI, {id, input}).then((data) => {
+    const fetch = () => {
-        const poi = data.data.editPointOfInterest;
+        return query({
-        updateInItems(this.items, "id", poi);
+            isQueryRunning,
-        return poi;
+            query: POI_LIST,
-      }).finally(() => this.isMutationRunning = false);
+        }).then(items => pointsOfInterest.value = items);
-    },
-
-    fetchDetail(id) {
-      if (typeof id !== "number") {
-        id = parseInt(id);
     }
-      return apolloWrapper.query(POI_DETAIL, {id}).then(result => result.data.pointOfInterest);
+
-    },
+    const create = (input) => {
-    fetch() {
+        return mutate({
-      return apolloWrapper.query(POI_LIST).then(result => {
+            isMutationRunning,
-        this.items = result.data.pointsOfInterest;
+            mutation: CREATE_POI,
-        return result.data.pointsOfInterest;
+            variables: {input},
-      });
+        }).then(item => pointsOfInterest.value.push(item))
     }
+
+    const update = (id, input) => {
+        return mutate({
+            isMutationRunning,
+            mutation: EDIT_POI,
+            variables: {id, input}
+        }).then(item => updateInItems(pointsOfInterest.value, 'id', item))
+    }
+
+    return {
+        pointOfInterest, pointsOfInterest, isMutationRunning, isQueryRunning, fetch, fetchDetail, create, update
     }
 })

src/stores/User.js

@@ -1,69 +1,72 @@
 import {defineStore} from 'pinia'
 import {api} from "boot/axios";
-import {apolloWrapper} from "src/graphql/apollo";
 import {EDIT_USER} from "src/graphql/mutations/user";
 import {LOGGED_USER_DETAIL, USER_DETAIL} from "src/graphql/queries/user";
+import {ref} from "vue";
+import {mutate, query} from "stores/helpers";
 
-export const useUserStore = defineStore('LoggedUser', {
+export const useUserStore = defineStore('LoggedUser', () => {
-  state: () => ({
+    const user = ref(null);
-    user: {},
+    const publicUser = ref(null);
-    isRefreshing: false,
+    const isQueryRunning = ref(false);
-    isMutationRunning: false,
+    const isMutationRunning = ref(false);
-  }),
+    const isRefreshing = ref(false);
 
-  actions: {
+    const fetchLoggedUserDetail = () => query({
-    update(formData) {
+        isQueryRunning,
-      this.isMutationRunning = true;
+        query: LOGGED_USER_DETAIL
-
+    }).then(item => {
-      apolloWrapper.mutate(EDIT_USER, {input: formData}).then((response) => {
+        user.value = item;
-        const user = response.data?.editLoggedUser;
+        return item;
-        this.user = user;
-        return user;
-      }).finally(() => this.isMutationRunning = false);
-    },
-
-    fetchLoggedUserDetail() {
-      return apolloWrapper.query(LOGGED_USER_DETAIL).then((response) => {
-        const user = response.data?.loggedUser;
-        this.user = user;
-        return user;
-      })
-    },
-
-    fetchDetail(username) {
-      return apolloWrapper.query(USER_DETAIL, {username}).then((response) => {
-        return response.data?.user;
     });
-    },
 
-    async register(formData) {
+    const fetchPublicUserDetail = (username) => query({
+        isQueryRunning,
+        query: USER_DETAIL,
+        variables: {username}
+    }).then(item => {
+        publicUser.value = item;
+        return item;
+    });
+
+    const update = (input) => mutate({
+        isMutationRunning,
+        mutation: EDIT_USER,
+        variables: {input}
+    }).then(item => {
+        user.value = item;
+        return item;
+    });
+
+    const register = async (formData) => {
         return api.post('/registration', formData).then(response => {
             const registeredUser = response.data;
             const isSuccess = response.status === 201
         })
-    },
+    };
 
-    async login(formData) {
+    const login = async (formData) => {
         return api.post("/login", formData).then(({data}) => {
-        this.setTokens(data);
+            setTokens(data);
             this.user = data.user;
         })
-    },
+    };
-    logout() {
+
+    const logout = () => {
         return api.post("/logout").then(response => {
-        Object.assign(this.user, {});
             localStorage.removeItem("accessToken");
             localStorage.removeItem("accessTokenValidity");
+            user.value = null;
         });
-    },
+    };
 
-    setTokens({access_token, access_token_validity}) {
+    const setTokens = ({access_token, access_token_validity}) => {
         const now = new Date().getTime() / 1000;
         localStorage.setItem("accessToken", access_token);
         localStorage.setItem("accessTokenValidity", now + access_token_validity);
-    },
+    };
 
-    getAccessToken() {
+    const getAccessToken = () => {
         const tokenValidity = localStorage.getItem("accessTokenValidity");
         const now = new Date().getTime() / 1000;
 
@@ -73,18 +76,19 @@ export const useUserStore = defineStore('LoggedUser', {
         }
 
         return localStorage.getItem(`accessToken`);
-    },
+    };
 
-    hasAccessToken() {
+    const hasAccessToken = () => !!localStorage.getItem("accessToken");
-      return !!localStorage.getItem("accessToken");
-    },
 
-    async refreshAccessToken() {
+    const refreshAccessToken = async () => api.post("/refresh")
-      return api.post("/refresh")
         .then(({data}) => {
-          this.setTokens(data);
+            setTokens(data);
             return data.access_token;
-        })
+        });
-    },
+
+    return {
+        isQueryRunning, isMutationRunning, user, publicUser, fetchLoggedUserDetail, fetchPublicUserDetail, update,
+        register, login, logout,
+        getAccessToken, hasAccessToken, refreshAccessToken, isRefreshing
     }
-})
+});

src/stores/helpers.js

@@ -1,8 +1,13 @@
+import {apolloWrapper} from "boot/apollo";
+import {getOperationName} from "@apollo/client/utilities";
+
 export const updateInItems = (items, key, data) => {
   const idx = items.findIndex(i => i[key] === data[key]);
   if (idx >= 0)
     items[idx] = data;
   else items.push(data);
+
+  return items;
 }
 
 export const deleteFromItems = (items, key, value) => {
@@ -11,3 +16,23 @@ export const deleteFromItems = (items, key, value) => {
 
   items.splice(idx, 1);
 }
+
+export const query = ({isQueryRunning, query, variables}) => {
+  if (variables && variables.id) {
+    variables.id = parseInt(variables.id);
+  }
+
+  isQueryRunning.value = true;
+  const queryName = query.definitions[0].selectionSet.selections[0].name.value;
+  return apolloWrapper.query(query, variables)
+    .then((result) => result.data[queryName])
+    .finally(() => isQueryRunning.value = false);
+}
+
+export const mutate = ({isMutationRunning, mutation, variables}) => {
+  isMutationRunning.value = true;
+  const mutationName = getOperationName(mutation);
+  return apolloWrapper.mutate(mutation, variables)
+    .then(result => result.data[mutationName])
+    .finally(() => isMutationRunning.value = false);
+}

src/stores/index.js

@@ -1,20 +1,7 @@
 import { store } from 'quasar/wrappers'
 import { createPinia } from 'pinia'
 
-/*
- * If not building with SSR mode, you can
- * directly export the Store instantiation;
- *
- * The function below can be async too; either use
- * async/await or return a Promise which resolves
- * with the Store instance.
- */
-
 export default store((/* { ssrContext } */) => {
-  const pinia = createPinia()
+  const pinia = createPinia();
-
-  // You can add Pinia plugins here
-  // pinia.use(SomePiniaPlugin)
-
   return pinia
 })