Reorganizace skeletonu, aktualizace app-vite a quasaru

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"/>