Implementace photoswipe

2023-10-30 09:08:58 +01:00
parent a63efc44d8
commit e2ad6e39b8
9 changed files with 221 additions and 76 deletions
@@ -0,0 +1,152 @@
+<script setup>
+import {computed, onMounted, reactive, ref, watch} from "vue";
+import {useQuasar} from "quasar";
+import {confirmObject} from "src/composables/dialog";
+
+const $q = useQuasar();
+
+
+const props = defineProps({
+  photos: {
+    type: Array
+  },
+});
+
+const batchEdit = ref({});
+
+onMounted(() => {
+  for (const photo of props.photos) {
+    batchEdit.value[photo.id] = false;
+  }
+});
+
+const emits = defineEmits(["edit", "delete", "batch-edit", "batch-rotate"])
+
+const openEdit = (photo) => {
+  emits("edit", photo);
+};
+
+
+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?"))
+      .onOk(() => {
+        for (const id in batchEdit.value) {
+          if (!batchEdit.value[id]) continue;
+          emits("delete", parseInt(id));
+          batchEdit.value[id] = false;
+        }
+      });
+}
+
+const handleImageClick = (photo, idx) => {
+  batchEdit.value[photo.id] = !batchEdit.value[photo.id];
+}
+
+const selectedPhotos = computed(() => {
+  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);
+  }
+
+  return photos;
+});
+
+const openBatchEdit = () => {
+  const photos = selectedPhotos.value;
+  for (const i in batchEdit.value) {
+    batchEdit.value[i] = false;
+  }
+  emits('batch-edit', photos);
+}
+
+const batchRotate = (direction) => {
+  const photos = selectedPhotos.value;
+  emits("batch-rotate", {photos, direction});
+}
+
+const isBatchEditAllowed = computed(() => Object.values(batchEdit.value).filter(v => v).length > 0);
+
+const checkAll = ref(false);
+watch(() => checkAll.value, (newVal) => {
+  if (newVal === null) return;
+
+  for (const photo of props.photos) {
+    batchEdit.value[photo.id] = newVal;
+  }
+});
+watch(() => batchEdit.value, () => {
+  let checkedAll = true;
+  let uncheckedAll = true;
+
+  for (const i of Object.keys(batchEdit.value)) {
+    if (typeof batchEdit.value[i] === 'undefined') continue;
+
+    if (batchEdit.value[i]) uncheckedAll = false;
+    if (!batchEdit.value[i]) checkedAll = false;
+  }
+
+  if (checkedAll) {
+    checkAll.value = true;
+  } else if (uncheckedAll) {
+    checkAll.value = false;
+  } else {
+    checkAll.value = null;
+  }
+}, {deep: true});
+
+const batchOptionsProps = computed(() => ({
+  round: true,
+  flat: true,
+  class: "q-ml-lg",
+  disable: !isBatchEditAllowed.value
+}));
+</script>
+
+<template>
+  <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)" style="cursor: pointer">
+          <div class="absolute-bottom" v-if="photo.name !== '' || photo.description !== ''">
+            <div class="text-h6" v-if="photo.name !== ''">
+              {{ photo.name }}
+            </div>
+            <div class="text-subtitle2" v-if="photo.description !== ''">
+              {{ photo.description }}
+            </div>
+          </div>
+        </q-img>
+
+        <q-card-actions 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"/>
+          </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-card-actions>
+      </q-card>
+    </div>
+  </div>
+
+  <q-page-sticky :offset="[50, 50]" position="bottom" v-if="photos.length > 0">
+    <q-card>
+      <q-card-actions>
+        <q-checkbox v-model="checkAll" label="Vybrat vše"/>
+        <q-btn v-bind="batchOptionsProps" icon="info" :color="isBatchEditAllowed ? 'primary' : 'grey'" @click="openBatchEdit"/>
+        <q-btn v-bind="batchOptionsProps" icon="rotate_left" :color="isBatchEditAllowed ? 'secondary' : 'grey'" @click="batchRotate('counterClockwise')"/>
+        <q-btn v-bind="batchOptionsProps" icon="rotate_right" :color="isBatchEditAllowed ? 'secondary' : 'grey'" @click="batchRotate('clockwise')"/>
+        <q-btn v-bind="batchOptionsProps" icon="delete" :color="isBatchEditAllowed ? 'red' : 'grey'" @click="confirmBatchPhotoDelete"/>
+      </q-card-actions>
+    </q-card>
+  </q-page-sticky>
+</template>