110 lines
3.7 KiB
Vue
110 lines
3.7 KiB
Vue
<script>
|
|
import {useCopilotsStore} from "stores/Copilots";
|
|
|
|
export default {
|
|
preFetch({currentRoute}) {
|
|
return useCopilotsStore().fetchDetail(currentRoute.params.id);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script setup>
|
|
import {useRoute} from "vue-router";
|
|
import CopilotDetailSkeleton from "components/copilots/skeletons/CopilotDetailSkeleton.vue";
|
|
import {useAppStore} from "stores/App";
|
|
import FlightsList from "components/flights/FlightsList.vue";
|
|
import {storeToRefs} from "pinia";
|
|
import PhotoGallery from "components/photos/PhotoGallery.vue";
|
|
import ContentCard from "components/ContentCard.vue";
|
|
import {usePagination} from "src/composables/pagination";
|
|
import {useFlightsStore} from "stores/Flights";
|
|
import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
|
|
import {useQuasar} from "quasar";
|
|
import {useLoggedUserStore} from "stores/LoggedUser";
|
|
import PublishButton from "components/inputs/PublishButton.vue";
|
|
import CopyLinkButton from "components/inputs/CopyLinkButton.vue";
|
|
import {toggleVisibility} from "src/composables/form/formHandling";
|
|
import {onMounted} from "vue";
|
|
|
|
const {isQueryRunning, copilot} = storeToRefs(useCopilotsStore());
|
|
|
|
const copilotId = parseInt(useRoute().params.id);
|
|
useAppStore().setPageTitle(copilot.value.name);
|
|
useAppStore().setBreadcrumbs([
|
|
{to: {name: "copilots"}, label: "Kopiloti"},
|
|
{label: copilot.value.name}
|
|
])
|
|
|
|
const $q = useQuasar();
|
|
const togglePublicVisibility = (variables) => toggleVisibility({
|
|
$q, store: useCopilotsStore(), object: copilot.value, variables
|
|
});
|
|
|
|
const {filters, loadPage, paginationLimit} = usePagination({fetchFunction: useFlightsStore().fetch});
|
|
filters.value = {copilotId: copilotId};
|
|
onMounted(() => {
|
|
loadPage(false);
|
|
});
|
|
|
|
const {isQueryRunning: areFlightsLoading, totalItemsCount, flights} = storeToRefs(useFlightsStore());
|
|
const loggedUser = storeToRefs(useLoggedUserStore()).user;
|
|
</script>
|
|
|
|
<template>
|
|
<CopilotDetailSkeleton v-if="isQueryRunning || !copilot"/>
|
|
|
|
<ContentCard :title-photo="copilot.titlePhoto" :title="copilot.name" v-else>
|
|
<template #actions>
|
|
<div class="col-grow">
|
|
<q-btn
|
|
flat
|
|
:to="{name: 'copilotEdit', params: {id: copilotId}}"
|
|
icon="edit"
|
|
text-color="primary"
|
|
label="Upravit"
|
|
/>
|
|
|
|
<PublishButton
|
|
:url-prefix="`/${loggedUser?.publicUsername}/a/`"
|
|
:is-public="copilot.isPublic"
|
|
:require-url-slug="copilot.urlSlug === ''"
|
|
@change-visibility="togglePublicVisibility"
|
|
/>
|
|
<CopyLinkButton
|
|
v-if="copilot.isPublic"
|
|
:route="{
|
|
name: 'publicCopilotDetail', params: {
|
|
username: loggedUser.publicUsername,
|
|
copilotSlug: copilot.urlSlug
|
|
}}"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<template #content>
|
|
<q-card-section>
|
|
<PhotoGallery :photos="copilot.photos" v-if="copilot.photos.length > 0"/>
|
|
<q-banner v-else class="bg-light-blue text-white">
|
|
Zatím tu nemáš žádné společné fotky. Po nahrání fotky můžeš označit tuto osobu a takto označené
|
|
fotografie se zobrazí v galerii.
|
|
</q-banner>
|
|
|
|
<h3>Společné lety</h3>
|
|
|
|
<FlightsListSkeleton v-if="areFlightsLoading && !flights.length"/>
|
|
<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="loadPage(true)"
|
|
/>
|
|
<q-banner v-if="flights.length === 0" class="bg-light-blue text-white">
|
|
Zatím tu nemáš uložené žádné společné lety.
|
|
</q-banner>
|
|
</q-card-section>
|
|
</template>
|
|
</ContentCard>
|
|
</template>
|