Lepsi verejna cast, ssr, lepsi prace s fotkamaa

src/pages/profile/poi/EditPointOfInterestPage.vue

@@ -1,6 +1,6 @@
 <script setup>
 import POIEditSkeleton from "components/poi/POIEditSkeleton.vue";
-import {onMounted} from "vue";
+import {computed, onMounted} from "vue";
 import {useRoute, useRouter} from "vue-router";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 import {useAppStore} from "stores/App";
@@ -11,6 +11,8 @@ 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/PhotoEditorSkeleton.vue";
+import PhotosEditorList from "components/photos/PhotosEditorList.vue";
 
 const poiId = parseInt(useRoute().params.id);
 
@@ -27,7 +29,7 @@ onMounted(() => {
   usePointsOfInterestTypeStore().fetch();
 })
 
-const poiTypes = storeToRefs(usePointsOfInterestTypeStore()).items;
+const poiTypes = storeToRefs(usePointsOfInterestTypeStore()).types;
 const loggedUser = storeToRefs(useUserStore()).user;
 const {isQueryRunning, pointOfInterest, isMutationRunning} = storeToRefs(usePointsOfInterestStore());
 
@@ -39,13 +41,54 @@ const handleSave = (data) => {
     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 || "basic");
 </script>
 
 <template>
-  <POIEditSkeleton v-if="isQueryRunning"/>
+
   <AccessDeniedBanner
-    v-else-if="pointOfInterest.createdById !== loggedUser.id"
+    v-if="pointOfInterest && !isQueryRunning && pointOfInterest.createdById !== loggedUser?.id"
     :route-back="{name: 'poiDetail', params: {id: poiId}}"
   />
-  <POIForm :poi="pointOfInterest" :types="poiTypes" v-else @save="handleSave"/>
+
+  <q-tabs active-color="primary" class="q-mb-lg">
+    <q-route-tab
+      icon="edit"
+      label="Informace"
+      replace
+      :to="{name: 'poiEdit', params: {id: pointOfInterest?.id, step: 'basic'}}"
+      exact
+    />
+    <q-route-tab
+      icon="add_a_photo"
+      label="Fotky"
+      replace
+      :to="{name: 'poiEdit', params: {id: pointOfInterest?.id, step: 'photo'}}"
+      exact
+    />
+  </q-tabs>
+
+  <template v-if="formStep === 'basic'">
+    <POIEditSkeleton v-if="isQueryRunning || !pointOfInterest"/>
+    <POIForm :poi="pointOfInterest" :types="poiTypes" v-else @save="handleSave"/>
+  </template>
+  <template v-else-if="formStep === 'photo'">
+
+    <q-spinner v-if="isQueryRunning || !pointOfInterest"/>
+
+    <PhotosEditorList
+      v-else
+      :photos="pointOfInterest.photos"
+      :title-photo="pointOfInterest.titlePhoto"
+      :show-actions="false"
+      @set-title-photo="setTitlePhoto"
+    />
+  </template>
 </template>

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>