Closes #40. Display a confirmation modal before stopping an environment

gbolo · Jan 14, 2019 · 2b4700a · 2b4700a
1 parent 53d7bf5
commit 2b4700a
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 18 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -15,6 +15,7 @@
     "i": "^0.3.6",
     "register-service-worker": "^1.0.0",
     "vue": "^2.5.17",
+    "vue-js-modal": "^1.3.28",
     "vue-js-toggle-button": "^1.3.1",
     "vuex": "^3.0.1"
   },

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,19 +1,13 @@
 <template>
   <div id="app">
-    <Header v-bind:version="version" />
-    <button
-      class="refresh-btn"
-      @click="refresh"
-    >
-      <clr-icon
-        v-bind:class="[shouldSpinIcon ? 'spin-icon' : '']"
-        shape="sync"
-        size="16"
-      ></clr-icon>
+    <Header v-bind:version="version"/>
+    <button class="refresh-btn" @click="refresh">
+      <clr-icon v-bind:class="[shouldSpinIcon ? 'spin-icon' : '']" shape="sync" size="16"></clr-icon>
     </button>
 
-    <EnvironmentList v-bind:environments="environments" />
-    <Snackbar v-bind:message="error" />
+    <EnvironmentList v-bind:environments="environments"/>
+    <Snackbar v-bind:message="error"/>
+    <v-dialog/>
   </div>
 </template>
 
@@ -125,5 +119,11 @@ export default {
   .spin-icon {
     animation: spin infinite 0.75s linear;
   }
+
+  // Override vue-js-modal (<vdialog/>) css
+  .vue-dialog {
+    width: 400px !important;
+    left: calc(50% - 200px) !important;
+  }
 }
 </style>
diff --git a/frontend/src/components/Environment.vue b/frontend/src/components/Environment.vue
@@ -136,7 +136,25 @@ export default {
       this.$store.dispatch('startEnvironment', id);
     },
     stop(id) {
-      this.$store.dispatch('stopEnvironment', id);
+      this.$modal.show('dialog', {
+        title: 'Are you sure?',
+        text: `This action will stop all running instances of environment ${
+          this.env.name
+        }.`,
+        buttons: [
+          {
+            title: 'Cancel',
+            default: true,
+          },
+          {
+            title: 'Stop',
+            handler: () => {
+              this.$store.dispatch('stopEnvironment', id);
+              this.$modal.hide('dialog');
+            },
+          },
+        ],
+      });
     },
     refresh(id) {
       this.$store.dispatch('fetchEnvironmentDetails', id);

diff --git a/frontend/src/components/Instance.vue b/frontend/src/components/Instance.vue
@@ -40,8 +40,8 @@ export default {
   computed: {
     isUnknownState() {
       return (
-        this.instance.state.toLowerCase() !== 'running' &&
-        this.instance.state.toLowerCase() !== 'stopped'
+        this.instance.state.toLowerCase() !== 'running'
+        && this.instance.state.toLowerCase() !== 'stopped'
       );
     },
     isLoading() {
@@ -54,9 +54,9 @@ export default {
     };
   },
   methods: {
-    toggleInstance({ value, srcEvent }) {
+    toggleInstance({ value }) {
       const { id } = this.instance;
-      const envId = this.envId;
+      const { envId } = this;
       this.isOn = value;
       if (!value) {
         this.$store.dispatch('stopInstance', { id, envId });
@@ -66,7 +66,7 @@ export default {
     },
   },
   watch: {
-    instance(newInstance, oldInstance) {
+    instance() {
       this.isOn = this.instance.state.toLowerCase() === 'running';
     },
   },

diff --git a/frontend/src/main.js b/frontend/src/main.js
@@ -1,7 +1,9 @@
 import Vue from 'vue';
+import VModal from 'vue-js-modal';
 import store from './store';
 import App from './App.vue';
 
+Vue.use(VModal, { dialog: true });
 Vue.config.productionTip = false;
 
 new Vue({