Start Task Component

Creates/Starts new task for the specified app

adf-start-task

Basic Usage

<adf-start-task
    [appId]="YOUR_APP_ID">
</adf-start-task>

Class members

Properties

Name Type Default value Description
appId number (required) The id of the app.

Events

Name Type Description
cancel EventEmitter<void> Emitted when the cancel button is clicked by the user.
error EventEmitter<any> Emitted when an error occurs.
success EventEmitter<any> Emitted when the task is successfully created.

Implements: OnInit

Inputs

NameTypeDefault valueDescription
appId number

(required) The id of the app.

Outputs

NameTypeDefault valueDescription
cancel EventEmitter<void>

Emitted when the cancel button is clicked by the user.

error EventEmitter<any>

Emitted when an error occurs.

success EventEmitter<any>

Emitted when the task is successfully created.

Properties

NameTypeDefault valueDescription
assigneeId number
dateError boolean
field FormFieldModel
FORMAT_DATE Public string DD/MM/YYYY
formKey number
forms []
startTaskmodel StartTaskModel
taskId string

Methods

Private assignTaskByUserId(taskId: string, userId: any)
Private attachForm(taskId: string, formKey: number)
clearDateInput()
getAssigneeId(userId: )
Public getDisplayUser(firstName: string, lastName: string, delimiter: string)
Private isEmpty(data: string)
Public isUserNameEmpty(user: UserProcessModel)
Private loadFormsTask()
ngOnInit()
Public onCancel()
onDateChanged(newDateValue: )
Public start()

Constructor

constructor(taskService: TaskListService, dateAdapter: DateAdapter, preferences: UserPreferencesService, logService: LogService)

Constructor

Parameters :
Name Type Optional Description
taskService TaskListService
dateAdapter DateAdapter<Moment>
preferences UserPreferencesService
logService LogService

Methods

Private assignTaskByUserId
assignTaskByUserId(taskId: string, userId: any)
Parameters :
Name Type Optional Description
taskId string
userId any
Returns : Observable<any>
Private attachForm
attachForm(taskId: string, formKey: number)
Parameters :
Name Type Optional Description
taskId string
formKey number
Returns : Observable<any>
clearDateInput
clearDateInput()
Returns : void
getAssigneeId
getAssigneeId(userId: )
Parameters :
Name Type Optional Description
userId
Returns : void
Public getDisplayUser
getDisplayUser(firstName: string, lastName: string, delimiter: string)
Parameters :
Name Type Optional Description
firstName string
lastName string
delimiter string
Returns : string
Private isEmpty
isEmpty(data: string)
Parameters :
Name Type Optional Description
data string
Returns : boolean
Public isUserNameEmpty
isUserNameEmpty(user: UserProcessModel)
Parameters :
Name Type Optional Description
user UserProcessModel
Returns : boolean
Private loadFormsTask
loadFormsTask()
Returns : void
ngOnInit
ngOnInit()
Returns : void
Public onCancel
onCancel()
Returns : void
onDateChanged
onDateChanged(newDateValue: )
Parameters :
Name Type Optional Description
newDateValue
Returns : void
Public start
start()
Returns : void
import { LogService, UserPreferencesService, UserProcessModel, FormFieldModel, FormModel } from '@alfresco/adf-core';
import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
import { MOMENT_DATE_FORMATS, MomentDateAdapter } from '@alfresco/adf-core';
import moment from 'moment-es6';
import { Moment } from 'moment';
import { Observable, of } from 'rxjs';
import { Form } from '../models/form.model';
import { StartTaskModel } from '../models/start-task.model';
import { TaskDetailsModel } from '../models/task-details.model';
import { TaskListService } from './../services/tasklist.service';
import { switchMap, defaultIfEmpty } from 'rxjs/operators';

@Component({
    selector: 'adf-start-task',
    templateUrl: './start-task.component.html',
    styleUrls: ['./start-task.component.scss'],
    providers: [
        { provide: DateAdapter, useClass: MomentDateAdapter },
        { provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS }],
    encapsulation: ViewEncapsulation.None
})
export class StartTaskComponent implements OnInit {

