82 lines
3.0 KiB
Vue
82 lines
3.0 KiB
Vue
<script setup>
|
|
import POIEditSkeleton from "components/poi/skeletons/POIEditSkeleton.vue";
|
|
import {computed, onMounted} from "vue";
|
|
import {useRoute, useRouter} from "vue-router";
|
|
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
|
|
import {useAppStore} from "stores/App";
|
|
import {useQuasar} from "quasar";
|
|
import {successObject} from "src/composables/dialog";
|
|
import {usePointsOfInterestTypeStore} from "stores/PointOfInterestType";
|
|
import {storeToRefs} from "pinia";
|
|
import POIForm from "components/poi/POIForm.vue";
|
|
import {useUserStore} from "stores/User";
|
|
import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
|
|
import PhotoEditorSkeleton from "components/photos/skeletons/PhotoEditorSkeleton.vue";
|
|
import PhotosEditorList from "components/photos/PhotosEditorList.vue";
|
|
import CommonEditSwitcher from "components/navigation/CommonEditSwitcher.vue";
|
|
import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
|
|
|
|
const poiId = parseInt(useRoute().params.id);
|
|
|
|
usePointsOfInterestStore().fetchDetail(poiId).then((p) => {
|
|
if (!p) return;
|
|
|
|
useAppStore().setPageTitle(`${p.name} - editace`);
|
|
useAppStore().setBreadcrumbs([
|
|
{to: {name: "poi"}, label: "Zajímavá místa"},
|
|
{to: {name: "poiDetail", params: {id: poiId}}, label: p.name},
|
|
{label: "Editace"},
|
|
]);
|
|
});
|
|
|
|
usePointsOfInterestTypeStore().fetch();
|
|
|
|
const poiTypes = storeToRefs(usePointsOfInterestTypeStore()).types;
|
|
const loggedUser = storeToRefs(useUserStore()).user;
|
|
const {isQueryRunning, pointOfInterest, isMutationRunning} = storeToRefs(usePointsOfInterestStore());
|
|
|
|
const $q = useQuasar();
|
|
const router = useRouter();
|
|
const handleSave = (data) => {
|
|
usePointsOfInterestStore().update(poiId, data).then(respData => {
|
|
$q.notify(successObject("Úspěšně uloženo"));
|
|
router.push({name: "poiDetail", params: {id: poiId}});
|
|
});
|
|
}
|
|
|
|
const setTitlePhoto = (titlePhoto) => {
|
|
usePointsOfInterestStore().update(poiId, {titlePhotoId: titlePhoto.id}).then(() => {
|
|
$q.notify(successObject("Úvodní fotka nastavena"));
|
|
})
|
|
}
|
|
|
|
const formStep = computed(() => useRoute().params.step || "info");
|
|
</script>
|
|
|
|
<template>
|
|
<AccessDeniedBanner
|
|
v-if="pointOfInterest && !isQueryRunning && pointOfInterest.createdById !== loggedUser?.id"
|
|
:route-back="{name: 'poiDetail', params: {id: poiId}}"
|
|
/>
|
|
|
|
<template v-else>
|
|
<CommonEditSwitcher :route="{name: 'poiEdit', params: {id: pointOfInterest?.id}}"/>
|
|
|
|
<template v-if="formStep === 'info'">
|
|
<POIEditSkeleton v-if="isQueryRunning || !pointOfInterest"/>
|
|
<POIForm :poi="pointOfInterest" :types="poiTypes" v-else @save="handleSave"/>
|
|
</template>
|
|
|
|
<template v-else-if="formStep === 'photo'">
|
|
<PhotoGallerySkeleton v-if="isQueryRunning || !pointOfInterest"/>
|
|
<PhotosEditorList
|
|
v-else
|
|
:photos="pointOfInterest.photos"
|
|
:title-photo="pointOfInterest.titlePhoto"
|
|
:show-actions="false"
|
|
@set-title-photo="setTitlePhoto"
|
|
/>
|
|
</template>
|
|
</template>
|
|
</template>
|