Update mosys grid editor and cells for new data model

partials/Cell.vue

 <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
       },

partials/CellEditor.vue

@@ -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 } }])
         }
       }
     }

partials/GridDisplay.vue

@@ -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}`,

partials/GridEditorDefaultSource.vue

@@ -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))
       },