Confirm photo deletion

GeniJaho · Mar 19, 2024 · 1465d04 · 1465d04
1 parent 678fe50
commit 1465d04
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 13 deletions.
diff --git a/resources/js/Components/DeletePhotoButton.vue b/resources/js/Components/DeletePhotoButton.vue
@@ -0,0 +1,34 @@
+<script setup>
+import IconDangerButton from "@/Components/IconDangerButton.vue";
+import {ref} from "vue";
+
+const deletingPhoto = ref(false);
+const disabled = ref(false);
+
+const emit = defineEmits(['delete']);
+
+const deletePhoto = () => {
+    disabled.value = true;
+    emit('delete');
+};
+
+</script>
+
+<template>
+    <IconDangerButton @click="deletingPhoto = ! deletingPhoto" :disabled="disabled">
+        <div class="relative">
+            <i class="fas fa-fw fa-trash-alt text-xs"></i>
+            <div v-if="deletingPhoto"
+                 class="absolute right-[2.2rem] top-1/2 transform -translate-y-1/2 bg-white rounded-lg flex flex-row overflow-hidden"
+            >
+                <span class="p-2 hover:bg-gray-200" @click="deletePhoto">
+                    <i class="fas fa-fw fa-check text-sm text-green-500"></i>
+                </span>
+                <span class="p-2 hover:bg-gray-200">
+                    <i class="fas fa-fw fa-xmark text-sm text-red-700"></i>
+                </span>
+            </div>
+
+        </div>
+    </IconDangerButton>
+</template>
diff --git a/resources/js/Pages/Photos/Index.vue b/resources/js/Pages/Photos/Index.vue
@@ -1,13 +1,13 @@
 <script setup>
 import AppLayout from '@/Layouts/AppLayout.vue';
 import {Link, router} from '@inertiajs/vue3';
-import IconDangerButton from "@/Components/IconDangerButton.vue";
 import Filters from "@/Components/Filters.vue";
 import BulkTag from "@/Pages/Photos/Partials/BulkTag.vue";
 import {ref, watch} from "vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import SelectInput from "@/Components/SelectInput.vue";
 import TaggedIcon from "@/Components/TaggedIcon.vue";
+import DeletePhotoButton from "@/Components/DeletePhotoButton.vue";
 
 const props = defineProps({
     photos: Object,
@@ -169,13 +169,11 @@ const filter = (filters) => {
 
                                     <TaggedIcon v-if="photo.items_exists" class="absolute top-2 right-2" />
 
-                                    <IconDangerButton
-                                        v-if="!isSelecting"
+                                    <DeletePhotoButton
+                                        v-if="! isSelecting"
+                                        @delete="deletePhoto(photo.id)"
                                         class="absolute bottom-2 right-2"
-                                        @click="deletePhoto(photo.id)"
-                                    >
-                                        <i class="fas fa-fw fa-trash-alt text-xs"></i>
-                                    </IconDangerButton>
+                                    />
                                 </div>
                             </div>
                         </div>

diff --git a/resources/js/Pages/Photos/Show.vue b/resources/js/Pages/Photos/Show.vue
@@ -6,10 +6,10 @@ import {Link} from "@inertiajs/vue3";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import debounce from 'lodash.debounce'
 import { router } from '@inertiajs/vue3'
-import IconDangerButton from "@/Components/IconDangerButton.vue";
 import TagBox from "@/Components/TagBox.vue";
 import Tooltip from "@/Components/Tooltip.vue";
 import TaggedIcon from "@/Components/TaggedIcon.vue";
+import DeletePhotoButton from "@/Components/DeletePhotoButton.vue";
 
 const props = defineProps({
     photoId: Number,
@@ -151,12 +151,10 @@ const onKeyDown = (event) => {
 
                             <TaggedIcon v-if="photoItems.length" class="absolute top-4 left-4" />
 
-                            <IconDangerButton
+                            <DeletePhotoButton
+                                @delete="deletePhoto"
                                 class="absolute top-4 right-4"
-                                @click="deletePhoto"
-                            >
-                                <i class="fas fa-fw fa-trash-alt text-xs"></i>
-                            </IconDangerButton>
+                            />
                         </div>
                         <div v-if="previousPhotoUrl || nextPhotoUrl" class="flex justify-between mt-4">
                             <Link v-if="previousPhotoUrl" :href="previousPhotoUrl">