110 lines
3.4 KiB
Vue
110 lines
3.4 KiB
Vue
<script setup>
|
|
import {computed, onMounted, ref} from "vue";
|
|
import {useQuasar} from "quasar";
|
|
import {confirmObject} from "src/composables/dialog";
|
|
|
|
const props = defineProps({
|
|
photos: {
|
|
type: Array
|
|
},
|
|
showActions: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: true
|
|
}
|
|
});
|
|
|
|
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 $q = useQuasar();
|
|
|
|
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-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 }}
|
|
</div>
|
|
<div class="text-subtitle2" v-if="photo.description !== ''">
|
|
{{ photo.description }}
|
|
</div>
|
|
</div>
|
|
</q-img>
|
|
|
|
<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/>
|
|
</div>
|
|
|
|
<q-btn flat icon="edit" color="blue" @click="openEdit(photo)"></q-btn>
|
|
<q-btn flat icon="delete" color="red" @click="confirmPhotoDelete(photo.id)"></q-btn>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</template>
|