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

<script>
import {useFlightsStore} from "stores/Flights";

export default {
  preFetch({currentRoute}) {
    const flightId = currentRoute.params.id
    return useFlightsStore().fetchDetail(flightId);
  }
};

</script>

<script setup>
import FlightFormSteps from "components/flights/form/FlightFormSteps.vue";
import {onMounted, ref, toRefs, watch} from "vue";
import {useRoute} from "vue-router";
import FlightFormBasic from "components/flights/form/FlightFormBasic.vue";
import {useAircraftsStore} from "stores/Aircrafts";
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
import {useAirportsStore} from "stores/Airports";
import {useQuasar} from "quasar";
import {storeToRefs} from "pinia";
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 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/skeletons/FlightEditSkeleton.vue";
import BatchPhotoFormDialog from "components/photos/BatchPhotoFormDialog.vue";
import {useEventsStore} from "stores/Events";
import FlightEditCopilotSkeleton from "components/flights/skeletons/FlightEditCopilotSkeleton.vue";
import {useBasicPhotoOperations} from "src/composables/photos/basicOperations";
import {usePhotosStore} from "stores/Photos";
import {flightName} from "src/composables/flight";
import {useAppStore} from "stores/App";
import {useFlightPlansStore} from "stores/FlightPlans";

const $q = useQuasar();
const $route = useRoute();
const flightId = parseInt($route.params.id);

