Fix vypisu spolecnych letu s kopilotem, uprava zobrazeni photo carouselu

src/components/photos/PhotoCarousel.vue

@@ -11,6 +11,10 @@ const props = defineProps({
     type: String,
     required: false
   },
+  carouselTitle: {
+    type: String,
+    required: false
+  },
   defaultTitle: {
     type: String,
     required: false
@@ -43,7 +47,21 @@ watch(() => props.photos, (newVal) => {
     v-bind="$attrs"
   >
     <q-carousel-slide style="padding: 0" v-for="(photo, idx) in photos" :key="photo.url" :name="photo.url">
-      <q-img :src="photo.url" @click="openDetail({photo, idx, allPhotos: photos})"/>
+      <q-img :src="photo.url">
+        <span class="absolute-top text-right">
+          <q-btn
+            round
+            icon="zoom_in"
+            class="bg-blue-grey-9 text-white q-ma-md all-pointer-events"
+            @click="openDetail({photo, idx, allPhotos: photos})" />
+        </span>
+         <div class="absolute-bottom custom-caption">
+          <div class="text-h5" v-if="carouselTitle"> {{ carouselTitle }} </div>
+          <div class="text-subtitle1" v-if="photos.length > 0">
+            <q-btn rounded @click.prevent="openDetail({photo: photos[0], idx: 0, allPhotos: photos})">{{photos.length}} fotografií</q-btn>
+          </div>
+        </div>
+      </q-img>
     </q-carousel-slide>
   </q-carousel>
 

src/graphql/queries/copilots.js

@@ -1,5 +1,5 @@
 import gql from "graphql-tag";
-// import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight_list";
+import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight_list";
 import {FRAGMENT_COPILOT_FULL_INFO, FRAGMENT_COPILOT_LIST_INFO} from "src/graphql/fragments/copilot";
 
 export const COPILOTS_LIST = gql`
@@ -18,12 +18,11 @@ query copilot($id: Int!) {
     ...copilotFullInfo
 
     flights {
-    id
-    name
-
+      ...flightListInfo
     }
   }
 }
 
 ${FRAGMENT_COPILOT_FULL_INFO}
+${FRAGMENT_FLIGHT_LIST_INFO}
 `;

src/pages/profile/flight/FlightDetailPage.vue

@@ -69,7 +69,11 @@ const copyLinkToClipboard = () => {
   <FlightDetailSkeleton v-if="loading || !flight"/>
 
   <q-card class="flight-detail-card" v-else>
-    <PhotoCarousel :cover-photo-url="flight.coverPhoto?.url" :photos="flight.photos"/>
+    <PhotoCarousel
+      :cover-photo-url="flight.coverPhoto?.url"
+      :carousel-title="flightName(flight)"
+      :photos="flight.photos"
+    />
 
     <q-card-actions class="q-my-md">
       <div class="col-grow">