Reorganizace skeletonu, aktualizace app-vite a quasaru

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