app/src/components/photos/PhotosEditorList.vue

<script setup>
import {computed, onMounted, reactive, ref, watch} from "vue";
import {useQuasar} from "quasar";
import {confirmObject} from "src/composables/dialog";

const props = defineProps({
  photos: {
    type: Array
  },
  titlePhoto: {
    type: Object,
  },
  showActions: {
    type: Boolean,
    required: false,
    default: true
  }
});

const $q = useQuasar();


const batchEdit = ref({});
for (const photo of props.photos) {
  batchEdit.value[photo.id] = false;
}

const emits = defineEmits(["edit", "delete", "set-title-photo", "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
}));

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>
  <div class="row" style="margin-bottom: 150px">
    <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 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)"
            />
          </div>

          <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]}" v-if="showActions">
          <div class="col-grow">
            <q-checkbox v-model="batchEdit[photo.id]"/>
            <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}}"/>
          <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 && showActions">
    <q-card>
      <q-card-actions>
        <q-checkbox v-model="checkAll" label="Vybrat vše"/>
        <q-btn v-bind="batchOptionsProps" icon="edit" :color="isBatchEditAllowed ? 'primary' : 'grey'" @click="openBatchEdit"/>
        <q-btn v-bind="batchOptionsProps" icon="rotate_90_degrees_ccw" :color="isBatchEditAllowed ? 'secondary' : 'grey'" @click="batchRotate('counterClockwise')"/>
        <q-btn v-bind="batchOptionsProps" icon="rotate_90_degrees_cw" :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>

  <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>