Commit 57b1b26d authored by Anton's avatar Anton

Add styleClass editing dialog to cell context menu in grid editor

parent 969923a1
......@@ -35,7 +35,7 @@
const classes = ['cell-content']
if (this.cell) {
if (this.cell.type) classes.push(`cell-type-${this.cell.type.toLowerCase()}`)
if (this.cell.styleClass) classes.push(this.cell.styleClass.substr(1))
if (this.cell.styleClass) classes.push(this.cell.styleClass)
}
return classes
}
......
......@@ -2,7 +2,6 @@
div.cell-grid-container
div.cell-grid(:style="gridStyle")
style-tag(v-if="styles", :styles="styles")
template(v-for="(cell, index) in cells")
.cell-item(
:style="getCellStyle(cell)",
......@@ -12,6 +11,7 @@
q-page-sticky(position="top-right", :offset="[18, 18]", v-if="$store.state.auth.user")
q-btn(round, color="primary", small, @click="$router.push(`/mosys/grids/${$route.params.id}/annotate`)")
q-icon(name="edit")
style-tag(v-if="styles", :styles="styles")
</template>
......
......@@ -74,6 +74,8 @@
<script>
import { ObjectUtil } from 'mbjs-utils'
import Cell from './Cell'
import { userHasFeature } from 'mbjs-quasar/src/lib'
import { mapGetters } from 'vuex'
const nullImage = new Image()
nullImage.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
......@@ -85,24 +87,6 @@
props: ['gridUuid'],
data () {
return {
cellContextMenuActions: {
// edit: {
// label: 'Edit',
// handler: this.handleCellContextMenuEdit
// },
delete: {
label: 'Delete',
handler: this.handleCellContextMenuDelete
},
insert_column_left: {
label: 'Insert Column Left',
handler: this.handleGridContextMenuInsertColumnLeft
},
insert_row_above: {
label: 'Insert Row Above',
handler: this.handleGridContextMenuInsertRowAbove
}
},
gridContextMenuActions: {
// add_cell: {
// label: 'Add Cell',
......@@ -140,6 +124,38 @@
resizingGrid: false
}
},
computed: {
...mapGetters({
user: 'auth/getUserState'
}),
cellContextMenuActions () {
const actions = {
// edit: {
// label: 'Edit',
// handler: this.handleCellContextMenuEdit
// },
delete: {
label: 'Delete',
handler: this.handleCellContextMenuDelete
},
insert_column_left: {
label: 'Insert Column Left',
handler: this.handleGridContextMenuInsertColumnLeft
},
insert_row_above: {
label: 'Insert Row Above',
handler: this.handleGridContextMenuInsertRowAbove
}
}
if (userHasFeature(this.user, 'cssediting')) {
actions.edit_css_classname = {
label: 'Edit CSS class name',
handler: this.handleCellContextMenuEditCSS
}
}
return actions
}
},
async mounted () {
window.addEventListener('resize', this.updateGridDimensions)
await this.fetchData()
......@@ -228,6 +244,26 @@
handleCellContextMenu (event) {
this.contextMenuClickPosition = this.getGridPositionForEvent(event)
},
async handleCellContextMenuEditCSS (event, cell) {
try {
let styleClass = await this.$q.dialog({
title: this.$t('forms.edit_css_class.title'),
ok: this.$t('buttons.set_css_class'),
cancel: this.$t('buttons.cancel'),
prompt: {
model: cell.styleClass,
type: 'text'
}
})
if (styleClass) {
if (!styleClass.length) styleClass = undefined
else if (styleClass.indexOf('.') === 0) styleClass = styleClass.substr(1)
}
cell.styleClass = styleClass
this.$store.dispatch('annotations/patch', [cell.uuid, { target: { styleClass: styleClass || null } }])
}
catch (e) { /* dialog canceled */ }
},
handleGridDragOver (event) {
let _this = this
if (this.resizingGrid) {
......@@ -474,6 +510,8 @@
let cell = JSON.parse(annotation.body.value)
if (cell) {
cell.uuid = annotation.uuid
cell.id = annotation.id
cell.styleClass = annotation.target ? annotation.target.styleClass : undefined
return cell
}
return null
......
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