Prepracovane zobrazeni seznamu fotke

src/components/photos/PhotoCarousel.vue

@@ -22,22 +22,24 @@ const props = defineProps({
   }
 })
 
+const $route = useRoute();
+const photoId = parseInt($route.query.photo);
+
 const displayedPhoto = ref(null);
-const openPhotoDetail = ref(false);
-const photoData = ref(null);
-const openDetail = ({photo, idx, allPhotos}) => {
-  openPhotoDetail.value = true;
-  photoData.value = {photo, idx, allPhotos};
-}
+
+const emits = defineEmits(["open-detail"]);
 
 watch(() => props.photos, (newVal) => {
   if (newVal.length === 0) return;
   displayedPhoto.value = props.coverPhotoUrl || newVal[0].url;
 }, {immediate: true});
 
-const $route = useRoute();
+
+const openDetail = ({photo, idx, allPhotos}) => {
+  emits("open-detail", {photo, idx, allPhotos});
+}
+
 onMounted(() => {
-  const photoId = parseInt($route.query.photo);
   const idx = props.photos.findIndex(p => p.id === photoId);
   if (idx >= 0) {
     const photo = props.photos[idx];
@@ -75,13 +77,4 @@ onMounted(() => {
       </q-img>
     </q-carousel-slide>
   </q-carousel>
-
-  <PhotoDetail
-    v-if="photoData"
-    v-model="openPhotoDetail"
-    :default-title="defaultTitle"
-    :photo="photoData.photo"
-    :photos="photoData.allPhotos"
-    :opened-index="photoData.idx"
-  />
 </template>

src/components/photos/PhotoDetail.vue

@@ -182,7 +182,6 @@ const showExtraInfo = () => {
                 :class='{"shadow-5": true, "active-thumbnail": idx === displayedPhotoIndex}'
               />
             </div>
-
           </div>
 
           <div class="row" ref="infoWrapper">

src/components/photos/PhotosList.vue

@@ -23,7 +23,7 @@ onMounted(() => {
   }
 });
 
-const emits = defineEmits(["edit", "delete", "batch-edit", "batch-rotate"])
+const emits = defineEmits(["edit", "delete", "batch-edit", "batch-rotate", "photo-click"])
 
 const openEdit = (photo) => {
   emits("edit", photo);
@@ -33,25 +33,27 @@ const $q = useQuasar();
 
 const confirmPhotoDelete = (id) => {
   $q.dialog(confirmObject("Opravdu chces smazat tuto fotku?"))
-    .onOk(() => {
-      emits("delete", id);
-    });
+      .onOk(() => {
+        emits("delete", id);
+      });
 }
 
 const confirmBatchPhotoDelete = () => {
   $q.dialog(confirmObject("Opravdu chces smazat vybrané fotky?"))
-    .onOk(() => {
-      for (const id in batchEdit.value) {
-        if (!batchEdit.value[id]) continue;
-        emits("delete", parseInt(id));
-        batchEdit.value[id] = false;
-      }
-    });
+      .onOk(() => {
+        for (const id in batchEdit.value) {
+          if (!batchEdit.value[id]) continue;
+          emits("delete", parseInt(id));
+          batchEdit.value[id] = false;
+        }
+      });
 }
 
 const handleImageClick = (photo, idx) => {
   if (props.showActions) {
     batchEdit.value[photo.id] = !batchEdit.value[photo.id];
+  } else {
+    emits("photo-click", {photo, idx});
   }
 }
 
@@ -120,7 +122,7 @@ const batchOptionsProps = computed(() => ({
   <div class="row">
     <div class="col-6 col-sm-4 col-md-4 col-lg-3" v-for="(photo, idx) in photos" :key="photo.id">
       <q-card :class='{"q-ma-sm": true, "shadow-1": !batchEdit[photo.id], "shadow-10": batchEdit[photo.id]}'>
-        <q-img :src="photo.thumbnailUrl" @click="handleImageClick(photo, idx)">
+        <q-img :src="photo.thumbnailUrl" @click="handleImageClick(photo, idx)" style="cursor: pointer">
           <div class="absolute-bottom" v-if="photo.name !== '' || photo.description !== ''">
             <div class="text-h6" v-if="photo.name !== ''">
               {{ photo.name }}
@@ -139,9 +141,9 @@ const batchOptionsProps = computed(() => ({
             <q-icon name="gps_fixed" v-if="photo.gpsLatitude && photo.gpsLongitude"/>
             <q-icon name="gps_off" v-else/>
           </div>
-          <q-btn flat icon="edit" color="black" :to="{name: 'photoEditor', params: {id: photo.id}}" />
-          <q-btn flat icon="info" color="blue" @click="openEdit(photo)" />
-          <q-btn flat icon="delete" color="red" @click="confirmPhotoDelete(photo.id)" />
+          <q-btn flat icon="edit" color="black" :to="{name: 'photoEditor', params: {id: photo.id}}"/>
+          <q-btn flat icon="info" color="blue" @click="openEdit(photo)"/>
+          <q-btn flat icon="delete" color="red" @click="confirmPhotoDelete(photo.id)"/>
         </q-card-actions>
       </q-card>
     </div>