From 32dc18ed6e677333bf60060d8d4c24b50c003005 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Tue, 20 Mar 2018 23:39:23 +0100
Subject: [PATCH] Added dangerous-button component, smarter modal

---
 .../src/components/common/DangerousButton.vue | 44 +++++++++++++++++++
 front/src/components/globals.js               |  4 ++
 front/src/components/semantic/Modal.vue       | 40 +++++++++++------
 3 files changed, 74 insertions(+), 14 deletions(-)
 create mode 100644 front/src/components/common/DangerousButton.vue

diff --git a/front/src/components/common/DangerousButton.vue b/front/src/components/common/DangerousButton.vue
new file mode 100644
index 000000000..03a579d29
--- /dev/null
+++ b/front/src/components/common/DangerousButton.vue
@@ -0,0 +1,44 @@
+<template>
+  <div @click="showModal = true" class="ui red button">
+    <slot></slot>
+
+    <modal class="small" :show.sync="showModal">
+      <div class="header">
+        <slot name="modal-header">Do you want to confirm this action?</slot>
+      </div>
+      <div class="scrolling content">
+        <div class="description">
+          <slot name="modal-content"></slot>
+        </div>
+      </div>
+      <div class="actions">
+        <div class="ui cancel button">Cancel</div>
+        <div class="ui confirm red button" @click="confirm">
+          <slot name="modal-confirm">Confirm</slot>
+        </div>
+      </div>
+    </modal>
+  </div>
+
+</template>
+<script>
+import Modal from '@/components/semantic/Modal'
+
+export default {
+  props: ['action'],
+  components: {
+    Modal
+  },
+  data () {
+    return {
+      showModal: false
+    }
+  },
+  methods: {
+    confirm () {
+      this.showModal = false
+      this.action()
+    }
+  }
+}
+</script>
diff --git a/front/src/components/globals.js b/front/src/components/globals.js
index b1d7d6104..79bbcf1b9 100644
--- a/front/src/components/globals.js
+++ b/front/src/components/globals.js
@@ -8,4 +8,8 @@ import Username from '@/components/common/Username'
 
 Vue.component('username', Username)
 
+import DangerousButton from '@/components/common/DangerousButton'
+
+Vue.component('dangerous-button', DangerousButton)
+
 export default {}
diff --git a/front/src/components/semantic/Modal.vue b/front/src/components/semantic/Modal.vue
index ec7a5a088..fec8fdd05 100644
--- a/front/src/components/semantic/Modal.vue
+++ b/front/src/components/semantic/Modal.vue
@@ -2,7 +2,7 @@
   <div :class="['ui', {'active': show}, 'modal']">
     <i class="close icon"></i>
     <slot>
-      
+
     </slot>
   </div>
 </template>
@@ -19,26 +19,38 @@ export default {
       control: null
     }
   },
-  mounted () {
-    this.control = $(this.$el).modal({
-      onApprove: function () {
-        this.$emit('approved')
-      }.bind(this),
-      onDeny: function () {
-        this.$emit('deny')
-      }.bind(this),
-      onHidden: function () {
-        this.$emit('update:show', false)
-      }.bind(this)
-    })
+  beforeDestroy () {
+    if (this.control) {
+      this.control.remove()
+    }
+  },
+  methods: {
+    initModal () {
+      this.control = $(this.$el).modal({
+        duration: 100,
+        onApprove: function () {
+          this.$emit('approved')
+        }.bind(this),
+        onDeny: function () {
+          this.$emit('deny')
+        }.bind(this),
+        onHidden: function () {
+          this.$emit('update:show', false)
+        }.bind(this)
+      })
+    }
   },
   watch: {
     show: {
       handler (newValue) {
         if (newValue) {
+          this.initModal()
           this.control.modal('show')
         } else {
-          this.control.modal('hide')
+          if (this.control) {
+            this.control.modal('hide')
+            this.control.remove()
+          }
         }
       }
     }