poletani.cz/app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Upravy UI, refaktoring, davkove upravy a mazani fotek

Browse Source
This commit is contained in:
Michal Kváček
2023-08-28 22:02:24 +02:00
parent dcc3230cbe
commit dd248d4432
53 changed files with 636 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/photos/PhotosList.vue
+65 -13
View File
@@ -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>