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>