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",
|
"BREADCRUMB": "Breadcrumb",
|
||||||
"NOTIFICATIONS": "Notifications",
|
"NOTIFICATIONS": "Notifications",
|
||||||
"TASK_LIST": "Task List",
|
"TASK_LIST": "Task List",
|
||||||
|
"TASK_LIST_CLOUD": "Task List Cloud",
|
||||||
"PROCESS_LIST": "Process List",
|
"PROCESS_LIST": "Process List",
|
||||||
"PROCESS_CLOUD": "Process Cloud",
|
"PROCESS_CLOUD": "Process Cloud",
|
||||||
"PROCESS_LIST_CLOUD": "Process List Cloud",
|
"PROCESS_LIST_CLOUD": "Process List Cloud",
|
||||||
|
|||||||
@ -339,6 +339,11 @@ export const appRoutes: Routes = [
|
|||||||
canActivate: [AuthGuardBpm],
|
canActivate: [AuthGuardBpm],
|
||||||
loadChildren: 'app/components/task-list-demo/task-list.module#AppTaskListModule'
|
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',
|
path: 'process-list',
|
||||||
canActivate: [AuthGuardBpm],
|
canActivate: [AuthGuardBpm],
|
||||||
|
|||||||
@ -39,6 +39,7 @@ export class AppLayoutComponent implements OnInit {
|
|||||||
{ href: '/header-data', icon: 'edit', title: 'APP_LAYOUT.HEADER_DATA' },
|
{ href: '/header-data', icon: 'edit', title: 'APP_LAYOUT.HEADER_DATA' },
|
||||||
{ href: '/node-selector', icon: 'attachment', title: 'APP_LAYOUT.NODE-SELECTOR' },
|
{ href: '/node-selector', icon: 'attachment', title: 'APP_LAYOUT.NODE-SELECTOR' },
|
||||||
{ href: '/task-list', icon: 'assignment', title: 'APP_LAYOUT.TASK_LIST' },
|
{ 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: '/process-list', icon: 'assignment', title: 'APP_LAYOUT.PROCESS_LIST' },
|
||||||
{ href: '/cloud', icon: 'cloud', title: 'APP_LAYOUT.PROCESS_CLOUD' },
|
{ href: '/cloud', icon: 'cloud', title: 'APP_LAYOUT.PROCESS_CLOUD' },
|
||||||
{ href: '/activiti', icon: 'device_hub', title: 'APP_LAYOUT.PROCESS_SERVICES' },
|
{ 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