Implementace photoswipe

src/pages/public/pilotProfile/FlightDetailPage.vue

@@ -2,17 +2,12 @@
 import {onMounted, watch} from "vue";
 import {fetchFlight, flight, flightName, loading} from "src/composables/objects/flight";
 import {useRoute} from "vue-router";
-import PhotoCarousel from "components/photos/PhotoCarousel.vue";
 import FlightTrackMap from "components/flights/FlightTrackMap.vue";
 import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
 import {useAppStore} from "stores/App";
 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";
+import PhotoGallery from "components/photos/PhotoGallery.vue";
 
 const routeParams = useRoute().params;
 onMounted(() => {
@@ -41,31 +36,24 @@ watch(flight, (newVal) => {
       </q-banner>
 
       <q-card class="q-mx-md q-my-md flight-detail-card">
-        <PhotoCarousel
-          :default-title="flightName(flight)"
-          :cover-photo-url="flight.coverPhoto?.url"
-          :photos="flight.photos"
-          @open-detail="openDetail"
-        />
+        <q-img :src="flight.coverPhoto.url" v-if="flight.coverPhoto">
+          <div class="absolute-bottom custom-caption">
+            <div class="text-h5"> {{ flightName(flight) }}</div>
+          </div>
+        </q-img>
+
         <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"/>
+          <PhotoGallery :photos="flight.photos"/>
 
           <FlightTrackMap :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>
   </div>
 </template>