Upravy UI, refaktoring, davkove upravy a mazani fotek

src/components/photos/BatchPhotoFormDialog.vue

@@ -0,0 +1,57 @@
+<script setup>
+import {computed, ref} from "vue";
+import {setDefaultData} from "src/composables/form/formHandling";
+import DialogWrapper from "components/DialogWrapper.vue";
+import FormWrapper from "components/FormWrapper.vue";
+import {commonProps} from "src/composables/inputs";
+import ComboboxInput from "components/inputs/ComboboxInput.vue";
+
+const props = defineProps({
+  photos: {
+    type: Array
+  },
+  locations: {
+    type: Array
+  }
+});
+
+const formData = ref({
+  name: "",
+  description: "",
+  pointOfInterest: null,
+  photoIds: []
+});
+
+const setup = () => {
+  formData.value.photoIds = props.photos.map(p => p.id);
+  formData.value.name = "";
+  formData.value.description = "";
+  formData.value.pointOfInterest = null;
+}
+
+</script>
+
+<template>
+  <DialogWrapper :formData="formData" @show="setup()">
+    <q-card-section class="text-center">
+<!--      <q-scroll-area style="min-height: 80px; max-height: 150px">-->
+        <q-img :src="photo.thumbnailUrl" width="80px" class="q-ma-sm" v-for="photo in photos" :key="photo.thumbnailUrl"/>
+<!--        {{ photos }}-->
+<!--      </q-scroll-area>-->
+    </q-card-section>
+    <q-card-section>
+      <FormWrapper :save-button="false">
+        <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"/>
+
+        <ComboboxInput
+            :options="locations"
+            v-bind="commonProps"
+            v-model="formData.pointOfInterest"
+            :enable-new-values="false"
+            label="POI"
+        />
+      </FormWrapper>
+    </q-card-section>
+  </DialogWrapper>
+</template>

src/components/photos/PhotoDetail.vue

@@ -3,6 +3,7 @@ import EmbeddedMap from "components/map/EmbeddedMap.vue";
 import {computed, onMounted, ref} from "vue";
 import {formatDatetime} from "src/composables/datetimeUtils";
 import 'vue-inner-image-zoom/lib/vue-inner-image-zoom.css'
