Merge pull request #182 from wonknu/visual_group

enhancement: grouped elements visualy

src/cli/cms/editor/handlebars/compileAbe.js

@@ -50,7 +50,8 @@ export default function compileAbe(){
   hash = arguments[0].hash
   if(content) {
     try {
-      value = eval(`content["${hash.key}"]`)
+      if(hash.key.indexOf('.') > -1) value = eval(`content["${hash.key.split('.').join('"]["')}"]`)
+      else value = eval(`content["${hash.key}"]`)
     }catch(e) {
       value = ''
     }

src/server/controllers/editor.js

@@ -30,7 +30,8 @@ export function add(obj, json, text, util) {
     }
   }else {
     try {
-      obj.value = eval(`json["${getDataIdWithNoSlash(obj.key)}"]`)
+      if(obj.key.indexOf('.') > -1) obj.value = eval(`json["${getDataIdWithNoSlash(obj.key).split('.').join('"]["')}"]`)
+      else obj.value = eval(`json["${getDataIdWithNoSlash(obj.key)}"]`)
     } catch(e) {
       // no value found inside json OKEY
     }
@@ -188,30 +189,59 @@ function orderByTabindex(a, b) {
   return 0
 }
 
+export function orderByGroup(form) {
+  var noGroup = []
+  var groups = {}
+  var groupIndex = {}
+  var index = 0
+
+  Array.prototype.forEach.call(form.item, (item) => {
+    if(item.group != null) {
+      if(typeof groups[item.group] === 'undefined' || groups[item.group] === null){
+        groupIndex[item.group] = index
+        groups[item.group] = []
+      }
+      item.order = -1
+      groups[item.group].push(item)
+    }
+    else noGroup.push(item)
+    index++
+  })
+
+  for(var prop in groups){
+    var group = groups[prop]
+    group[0].firstgroup = 1
+    group[group.length - 1].lastgroup = 1
+    noGroup = noGroup.splice(0, groupIndex[group[0].group]).concat(group).concat(noGroup)
+  }
+
+  return {item: noGroup}
+}
+
 function orderBlock(util) {
 
   var formBlock = {}
 
   for(var tab in util.form) {
 
     var formBlockTab = {}
-    for (var i = 0; i < util.form[tab].item.length; i++) {
-      var blockName = (util.form[tab].item[i].block === '') ? 'default_' + i : util.form[tab].item[i].block
-      if(util.form[tab].item[i].key.indexOf('[') > -1){
-        blockName = util.form[tab].item[i].key.split('[')[0]
+    var utilFormTab = orderByGroup(util.form[tab])
+    for (var i = 0; i < utilFormTab.item.length; i++) {
+      var blockName = (utilFormTab.item[i].block === '') ? 'default_' + i : utilFormTab.item[i].block
+      if(utilFormTab.item[i].key.indexOf('[') > -1){
+        blockName = utilFormTab.item[i].key.split('[')[0]
       }
       if(typeof formBlockTab[blockName] === 'undefined' || formBlockTab[blockName] === null) {
         formBlockTab[blockName] = []
       }
-      formBlockTab[blockName].push(util.form[tab].item[i])
+      formBlockTab[blockName].push(utilFormTab.item[i])
     }
     if(typeof blockName !== 'undefined' && blockName !== null) {
       formBlockTab[blockName].sort(orderByTabindex)
     }
     if(typeof formBlock[tab] === 'undefined' || formBlock[tab] === null) {
       formBlock[tab] = {}
     }
-
     var formBlockOrdered = {}
     var arKeys = Object.keys(formBlockTab).sort((a,b) => {
       if(parseFloat(formBlockTab[a][0].order) < parseFloat(formBlockTab[b][0].order)) {

src/server/views/partials/engine.html

@@ -37,9 +37,11 @@
               </div>
             {{else}}
               {{#each this}}
+                {{#if this.0.firstgroup}}<div class='single-block well well-sm'>{{/if}}
                 <div class="{{cleanTab @key}}">
                 {{{printBlock this @root}}}
                 </div>
+                {{#if this.0.lastgroup}}</div>{{/if}}
               {{/each}}
             {{/ifCond}}
 

test/cms/editor/handlebars/compileAbe.js

@@ -0,0 +1,49 @@
+var chai = require('chai');
+var sinonChai = require('sinon-chai')
+var expect = chai.expect
+chai.use(sinonChai)
+var sinon = require('sinon');
+var path = require('path');
+var fse = require('fs-extra');
+
+var config = require('../../../../src/cli').config
+config.set({root: path.join(process.cwd(), 'test', 'fixtures')})
+
+import data from '../../../fixtures/editor/compileAbeData.json'
+import compileAbe from '../../../../src/cli/cms/editor/handlebars/compileAbe'
+import Handlebars from 'handlebars'
+import abeEngine from '../../../../src/cli/cms/editor/handlebars/abeEngine'
+import xss from 'xss'
+
+describe('compileAbe', function() {
+  before( function(done) {
+    done()  
+  });
+
+  /**
+   * compileAbe.group
+   * 
+   */
+  it('compileAbe.text', function() {
+    this.sinon = sinon.sandbox.create();
+    var stub = sinon.stub(abeEngine, 'instance', { get: function () { return {content: data.compileSimpleText.content} } })
+    var result = compileAbe(data.compileSimpleText.argumentSimpleText)
+    stub.restore()
+    chai.expect(result).to.be.a('string');
+    chai.expect(result).to.be.equal('test value');
+  });
+
+  /**
+   * compileAbe.group
+   * 
+   */
+  it('compileAbe.rte', function() {
+    this.sinon = sinon.sandbox.create();
+    var stub = sinon.stub(abeEngine, 'instance', { get: function () { return {content: data.compileRTE.content} } })
+    var result = compileAbe(data.compileRTE.argumentRTE)
+    stub.restore()
+    chai.expect(result).to.be.a('object');
+    chai.expect(result.string).to.be.equal('alert(1);<div>value</div>');
+  });
+
+});

test/fixtures/editor/compileAbeData.json

@@ -0,0 +1,42 @@
+{
+	"compileSimpleText": {
+    "content": {
+      "name": "test",
+      "test_key": "test value",
+      "abeEditor": true
+    },
+		"argumentSimpleText": {
+	    "name": "abe",
+	    "hash": {
+	      "order": "0",
+	      "key": "test_key",
+	      "type": "text"
+	    },
+	    "data": {
+	      "intl": [],
+	      "_parent": [],
+	      "root": []
+	    }
+	  }
+	},
+	"compileRTE": {
+    "content": {
+      "name": "test",
+      "test_rte_key": "<script>alert(1);</script><div>value</div>",
+      "abeEditor": true
+    },
+		"argumentRTE": {
+	    "name": "abe",
+	    "hash": {
+	      "order": "0",
+	      "key": "test_rte_key",
+	      "type": "rich"
+	    },
+	    "data": {
+	      "intl": [],
+	      "_parent": [],
+	      "root": []
+	    }
+	  }
+	}
+}