composables, mazani letu, skeletony

2023-07-24 17:31:54 +02:00
parent 4648c30f90
commit 864db6c6a2
53 changed files with 732 additions and 273 deletions
@@ -0,0 +1,156 @@
+<script setup>
+import FlightFormSteps from "components/flights/form/FlightFormSteps.vue";
+import {computed, onMounted, reactive, ref, watch} from "vue";
+import {useRoute} from "vue-router";
+import {useFlightsStore} from "stores/Flights";
+import FlightFormBasic from "components/flights/form/FlightFormBasic.vue";
+import {useAircraftsStore} from "stores/Aircrafts";
+import {usePointsOfInterestStore} from "stores/PointsOfInterest";
+import {useAirportsStore} from "stores/Airports";
+import {useMeta, useQuasar} from "quasar";
+import {storeToRefs} from "pinia";
+import {flightName} from "src/composables/objects/flight";
+import FlightFormCopilot from "components/flights/form/FlightFormCopilot.vue";
+import {useCopilotsStore} from "stores/Copilots";
+import FlightFormNotes from "components/flights/form/FlightFormNotes.vue";
+import FlightFormPhotos from "components/flights/form/FlightFormPhotos.vue";
+import {usePhotosStore} from "stores/Photo";
+import PhotosList from "components/photos/PhotosList.vue";
+import {confirmObject, successObject} from "src/composables/dialog";
+import PhotoForm from "components/flights/PhotoForm.vue";
+import FlightFormTrack from "components/flights/form/FlightFormTrack.vue";
+import {fetchFlight, flight, loading} from "src/composables/objects/flight";
+import FlightEditSkeleton from "components/flights/FlightEditSkeleton.vue";
+
+useMeta({title: "Editace letu"});
+
+const $q = useQuasar();
+const route = useRoute();
+const flightId = parseInt(route.params.id);
+
+const aircrafts = storeToRefs(useAircraftsStore()).items;
+const locations = storeToRefs(usePointsOfInterestStore()).items;
+const airports = storeToRefs(useAirportsStore()).items;
+const copilots = storeToRefs(useCopilotsStore()).items;
+
+const disabledSteps = computed(() => flight.value.solo ? ["copilot"] : [flight.value.solo]);
+
+const formStep = ref("");
+watch(() => route.params.step, (val) => formStep.value = val);
+
+onMounted(() => {
+  formStep.value = route.params.step || "basic";
+
+  useAircraftsStore().fetch();
+  usePointsOfInterestStore().fetch();
+  useAirportsStore().fetch();
+  useCopilotsStore().fetch();
+
+  fetchFlight(flightId);
+});
+
+const handleFlightEdit = (data) => {
+  useFlightsStore().update(flightId, data).then(() => {
+    $q.notify(successObject("Úspěšně upraveno"));
+    fetchFlight(flightId);
+  })
+}
+
+const handlePhotosUpload = (data) => {
+  const promises = [];
+  for (const photo of data.photos) {
+    promises.push(usePhotosStore().upload(flightId, {photo}));
+  }
+
+  Promise.all(promises).then(() => {
+    $q.notify(successObject("Úspěšně nahráno"));
+    fetchFlight(flightId);
+  });
+}
+
+const _findPhotoIndex = (photoId) => flight.value.photos.findIndex((object) => object.id === photoId);
+const confirmPhotoDelete = (id) => {
+  $q.dialog(confirmObject("Opravdu chces smazat tuto fotku?"))
+    .onOk(() => {
+      usePhotosStore().delete(id).then((data) => {
+        flight.value.photos.splice(_findPhotoIndex(data.id), 1);
+      });
+    });
+}
+
+const handlePhotoUpdate = (formData) => {
+  const photoId = formData.id;
+  delete formData.id;
+
+  usePhotosStore().update(photoId, formData).then((data) => {
+    const idx = _findPhotoIndex(data.id);
+    flight.value.photos[idx] = data;
+  })
+}
+
+const openEdit = ref(false);
+const editPhoto = ref(null);
+const openPhotoEdit = (photo) => {
+  openEdit.value = true;
+  editPhoto.value = photo;
+}
+</script>
+
+<template>
+  <FlightEditSkeleton v-if="loading" />
+
+  <template v-else>
+    <q-breadcrumbs :key="loading">
+      <q-breadcrumbs-el :to="{name: 'myFlights'}">Moje lety</q-breadcrumbs-el>
+      <q-breadcrumbs-el :to="{name: 'flightDetail', params: {id: flightId}}">{{ flightName(flight) }}</q-breadcrumbs-el>
+      <q-breadcrumbs-el>Editace</q-breadcrumbs-el>
+    </q-breadcrumbs>
+
+    <FlightFormSteps :router-edit-mode="true" :flightId="flightId" :disabled="disabledSteps"/>
+
+    <q-tab-panels v-model="formStep">
+      <q-tab-panel name="basic">
+        <FlightFormBasic
+          @save="handleFlightEdit"
+          :flight="flight"
+          :locations="locations"
+          :airports="airports"
+          :aircrafts="aircrafts"
+        />
+      </q-tab-panel>
+
+      <q-tab-panel name="copilot">
+        <FlightFormCopilot @save="handleFlightEdit" :flight="flight" :copilots="copilots"/>
+      </q-tab-panel>
+
+      <q-tab-panel name="track">
+        <FlightFormTrack
+          v-if="locations"
+          :flight="flight"
+          :locations="locations"
+          @save="handleFlightEdit"
+        />
+      </q-tab-panel>
+
+      <q-tab-panel name="photos">
+        <PhotosList
+          :photos="flight.photos"
+          @edit="openPhotoEdit"
+          @delete="confirmPhotoDelete"
+        />
+        <PhotoForm v-model="openEdit" :locations="locations" :photo="editPhoto" @save="handlePhotoUpdate"/>
+
+        <FlightFormPhotos
+          :flight="flight"
+          @save="handlePhotosUpload"
+        />
+      </q-tab-panel>
+
+      <q-tab-panel name="notes">
+        <FlightFormNotes @save="handleFlightEdit" :flight="flight"/>
+      </q-tab-panel>
+    </q-tab-panels>
+
+
+  </template>
+</template>