Commit 43a2ce1b authored by Anton's avatar Anton

Update mosys grid editor and cells for new data model

parent ece4fedb
<template lang="pug">
.cell-item-inner(:class="{'display-preview': preview, 'display-full': display}")
template(v-if="cellTypeName")
template(v-if="cell")
component(
:is="cellTypeName",
:is="cell.component",
:cell="cell",
:class="cellClasses",
:display="display",
......@@ -21,21 +21,19 @@
import cellTypes from './cells'
export default {
props: ['cell', 'display', 'preview', 'annotation'],
props: ['annotation', 'display', 'preview'],
data () {
return {
cell: undefined,
selected: false,
inViewPort: false
}
},
computed: {
cellTypeName () {
return this.cell.type ? this.cellTypeToClassName(this.cell.type) : ''
},
cellClasses () {
let classes = ['cell-content']
if (this.cell) {
if (this.cell.type) classes.push(`cell-type-${this.cell.type.toLowerCase()}`)
if (this.cell.component) classes.push(`cell-type-${this.cell.component.toLowerCase()}`)
if (this.cell.styleClass) {
classes = classes.concat(this.cell.styleClass.split(' '))
}
......@@ -43,17 +41,23 @@
return classes
}
},
mounted () {
watch: {
async annotation (val) {
if (val) await this.getCell()
}
},
async mounted () {
this.onScroll()
this.$parent.$el.addEventListener('scroll', this.onScroll, false)
if (this.cellTypeName && cellTypes.hasOwnProperty(this.cellTypeName) === false) {
throw new Error('This cell type is missing: ' + this.cell.type)
}
if (this.annotation) await this.getCell()
},
beforeDestroy () {
this.$parent.$el.removeEventListener('scroll', this.onScroll)
},
methods: {
async getCell () {
this.cell = await this.$store.dispatch('cells/get', this.annotation.body.source.id)
},
onScroll () {
const
bounds = this.$el.getBoundingClientRect(),
......@@ -61,9 +65,6 @@
this.inViewPort = (bounds.left >= 0 && bounds.left <= boundsParent.width) ||
(bounds.right >= 0 && bounds.right <= boundsParent.width)
},
cellTypeToClassName (type) {
return 'Cell' + type.slice(0, 1).toUpperCase() + type.slice(1).replace(/[^a-z0-9]/ig, '')
},
handleClick () {
this.selected = !this.selected
},
......
......@@ -257,12 +257,15 @@
}
},
async updateCellContent (value, cell, path) {
const destUuid = cell._uuid
if (destUuid) {
const annotation = await this.$store.dispatch('annotations/get', destUuid)
cell[path] = value
annotation.body.value = JSON.stringify(cell)
await this.$store.dispatch('annotations/patch', [destUuid, { body: annotation.body, target: annotation.target }])
if (cell.id) {
cell.data[path] = value
await this.$store.dispatch('cells/patch', [cell.id, { data: { [path]: value } }])
}
},
async updateCellConfig (value, cell, path) {
if (cell.id) {
cell.config[path] = value
await this.$store.dispatch('cells/patch', [cell.id, { config: { [path]: value } }])
}
}
}
......
......@@ -5,7 +5,7 @@
div.cell-grid(:style="gridStyle")
template(v-for="(cell, index) in cells")
.cell-item(
:style="getCellStyle(cell)",
:style="getAnnotationStyle(cell)",
:title="cell.title")
cell(:cell="cell", display="display")
......@@ -225,7 +225,7 @@
}
}
},
getCellStyle (cell) {
getAnnotationStyle (cell) {
return {
'grid-column-start': cell.x,
'grid-column-end': `span ${cell.width}`,
......
This diff is collapsed.
......@@ -53,6 +53,7 @@
inputType: 'text',
type: 'Title',
label: 'Title Cell',
component: 'CellTitle',
help: '',
error: false,
errorMessage: '',
......@@ -62,6 +63,7 @@
inputType: 'textarea',
type: 'Text',
label: 'Text Cell',
component: 'CellText',
help: '',
error: false,
errorMessage: '',
......@@ -71,6 +73,7 @@
inputType: 'url',
type: 'Video',
label: 'Video Cell',
component: 'CellVideo',
help: 'Insert a URL to: a video file or a Vimeo / YouTube video page',
error: false,
errorMessage: 'Needs to be a valid URL',
......@@ -80,6 +83,7 @@
inputType: 'url',
type: 'Image',
label: 'Image Cell',
component: 'CellImage',
help: 'Insert a URL to an image file',
error: false,
errorMessage: 'Needs to be a valid URL',
......@@ -89,6 +93,7 @@
inputType: 'url',
type: 'Internal-Link',
label: 'Link Cell',
component: 'CellInternalLink',
help: 'Insert a URL to a page in this system',
error: false,
errorMessage: 'Needs to be a valid URL',
......@@ -98,6 +103,7 @@
inputType: 'url',
type: 'IFrame',
label: 'IFrame Cell',
component: 'CellIFrame',
help: 'Insert some URL',
error: false,
errorMessage: 'Needs to be a valid URL',
......@@ -122,13 +128,9 @@
this.handleItemChanged(inputField.value, item)
}
const resourceCell = {
uuid: null,
type: item.type,
x: 1,
y: 1,
width: 1,
height: 1,
content: item.value
data: { content: item.value },
config: {},
component: item.component
}
event.dataTransfer.setData('text/plain', JSON.stringify(resourceCell))
},
......
Markdown is supported
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