feat: added delete view and restore views to default

Author: ErikBjare

src/store/modules/views.js

@@ -67,9 +67,17 @@ const mutations = {
     }
     console.log('Loaded views:', state.views);
   },
+  restoreDefaults(state) {
+    state.views = defaultViews;
+  },
   addView(state, { view_id }) {
     state.views.push({ id: view_id, name: view_id, elements: [] });
   },
+  removeView(state, { view_id }) {
+    const idx = state.views.map(v => v.id).indexOf(view_id);
+    console.log(idx);
+    state.views.splice(idx, 1);
+  },
   editView(state, { view_id, el_id, type }) {
     console.log(view_id, el_id, type);
     console.log(state.views);

src/views/activity/ActivityView.vue

@@ -12,20 +12,33 @@ div(v-if="view")
         icon(name="plus")
         span Add visualization
 
-  div.d-flex.flex-row-reverse.mt-2
-    div(v-if="editing")
-      b-button(variant="success" @click="save(); editing = !editing;")
-        icon(name="save")
-        span Save
-      b-button.ml-2(variant="outline-dark" @click="discard(); editing = !editing;")
+  div(v-if="editing").mt-2
+    div.d-flex.flex-row-reverse
+      b-button(variant="outline-dark" @click="discard(); editing = !editing;")
         icon(name="times")
         span Cancel
-    b-button(v-else variant="outline-dark" size="sm" @click="editing = !editing")
+      b-button.mr-2(variant="success" @click="save(); editing = !editing;")
+        icon(name="save")
+        span Save
+    div.mt-2.d-flex.flex-row-reverse
+      b-button(variant="warning" size="sm" @click="restoreDefaults();")
+        icon(name="undo")
+        span Restore defaults
+      b-button.mr-2(variant="danger" size="sm" @click="remove();")
+        icon(name="trash")
+        span Remove
+  div(v-else).d-flex.flex-row-reverse.mt-2
+    b-button(variant="outline-dark" size="sm" @click="editing = !editing")
       icon(name="edit")
       span Edit view
 </template>
 
 <script>
+import 'vue-awesome/icons/save';
+import 'vue-awesome/icons/times';
+import 'vue-awesome/icons/trash';
+import 'vue-awesome/icons/undo';
+
 import ActivityEditor from '~/views/activity/ActivityEditor';
 
 export default {
@@ -57,21 +70,31 @@ export default {
     discard() {
       this.$store.dispatch('views/load');
     },
+    remove() {
+      this.$store.commit('views/removeView', { view_id: this.view.id });
+      // If we're on an URL that'll be invalid after removing the view, navigate to the main/default view
+      if (!this.$route.path.includes('default')) {
+        this.$router.replace('./default');
+      }
+    },
+    restoreDefaults() {
+      this.$store.commit('views/restoreDefaults');
+      alert(
+        "All views have been restored to defaults. Changes won't be saved until you click 'Save'."
+      );
+      // If we're on an URL that might become invalid, navigate to the main/default view
+      if (!this.$route.path.includes('default')) {
+        this.$router.replace('./default');
+      }
+    },
     addVisualization: function () {
-      const view_id =
-        this.view_id == 'default' ? this.$store.state.views.views[0].id : this.view_id;
-      this.$store.commit('views/addVisualization', { view_id, type: 'top_apps' });
+      this.$store.commit('views/addVisualization', { view_id: this.view.id, type: 'top_apps' });
     },
     async onTypeChange(id, type) {
-      const view_id =
-        this.view_id == 'default' ? this.$store.state.views.views[0].id : this.view_id;
-      await this.$store.commit('views/editView', { view_id: view_id, el_id: id, type });
+      await this.$store.commit('views/editView', { view_id: this.view.id, el_id: id, type });
     },
     async onRemove(id) {
-      console.log('rem');
-      const view_id =
-        this.view_id == 'default' ? this.$store.state.views.views[0].id : this.view_id;
-      await this.$store.commit('views/removeVisualization', { view_id: view_id, el_id: id });
+      await this.$store.commit('views/removeVisualization', { view_id: this.view.id, el_id: id });
     },
   },
 };

src/views/settings/CategorizationSettings.vue

@@ -4,6 +4,7 @@ div
     div Categorization
   div.float-right
     b-btn.ml-1(@click="restoreDefaultClasses", variant="outline-warning" size="sm")
+      icon(name="undo")
       | Restore defaults
   div
     | Rules for categorizing events. An event can only have one category. If several categories match, the deepest one will be chosen.
@@ -30,6 +31,7 @@ div
 <script>
 import { mapState, mapGetters } from 'vuex';
 import CategoryEditTree from '~/components/CategoryEditTree.vue';
+import 'vue-awesome/icons/undo';
 
 export default {
   name: 'CategorizationSettings',