fixed variable name

------------------------------
Merge branch 'master' of gitlab.rlp.net:motionbank/applications/systems-frontend

# Conflicts:
#	src/components/mosys
#	src/components/shared
#	src/pages/piecemaker/timelines/create.vue

partials/CellEditor.vue

@@ -2,39 +2,55 @@
 
   q-list
     q-list-header
-      q-item
+      q-item.q-pa-none
         small Cell Content Editor
 
     q-item-separator
 
-    template(v-for="(cell, index) in cells", :key="cell._uuid")
+    .q-mb-md(v-for="(cell, index) in cellsData", :key="cell._uuid")
 
-      template(v-if="index > 0")
-        q-item-separator
+      q-item-separator(v-if="index > 0")
 
-      q-item(v-if="cell.type in itemSpecs", v-for="spec in itemSpecs[cell.type]", :key="`${spec.type}-${spec.path}`")
-        q-field(
-          :icon="typeToIconName[cell.type]",
-          :helper="spec.help",
-          :error="spec.error",
-          :error-label="spec.errorMessage",
-          style="width: 100%")
-          template(v-if="spec.inputType === 'select'")
-            q-select(
-              :float-label="spec.label",
-              :options="spec.selectOptions",
-              @select="value => handleItemChanged(value, cell, spec.path)")
-          template(v-else)
-            q-input(
-              :float-label="spec.label",
-              :type="spec.inputType",
-              :min-rows="1",
-              :max-height="500",
-              :value="cell[spec.path]",
-              @change="value => handleItemChanged(value, cell, spec.path)")
+      <!--q-item(v-if="cell.type in itemSpecs", v-for="spec in itemSpecs[cell.type]", :key="`${spec.type}-${spec.path}`")-->
+      q-item.q-pa-none(v-for="spec in itemSpecs[cell.component]", :key="`${spec.component}-${spec.path}`",
+      v-if="cell.data.path === spec.path")
 
-      q-item(v-else)
-        q-field This cell type is not supported yet: {{ cell.type }}
+        q-item-main
+
+          // preview images
+            q-item-tile
+              img.full-width(v-if="cell.component === 'CellImage'", :src="cell.data.content")
+
+          q-item-tile
+            q-field(
+              :icon="typeToIconName[spec.type]",
+              :helper="spec.help",
+              :error="spec.error",
+              :error-label="spec.errorMessage",
+              style="width: 100%")
+              template(v-if="spec.inputType === 'select'")
+                q-select(
+                  :float-label="spec.label",
+                  :options="spec.selectOptions",
+                  @select="value => handleItemChanged(value, cell, spec.path)")
+              template(v-else)
+                //q-input(
+                //  :float-label="spec.label",
+                //  :type="spec.inputType",
+                //  :min-rows="1",
+                //  :max-height="500",
+                //  :value="cell[spec.path]",
+                //  @change="value => handleItemChanged(value, cell, spec.path)")
+                q-input(
+                  :float-label="spec.label",
+                  :type="spec.inputType",
+                  :min-rows="1",
+                  :max-height="500",
+                  :value="cell.data[spec.path]",
+                  @change="value => handleItemChanged(value, cell, spec.path)")
+
+      // q-item(v-else)
+        q-field This cell type is not supported yet: {{ cell.component }}.{{ spec.path }}
 </template>
 
 <script>
@@ -42,16 +58,18 @@
     props: ['cells'],
     data () {
       return {
+        cellsData: [],
         typeToIconName: {
           'Image': 'photo',
           'IFrame': 'picture in picture',
           'Internal-Link': 'link',
           'Video': 'local movies',
           'Text': 'subject',
-          'Title': 'title'
+          'Title': 'title',
+          'Annotation-List': 'comment'
         },
         itemSpecs: {
-          'Title': [{
+          'CellTitle': [{ // in usage
             inputType: 'text',
             type: 'Title',
             label: 'Title Cell',
@@ -71,7 +89,7 @@
             value: '',
             path: 'link'
           }],
-          'Text': [{
+          'CellText': [{ // in usage
             inputType: 'textarea',
             type: 'Text',
             label: 'Text Cell',
@@ -81,7 +99,7 @@
             value: '',
             path: 'content'
           }],
-          'Video': [{
+          'CellVideo': [{ // in usage
             inputType: 'url',
             type: 'Video',
             label: 'Video Cell',
@@ -111,7 +129,7 @@
             value: 0,
             path: 'duration'
           }],
-          'Image': [{
+          'CellImage': [{
             inputType: 'url',
             type: 'Image',
             label: 'Image Cell',
@@ -131,7 +149,7 @@
             value: '',
             path: 'link'
           }],
-          'Internal-Link': [{
+          'CellInternalLink': [{ // in usage
             inputType: 'url',
             type: 'Internal-Link',
             label: 'Link Cell',
@@ -141,7 +159,7 @@
             value: '',
             path: 'content'
           }],
-          'IFrame': [{
+          'CellIFrame': [{ // in usage
             inputType: 'url',
             type: 'IFrame',
             label: 'IFrame Cell',
@@ -151,7 +169,7 @@
             value: '',
             path: 'content'
           }],
-          'Annotation-List': [{
+          'CellAnnotationList': [{ // in usage
             inputType: 'text',
             type: 'Annotation-List',
             label: 'Annotation List Cell',
@@ -244,7 +262,23 @@
         }
       }
     },
+    watch: {
+      async cells (val) {
+        this.getCellsData(val)
+      }
+    },
+    mounted () {
+      this.getCellsData(this.cells)
+    },
     methods: {
+      async getCellsData (cells) {
+        this.cellsData = []
+        for (let i = 0; i < cells.length; i++) {
+          let c = await this.$store.dispatch('cells/get', cells[i].body.source.id)
+          c.data.path = 'content'
+          this.cellsData.push(c)
+        }
+      },
       async handleItemChanged (value, cell, path) {
         if (cell.inputType !== 'url') {
           await this.updateCellContent(value, cell, path)

partials/GridEditor.vue

@@ -218,7 +218,8 @@
         let selectedCells = Object.keys(this.annotationUIStates).filter(k => {
           return _this.annotationUIStates[k].selected
         }).map(k => {
-          return _this.cells.find(c => c._uuid === k)
+          // return _this.cells.find(c => c._uuid === k)
+          return _this.annotations.find(c => c._uuid === k)
         })
         this.$store.commit('mosys/setSelectedCells', selectedCells)
       },