Commit 6348a8c2 authored by Anders B. Clausen's avatar Anders B. Clausen
Browse files

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

parent d4a72aa8
<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));
}
},
},
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment