mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
[ADF-3783] Create Task List Cloud Demo page (#4138)
This commit is contained in:
davidcanonieto
Eugenio Romano
parent
f5f0a181b4
commit
6be1cf56e3
@ -61,6 +61,7 @@
|
||||
"BREADCRUMB": "Breadcrumb",
|
||||
"NOTIFICATIONS": "Notifications",
|
||||
"TASK_LIST": "Task List",
|
||||
"TASK_LIST_CLOUD": "Task List Cloud",
|
||||
"PROCESS_LIST": "Process List",
|
||||
"PROCESS_CLOUD": "Process Cloud",
|
||||
"PROCESS_LIST_CLOUD": "Process List Cloud",
|
||||
|
||||
@ -339,6 +339,11 @@ export const appRoutes: Routes = [
|
||||
canActivate: [AuthGuardBpm],
|
||||
loadChildren: 'app/components/task-list-demo/task-list.module#AppTaskListModule'
|
||||
},
|
||||
{
|
||||
path: 'task-list-cloud',
|
||||
canActivate: [AuthGuard],
|
||||
loadChildren: 'app/components/task-list-cloud/task-list-cloud.module#TaskListCloudDemoModule'
|
||||
},
|
||||
{
|
||||
path: 'process-list',
|
||||
canActivate: [AuthGuardBpm],
|
||||
|
||||
@ -39,6 +39,7 @@ export class AppLayoutComponent implements OnInit {
|
||||
{ href: '/header-data', icon: 'edit', title: 'APP_LAYOUT.HEADER_DATA' },
|
||||
{ href: '/node-selector', icon: 'attachment', title: 'APP_LAYOUT.NODE-SELECTOR' },
|
||||
{ href: '/task-list', icon: 'assignment', title: 'APP_LAYOUT.TASK_LIST' },
|
||||
{ href: '/task-list-cloud', icon: 'assignment', title: 'APP_LAYOUT.TASK_LIST_CLOUD' },
|
||||
{ href: '/process-list', icon: 'assignment', title: 'APP_LAYOUT.PROCESS_LIST' },
|
||||
{ href: '/cloud', icon: 'cloud', title: 'APP_LAYOUT.PROCESS_CLOUD' },
|
||||
{ href: '/activiti', icon: 'device_hub', title: 'APP_LAYOUT.PROCESS_SERVICES' },
|
||||
|
||||
@ -0,0 +1,129 @@
|
||||
<div class="adf-task-list-demo-inputs">
|
||||
<form [formGroup]="taskListForm">
|
||||
<mat-form-field>
|
||||
<mat-label>App Name</mat-label>
|
||||
<input matInput formControlName="taskAppName" data-automation-id="appName-input">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Task Name</mat-label>
|
||||
<input matInput [formControl]="taskName" data-automation-id="task-name">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Task Id</mat-label>
|
||||
<input matInput [formControl]="taskId" data-automation-id="task-id">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Landing Task Id</mat-label>
|
||||
<input matInput [formControl]="taskLandingTaskId" data-automation-id="landing-task-id">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Parent Task Id</mat-label>
|
||||
<input matInput [formControl]="taskParentTaskId" data-automation-id="parent-task-id">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Due Date</mat-label>
|
||||
<input matInput class="form-control" [matDatepicker]="pickerAfter" placeholder="Choose a date"
|
||||
[formControl]="taskDueDate" data-automation-id="due-date">
|
||||
<mat-datepicker-toggle matSuffix [for]="pickerAfter"></mat-datepicker-toggle>
|
||||
<mat-datepicker #pickerAfter></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Created Date</mat-label>
|
||||
<input matInput class="form-control" [matDatepicker]="pickerBefore" placeholder="Choose a date"
|
||||
[formControl]="taskCreatedDate" data-automation-id="created-date">
|
||||
<mat-datepicker-toggle matSuffix [for]="pickerBefore"></mat-datepicker-toggle>
|
||||
<mat-datepicker #pickerBefore></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Assignee</mat-label>
|
||||
<input matInput [formControl]="taskAssignee" data-automation-id="assignee">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Selection Mode</mat-label>
|
||||
<mat-select [formControl]="taskSelectionMode">
|
||||
<mat-option *ngFor="let option of selectionModeOptions" [value]="option.value">
|
||||
{{ option.title }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field data-automation-id="status">
|
||||
<mat-label>Status</mat-label>
|
||||
<mat-select [formControl]="taskStatus" data-automation-id="task-status">
|
||||
<mat-option *ngFor="let option of statusOptions" [value]="option.value">
|
||||
{{ option.title }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>ProcessDefinitionId</mat-label>
|
||||
<input matInput class="form-control" [formControl]="taskProcessDefinitionId" data-automation-id="process-definition-id">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>ProcessInstanceId</mat-label>
|
||||
<input matInput class="form-control" [formControl]="taskProcessInstanceId" data-automation-id="process-instance-id">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-slide-toggle
|
||||
[color]="'primary'"
|
||||
(change)="toggleSelectFirstRow()"
|
||||
[checked]="selectFirstRow"
|
||||
data-automation-id="select-first-row">
|
||||
Select First Row
|
||||
</mat-slide-toggle>
|
||||
<mat-slide-toggle
|
||||
[color]="'primary'"
|
||||
(change)="toggleMultiselect()"
|
||||
[checked]="multiSelection"
|
||||
data-automation-id="multiSelection">
|
||||
Multiselect
|
||||
</mat-slide-toggle>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="adf-reset-button">
|
||||
<button mat-raised-button (click)="resetTaskForm()">Reset</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<adf-cloud-task-list
|
||||
#taskCloud
|
||||
[applicationName]="appName"
|
||||
[status]="status"
|
||||
[assignee]="assignee"
|
||||
[processDefinitionId]="processDefinitionId"
|
||||
[processInstanceId]="processInstanceId"
|
||||
[landingTaskId]="landingTaskId"
|
||||
[parentTaskId]="parentTaskId"
|
||||
[id]="id"
|
||||
[name]="name"
|
||||
[dueDate]="dueDate"
|
||||
[createdDate]="createdDate"
|
||||
[selectionMode]="selectionMode"
|
||||
[selectFirstRow]="selectFirstRow"
|
||||
[multiselect]="multiSelection"
|
||||
(rowsSelected)="showSelectedRows($event)">
|
||||
<data-columns>
|
||||
<data-column key="entry.id" title="Id"></data-column>
|
||||
<data-column key="entry.name" title="Name" class="full-width name-column ellipsis-cell"></data-column>
|
||||
<data-column key="entry.status" title="Status"></data-column>
|
||||
<data-column key="entry.processDefinitionId" title="Process Definition Id"></data-column>
|
||||
<data-column key="entry.priority" title="Priority"></data-column>
|
||||
<data-column key="entry.createdDate" type="date" title="Created Date" [format]="'timeAgo'"></data-column>
|
||||
</data-columns>
|
||||
</adf-cloud-task-list>
|
||||
|
||||
<adf-pagination [target]="taskCloud">
|
||||
</adf-pagination>
|
||||
</div>
|
||||
@ -0,0 +1,20 @@
|
||||
.adf-task-list-demo-inputs {
|
||||
margin: 20px auto 0;
|
||||
max-width: 1200px;
|
||||
|
||||
& mat-form-field {
|
||||
margin: 20px 5px;
|
||||
width: calc(100% * (1 / 4) - 10px);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-reset-button {
|
||||
margin-bottom: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.adf-task-list-demo-error-message {
|
||||
color: red;
|
||||
text-align: center;
|
||||
}
|
||||
@ -0,0 +1,215 @@
|
||||
/*!
|
||||
* @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
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormGroup, FormBuilder, FormControl, AbstractControl } from '@angular/forms';
|
||||
import { ActivatedRoute, Params } from '@angular/router';
|
||||
import { debounceTime } from 'rxjs/operators';
|
||||
import { LogService } from '@alfresco/adf-core';
|
||||
|
||||
@Component({
|
||||
templateUrl: './task-list-cloud-demo.component.html',
|
||||
styleUrls: [`./task-list-cloud-demo.component.scss`]
|
||||
})
|
||||
|
||||
export class TaskListCloudDemoComponent implements OnInit {
|
||||
|
||||
taskListForm: FormGroup;
|
||||
|
||||
appName: string;
|
||||
defaultAppName: string;
|
||||
id: string;
|
||||
landingTaskId: string;
|
||||
parentTaskId: string;
|
||||
processDefinitionId: string;
|
||||
processInstanceId: string;
|
||||
status: string;
|
||||
assignee: string;
|
||||
name: string;
|
||||
createdDate: string;
|
||||
dueDate: string;
|
||||
selectionMode: string;
|
||||
selectFirstRow: boolean = false;
|
||||
multiSelection: boolean = false;
|
||||
|
||||
statusOptions = [
|
||||
{value: '', title: 'All'},
|
||||
{value: 'CREATED', title: 'Created'},
|
||||
{value: 'CANCELLED', title: 'Cancelled'},
|
||||
{value: 'ASSIGNED', title: 'Assigned'},
|
||||
{value: 'SUSPENDED', title: 'Suspended'},
|
||||
{value: 'COMPLETED', title: 'Completed'},
|
||||
{value: 'DELETED', title: 'Deleted'}
|
||||
];
|
||||
|
||||
selectionModeOptions = [
|
||||
{value: 'none', title: 'None'},
|
||||
{value: 'single', title: 'Single'},
|
||||
{value: 'multiple', title: 'Multiple'}
|
||||
];
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private formBuilder: FormBuilder,
|
||||
private logService: LogService) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
if (this.route) {
|
||||
this.route.params.forEach((params: Params) => {
|
||||
if (params['appName']) {
|
||||
this.defaultAppName = params['appName'];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.appName = this.defaultAppName;
|
||||
|
||||
this.buildForm();
|
||||
}
|
||||
|
||||
buildForm() {
|
||||
this.taskListForm = this.formBuilder.group({
|
||||
taskAppName: new FormControl(this.defaultAppName),
|
||||
taskCreatedDate: new FormControl(''),
|
||||
taskDueDate: new FormControl(''),
|
||||
taskAssignee: new FormControl(''),
|
||||
taskId: new FormControl(''),
|
||||
taskName: new FormControl(''),
|
||||
taskLandingTaskId: new FormControl(''),
|
||||
taskParentTaskId: new FormControl(''),
|
||||
taskSelectionMode: new FormControl(''),
|
||||
taskStatus: new FormControl(''),
|
||||
taskProcessDefinitionId: new FormControl(''),
|
||||
taskProcessInstanceId: new FormControl('')
|
||||
|
||||
});
|
||||
|
||||
this.taskListForm.valueChanges
|
||||
.pipe(
|
||||
debounceTime(500)
|
||||
)
|
||||
.subscribe((taskFilter) => {
|
||||
if (this.isFormValid()) {
|
||||
this.filterTasks(taskFilter);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
filterTasks(taskFilter: any) {
|
||||
this.appName = taskFilter.taskAppName;
|
||||
this.createdDate = taskFilter.taskCreatedDate.toString();
|
||||
this.dueDate = taskFilter.taskDueDate.toString();
|
||||
this.name = taskFilter.taskName;
|
||||
this.id = taskFilter.taskId;
|
||||
this.processDefinitionId = taskFilter.taskProcessDefinitionId;
|
||||
this.processInstanceId = taskFilter.taskProcessInstanceId;
|
||||
this.landingTaskId = taskFilter.taskLandingTaskId;
|
||||
this.parentTaskId = taskFilter.taskParentTaskId;
|
||||
this.status = taskFilter.taskStatus;
|
||||
this.selectionMode = taskFilter.taskSelectionMode;
|
||||
this.assignee = taskFilter.taskAssignee;
|
||||
}
|
||||
|
||||
resetTaskForm() {
|
||||
this.taskListForm.reset();
|
||||
this.resetParameters();
|
||||
}
|
||||
|
||||
resetParameters() {
|
||||
this.appName = '';
|
||||
this.createdDate = '';
|
||||
this.dueDate = '';
|
||||
this.name = '';
|
||||
this.id = '';
|
||||
this.processDefinitionId = '';
|
||||
this.processInstanceId = '';
|
||||
this.landingTaskId = '';
|
||||
this.parentTaskId = '';
|
||||
this.selectionMode = '';
|
||||
this.status = '';
|
||||
this.assignee = '';
|
||||
}
|
||||
|
||||
isFormValid() {
|
||||
return this.taskListForm && this.taskListForm.dirty && this.taskListForm.valid;
|
||||
}
|
||||
|
||||
toggleMultiselect() {
|
||||
this.multiSelection = !this.multiSelection;
|
||||
}
|
||||
|
||||
toggleSelectFirstRow() {
|
||||
this.selectFirstRow = !this.selectFirstRow;
|
||||
}
|
||||
|
||||
showSelectedRows(rows: any) {
|
||||
|
||||
const selectedRows = rows.map((row) => {
|
||||
return row.obj.entry;
|
||||
});
|
||||
this.logService.log(selectedRows);
|
||||
}
|
||||
|
||||
get taskAppName(): AbstractControl {
|
||||
return this.taskListForm.get('appName');
|
||||
}
|
||||
|
||||
get taskDueDate(): AbstractControl {
|
||||
return this.taskListForm.get('taskDueDate');
|
||||
}
|
||||
|
||||
get taskCreatedDate(): AbstractControl {
|
||||
return this.taskListForm.get('taskCreatedDate');
|
||||
}
|
||||
|
||||
get taskAssignee(): AbstractControl {
|
||||
return this.taskListForm.get('taskAssignee');
|
||||
}
|
||||
|
||||
get taskId(): AbstractControl {
|
||||
return this.taskListForm.get('taskId');
|
||||
}
|
||||
|
||||
get taskName(): AbstractControl {
|
||||
return this.taskListForm.get('taskName');
|
||||
}
|
||||
|
||||
get taskLandingTaskId(): AbstractControl {
|
||||
return this.taskListForm.get('taskLandingTaskId');
|
||||
}
|
||||
|
||||
get taskSelectionMode(): AbstractControl {
|
||||
return this.taskListForm.get('taskSelectionMode');
|
||||
}
|
||||
|
||||
get taskStatus(): AbstractControl {
|
||||
return this.taskListForm.get('taskStatus');
|
||||
}
|
||||
|
||||
get taskProcessDefinitionId(): AbstractControl {
|
||||
return this.taskListForm.get('taskProcessDefinitionId');
|
||||
}
|
||||
|
||||
get taskProcessInstanceId(): AbstractControl {
|
||||
return this.taskListForm.get('taskProcessInstanceId');
|
||||
}
|
||||
|
||||
get taskParentTaskId(): AbstractControl {
|
||||
return this.taskListForm.get('taskParentTaskId');
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
/*!
|
||||
* @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
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { NgModule } from '@angular/core';
|
||||
import { TaskListCloudDemoComponent } from './task-list-cloud-demo.component';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { CoreModule } from '@alfresco/adf-core';
|
||||
import { ProcessServicesCloudModule } from '@alfresco/adf-process-services-cloud';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: TaskListCloudDemoComponent
|
||||
},
|
||||
{
|
||||
path: ':appName',
|
||||
component: TaskListCloudDemoComponent
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule.forChild(routes),
|
||||
CoreModule.forChild(),
|
||||
ProcessServicesCloudModule
|
||||
],
|
||||
declarations: [
|
||||
TaskListCloudDemoComponent
|
||||
]
|
||||
})
|
||||
export class TaskListCloudDemoModule {}
|
||||
Loading…
x
Reference in New Issue
Block a user