Lepsi verejna cast, ssr, lepsi prace s fotkamaa

src/pages/profile/poi/PointOfInterestDetailPage.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {onMounted} from "vue";
+import {computed, onMounted} from "vue";
 import {useRoute} from "vue-router";
 import POIDetailSkeleton from "components/poi/POIDetailSkeleton.vue";
 import FAB from "components/FAB.vue";
@@ -11,6 +11,8 @@ 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";
 
 const loggedUser = storeToRefs(useUserStore()).user;
 
@@ -25,36 +27,61 @@ onMounted(() => {
 });
 
 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];
+});
 </script>
 
 <template>
   <POIDetailSkeleton v-if="isQueryRunning || !pointOfInterest"/>
 
   <template v-else>
-    <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"
-    />
-    <BasicInfoBanner v-else>
-      Tento bod nemá nastavenou polohu. Po nastavení polohy tu bude zobrazena mapa.
-    </BasicInfoBanner>
+    <ContentCard :title-photo="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"
+          />
+        </div>
+      </template>
 
-    <PhotoGallery
-      :photos="pointOfInterest.photos"
-      v-if="pointOfInterest.photos.length > 0"
-    />
+      <template #content>
+        <q-card-section>
+          <article v-html="pointOfInterest.description" class="q-my-lg"/>
 
-    <BasicInfoBanner v-else>
-      Pokud přidáš toto místo k nějaké fotce, zobrazí se tu.
-    </BasicInfoBanner>
+          <EmbeddedMap
+            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>
 
-    <FlightsList :items="pointOfInterest.flights" v-if="pointOfInterest.flights.length > 0 && loggedUser.id === pointOfInterest.createdById"/>
+          <PhotoGallery
+            :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>
 
-    <FAB v-if="pointOfInterest.createdById === loggedUser.id" :router-link="{name: 'poiEdit', params:{id: pointOfInterest.id}}" mode="edit"/>
+          <FlightsList
+            :items="pointOfInterest.flights"
+            :public="false"
+            v-if="pointOfInterest.flights.length > 0 && loggedUser.id === pointOfInterest.createdById"
+          />
+        </q-card-section>
+      </template>
+    </ContentCard>
   </template>
-
 </template>