Auto Actions front-end behaviors complete

src/api/helpers/ActionTrigger.php

@@ -2,9 +2,9 @@
 use MyCLabs\Enum\Enum;
 
 class ActionTrigger extends Enum {
-    const MOVE_TO_COLUMN = 1;
+    const MOVED_TO_COLUMN = 1;
     const ASSIGNED_TO_USER = 2;
-    const SET_TO_CATEGORY = 3;
+    const ADDED_TO_CATEGORY = 3;
     const POINTS_CHANGED = 4;
 }
 

src/api/helpers/ActionType.php

@@ -4,8 +4,10 @@ use MyCLabs\Enum\Enum;
 class ActionType extends Enum {
     const SET_COLOR = 1;
     const SET_CATEGORY = 2;
-    const SET_ASSIGNEE = 3;
+    const ADD_CATEGORY = 3;
-    const CLEAR_DUE_DATE = 4;
+    const CLEAR_ALL_CATEGORIES = 4;
-    const USE_BASE_COLOR = 5;
+    const SET_ASSIGNEE = 5;
+    const CLEAR_DUE_DATE = 6;
+    const ALTER_COLOR_BY_POINTS= 7;
 }
 

src/app/settings/auto-actions/auto-actions.component.html

@@ -55,25 +55,29 @@
             <tbody>
                 <tr class="borderless">
                     <td>
-                        <select [(ngModel)]="newAction.board_id">
+                        <select [(ngModel)]="newAction.board_id"
-                            <option value="null">Select Board...</option>
+                            (change)="updateTriggerSources()">
+                            <option [ngValue]="null">Select Board...</option>
                             <option *ngFor="let board of boards"
-                                [value]="board.id">
+                                [ngValue]="board.id">
                                 {{ board.name }}
                             </option>
                         </select>
                     </td>
                     <td>
                         <select [disabled]="newAction.board_id === null"
-                            [ngModel]="newAction.trigger"
+                            [(ngModel)]="newAction.trigger"
                             (change)="updateTriggerSources()">
                             <option *ngFor="let trigger of triggers"
-                                [value]="trigger[0]">{{ trigger[1] }}</option>
+                                [ngValue]="trigger[0]">{{ trigger[1] }}</option>
                         </select>
                     </td>
                     <td>
-                        <select [disabled]="newAction.board_id === null">
+                        <select [disabled]="newAction.board_id === null"
-                            <option>Set item color</option>
+                            [(ngModel)]="newAction.type"
+                            (change)="updateActionSources()">
+                            <option *ngFor="let type of types"
+                                [ngValue]="type[0]">{{ type[1] }}</option>
                         </select>
                     </td>
                 </tr>
@@ -82,21 +86,33 @@
                     <td>
                         <select [disabled]="newAction.board_id === null"
                             *ngIf="triggerSources.length"
-                            [(ngModel)]="newAction.source_id">
+                            [(ngModel)]="newAction.source_id"
+                            (change)="checkAddDisabled()">
                             <option *ngFor="let source of triggerSources"
-                                [value]="source[0]">{{ source[1] }}</option>
+                                [ngValue]="source[0]">{{ source[1] }}</option>
                         </select>
                     </td>
                     <td>
-                        <select [disabled]="newAction.board_id === null">
+                        <select [disabled]="newAction.board_id === null"
-                            <option>Select Color</option>
+                            [(ngModel)]="newAction.change_to"
+                            (change)="checkAddDisabled()"
+                            *ngIf="newAction.type === 2 ||
+                                   newAction.type === 3 ||
+                                   newAction.type === 5">
+                            <option *ngFor="let source of actionSources"
+                                [ngValue]="source[0]">{{ source[1] }}</option>
                         </select>
+                        <input type="color" name="change-to-color"
+                            [disabled]="newAction.board_id === null"
+                            *ngIf="newAction.type == 1"
+                            [(ngModel)]="newAction.change_to"
+                            (change)="checkAddDisabled()">
                     </td>
                 </tr>
             </tbody>
         </table>
 
-        <button class="right">
+        <button class="right" [disabled]="isAddDisabled">
             <i class="icon icon-plus"></i>
             Add Action
         </button>

src/app/settings/auto-actions/auto-actions.component.ts

