124 lines
4.6 KiB
Vue
124 lines
4.6 KiB
Vue
<script setup>
|
|
import {useRoute, useRouter} from "vue-router";
|
|
import {useMeta, useQuasar} from "quasar";
|
|
import AircraftDetailSkeleton from "components/aircrafts/skeletons/AircraftDetailSkeleton.vue";
|
|
import {confirmObject, successObject} from "src/composables/dialog";
|
|
import {useAppStore} from "stores/App";
|
|
import FlightsList from "components/flights/FlightsList.vue";
|
|
import {storeToRefs} from "pinia";
|
|
import {useAircraftsStore} from "stores/Aircrafts";
|
|
import {watch} from "vue";
|
|
import {metaData} from "src/composables/meta";
|
|
import PhotoGallery from "components/photos/PhotoGallery.vue";
|
|
import ContentCard from "components/ContentCard.vue";
|
|
import AircraftInfo from "components/aircrafts/AircraftInfo.vue";
|
|
import {useLoggedUserStore} from "stores/LoggedUser";
|
|
import {useFlightsStore} from "stores/Flights";
|
|
import {toggleVisibility} from "src/composables/form/formHandling";
|
|
import ContentCardEditButton from "components/ContentCardEditButton.vue";
|
|
import {usePagination} from "src/composables/pagination";
|
|
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
|
|
import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
|
|
import CopyLinkButton from "components/inputs/CopyLinkButton.vue";
|
|
import PublishButton from "components/inputs/PublishButton.vue";
|
|
|
|
const aircraftId = parseInt(useRoute().params.id);
|
|
|
|
useAircraftsStore().fetchDetail(aircraftId);
|
|
const {aircraft, isQueryRunning} = storeToRefs(useAircraftsStore());
|
|
watch(() => aircraft.value, (newVal) => {
|
|
if (!newVal) return;
|
|
|
|
useAppStore().setPageTitle(newVal.callSign);
|
|
useMeta(() => metaData({title: newVal.callSign}));
|
|
useAppStore().setBreadcrumbs([
|
|
{label: "Letadla", to: {name: "aircrafts"}},
|
|
{label: newVal.callSign}
|
|
])
|
|
});
|
|
|
|
const $q = useQuasar();
|
|
const $router = useRouter();
|
|
const deleteAircraft = (id) => {
|
|
$q.dialog(confirmObject('Opravdu chceš smazat toto letadlo?'))
|
|
.onOk(() => {
|
|
useAircraftsStore().destroy(id).then(() => {
|
|
$router.push({name: "aircrafts"});
|
|
$q.notify(successObject("Letadlo úspěšně odstraněno"));
|
|
});
|
|
});
|
|
};
|
|
|
|
const togglePublicVisibility = (variables) => toggleVisibility({
|
|
$q, store: useAircraftsStore(), object: aircraft.value, variables
|
|
});
|
|
|
|
const {filters, loadPage, paginationLimit} = usePagination();
|
|
filters.value = {aircraftId: aircraftId};
|
|
const loadNextFlightsPage = (appendItems) => loadPage({
|
|
fetchFunc: useFlightsStore().fetch,
|
|
appendItems
|
|
});
|
|
const {isQueryRunning: areFlightsLoading, totalItemsCount, flights} = storeToRefs(useFlightsStore());
|
|
loadNextFlightsPage(false);
|
|
|
|
const loggedUser = storeToRefs(useLoggedUserStore()).user;
|
|
</script>
|
|
|
|
<template>
|
|
<AircraftDetailSkeleton v-if="isQueryRunning || !aircraft"/>
|
|
|
|
<template v-else>
|
|
<ContentCard :title-photo="aircraft.titlePhoto" :title="aircraft.callSign">
|
|
<template #actions v-if="aircraft.createdById === loggedUser?.id">
|
|
<div class="col-grow">
|
|
<PublishButton
|
|
url-prefix="/letadla"
|
|
:is-public="aircraft.isPublic"
|
|
:require-url-slug="false"
|
|
@change-visibility="togglePublicVisibility"
|
|
/>
|
|
<CopyLinkButton
|
|
v-if="aircraft.isPublic"
|
|
:route="{name: 'publicAircraftDetail', params: {callsign: aircraft.callSign}}"
|
|
/>
|
|
</div>
|
|
<q-btn @click="deleteAircraft(aircraft.id)" icon="delete" flat text-color="red" label="Smazat"/>
|
|
</template>
|
|
<template #content>
|
|
<q-card-section>
|
|
|
|
<ContentCardEditButton
|
|
v-if="aircraft.createdById === loggedUser?.id"
|
|
:to='{name: "aircraftEdit", params: {id: aircraft.id, step: "info"}}'
|
|
label="Upravit informace"
|
|
/>
|
|
<AircraftInfo :aircraft="aircraft"/>
|
|
|
|
<ContentCardEditButton
|
|
v-if="aircraft.createdById === loggedUser?.id"
|
|
:to='{name: "aircraftEdit", params: {id: aircraft.id, step: "photo"}}'
|
|
label="Titulní fotografie"
|
|
/>
|
|
<PhotoGallery :photos="aircraft.photos"/>
|
|
|
|
<h3>Lety</h3>
|
|
<FlightsListSkeleton v-if="areFlightsLoading && flights.length === 0"/>
|
|
<BasicInfoBanner v-if="flights.length === 0">
|
|
Zatím žádné lety.
|
|
</BasicInfoBanner>
|
|
<FlightsList
|
|
v-else-if="flights.length > 0"
|
|
:public="false"
|
|
:items="flights"
|
|
:total-items-count="totalItemsCount"
|
|
:is-query-running="areFlightsLoading"
|
|
:items-per-page="paginationLimit"
|
|
@load-more="loadNextFlightsPage(true)"
|
|
/>
|
|
</q-card-section>
|
|
</template>
|
|
</ContentCard>
|
|
</template>
|
|
</template>
|