Jiny pristup k vytvareni letu, polofunkcni editace letu

src/pages/profile/forms/FlightEditPage.vue

@@ -1,7 +1,104 @@
 <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/flight";
+import FlightFormCopilot from "components/flights/form/FlightFormCopilot.vue";
+import {useSecondPilotsStore} from "stores/SecondPilots";
+import FlightFormNotes from "components/flights/form/FlightFormNotes.vue";
+import FlightFormPhotos from "components/flights/form/FlightFormPhotos.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(useSecondPilotsStore()).items;
+
+let flight = ref({});
+const disabledSteps = computed(() => flight.value.solo ? ["copilot"] : [flight.value.solo]);
+
+const loading = ref(false);
+const fetchFlight = (flightId) => {
+  loading.value = true;
+  useFlightsStore().fetchDetail(flightId)
+    .then(f => flight.value = f)
+    .finally(() => loading.value = false);
+}
+
+const formStep = ref("");
+watch(() => route.params.step, (val) => formStep.value = val);
+
+onMounted(() => {
+  formStep.value = route.params.step || "basic";
+
+  useAircraftsStore().fetch();
+  usePointsOfInterestStore().fetch();
+  useFlightsStore().fetch();
+  useAirportsStore().fetch();
+  useSecondPilotsStore().fetch();
+
+  fetchFlight(flightId);
+});
+
+const handleFlightEdit = (data) => {
+  useFlightsStore().update(flightId, data).then(() => {
+    $q.notify({message: "Uspesne upraveno", position: "top", color: "positive"});
+
+    fetchFlight(flightId);
+  })
+}
 </script>
 
 <template>
-  flight edit
+  <div v-if="loading">loading</div>
+
+  <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="photos">
+        <FlightFormPhotos
+          @save="handleFlightEdit"
+                          :flight="flight" />
+      </q-tab-panel>
+
+      <q-tab-panel name="notes">
+        <FlightFormNotes @save="handleFlightEdit" :flight="flight"/>
+      </q-tab-panel>
+    </q-tab-panels>
+
+
+  </template>
 </template>

src/pages/profile/forms/FlightLogPage.vue

@@ -6,8 +6,10 @@ import {useRouter} from "vue-router";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 import {storeToRefs} from "pinia";
 import {useMeta} from "quasar";
-import FlightForm from "components/flights/FlightForm.vue";
+import FlightForm from "components/flights/__FlightForm.vue";
 import {useAirportsStore} from "stores/Airports";
+import FlightFormSteps from "components/flights/form/FlightFormSteps.vue";
+import FlightFormBasic from "components/flights/form/FlightFormBasic.vue";
 
 const aircraftsStore = useAircraftsStore();
 const poiStore = usePointsOfInterestStore();
@@ -27,26 +29,15 @@ const aircrafts = storeToRefs(aircraftsStore).items;
 const locations = storeToRefs(poiStore).items;
 const airports = storeToRefs(airportStore).items;
 
-const turnPointsCount = ref(1);
-
-// watch(() => formData.takeOffLocation, (newVal) => {
-//   if (!formData.landingLocation) {
-//     formData.landingLocation = locations.value.find(l => l.id === newVal);
-//   }
-// })
-
 const router = useRouter();
 const handleSave = (formData) => {
-  flightsStore.create(formData).then(() => {
-    router.push({name: "myFlights"});
+  flightsStore.create(formData).then((flight) => {
+    router.push({name: "flightEdit", params: {id: flight.id, step: "copilot"}});
   });
 }
 
+const formStep = ref("basic")
 
-const removeTurnPoint = (idx) => {
-  formData.turnPoints.splice(idx, 1);
-  turnPointsCount.value--;
-}
 </script>
 
 <template>
@@ -58,7 +49,8 @@ const removeTurnPoint = (idx) => {
 
   <!--  {{ formData }}-->
 
-  <FlightForm @save="handleSave" :aircrafts="aircrafts" :airports="airports" :locations="locations"/>
+  <FlightFormSteps :disabled="['copilot', 'track', 'photos', 'notes']"/>
 
+  <FlightFormBasic @save="handleSave" :aircrafts="aircrafts" :airports="airports" :locations="locations" />
 
 </template>