Bugfixing, dotazeni uprav s uvodni fotkou

src/pages/profile/poi/PointOfInterestDetailPage.vue

@@ -1,8 +1,6 @@
 <script setup>
-import {computed, onMounted} from "vue";
 import {useRoute} from "vue-router";
 import POIDetailSkeleton from "components/poi/POIDetailSkeleton.vue";
-import FAB from "components/FAB.vue";
 import {useAppStore} from "stores/App";
 import EmbeddedMap from "components/map/EmbeddedMap.vue";
 import {useUserStore} from "stores/User";
@@ -11,28 +9,40 @@ import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import FlightsList from "components/flights/FlightsList.vue";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
-import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
 import ContentCard from "components/ContentCard.vue";
+import {toggleVisibility} from "src/composables/form/formHandling";
+import {copyToClipboard, useQuasar} from "quasar";
+import {successObject} from "src/composables/dialog";
+import ContentCardEditButton from "components/ContentCardEditButton.vue";
 
 const loggedUser = storeToRefs(useUserStore()).user;
 
-onMounted(() => {
-  usePointsOfInterestStore().fetchDetail(useRoute().params.id).then((p) => {
-    useAppStore().setPageTitle(`${p.name}`);
-    useAppStore().setBreadcrumbs([
-      {to: {name: "poi"}, label: "Zajímavá místa"},
-      {label: p.name},
-    ])
-  });
+usePointsOfInterestStore().fetchDetail(useRoute().params.id).then((p) => {
+  useAppStore().setPageTitle(`${p.name}`);
+  useAppStore().setBreadcrumbs([
+    {to: {name: "poi"}, label: "Zajímavá místa"},
+    {label: p.name},
+  ])
 });
 
 const {isQueryRunning, pointOfInterest} = storeToRefs(usePointsOfInterestStore());
 
-const titlePhoto = computed(() => {
-  if (!pointOfInterest.value || pointOfInterest.value.photos.length === 0) return null;
-
-  return pointOfInterest.value.titlePhoto || pointOfInterest.value.photos[0];
+const $q = useQuasar();
+const togglePublicVisibility = () => toggleVisibility({
+  $q,
+  store: usePointsOfInterestStore(),
+  object: pointOfInterest.value
 });
+
+const copyLinkToClipboard = () => {
+  const url = $router.resolve({
+    name: "publicPOIDetail",
+    params: {id: pointOfInterest.value.id}
+  });
+  copyToClipboard(window.location.origin + url.href).then(() => {
+    $q.notify(successObject("Odkaz zkopírován"))
+  });
+};
 </script>
 
 <template>
@@ -40,45 +50,63 @@ const titlePhoto = computed(() => {
 
   <template v-else>
 
-    <ContentCard :title-photo="titlePhoto" :title="pointOfInterest.name">
+    <ContentCard :title-photo="pointOfInterest.titlePhoto" :title="pointOfInterest.name">
       <template #actions v-if="pointOfInterest.createdById === loggedUser.id">
         <div class="col-grow">
           <q-btn
-            flat
-            :to="{name: 'poiEdit', params:{id: pointOfInterest.id}}"
-            icon="edit"
-            text-color="primary"
-            label="Upravit"
+              @click="togglePublicVisibility"
+              :icon="pointOfInterest.isPublic ? 'visibility_off' : 'visibility'"
+              flat
+              :label="pointOfInterest.isPublic ? 'Skrýt' : 'Zveřejnit'"
+          />
+          <q-btn
+              icon="link"
+              @click="copyLinkToClipboard()"
+              flat
+              v-if="pointOfInterest.isPublic"
+              label="Získat odkaz"
           />
         </div>
       </template>
 
       <template #content>
         <q-card-section>
+
+          <ContentCardEditButton
+              :to="{name: 'poiEdit', params:{id: pointOfInterest.id, step: 'info'}}"
+              label="Upravit informace"
+          />
           <article v-html="pointOfInterest.description" class="q-my-lg"/>
 
           <EmbeddedMap
-            v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
-            :gps-latitude="pointOfInterest.gpsLatitude"
-            :gps-longitude="pointOfInterest.gpsLongitude"
-            :zoom="13"
+              v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
+              :gps-latitude="pointOfInterest.gpsLatitude"
+              :gps-longitude="pointOfInterest.gpsLongitude"
+              :zoom="13"
           />
           <BasicInfoBanner v-else>
             Tento bod nemá nastavenou polohu. Po nastavení polohy tu bude zobrazena mapa.
           </BasicInfoBanner>
 
+          <ContentCardEditButton
+              :to="{name: 'poiEdit', params:{id: pointOfInterest.id, step: 'photo'}}"
+              label="Úvodní fotografie"
+          />
           <PhotoGallery
-            :photos="pointOfInterest.photos"
-            v-if="pointOfInterest.photos.length > 0"
+              :photos="pointOfInterest.photos"
+              v-if="pointOfInterest.photos.length > 0"
           />
           <BasicInfoBanner v-else>
             Pokud přidáš toto místo k nějaké fotce, zobrazí se tu.
           </BasicInfoBanner>
 
+
+          <h3>Tvoje lety do místa {{ pointOfInterest.name }}</h3>
+
           <FlightsList
-            :items="pointOfInterest.flights"
-            :public="false"
-            v-if="pointOfInterest.flights.length > 0 && loggedUser.id === pointOfInterest.createdById"
+              :items="pointOfInterest.flights"
+              :public="false"
+              v-if="pointOfInterest.flights.length > 0 && loggedUser.id === pointOfInterest.createdById"
           />
         </q-card-section>
       </template>