Implementace photoswipe

src/pages/profile/flight/EditFlightPage.vue

@@ -15,7 +15,7 @@ import {useCopilotsStore} from "stores/Copilots";
 import FlightFormNotes from "components/flights/form/FlightFormNotes.vue";
 import FlightFormPhotos from "components/flights/form/FlightFormPhotos.vue";
 import {usePhotosStore} from "stores/Photo";
-import PhotosList from "components/photos/PhotosList.vue";
+import PhotosList from "components/photos/PhotosEditorList.vue";
 import {errorObject, successObject, warningObject} from "src/composables/dialog";
 import PhotoFormDialog from "components/photos/PhotoFormDialog.vue";
 import FlightFormTrack from "components/flights/form/FlightFormTrack.vue";

src/pages/profile/flight/FlightDetailPage.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {useRoute, useRouter} from "vue-router";
-import {onMounted, watch} from "vue";
+import {computed, onMounted, ref, watch} from "vue";
 import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
 import {fetchFlight, flight, flightName, handleDeleteFlight, loading} from "src/composables/objects/flight";
 import {useAppStore} from "stores/App";
@@ -8,14 +8,11 @@ import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
 import {copyToClipboard, useQuasar} from "quasar";
 import {successObject} from "src/composables/dialog";
 import {useFlightsStore} from "stores/Flights";
-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";
+import PhotoGallery from "components/photos/PhotoGallery.vue";
 
 const $q = useQuasar();
 const $router = useRouter();
@@ -72,22 +69,26 @@ const copyLinkToClipboard = () => {
   <FlightDetailSkeleton v-if="loading || !flight"/>
 
   <q-card class="flight-detail-card" v-else>
-    <PhotoCarousel
-        :cover-photo-url="flight.coverPhoto?.url"
-        :carousel-title="flightName(flight)"
-        :photos="flight.photos"
-        @open-detail="openDetail"
-    />
+<!--    <PhotoCarousel-->
+<!--        :cover-photo-url="flight.coverPhoto?.url"-->
+<!--        :carousel-title="flightName(flight)"-->
+<!--        :photos="flight.photos"-->
+<!--    />-->
+    <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-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"
-        />
+<!--        <q-btn-->
+<!--            flat-->
+<!--            :to="{name: 'flightEdit', params:{id: flight.id}}"-->
+<!--            icon="edit"-->
+<!--            text-color="primary"-->
+<!--            label="Upravit"-->
+<!--        />-->
 
         <q-btn
             @click="togglePublicVisibility"
@@ -110,19 +111,19 @@ const copyLinkToClipboard = () => {
 
     <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>
+        <q-btn flat 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>
+        <q-btn flat 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"/>
 
-      <q-separator />
+      <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>
+        <q-btn flat 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"
@@ -130,14 +131,12 @@ const copyLinkToClipboard = () => {
       >
         U tohoto letu nemáš nahrané žádné fotografie.
       </BasicInfoBanner>
-      <PhotosList
+      <PhotoGallery
           v-else
           :photos="flight.photos"
-          :show-actions="false"
-          @photo-click="openPhotoFromList"
       />
 
-      <q-separator />
+      <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>
@@ -154,13 +153,4 @@ const copyLinkToClipboard = () => {
       />
     </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>

src/pages/profile/poi/PointOfInterestDetailPage.vue

@@ -4,7 +4,7 @@ import {useRoute} from "vue-router";
 import POIDetailSkeleton from "components/poi/POIDetailSkeleton.vue";
 import FAB from "components/FAB.vue";
 import {fetchPoi, loading, poi} from "src/composables/objects/poi";
-import PhotosList from "components/photos/PhotosList.vue";
+import PhotosList from "components/photos/PhotosEditorList.vue";
 import {useAppStore} from "stores/App";
 import EmbeddedMap from "components/map/EmbeddedMap.vue";
 import {useUserStore} from "stores/User";