Reorganizace skeletonu, aktualizace app-vite a quasaru

Dockerfile

@@ -1,6 +1,8 @@
 # develop stage
 FROM node:20-alpine as develop-stage
 
+ENV TZ=Europe/Prague
+
 WORKDIR /app
 RUN  yarn global add @quasar/cli
 
@@ -18,12 +20,13 @@ RUN quasar build -m ssr
 FROM node:20-alpine as production-stage
 
 ENV NODE_ENV production
+ENV TZ=Europe/Prague
 
 EXPOSE 3000
 WORKDIR /app
 
 COPY process.yml /app
-COPY --from=build-stage /app/dict/ssr/package.json /app
+COPY --from=build-stage /app/dist/ssr/package.json /app
 RUN yarn global add pm2 && yarn && yarn cache clean
 
 COPY --from=build-stage /app/dist/ssr /app

package.json

@@ -22,7 +22,7 @@
     "photoswipe": "^5.4.2",
     "photoswipe-dynamic-caption-plugin": "^1.2.7",
     "pinia": "^2.0.33",
-    "quasar": "^2.12.0",
+    "quasar": "^2.14.1",
     "vue": "^3.2.47",
     "vue-chartjs": "^5.2.0",
     "vue-picture-cropper": "^0.7.0",
@@ -30,14 +30,13 @@
     "vue3-google-map": "^0.15.0"
   },
   "devDependencies": {
-    "@quasar/app-vite": "^1.3.0",
+    "@quasar/app-vite": "^1.7.1",
     "autoprefixer": "^10.4.2",
     "eslint": "^8.10.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-vue": "^9.0.0",
     "postcss": "^8.4.14",
-    "prettier": "^2.5.1",
-    "vite-plugin-rewrite-all": "^1.0.1"
+    "prettier": "^2.5.1"
   },
   "engines": {
     "npm": ">= 6.13.4",

quasar.config.js

@@ -83,10 +83,7 @@ module.exports = configure(function (ctx) {
       // extendViteConf (viteConf) {},
       // viteVuePluginOptions: {},
 
-
-      vitePlugins: [
-        [ require("vite-plugin-rewrite-all").default ] // slouzi k podpore tecky v params v routeru
-      ]
+      // vitePlugins: []
     },
 
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer

src/boot/apollo.js

@@ -1,18 +1,19 @@
 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";
+import {createUploadLink} from "apollo-upload-client";
+// import createUploadLink from "apollo-upload-client/createUploadLink.mjs";
 
-const handleRefreshToken = (store, forward, operation) => {
+const handleRefreshToken = (store, router, forward, operation) => {
   if (!operation.query?._refreshUnauthorizedUser) return;
 
   return fromPromise(useUserStore(store).refreshAccessToken()
     .catch((error) => {
       Notify.create(warningObject("Tvoje přihlášení vypřešlo. Přihlaš se prosím znovu."));
-      if (window) window.location = "/login";
+      router.push({name: "login"})
     }))
     .filter((value) => Boolean(value))
     .flatMap((accessToken) => {
@@ -30,7 +31,7 @@ const handleRefreshToken = (store, forward, operation) => {
 }
 
 export const apolloWrapper = {};
-export default (({store}) => {
+export default (({store, router}) => {
   const uploadLink = createUploadLink({
     uri: process.env.API_URL + '/graphql',
   })
@@ -47,8 +48,9 @@ export default (({store}) => {
   });
 
   const errorLink = onError(({graphQLErrors, networkError, operation, forward}) => {
+    console.log(networkError, graphQLErrors);
     if (networkError?.statusCode === 401) {
-      return handleRefreshToken(store, forward, operation);
+      return handleRefreshToken(store, router, forward, operation);
     }
 
     if (graphQLErrors) {
@@ -56,7 +58,7 @@ export default (({store}) => {
         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);
+          return handleRefreshToken(store, router, forward, operation);
         } else {
           Notify.create(errorObject("API error: " + error.message));
         }
@@ -70,7 +72,9 @@ export default (({store}) => {
 
   apolloWrapper.query = (query, variables = {}) => {
     return apolloClient.query({
-      query: query, fetchPolicy: 'no-cache', variables: variables
+      query: query,
+      fetchPolicy: 'no-cache',
+      variables: variables
     })
       .then((response) => response)
       .catch(err => {
@@ -82,7 +86,9 @@ export default (({store}) => {
   apolloWrapper.mutate = (mutation, variables) => {
     return apolloClient
       .mutate({
-        mutation: mutation, fetchPolicy: 'no-cache', variables: variables,
+        mutation: mutation,
+        fetchPolicy: 'no-cache',
+        variables: variables,
       })
       .then((response) => response)
       .catch(err => {

src/components/FormSubmitButton.vue

@@ -3,6 +3,11 @@ import {computed} from "vue";
 import {useQuasar} from "quasar";
 
 const props = defineProps({
+  isRequestPending: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
   saveButton: {
     type: [Object, Boolean],
     required: false,

src/components/FormWrapper.vue

@@ -1,14 +1,15 @@
 <script setup>
-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: {
     type: Object,
   },
-  isRequestPending,
+  isRequestPending: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
   saveButton: {
     type: [Object, Boolean],
     required: false,
@@ -29,6 +30,6 @@ const saveForm = () => {
 <template>
   <q-form @submit.prevent="saveForm" ref="form">
     <slot name="default"/>
-    <FormSubmitButton v-if="saveButton" :save-button="saveButton" />
+    <FormSubmitButton v-if="saveButton" :save-button="saveButton"/>
   </q-form>
 </template>

src/components/aircrafts/AircraftForm.vue

@@ -2,7 +2,6 @@
 import {onMounted, reactive} from "vue";
 import FormWrapper from "components/FormWrapper.vue";
 import {setDefaultData} from "src/composables/form/formHandling";
-import {defaultValues, isRequestPending} from "src/composables/form/props";
 import {isNumber, isRequired, maxLength, minLength} from "src/composables/form/rules";
 import {commonProps} from "src/composables/inputs";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";
@@ -19,8 +18,16 @@ const formData = reactive({
 });
 
 const props = defineProps({
-  defaultValues,
-  isRequestPending,
+  defaultValues: {
+    type: Object,
+    required: false,
+    default: () => ({})
+  },
+  isRequestPending: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
   organizations: {
     type: Array,
     required: true,
@@ -47,48 +54,48 @@ onMounted(() => {
     <q-img :src="props.defaultValues.photoUrl" v-if="props.defaultValues.photoUrl"/>
 
     <q-input
-      type="text"
-      :rules="rules.callSign"
-      v-model="formData.callSign"
-      label="Volací značka"
-      v-bind="commonProps"
+        type="text"
+        :rules="rules.callSign"
+        v-model="formData.callSign"
+        label="Volací značka"
+        v-bind="commonProps"
     />
 
-     <q-input
-      type="number"
-      v-model.number="formData.seats"
-      label="Počet míst (včetně pilota)"
-      min="1"
-      :rules="rules.seats"
-      v-bind="commonProps"
+    <q-input
+        type="number"
+        v-model.number="formData.seats"
+        label="Počet míst (včetně pilota)"
+        min="1"
+        :rules="rules.seats"
+        v-bind="commonProps"
     />
 
     <ComboboxInput
-      :options="organizations"
-      label="Organizace"
-      v-model="formData.organization"
-      v-bind="commonProps"
-      hint="Vyber provozovatele letadla. Tím se stane dostupné i pro ostatní členy vybrané organizace."
+        :options="organizations"
+        label="Organizace"
+        v-model="formData.organization"
+        v-bind="commonProps"
+        hint="Vyber provozovatele letadla. Tím se stane dostupné i pro ostatní členy vybrané organizace."
     />
 
     <q-input
-      type="text"
-      v-model="formData.manufacturer"
-      label="Výrobce"
-      v-bind="commonProps"
+        type="text"
+        v-model="formData.manufacturer"
+        label="Výrobce"
+        v-bind="commonProps"
     />
     <q-input
-      type="text"
-      v-model="formData.model"
-      label="Model"
-      v-bind="commonProps"
+        type="text"
+        v-model="formData.model"
+        label="Model"
+        v-bind="commonProps"
     />
 
     <q-input
-      type="textarea"
-      v-model="formData.description"
-      label="Popis"
-      v-bind="commonProps"
+        type="textarea"
+        v-model="formData.description"
+        label="Popis"
+        v-bind="commonProps"
     />
 
     <q-checkbox v-model="formData.isPublic" label="Veřejné?" v-bind="commonProps"/>

src/components/basicSkeletons/BasicListSkeleton.vue

@@ -14,7 +14,8 @@ const props = defineProps({
     default: 5
   },
   items: {
-    type: Number, required: false,
+    type: Number,
+    required: false,
   }
 });
 

src/components/copilots/CopilotForm.vue

@@ -4,14 +4,17 @@ import {onMounted, reactive} from "vue";
 import {setDefaultData} from "src/composables/form/formHandling";
 import FormWrapper from "components/FormWrapper.vue";
 import {commonProps} from "src/composables/inputs";
-import {isRequestPending} from "src/composables/form/props";
 import {isRequired} from "src/composables/form/rules";
 
 const props = defineProps({
   copilot: {
     type: Object
   },
-  isRequestPending
+  isRequestPending: {
+  type: Boolean,
+  required: false,
+  default: false,
+}
 })
 
 const formData = reactive({

src/components/copilots/CopilotsList.vue

@@ -17,7 +17,10 @@ const props = defineProps({
       v-ripple
       v-for="pilot of items" :key="pilot">
       <q-item-section avatar>
-        <q-avatar icon="person" color="primary" text-color="white"/>
+        <q-avatar v-if="pilot.titlePhoto">
+          <img :src="pilot.titlePhoto.thumbnailUrl" alt=""/>
+        </q-avatar>
+        <q-avatar v-else icon="person" color="primary" text-color="white"/>
       </q-item-section>
       <q-item-section>
         {{ pilot.name }}

src/components/event/EventForm.vue

@@ -4,7 +4,6 @@ import {onMounted, reactive} from "vue";
 import {setDefaultData} from "src/composables/form/formHandling";
 import FormWrapper from "components/FormWrapper.vue";
 import {commonProps} from "src/composables/inputs";
-import {isRequestPending} from "src/composables/form/props";
 import {isRequired} from "src/composables/form/rules";
 import RichTextEditor from "components/inputs/RichTextEditor.vue";
 import DatetimePicker from "components/inputs/DatetimePicker.vue";
@@ -14,7 +13,11 @@ const props = defineProps({
   event: {
     type: Object
   },
-  isRequestPending
+  isRequestPending: {
+  type: Boolean,
+  required: false,
+  default: false,
+}
 })
 
 const formData = reactive({

src/components/event/EventsList.vue

@@ -13,7 +13,7 @@ const props = defineProps({
   },
 });
 
-const getCoverPhotos = (item) => item.flights.filter(f => !!f.coverPhoto).map(f => f.coverPhoto.thumbnailUrl);
+const getCoverPhotos = (item) => item.flights.filter(f => !!f.titlePhoto).map(f => f.titlePhoto.thumbnailUrl);
 </script>
 
 <template>

src/components/event/skeletons/EventDetailSkeleton.vue

@@ -13,5 +13,5 @@ import ListItemSkeleton from "components/basicSkeletons/ListItemSkeleton.vue";
 
   <BasicTextSkeleton :lines="3" :paragraphs="2"/>
 
-  <BasicListSkeleton :items-count-min="1" :items-count-max="5"/>
+  <BasicListSkeleton :items="4"/>
 </template>

src/components/flights/form/FlightFormBasic.vue

@@ -6,7 +6,6 @@ import DatetimePicker from "components/inputs/DatetimePicker.vue";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";
 import {commonProps} from "src/composables/inputs";
 import {isRequired} from "src/composables/form/rules";
-import {isRequestPending} from "src/composables/form/props";
 
 const props = defineProps({
   aircrafts: {
@@ -21,7 +20,11 @@ const props = defineProps({
     type: Object,
     required: false
   },
-  isRequestPending,
+  isRequestPending: {
+  type: Boolean,
+  required: false,
+  default: false,
+}
 });
 
 const airportName = (airport) => `${airport.icaoCode} (${airport.name})`;

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/form/props";
 
 const props = defineProps({
   flight: {
@@ -16,7 +15,11 @@ const props = defineProps({
     type: Array,
     required: false,
   },
-  isRequestPending
+  isRequestPending: {
+  type: Boolean,
+  required: false,
+  default: false,
+}
 });
 
 const formData = reactive({

src/components/flights/skeletons/FlightEditCopilotSkeleton.vue

@@ -0,0 +1,7 @@
+<script setup>
+
+</script>
+
+<template>
+  edit copilot skeleton
+</template>

src/components/flights/skeletons/FlightsListSkeleton.vue

@@ -3,7 +3,7 @@ import {randomInt} from "src/composables/random";
 </script>
 
 <template>
-  <q-list bordered separator class="q-mx-md q-my-md">
+  <q-list bordered separator>
     <q-item v-for="i in 10" :key="i" ripple>
       <q-item-section avatar>
         <q-avatar size="100px">

src/components/navigation/BreadcrumbsNavigation.vue

@@ -8,7 +8,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <q-breadcrumbs>
+  <q-breadcrumbs class="q-mx-md q-my-md">
     <q-breadcrumbs-el v-for="item in items" :key="item.label" :to="item.to"> {{ item.label }} </q-breadcrumbs-el>
   </q-breadcrumbs>
 </template>

src/components/navigation/BreadcrumbsSkeleton.vue

@@ -0,0 +1,14 @@
+<script setup>
+
+import {randomInt} from "src/composables/random";
+</script>
+
+<template>
+
+  <q-breadcrumbs class="q-mx-md q-my-md">
+    <q-breadcrumbs-el> <q-skeleton :width="`${randomInt(30, 60)}px`" type="rect" /> </q-breadcrumbs-el>
+    <q-breadcrumbs-el> <q-skeleton :width="`${randomInt(40, 80)}px`" type="rect" /> </q-breadcrumbs-el>
+  </q-breadcrumbs>
+
+
+</template>

src/components/navigation/CommonEditSwitcher.vue

@@ -0,0 +1,27 @@
+<script setup>
+const props = defineProps({
+  route: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <q-tabs active-color="primary" class="q-mb-lg">
+    <q-route-tab
+        icon="edit"
+        label="Informace"
+        replace
+        :to="{name: route.name, params: {...route.params, step: 'info'}}"
+        exact
+    />
+    <q-route-tab
+        icon="add_a_photo"
+        label="Fotky"
+        replace
+        :to="{name: route.name, params: {...route.params, step: 'photo'}}"
+        exact100
+    />
+  </q-tabs>
+</template>

src/components/organizations/OrganizationForm.vue

@@ -4,15 +4,17 @@ import {onMounted, reactive} from "vue";
 import {setDefaultData} from "src/composables/form/formHandling";
 import FormWrapper from "components/FormWrapper.vue";
 import {commonProps} from "src/composables/inputs";
-import {isRequestPending} from "src/composables/form/props";
 import {isRequired} from "src/composables/form/rules";
-import RichTextEditor from "components/inputs/RichTextEditor.vue";
 
 const props = defineProps({
   organization: {
     type: Object
   },
-  isRequestPending
+  isRequestPending: {
+  type: Boolean,
+  required: false,
+  default: false,
+}
 })
 
 const formData = reactive({

src/components/photos/BatchPhotoFormDialog.vue

@@ -13,8 +13,8 @@ const props = defineProps({
   locations: {
     type: Array
   },
-  aircraft: {
-    type: Object
+  aircrafts: {
+    type: Array
   },
   copilots: {
     type: Array
@@ -26,7 +26,7 @@ const formData = ref({
   description: "",
   pointOfInterest: null,
   copilots: [],
-  isAircraft: false,
+  aircraftId: null,
   photoIds: []
 });
 
@@ -42,7 +42,7 @@ const setup = () => {
 <template>
   <DialogWrapper :formData="formData" @show="setup()">
     <q-card-section class="text-center">
-        <q-img :src="photo.thumbnailUrl" width="80px" class="q-ma-sm" v-for="photo in photos" :key="photo.thumbnailUrl"/>
+      <q-img :src="photo.thumbnailUrl" width="80px" class="q-ma-sm" v-for="photo in photos" :key="photo.thumbnailUrl"/>
     </q-card-section>
     <q-card-section>
       <FormWrapper :save-button="false">
@@ -54,19 +54,27 @@ const setup = () => {
             label="Místo"
         />
 
-         <q-select
-          v-if="copilots.length > 0"
-          :options="copilots"
-          v-model="formData.copilots"
-          v-bind="commonProps"
-          label="Kopiloti"
-          option-label="name"
-          option-value="id"
-          multiple
+        <q-select
+            v-if="copilots.length > 0"
+            :options="copilots"
+            v-model="formData.copilots"
+            v-bind="commonProps"
+            label="Kopiloti"
+            option-label="name"
+            option-value="id"
+            multiple
         />
 
-        <q-checkbox v-model="formData.isAircraft" :label="`Letadlo (${aircraft.callSign})`"/>
-
+        <q-select
+            :options="aircrafts"
+            v-model="formData.aircraftId"
+            v-bind="commonProps"
+            label="Letadlo"
+            option-label="callSign"
+            option-value="id"
+            emit-value
+            map-options
+        />
         <q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
         <q-input type="textarea" v-model="formData.description" label="Popis" v-bind="commonProps"/>
       </FormWrapper>

src/components/photos/PhotoFormDialog.vue

@@ -13,8 +13,8 @@ const props = defineProps({
   locations: {
     type: Array
   },
-  aircraft: {
-    type: Object
+  aircrafts: {
+    type: Array
   },
   copilots: {
     type: Array
@@ -27,7 +27,7 @@ const formData = ref({
   description: "",
   pointOfInterest: null,
   copilots: [],
-  isAircraft: false,
+  aircraftId: null,
 });
 
 const setup = (() => {
@@ -58,7 +58,17 @@ const setup = (() => {
           multiple
         />
 
-        <q-checkbox v-model="formData.isAircraft" :label="`Letadlo (${aircraft.callSign})`"/>
+        <q-select
+          :options="aircrafts"
+          v-model="formData.aircraftId"
+          v-bind="commonProps"
+          label="Letadlo"
+          option-label="callSign"
+          option-value="id"
+          emit-value
+          map-options
+          />
+
         <q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
         <q-input type="textarea" v-model="formData.description" label="Popis" v-bind="commonProps"/>
       </FormWrapper>

src/components/photos/PhotosEditorList.vue

@@ -34,20 +34,20 @@ const openEdit = (photo) => {
 
 const confirmPhotoDelete = (id) => {
   $q.dialog(confirmObject("Opravdu chces smazat tuto fotku?"))
-    .onOk(() => {
-      emits("delete", id);
-    });
+      .onOk(() => {
+        emits("delete", id);
+      });
 }
 
 const confirmBatchPhotoDelete = () => {
   $q.dialog(confirmObject("Opravdu chces smazat vybrané fotky?"))
-    .onOk(() => {
-      for (const id in batchEdit.value) {
-        if (!batchEdit.value[id]) continue;
-        emits("delete", parseInt(id));
-        batchEdit.value[id] = false;
-      }
-    });
+      .onOk(() => {
+        for (const id in batchEdit.value) {
+          if (!batchEdit.value[id]) continue;
+          emits("delete", parseInt(id));
+          batchEdit.value[id] = false;
+        }
+      });
 }
 
 const handleImageClick = (photo, idx) => {
@@ -117,6 +117,13 @@ const batchOptionsProps = computed(() => ({
 const setFlightCover = (titlePhoto) => {
   emits("set-title-photo", titlePhoto);
 }
+
+const openPhoto = ref(false);
+const photo = ref(null);
+const showLarge = (displayedPhoto) => {
+  photo.value = displayedPhoto;
+  openPhoto.value = true;
+}
 </script>
 
 <template>
@@ -124,12 +131,15 @@ const setFlightCover = (titlePhoto) => {
     <div class="col-6 col-sm-4 col-md-4 col-lg-3" v-for="(photo, idx) in photos" :key="photo.id">
       <q-card :class='{"q-ma-sm": true, "shadow-1": !batchEdit[photo.id], "shadow-10": batchEdit[photo.id]}'>
         <q-img :src="photo.thumbnailUrl" @click="handleImageClick(photo, idx)" style="cursor: pointer">
-          <div class="absolute-top bg-transparent text-right">
+          <div class="absolute-top bg-transparent flex">
+            <div class="col-grow">
+              <q-btn icon="fullscreen" color="grey-6" round @click.stop.prevent="showLarge(photo)"/>
+            </div>
             <q-btn
-              icon="star"
-              :color="titlePhoto?.id === photo.id ? 'amber-9' : 'grey-6'"
-              round
-              @click.stop.prevent="setFlightCover(photo)"
+                icon="star"
+                :color="titlePhoto?.id === photo.id ? 'amber-9' : 'grey-6'"
+                round
+                @click.stop.prevent="setFlightCover(photo)"
             />
           </div>
 
@@ -146,9 +156,9 @@ const setFlightCover = (titlePhoto) => {
         <q-card-actions align="right" :class="{'bg-primary': batchEdit[photo.id], 'text-white': batchEdit[photo.id]}" v-if="showActions">
           <div class="col-grow">
             <q-checkbox v-model="batchEdit[photo.id]"/>
-
-            <q-icon name="flight" v-if="photo.isAircraft" size="xs" color="grey-5" />
-            <q-icon name="person" v-if="photo.copilots.length > 0" size="xs" color="grey-5" />
+            <q-icon name="flight" v-if="photo.aircraftId" size="xs" color="grey-5"/>
+            <q-icon name="person" v-if="photo.copilots.length > 0" size="xs" color="grey-5"/>
+            <q-icon name="place" v-if="photo.pointOfInterest" size="xs" color="grey-5"/>
           </div>
           <q-btn flat icon="edit" color="blue" @click="openEdit(photo)"/>
           <q-btn flat icon="tune" color="black" :to="{name: 'photoEditor', params: {id: photo.id}}"/>
@@ -169,4 +179,12 @@ const setFlightCover = (titlePhoto) => {
       </q-card-actions>
     </q-card>
   </q-page-sticky>
+
+  <q-dialog v-model="openPhoto" full-width>
+    <q-img :src="photo.url">
+      <div class="absolute-top bg-transparent text-right">
+          <q-btn icon="close" round color="primary" @click="openPhoto = false" />
+      </div>
+    </q-img>
+  </q-dialog>
 </template>

src/components/photos/skeletons/PhotoGallerySkeleton.vue

@@ -0,0 +1,7 @@
+<script setup>
+
+</script>
+
+<template>
+  gallery skeleton
+</template>

src/components/profile/ProfileForm.vue

@@ -4,7 +4,6 @@ import {commonProps} from "src/composables/inputs";
 import {reactive, watch} from "vue";
 import {setDefaultData} from "src/composables/form/formHandling";
 import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
-import {isRequestPending} from "src/composables/form/props";
 
 const props = defineProps({
   user: {
@@ -12,7 +11,11 @@ const props = defineProps({
     required: false,
     default: null
   },
-  isRequestPending
+  isRequestPending: {
+    type: Boolean,
+    required: false,
+    default: false,
+  }
 });
 const formData = reactive({
   avatarImage: null,
@@ -29,14 +32,14 @@ watch(() => props.user, (newVal) => {
   <FormWrapper v-model="formData" :is-request-pending="props.isRequestPending">
 
     <div class="text-center">
-      <AvatarFromPhoto :size="200" :src="user.avatarImageUrl" v-if="user.avatarImageUrl"  />
+      <AvatarFromPhoto :size="200" :src="user.avatarImageUrl" v-if="user.avatarImageUrl"/>
     </div>
 
     <q-file
-      v-model="formData.avatarImage"
-      accept="image/jpeg"
-      v-bind="commonProps"
-      label="Nahrát avatar"
+        v-model="formData.avatarImage"
+        accept="image/jpeg"
+        v-bind="commonProps"
+        label="Nahrát avatar"
     >
       <template #prepend>
         <q-icon name="upload"/>
@@ -48,9 +51,9 @@ watch(() => props.user, (newVal) => {
     </div>
 
     <q-file
-      v-model="formData.titleImage"
-      accept="image/jpeg"
-      v-bind="commonProps" label="Nahrát titulní fotku"
+        v-model="formData.titleImage"
+        accept="image/jpeg"
+        v-bind="commonProps" label="Nahrát titulní fotku"
     >
       <template #prepend>
         <q-icon name="upload"/>

src/components/profile/PublicProfileInfo.vue

@@ -6,7 +6,6 @@ import {commonProps} from "src/composables/inputs";
 import RichTextEditor from "components/inputs/RichTextEditor.vue";
 import FormWrapper from "components/FormWrapper.vue";
 import {setDefaultData} from "src/composables/form/formHandling";
-import {isRequestPending} from "src/composables/form/props";
 
 const props = defineProps({
   user: {
@@ -14,7 +13,11 @@ const props = defineProps({
     required: false,
     default: null
   },
-    isRequestPending,
+    isRequestPending: {
+  type: Boolean,
+  required: false,
+  default: false,
+}
 
 })
 

src/composables/form/props.js

@@ -1,10 +0,0 @@
-export const isRequestPending = {
-  type: Boolean,
-  required: false,
-  default: false,
-};
-export const defaultValues = {
-  type: Object,
-  required: false,
-  default: () => ({})
-}

src/composables/form/rules.js

@@ -1,20 +1,19 @@
 export const isRequired = (val) => !!val || "Toto pole je povinné";
 export const isValidEmail = (email) => {
-  const patternEmail = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,10})+$/;
-  return !!patternEmail.test(email) || "Tento e-mail není platný";
+    const patternEmail = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,10})+$/;
+    return !!patternEmail.test(email) || "Tento e-mail není platný";
 };
 export const minLength = (length) => (val) => val.length >= length || `Zadej alespoň ${length} znaky`
 export const maxLength = (length) => (val) => val.length <= length || `Zadej maximálně ${length} znaků`
 
-
 export const isEmptyArray = () => (val) => {
-  return (val && val.length !== 0) || "Select item, please";
+    return (val && val.length !== 0) || "Select item, please";
 };
 
 export const isNumber = () => (val) => {
-  return !isNaN(val) || "Only numbers are allowed";
+    return !isNaN(val) || "Only numbers are allowed";
 };
 
 export const hasNoWhitespace = () => (val) => {
-  return /^\S*$/.test(val) || "Don't use whitespaces";
+    return /^\S*$/.test(val) || "Don't use whitespaces";
 };

src/composables/meta.js

@@ -1,22 +1,41 @@
-export const metaData = ({title, description, keywords, image}) => {
-  return {
-    title: title || "",
-    titleTemplate(title) {
-      return title !== '' ? `${title} - Polétání.cz` : 'Polétání.cz'
-    },
-    meta: {
-      description: {name: "description", content: description || ""},
-      keywords: {name: "keywords", content: (keywords || []).join(", ")},
-      ogImage: image ? {property: "og:image", content: image} : undefined,
-      ogTitle: {
-        property: "og:title",
-        content: title,
-        template(ogTitle) {
-          return (!ogTitle || ogTitle === '') ? "Polétání.cz" : `${ogTitle} - Polétání.cz`
-        }
-      }
-    }
-  }
+const stripHtml = (str) => {
+    if (!str)
+        return '';
+    else
+        str = str.toString();
+
+    return str.replace(/<[^>]+>/ig, '');
 }
 
-export const commonKeywords = ["zápisník", "létání", "ultralight", "letectví", "fotogalerie", "výlet", "vyhlídkový let", "navigační let"];
+export const commonKeywords = [
+    "zápisník", "létání", "ultralight", "letectví", "fotogalerie", "výlet", "vyhlídkový let", "navigační let"
+];
+
+
+export const metaData = ({title, description, keywords, image}) => {
+
+    const filteredKeywords = (keywords || []).filter(kw => !!kw);
+    const filteredDescription = stripHtml(description);
+
+    return {
+        title: title || "",
+        titleTemplate(title) {
+            return title !== '' ? `${title} - Polétání.cz` : 'Polétání.cz'
+        },
+        meta: {
+            description: {name: "description", content: filteredDescription || ""},
+            keywords: {name: "keywords", content: (filteredKeywords || commonKeywords).join(", ")},
+            ogImage: image ? {property: "og:image", content: image} : undefined,
+            ogTitle: {
+                property: "og:title",
+                content: title,
+                template(ogTitle) {
+                    return (!ogTitle || ogTitle === '') ? "Polétání.cz" : `${ogTitle} - Polétání.cz`
+                }
+            },
+            ogDescription: {
+                property: "og:description", content: filteredDescription,
+            }
+        }
+    }
+}

src/graphql/fragments/aircraft.js

@@ -50,6 +50,11 @@ fragment aircraftFullPrivateInfo on Aircraft {
     photos {
       ...photoFullInfo
 
+        pointOfInterest {
+            id
+            name
+        }
+
       copilots {
           id
           name

src/graphql/fragments/copilot.js

@@ -1,9 +1,13 @@
 import gql from "graphql-tag";
+import {FRAGMENT_PHOTO_FULL_INFO} from "src/graphql/fragments/photo";
 
 export const FRAGMENT_COPILOT_LIST_INFO = gql`
 fragment copilotListInfo on Copilot {
   id
   name
+  titlePhoto {
+    thumbnailUrl
+  }
 }
 `;
 
@@ -18,3 +22,31 @@ fragment copilotFullInfo on Copilot {
   }
 }
 `;
+
+export const FRAGMENT_COPILOT_FULL_PRIVATE_INFO = gql`
+fragment copilotFullPrivateInfo on Copilot {
+  id
+  name
+
+  titlePhoto {
+    id
+    url
+  }
+
+   photos {
+      ...photoFullInfo
+
+        pointOfInterest {
+            id
+            name
+        }
+
+      copilots {
+          id
+          name
+      }
+    }
+}
+
+${FRAGMENT_PHOTO_FULL_INFO}
+`;

src/graphql/fragments/flight.js

@@ -103,6 +103,11 @@ fragment flightFullPrivateInfo on Flight {
     photos {
         ...photoFullInfo
 
+        pointOfInterest {
+            id
+            name
+        }
+
         copilots {
             id
             name

src/graphql/fragments/photo.js

@@ -9,7 +9,7 @@ export const FRAGMENT_PHOTO_FULL_INFO = gql`
     name
     description
     flightId
-    isAircraft
+    aircraftId
     width
     height
     isFlightCover

src/graphql/fragments/poi.js

@@ -1,6 +1,5 @@
 import gql from "graphql-tag";
 import {FRAGMENT_PHOTO_FULL_INFO} from "src/graphql/fragments/photo";
-import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight_list";
 
 
 export const FRAGMENT_POI_LIST_INFO = gql`
@@ -43,13 +42,16 @@ fragment pointOfInterestFullInfo on PointOfInterest {
 export const FRAGMENT_POI_FULL_PRIVATE_INFO = gql`
 fragment pointOfInterestFullPrivateInfo on PointOfInterest {
     ...pointOfInterestFullInfo
-    flights {
-      ...flightListInfo
-    }
+
 
     photos {
       ...photoFullInfo
 
+        pointOfInterest {
+            id
+            name
+        }
+
       copilots {
           id
           name
@@ -59,5 +61,4 @@ fragment pointOfInterestFullPrivateInfo on PointOfInterest {
 
 ${FRAGMENT_POI_FULL_INFO}
 ${FRAGMENT_PHOTO_FULL_INFO}
-${FRAGMENT_FLIGHT_LIST_INFO}
 `;

src/graphql/mutations/copilot.js

@@ -1,24 +1,23 @@
 import gql from "graphql-tag";
-import {FRAGMENT_COPILOT_FULL_INFO} from "src/graphql/fragments/copilot";
+import {FRAGMENT_COPILOT_FULL_PRIVATE_INFO} from "src/graphql/fragments/copilot";
 
 export const CREATE_COPILOT = gql`
   mutation createCopilot($input: CreateCopilotInput!) {
     createCopilot(input: $input) {
-      ...copilotFullInfo
+      ...copilotFullPrivateInfo
     }
   }
 
-  ${FRAGMENT_COPILOT_FULL_INFO}
+  ${FRAGMENT_COPILOT_FULL_PRIVATE_INFO}
 `;
 
 export const EDIT_COPILOT = gql`
 mutation editCopilot($id: Int!, $input: EditCopilotInput!) {
   editCopilot(id: $id, input: $input) {
-    ...copilotFullInfo
+    ...copilotFullPrivateInfo
   }
 }
-
-  ${FRAGMENT_COPILOT_FULL_INFO}
+${FRAGMENT_COPILOT_FULL_PRIVATE_INFO}
 `;
 export const DELETE_COPILOT = gql`
 mutation deleteCopilot($id: Int!) {

src/graphql/queries/photo.js

@@ -39,7 +39,7 @@ ${FRAGMENT_FLIGHT_LIST_INFO}
 `;
 
 export const PHOTOS_PUBLIC_LIST = gql`
-query photos($flightId: Int, $pointOfInterestId: Int, $aircraftId: Int, $copilotId: Int) {
+query publicPhotos($flightId: Int, $pointOfInterestId: Int, $aircraftId: Int, $copilotId: Int) {
   photos(public: true, flightId: $flightId, pointOfInterestId: $pointOfInterestId, aircraftId: $aircraftId, copilotId: $copilotId) {
     ...photoFullInfo
   }

src/layouts/ProfileLayout.vue

@@ -34,7 +34,8 @@
     </q-drawer>
 
     <q-page-container>
-      <BreadcrumbsNavigation class="q-mx-md q-my-md" :items="breadcrumbs"/>
+      <BreadcrumbsNavigation :items="breadcrumbs" v-if="breadcrumbs !== null"/>
+      <BreadcrumbsSkeleton v-if="breadcrumbs === null" />
       <div class="q-mx-md q-my-md">
         <router-view/>
       </div>
@@ -54,11 +55,15 @@ import {successObject} from "src/composables/dialog";
 import SidebarNavigation from "components/navigation/SidebarNavigation.vue";
 import TopMenuButton from "components/navigation/TopMenuButton.vue";
 import {metaData} from "src/composables/meta";
+import BreadcrumbsSkeleton from "components/navigation/BreadcrumbsSkeleton.vue";
 
 const $q = useQuasar();
 const $router = useRouter();
 
 const {pageTitle, breadcrumbs} = storeToRefs(useAppStore());
+useMeta(() => metaData({
+  title: pageTitle.value
+}));
 
 const leftDrawerOpen = ref(false)
 const toggleLeftDrawer = () => {
@@ -70,10 +75,6 @@ onMounted(() => {
 })
 const {isQueryRunning, user} = storeToRefs(useUserStore());
 
-useMeta(() => metaData({
-  title: pageTitle.value
-}));
-
 const logout = () => {
   useUserStore().logout().then(() => {
     $q.notify(successObject("Odhlášení bylo úspěšné"));

src/layouts/PublicLayout.vue

@@ -24,7 +24,9 @@
     </q-header>
 
     <q-page-container>
-      <BreadcrumbsNavigation class="q-mx-md q-my-md" :items="breadcrumbs"/>
+      <BreadcrumbsNavigation :items="breadcrumbs" v-if="breadcrumbs !== null"/>
+      <BreadcrumbsSkeleton v-if="breadcrumbs === null" />
+
       <router-view class="q-my-lg q-mx-lg"/>
     </q-page-container>
   </q-layout>
@@ -37,6 +39,7 @@ import {onMounted} from "vue";
 import {useAppStore} from "stores/App";
 import BreadcrumbsNavigation from "components/navigation/BreadcrumbsNavigation.vue";
 import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
+import BreadcrumbsSkeleton from "components/navigation/BreadcrumbsSkeleton.vue";
 
 const {pageTitle, breadcrumbs} = storeToRefs(useAppStore());
 const loggedUser = storeToRefs(useUserStore()).user;

src/pages/profile/aircraft/AircraftDetailPage.vue

@@ -1,7 +1,7 @@
 <script setup>
 import {useRoute, useRouter} from "vue-router";
 import {copyToClipboard, useMeta, useQuasar} from "quasar";
-import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
+import AircraftDetailSkeleton from "components/aircrafts/skeletons/AircraftDetailSkeleton.vue";
 import {confirmObject, successObject} from "src/composables/dialog";
 import {useAppStore} from "stores/App";
 import FlightsList from "components/flights/FlightsList.vue";

src/pages/profile/aircraft/AircraftsPage.vue

@@ -1,22 +1,20 @@
 <script setup>
-import {onMounted} from "vue";
 import AircraftsList from "components/aircrafts/AircraftsList.vue";
 import FAB from "components/FAB.vue";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {useAircraftsStore} from "stores/Aircrafts";
 import {storeToRefs} from "pinia";
+import {useAppStore} from "stores/App";
 
-const store = useAircraftsStore();
-onMounted(() => {
-  store.fetch();
-})
+useAircraftsStore().fetch();
+const {aircrafts, isQueryRunning} = storeToRefs(useAircraftsStore());
+useAppStore().setPageTitle("Letadla");
 
-const {aircrafts, isQueryRunning} = storeToRefs(store);
 </script>
 
 <template>
-  <BasicListSkeleton v-if="isQueryRunning"/>
+  <BasicListSkeleton v-if="isQueryRunning || !aircrafts.length"/>
 
   <BasicInfoBanner
     v-if="!isQueryRunning && aircrafts.length === 0"
@@ -24,9 +22,7 @@ const {aircrafts, isQueryRunning} = storeToRefs(store);
     label-add="Vytvořit letadlo"
   >
     Aktuálně nemáš přidané žádné letadlo. Přidej se k existující organizaci nebo si sem ulož vlastní letadlo.
-
     <br>
-
     Letadlo můžeš založit i během ukládání informace k tvému prvnímu letu. A pak si ho tu jen doupravit.
   </BasicInfoBanner>
 

src/pages/profile/aircraft/EditAircraftPage.vue

@@ -4,41 +4,40 @@ import {useAircraftsStore} from "stores/Aircrafts";
 import {useRoute, useRouter} from "vue-router";
 import {useQuasar} from "quasar";
 import {computed, onMounted} from "vue";
-import AircraftEditSkeleton from "components/aircrafts/AircraftEditSkeleton.vue";
+import AircraftEditSkeleton from "components/aircrafts/skeletons/AircraftEditSkeleton.vue";
 import {successObject} from "src/composables/dialog";
 import {useAppStore} from "stores/App";
 import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
 import {storeToRefs} from "pinia";
 import {useUserStore} from "stores/User";
-import POIForm from "components/poi/POIForm.vue";
-import POIEditSkeleton from "components/poi/POIEditSkeleton.vue";
 import PhotosEditorList from "components/photos/PhotosEditorList.vue";
-import {usePointsOfInterestStore} from "stores/PointsOfInterest";
-
+import CommonEditSwitcher from "components/navigation/CommonEditSwitcher.vue";
+import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
 
 const $router = useRouter();
 const $q = useQuasar();
 const aircraftId = parseInt(useRoute().params.id);
 const loggedUser = storeToRefs(useUserStore()).user;
 
+const {aircraft, isMutationRunning, isQueryRunning} = storeToRefs(useAircraftsStore());
+
+onMounted(() => {
+  useAircraftsStore().fetchDetail(aircraftId).then(() => {
+    useAppStore().setPageTitle(`${aircraft.value.callSign} - editace`);
+    useAppStore().setBreadcrumbs([
+      {to: {name: "aircrafts"}, label: "Letadla"},
+      {to: {name: "aircraftDetail", params: {id: aircraftId}}, label: aircraft.value.callSign},
+      {label: "Editace"}
+    ])
+  });
+});
+
 const handleSave = (formData) => {
   useAircraftsStore().update(aircraftId, formData).then(() => {
     $q.notify(successObject("Letadlo úspěšně upraveno"));
     $router.push({name: "aircraftDetail", params: {id: aircraftId}});
   })
 }
-const {aircraft, isMutationRunning, isQueryRunning} = storeToRefs(useAircraftsStore());
-
-onMounted(() => {
-  useAircraftsStore().fetchDetail(aircraftId).then(() => {
-    useAppStore().setPageTitle(`${aircraft.value.callSign} - editace`);
-    useAppStore().setBreadcrumbs([
-      {to: {name: "aircraft"}, label: "Letadla"},
-      {to: {name: "aircraftDetail", params: {id: aircraftId}}, label: aircraft.value.callSign},
-      {label: "Editace"}
-    ])
-  });
-});
 
 const setTitlePhoto = (titlePhoto) => {
   useAircraftsStore().update(aircraftId, {titlePhotoId: titlePhoto.id}).then(() => {
@@ -46,50 +45,29 @@ const setTitlePhoto = (titlePhoto) => {
   })
 }
 
-const formStep = computed(() => useRoute().params.step || "basic");
+const formStep = computed(() => useRoute().params.step || "info");
 </script>
 
 <template>
-  <AircraftEditSkeleton v-if="isQueryRunning || !aircraft"/>
-
   <AccessDeniedBanner
-      v-else-if="aircraft.createdById !== loggedUser.id"
+      v-if="!isQueryRunning && aircraft && aircraft.createdById !== loggedUser.id"
       :route-back="{name: 'aircraftDetail', params: {id: aircraftId}}"
   />
   <template v-else>
-    <q-tabs active-color="primary" class="q-mb-lg" v-if="aircraft.photos.length > 0">
-      <q-route-tab
-          icon="edit"
-          label="Informace"
-          replace
-          :to="{name: 'aircraftEdit', params: {id: aircraft?.id, step: 'basic'}}"
-          exact
-      />
-      <q-route-tab
-          icon="add_a_photo"
-          label="Fotky"
-          replace
-          :to="{name: 'aircraftEdit', params: {id: aircraft?.id, step: 'photo'}}"
-          exact
-      />
-    </q-tabs>
+    <CommonEditSwitcher :route="{name: 'aircraftEdit', params: {id: aircraft?.id}}"/>
 
     <template v-if="formStep === 'basic'">
-      <q-card class="q-mx-md">
-        <q-card-section>
-          <AircraftForm
-              @save="handleSave"
-              :default-values="aircraft"
-              :organizations="loggedUser.organizations"
-              :is-request-pending="isMutationRunning"
-          />
-        </q-card-section>
-      </q-card>
+      <AircraftEditSkeleton v-if="isQueryRunning || !aircraft"/>
+      <AircraftForm
+          @save="handleSave"
+          :default-values="aircraft"
+          :organizations="loggedUser.organizations"
+          :is-request-pending="isMutationRunning"
+      />
     </template>
+
     <template v-else-if="formStep === 'photo'">
-
-      <q-spinner v-if="isQueryRunning || !aircraft"/>
-
+      <PhotoGallerySkeleton v-if="isQueryRunning || !aircraft"/>
       <PhotosEditorList
           v-else
           :photos="aircraft.photos"

src/pages/profile/copilot/CopilotDetailPage.vue

@@ -1,14 +1,12 @@
 <script setup>
 import {useRoute} from "vue-router";
-import {computed, onMounted} from "vue";
-import CopilotDetailSkeleton from "components/copilots/CopilotDetailSkeleton.vue";
+import {onMounted} from "vue";
+import CopilotDetailSkeleton from "components/copilots/skeletons/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";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
-import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
 import ContentCard from "components/ContentCard.vue";
 
 const copilotId = parseInt(useRoute().params.id);
@@ -23,13 +21,6 @@ onMounted(() => {
 });
 
 const {isQueryRunning, copilot} = storeToRefs(useCopilotsStore());
-
-const copilotTitlePhoto = computed(() => {
-  if (!copilot.value || copilot.value.photos.length === 0) return null;
-
-  return copilot.value.photos[0];
-});
-
 </script>
 
 <template>
@@ -37,7 +28,7 @@ const copilotTitlePhoto = computed(() => {
 
   <template v-else>
 
-    <ContentCard :title-photo="copilotTitlePhoto" :title="copilot.name">
+    <ContentCard :title-photo="copilot.titlePhoto" :title="copilot.name">
       <template #actions>
         <div class="col-grow">
           <q-btn

src/pages/profile/copilot/CopilotsPage.vue

@@ -1,5 +1,4 @@
 <script setup>
-import {onMounted} from "vue";
 import CopilotsList from "components/copilots/CopilotsList.vue";
 import FAB from "components/FAB.vue";
 import {useAppStore} from "stores/App";
@@ -8,10 +7,8 @@ import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {useCopilotsStore} from "stores/Copilots";
 import {storeToRefs} from "pinia";
 
-onMounted(() => {
-  useCopilotsStore().fetch();
-  useAppStore().setPageTitle("Spolucestující");
-});
+useCopilotsStore().fetch();
+useAppStore().setPageTitle("Spolucestující");
 
 const {isQueryRunning, copilots} = storeToRefs(useCopilotsStore());
 </script>
@@ -20,15 +17,15 @@ const {isQueryRunning, copilots} = storeToRefs(useCopilotsStore());
   <BasicListSkeleton :items="10" v-if="isQueryRunning"/>
 
   <BasicInfoBanner
-    v-else-if="!isQueryRunning && copilots.length === 0"
-    :router-add="{name: 'addCopilot'}"
+      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.
     <br>
     Zatím tu není nikdo. Přidej si let s někým nebo kopilota vytvoř ručně tu.
   </BasicInfoBanner>
 
-    <CopilotsList :items="copilots" v-else/>
+  <CopilotsList :items="copilots" v-else/>
 
-    <FAB :router-link="{name: 'addCopilot'}" mode="add"/>
+  <FAB :router-link="{name: 'addCopilot'}" mode="add"/>
 </template>

src/pages/profile/copilot/EditCopilotPage.vue

@@ -1,13 +1,16 @@
 <script setup>
-import {onMounted} from "vue";
+import {computed, onMounted} from "vue";
 import {useAppStore} from "stores/App";
-import CopilotEditSkeleton from "components/copilots/CopilotEditSkeleton.vue";
+import CopilotEditSkeleton from "components/copilots/skeletons/CopilotEditSkeleton.vue";
 import CopilotEditForm from "components/copilots/CopilotForm.vue";
 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";
+import PhotosEditorList from "components/photos/PhotosEditorList.vue";
+import CommonEditSwitcher from "components/navigation/CommonEditSwitcher.vue";
+import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
 
 const $q = useQuasar();
 const $router = useRouter();
@@ -34,15 +37,36 @@ const handleSave = (formData) => {
 }
 
 const {isQueryRunning, isMutationRunning, copilot} = storeToRefs(useCopilotsStore());
+
+const formStep = computed(() => useRoute().params.step || "info");
+const setTitlePhoto = (titlePhoto) => {
+  useCopilotsStore().update(copilotId, {titlePhotoId: titlePhoto.id}).then(() => {
+    $q.notify(successObject("Úvodní fotka nastavena"));
+  })
+}
 </script>
 
 <template>
-  <CopilotEditSkeleton v-if="isQueryRunning || !copilot"/>
+  <CommonEditSwitcher :route="{name: 'copilotEdit', params: {id: copilot.id}}"/>
 
-  <CopilotEditForm
-    v-else
-    :copilot="copilot"
-    :is-request-pending="isMutationRunning"
-    @save="handleSave"
-  />
+  <template v-if="formStep === 'info'">
+    <CopilotEditSkeleton v-if="isQueryRunning || !copilot"/>
+    <CopilotEditForm
+        v-else
+        :copilot="copilot"
+        :is-request-pending="isMutationRunning"
+        @save="handleSave"
+    />
+  </template>
+
+  <template v-else-if="formStep === 'photo'">
+    <PhotoGallerySkeleton v-if="isQueryRunning || !copilot" />
+    <PhotosEditorList
+        v-else
+        :photos="copilot.photos"
+        :title-photo="copilot.titlePhoto"
+        :show-actions="false"
+        @set-title-photo="setTitlePhoto"
+    />
+  </template>
 </template>

src/pages/profile/event/EditEventPage.vue

@@ -5,7 +5,7 @@ import {useRoute, useRouter} from "vue-router";
 import {useEventsStore} from "stores/Events";
 import {successObject} from "src/composables/dialog";
 import {useQuasar} from "quasar";
-import EventEditSkeleton from "components/event/EventEditSkeleton.vue";
+import EventEditSkeleton from "components/event/skeletons/EventEditSkeleton.vue";
 import EventForm from "components/event/EventForm.vue";
 import {storeToRefs} from "pinia";
 

src/pages/profile/event/EventDetailPage.vue

@@ -1,7 +1,7 @@
 <script setup>
 import {useRoute} from "vue-router";
 import {onMounted} from "vue";
-import EventDetailSkeleton from "components/event/EventDetailSkeleton.vue";
+import EventDetailSkeleton from "components/event/skeletons/EventDetailSkeleton.vue";
 import {useAppStore} from "stores/App";
 import FAB from "components/FAB.vue";
 import FlightsList from "components/flights/FlightsList.vue";

src/pages/profile/event/EventsPage.vue

@@ -1,5 +1,4 @@
 <script setup>
-import {onMounted} from "vue";
 import {useAppStore} from "stores/App";
 import FAB from "components/FAB.vue";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
@@ -8,16 +7,14 @@ import EventsList from "components/event/EventsList.vue";
 import {storeToRefs} from "pinia";
 import {useEventsStore} from "stores/Events";
 
-onMounted(() => {
-  useEventsStore().fetch();
-  useAppStore().setPageTitle("Letecké události");
-});
+useEventsStore().fetch();
+useAppStore().setPageTitle("Letecké události");
 
 const {isQueryRunning, events} = storeToRefs(useEventsStore());
 </script>
 
 <template>
-  <BasicListSkeleton :items-count-min="3" :items-count-max="8" v-if="isQueryRunning"/>
+  <BasicListSkeleton :items="8" v-if="isQueryRunning"/>
   <BasicInfoBanner
     v-else-if="!isQueryRunning && events.length === 0"
     :route-add="{name: 'addEvent'}"

src/pages/profile/flight/EditFlightPage.vue

@@ -19,10 +19,11 @@ import PhotosEditorList 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 FlightEditSkeleton from "components/flights/FlightEditSkeleton.vue";
+import FlightEditSkeleton from "components/flights/skeletons/FlightEditSkeleton.vue";
 import BatchPhotoFormDialog from "components/photos/BatchPhotoFormDialog.vue";
 import {useAppStore} from "stores/App";
 import {useEventsStore} from "stores/Events";
+import FlightEditCopilotSkeleton from "components/flights/skeletons/FlightEditCopilotSkeleton.vue";
 
 const $q = useQuasar();
 const $route = useRoute();
@@ -68,8 +69,6 @@ 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)
   const promises = [];
   uploadInProgress.value = true;
   for (const photo of data.photos) {
@@ -155,7 +154,6 @@ const openPhotoEdit = (photo) => {
 
 
 // batch edit
-
 const openBatchEdit = ref(false);
 const editBatchPhotos = ref([]);
 const openBatchPhotoForm = (photos) => {
@@ -206,42 +204,42 @@ const handleBatchPhotoEdit = async (flightId, data) => {
 <template>
   <FlightFormSteps :router-edit-mode="true" :flightId="flightId"/>
 
-  <FlightEditSkeleton :step="formStep" v-if="isQueryRunning || !flight"/>
-
-  <template v-else>
-    <q-tab-panels v-model="formStep">
-      <q-tab-panel name="basic">
-        <FlightFormBasic
+  <q-tab-panels v-model="formStep">
+    <q-tab-panel name="basic">
+      <FlightEditSkeleton :step="formStep" v-if="isQueryRunning || !flight"/>
+      <FlightFormBasic
           @save="handleFlightEdit"
           :flight="flight"
           :locations="pointsOfInterest"
           :airports="airports"
           :aircrafts="aircrafts"
-        />
-      </q-tab-panel>
+      />
+    </q-tab-panel>
 
-      <q-tab-panel name="copilot">
-        <FlightFormCopilot @save="handleFlightEdit" :flight="flight" :copilots="copilots"/>
-      </q-tab-panel>
+    <q-tab-panel name="copilot">
+      <FlightEditCopilotSkeleton :step="formStep" v-if="isQueryRunning || !flight"/>
+      <FlightFormCopilot @save="handleFlightEdit" :flight="flight" :copilots="copilots"/>
+    </q-tab-panel>
 
-      <q-tab-panel name="track">
-        <FlightFormTrack
+    <q-tab-panel name="track">
+      <FlightEditSkeleton :step="formStep" v-if="isQueryRunning || !flight"/>
+      <FlightFormTrack
           v-if="pointsOfInterest"
           :flight="flight"
           :locations="pointsOfInterest"
           :airports="airports"
           @save="handleFlightEdit"
-        />
-      </q-tab-panel>
+      />
+    </q-tab-panel>
 
-      <q-tab-panel name="photos">
-        <FlightFormPhotos
+    <q-tab-panel name="photos">
+      <FlightFormPhotos
           :flight="flight"
           :is-request-pending="isRequestPending || uploadInProgress"
           @save="handlePhotosUpload"
-        />
+      />
 
-        <PhotosEditorList
+      <PhotosEditorList
           :title-photo="flight.titlePhoto"
           :photos="flight.photos"
           :show-actions="true"
@@ -250,32 +248,31 @@ const handleBatchPhotoEdit = async (flightId, data) => {
           @batch-rotate="rotatePhotos"
           @delete="deletePhoto"
           @set-title-photo="setTitlePhoto"
-        />
+      />
 
-        <!-- Dialogs for photo edit -->
-        <PhotoFormDialog
+      <!-- Dialogs for photo edit -->
+      <PhotoFormDialog
           v-model="openEdit"
           :copilots="flight.copilots"
-          :aircraft="flight.aircraft"
+          :aircrafts="aircrafts"
           :locations="pointsOfInterest"
           :photo="editPhoto"
           @save="handlePhotoUpdate(flightId, $event)"
-        />
+      />
 
-        <BatchPhotoFormDialog
+      <BatchPhotoFormDialog
           v-model="openBatchEdit"
           :locations="pointsOfInterest"
           :photos="editBatchPhotos"
           :copilots="flight.copilots"
-          :aircraft="flight.aircraft"
+          :aircrafts="aircrafts"
           @save="handleBatchPhotoEdit(flightId, $event)"
           @delete="deletePhoto"
-        />
-      </q-tab-panel>
+      />
+    </q-tab-panel>
 
-      <q-tab-panel name="notes">
-        <FlightFormNotes @save="handleFlightEdit" :events="events" :flight="flight"/>
-      </q-tab-panel>
-    </q-tab-panels>
-  </template>
+    <q-tab-panel name="notes">
+      <FlightFormNotes @save="handleFlightEdit" :events="events" :flight="flight"/>
+    </q-tab-panel>
+  </q-tab-panels>
 </template>

src/pages/profile/flight/FlightDetailPage.vue

@@ -1,7 +1,7 @@
 <script setup>
 import {useRoute, useRouter} from "vue-router";
 import {computed, onMounted, ref, watch} from "vue";
-import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
+import FlightDetailSkeleton from "components/flights/skeletons/FlightDetailSkeleton.vue";
 import {flightName} from "src/composables/flight";
 import {useAppStore} from "stores/App";
 import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
@@ -23,9 +23,10 @@ const $router = useRouter();
 const flightId = parseInt(useRoute().params.id);
 const loggedUser = storeToRefs(useUserStore()).user;
 
-useFlightsStore().fetchDetail(flightId).then(f => {
+useFlightsStore().fetchDetail(flightId);
+const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
+watch(() => flight.value, (f) => {
   if (!f) return;
-
   const flightNameFormatted = flightName(f);
   useAppStore().setPageTitle(flightNameFormatted);
   useAppStore().setBreadcrumbs([
@@ -60,8 +61,6 @@ const copyLinkToClipboard = () => {
     $q.notify(successObject("Odkaz zkopírován"))
   });
 };
-
-const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
 </script>
 
 <template>
@@ -98,6 +97,7 @@ const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
         />
         <FlightBasicInfo
             :flight="flight"
+            :poi-detail-route="{name: 'poiDetail'}"
             :aircraft-detail-route="{name: 'aircraftDetail'}"
             :copilot-detail-route="{name: 'copilotDetail'}"
         />

src/pages/profile/flight/FlightsPage.vue

@@ -1,23 +1,14 @@
 <script setup>
-import {onMounted} from "vue";
-import {useQuasar} from "quasar";
 import FlightsList from "components/flights/FlightsList.vue";
-import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
+import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
 import FAB from "components/FAB.vue";
 import {useAppStore} from "stores/App";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {useFlightsStore} from "stores/Flights";
 import {storeToRefs} from "pinia";
-import {useMeta} from "quasar";
-import {metaData} from "src/composables/meta";
 
-const $q = useQuasar();
-
-useMeta(() => metaData({
-  title: "Moje lety"
-}));
-
-useFlightsStore().fetch();
+useAppStore().setPageTitle("Moje lety");
+useFlightsStore().fetch({});
 const {flights, isQueryRunning} = storeToRefs(useFlightsStore());
 </script>
 

src/pages/profile/flight/NewFlightPage.vue

@@ -9,7 +9,7 @@ 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 FlightEditSkeleton from "components/flights/FlightEditSkeleton.vue";
+import FlightEditSkeleton from "components/flights/skeletons/FlightEditSkeleton.vue";
 
 onMounted(() => {
   useAircraftsStore().fetch()

src/pages/profile/flight/PhotoEditorPage.vue

@@ -10,7 +10,7 @@ import {compare, onResize, splitter, splitterWidth} from "src/composables/photos
 import {aspectRatioOptions, croppedArea, cropperReady, photoAspectRatio, selectedAspectRatio, setCropData} from "src/composables/photos/editor/crop";
 import {debounce, useQuasar} from "quasar";
 import {successObject} from "src/composables/dialog";
-import PhotoEditorSkeleton from "components/photos/PhotoEditorSkeleton.vue";
+import PhotoEditorSkeleton from "components/photos/skeletons/PhotoEditorSkeleton.vue";
 import {storeToRefs} from "pinia";
 import FormSubmitButton from "components/FormSubmitButton.vue";
 import FormWrapper from "components/FormWrapper.vue";

src/pages/profile/organization/EditOrganizationPage.vue

@@ -5,7 +5,7 @@ import {useRoute, useRouter} from "vue-router";
 import {useOrganizationsStore} from "stores/Organizations";
 import {successObject} from "src/composables/dialog";
 import {useQuasar} from "quasar";
-import OrganizationEditSkeleton from "components/organizations/OrganizationEditSkeleton.vue";
+import OrganizationEditSkeleton from "components/organizations/skeletons/OrganizationEditSkeleton.vue";
 import OrganizationForm from "components/organizations/OrganizationForm.vue";
 import {storeToRefs} from "pinia";
 

src/pages/profile/organization/OrganizationsPage.vue

@@ -1,6 +1,6 @@
 <script setup>
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
-import {computed, onMounted} from "vue";
+import {computed} from "vue";
 import {useAppStore} from "stores/App";
 import FAB from "components/FAB.vue";
 import OrganizationsList from "components/organizations/OrganizationsList.vue";
@@ -9,10 +9,8 @@ import {useOrganizationsStore} from "stores/Organizations";
 import {storeToRefs} from "pinia";
 import {useUserStore} from "stores/User";
 
-onMounted(() => {
-  useOrganizationsStore().fetch();
-  useAppStore().setPageTitle("Organizace");
-});
+useOrganizationsStore().fetch();
+useAppStore().setPageTitle("Organizace");
 
 const loggedUser = storeToRefs(useUserStore()).user;
 const myOrganizationIds = computed(() => (loggedUser.value && loggedUser.value.organizations?.map(o => o.id)) || []);

src/pages/profile/poi/EditPointOfInterestPage.vue

@@ -1,5 +1,5 @@
 <script setup>
-import POIEditSkeleton from "components/poi/POIEditSkeleton.vue";
+import POIEditSkeleton from "components/poi/skeletons/POIEditSkeleton.vue";
 import {computed, onMounted} from "vue";
 import {useRoute, useRouter} from "vue-router";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
@@ -11,23 +11,25 @@ import {storeToRefs} from "pinia";
 import POIForm from "components/poi/POIForm.vue";
 import {useUserStore} from "stores/User";
 import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
-import PhotoEditorSkeleton from "components/photos/PhotoEditorSkeleton.vue";
+import PhotoEditorSkeleton from "components/photos/skeletons/PhotoEditorSkeleton.vue";
 import PhotosEditorList from "components/photos/PhotosEditorList.vue";
+import CommonEditSwitcher from "components/navigation/CommonEditSwitcher.vue";
+import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
 
 const poiId = parseInt(useRoute().params.id);
 
-onMounted(() => {
-  usePointsOfInterestStore().fetchDetail(poiId).then((p) => {
-    useAppStore().setPageTitle(`${p.name} - editace`);
-    useAppStore().setBreadcrumbs([
-      {to: {name: "poi"}, label: "Zajímavá místa"},
-      {to: {name: "poiDetail", params: {id: poiId}}, label: p.name},
-      {label: "Editace"},
-    ]);
-  });
+usePointsOfInterestStore().fetchDetail(poiId).then((p) => {
+  if (!p) return;
 
-  usePointsOfInterestTypeStore().fetch();
-})
+  useAppStore().setPageTitle(`${p.name} - editace`);
+  useAppStore().setBreadcrumbs([
+    {to: {name: "poi"}, label: "Zajímavá místa"},
+    {to: {name: "poiDetail", params: {id: poiId}}, label: p.name},
+    {label: "Editace"},
+  ]);
+});
+
+usePointsOfInterestTypeStore().fetch();
 
 const poiTypes = storeToRefs(usePointsOfInterestTypeStore()).types;
 const loggedUser = storeToRefs(useUserStore()).user;
@@ -48,47 +50,32 @@ const setTitlePhoto = (titlePhoto) => {
   })
 }
 
-const formStep = computed(() => useRoute().params.step || "basic");
+const formStep = computed(() => useRoute().params.step || "info");
 </script>
 
 <template>
-
   <AccessDeniedBanner
-    v-if="pointOfInterest && !isQueryRunning && pointOfInterest.createdById !== loggedUser?.id"
-    :route-back="{name: 'poiDetail', params: {id: poiId}}"
+      v-if="pointOfInterest && !isQueryRunning && pointOfInterest.createdById !== loggedUser?.id"
+      :route-back="{name: 'poiDetail', params: {id: poiId}}"
   />
 
-  <q-tabs active-color="primary" class="q-mb-lg">
-    <q-route-tab
-      icon="edit"
-      label="Informace"
-      replace
-      :to="{name: 'poiEdit', params: {id: pointOfInterest?.id, step: 'basic'}}"
-      exact
-    />
-    <q-route-tab
-      icon="add_a_photo"
-      label="Fotky"
-      replace
-      :to="{name: 'poiEdit', params: {id: pointOfInterest?.id, step: 'photo'}}"
-      exact
-    />
-  </q-tabs>
+  <template v-else>
+    <CommonEditSwitcher :route="{name: 'poiEdit', params: {id: pointOfInterest?.id}}"/>
 
-  <template v-if="formStep === 'basic'">
-    <POIEditSkeleton v-if="isQueryRunning || !pointOfInterest"/>
-    <POIForm :poi="pointOfInterest" :types="poiTypes" v-else @save="handleSave"/>
-  </template>
-  <template v-else-if="formStep === 'photo'">
+    <template v-if="formStep === 'info'">
+      <POIEditSkeleton v-if="isQueryRunning || !pointOfInterest"/>
+      <POIForm :poi="pointOfInterest" :types="poiTypes" v-else @save="handleSave"/>
+    </template>
 
-    <q-spinner v-if="isQueryRunning || !pointOfInterest"/>
-
-    <PhotosEditorList
-      v-else
-      :photos="pointOfInterest.photos"
-      :title-photo="pointOfInterest.titlePhoto"
-      :show-actions="false"
-      @set-title-photo="setTitlePhoto"
-    />
+    <template v-else-if="formStep === 'photo'">
+      <PhotoGallerySkeleton v-if="isQueryRunning || !pointOfInterest"/>
+      <PhotosEditorList
+          v-else
+          :photos="pointOfInterest.photos"
+          :title-photo="pointOfInterest.titlePhoto"
+          :show-actions="false"
+          @set-title-photo="setTitlePhoto"
+      />
+    </template>
   </template>
 </template>

src/pages/profile/poi/PointOfInterestDetailPage.vue

@@ -1,6 +1,6 @@
 <script setup>
-import {useRoute} from "vue-router";
-import POIDetailSkeleton from "components/poi/POIDetailSkeleton.vue";
+import {useRoute, useRouter} from "vue-router";
+import POIDetailSkeleton from "components/poi/skeletons/POIDetailSkeleton.vue";
 import {useAppStore} from "stores/App";
 import EmbeddedMap from "components/map/EmbeddedMap.vue";
 import {useUserStore} from "stores/User";
@@ -14,10 +14,15 @@ import {toggleVisibility} from "src/composables/form/formHandling";
 import {copyToClipboard, useQuasar} from "quasar";
 import {successObject} from "src/composables/dialog";
 import ContentCardEditButton from "components/ContentCardEditButton.vue";
+import {useFlightsStore} from "stores/Flights";
+import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
 
 const loggedUser = storeToRefs(useUserStore()).user;
+const poiId = parseInt(useRoute().params.id);
+
+usePointsOfInterestStore().fetchDetail(poiId).then((p) => {
+  if (!p) return;
 
-usePointsOfInterestStore().fetchDetail(useRoute().params.id).then((p) => {
   useAppStore().setPageTitle(`${p.name}`);
   useAppStore().setBreadcrumbs([
     {to: {name: "poi"}, label: "Zajímavá místa"},
@@ -25,20 +30,19 @@ usePointsOfInterestStore().fetchDetail(useRoute().params.id).then((p) => {
   ])
 });
 
+useFlightsStore().fetch({pointOfInterestId: poiId});
+
 const {isQueryRunning, pointOfInterest} = storeToRefs(usePointsOfInterestStore());
+const {isQueryRunning: areFlightsLoading, flights} = storeToRefs(useFlightsStore());
 
 const $q = useQuasar();
 const togglePublicVisibility = () => toggleVisibility({
-  $q,
-  store: usePointsOfInterestStore(),
-  object: pointOfInterest.value
+  $q, store: usePointsOfInterestStore(), object: pointOfInterest.value
 });
 
+const $router = useRouter();
 const copyLinkToClipboard = () => {
-  const url = $router.resolve({
-    name: "publicPOIDetail",
-    params: {id: pointOfInterest.value.id}
-  });
+  const url = $router.resolve({name: "publicPOIDetail", params: {id: pointOfInterest.value.id}});
   copyToClipboard(window.location.origin + url.href).then(() => {
     $q.notify(successObject("Odkaz zkopírován"))
   });
@@ -103,11 +107,15 @@ const copyLinkToClipboard = () => {
 
           <h3>Tvoje lety do místa {{ pointOfInterest.name }}</h3>
 
+          <FlightsListSkeleton v-if="areFlightsLoading && !flights.length" />
           <FlightsList
-              :items="pointOfInterest.flights"
+              :items="flights"
               :public="false"
-              v-if="pointOfInterest.flights.length > 0 && loggedUser.id === pointOfInterest.createdById"
+              v-else-if="flights.length > 0"
           />
+          <BasicInfoBanner v-else>
+            Na tomto místě jsi zatím nebyl/a.
+          </BasicInfoBanner>
         </q-card-section>
       </template>
     </ContentCard>

src/pages/profile/poi/PointsOfInterestPage.vue

@@ -1,5 +1,4 @@
 <script setup>
-import {onMounted} from "vue";
 import {useAppStore} from "stores/App";
 import POIList from "components/poi/POIList.vue";
 import FAB from "components/FAB.vue";
@@ -8,28 +7,26 @@ import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 import {storeToRefs} from "pinia";
 
-onMounted(() => {
-  usePointsOfInterestStore().fetch();
-  useAppStore().setPageTitle("Zajímavá místa");
-});
+usePointsOfInterestStore().fetch();
+useAppStore().setPageTitle("Zajímavá místa");
 
 const {isQueryRunning, pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
 </script>
 
 <template>
-  <BasicListSkeleton :items="10" v-if="isQueryRunning"/>
+  <BasicListSkeleton :items="10" v-if="isQueryRunning && !pointsOfInterest.length"/>
   <BasicInfoBanner
-    v-else-if="!isQueryRunning && pointsOfInterest.length === 0"
-    :route-add="{name: 'addPoi'}"
-    label-add="Přidat"
+      v-else-if="!isQueryRunning && pointsOfInterest.length === 0"
+      :route-add="{name: 'addPoi'}"
+      label-add="Přidat"
   >
     Nemáš tu uložené žádné zajímavé místo. Přidej si let, nastav si tam ručně trasu a jednotlivé body se zobrazí
     i v tomto seznamu.
   </BasicInfoBanner>
 
   <POIList
-    v-else
-    :items="pointsOfInterest"
+      v-else
+      :items="pointsOfInterest"
   />
 
   <FAB :router-link="{name: 'addPOI'}" mode="add"/>

src/pages/public/AircraftDetailPage.vue

@@ -11,7 +11,7 @@ export default {
 <script setup>
 import {useRouter} from "vue-router";
 import {useMeta, useQuasar} from "quasar";
-import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
+import AircraftDetailSkeleton from "components/aircrafts/skeletons/AircraftDetailSkeleton.vue";
 import {confirmObject, successObject} from "src/composables/dialog";
 import {useAppStore} from "stores/App";
 import FlightsList from "components/flights/FlightsList.vue";
@@ -24,7 +24,7 @@ import AircraftInfo from "components/aircrafts/AircraftInfo.vue";
 import {useUserStore} from "stores/User";
 import {usePhotosStore} from "stores/Photos";
 import {useFlightsStore} from "stores/Flights";
-import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
+import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 
 const $q = useQuasar();

src/pages/public/PilotProfilePage.vue

@@ -11,7 +11,7 @@ export default {
 <script setup>
 import {storeToRefs} from "pinia";
 import PilotProfileCard from "components/profile/PilotProfileCard.vue";
-import PublicProfileSkeleton from "components/profile/PublicProfileSkeleton.vue";
+import PublicProfileSkeleton from "components/profile/skeletons/PublicProfileSkeleton.vue";
 
 const {publicUser: pilot, isQueryRunning: pilotLoading} = storeToRefs(useUserStore());
 </script>

src/pages/public/PointOfInterestDetailPage.vue

@@ -19,7 +19,7 @@ import FlightsList from "components/flights/FlightsList.vue";
 import {useAppStore} from "stores/App";
 import {useMeta} from "quasar";
 import {metaData} from "src/composables/meta";
-import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
+import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 
 const {pointOfInterest, isQueryRunning} = storeToRefs(usePointsOfInterestStore());

src/pages/public/pilotProfile/CopilotDetailPage.vue

@@ -16,7 +16,7 @@ import {storeToRefs} from "pinia";
 import {onMounted} from "vue";
 import {useFlightsStore} from "stores/Flights";
 import {usePhotosStore} from "stores/Photos";
-import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
+import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
 import ContentCard from "components/ContentCard.vue";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
 import {useMeta} from "quasar";

src/pages/public/pilotProfile/EventDetailPage.vue

@@ -12,7 +12,7 @@ export default {
 import {watch} from "vue";
 import {useRoute} from "vue-router";
 import {useAppStore} from "stores/App";
-import EventDetailSkeleton from "components/event/EventDetailSkeleton.vue";
+import EventDetailSkeleton from "components/event/skeletons/EventDetailSkeleton.vue";
 import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
 import FlightsList from "components/flights/FlightsList.vue";
 import {storeToRefs} from "pinia";

src/pages/public/pilotProfile/EventsListPage.vue

@@ -1,5 +1,5 @@
 <script setup>
-import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
+import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
 import EventsList from "components/event/EventsList.vue";
 import PublicFlightEventSwitcher from "components/navigation/PublicFlightEventSwitcher.vue";
 import {useAppStore} from "stores/App";

src/pages/public/pilotProfile/FlightDetailPage.vue

@@ -11,7 +11,7 @@ export default {
 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 FlightDetailSkeleton from "components/flights/skeletons/FlightDetailSkeleton.vue";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
 import {storeToRefs} from "pinia";
 import {flightName} from "src/composables/flight";
@@ -21,11 +21,9 @@ import {useMeta} from "quasar";
 import {metaData} from "src/composables/meta";
 import ContentCard from "components/ContentCard.vue";
 import {usePhotosStore} from "stores/Photos";
-import {onMounted} from "vue";
 
 const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
 const routeParams = useRoute().params;
-
 const pilot = storeToRefs(useUserStore()).publicUser;
 
 usePhotosStore().fetchPublic({flightId: flight.value.id});
@@ -69,7 +67,7 @@ useMeta(() => metaData({
             <PhotoGallery :photos="flightPhotos" v-else/>
           </q-no-ssr>
 
-          <FlightTrackMap :flight="flight" :photos="flightPhotos"/>
+          <FlightTrackMap :key="flight.id" :flight="flight" :photos="flightPhotos"/>
         </q-card-section>
       </template>
     </ContentCard>

src/pages/public/pilotProfile/FlightsListPage.vue

@@ -1,5 +1,5 @@
 <script setup>
-import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
+import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
 import FlightsList from "components/flights/FlightsList.vue";
 import PublicFlightEventSwitcher from "components/navigation/PublicFlightEventSwitcher.vue";
 import {useAppStore} from "stores/App";
@@ -43,11 +43,10 @@ const loggedUser = storeToRefs(useUserStore()).user;
     Tento pilot zatím nepublikoval žádný let.
   </q-banner>
 
-  <template v-else>
-    <FlightsList
+  <FlightsList
+      v-else
       :items="flights"
       :public="true"
       class="q-mb-md"
-    />
-  </template>
+  />
 </template>

src/router/index.js

@@ -4,9 +4,13 @@ import routes from './routes'
 import {useAppStore} from "stores/App";
 
 export default route(function ({ store }) {
-  const createHistory = process.env.SERVER
-    ? createMemoryHistory
-    : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory)
+  // const createHistory = process.env.SERVER
+  //   ? createMemoryHistory
+  //   : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory)
+
+  console.log(process.env.SERVER);
+
+  const createHistory = process.env.SERVER ? createMemoryHistory : createWebHistory;
 
   const Router = createRouter({
     scrollBehavior: () => ({left: 0, top: 0}),

src/router/routes.js

@@ -48,7 +48,7 @@ const routes = [
       {path: 'kopiloti', name: "copilots", component: () => import('pages/profile/copilot/CopilotsPage.vue')},
       {path: 'kopiloti/novy', name: "addCopilot", component: () => import('pages/profile/copilot/NewCopilotPage.vue')},
       {path: 'kopiloti/:id', name: "copilotDetail", component: () => import('pages/profile/copilot/CopilotDetailPage.vue')},
-      {path: 'kopiloti/:id/edit', name: "copilotEdit", component: () => import('pages/profile/copilot/EditCopilotPage.vue')},
+      {path: 'kopiloti/:id/edit/:step?', name: "copilotEdit", component: () => import('pages/profile/copilot/EditCopilotPage.vue')},
       {path: 'letadla', name: "aircrafts", component: () => import('pages/profile/aircraft/AircraftsPage.vue')},
       {path: 'letadla/nove', name: "addAircraft", component: () => import('pages/profile/aircraft/NewAircraftsPage.vue')},
       {path: 'letadla/:id', name: "aircraftDetail", component: () => import('pages/profile/aircraft/AircraftDetailPage.vue')},

src/stores/Aircrafts.js

@@ -10,59 +10,58 @@ export const useAircraftsStore = defineStore('Aircrafts', () => {
     const isMutationRunning = ref(false);
     const isQueryRunning = ref(false);
 
-    const fetchDetail = (id) => {
-      return query({
+    const fetchDetail = (id) => query({
         isQueryRunning,
         query: AIRCRAFT_DETAIL,
         variables: {id},
-      }).then(item => aircraft.value = item);
-    };
+    }).then(item => {
+        aircraft.value = item;
+        return item
+    });
 
-    const fetchPublicDetail = (id) => {
-      return query({
+    const fetchPublicDetail = (id) => query({
         isQueryRunning,
         query: AIRCRAFT_PUBLIC_DETAIL,
         variables: {id, public: true},
-      }).then(item => aircraft.value = item);
-    };
+    }).then(item => {
+        aircraft.value = item;
+        return item;
+    });
 
-    const fetch = () => {
-      return query({
+    const fetch = () => query({
         isQueryRunning,
         query: AIRCRAFTS_LIST
-      }).then(items => aircrafts.value = items);
-    }
+    }).then(items => {
+        aircrafts.value = items;
+        return items;
+    });
 
-    const create = (input) => {
-      return mutate({
+    const create = (input) => mutate({
         isMutationRunning,
         mutation: CREATE_AIRCRAFT,
         variables: {input}
-      }).then(item => aircrafts.value.push(item))
-    }
+    }).then(item => {
+        aircrafts.value.push(item);
+        return item;
+    })
 
-    const update = (id, input) => {
-      return mutate({
+    const update = (id, input) => mutate({
         isMutationRunning,
         mutation: EDIT_AIRCRAFT,
         variables: {id, input}
-      }).then(item => {
-          updateInItems(aircrafts.value, 'id', item);
-          aircraft.value = item;
-      })
-    }
+    }).then(item => {
+        updateInItems(aircrafts.value, 'id', item);
+        aircraft.value = item;
+        return item;
+    })
 
-    const destroy = (id) => {
-      return mutate({
+    const destroy = (id) => mutate({
         isMutationRunning,
         mutation: DELETE_AIRCRAFT,
         variables: {id}
-      }).then(item => deleteFromItems(aircrafts.value, 'id', item))
-    }
+    }).then(item => deleteFromItems(aircrafts.value, 'id', item))
 
     return {
-      aircrafts, aircraft, isQueryRunning, isMutationRunning, fetchDetail, fetch, create,
-      update, destroy, fetchPublicDetail
+        aircrafts, aircraft, isQueryRunning, isMutationRunning, fetchDetail, fetch, create, update, destroy, fetchPublicDetail
     }
-  }
-);
+});

src/stores/App.js

@@ -3,13 +3,13 @@ import {ref} from "vue";
 
 export const useAppStore = defineStore('App', () => {
   const pageTitle = ref(null);
-  const breadcrumbs = ref([]);
+  const breadcrumbs = ref(null);
   const appStatus = ref(200);  // TODO: toto nejspis nebude potreba!
 
   const resetAfterRouteChange = () => {
     pageTitle.value = null;
     appStatus.value = 200;
-    breadcrumbs.value = []
+    breadcrumbs.value = null;
   };
 
   const setPageTitle = (value) => {

src/stores/Copilots.js

@@ -38,7 +38,10 @@ export const useCopilotsStore = defineStore('Copilots', () => {
       isMutationRunning,
       mutation: CREATE_COPILOT,
       variables: {input},
-    }).then(item => copilots.value.push(item))
+    }).then(item => {
+      copilots.value.push(item);
+      return item;
+    })
   }
 
   const update = (id, input) => {
@@ -46,7 +49,11 @@ export const useCopilotsStore = defineStore('Copilots', () => {
       isMutationRunning,
       mutation: EDIT_COPILOT,
       variables: {id, input}
-    }).then(item => updateInItems(copilots.value, 'id', item))
+    }).then(item => {
+      updateInItems(copilots.value, 'id', item);
+      copilot.value = item;
+      return item;
+    })
   }
 
   return {

src/stores/Flights.js

@@ -5,61 +5,77 @@ import {deleteFromItems, mutate, query, updateInItems} from "stores/helpers";
 import {ref} from "vue";
 
 export const useFlightsStore = defineStore('Flights', () => {
-  const flight = ref(null);
-  const flights = ref([]);
-  const isMutationRunning = ref(false);
-  const isQueryRunning = ref(false);
+    const flight = ref(null);
+    const flights = ref([]);
+    const isMutationRunning = ref(false);
+    const isQueryRunning = ref(false);
 
-  const fetchDetail = (id, username) => query({
-    isQueryRunning,
-    query: FLIGHT_DETAIL,
-    variables: {username, id},
-  }).then(item => flight.value = item);
+    const fetchDetail = (id, username) => query({
+        isQueryRunning,
+        query: FLIGHT_DETAIL,
+        variables: {username, id},
+    }).then(item => {
+        flight.value = item;
+        return item;
+    });
 
-  const fetchPublicDetail = (id, username) => query({
-    isQueryRunning,
-    query: FLIGHT_PUBLIC_DETAIL,
-    variables: {username, id}
-  }).then(item => flight.value = item);
+    const fetchPublicDetail = (id, username) => query({
+        isQueryRunning,
+        query: FLIGHT_PUBLIC_DETAIL,
+        variables: {username, id}
+    }).then(item => {
+        flight.value = item;
+        return item;
+    });
 
-  const fetch = (username = undefined) => query({
-    isQueryRunning,
-    query: FLIGHTS_LIST,
-    variables: {username}
-  }).then(items => flights.value = items);
+    const fetch = ({aircraftId, copilotId, pointOfInterestId}) => query({
+        isQueryRunning,
+        query: FLIGHTS_LIST,
+        variables: {aircraftId, copilotId, pointOfInterestId}
+    }).then(items => {
+        flights.value = items;
+        return items;
+    });
 
-  const fetchPublic = ({username, aircraftId, copilotId, pointOfInterestId}) => query({
-    isQueryRunning,
-    query: FLIGHTS_PUBLIC_LIST,
-    variables: {username, aircraftId, copilotId, pointOfInterestId}
-  }).then(items => flights.value = items);
+    const fetchPublic = ({username, aircraftId, copilotId, pointOfInterestId}) => query({
+        isQueryRunning,
+        query: FLIGHTS_PUBLIC_LIST,
+        variables: {username, aircraftId, copilotId, pointOfInterestId}
+    }).then(items => {
+        flights.value = items;
+        return items;
+    });
 
-  const create = (input) => mutate({
-    isMutationRunning,
-    mutation: CREATE_FLIGHT,
-    variables: {input},
-  }).then(item => {
-    flights.value.push(item);
-    return item;
-  })
+    const create = (input) => mutate({
+        isMutationRunning,
+        mutation: CREATE_FLIGHT,
+        variables: {input},
+    }).then(item => {
+        flights.value.push(item);
+        return item;
+    })
 
-  const update = (id, input) => mutate({
-    isMutationRunning,
-    mutation: EDIT_FLIGHT,
-    variables: {id, input}
-  }).then(item => {
-    updateInItems(flights.value, 'id', item);
-    flight.value = item;
-  })
+    const update = (id, input) => mutate({
+        isMutationRunning,
+        mutation: EDIT_FLIGHT,
+        variables: {id, input}
+    }).then(item => {
+        updateInItems(flights.value, 'id', item);
+        flight.value = item;
+        return item;
+    })
 
-  const destroy = (id) => mutate({
-    isMutationRunning,
-    mutation: DELETE_FLIGHT,
-    variables: {id}
-  }).then(item => deleteFromItems(flights.value, 'id', item))
+    const destroy = (id) => mutate({
+        isMutationRunning,
+        mutation: DELETE_FLIGHT,
+        variables: {id}
+    }).then(item => {
+        deleteFromItems(flights.value, 'id', item);
+        return item;
+    })
 
-  return {
-    flight, flights, isMutationRunning, isQueryRunning, fetchDetail, fetchPublicDetail, fetch, create, update, destroy,
-    fetchPublic
-  }
+    return {
+        flight, flights, isMutationRunning, isQueryRunning, fetchDetail, fetchPublicDetail, fetch, create, update, destroy,
+        fetchPublic
+    }
 });

src/stores/PointsOfInterest.js

@@ -6,50 +6,66 @@ import {ref} from "vue";
 
 
 export const usePointsOfInterestStore = defineStore('PointsOfInterest', () => {
-  const pointOfInterest = ref(null);
-  const pointsOfInterest = ref([]);
-  const isMutationRunning = ref(false);
-  const isQueryRunning = ref(false);
+    const pointOfInterest = ref(null);
+    const pointsOfInterest = ref([]);
+    const isMutationRunning = ref(false);
+    const isQueryRunning = ref(false);
 
-  const fetchDetail = (id) => query({
-    isQueryRunning,
-    query: POI_DETAIL,
-    variables: {id},
-  }).then(item => pointOfInterest.value = item);
+    const fetchDetail = (id) => query({
+        isQueryRunning,
+        query: POI_DETAIL,
+        variables: {id},
+    }).then(item => {
+        pointOfInterest.value = item;
+        return item;
+    });
 
-  const fetchPublicDetail = (id) => query({
-    isQueryRunning,
-    query: POI_PUBLIC_DETAIL,
-    variables: {id},
-  }).then(item => pointOfInterest.value = item);
+    const fetchPublicDetail = (id) => query({
+        isQueryRunning,
+        query: POI_PUBLIC_DETAIL,
+        variables: {id},
+    }).then(item => {
+        pointOfInterest.value = item;
+        return item;
+    });
 
-  const fetch = () => query({
-    isQueryRunning,
-    query: POI_LIST,
-  }).then(items => pointsOfInterest.value = items);
+    const fetch = () => query({
+        isQueryRunning,
+        query: POI_LIST,
+    }).then(items => {
+        pointsOfInterest.value = items;
+        return items;
+    });
 
-  const fetchPublic = () => query({
-    isQueryRunning,
-    query: POI_PUBLIC_LIST,
-  }).then(items => pointsOfInterest.value = items);
+    const fetchPublic = () => query({
+        isQueryRunning,
+        query: POI_PUBLIC_LIST,
+    }).then(items => {
+        pointsOfInterest.value = items;
+        return items;
+    });
 
-  const create = (input) => mutate({
-    isMutationRunning,
-    mutation: CREATE_POI,
-    variables: {input},
-  }).then(item => pointsOfInterest.value.push(item))
+    const create = (input) => mutate({
+        isMutationRunning,
+        mutation: CREATE_POI,
+        variables: {input},
+    }).then(item => {
+        pointsOfInterest.value.push(item);
+        return item;
+    })
 
-  const update = (id, input) => mutate({
-    isMutationRunning,
-    mutation: EDIT_POI,
-    variables: {id, input}
-  }).then(item => {
-    updateInItems(pointsOfInterest.value, 'id', item);
-    pointOfInterest.value = item;
-  })
+    const update = (id, input) => mutate({
+        isMutationRunning,
+        mutation: EDIT_POI,
+        variables: {id, input}
+    }).then(item => {
+        updateInItems(pointsOfInterest.value, 'id', item);
+        pointOfInterest.value = item;
+        return item;
+    })
 
-  return {
-    pointOfInterest, pointsOfInterest, isMutationRunning, isQueryRunning, fetch, fetchPublic, fetchDetail,
-    fetchPublicDetail, create, update
-  }
+    return {
+        pointOfInterest, pointsOfInterest, isMutationRunning, isQueryRunning, fetch, fetchPublic, fetchDetail,
+        fetchPublicDetail, create, update
+    }
 })