vms

components.x-condition.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    updateOperator(name) {
      let operator = this.get('operators').findBy('name', name);
      this.set('operator', operator);
      
      if (operator && operator.grouping) {
        let conditions = this.get('conditions');
        if (!conditions) {
          this.set('conditions', Ember.A(['']));
        }
      } else {
        this.set('conditions', null);
      }
    },
    addCondition() {
    	this.get('conditions').pushObject('');
    }
  }
});

components.x-rule.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  operators: [
    { name: 'AND', grouping: true },
    { name: 'OR', grouping: true },
    { name: 'IS', grouping: false, hasArgs: true },
    { name: 'IS_ANY_OF', grouping: false, hasArgs: true },
    { name: 'IS_PRESENT', grouping: false, hasArgs: false }
  ],
  fields: [
    "c2",
"c3",
"c4",
"c6",
"ns_ak_d_vce",
"ns_st_ami",
"ns_st_an",
"ns_st_bn",
"ns_st_ce",
"ns_st_ci",
"ns_st_cl",
"ns_st_cn",
"ns_st_ct",
"ns_st_ddt",
"ns_st_ec",
"ns_st_en",
"ns_st_ep",
"ns_st_ev",
"ns_st_ge",
"ns_st_ia",
"ns_st_id",
"ns_st_it",
"ns_st_pr",
"ns_st_pt",
"ns_st_pu",
"ns_st_sn",
"ns_st_sq",
"ns_st_st",
"ns_st_stc",
"ns_st_tdt",
"ns_st_tep",
"ns_st_tpr",
"ns_test",
"ns_ts",
  ]
});

styles.app.css

.conditions {
	margin-left: 20px;
}

templates.application.hbs

{{x-rule operators=operators fields=fields}}

templates.components.x-condition.hbs

Operator
<select onchange={{action "updateOperator" value="target.value"}}>
	<option></option>
	{{#each operators as |operator|}}
		<option>{{operator.name}}</option>
  {{/each}}
</select>
{{#if operator}}
	{{#if operator.grouping}}
  	<div class="conditions">
    	{{#each conditions as |condition|}}
      	{{x-condition operators=operators fields=fields}}
      {{/each}}
      <button {{action "addCondition"}}>+</button>
    </div>
	{{else}}
		Field
    <select>
			<option></option>
			{{#each fields as |field|}}
				<option>{{field}}</option>
  		{{/each}}
  	</select>
    {{#if operator.hasArgs}}
    	Value
      <input>
    {{/if}}
	{{/if}}
{{/if}}

templates.components.x-rule.hbs

Name <input>
<br>
<br>
Condition
{{x-condition operators=operators fields=fields}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}