Add styleClass editing dialog to cell context menu in grid editor

partials/Cell.vue

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

partials/GridDisplay.vue

@@ -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>
 

partials/GridEditor.vue

@@ -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