Auto Actions front-end behaviors complete

This commit is contained in:
kiswa 2017-02-01 22:27:54 +00:00
parent b3ddb51619
commit 5a35d71131
5 changed files with 129 additions and 41 deletions

View File

@ -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;
}

View File

@ -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 CLEAR_DUE_DATE = 4;
const USE_BASE_COLOR = 5;
const ADD_CATEGORY = 3;
const CLEAR_ALL_CATEGORIES = 4;
const SET_ASSIGNEE = 5;
const CLEAR_DUE_DATE = 6;
const ALTER_COLOR_BY_POINTS= 7;
}

View File

@ -55,25 +55,29 @@
<tbody>
<tr class="borderless">
<td>
<select [(ngModel)]="newAction.board_id">
<option value="null">Select Board...</option>
<select [(ngModel)]="newAction.board_id"
(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">
<option>Set item color</option>
<select [disabled]="newAction.board_id === null"
[(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">
<option>Select Color</option>
<select [disabled]="newAction.board_id === null"
[(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>

View File

@ -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.UseBaseColor, 'Dim item color by points' ]
[ ActionType.ClearDueDate, 'Clear item due date' ]
];
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:
this.triggerSources = [ [ null, 'Select Column' ] ];
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 ]);
});
}
case ActionTrigger.MovedToColumn:
this.buildSourcesArray('triggerSources',
'Column', 'columns');
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.';
}

View File

@ -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