Merge pull request #30 from zackbcom/dev

Delete Confirmation

dev/dev-notes.md

@@ -45,3 +45,4 @@ General
 - Fixed opacity issues with marked steps - [mtoohey31](https://github.com/mtoohey31)
 - Improved documentation
 - Fixed hot-reloading development environment - [grssmnn](https://github.com/grssmnn)
+- Added Confirmation component to deleting recipes - [zackbcom](https://github.com/zackbcom)

frontend/src/components/UI/ButtonRow.vue

@@ -3,9 +3,25 @@
     <template v-slot:extension>
       <v-col></v-col>
       <div v-if="open">
-        <v-btn class="mr-2" fab dark small color="error" @click="deleteRecipe">
+        <v-btn
+          class="mr-2"
+          fab
+          dark
+          small
+          color="error"
+          @click="deleteRecipeConfrim"
+        >
           <v-icon>mdi-delete</v-icon>
         </v-btn>
+        <Confirmation
+          title="Delete Recpie"
+          message="Are you sure you want to delete this recipie?"
+          color="error"
+          icon="mdi-alert-circle"
+          ref="deleteRecipieConfirm"
+          v-on:confirm="deleteRecipe()"
+        />
+
         <v-btn class="mr-2" fab dark small color="success" @click="save">
           <v-icon>mdi-content-save</v-icon>
         </v-btn>
@@ -21,12 +37,20 @@
 </template>
 
 <script>
+import Confirmation from "./Confirmation";
+
 export default {
   props: {
     open: {
-      default: true,
+      type: Boolean,
+      default: true
+    }
   },
+
+  components: {
+    Confirmation
   },
+
   methods: {
     editor() {
       this.$emit("editor");
@@ -34,13 +58,16 @@ export default {
     save() {
       this.$emit("save");
     },
+    deleteRecipeConfrim() {
+      this.$refs.deleteRecipieConfirm.open();
+    },
     deleteRecipe() {
       this.$emit("delete");
     },
     json() {
       this.$emit("json");
-    },
-  },
+    }
+  }
 };
 </script>
 

frontend/src/components/UI/Confirmation.vue

@@ -1,35 +1,127 @@
-<template>
-  <v-dialog v-model="addRecipe" width="650" @click:outside="reset">
-    <v-card :loading="processing">
-      <v-card-title class="headline"> From URL </v-card-title>
 
-      <v-card-text> </v-card-text>
+<template>
+  <v-dialog
+    v-model="dialog"
+    :max-width="width"
+    :style="{ zIndex: zIndex }"
+    @click:outside="cancel"
+    @keydown.esc="cancel"
+  >
+    <v-card>
+      <v-toolbar v-if="Boolean(title)" :color="color" dense flat>
+        <v-icon v-if="Boolean(icon)" left> {{ icon }}</v-icon>
+        <v-toolbar-title v-text="title" />
+      </v-toolbar>
+
+      <v-card-text
+        v-show="!!message"
+        class="pa-4 text--primary"
+        v-html="message"
+      />
 
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn color="primary" text @click="createRecipe"> Exit </v-btn>
-        <v-btn color="primary" text @click="confirm"> Confirm </v-btn>
+        <v-btn color="grey" text @click="cancel"> Cancel </v-btn>
+        <v-btn :color="color" text @click="confirm"> Confirm </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
 </template>
 
 <script>
+/**
+ * Confirmation Component used to add a second validaion step to an action.
+ * @version 1.0.1
+ * @author [zackbcom](https://github.com/zackbcom)
+ * @since Version 1.0.0
+ */
 export default {
+  name: "Confirmation",
   props: {
+    /**
+     * Message to be in body.
+     */
+    message: String,
+    /**
+     * Optional Title message to be used in title.
+     */
+    title: String,
+    /**
+     * Optional Icon to be used in title.
+     */
+    icon: {
       type: String,
+      default: "mid-alert-circle"
     },
-  data() {
-    return {};
+    /**
+     * Color theme of the component. Chose one of the defined theme colors.
+     * @values primary, secondary, accent, success, info, warning, error
+     */
+    color: {
+      type: String,
+      default: "error"
     },
-  methods: {
-    confirm() {
-      this.$emit("confirm");
+    /**
+     * Define the max width of the component.
+     */
+    width: {
+      type: Number,
+      default: 400
     },
-    exit() {
-      // do something? 
+    /**
+     * zIndex of the component.
+     */
+    zIndex: {
+      type: Number,
+      default: 200
     }
   },
+  data: () => ({
+    /**
+     * Keep state of open or closed
+     */
+    dialog: false
+  }),
+  methods: {
+    /**
+     * Sets the modal to be visiable.
+     */
+    open() {
+      this.dialog = true;
+    },
+
+    /**
+     * Cancel button handler.
+     */
+    cancel() {
+      /**
+       * Cancel event.
+       *
+       * @event Cancel
+       * @property {string} content content of the first prop passed to the event
+       */
+      this.$emit("cancel");
+
+      //Hide Modal
+      this.dialog = false;
+    },
+
+    /**
+     * confirm button handler.
+     */
+    confirm() {
+      /**
+       * confirm event.
+       *
+       * @event confirm
+       * @property {string} content content of the first prop passed to the event
+       */
+      this.$emit("confirm");
+
+      //Hide Modal
+      this.dialog = false;
+    }
+  }
 };
 </script>