From 6be1cf56e3ff735073814a1c89fc23270176683e Mon Sep 17 00:00:00 2001 From: davidcanonieto Date: Sat, 12 Jan 2019 23:39:16 +0000 Subject: [PATCH] [ADF-3783] Create Task List Cloud Demo page (#4138) --- demo-shell/resources/i18n/en.json | 1 + demo-shell/src/app/app.routes.ts | 5 + .../app-layout/app-layout.component.ts | 1 + .../task-list-cloud-demo.component.html | 129 +++++++++++ .../task-list-cloud-demo.component.scss | 20 ++ .../task-list-cloud-demo.component.ts | 215 ++++++++++++++++++ .../task-list-cloud/task-list-cloud.module.ts | 47 ++++ 7 files changed, 418 insertions(+) create mode 100644 demo-shell/src/app/components/task-list-cloud/task-list-cloud-demo.component.html create mode 100644 demo-shell/src/app/components/task-list-cloud/task-list-cloud-demo.component.scss create mode 100644 demo-shell/src/app/components/task-list-cloud/task-list-cloud-demo.component.ts create mode 100644 demo-shell/src/app/components/task-list-cloud/task-list-cloud.module.ts diff --git a/demo-shell/resources/i18n/en.json b/demo-shell/resources/i18n/en.json index d325c43c5e..faa36877ce 100644 --- a/demo-shell/resources/i18n/en.json +++ b/demo-shell/resources/i18n/en.json @@ -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", diff --git a/demo-shell/src/app/app.routes.ts b/demo-shell/src/app/app.routes.ts index 5cc082be0b..a26f58fae1 100644 --- a/demo-shell/src/app/app.routes.ts +++ b/demo-shell/src/app/app.routes.ts @@ -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], diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.ts b/demo-shell/src/app/components/app-layout/app-layout.component.ts index 8b0dd73ab2..cec50c67d2 100644 --- a/demo-shell/src/app/components/app-layout/app-layout.component.ts +++ b/demo-shell/src/app/components/app-layout/app-layout.component.ts @@ -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' }, diff --git a/demo-shell/src/app/components/task-list-cloud/task-list-cloud-demo.component.html b/demo-shell/src/app/components/task-list-cloud/task-list-cloud-demo.component.html new file mode 100644 index 0000000000..b2740609f8 --- /dev/null +++ b/demo-shell/src/app/components/task-list-cloud/task-list-cloud-demo.component.html @@ -0,0 +1,129 @@ +
+
+ + App Name + + + + + Task Name + + + + + Task Id + + + + + Landing Task Id + + + + + Parent Task Id + + + + + Due Date + + + + + + + Created Date + + + + + + + Assignee + + + + + Selection Mode + + + {{ option.title }} + + + + + + Status + + + {{ option.title }} + + + + + + ProcessDefinitionId + + + + + ProcessInstanceId + + + + + Select First Row + + + Multiselect + + +
+
+ +
+ +
+ +
+ + + + + + + + + + + + + +
\ No newline at end of file diff --git a/demo-shell/src/app/components/task-list-cloud/task-list-cloud-demo.component.scss b/demo-shell/src/app/components/task-list-cloud/task-list-cloud-demo.component.scss new file mode 100644 index 0000000000..b38154919a --- /dev/null +++ b/demo-shell/src/app/components/task-list-cloud/task-list-cloud-demo.component.scss @@ -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; +} diff --git a/demo-shell/src/app/components/task-list-cloud/task-list-cloud-demo.component.ts b/demo-shell/src/app/components/task-list-cloud/task-list-cloud-demo.component.ts new file mode 100644 index 0000000000..33b3809777 --- /dev/null +++ b/demo-shell/src/app/components/task-list-cloud/task-list-cloud-demo.component.ts @@ -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'); + } +} diff --git a/demo-shell/src/app/components/task-list-cloud/task-list-cloud.module.ts b/demo-shell/src/app/components/task-list-cloud/task-list-cloud.module.ts new file mode 100644 index 0000000000..ab810df2cc --- /dev/null +++ b/demo-shell/src/app/components/task-list-cloud/task-list-cloud.module.ts @@ -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 {}