app/src/pages/profile/forms/EditFlightPage.vue

<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">
        <FlightFormPhotos
          :flight="flight"
          @save="handlePhotosUpload"
        />

        <PhotoForm v-model="openEdit" :locations="locations" :photo="editPhoto" @save="handlePhotoUpdate"/>

        <PhotosList
          :photos="flight.photos"
          @edit="openPhotoEdit"
          @delete="confirmPhotoDelete"
        />
      </q-tab-panel>

      <q-tab-panel name="notes">
        <FlightFormNotes @save="handleFlightEdit" :flight="flight"/>
      </q-tab-panel>
    </q-tab-panels>


  </template>
</template>