86 lines
2.8 KiB
Vue
86 lines
2.8 KiB
Vue
<script>
|
|
import {useCopilotsStore} from "stores/Copilots";
|
|
|
|
export default {
|
|
preFetch({currentRoute}) {
|
|
return useCopilotsStore().fetchPublicDetail(currentRoute.params.copilotSlug, currentRoute.params.username);
|
|
}
|
|
}
|
|
</script>
|
|
<script setup>
|
|
import FlightsList from "components/flights/FlightsList.vue";
|
|
import {useAppStore} from "stores/App";
|
|
import {storeToRefs} from "pinia";
|
|
import {onMounted} from "vue";
|
|
import {useFlightsStore} from "stores/Flights";
|
|
import {usePhotosStore} from "stores/Photos";
|
|
import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
|
|
import ContentCard from "components/ContentCard.vue";
|
|
import PhotoGallery from "components/photos/PhotoGallery.vue";
|
|
import {useMeta} from "quasar";
|
|
import {metaData} from "src/composables/meta";
|
|
import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
|
|
import {loadPage, paginationLimit} from "src/composables/pagination";
|
|
|
|
const props = defineProps({
|
|
pilot: {
|
|
type: Object,
|
|
required: false
|
|
},
|
|
})
|
|
|
|
const {copilot, isQueryRunning} = storeToRefs(useCopilotsStore());
|
|
const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
|
|
const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
|
|
|
|
useAppStore().setPageTitle(`${props.pilot.name} + ${copilot.value.name}`);
|
|
useAppStore().setBreadcrumbs([
|
|
{to: {name: 'homepage'}, label: "Polétání.cz"},
|
|
{to: {name: "publicProfileDetail", params: {username: props.pilot.publicUsername}}, label: `@${props.pilot.publicUsername}`},
|
|
{label: copilot.value.name}
|
|
]);
|
|
|
|
useMeta(() => metaData({
|
|
title: copilot.value.name,
|
|
keywords: ["kopilot", "výlet", "fotogalerie", copilot.value.name, "létání", "fotografie"],
|
|
description: `Společné polétání: ${props.pilot.name} + ${copilot.value.name}.`,
|
|
image: copilot.value.titleImage?.url
|
|
}));
|
|
|
|
|
|
const loadNextFlightsPage = (appendItems) => loadPage({
|
|
fetchFunc: useFlightsStore().fetchPublic,
|
|
filters: {copilotId: copilot.value.id},
|
|
appendItems
|
|
});
|
|
|
|
onMounted(() => {
|
|
loadNextFlightsPage(false);
|
|
|
|
usePhotosStore().fetchPublic({copilotId: copilot.value.id})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<ContentCard v-if="!isQueryRunning" :title-photo="copilot.titlePhoto" :title="copilot.name">
|
|
<template #content>
|
|
<q-card-section>
|
|
<PhotoGallerySkeleton v-if="arePhotosLoading"/>
|
|
<PhotoGallery :photos="photos" v-else/>
|
|
|
|
<h3>Společné lety</h3>
|
|
<FlightsListSkeleton 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)"
|
|
/>
|
|
</q-card-section>
|
|
</template>
|
|
</ContentCard>
|
|
</template>
|