94 lines
2.9 KiB
Vue
94 lines
2.9 KiB
Vue
<script>
|
|
import {useEventsStore} from "stores/Events";
|
|
|
|
export default {
|
|
preFetch({currentRoute}) {
|
|
return useEventsStore().fetchPublicDetail(currentRoute.params.eventSlug, currentRoute.params.username);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script setup>
|
|
import {useAppStore} from "stores/App";
|
|
import EventDetailSkeleton from "components/event/skeletons/EventDetailSkeleton.vue";
|
|
import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
|
|
import FlightsList from "components/flights/FlightsList.vue";
|
|
import {storeToRefs} from "pinia";
|
|
import {filters, loadPage, paginationLimit} from "src/composables/pagination";
|
|
import {useFlightsStore} from "stores/Flights";
|
|
import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
|
|
import {useMeta} from "quasar";
|
|
import {metaData} from "src/composables/meta";
|
|
|
|
const props = defineProps({
|
|
pilot: {
|
|
type: Object,
|
|
required: false
|
|
},
|
|
})
|
|
|
|
const {isQueryRunning, event} = storeToRefs(useEventsStore());
|
|
|
|
useAppStore().setPageTitle(event.value.name);
|
|
useAppStore().setBreadcrumbs([
|
|
{to: {name: 'homepage'}, label: "Polétání.cz"},
|
|
{to: {name: "publicProfileDetail", params: {username: props.pilot.publicUsername}}, label: `@${props.pilot.publicUsername}`},
|
|
{to: {name: "publicEventsList", params: {username: props.pilot.publicUsername}}, label: "Události"},
|
|
{label: event.value.name}
|
|
]);
|
|
useMeta(() => metaData({
|
|
title: event.value.name,
|
|
description: event.value.description
|
|
}))
|
|
|
|
filters.value = {username: props.pilot.publicUsername, eventId: event.value.id};
|
|
const loadNextFlightsPage = (appendItems) => loadPage({
|
|
fetchFunc: useFlightsStore().fetchPublic, appendItems
|
|
});
|
|
loadNextFlightsPage(false);
|
|
|
|
const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<FlightsListSkeleton :items="paginationLimit" v-if="areFlightsLoading && flights?.length === 0"/>
|
|
|
|
<FlightsList
|
|
v-else
|
|
:items="flights"
|
|
:total-items-count="totalItemsCount"
|
|
:is-query-running="areFlightsLoading"
|
|
:items-per-page="paginationLimit"
|
|
:public="true"
|
|
@load-more="loadNextFlightsPage(true)"
|
|
/>
|
|
|
|
</template>
|
|
</div>
|
|
</template>
|