feat: added buttons to edit/save view, made ActivityView delegate to ActivityEditor if view_id is 'editor'

Author: ErikBjare

src/components/SelectableVisualization.vue

@@ -1,12 +1,14 @@
 <template lang="pug">
 div
   h5 {{ visualizations[type].title }}
-  div
-    b-dropdown.vis-style-dropdown-btn(size="sm" variant="outline-secondary")
+  div(v-if="editable").vis-style-dropdown-btn
+    b-dropdown.mr-1(size="sm" variant="outline-secondary")
       template(v-slot:button-content)
         icon(name="cog")
       b-dropdown-item(v-for="t in types" :key="t" variant="outline-secondary" @click="$emit('onTypeChange', id, t)" v-bind:disabled="!visualizations[t].available")
         | {{ visualizations[t].title }}
+    b-button.p-0(size="sm", variant="outline-danger" @click="$emit('onRemove', id)")
+      icon(name="times")
 
   div(v-if="type == 'top_apps'")
     aw-summary(:fields="$store.state.activity.window.top_apps",
@@ -65,13 +67,16 @@ div
   top: 0.8em;
   right: 0.8em;
 
-  > .btn {
+  .btn {
     border: 0px;
   }
 }
 </style>
 
 <script>
+import 'vue-awesome/icons/cog';
+import 'vue-awesome/icons/times';
+
 import { split_by_hour_into_data } from '~/util/transforms';
 
 // TODO: Move this somewhere else
@@ -88,6 +93,7 @@ export default {
   props: {
     id: Number,
     type: String,
+    editable: { type: Boolean, default: true },
   },
   data: function () {
     return {

src/route.js

@@ -6,7 +6,6 @@ const Home = () => import('./views/Home.vue');
 // Activity views for desktop
 const Activity = () => import('./views/activity/Activity.vue');
 const ActivityView = () => import('./views/activity/ActivityView.vue');
-const ActivityEditor = () => import('./views/activity/ActivityEditor.vue');
 
 const Buckets = () => import('./views/Buckets.vue');
 const Bucket = () => import('./views/Bucket.vue');
@@ -33,12 +32,6 @@ const router = new VueRouter({
           component: ActivityView,
           props: true,
         },
-        {
-          path: 'editor',
-          meta: { subview: 'editor' },
-          name: 'activity-editor',
-          component: ActivityEditor,
-        },
         // Unspecified should redirect to summary view is the summary view
         // (needs to be last since otherwise it'll always match first)
         {

src/store/modules/settings.js

@@ -35,6 +35,13 @@ const defaultViews = [
       { type: 'top_urls', size: 3 },
     ],
   },
+  {
+    id: 'editor',
+    name: 'Editor',
+    elements: [
+      // TODO: Migrate ActivityEditor to ActivityView
+    ],
+  },
 ];
 
 // initial state
@@ -101,6 +108,9 @@ const mutations = {
   addVisualization(state, { view_id, type }) {
     state.views.find(v => v.id == view_id).elements.push({ type: type });
   },
+  removeVisualization(state, { view_id, el_id }) {
+    state.views.find(v => v.id == view_id).elements.splice(el_id, 1);
+  },
   loadClasses(state, classes) {
     let i = 0;
     state.classes = classes.map(c => Object.assign(c, { id: i++ }));

src/views/activity/Activity.vue

@@ -38,26 +38,26 @@ div
 
   ul.row.nav.nav-tabs.mt-3.px-3
     li.nav-item(v-for="view in views")
-      router-link.nav-link(:to="{ name: 'activity-view', params: {...$route.params, view_id: view.id}}")
+      router-link.nav-link(:to="{ name: 'activity-view', params: {...$route.params, view_id: view.id}}" :class="{'router-link-exact-active': currentView.id == view.id}")
         h6 {{view.name}}
-    li.nav-item
-      router-link.nav-link(:to="{ name: 'activity-editor', params: $route.params }")
-        h6 Editor
+
     li.nav-item(style="margin-left: auto")
       a.nav-link(@click="addView")
         h6
           icon(name="plus")
-          span New view
+          span.d-none.d-md-inline
+            | New view
 
   div
     router-view
 
   div
+    hr
     h5 Options
 
     div.row
       div.col-md-6
-        b-form-group(label="Show category" label-cols="5" label-cols-lg="4")
+        b-form-group(label="Show/filter category" label-cols="5" label-cols-lg="4")
           b-form-select(v-model="filterCategory", :options="categories")
 
     aw-devonly
@@ -110,6 +110,9 @@ import 'vue-awesome/icons/arrow-left';
 import 'vue-awesome/icons/arrow-right';
 import 'vue-awesome/icons/sync';
 import 'vue-awesome/icons/plus';
+import 'vue-awesome/icons/edit';
+import 'vue-awesome/icons/times';
+import 'vue-awesome/icons/save';
 
 export default {
   name: 'Activity',
@@ -138,6 +141,9 @@ export default {
     views: function () {
       return this.$store.state.settings.views;
     },
+    currentView: function () {
+      return this.views.find(v => v.id == this.$route.params.view_id) || this.views[0];
+    },
     _date: function () {
       return this.date || get_today();
     },
@@ -210,6 +216,7 @@ export default {
   methods: {
     addView: function () {
       // TODO: Open modal to ask for options like id, and name
+      // FIXME: view_id is not guaranteed to be unique
       this.$store.commit('settings/addView', {
         view_id: this.$store.state.settings.views.length + 1,
       });

src/views/activity/ActivityEditor.vue

@@ -36,7 +36,7 @@ div.mt-3
 import moment from 'moment';
 
 export default {
-  name: 'Activity',
+  name: 'ActivityEditor',
   props: {
     periodLength: {
       type: String,

src/views/activity/ActivityView.vue

@@ -1,24 +1,46 @@
 <template lang="pug">
 div(v-if="view")
-  div.row.mb-4
+  div(v-if="view.id == 'editor'")
+    ActivityEditor
+
+  div.row
     div.col-md-6.col-lg-4.p-3(v-for="el, index in view.elements")
-      aw-selectable-vis(:id="index" :type="el.type" @onTypeChange="onTypeChange")
+      aw-selectable-vis(:id="index" :type="el.type" @onTypeChange="onTypeChange" @onRemove="onRemove" :editable="editing")
+
+    div.col-md-6.col-lg-4.p-3(v-if="editing")
+      b-button(@click="addVisualization" variant="outline-dark" block size="lg")
+        icon(name="plus")
+        span Add visualization
 
-  b-button(@click="addVisualization")
-    icon(name="plus")
-    span Add visualization to view
+  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="cancel(); editing = !editing;")
+        icon(name="times")
+        span Cancel
+    b-button(v-else variant="outline-dark" size="sm" @click="editing = !editing")
+      icon(name="edit")
+      span Edit view
 </template>
 
 <script>
+import ActivityEditor from '~/views/activity/ActivityEditor';
+
 export default {
   name: 'ActivityView',
+  components: { ActivityEditor: ActivityEditor },
   props: {
     view_id: { type: String, default: 'default' },
     periodLength: {
       type: String,
       default: 'day',
     },
   },
+  data() {
+    return { editing: false };
+  },
   computed: {
     view: function () {
       if (this.view_id == 'default') {
@@ -29,6 +51,12 @@ export default {
     },
   },
   methods: {
+    save() {
+      alert('Not implemented');
+    },
+    cancel() {
+      alert('Not implemented');
+    },
     addVisualization: function () {
       const view_id =
         this.view_id == 'default' ? this.$store.state.settings.views[0].id : this.view_id;
@@ -39,6 +67,12 @@ export default {
         this.view_id == 'default' ? this.$store.state.settings.views[0].id : this.view_id;
       await this.$store.commit('settings/editView', { view_id: view_id, el_id: id, type });
     },
+    async onRemove(id) {
+      console.log('rem');
+      const view_id =
+        this.view_id == 'default' ? this.$store.state.settings.views[0].id : this.view_id;
+      await this.$store.commit('settings/removeVisualization', { view_id: view_id, el_id: id });
+    },
   },
 };
 </script>