From ca256179a8555a59d2c6e3a3714eca452621bf9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andrei=20Ioni=C8=9B=C4=83?= <hi@andrei.io>
Date: Mon, 16 Oct 2023 11:49:54 +0100
Subject: [PATCH] feat: ask for confirmation on media library item delete
 (#414)

---
 resources/js/components/Media/Actions.vue | 36 +++++++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/Media/Actions.vue b/resources/js/components/Media/Actions.vue
index ca1b4037..e9895805 100644
--- a/resources/js/components/Media/Actions.vue
+++ b/resources/js/components/Media/Actions.vue
@@ -11,14 +11,42 @@
         <button
             type="button"
             class="flex-1 px-4 py-2 text-sm font-semibold text-center text-white bg-red-600 border border-transparent rounded-md shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
-            @click="$emit('delete-selected')"
+            @click="confirmDelete = true"
             v-text="$t('app.action.delete')"
         />
+
+        <confirmation-modal
+            v-if="confirmDelete"
+            @close="confirmDelete = false"
+            @submit="$emit('delete-selected')"
+            color="red"
+        >
+            <template #title>{{ $t('app.action.delete') }}</template>
+
+            <template #content>
+                {{ $t('app.action.deleteConfirm') }}
+            </template>
+
+            <template #footer>
+                <form-button
+                    type="button"
+                    @click.prevent="confirmDelete = false"
+                    :label="$t('app.action.cancel')"
+                    color="white"
+                />
+
+                <form-button
+                    type="submit"
+                    :label="$t('app.action.delete')"
+                    color="red"
+                />
+            </template>
+        </confirmation-modal>
     </div>
 </template>
 
 <script>
-    import { inject } from 'vue';
+    import { inject, ref } from 'vue';
 
     export default {
         name: 'MediaActions',
@@ -45,8 +73,12 @@
                 bus.emit('media-library:close');
             };
 
+            const confirmDelete = ref(false);
+
             return {
                 attach,
+
+                confirmDelete,
             };
         },
     };