Commit 6d2eb85a authored by Anton Koch's avatar Anton Koch

Merge branch 'mosys10--cell-content-doesnt-show-up-in-browser' into 'master'

fixed the broken cell editor in mosys (#10)

See merge request !13
parents 4b475439 2bc45f86
Pipeline #12106 passed with stage
in 7 minutes and 31 seconds
......@@ -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)
......
......@@ -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)
},
......
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