Prepracovane zobrazeni seznamu fotke

src/pages/profile/flight/FlightDetailPage.vue

@@ -12,6 +12,10 @@ import PhotoCarousel from "components/photos/PhotoCarousel.vue";
 import FlightTrackMap from "components/flights/FlightTrackMap.vue";
 import {useUserStore} from "stores/User";
 import {storeToRefs} from "pinia";
+import PhotosList from "components/photos/PhotosList.vue";
+import {openDetail, openPhotoDetail, openPhotoFromList, photoData} from "src/composables/photos/photo";
+import PhotoDetail from "components/photos/PhotoDetail.vue";
+import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 
 const $q = useQuasar();
 const $router = useRouter();
@@ -44,11 +48,11 @@ const handleDeleteAndRedirect = () => {
 const togglePublicVisibility = () => {
   const newVisibility = !flight.value.isPublic;
   useFlightsStore()
-    .update(flightId, {isPublic: newVisibility})
-    .then((updatedFlight) => {
-      flight.value = updatedFlight;
-      $q.notify(successObject(newVisibility ? "Úspěšně publikováno" : "Úspěšně skryto"));
-    });
+      .update(flightId, {isPublic: newVisibility})
+      .then((updatedFlight) => {
+        flight.value = updatedFlight;
+        $q.notify(successObject(newVisibility ? "Úspěšně publikováno" : "Úspěšně skryto"));
+      });
 };
 
 const copyLinkToClipboard = () => {
@@ -69,46 +73,94 @@ const copyLinkToClipboard = () => {
 
   <q-card class="flight-detail-card" v-else>
     <PhotoCarousel
-      :cover-photo-url="flight.coverPhoto?.url"
-      :carousel-title="flightName(flight)"
-      :photos="flight.photos"
+        :cover-photo-url="flight.coverPhoto?.url"
+        :carousel-title="flightName(flight)"
+        :photos="flight.photos"
+        @open-detail="openDetail"
     />
 
     <q-card-actions class="q-my-md">
       <div class="col-grow">
         <q-btn
-          flat
-          :to="{name: 'flightEdit', params:{id: flight.id}}"
-          icon="edit"
-          text-color="primary"
-          label="Upravit"
+            flat
+            :to="{name: 'flightEdit', params:{id: flight.id}}"
+            icon="edit"
+            text-color="primary"
+            label="Upravit"
         />
 
         <q-btn
-          @click="togglePublicVisibility"
-          :icon="flight.isPublic ? 'visibility_off' : 'visibility'"
-          :disable="!loggedUser.publicUsername"
-          flat
-          :label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
+            @click="togglePublicVisibility"
+            :icon="flight.isPublic ? 'visibility_off' : 'visibility'"
+            :disable="!loggedUser.publicUsername"
+            flat
+            :label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
         />
 
         <q-btn
-          icon="link"
-          @click="copyLinkToClipboard()"
-          flat
-          v-if="flight.isPublic"
-          label="Získat odkaz"
+            icon="link"
+            @click="copyLinkToClipboard()"
+            flat
+            v-if="flight.isPublic"
+            label="Získat odkaz"
         />
       </div>
       <q-btn @click="handleDeleteAndRedirect" icon="delete" flat text-color="red" label="Smazat"/>
     </q-card-actions>
 
     <q-card-section>
+      <div class="text-right">
+        <q-btn class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'basic'}}" icon="edit" color="primary">Upravit informace</q-btn>
+      </div>
       <FlightBasicInfo :flight="flight" :show-copilots="true"/>
 
+      <div class="text-right">
+        <q-btn class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'notes'}}" icon="edit" color="primary">Upravit text</q-btn>
+      </div>
       <article class="q-my-lg" v-html="flight.description"/>
 
-      <FlightTrackMap :flight="flight"/>
+      <q-separator />
+
+      <div class="text-right">
+        <q-btn class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}" icon="edit" color="primary">Upravit fotky</q-btn>
+      </div>
+      <BasicInfoBanner
+          v-if="flight.photos.length === 0"
+          :route-add="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}"
+      >
+        U tohoto letu nemáš nahrané žádné fotografie.
+      </BasicInfoBanner>
+      <PhotosList
+          v-else
+          :photos="flight.photos"
+          :show-actions="false"
+          @photo-click="openPhotoFromList"
+      />
+
+      <q-separator />
+
+      <div class="text-right">
+        <q-btn class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}" icon="edit" color="primary">Upravit trasu</q-btn>
+      </div>
+      <BasicInfoBanner
+          v-if="flight.track.length === 0 && !flight.gpxTrack"
+          :route-add="{name: 'flightEdit', params: {id: flightId, step: 'track'}}"
+      >
+        Nemáš nastavenou žádnou trasu.
+      </BasicInfoBanner>
+      <FlightTrackMap
+          v-else
+          :flight="flight"
+      />
     </q-card-section>
   </q-card>
+
+  <PhotoDetail
+      v-if="photoData"
+      v-model="openPhotoDetail"
+      :default-title="flightName(flight)"
+      :photo="photoData.photo"
+      :photos="photoData.allPhotos"
+      :opened-index="photoData.idx"
+  />
 </template>