Editace fotek v modalu, lepsi datetime picker

2023-07-10 08:12:48 +02:00
parent 3d88397d21
commit bbb21278fd
18 changed files with 274 additions and 103 deletions
@@ -0,0 +1,50 @@
+<script setup>
+const props = defineProps({
+  photos: {
+    type: Array
+  },
+  showActions: {
+    type: Boolean,
+    required: false,
+    default: true
+  }
+});
+
+const emits = defineEmits(["edit", "delete", "detail"])
+
+const openEdit = (photo) => {
+  emits("edit", photo);
+};
+
+const deletePhoto = (id) => {
+  emits("delete", id);
+};
+
+const openDetail = (photo) => {
+  emits("detail", photo);
+}
+</script>
+
+<template>
+  <div class="row">
+    <div class="col-12 col-md-4 col-lg-3" v-for="photo in photos" :key="photo.id">
+      <q-card class="q-my-sm q-mx-sm">
+        <q-img :src="photo.thumbnailUrl" @click="openDetail">
+          <div class="absolute-bottom">
+            <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">
+          <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-card-actions>
+      </q-card>
+    </div>
+  </div>
+</template>