Pushes changes to persistence layer when resizing, adding blocks, deleting blocks and moving

website/studerende-dk/src/views/Home.vue

 <template>
   <div class="home">
     <div id="grid">
-      <div @mousedown="resizeVertical($event, rowIndex)" :id="rowIndex" class="row" :class="{ drag: draggedBlock !== null }"
+      <div @mousedown="resizeVertical($event, rowIndex)" @mouseup="saveAndStopResizing()" :id="rowIndex" class="row" :class="{ drag: draggedBlock !== null }"
         v-for="(rowBlock, rowIndex) in layout" :key="rowIndex" :style="{ height: rowBlock.height + 'px' }" @mouseleave="cancelRemoveRow(rowIndex)"
         @dragover="dragHover($event, rowIndex)" @dragleave="hidePreview()" @drop="drop($event, rowIndex)">
         <span class="col-preview">
           <component :is="previewType"></component>
         </span>
-        <div @mousedown="resizeHorizontal($event, rowIndex, colIndex)" :id="rowIndex+','+colIndex" class="col" v-show="!isDragged(rowIndex, colIndex)"
+        <div @mousedown="resizeHorizontal($event, rowIndex, colIndex)" @mouseup="saveAndStopResizing()" :id="rowIndex+','+colIndex" class="col" v-show="!isDragged(rowIndex, colIndex)"
           v-for="(colBlock, colIndex) in rowBlock.blocks" :key="colIndex" :style="{ 'flex-grow': colBlock.width, 'order': colIndex }">
           <component :is="colBlock.type" :row="rowIndex" :col="colIndex"></component>
           <button class="hidden-row-item pencil">
@@ -55,6 +55,7 @@ const maxBlocks = 3;
 export default {
   name: 'Home',
   deleting: false,
+  resizing: false,
 
   data() {
     return {
@@ -88,6 +89,7 @@ export default {
         height: 300,
         blocks: [{ type: "ActiveCourses", width: 30 },{ type: "Feed", width: 70 }]
       });
+      this.saveLayout("isaac");
     },
 
     blurRow(rowIndex) {
@@ -141,6 +143,7 @@ export default {
     removeRow(rowIndex) {
       this.cancelRemoveRow(rowIndex);
       this.layout.splice(rowIndex, 1);
+      this.saveLayout("isaac");
     },
 
     cancelRemoveRow(rowIndex) {
@@ -217,6 +220,7 @@ export default {
       document.addEventListener("mouseup", this.eventRemover, false);
       document.getElementsByTagName("html")[0].classList.add("no-select");
       this.dragEnabled = false;
+      this.resizing = true;
     },
 
     resizeVertical(event, index) {
@@ -239,6 +243,14 @@ export default {
       document.addEventListener("mouseup", this.eventRemover, false);
       document.getElementsByTagName("html")[0].classList.add("no-select");
       this.dragEnabled = false;
+      this.resizing = true;
+    },
+
+    saveAndStopResizing() {
+      if(this.resizing) {
+        this.saveLayout("isaac");
+      }
+      this.resizing = false;
     },
 
     eventRemover() {
@@ -420,6 +432,7 @@ export default {
       }
       
       this.draggedBlock = null;
+      this.saveLayout("isaac");
     },
 
     hidePreview() {
@@ -438,7 +451,7 @@ export default {
 
     saveLayout(id) {
       const type = "save"
-      const payload = "id=" + id + "&" + "data=" + JSON.stringify(this.data.layout);
+      const payload = "id=" + id + "&" + "data=" + JSON.stringify(this.layout);
 
       const request = sendServerRequest(type, payload);
       request.onload = () => {
@@ -454,7 +467,7 @@ export default {
       const request = sendServerRequest(type, payload);
       request.onload = () => {
         const response = request.response;
-        Object.assign(this.data.layout, JSON.parse(response));
+        Object.assign(this.layout, JSON.parse(response));
       }
     },
   },