Improved table generation and editing. Resolved #13

package.json

@@ -26,6 +26,7 @@
     "@angular/platform-browser-dynamic": "^6.1.6",
     "@angular/router": "^6.1.6",
     "core-js": "^2.5.4",
+    "node-sass": "^4.9.3",
     "rxjs": "^6.0.0",
     "zone.js": "~0.8.26"
   },

projects/powerflows-testing-app/src/app/app.component.ts

@@ -17,7 +17,7 @@
 import {Component, OnInit} from '@angular/core';
 import {Decision, HitPolicy} from '../../../powerflows/src/lib/modeler/model/decision.model';
 import {ExpressionType} from '../../../powerflows/src/lib/modeler/model/expression.model';
-import {Input, Output, ValueType} from '../../../powerflows/src/lib/modeler/model/field.model';
+import {RuleInput, RuleOutput, ValueType} from '../../../powerflows/src/lib/modeler/model/field.model';
 import {Rule} from '../../../powerflows/src/lib/modeler/model/rule.model';
 
 @Component({
@@ -42,27 +42,30 @@ export class AppComponent implements OnInit {
     decision.expressionType = ExpressionType.LITERAL;
     decision.hitPolicy = HitPolicy.UNIQUE;
 
-    const input1 = new Input();
+    const input1 = new RuleInput();
     input1.name = 'First input (string)';
     input1.description = 'This is very important first input';
     input1.type = ValueType.STRING;
     input1.expression = null;
+    input1.order = 2;
 
-    const input2 = new Input();
+    const input2 = new RuleInput();
     input2.name = 'Second input (boolean)';
     input2.description = 'This is very important second input';
     input2.type = ValueType.BOOLEAN;
     input2.expression = null;
+    input2.order = 1;
 
-    const input3 = new Input();
+    const input3 = new RuleInput();
     input3.name = 'Third input (collection)';
     input3.description = 'This is very important third input';
     input3.type = ValueType.COLLECTION;
     input3.expression = null;
+    input3.order = 3;
 
     decision.inputs = [input1, input2, input3];
 
-    const output1 = new Output();
+    const output1 = new RuleOutput();
     output1.name = 'Output 1';
     output1.description = 'Output 1 description';
     output1.type = ValueType.BOOLEAN;
@@ -75,7 +78,7 @@ export class AppComponent implements OnInit {
     };
 
     const inputEntry2 = {
-      name: 'Second input (string)',
+      name: 'Second input (boolean)',
       expression: {value: 'r1 for input2', type: ExpressionType.LITERAL}
     };
 
@@ -93,7 +96,14 @@ export class AppComponent implements OnInit {
     };
     rule1.outputEntries = [outputEntry1];
 
-    decision.rules = [rule1, rule1, rule1];
+    const rule2 = new Rule();
+    Object.assign(rule2, rule1);
+    rule2.order = 2;
+
+    const rule3 = new Rule();
+    Object.assign(rule3, rule1);
+    rule2.order = 3;
+    decision.rules = [rule1, rule2, rule3];
 
     return decision;
   }

projects/powerflows/src/lib/modeler/model/decision.model.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {Input, Output} from './field.model';
+import { RuleInput, RuleOutput} from './field.model';
 import {ExpressionType} from './expression.model';
 import {Rule} from './rule.model';
 
@@ -23,8 +23,8 @@ export class Decision {
   name: string;
   hitPolicy: HitPolicy;
   expressionType: ExpressionType;
-  inputs: Array<Input>;
-  outputs: Array<Output>;
+  inputs: Array<RuleInput>;
+  outputs: Array<RuleOutput>;
   rules: Array<Rule>;
 }
 

projects/powerflows/src/lib/modeler/model/field.model.ts

@@ -16,17 +16,19 @@
 
 import {Expression} from './expression.model';
 
-export class Input {
+export class RuleInput {
   name: string;
   description: string;
   type: ValueType;
   expression: Expression;
+  order: number;
 }
 
-export class Output {
+export class RuleOutput {
   name: string;
   description: string;
   type: ValueType;
+  order: number;
 }
 
 export enum ValueType {

projects/powerflows/src/lib/modeler/model/rule.model.ts

@@ -17,9 +17,10 @@
 import {Expression} from './expression.model';
 
 export class Rule {
- description: string;
- inputEntries: Array<InputEntry>;
- outputEntries: Array<OutputEntry>;
+  order: number;
+  description: string;
+  inputEntries: Array<InputEntry>;
+  outputEntries: Array<OutputEntry>;
 }
 
 export class InputEntry {

projects/powerflows/src/lib/modeler/powerflows.component.html

@@ -23,16 +23,36 @@ <h3>Editing decision {{decision.id}}</h3>
     <thead>
     <tr>
       <th>#</th>
-      <th contenteditable="true" scope="col" *ngFor="let decisionInput of decision.inputs">{{decisionInput.description}}</th>
-      <th contenteditable="true" scope="col" *ngFor="let decisionOutput of decision.outputs">{{decisionOutput.name}}</th>
+      <th contenteditable="true" scope="col" *ngFor="let decisionInput of getSortedInputs()">
+        {{decisionInput.description}}
+      </th>
+      <th contenteditable="true" scope="col" *ngFor="let decisionOutput of getSortedOutputs()">
+        {{decisionOutput.name}}
+      </th>
     </tr>
     </thead>
     <tbody>
-    <tr *ngFor="let rule of decision.rules;index as rowNumber;">
+    <tr *ngFor="let rule of decision.rules; index as rowNumber;" (click)="editingRule = rule;">
       <th scope="row">{{rowNumber + 1}}</th>
-      <td contenteditable="true" *ngFor="let inputEntry of rule.inputEntries">{{inputEntry.expression.value}}</td>
-      <td contenteditable="true" *ngFor="let outputEntry of rule.outputEntries">{{outputEntry.expression.value}}</td>
+
+      <ng-container
+        *ngTemplateOutlet="rule === editingRule ? editRule : readOnlyRule; context: {rule: rule}"></ng-container>
     </tr>
     </tbody>
   </table>
 </div>
+
+
+<ng-template #editRule let-rule="rule">
+  <td *ngFor="let input of decision.inputs;">
+    <input [(ngModel)]="getEntryForInput(rule, input)?.expression.value">
+  </td>
+  <td *ngFor="let output of decision.outputs">
+    <input [(ngModel)]="getEntryForOutput(rule, output)?.expression.value">
+  </td>
+</ng-template>
+
+<ng-template #readOnlyRule let-rule="rule">
+  <td *ngFor="let input of decision.inputs;">{{getEntryForInput(rule, input)?.expression.value}}</td>
+  <td *ngFor="let output of decision.outputs">{{getEntryForOutput(rule, output)?.expression.value}}</td>
+</ng-template>

projects/powerflows/src/lib/modeler/powerflows.component.spec.ts

@@ -18,6 +18,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { PowerFlowsComponent } from './powerflows.component';
 import {BrowserModule} from '@angular/platform-browser';
+import {FormsModule} from '@angular/forms';
 
 describe('PowerFlowsComponent', () => {
   let component: PowerFlowsComponent;
@@ -26,7 +27,7 @@ describe('PowerFlowsComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ PowerFlowsComponent ],
-      imports: [BrowserModule]
+      imports: [BrowserModule, FormsModule]
     })
     .compileComponents();
   }));

projects/powerflows/src/lib/modeler/powerflows.component.ts

@@ -19,6 +19,8 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {PowerFlowsService} from '../powerflows.service';
 import {Decision} from './model/decision.model';
+import {InputEntry, Rule} from './model/rule.model';
+import {RuleInput, RuleOutput} from './model/field.model';
 
 @Component({
   selector: 'lib-power-flows',
@@ -30,9 +32,27 @@ export class PowerFlowsComponent implements OnInit {
   @Input()
   public decision: Decision;
 
-  constructor(private powerflowsService: PowerFlowsService) { }
+  public editingRule: Rule;
+
+  constructor(private powerflowsService: PowerFlowsService) {
+  }
 
   ngOnInit() {
   }
 
+  getSortedInputs() {
+    return this.decision.inputs.sort((i1, i2) => i1.order - i2.order);
+  }
+
+  getSortedOutputs() {
+    return this.decision.outputs.sort((o1, o2) => o1.order - o2.order);
+  }
+
+  getEntryForInput(rule: Rule, input: RuleInput): InputEntry {
+    return rule.inputEntries.find(inputEntry => inputEntry.name === input.name);
+  }
+
+  getEntryForOutput(rule: Rule, output: RuleOutput): InputEntry {
+    return rule.outputEntries.find(outputEntry => outputEntry.name === output.name);
+  }
 }

projects/powerflows/src/lib/powerflows.module.ts

@@ -17,10 +17,12 @@
 import {NgModule} from '@angular/core';
 import {PowerFlowsComponent} from './modeler/powerflows.component';
 import {BrowserModule} from '@angular/platform-browser';
+import {FormsModule} from '@angular/forms';
 
 @NgModule({
   imports: [
-    BrowserModule
+    BrowserModule,
+    FormsModule
   ],
   declarations: [PowerFlowsComponent],
   exports: [PowerFlowsComponent]