    public FORMAT_DATE: string = 'DD/MM/YYYY';

    /** (required) The id of the app. */
    @Input()
    appId: number;

    /** Emitted when the task is successfully created. */
    @Output()
    success: EventEmitter<any> = new EventEmitter<any>();

    /** Emitted when the cancel button is clicked by the user. */
    @Output()
    cancel: EventEmitter<void> = new EventEmitter<void>();

    /** Emitted when an error occurs. */
    @Output()
    error: EventEmitter<any> = new EventEmitter<any>();

    startTaskmodel: StartTaskModel = new StartTaskModel();

    forms: Form[];

    assigneeId: number;

    formKey: number;

    taskId: string;

    dateError: boolean;

    field: FormFieldModel;

    /**
     * Constructor
     * @param auth
     * @param translate
     * @param taskService
     */
    constructor(private taskService: TaskListService,
                private dateAdapter: DateAdapter<Moment>,
                private preferences: UserPreferencesService,
                private logService: LogService) {
    }

    ngOnInit() {
        this.field = new FormFieldModel(new FormModel(), {id: this.assigneeId, value: this.assigneeId, placeholder: 'Assignee'});
        this.preferences.locale$.subscribe((locale) => {
            this.dateAdapter.setLocale(locale);
        });
        this.loadFormsTask();
    }

    public start(): void {
        if (this.startTaskmodel.name) {
            if (this.appId) {
                this.startTaskmodel.category = this.appId.toString();
            }
            this.taskService.createNewTask(new TaskDetailsModel(this.startTaskmodel))
                .pipe(
                    switchMap((createRes: any) =>
                        this.attachForm(createRes.id, this.formKey).pipe(
                            defaultIfEmpty(createRes),
                            switchMap((attachRes: any) =>
                                this.assignTaskByUserId(createRes.id, this.assigneeId).pipe(
                                    defaultIfEmpty(attachRes ? attachRes : createRes)
                                )
                            )
                        )
                    )
                )
                .subscribe(
                    (res: any) => {
                        this.success.emit(res);
                    },
                    (err) => {
                        this.error.emit(err);
                        this.logService.error('An error occurred while creating new task');
                    });
        }
    }

    getAssigneeId(userId) {
        this.assigneeId = userId;
    }

    private attachForm(taskId: string, formKey: number): Observable<any> {
        let response = of();
        if (taskId && formKey) {
            response = this.taskService.attachFormToATask(taskId, formKey);
        }
        return response;
    }

    private assignTaskByUserId(taskId: string, userId: any): Observable<any> {
        let response = of();
        if (taskId && userId) {
            response = this.taskService.assignTaskByUserId(taskId, userId);
        }
        return response;
    }

    public onCancel(): void {
        this.cancel.emit();
    }

    private loadFormsTask(): void {
        this.taskService.getFormList().subscribe((res: Form[]) => {
                this.forms = res;
            },
            (err) => {
                this.error.emit(err);
                this.logService.error('An error occurred while trying to get the forms');
            });
    }

    public isUserNameEmpty(user: UserProcessModel): boolean {
        return !user || (this.isEmpty(user.firstName) && this.isEmpty(user.lastName));
    }

    private isEmpty(data: string): boolean {
        return data === undefined || data === null || data.trim().length === 0;
    }

    public getDisplayUser(firstName: string, lastName: string, delimiter: string = '-'): string {
        firstName = (firstName !== null ? firstName : '');
        lastName = (lastName !== null ? lastName : '');
        return firstName + delimiter + lastName;
    }

    onDateChanged(newDateValue): void {
        this.dateError = false;

        if (newDateValue) {
            let momentDate = moment(newDateValue, this.FORMAT_DATE, true);
            if (!momentDate.isValid()) {
                this.dateError = true;
            }
        }
    }

