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

@@ -22,7 +22,7 @@
 
 <script>
 export default {
-  name: "theButton",
+  name: "TheButton",
   props: {
     // Types
     cancel: {

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>

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",

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 {

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: {