Prepracovane zobrazeni seznamu fotke

src/pages/public/pilotProfile/FlightDetailPage.vue

@@ -10,6 +10,9 @@ import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
 import {fetchUser, loading as pilotLoading, user as pilot} from "src/composables/objects/user";
 import PublicProfileSkeleton from "components/profile/PublicProfileSkeleton.vue";
 import PilotProfileCard from "components/profile/PilotProfileCard.vue";
+import PhotosList from "components/photos/PhotosList.vue";
+import PhotoDetail from "components/photos/PhotoDetail.vue";
+import {openDetail, openPhotoDetail, openPhotoFromList, photoData} from "src/composables/photos/photo";
 
 const routeParams = useRoute().params;
 onMounted(() => {
@@ -26,7 +29,6 @@ watch(flight, (newVal) => {
     {label: flightNameFormatted}
   ]);
 });
-
 </script>
 
 <template>
@@ -40,18 +42,30 @@ watch(flight, (newVal) => {
 
       <q-card class="q-mx-md q-my-md flight-detail-card">
         <PhotoCarousel
-            :default-title="flightName(flight)"
+          :default-title="flightName(flight)"
           :cover-photo-url="flight.coverPhoto?.url"
           :photos="flight.photos"
+          @open-detail="openDetail"
         />
         <q-card-section>
           <FlightBasicInfo :flight="flight" :show-copilots="false"/>
 
           <article class="q-my-lg" v-html="flight.description"/>
 
+          <PhotosList :photos="flight.photos" :show-actions="false" @photo-click="openPhotoFromList"/>
+
           <FlightTrackMap :flight="flight"/>
         </q-card-section>
       </q-card>
-      </template>
+
+      <PhotoDetail
+        v-if="photoData"
+        v-model="openPhotoDetail"
+        :default-title="flightName(flight)"
+        :photo="photoData.photo"
+        :photos="photoData.allPhotos"
+        :opened-index="photoData.idx"
+      />
+    </template>
   </div>
 </template>