    clearDateInput() {
        const emptyValue = '';
        this.startTaskmodel.dueDate = emptyValue;
        this.onDateChanged(emptyValue);
    }
}
<mat-card class="adf-new-task-layout-card">
    <mat-grid-list cols="1" rowHeight="60px">
        <mat-grid-tile>
            <div class="adf-new-task-heading">{{'ADF_TASK_LIST.START_TASK.FORM.TITLE'|translate}}</div>
        </mat-grid-tile>
    </mat-grid-list>
    <mat-card-content>
        <div class="adf-new-task-layout-card-content">
            <div class="adf-grid-full-width adf-grid-row">
                <mat-form-field class="adf-grid-full-width adf-grid-column">
                    <input matInput
                        class="adf-grid-full-width"
                        placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.NAME'|translate}}"
                        [(ngModel)]="startTaskmodel.name"
                        required
                        id="name_id">
                </mat-form-field>
            </div>

            <div class="adf-grid-full-width adf-grid-row">
                <mat-form-field class="adf-grid-full-width adf-grid-column">
                    <textarea
                        matInput
                        class="adf-grid-full-width"
                        placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.DESCRIPTION'|translate}}"
                        [(ngModel)]="startTaskmodel.description"
                        rows="1"
                        id="description_id">
                    </textarea>
                </mat-form-field>
            </div>

            <div class="adf-grid-full-width adf-grid-row">
                <div class="adf-grid-column adf-grid-half-width">
                    <div class="adf-grid-full-width adf-grid-row">
                        <mat-form-field class="adf-grid-full-width">
                            <input matInput
                                [matDatepicker]="taskDatePicker"
                                (keydown)="true"
                                (keyup)="onDateChanged($event.srcElement.value)"
                                (dateInput)="onDateChanged($event.value)"
                                placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.DATE'|translate}}"
                                [(ngModel)]="startTaskmodel.dueDate"
                                id="date_id">
                            <mat-datepicker-toggle matSuffix [for]="taskDatePicker"></mat-datepicker-toggle>
                            <mat-datepicker #taskDatePicker
                                [touchUi]="true"
                                (dateChanged)="onDateChanged($event)"
                                (opened)="clearDateInput()">
                            </mat-datepicker>
                            <div class="adf-error-text-container">
                                <div *ngIf="dateError">
                                    <div class="adf-error-text">{{'ADF_TASK_LIST.START_TASK.FORM.DATE.ERROR'|translate}}</div>
                                    <mat-icon class="adf-error-icon">warning</mat-icon>
                                </div>
                            </div>
                        </mat-form-field>
                    </div>
                    <div class="adf-grid-full-width adf-grid-row">
                        <mat-form-field class="adf-grid-full-width">
                            <mat-select placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.FORM'|translate}}" id="form_id" [(ngModel)]="formKey">
                                <mat-option>{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.NONE'|translate}}</mat-option>
                                <mat-option *ngFor="let form of forms" [value]="form.id">{{ form.name }}</mat-option>
                            </mat-select>
                        </mat-form-field>
                    </div>
                </div>

                <div class="adf-grid-column adf-grid-half-width">
                    <people-widget (peopleSelected)="getAssigneeId($event)" [field]="field"></people-widget>
                </div>
            </div>
        </div>
    </mat-card-content>
    <mat-card-actions>
        <mat-grid-list cols="1" rowHeight="60px">
            <mat-grid-tile>
                <div class="adf-new-task-footer">
                    <button mat-button (click)="onCancel()" id="button-cancel">
                        {{'ADF_TASK_LIST.START_TASK.FORM.ACTION.CANCEL'|translate}}
                    </button>
                    <button color="primary" mat-button [disabled]="!startTaskmodel.name || dateError" (click)="start()" id="button-start">
                        {{'ADF_TASK_LIST.START_TASK.FORM.ACTION.START'|translate}}
                    </button>
                </div>
            </mat-grid-tile>
        </mat-grid-list>
    </mat-card-actions>
</mat-card>

Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""