Reorganizace skeletonu, aktualizace app-vite a quasaru

src/components/photos/BatchPhotoFormDialog.vue

@@ -13,8 +13,8 @@ const props = defineProps({
   locations: {
     type: Array
   },
-  aircraft: {
-    type: Object
+  aircrafts: {
+    type: Array
   },
   copilots: {
     type: Array
@@ -26,7 +26,7 @@ const formData = ref({
   description: "",
   pointOfInterest: null,
   copilots: [],
-  isAircraft: false,
+  aircraftId: null,
   photoIds: []
 });
 
@@ -42,7 +42,7 @@ const setup = () => {
 <template>
   <DialogWrapper :formData="formData" @show="setup()">
     <q-card-section class="text-center">
-        <q-img :src="photo.thumbnailUrl" width="80px" class="q-ma-sm" v-for="photo in photos" :key="photo.thumbnailUrl"/>
+      <q-img :src="photo.thumbnailUrl" width="80px" class="q-ma-sm" v-for="photo in photos" :key="photo.thumbnailUrl"/>
     </q-card-section>
     <q-card-section>
       <FormWrapper :save-button="false">
@@ -54,19 +54,27 @@ const setup = () => {
             label="Místo"
         />
 
-         <q-select
-          v-if="copilots.length > 0"
-          :options="copilots"
-          v-model="formData.copilots"
-          v-bind="commonProps"
-          label="Kopiloti"
-          option-label="name"
-          option-value="id"
-          multiple
+        <q-select
+            v-if="copilots.length > 0"
+            :options="copilots"
+            v-model="formData.copilots"
+            v-bind="commonProps"
+            label="Kopiloti"
+            option-label="name"
+            option-value="id"
+            multiple
         />
 
-        <q-checkbox v-model="formData.isAircraft" :label="`Letadlo (${aircraft.callSign})`"/>
-
+        <q-select
+            :options="aircrafts"
+            v-model="formData.aircraftId"
+            v-bind="commonProps"
+            label="Letadlo"
+            option-label="callSign"
+            option-value="id"
+            emit-value
+            map-options
+        />
         <q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
         <q-input type="textarea" v-model="formData.description" label="Popis" v-bind="commonProps"/>
       </FormWrapper>

src/components/photos/PhotoFormDialog.vue

@@ -13,8 +13,8 @@ const props = defineProps({
   locations: {
     type: Array
   },
-  aircraft: {
-    type: Object
+  aircrafts: {
+    type: Array
   },
   copilots: {
     type: Array
@@ -27,7 +27,7 @@ const formData = ref({
   description: "",
   pointOfInterest: null,
   copilots: [],
-  isAircraft: false,
+  aircraftId: null,
 });
 
 const setup = (() => {
@@ -58,7 +58,17 @@ const setup = (() => {
           multiple
         />
 
-        <q-checkbox v-model="formData.isAircraft" :label="`Letadlo (${aircraft.callSign})`"/>
+        <q-select
+          :options="aircrafts"
+          v-model="formData.aircraftId"
+          v-bind="commonProps"
+          label="Letadlo"
+          option-label="callSign"
+          option-value="id"
+          emit-value
+          map-options
+          />
+
         <q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
         <q-input type="textarea" v-model="formData.description" label="Popis" v-bind="commonProps"/>
       </FormWrapper>

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>

src/components/photos/skeletons/PhotoGallerySkeleton.vue

@@ -0,0 +1,7 @@
+<script setup>
+
+</script>
+
+<template>
+  gallery skeleton
+</template>