98 lines
3.2 KiB
Vue
98 lines
3.2 KiB
Vue
<script setup>
|
|
import {useRoute} from "vue-router";
|
|
import {onMounted} from "vue";
|
|
import EventDetailSkeleton from "components/event/skeletons/EventDetailSkeleton.vue";
|
|
import {useAppStore} from "stores/App";
|
|
import FAB from "components/FAB.vue";
|
|
import FlightsList from "components/flights/FlightsList.vue";
|
|
import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
|
|
import {useEventsStore} from "stores/Events";
|
|
import {storeToRefs} from "pinia";
|
|
import {filters, loadPage, paginationLimit} from "src/composables/pagination";
|
|
import {useFlightsStore} from "stores/Flights";
|
|
import PublishButton from "components/inputs/PublishButton.vue";
|
|
import {useLoggedUserStore} from "stores/LoggedUser";
|
|
import {toggleVisibility} from "src/composables/form/formHandling";
|
|
import {TOGGLE_FLIGHT_PUBLISH} from "src/graphql/mutations/flight";
|
|
import {useQuasar} from "quasar";
|
|
import CopyLinkButton from "components/inputs/CopyLinkButton.vue";
|
|
|
|
const eventId = parseInt(useRoute().params.id);
|
|
onMounted(() => {
|
|
useEventsStore().fetchDetail(eventId).then(() => {
|
|
useAppStore().setPageTitle(event.value.name);
|
|
useAppStore().setBreadcrumbs([
|
|
{to: {name: "events"}, label: "Události"},
|
|
{label: event.value.name}
|
|
])
|
|
});
|
|
loadNextFlightsPage(false);
|
|
})
|
|
|
|
|
|
const $q = useQuasar();
|
|
const togglePublicVisibility = (variables) => toggleVisibility({
|
|
$q, store: useEventsStore(), object: event.value, variables
|
|
});
|
|
|
|
|
|
const {isQueryRunning, event} = storeToRefs(useEventsStore());
|
|
|
|
filters.value = {eventId: eventId}
|
|
const loadNextFlightsPage = (appendItems) => loadPage({
|
|
fetchFunc: useFlightsStore().fetch, appendItems
|
|
});
|
|
|
|
const {isQueryRunning: areFlightsLoading, totalItemsCount, flights} = storeToRefs(useFlightsStore());
|
|
const loggedUser = storeToRefs(useLoggedUserStore()).user;
|
|
</script>
|
|
|
|
<template>
|
|
<EventDetailSkeleton v-if="isQueryRunning || !event"/>
|
|
|
|
<template v-else>
|
|
<q-list bordered separator class="q-my-lg" v-if="event.dateFrom && event.dateTo">
|
|
<q-item>
|
|
<q-item-section>
|
|
Od: {{ formatDatetime(event.dateFrom, FORMAT_DATE) }}
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item>
|
|
<q-item-section>
|
|
Do: {{ formatDatetime(event.dateTo, FORMAT_DATE) }}
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
|
|
<PublishButton
|
|
:url-prefix="`${loggedUser.publicUsername}/udalosti/`"
|
|
:is-public="event.isPublic"
|
|
:require-url-slug="event.urlSlug === ''"
|
|
@change-visibility="togglePublicVisibility"
|
|
/>
|
|
<CopyLinkButton
|
|
:route="{name: 'publicEventDetail', params: {username: loggedUser.publicUsername, eventSlug: event.urlSlug}}"
|
|
/>
|
|
|
|
<article v-html="event.description"/>
|
|
|
|
<h3>Lety</h3>
|
|
|
|
<q-banner v-if="event.flights.length === 0" class="bg-light-blue text-white">
|
|
Zatím tu nemáš uložené žádné lety.
|
|
</q-banner>
|
|
|
|
<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)"
|
|
/>
|
|
<FAB mode="edit" :router-link="{name: 'eventEdit', params: {id: eventId}}"/>
|
|
</template>
|
|
</template>
|