const {aircrafts} = storeToRefs(useAircraftsStore());
const {pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
const {airports} = storeToRefs(useAirportsStore());
const {copilots} = storeToRefs(useCopilotsStore());
const {events} = storeToRefs(useEventsStore());
const {photos} = storeToRefs(usePhotosStore());
const {flightPlan, flightPlans} = storeToRefs(useFlightPlansStore());
const {flight, isQueryRunning, isRequestPending: isMutationRunning} = storeToRefs(useFlightsStore());

const formStep = ref("basic");
watch(() => $route.params.step, (val) => formStep.value = val);

const flightNameFormatted = flightName(flight.value);
useAppStore().setPageTitle(`Editace - ${flightNameFormatted}`);
useAppStore().setBreadcrumbs([
  {to: {name: "myFlights"}, label: "Moje lety"},
  {to: {name: "flightDetail", params: {id: flight.id}}, label: flightNameFormatted},
  {label: "Editace"}
]);


onMounted(() => {
  photos.value = flight.value.photos;

  formStep.value = $route.params.step || "basic";
  useAircraftsStore().fetch({});
  usePointsOfInterestStore().fetch({});
  useAirportsStore().fetch();
  useCopilotsStore().fetch();
  useEventsStore().fetch({});

  useFlightPlansStore().fetch();
  if (flight.value.flightPlanId) {
    useFlightPlansStore().fetchDetail(flight.value.flightPlanId);
  }
});

const handleFlightEdit = (data) => {
  useFlightsStore().update(flightId, data).then((data) => {
    $q.notify(successObject("Úspěšně upraveno"));
  })
}
const {
  uploadInProgress, handlePhotosUpload, batchRotatePhotos, deletePhoto, updateSinglePhoto
} = useBasicPhotoOperations({});

const setTitlePhoto = (photo) => {
  useFlightsStore().update(flight.value.id, {titlePhotoId: photo.id}).then(f => {
    $q.notify(successObject("Úvodní fotografie úspěšně nastavena"));
  });
}

const handlePhotoUpdate = (flightId, formData) => {
  const photoId = formData.id;
  delete formData.id;

  return updateSinglePhoto(photoId, formData);
};

const openEdit = ref(false);
const editPhoto = ref(null);

const openPhotoEdit = (photo) => {
  openEdit.value = true;
  editPhoto.value = photo;
};


// batch edit
const openBatchEdit = ref(false);
const editBatchPhotos = ref([]);
const openBatchPhotoForm = (photos) => {
  openBatchEdit.value = true;
  editBatchPhotos.value = photos;
}

const handleBatchPhotoEdit = async (data) => {
  const photoIds = data.photoIds;
  delete data.photoIds;
  delete data.id;

  if (data.pointOfInterest && !data.pointOfInterest.id) {
    const poiData = {
      ...data.pointOfInterest,
      isPublic: false,
      description: "",
      urlSlug: "",
    }
    await usePointsOfInterestStore().create(poiData).then(poi => data.pointOfInterest = {id: poi.id, name: poi.name});
  }

  const promises = [];
  for (const id of photoIds) {
    const updateData = {
      isAircraft: data.isAircraft,
      copilots: data.copilots.map(c => ({id: c.id, name: c.name}))
    };
    if (data.name !== '') updateData.name = data.name;
    if (data.description !== '') updateData.description = data.description;
    if (data.pointOfInterest) updateData.pointOfInterest = data.pointOfInterest;

    promises.push(updateSinglePhoto(id, data));
  }

  let success = 0;
  Promise.allSettled(promises).then(result => {
    for (const item of result) {
      if (item.status === 'fulfilled') success++;
    }
    const error = result.length - success;

    if (success > 0) $q.notify(successObject("Upraveno " + success + " fotografií"));
    if (error > 0) $q.notify(errorObject(`Nepovedlo se uložit ${error} fotografií`))
  });
}
</script>

<template>
  <FlightFormSteps :router-edit-mode="true" :flightId="flightId"/>

  <q-tab-panels v-model="formStep">
    <q-tab-panel name="basic">
      <FlightEditSkeleton :step="formStep" v-if="isQueryRunning || !flight"/>
      <FlightFormBasic
        v-else
        @save="handleFlightEdit"
        :flight="flight"
        :locations="pointsOfInterest"
        :airports="airports"
        :aircrafts="aircrafts"
      />
    </q-tab-panel>

    <q-tab-panel name="copilot">
      <FlightEditCopilotSkeleton v-if="isQueryRunning || !flight"/>
      <FlightFormCopilot
        v-else
        @save="handleFlightEdit"
        :flight="flight"
        :copilots="copilots"/>
    </q-tab-panel>

    <q-tab-panel name="track">
      <FlightEditSkeleton :step="formStep" v-if="isQueryRunning || !flight"/>
      <FlightFormTrack
        v-if="flight && pointsOfInterest"
        :flight="flight"
        :locations="pointsOfInterest"
        :airports="airports"
        @save="handleFlightEdit"
      />
    </q-tab-panel>

    <q-tab-panel name="photos">
      <FlightFormPhotos
        :flight="flight"
        :is-request-pending="uploadInProgress"
        @save="handlePhotosUpload"
      />

      <template v-if="flight">
        <PhotosEditorList
          :title-photo="flight.titlePhoto"
          :photos="photos"
          :show-actions="true"
          @edit="openPhotoEdit"
          @batch-edit="openBatchPhotoForm"
          @batch-rotate="batchRotatePhotos"
          @delete="deletePhoto"
          @set-title-photo="setTitlePhoto"
        />

        <!-- Dialogs for photo edit -->
        <PhotoFormDialog
          v-model="openEdit"
          :copilots="flight.copilots"
          :aircrafts="aircrafts"
          :locations="pointsOfInterest"
          :photo="editPhoto"
          @save="handlePhotoUpdate(flightId, $event)"
        />

        <BatchPhotoFormDialog
          v-model="openBatchEdit"
          :locations="pointsOfInterest"
          :photos="editBatchPhotos"
          :copilots="flight.copilots"
          :aircrafts="aircrafts"
          @save="handleBatchPhotoEdit"
          @delete="deletePhoto"
        />

      </template>
    </q-tab-panel>

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

    <q-tab-panel name="plan">
      <template v-if="flight.flightPlanId">
        {{ flightPlan.name }}
      </template>
      <template v-else>
        Bez planu
      </template>
    </q-tab-panel>
  </q-tab-panels>
</template>