+import {useQuasar} from "quasar";
 
 const props = defineProps({
   photos: {
@@ -50,68 +51,91 @@ const prevPhoto = () => {
 }
 
 const showExtra = ref(false);
+
+const $q = useQuasar();
+const isMaximized = computed(() => $q.screen.width <= $q.screen.sizes.md);
+const imageFullscreen = ref(false);
 </script>
 
 <template>
   <q-dialog
-    v-model="open"
-    full-width
+      v-model="open"
+      full-width
+      :maximized="isMaximized"
   >
     <q-card
-      v-touch-swipe.mouse.left="prevPhoto"
-      v-touch-swipe.mouse.right="nextPhoto"
-      @keyup.left="prevPhoto"
-      @keyup.right="nextPhoto"
+        v-touch-swipe.mouse.left="prevPhoto"
+        v-touch-swipe.mouse.right="nextPhoto"
+        @keyup.left="prevPhoto"
+        @keyup.right="nextPhoto"
     >
-      <q-card-section>
-        <div class="relative-position">
+      <q-card-section class="bg-black text-white" v-if="isMaximized">
+        <div class="row">
+          <div class="col">
+            <strong v-if="photo.name !== ''">{{ photo.name }}</strong>
+          </div>
+          <div class="col text-right">
+            <q-btn round text-color="white" size="sm" icon="close" @click="open = false"/>
+          </div>
+        </div>
+
+      </q-card-section>
+
+      <q-card-section :class="{'q-pa-none': isMaximized}">
+        <div :class="{'relative-position': true, 'image-full-height': imageFullscreen}">
           <div class="text-center">
-            <inner-image-zoom move-type="pan" :zoomScale="0.75" :hide-hint="true" :src="photo.url"/>
+            <inner-image-zoom
+                move-type="pan"
+                :zoomScale="0.75"
+                :hide-hint="true"
+                :after-zoom-in="() => imageFullscreen = true"
+                :after-zoom-out="() => imageFullscreen = false"
+                :src="photo.url"
+            />
           </div>
 
           <q-btn
-            class="absolute all-pointer-events"
-            round
-            flat
-            icon="info"
-            :text-color="showExtra ? 'primary' : 'white'"
-            style="background: rgba(0, 0, 0, 0.25); top: 8px; right: 8px"
-            @click="showExtra = !showExtra"
+              class="absolute all-pointer-events"
+              round
+              flat
+              icon="info"
+              :text-color="showExtra ? 'primary' : 'white'"
+              style="background: rgba(0, 0, 0, 0.25); bottom: 16px; left: 8px"
+              @click="showExtra = !showExtra"
           />
           <q-btn
-            class="absolute all-pointer-events"
-            style="background: rgba(0, 0, 0, 0.25); top: 50%; left: 8px;"
-            @click="prevPhoto"
-            v-if="photoIndex > 0"
-            icon="chevron_left"
-            text-color="white"
-            flat
-            rounded
+              class="absolute all-pointer-events"
+              style="background: rgba(0, 0, 0, 0.25); top: 50%; left: 8px;"
+              @click="prevPhoto"
+              v-if="photoIndex > 0 && !isMaximized"
+              icon="chevron_left"
+              text-color="white"
+              flat
+              rounded
           >
           </q-btn>
           <q-btn
-            class="absolute all-pointer-events"
-            style="background: rgba(0, 0, 0, 0.25); top: 50%; right: 8px;"
-            @click="nextPhoto"
-            v-if="photoIndex < photos.length - 1"
-            icon-right="chevron_right"
-            text-color="white"
-            flat
-            rounded
+              class="absolute all-pointer-events"
+              style="background: rgba(0, 0, 0, 0.25); top: 50%; right: 8px;"
+              @click="nextPhoto"
+              v-if="photoIndex < photos.length - 1 && !isMaximized"
+              icon-right="chevron_right"
+              text-color="white"
+              flat
+              rounded
           >
           </q-btn>
-          <strong v-if="photo.name !== ''">{{ photo.name }}</strong>
+          <strong v-if="photo.name !== '' && !isMaximized">{{ photo.name }}</strong>
           <p v-if="photo.description !== ''">{{ photo.description }}</p>
         </div>
 
         <div class="row">
-
           <div class="col-12 q-my-md" v-if="showExtra">
             <EmbeddedMap
-              v-if="photo.gpsLatitude && photo.gpsLongitude"
-              class="q-mx-sm"
-              :gps-latitude="photo.gpsLatitude"
-              :gps-longitude="photo.gpsLongitude"
+                v-if="photo.gpsLatitude && photo.gpsLongitude"
+                class="q-mx-sm"
+                :gps-latitude="photo.gpsLatitude"
+                :gps-longitude="photo.gpsLongitude"
             />
 
             <q-list dense>
@@ -153,8 +177,20 @@ const showExtra = ref(false);
   width: 100%;
 }
 
+.image-full-height .iiz {
+  height: calc(95vh - 65px) !important;
+}
+
 .iiz__img {
   max-height: 90vh !important;
   margin: 0 auto;
 }
+
+.iiz__img--hidden {
+  height: 100vh;
+}
+
+.iiz__zoom-img--visible {
+//height: 125vh !important
+}
 </style>

src/components/photos/PhotoFormDialog.vue

@@ -4,6 +4,7 @@ import {setDefaultData} from "src/composables/form/formHandling";
 import DialogWrapper from "components/DialogWrapper.vue";
 import FormWrapper from "components/FormWrapper.vue";
 import {commonProps} from "src/composables/inputs";
+import ComboboxInput from "components/inputs/ComboboxInput.vue";
 
 const props = defineProps({
   photo: {
@@ -18,7 +19,7 @@ const photoId = computed(() => props.photo?.id || null);
 const formData = ref({
   name: "",
   description: "",
-  pointOfInterestId: null,
+  pointOfInterest: null,
   isFlightCover: false
 });
 
@@ -29,6 +30,7 @@ const setup = (() => {
 
 <template>
   <DialogWrapper :formData="formData" :object-id="photoId" @show="setup">
+    {{ formData }}
     <q-img :src="photo.thumbnailUrl"/>
 
     <q-card-section>
@@ -36,16 +38,10 @@ const setup = (() => {
         <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"/>
 
-        {{ locations }}
-
-        <q-select
+        <ComboboxInput
           :options="locations"
-          option-label="name"
-          option-value="id"
-          emit-value
-          map-options
           v-bind="commonProps"
-          v-model="formData.pointOfInterestId"
+          v-model="formData.pointOfInterest"
           label="POI"
         />
 

src/components/photos/PhotosList.vue

@@ -1,4 +1,8 @@
 <script setup>
+import {computed, onMounted, ref} from "vue";
+import {useQuasar} from "quasar";
+import {confirmObject} from "src/composables/dialog";
+
 const props = defineProps({
   photos: {
     type: Array
@@ -10,26 +14,73 @@ const props = defineProps({
   }
 });
 
-const emits = defineEmits(["edit", "delete", "openDetail"])
+const batchEdit = ref({});
+
+
+onMounted(() => {
+  for (const photo of props.photos) {
+    batchEdit.value[photo.id] = false;
+  }
+});
+
+const emits = defineEmits(["edit", "delete", "batch-edit"])
 
 const openEdit = (photo) => {
   emits("edit", photo);
 };
 
-const deletePhoto = (id) => {
-  emits("delete", id);
-};
+const $q = useQuasar();
 
-const openDetail = (photo, idx) => {
-  emits("openDetail", {photo, idx, allPhotos: props.photos});
+const confirmPhotoDelete = (id) => {
+  $q.dialog(confirmObject("Opravdu chces smazat tuto fotku?"))
+      .onOk(() => {
+        emits("delete", id);
+      });
 }
+
+const confirmBatchPhotoDelete = () => {
+  $q.dialog(confirmObject("Opravdu chces smazat vybrané fotky?" + JSON.stringify(batchEdit.value)))
+      .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];
+  }
+}
+
+
+const openBatchEdit = () => {
+  const photos = [];
+  for (const i in batchEdit.value) {
+    const photo = props.photos.find(p => p.id === parseInt(i));
+    if (photo && batchEdit.value[i]) photos.push(photo);
+    batchEdit.value[i] = false;
+  }
+  emits('batch-edit', photos);
+}
+
+const isBatchEditAllowed = computed(() => Object.values(batchEdit.value).filter(v => v).length > 0);
 </script>
 
 <template>
+  <div class="row q-my-md">
+    <div class="col text-right">
+      <q-btn round flat icon="edit" :color="isBatchEditAllowed ? 'primary' : 'grey'" :disable="!isBatchEditAllowed" @click="openBatchEdit" v-if="showActions"/>
+      <q-btn round flat icon="delete" :color="isBatchEditAllowed ? 'red' : 'grey'" :disable="!isBatchEditAllowed" @click="confirmBatchPhotoDelete" v-if="showActions"/>
+    </div>
+  </div>
+
   <div class="row">
     <div class="col-12 col-sm-4 col-md-4 col-lg-3" v-for="(photo, idx) in photos" :key="photo.id">
-      <q-card class="q-my-sm q-mx-sm">
-        <q-img :src="photo.thumbnailUrl" @click="openDetail(photo, idx)">
+      <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)">
           <div class="absolute-bottom" v-if="photo.name !== '' || photo.description !== ''">
             <div class="text-h6" v-if="photo.name !== ''">
               {{ photo.name }}
@@ -40,16 +91,17 @@ const openDetail = (photo, idx) => {
           </div>
         </q-img>
 
-        <q-card-actions v-if="showActions" align="right">
+        <q-card-actions v-if="showActions" align="right" :class="{'bg-primary': batchEdit[photo.id], 'text-white': batchEdit[photo.id]}">
           <div class="col-grow">
+            <q-checkbox v-model="batchEdit[photo.id]"/>
             <q-icon name="star" v-if="photo.isFlightCover" color="red"/>
-            <q-icon name="place" v-if="photo.pointOfInterestId" />
-            <q-icon name="gps_fixed" v-if="photo.gpsLatitude && photo.gpsLongitude" />
-            <q-icon name="gps_off" v-else />
+            <q-icon name="place" v-if="photo.pointOfInterestId"/>
+            <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="blue" @click="openEdit(photo)"></q-btn>
-          <q-btn flat icon="delete" color="red" @click="deletePhoto(photo.id)"></q-btn>
+          <q-btn flat icon="delete" color="red" @click="confirmPhotoDelete(photo.id)"></q-btn>
         </q-card-actions>
       </q-card>
     </div>