Reorganizace skeletonu, aktualizace app-vite a quasaru

src/components/photos/PhotosEditorList.vue

@@ -34,20 +34,20 @@ const openEdit = (photo) => {
 
 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) => {
@@ -117,6 +117,13 @@ const batchOptionsProps = computed(() => ({
 const setFlightCover = (titlePhoto) => {
   emits("set-title-photo", titlePhoto);
 }
+
+const openPhoto = ref(false);
+const photo = ref(null);
+const showLarge = (displayedPhoto) => {
+  photo.value = displayedPhoto;
+  openPhoto.value = true;
+}
 </script>
 
 <template>
@@ -124,12 +131,15 @@ const setFlightCover = (titlePhoto) => {
     <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)" style="cursor: pointer">
-          <div class="absolute-top bg-transparent text-right">
+          <div class="absolute-top bg-transparent flex">
+            <div class="col-grow">
+              <q-btn icon="fullscreen" color="grey-6" round @click.stop.prevent="showLarge(photo)"/>
+            </div>
             <q-btn
-              icon="star"
-              :color="titlePhoto?.id === photo.id ? 'amber-9' : 'grey-6'"
-              round
-              @click.stop.prevent="setFlightCover(photo)"
+                icon="star"
+                :color="titlePhoto?.id === photo.id ? 'amber-9' : 'grey-6'"
+                round
+                @click.stop.prevent="setFlightCover(photo)"
             />
           </div>
 
@@ -146,9 +156,9 @@ const setFlightCover = (titlePhoto) => {
         <q-card-actions align="right" :class="{'bg-primary': batchEdit[photo.id], 'text-white': batchEdit[photo.id]}" v-if="showActions">
           <div class="col-grow">
             <q-checkbox v-model="batchEdit[photo.id]"/>
-
-            <q-icon name="flight" v-if="photo.isAircraft" size="xs" color="grey-5" />
-            <q-icon name="person" v-if="photo.copilots.length > 0" size="xs" color="grey-5" />
+            <q-icon name="flight" v-if="photo.aircraftId" size="xs" color="grey-5"/>
+            <q-icon name="person" v-if="photo.copilots.length > 0" size="xs" color="grey-5"/>
+            <q-icon name="place" v-if="photo.pointOfInterest" size="xs" color="grey-5"/>
           </div>
           <q-btn flat icon="edit" color="blue" @click="openEdit(photo)"/>
           <q-btn flat icon="tune" color="black" :to="{name: 'photoEditor', params: {id: photo.id}}"/>
@@ -169,4 +179,12 @@ const setFlightCover = (titlePhoto) => {
       </q-card-actions>
     </q-card>
   </q-page-sticky>
+
+  <q-dialog v-model="openPhoto" full-width>
+    <q-img :src="photo.url">
+      <div class="absolute-top bg-transparent text-right">
+          <q-btn icon="close" round color="primary" @click="openPhoto = false" />
+      </div>
+    </q-img>
+  </q-dialog>
 </template>