@@ -22,6 +22,7 @@ import { SettingsService } from '../settings.service';
 export class AutoActions {
     private noActionsMessage: string;
     private MODAL_CONFIRM_ID: string;
+
     private activeUser: User;
     private actionToRemove: AutoAction;
     private newAction: AutoAction;
@@ -32,9 +33,12 @@ export class AutoActions {
     private triggers: Array<Array<any>>;
     private triggerSources: Array<Array<any>>;
     private types: Array<Array<any>>;
+    private typesList: Array<Array<any>>;
+    private actionSources: Array<Array<any>>;
 
     private loading = true;
     private firstRun = true;
+    private isAddDisabled = true;
     private saving = false;
 
     constructor(private auth: AuthService,
@@ -47,19 +51,21 @@ export class AutoActions {
         this.MODAL_CONFIRM_ID = 'action-remove-confirm';
 
         this.triggers = [
-            [ ActionTrigger.MoveToColumn, 'Item moves to column' ],
+            [ ActionTrigger.MovedToColumn, 'Item moved to column' ],
             [ ActionTrigger.AssignedToUser, 'Item assigned to user' ],
-            [ ActionTrigger.SetToCategory, 'Item set to category' ],
+            [ ActionTrigger.AddedToCategory, 'Item added to category' ],
             [ ActionTrigger.PointsChanged, 'Item points change' ]
         ];
         this.updateTriggerSources();
-        this.types = [
+        this.typesList = [
             [ ActionType.SetColor, 'Set item color'],
             [ ActionType.SetCategory, 'Set item category' ],
+            [ ActionType.AddCategory, 'Add item category' ],
+            [ ActionType.ClearAllCategories, 'Clear item categories' ],
             [ ActionType.SetAssignee, 'Set item assignee' ],
-            [ ActionType.ClearDueDate, 'Clear item due date' ],
+            [ ActionType.ClearDueDate, 'Clear item due date' ]
-            [ ActionType.UseBaseColor, 'Dim item color by points' ]
         ];
+        this.types = this.typesList;
 
         auth.userChanged
             .subscribe(activeUser => {
@@ -86,29 +92,91 @@ export class AutoActions {
 
     updateTriggerSources(): void {
         this.triggerSources = [];
+        this.newAction.source_id = null;
+
+        this.types = this.typesList;
 
         switch (this.newAction.trigger) {
-            case ActionTrigger.MoveToColumn:
+            case ActionTrigger.MovedToColumn:
-                this.triggerSources = [ [ null, 'Select Column' ] ];
+                this.buildSourcesArray('triggerSources',
-
+                                       'Column', 'columns');
-                for (let i = 0; i < this.boards.length; ++i) {
-                    if (this.boards[i].id !== +this.newAction.board_id) {
-                        continue;
-                    }
-
-                    this.boards[i].columns.forEach(column => {
-                        this.triggerSources.push([ column.id, column.name ]);
-                    });
-                }
             break;
             case ActionTrigger.AssignedToUser:
+                this.buildSourcesArray('triggerSources',
+                                       'User', 'users', 'username');
             break;
-            case ActionTrigger.SetToCategory:
+            case ActionTrigger.AddedToCategory:
+                this.buildSourcesArray('triggerSources',
+                                       'Category', 'categories');
             break;
             case ActionTrigger.PointsChanged:
-                // Leave it empty
+                // Leave triggerSources empty
+                this.types = [
+                    [ ActionType.AlterColorByPoints, 'Alter color by points' ]
+                ];
             break;
         }
+
+        this.newAction.type = this.types ?
+            this.types[0][0] : ActionType.SetColor;
+
+        this.checkAddDisabled();
+    }
+
+    updateActionSources(): void {
+        this.actionSources = [];
+        this.newAction.change_to = null;
+
+        switch (this.newAction.type) {
+            case ActionType.SetCategory:
+            case ActionType.AddCategory:
+                this.buildSourcesArray('actionSources',
+                                       'Category', 'categories');
+            break;
+            case ActionType.SetAssignee:
+                this.buildSourcesArray('actionSources',
+                                       'Assignee', 'users', 'username');
+            break;
+            case ActionType.SetColor:
+                this.newAction.change_to = '#000000';
+            break;
+        }
+
+        this.checkAddDisabled();
+    }
+
+    checkAddDisabled(): void {
+        this.isAddDisabled = false;
+
+        if (this.newAction.board_id !== null) {
+            if (this.newAction.source_id === null) {
+                this.isAddDisabled =
+                    (this.newAction.trigger !== ActionTrigger.PointsChanged);
+            }
+
+            if (!this.isAddDisabled && this.newAction.change_to === null) {
+                this.isAddDisabled =
+                    (this.newAction.type !== ActionType.ClearAllCategories &&
+                    this.newAction.type !== ActionType.ClearDueDate);
+            }
+        }
+    }
+
+    private buildSourcesArray(sourceArray: string,
+                              name: string,
+                              arrayName: string,
+                              prop: string = 'name'): void {
+        this[sourceArray] = [ [ null, 'Select ' + name ] ];
+
+        for (let i = 0; i < this.boards.length; ++i) {
+            if (this.boards[i].id !== this.newAction.board_id) {
+                continue;
+            }
+
+            this.boards[i][arrayName].forEach((item: any) => {
+                this[sourceArray].push([ item.id, item[prop] ]);
+            });
+        }
     }
 
     private removeAutoAction(): void {
@@ -160,7 +228,7 @@ export class AutoActions {
         this.noActionsMessage = 'There are no current automatic actions. ' +
             'Use the Add Action form below to add one.';
 
-        if (+activeUser.security_level === 3) {
+        if (activeUser.security_level === 3) {
             this.noActionsMessage = 'There are no automatic actions. ' +
                 'Contact an admin user to create one.';
         }

src/app/shared/models/auto-actions.model.ts

@@ -1,20 +1,22 @@
 export enum ActionTrigger {
-    MoveToColumn = 1,
+    MovedToColumn = 1,
     AssignedToUser,
-    SetToCategory,
+    AddedToCategory,
     PointsChanged
 }
 
 export enum ActionType {
     SetColor = 1,
     SetCategory,
+    AddCategory,
+    ClearAllCategories,
     SetAssignee,
     ClearDueDate,
-    UseBaseColor
+    AlterColorByPoints
 }
 
 export class AutoAction {
-    constructor(public trigger: ActionTrigger = ActionTrigger.MoveToColumn,
+    constructor(public trigger: ActionTrigger = ActionTrigger.MovedToColumn,
                 public source_id: number = null, // tslint:disable-line
                 public type: ActionType = ActionType.SetColor,
                 public change_to: string = null, // tslint:disable-line