Issue - 141 - Validate macro actions (#141) (#395)

* Issue - 141 - Validate macro actions (#141)

* review: refactor validation logic based on each macro tab component emitted event

* review: mouse key macro invalid if any of the X, Y fields are empty

* review: apply review comments for shorthand if conditions and imports

packages/uhk-web/src/app/components/macro/action-editor/macro-action-editor.component.html

@@ -29,17 +29,17 @@
             </ul>
         </div>
         <div class="col-xs-12 col-lg-9 editor__tabs" [ngSwitch]="activeTab">
-            <macro-text-tab #tab *ngSwitchCase="TabName.Text" [macroAction]="editableMacroAction"></macro-text-tab>
+            <macro-text-tab #tab *ngSwitchCase="TabName.Text" [macroAction]="editableMacroAction" (valid)="onValid($event)"></macro-text-tab>
-            <macro-key-tab #tab *ngSwitchCase="TabName.Keypress" [macroAction]="editableMacroAction"></macro-key-tab>
+            <macro-key-tab #tab *ngSwitchCase="TabName.Keypress" [macroAction]="editableMacroAction" (valid)="onValid($event)"></macro-key-tab>
-            <macro-mouse-tab #tab *ngSwitchCase="TabName.Mouse" [macroAction]="editableMacroAction"></macro-mouse-tab>
+            <macro-mouse-tab #tab *ngSwitchCase="TabName.Mouse" [macroAction]="editableMacroAction" (valid)="onValid($event)"></macro-mouse-tab>
-            <macro-delay-tab #tab *ngSwitchCase="TabName.Delay" [macroAction]="editableMacroAction"></macro-delay-tab>
+            <macro-delay-tab #tab *ngSwitchCase="TabName.Delay" [macroAction]="editableMacroAction" (valid)="onValid($event)"></macro-delay-tab>
         </div>
     </div>
     <div class="row">
         <div class="col-xs-12 flex-button-wrapper editor__actions-container">
             <div class="editor__actions">
                 <button class="btn btn-sm btn-default flex-button" type="button" (click)="onCancelClick()"> Cancel </button>
-                <button class="btn btn-sm btn-primary flex-button" type="button" (click)="onSaveClick()"> Save </button>
+                <button class="btn btn-sm btn-primary flex-button" type="button" (click)="onSaveClick()" [disabled]="!isSelectedMacroValid"> Save </button>
             </div>
         </div>
     </div>

packages/uhk-web/src/app/components/macro/action-editor/macro-action-editor.component.ts

@@ -38,6 +38,7 @@ export class MacroActionEditorComponent implements OnInit {
     /* tslint:disable:variable-name: It is an enum type. So it can start with uppercase. */
     TabName = TabName;
     /* tslint:enable:variable-name */
+    isSelectedMacroValid = false;
 
     ngOnInit() {
         this.updateEditableMacroAction();
@@ -66,12 +67,15 @@ export class MacroActionEditorComponent implements OnInit {
         }
     }
 
+    onValid = (isMacroValid: boolean) => this.isSelectedMacroValid = isMacroValid;
+
     selectTab(tab: TabName): void {
         this.activeTab = tab;
         if (tab === this.getTabName(this.macroAction)) {
             this.updateEditableMacroAction();
         } else {
             this.editableMacroAction = undefined;
+            this.isSelectedMacroValid = false;
         }
     }
 

packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.html

@@ -13,8 +13,8 @@
                  step="0.1" 
                  placeholder="Delay amount" 
                  class="form-control"
-                 [attr.value]="delay"
+                 [value]="delay"
-                 (change)="setDelay($event)">
+                 (change)="setDelay(macroDelayInput.value)">
         </div>
     </div>
     <div class="row macro-delay__presets">

packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.ts

@@ -8,6 +8,7 @@ import {
 } from '@angular/core';
 
 import { DelayMacroAction } from '../../../../../config-serializer/config-items/macro-action';
+import { MacroBaseComponent } from '../macro-base.component';
 
 const INITIAL_DELAY = 0.5; // In seconds
 
@@ -18,24 +19,29 @@ const INITIAL_DELAY = 0.5; // In seconds
     host: { 'class': 'macro__delay' },
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class MacroDelayTabComponent implements OnInit {
+export class MacroDelayTabComponent extends MacroBaseComponent implements OnInit {
     @Input() macroAction: DelayMacroAction;
     @ViewChild('macroDelayInput') input: ElementRef;
 
     delay: number;
     presets: number[] = [0.3, 0.5, 0.8, 1, 2, 3, 4, 5];
 
-    constructor() { }
+    constructor() { super(); }
 
     ngOnInit() {
         if (!this.macroAction) {
             this.macroAction = new DelayMacroAction();
         }
         this.delay = this.macroAction.delay > 0 ? this.macroAction.delay / 1000 : INITIAL_DELAY;
+        this.validate(); // initial validation as it has defaults
     }
 
     setDelay(value: number): void {
         this.delay = value;
         this.macroAction.delay = this.delay * 1000;
+        this.validate();
     }
+
+    isMacroValid = () => this.macroAction.delay !== 0;
+
 }

packages/uhk-web/src/app/components/macro/action-editor/tab/index.ts

@@ -2,3 +2,4 @@ export { MacroDelayTabComponent } from './delay';
 export { MacroKeyTabComponent } from './key';
 export { MacroMouseTabComponent } from './mouse';
 export { MacroTextTabComponent } from './text';
+export { MacroBaseComponent } from './macro-base.component';

packages/uhk-web/src/app/components/macro/action-editor/tab/key/macro-key.component.html

@@ -26,7 +26,7 @@
             <h4 *ngIf="activeTab === TabName.Keypress">Press key</h4>
             <h4 *ngIf="activeTab === TabName.Hold">Hold key</h4>
             <h4 *ngIf="activeTab === TabName.Release">Release key</h4>
-            <keypress-tab #keypressTab [defaultKeyAction]="defaultKeyAction" [longPressEnabled]="false"></keypress-tab>
+            <keypress-tab #keypressTab [defaultKeyAction]="defaultKeyAction" [longPressEnabled]="false" (validAction)="validate()"></keypress-tab>
         </div>
     </div>
 </div>

packages/uhk-web/src/app/components/macro/action-editor/tab/key/macro-key.component.ts

@@ -3,6 +3,7 @@ import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { KeystrokeAction } from '../../../../../config-serializer/config-items/key-action';
 import { KeyMacroAction, MacroSubAction } from '../../../../../config-serializer/config-items/macro-action';
 import { KeypressTabComponent, Tab } from '../../../../popover/tab';
+import { MacroBaseComponent } from '../macro-base.component';
 
 enum TabName {
     Keypress,
@@ -19,7 +20,7 @@ enum TabName {
     ],
     host: { 'class': 'macro__mouse' }
 })
-export class MacroKeyTabComponent implements OnInit {
+export class MacroKeyTabComponent extends MacroBaseComponent implements OnInit {
     @Input() macroAction: KeyMacroAction;
     @ViewChild('tab') selectedTab: Tab;
     @ViewChild('keypressTab') keypressTab: KeypressTabComponent;
@@ -40,6 +41,7 @@ export class MacroKeyTabComponent implements OnInit {
 
     selectTab(tab: TabName): void {
         this.activeTab = tab;
+        this.validate();
     }
 
     getTabName(macroAction: KeyMacroAction): TabName {
@@ -71,4 +73,9 @@ export class MacroKeyTabComponent implements OnInit {
         return keyMacroAction;
     }
 
+    isMacroValid = () => {
+        const keyMacroAction = this.getKeyMacroAction();
+        return !!keyMacroAction.scancode || !!keyMacroAction.modifierMask;
+    }
+
 }

packages/uhk-web/src/app/components/macro/action-editor/tab/macro-base.component.ts

@@ -0,0 +1,14 @@
+import { Output, EventEmitter } from '@angular/core';
+
+export interface MacroValidator {
+    isMacroValid: () => boolean;
+}
+
+export abstract class MacroBaseComponent implements MacroValidator {
+
+    @Output() valid = new EventEmitter<boolean>();
+    abstract isMacroValid: () => boolean;
+
+    validate = () => this.valid.emit(this.isMacroValid());
+
+}

packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.html

@@ -40,11 +40,11 @@
             <div class="form-horizontal">
                 <div class="form-group">
                     <label for="move-mouse-x">X</label>
-                    <input id="move-mouse-x" type="number" class="form-control" [(ngModel)]="macroAction['x']"> pixels
+                    <input id="move-mouse-x" type="number" class="form-control" [(ngModel)]="macroAction['x']"  (keyup)="validate()"> pixels
                 </div>
                 <div class="form-group">
                     <label for="move-mouse-y">Y</label>
-                    <input id="move-mouse-y" type="number" class="form-control" [(ngModel)]="macroAction['y']"> pixels
+                    <input id="move-mouse-y" type="number" class="form-control" [(ngModel)]="macroAction['y']"  (keyup)="validate()"> pixels
                 </div>
             </div>
         </div>
@@ -54,11 +54,11 @@
             <div class="form-horizontal">
                 <div class="form-group">
                     <label for="scroll-mouse-x">X</label>
-                    <input id="scroll-mouse-x" type="number" class="form-control" [(ngModel)]="macroAction['x']"> pixels
+                    <input id="scroll-mouse-x" type="number" class="form-control" [(ngModel)]="macroAction['x']" (keyup)="validate()"> pixels
                 </div>
                 <div class="form-group">
                     <label for="scroll-mouse-y">Y</label>
-                    <input id="scroll-mouse-y" type="number" class="form-control" [(ngModel)]="macroAction['y']"> pixels
+                    <input id="scroll-mouse-y" type="number" class="form-control" [(ngModel)]="macroAction['y']" (keyup)="validate()"> pixels
                 </div>
             </div>
         </div>

packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.ts

@@ -7,6 +7,7 @@ import {
     MacroSubAction
 } from '../../../../../config-serializer/config-items/macro-action';
 import { Tab } from '../../../../popover/tab';
+import { MacroBaseComponent } from '../macro-base.component';
 
 type MouseMacroAction = MouseButtonMacroAction | MoveMouseMacroAction | ScrollMouseMacroAction;
 
@@ -27,7 +28,7 @@ enum TabName {
     ],
     host: { 'class': 'macro__mouse' }
 })
-export class MacroMouseTabComponent implements OnInit {
+export class MacroMouseTabComponent extends MacroBaseComponent implements OnInit {
     @Input() macroAction: MouseMacroAction;
     @ViewChild('tab') selectedTab: Tab;
 
@@ -39,6 +40,7 @@ export class MacroMouseTabComponent implements OnInit {
     private selectedButtons: boolean[];
 
     constructor() {
+        super();
         this.buttonLabels = ['Left', 'Middle', 'Right'];
         this.selectedButtons = Array(this.buttonLabels.length).fill(false);
     }
@@ -65,6 +67,8 @@ export class MacroMouseTabComponent implements OnInit {
 
         if (tab === this.getTabName(this.macroAction)) {
             return;
+        } else {
+            this.selectedButtons = [];
         }
 
         switch (tab) {
@@ -79,11 +83,13 @@ export class MacroMouseTabComponent implements OnInit {
                 this.macroAction.action = this.getAction(tab);
                 break;
         }
+        this.validate();
     }
 
     setMouseClick(index: number): void {
         this.selectedButtons[index] = !this.selectedButtons[index];
         (<MouseButtonMacroAction>this.macroAction).setMouseButtons(this.selectedButtons);
+        this.validate();
     }
 
     hasButton(index: number): boolean {
@@ -120,4 +126,18 @@ export class MacroMouseTabComponent implements OnInit {
         return TabName.Move;
     }
 
+    isMacroValid = () => {
+        switch (this.macroAction.constructor) {
+            case MoveMouseMacroAction:
+            case ScrollMouseMacroAction:
+                const { x, y } = this.macroAction as MoveMouseMacroAction;
+                return x !== undefined && x !== null && y !== undefined && y !== null;
+            case MouseButtonMacroAction:
+                const { mouseButtonsMask } = this.macroAction as MouseButtonMacroAction;
+                return !!mouseButtonsMask;
+            default:
+                return true;
+        }
+    }
+
 }

packages/uhk-web/src/app/components/macro/action-editor/tab/text/macro-text.component.html

@@ -1,5 +1,6 @@
 <div>
     <h4>Type text</h4>
     <p>Input the text you want to type with this macro action.</p>
-    <textarea #macroTextInput name="macro-text" (change)="onTextChange()" class="macro__text-input">{{ macroAction.text }}</textarea>
+    <textarea #macroTextInput name="macro-text" (change)="onTextChange()"
+    (keyup)="validate()" class="macro__text-input">{{ macroAction?.text }}</textarea>
 </div>

packages/uhk-web/src/app/components/macro/action-editor/tab/text/macro-text.component.ts

@@ -9,6 +9,7 @@ import {
 } from '@angular/core';
 
 import { TextMacroAction } from '../../../../../config-serializer/config-items/macro-action';
+import { MacroBaseComponent } from '../macro-base.component';
 
 @Component({
     selector: 'macro-text-tab',
@@ -16,16 +17,14 @@ import { TextMacroAction } from '../../../../../config-serializer/config-items/m
     styleUrls: ['./macro-text.component.scss'],
     host: { 'class': 'macro__text' }
 })
-export class MacroTextTabComponent implements OnInit, AfterViewInit {
+export class MacroTextTabComponent extends MacroBaseComponent implements OnInit, AfterViewInit {
     @Input() macroAction: TextMacroAction;
     @ViewChild('macroTextInput') input: ElementRef;
 
-    constructor(private renderer: Renderer) {}
+    constructor(private renderer: Renderer) { super(); }
 
     ngOnInit() {
-        if (!this.macroAction) {
+        this.init();
-            this.macroAction = new TextMacroAction();
-        }
     }
 
     ngAfterViewInit() {
@@ -33,7 +32,16 @@ export class MacroTextTabComponent implements OnInit, AfterViewInit {
     }
 
     onTextChange() {
+        this.init();
         this.macroAction.text = this.input.nativeElement.value;
     }
 
+    isMacroValid = () => !!this.input.nativeElement.value;
+
+    private init = () => {
+        if (!this.macroAction) {
+            this.macroAction = new TextMacroAction();
+        }
+    }
+
 }