From 30892dcb2fe155c9b7fde50afaf46cd9878fd432 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sun, 13 Jun 2021 14:53:57 -0800
Subject: [PATCH] Feature/add cofirmation dialogs (#513)

* add category/tag confirmation dialog

* add page delete confirmation

Co-authored-by: hay-kot <hay-kot@pm.me>
---
 frontend/src/components/UI/Buttons/TheButton.vue  |  2 +-
 .../components/UI/Dialogs/ConfirmationDialog.vue  |  3 ++-
 frontend/src/locales/messages/en-US.json          |  2 ++
 .../pages/Admin/Settings/CustomPageCreator.vue    | 15 ++++++++++++++-
 .../Admin/ToolBox/CategoryTagEditor/index.vue     | 15 ++++++++++++++-
 5 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/UI/Buttons/TheButton.vue b/frontend/src/components/UI/Buttons/TheButton.vue
index 1f51be9e4d71..a3973429b90d 100644
--- a/frontend/src/components/UI/Buttons/TheButton.vue
+++ b/frontend/src/components/UI/Buttons/TheButton.vue
@@ -22,7 +22,7 @@
 
 <script>
 export default {
-  name: "theButton",
+  name: "TheButton",
   props: {
     // Types
     cancel: {
diff --git a/frontend/src/components/UI/Dialogs/ConfirmationDialog.vue b/frontend/src/components/UI/Dialogs/ConfirmationDialog.vue
index 5f28d208b0d7..7d7ea8ea574b 100644
--- a/frontend/src/components/UI/Dialogs/ConfirmationDialog.vue
+++ b/frontend/src/components/UI/Dialogs/ConfirmationDialog.vue
@@ -5,9 +5,10 @@
     :style="{ zIndex: zIndex }"
     @click:outside="cancel"
     @keydown.esc="cancel"
+    @keydown.enter="confirm"
   >
     <template v-slot:activator="{}">
-      <slot v-bind="{ open }"> </slot>
+      <slot  v-bind="{ open }"> </slot>
     </template>
     <v-card>
       <v-app-bar v-if="Boolean(title)" :color="color" dense dark>
diff --git a/frontend/src/locales/messages/en-US.json b/frontend/src/locales/messages/en-US.json
index 2867467551cc..2c51d696beae 100644
--- a/frontend/src/locales/messages/en-US.json
+++ b/frontend/src/locales/messages/en-US.json
@@ -59,6 +59,7 @@
     "custom": "Custom",
     "dashboard": "Dashboard",
     "delete": "Delete",
+    "confirm-delete-generic": "Are you sure you want to delete this?",
     "disabled": "Disabled",
     "download": "Download",
     "edit": "Edit",
@@ -188,6 +189,7 @@
     "url-form-hint": "Copy and paste a link from your favorite recipe website"
   },
   "page": {
+    "page": "Page",
     "all-recipes": "All Recipes",
     "home-page": "Home Page",
     "new-page-created": "New page created",
diff --git a/frontend/src/pages/Admin/Settings/CustomPageCreator.vue b/frontend/src/pages/Admin/Settings/CustomPageCreator.vue
index 9b6bca969547..c4dedeac5057 100644
--- a/frontend/src/pages/Admin/Settings/CustomPageCreator.vue
+++ b/frontend/src/pages/Admin/Settings/CustomPageCreator.vue
@@ -31,7 +31,16 @@
             </v-card-text>
 
             <v-card-actions>
-              <TheButton delete small minor @click="deletePage(item.id)" />
+              <ConfirmationDialog
+                :title="$t('page.page') + ' ' + $t('general.delete')"
+                :icon="$globals.icons.pages"
+                :message="$t('general.confirm-delete-generic')"
+                @confirm="deletePage(item.id)"
+              >
+                <template v-slot="{ open }">
+                  <TheButton delete small minor @click="open" />
+                </template>
+              </ConfirmationDialog>
               <v-spacer> </v-spacer>
               <TheButton edit small @click="editPage(index)" />
             </v-card-actions>
@@ -49,11 +58,15 @@
 <script>
 import draggable from "vuedraggable";
 import CreatePageDialog from "./CreatePageDialog";
+import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog.vue";
+import TheButton from "@/components/UI/Buttons/TheButton.vue";
 import { api } from "@/api";
 export default {
   components: {
     draggable,
     CreatePageDialog,
+    ConfirmationDialog,
+    TheButton,
   },
   data() {
     return {
diff --git a/frontend/src/pages/Admin/ToolBox/CategoryTagEditor/index.vue b/frontend/src/pages/Admin/ToolBox/CategoryTagEditor/index.vue
index 41a806363cbe..509f30169f4b 100644
--- a/frontend/src/pages/Admin/ToolBox/CategoryTagEditor/index.vue
+++ b/frontend/src/pages/Admin/ToolBox/CategoryTagEditor/index.vue
@@ -75,7 +75,16 @@
             <v-card-title class="py-1">{{ item.name }}</v-card-title>
             <v-divider class="mx-2"></v-divider>
             <v-card-actions>
-              <TheButton minor small delete @click="deleteItem(item.slug)" />
+              <ConfirmationDialog
+                :title="$t('general.confirm') + ' ' + $t('general.delete')"
+                :icon="$globals.icons.tags"
+                :message="$t('general.confirm-delete-generic')"
+                @confirm="deleteItem(item.slug)"
+              >
+                <template v-slot="{ open }">
+                  <TheButton minor small delete @click="open"></TheButton>
+                </template>
+              </ConfirmationDialog>
               <v-spacer></v-spacer>
               <TheButton small edit @click="openEditDialog(item)" />
             </v-card-actions>
@@ -95,6 +104,8 @@ import { validators } from "@/mixins/validators";
 import RemoveUnused from "./RemoveUnused";
 import BulkAssign from "./BulkAssign";
 import NewCategoryTagDialog from "@/components/UI/Dialogs/NewCategoryTagDialog";
+import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog.vue";
+import TheButton from "@/components/UI/Buttons/TheButton.vue";
 export default {
   mixins: [validators],
   components: {
@@ -104,6 +115,8 @@ export default {
     RemoveUnused,
     NewCategoryTagDialog,
     BulkAssign,
+    ConfirmationDialog,
+    TheButton,
   },
   props: {
     isTags: {