[ADF-3538] [ADF-3547] Migration - Task Filters - Task List - New Process cloud page on demoshell (#3914)

* [ADF-3538] start creating new folder for cloud components * [ADF-3538] added new package to the script and the builds * [ADF-3538] added some more changes to scripts * [ADF-3538] - starting the new package * change index * fix package * Fix module structure with Cli * add basic structure * Create a library with angular cli * Add a cloud component as example * Skip the scss style * add the import scss * remove useless codes * Add i18n example * remove useless code * Simplify the hello component Fix the wrong path * add the app-list-cloud-component add the app-details-cloud-component * Expose and use the new component * Consume the new package and component from the demoshell * Fix process service cloud path * [ADF-3538] Alfresco Process Service Cloud - new package with CLI (#3872) * [ADF-3538] start creating new folder for cloud components * [ADF-3538] added new package to the script and the builds * [ADF-3538] added some more changes to scripts * [ADF-3538] - starting the new package * change index * fix package * Fix module structure with Cli * add basic structure * Create a library with angular cli * Add a cloud component as example * Skip the scss style * add the import scss * remove useless codes * Add i18n example * remove useless code * Simplify the hello component Fix the wrong path * Fix process service cloud path * Download process-service-cloud from the CS * [ADF-3538] generated task-list cloud by cli * [ADF-3550] Added Task Filter Cloud component * [ADF-3550] Task Filter Cloud component relocated * [ADF-3538] rebased task list cloud 2.0 * [ADF-3538] fixed ng-package.json * [ADF-3538] reverted worng changes * [ADF-3538] removed wrong rebased files * [ADF-3538] forcing update of app-list file * [ADF-3538] wrong file after rebase removed * [ADF-3538] wrong file after rebase fixe * Merge the applist component with task list * [ADF-3550] Added Task Filter Cloud component * emit the event * Add the route process cloud and fix the page issues * fixed wrong pagination initialisation * improved initialisation of page size * removed unused import * fixed tsconfig with double definition * Use standard name for scss * fix sorting issue and remove useless models * Fix tslint * Use 1 single testing module file * [ADF-3538] [ADF-3547] Fix selected task filter and unit tests * Fix unit tests and remove useless imports * Uncomment unit tests * Remove useless component * Use main module instead of submodules * Remove useless jsdoc and improve doc * Remove useless jsdoc * Remove useless interface * remove AfterViewInit import * remove js doc params
2025-07-24 17:32:15 +00:00 · 2018-10-26 14:39:06 +01:00
parent ee7af9d797
commit 38f4916e06
57 changed files with 2862 additions and 312 deletions
--- a/demo-shell/src/app/app.module.ts
+++ b/demo-shell/src/app/app.module.ts
@@ -63,8 +63,9 @@ import { ContentModule } from '@alfresco/adf-content-services';
 import { InsightsModule } from '@alfresco/adf-insights';
 import { ProcessModule } from '@alfresco/adf-process-services';
 import { AuthBearerInterceptor } from './services';
-import { AppListCloudModule } from '@alfresco/adf-process-services-cloud';
+import { ProcessServicesCloudModule } from '@alfresco/adf-process-services-cloud';
 import { CloudComponent } from './components/cloud/cloud.component';
+import { TaskListCloudDemoComponent } from './components/task-list-cloud-demo/task-list-cloud-demo.component';

@NgModule({
    imports: [
@@ -83,7 +84,7 @@ import { CloudComponent } from './components/cloud/cloud.component';
        ThemePickerModule,
        ChartsModule,
        MonacoEditorModule.forRoot(),
-        AppListCloudModule
+        ProcessServicesCloudModule
    ],
    declarations: [
        AppComponent,
@@ -113,7 +114,8 @@ import { CloudComponent } from './components/cloud/cloud.component';
        FormLoadingComponent,
        DemoPermissionComponent,
        FormLoadingComponent,
-        ReportIssueComponent
+        ReportIssueComponent,
+        TaskListCloudDemoComponent
    ],
    providers: [
        {
--- a/demo-shell/src/app/app.routes.ts
+++ b/demo-shell/src/app/app.routes.ts
@@ -41,6 +41,7 @@ import { DemoPermissionComponent } from './components/permissions/demo-permissio
 import { ReportIssueComponent } from './components/report-issue/report-issue.component';
 import { AppComponent } from './app.component';
 import { CloudComponent } from './components/cloud/cloud.component';
+import { TaskListCloudDemoComponent } from './components/task-list-cloud-demo/task-list-cloud-demo.component';

 export const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },
@@ -135,7 +136,16 @@ export const appRoutes: Routes = [
            },
            {
                path: 'cloud',
-                component: CloudComponent
+                children: [
+                    {
+                        path: '',
+                        component: CloudComponent
+                    },
+                    {
+                        path: ':applicationName/tasks',
+                        component: TaskListCloudDemoComponent
+                    }
+                ]
            },
            {
                path: 'node-selector',
--- a/demo-shell/src/app/components/app-layout/app-layout.component.ts
+++ b/demo-shell/src/app/components/app-layout/app-layout.component.ts
@@ -40,6 +40,7 @@ export class AppLayoutComponent implements OnInit {
        { href: '/node-selector', icon: 'attachment', title: 'APP_LAYOUT.NODE-SELECTOR' },
        { href: '/task-list', icon: 'assignment', title: 'APP_LAYOUT.TASK_LIST' },
        { 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' },
        { href: '/login', icon: 'vpn_key', title: 'APP_LAYOUT.LOGIN' },
        { href: '/trashcan', icon: 'delete', title: 'APP_LAYOUT.TRASHCAN' },
--- a/demo-shell/src/app/components/cloud/cloud.component.html
+++ b/demo-shell/src/app/components/cloud/cloud.component.html
@@ -1,2 +1,2 @@

-<adf-cloud-app-list></adf-cloud-app-list>
+<adf-cloud-app-list (appClick)="onAppClick($event)"></adf-cloud-app-list>
--- a/demo-shell/src/app/components/cloud/cloud.component.ts
+++ b/demo-shell/src/app/components/cloud/cloud.component.ts
@@ -16,7 +16,7 @@
 */

 import { Component, OnInit } from '@angular/core';
-
+import { Router } from '@angular/router';
@Component({
    selector: 'app-cloud',
    templateUrl: './cloud.component.html',
@@ -24,9 +24,13 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CloudComponent implements OnInit {

-    constructor() {
+    constructor(private router: Router) {
    }

    ngOnInit() {
    }
+
+    onAppClick(app) {
+        this.router.navigate([`/cloud/${app.name}/tasks/`]);
+    }
 }
--- a/demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.html
+++ b/demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.html
@@ -0,0 +1,86 @@
+<h2>TASK LIST CLOUD DEMO</h2>
+<adf-cloud-task-filters
+    [appName]="'my-app'"
+    [showIcons]="true"
+    (filterClick)="onFilterSelected($event)">
+</adf-cloud-task-filters>
+
+<mat-accordion>
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                {{filterName}}
+            </mat-panel-title>
+            <mat-panel-description>
+                Customise your filter
+            </mat-panel-description>
+        </mat-expansion-panel-header>
+        <div class="task-cloud-demo-select">
+            <mat-form-field style="margin: 8px;">
+                <mat-select placeholder="Status" [(ngModel)]="status">
+                    <mat-option value="">
+                        ALL
+                    </mat-option>
+                    <mat-option value="CREATED">
+                        CREATED
+                    </mat-option>
+                    <mat-option value="CANCELLED">
+                        CANCELLED
+                    </mat-option>
+                    <mat-option value="ASSIGNED">
+                        ASSIGNED
+                    </mat-option>
+                    <mat-option value="SUSPENDED">
+                        SUSPENDED
+                    </mat-option>
+                    <mat-option value="COMPLETED">
+                        COMPLETED
+                    </mat-option>
+                    <mat-option value="DELETED">
+                        DELETED
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+            <mat-form-field>
+                <mat-select [formControl]="sortFormControl">
+                    <mat-option [value]="''">Select a column</mat-option>
+                    <mat-option *ngFor="let column of columns" [value]="column.key">
+                    {{column.label}}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+            <mat-form-field>
+                <mat-select [formControl]="sortDirectionFormControl">
+                    <mat-option [value]="''">Select a direction</mat-option>
+                    <mat-option value="ASC">
+                        ASC
+                    </mat-option>
+                    <mat-option value="DESC">
+                        DESC
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+
+    </mat-expansion-panel>
+</mat-accordion>
+<div>
+    <adf-cloud-task-list *ngIf="isFilterLoaded" #taskCloud
+                         [applicationName]="applicationName"
+                         [status]="status"
+                         [landingTaskId]="selectTask"
+                         [sorting]="sortArray"
+                         (rowClick)="onRowClick($event)">
+        <data-columns>
+            <data-column key="entry.id" title="Id"></data-column>
+            <data-column key="entry.name" title="Name"></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" title="Created Date"></data-column>
+        </data-columns>
+    </adf-cloud-task-list>
+    <adf-pagination [target]="taskCloud"
+                    (changePageSize)="onChangePageSize($event)">
+    </adf-pagination>
+</div>
--- a/demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.scss
+++ b/demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.scss
@@ -0,0 +1,15 @@
+.task-cloud-demo-select {
+    padding: 10px;
+}
+
+.task-cloud-demo-select .mat-expansion-panel-body {
+    display: flex;
+}
+
+.app-task-list-cloud-demo-selection{
+    display: flex;
+}
+
+.task-row-clicked {
+    align-self: center;
+}
--- a/demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.ts
+++ b/demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.ts
@@ -0,0 +1,126 @@
+/*!
+ * @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, ViewChild, OnInit } from '@angular/core';
+import { TaskListCloudComponent, TaskListCloudSortingModel } from '@alfresco/adf-process-services-cloud';
+import { UserPreferencesService } from '@alfresco/adf-core';
+import { Observable } from 'rxjs';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FormControl } from '@angular/forms';
+
+@Component({
+    selector: 'app-task-list-cloud-demo',
+    templateUrl: 'task-list-cloud-demo.component.html',
+    styleUrls: ['task-list-cloud-demo.component.scss']
+})
+export class TaskListCloudDemoComponent implements OnInit {
+
+    @ViewChild('taskCloud')
+    taskCloud: TaskListCloudComponent;
+
+    sortFormControl: FormControl;
+    sortDirectionFormControl: FormControl;
+
+    appDefinitionList: Observable<any>;
+    applicationName: string = '';
+    status: string = '';
+    sort: string = '';
+    isFilterLoaded = false;
+    sortDirection: string = 'ASC';
+    filterName: string;
+    clickedRow: string = '';
+    selectTask: string = '';
+    sortArray: TaskListCloudSortingModel [];
+
+    columns = [
+        {key: 'id', label: 'ID'},
+        {key: 'name', label: 'NAME'},
+        {key: 'createdDate', label: 'Created Date'},
+        {key: 'priority', label: 'PRIORITY'},
+        {key: 'processDefinitionId', label: 'PROCESS DEFINITION ID'}
+      ];
+
+    constructor(
+        private route: ActivatedRoute,
+        private router: Router,
+        private userPreference: UserPreferencesService) {
+    }
+
+    ngOnInit() {
+        this.isFilterLoaded = false;
+        this.route.params.subscribe(params => {
+            this.applicationName = params.applicationName;
+        });
+
+        this.sortFormControl = new FormControl('');
+
+        this.sortFormControl.valueChanges.subscribe(
+            (sortValue) => {
+                this.sort = sortValue;
+
+                this.sortArray = [{
+                    orderBy: this.sort,
+                    direction: this.sortDirection
+                }];
+            }
+        );
+        this.sortDirectionFormControl = new FormControl('');
+
+        this.sortDirectionFormControl.valueChanges.subscribe(
+            (sortDirectionValue) => {
+                this.sortDirection = sortDirectionValue;
+
+                this.sortArray = [{
+                    orderBy: this.sort,
+                    direction: this.sortDirection
+                }];
+            }
+        );
+
+        this.route.queryParams
+            .subscribe(params => {
+                if (params.status) {
+                    this.status = params.status;
+                    this.sort = params.sort;
+                    this.sortDirection = params.order;
+                    this.filterName = params.filterName;
+                    this.isFilterLoaded = true;
+                    this.sortDirectionFormControl.setValue(this.sortDirection);
+                    this.sortFormControl.setValue(this.sort);
+                }
+            });
+    }
+
+    onFilterSelected(filter) {
+        const queryParams = {
+            status: filter.query.state,
+            filterName: filter.name,
+            sort: filter.query.sort,
+            order: filter.query.order
+        };
+        this.router.navigate([`/cloud/${this.applicationName}/tasks/`], {queryParams: queryParams});
+    }
+
+    onChangePageSize(event) {
+        this.userPreference.paginationSize = event.maxItems;
+    }
+
+    onRowClick($event) {
+        this.clickedRow = $event;
+    }
+
+}