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

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

export default {
  preFetch({currentRoute}) {
    useFlightsStore().fetchDetail(currentRoute.params.id);
  }
}
</script>

<script setup>
import {useRoute, useRouter} from "vue-router";
import {watch} from "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";
import {useQuasar} from "quasar";
import {confirmObject, successObject} from "src/composables/dialog";
import FlightTrackMap from "components/flights/FlightTrackMap.vue";
import {useLoggedUserStore} from "stores/LoggedUser";
import {storeToRefs} from "pinia";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import PhotoGallery from "components/photos/PhotoGallery.vue";
import ContentCard from "components/ContentCard.vue";
import ContentCardEditButton from "components/ContentCardEditButton.vue";
import {toggleVisibility} from "src/composables/form/formHandling";
import PublishButton from "components/inputs/PublishButton.vue";
import CopyLinkButton from "components/inputs/CopyLinkButton.vue";
import {TOGGLE_FLIGHT_PUBLISH} from "src/graphql/mutations/flight";

const flightId = parseInt(useRoute().params.id);
const loggedUser = storeToRefs(useLoggedUserStore()).user;

const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
watch(() => flight.value, (f) => {
  if (!f) return;
  const flightNameFormatted = flightName(f);
  useAppStore().setPageTitle(flightNameFormatted);
  useAppStore().setBreadcrumbs([
    {to: {name: "myFlights"}, label: "Moje lety"},
    {label: flightNameFormatted}
  ]);
});

const $q = useQuasar();
const $router = useRouter();
const handleDeleteAndRedirect = () => {
  $q.dialog(confirmObject("Opravdu chceš smazat tento let?"))
    .onOk(() => {
      useFlightsStore().destroy(flightId).then(() => {
        $router.push({name: "myFlights"});
        $q.notify(successObject(`Úspěšně smazáno`));
      });
    });
}

const togglePublicVisibility = (variables) => toggleVisibility({
  $q, store: useFlightsStore(), object: flight.value, mutation: TOGGLE_FLIGHT_PUBLISH, variables
});
</script>

<template>
  <FlightDetailSkeleton v-if="isQueryRunning || !flight"/>

  <ContentCard :title-photo="flight.titlePhoto" :title="flightName(flight)" v-else>
    <template #actions>
      <template v-if="loggedUser.publicUsername">
        <div class="col-grow">
          <PublishButton
            :url-prefix="`/${loggedUser.publicUsername}/`"
            :is-public="flight.isPublic"
            :require-url-slug="!flight.urlSlug"
            @change-visibility="togglePublicVisibility"
          />
          <CopyLinkButton
            :route='{
            name: "publicFlightDetail",
            params: {flightSlug: flight.urlSlug, username: loggedUser.publicUsername}
          }'
            v-if="flight.isPublic"
          />
        </div>
      </template>
      <q-btn @click="handleDeleteAndRedirect" icon="delete" flat text-color="red" label="Smazat"/>
    </template>

    <template #content>
      <q-card-section>
        <ContentCardEditButton
          :to="{name: 'flightEdit', params: {id: flightId, step: 'basic'}}"
          label="Upravit informace"
        />
        <FlightBasicInfo
          :flight="flight"
          :poi-detail-route="{name: 'poiDetail'}"
          :event-detail-route="{name: 'eventDetail', params: {id: flight.event.id}}"
          :aircraft-detail-route="{name: 'aircraftDetail'}"
          :copilot-detail-route="{name: 'copilotDetail'}"
        />

        <ContentCardEditButton
          :to="{name: 'flightEdit', params: {id: flightId, step: 'notes'}}"
          label="Upravit text"
        />
        <article class="q-my-lg" v-html="flight.description"/>
        <BasicInfoBanner v-if="flight.description === ''">Popiš, jaký byl let.</BasicInfoBanner>

        <q-separator/>

        <article class="q-my-lg" v-html="flight.debriefingNotes"/>
        <BasicInfoBanner v-if="flight.debriefingNotes === ''">
          Nezapomeň si poznamenat důležité informace pro debriefing. Tyto poznámky slouží jen pro tebe.
        </BasicInfoBanner>
        <q-separator/>

        <ContentCardEditButton
          :to="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}"
          label="Upravit fotografie"
        />
        <BasicInfoBanner
          v-if="flight.photos.length === 0"
          :route-add="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}"
        >
          U tohoto letu nemáš nahrané žádné fotografie.
        </BasicInfoBanner>
        <q-no-ssr v-else>
          <PhotoGallery :photos="flight.photos"/>
        </q-no-ssr>

        <q-separator/>

        <ContentCardEditButton
          :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}"
          label="Upravit trasu"
        />
        <BasicInfoBanner
          v-if="flight.track.length === 0 && !flight.gpxTrack"
          :route-add="{name: 'flightEdit', params: {id: flightId, step: 'track'}}"
        >
          Nemáš nastavenou žádnou trasu.
        </BasicInfoBanner>

        <q-no-ssr v-else>
          <FlightTrackMap
            :flight="flight"
            :photos="flight.photos"
          />
        </q-no-ssr>
      </q-card-section>
    </template>
  </ContentCard>
</template>