feat: made visualizations draggable when editing view

Author: ErikBjare

package-lock.json

@@ -122,6 +122,7 @@
     "vue-d3-sunburst": "^1.0.1",
     "vue-datetime": "^1.0.0-beta.13",
     "vue-property-decorator": "^8.5.1",
+    "vuedraggable": "^2.24.3",
     "vuex": "^3.5.1",
     "weekstart": "^1.0.1"
   }

package.json

@@ -1,6 +1,8 @@
 <template lang="pug">
 div
-  h5 {{ visualizations[type].title }}
+  h5
+    icon.handle(name="bars" v-if="editable" style="opacity: 0.6; cursor: grab;")
+    | {{ visualizations[type].title }}
   div(v-if="editable").vis-style-dropdown-btn
     b-dropdown.mr-1(size="sm" variant="outline-secondary")
       template(v-slot:button-content)
@@ -89,6 +91,7 @@ div
 import _ from 'lodash';
 import 'vue-awesome/icons/cog';
 import 'vue-awesome/icons/times';
+import 'vue-awesome/icons/bars';
 
 import { split_by_hour_into_data } from '~/util/transforms';
 

src/components/SelectableVisualization.vue

@@ -69,6 +69,9 @@ const mutations = {
     }
     console.log('Loaded views:', state.views);
   },
+  setElements(state, { view_id, elements }) {
+    state.views.find(v => v.id == view_id).elements = elements;
+  },
   restoreDefaults(state) {
     state.views = defaultViews;
   },

src/store/modules/views.js

@@ -1,8 +1,8 @@
 <template lang="pug">
 div(v-if="view")
-  div.row
+  draggable.row(v-model="elements" handle=".handle")
     // TODO: Handle large/variable sized visualizations better
-    div.col-md-6.col-lg-4.p-3(v-for="el, index in view.elements", :class="{'col-md-12': isVisLarge(el), 'col-lg-8': isVisLarge(el)}")
+    div.col-md-6.col-lg-4.p-3(v-for="el, index in elements", :key="index", :class="{'col-md-12': isVisLarge(el), 'col-lg-8': isVisLarge(el)}")
       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")
@@ -36,9 +36,13 @@ import 'vue-awesome/icons/save';
 import 'vue-awesome/icons/times';
 import 'vue-awesome/icons/trash';
 import 'vue-awesome/icons/undo';
+import draggable from 'vuedraggable';
 
 export default {
   name: 'ActivityView',
+  components: {
+    draggable: draggable,
+  },
   props: {
     view_id: { type: String, default: 'default' },
     periodLength: {
@@ -57,6 +61,14 @@ export default {
         return this.$store.state.views.views.find(v => v.id == this.view_id);
       }
     },
+    elements: {
+      get() {
+        return this.view.elements;
+      },
+      set(elements) {
+        this.$store.commit('views/setElements', { view_id: this.view.id, elements });
+      },
+    },
   },
   methods: {
     save() {