[us40] Use ace editor when displaying any script in the list of rules

Author: Musholic

src/app/ace-editor/ace-editor.component.html

@@ -1 +1 @@
-<div #ruleScriptEdit class="ruleScriptEdit"></div>
+<div #ruleScriptEdit></div>

src/app/ace-editor/ace-editor.component.scss

@@ -1,4 +1 @@
 
-.ruleScriptEdit {
-  height: 200px;
-}

src/app/ace-editor/ace-editor.component.ts

@@ -3,6 +3,7 @@ import * as ace from "ace-builds";
 import {Ace} from "ace-builds";
 import {MatFormFieldControl} from "@angular/material/form-field";
 import {Subject} from "rxjs";
+import {BooleanInput, coerceBooleanProperty} from "@angular/cdk/coercion";
 import Editor = Ace.Editor;
 
 @Component({
@@ -26,7 +27,6 @@ export class AceEditorComponent implements MatFormFieldControl<string>, OnInit {
   focused: boolean = false;
   empty: boolean = false;
   shouldLabelFloat: boolean = true;
-  disabled: boolean = false;
   errorState: boolean = false;
   controlType?: string | undefined = "app-ace-editor";
   autofilled?: boolean | undefined;
@@ -44,22 +44,45 @@ export class AceEditorComponent implements MatFormFieldControl<string>, OnInit {
   private _required = false;
 
   @Input()
-  get required() {
+  get required(): boolean {
     return this._required;
   }
 
-  set required(req: boolean) {
-    this._required = req;
+  set required(req: BooleanInput) {
+    this._required = coerceBooleanProperty(req);
     this.stateChanges.next();
   }
 
+  private _disabled = false;
+
+  @Input()
+  get disabled(): boolean {
+    return this._disabled;
+  }
+
+  set disabled(value: BooleanInput) {
+    this._disabled = coerceBooleanProperty(value);
+    this.stateChanges.next();
+  }
 
   ngOnInit() {
     if (this.ruleScriptEdit) {
-      this.editor = ace.edit(this.ruleScriptEdit.nativeElement);
-      this.editor.session.setMode("ace/mode/javascript");
+      this.editor = ace.edit(this.ruleScriptEdit.nativeElement, {
+        value: this.value,
+        mode: "ace/mode/javascript",
+        minLines: 2,
+        maxLines: 15
+      });
+
+      if (this.disabled) {
+        this.editor.setReadOnly(true);
+        this.editor.setHighlightActiveLine(false);
+        this.editor.setHighlightGutterLine(false);
+        // hide the cursor
+        // @ts-ignore
+        this.editor.renderer.$cursorLayer.element.style.display = "none"
+      }
 
-      this.editor.setValue(this.value);
       this.editor.on("input", () => {
         this.valueChange.emit(this.editor?.getValue());
         this.stateChanges.next();

src/app/rules/rules.component.html

@@ -34,7 +34,7 @@ <h1>Setup rules</h1>
     <mat-form-field class="fullWidth">
       <mat-label>Script</mat-label>
       <!--      TODO: Also use for viewing-->
-      <app-ace-editor [(value)]="ruleToCreateOrUpdate.script" [required]="true" name="script"></app-ace-editor>
+      <app-ace-editor [(value)]="ruleToCreateOrUpdate.script" name="script" required></app-ace-editor>
     </mat-form-field>
     <div class="actionButtons">
       <button (click)="cancelCreateOrUpdate()" mat-raised-button>Cancel</button>
@@ -54,9 +54,8 @@ <h1>Setup rules</h1>
             *ngIf="!first"> &nbsp;&gt; </span>{{ cat }}</span>
         </mat-panel-description>
       </mat-expansion-panel-header>
-      <div class="ruleScript">
-        {{ rule.script }}
-      </div>
+      <app-ace-editor [value]="rule.script" class="ruleScript" disabled>
+      </app-ace-editor>
       <div class="ruleButtons">
         <button (click)="update(rule)" mat-raised-button>Edit</button>
         &nbsp;

src/app/rules/rules.component.spec.ts

@@ -4,7 +4,7 @@ import {AppModule} from "../app.module";
 import {mock, when} from "strong-mock";
 import {MatButtonHarness} from "@angular/material/button/testing";
 import {HarnessLoader, TestKey} from "@angular/cdk/testing";
-import {ComponentFixture, fakeAsync, tick} from "@angular/core/testing";
+import {ComponentFixture, fakeAsync, flush, tick} from "@angular/core/testing";
 import {TestbedHarnessEnvironment} from "@angular/cdk/testing/testbed";
 import {MatInputHarness} from "@angular/material/input/testing";
 import {MatFormFieldHarness} from "@angular/material/form-field/testing";
@@ -67,6 +67,7 @@ describe('RulesComponent', () => {
     // Assert
     tick();
     fixture.detectChanges();
+    flush();
     expect(Page.getRuleNames()).toEqual(['Electric bill', 'Bank account statement']);
     expect(Page.getRuleCategory('Electric bill')).toEqual('Electricity  > Bills');
     expect(Page.getRuleScript('Electric bill')).toEqual('return fileName === "electricity_bill.pdf"');
@@ -220,8 +221,7 @@ class Page {
     let rule = ngMocks.findAll("mat-panel-title")
       .find(row => row.nativeNode.textContent.trim() === name)
       ?.parent?.parent;
-    return ngMocks.find(rule, '.ruleScript')
-      .nativeNode.textContent.trim();
+    return ngMocks.find(rule, AceEditorComponent).componentInstance.editor?.getValue() ?? '';
   }
 
   async clickOnCreateNewRule() {