mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
[ADF-3103] Task List Demo Component (#3486)
* [ADF-3103] Added Process Definition Id to task list component * [ADF-3103] Added @input variable * [ADF-3103] Added search inputs * [ADF-2753] Fixed select inputs * [ADF-3103] Improved logic and funcionality overall * [ADF-3103] FormControl implementation * [ADF-3103] Added AppId input * [ADF-3103] Fixed Link errors * [ADF-3103] Task list table hides when invalid app is selected * [ADF-3103] Lint error * [ADF-3103] Improved user experience * [ADF-3103] changed formControlNames to [FormControl] * [ADF-3103] Improved logic and added localization * [ADF-3103] Removed whitespace * [ADF-3103] Improved logic of task list form * [ADF-3103] fixed trailing whitespaces * [ADF-3103] trailing whitespace fix * [ADF-3103] Added documentation and tests * [ADF-3103] Added tests and documentation * [ADF-3103] Tests fixed
This commit is contained in:
davidcanonieto
committed by
Eugenio Romano
Eugenio Romano
parent
6508b145d0
commit
495f9937fe
@@ -0,0 +1,83 @@
|
||||
<div class="task-list-demo-inputs">
|
||||
|
||||
<form [formGroup]="taskListForm">
|
||||
<mat-form-field>
|
||||
<mat-label>App Id</mat-label>
|
||||
<input
|
||||
matInput
|
||||
class="form-control"
|
||||
[formControl]="taskAppId">
|
||||
<mat-error *ngIf="taskAppId.hasError('required')">
|
||||
{{ 'TASK_LIST_DEMO.APP_ID_REQUIRED_ERROR' | translate }}
|
||||
</mat-error>
|
||||
<mat-error *ngIf="taskAppId.hasError('pattern')">
|
||||
{{ 'TASK_LIST_DEMO.APP_ID_TYPE_ERROR' | translate }}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Task Name</mat-label>
|
||||
<input
|
||||
matInput
|
||||
class="form-control"
|
||||
[formControl]="taskName">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>ProcessDefinitionId</mat-label>
|
||||
<input
|
||||
matInput
|
||||
class="form-control"
|
||||
[formControl]="taskProcessDefinitionId">
|
||||
<mat-hint>SimpleProcess:1:2</mat-hint>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Assignment</mat-label>
|
||||
<mat-select
|
||||
class="form-control"
|
||||
[formControl]="taskAssignment">
|
||||
<mat-option *ngFor="let assignmentOption of assignmentOptions" [value]="assignmentOption.value">{{ assignmentOption.title }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>State</mat-label>
|
||||
<mat-select
|
||||
class="form-control"
|
||||
[formControl]="taskState">
|
||||
<mat-option *ngFor="let stateOption of stateOptions" [value]="stateOption.value">{{ stateOption.title }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Sort</mat-label>
|
||||
<mat-select
|
||||
class="form-control"
|
||||
[formControl]="taskSort">
|
||||
<mat-option *ngFor="let sortOption of sortOptions" [value]="sortOptions.value">{{ sortOption.title }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="adf-reset-button">
|
||||
<button mat-raised-button (click)="resetTaskForm()">Reset</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<adf-tasklist
|
||||
[appId]="appId"
|
||||
[name]="name"
|
||||
[processDefinitionId]="processDefinitionId"
|
||||
[assignment]="assignment"
|
||||
[state]="state"
|
||||
[sort]="sort"
|
||||
#taskList>
|
||||
</adf-tasklist>
|
||||
|
||||
<adf-pagination
|
||||
[target]="taskList">
|
||||
</adf-pagination>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
.task-list-demo-inputs {
|
||||
margin-top: 100px;
|
||||
margin-bottom: 50px;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.adf-reset-button {
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.task-list-demo-error-message {
|
||||
color: red;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormGroup, FormBuilder, Validators, FormControl, AbstractControl } from '@angular/forms';
|
||||
import { ActivatedRoute, Params } from '@angular/router';
|
||||
|
||||
|
||||
@Component({
|
||||
templateUrl: './task-list-demo.component.html',
|
||||
styleUrls: [`./task-list-demo.component.scss`],
|
||||
})
|
||||
|
||||
export class TaskListDemoComponent implements OnInit {
|
||||
|
||||
defaultAppId: number;
|
||||
|
||||
taskListForm: FormGroup;
|
||||
|
||||
errorMessage: string;
|
||||
|
||||
appId: number;
|
||||
|
||||
processDefinitionId: string;
|
||||
|
||||
state: string;
|
||||
|
||||
assignment: string;
|
||||
|
||||
name: string;
|
||||
|
||||
sort: string;
|
||||
|
||||
assignmentOptions = [
|
||||
{value: 'assignee', title: 'Assignee'},
|
||||
{value: 'candidate', title: 'Candidate'}
|
||||
];
|
||||
|
||||
stateOptions = [
|
||||
{value: 'all', title: 'All'},
|
||||
{value: 'active', title: 'Active'},
|
||||
{value: 'completed', title: 'Completed'}
|
||||
];
|
||||
|
||||
sortOptions = [
|
||||
{value: 'created-asc', title: 'Created (asc)'},
|
||||
{value: 'created-desc', title: 'Created (desc)'},
|
||||
{value: 'due-asc', title: 'Due (asc)'},
|
||||
{value: 'due-desc', title: 'Due (desc)'}
|
||||
];
|
||||
|
||||
constructor(private route: ActivatedRoute,
|
||||
private formBuilder: FormBuilder) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
if (this.route) {
|
||||
this.route.params.forEach((params: Params) => {
|
||||
if (params['id']) {
|
||||
this.defaultAppId = +params['id'];
|
||||
} else {
|
||||
this.defaultAppId = 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.errorMessage = 'Insert App Id';
|
||||
|
||||
this.buildForm();
|
||||
|
||||
}
|
||||
|
||||
buildForm() {
|
||||
this.taskListForm = this.formBuilder.group({
|
||||
taskAppId: new FormControl(this.defaultAppId, [Validators.required, Validators.pattern('^[0-9]*$')]),
|
||||
taskName: new FormControl(''),
|
||||
taskProcessDefinitionId: new FormControl(''),
|
||||
taskAssignment: new FormControl(''),
|
||||
taskState: new FormControl(''),
|
||||
taskSort: new FormControl('')
|
||||
});
|
||||
|
||||
this.taskListForm.valueChanges
|
||||
.debounceTime(500)
|
||||
.subscribe(taskFilter => {
|
||||
if (this.isFormValid()) {
|
||||
this.filterTasks(taskFilter);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
filterTasks(taskFilter: any) {
|
||||
this.appId = taskFilter.taskAppId;
|
||||
this.processDefinitionId = taskFilter.taskProcessDefinitionId;
|
||||
this.name = taskFilter.taskName;
|
||||
this.assignment = taskFilter.taskAssignment;
|
||||
this.state = taskFilter.taskState;
|
||||
this.sort = taskFilter.taskSort;
|
||||
}
|
||||
|
||||
resetTaskForm() {
|
||||
this.taskListForm.reset();
|
||||
}
|
||||
|
||||
isFormValid() {
|
||||
return this.taskListForm && this.taskListForm.dirty && this.taskListForm.valid;
|
||||
}
|
||||
|
||||
get taskAppId(): AbstractControl {
|
||||
return this.taskListForm.get('taskAppId');
|
||||
}
|
||||
|
||||
get taskProcessDefinitionId(): AbstractControl {
|
||||
return this.taskListForm.get('taskProcessDefinitionId');
|
||||
}
|
||||
|
||||
get taskName(): AbstractControl {
|
||||
return this.taskListForm.get('taskName');
|
||||
}
|
||||
|
||||
get taskAssignment(): AbstractControl {
|
||||
return this.taskListForm.get('taskAssignment');
|
||||
}
|
||||
|
||||
get taskState(): AbstractControl {
|
||||
return this.taskListForm.get('taskState');
|
||||
}
|
||||
|
||||
get taskSort(): AbstractControl {
|
||||
return this.taskListForm.get('taskSort');
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user