[ADF-3539] created first version for process list cloud (#3925)

* [ADF-3539] created first version for process list cloud

* [ADF-3539] fixed process list and added demo page

* [ADF-3539] fixed sorting and start working on tests

* [ADF-3539] start adding tests for process list cloud

* [ADF-3539] fixed empty templates unit tests

* [ADF-3539] added documentation

* [ADF-3539] missed import

* [ADF-3539] fixed wrong export

* [ADF-3539] removed model

* [ADF-3539] fixed style problem and removed wrong comment

demo-shell/src/app/app.module.ts

@@ -66,6 +66,7 @@ import { AuthBearerInterceptor } from './services';
 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';
+import { ProcessListCloudExampleComponent } from './components/cloud/process-list-cloud-example.component';
 
 @NgModule({
     imports: [
@@ -115,7 +116,8 @@ import { TaskListCloudDemoComponent } from './components/task-list-cloud-demo/ta
         DemoPermissionComponent,
         FormLoadingComponent,
         ReportIssueComponent,
-        TaskListCloudDemoComponent
+        TaskListCloudDemoComponent,
+        ProcessListCloudExampleComponent
     ],
     providers: [
         {

demo-shell/src/app/app.routes.ts

@@ -42,6 +42,7 @@ import { ReportIssueComponent } from './components/report-issue/report-issue.com
 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';
+import { ProcessListCloudExampleComponent } from './components/cloud/process-list-cloud-example.component';
 
 export const appRoutes: Routes = [
     { path: 'login', component: LoginComponent },
@@ -147,6 +148,10 @@ export const appRoutes: Routes = [
                     }
                 ]
             },
+            {
+                path: 'process-cloud',
+                component: ProcessListCloudExampleComponent
+            },
             {
                 path: 'node-selector',
                 loadChildren: 'app/components/content-node-selector/content-node-selector.module#AppContentNodeSelectorModule'

demo-shell/src/app/components/cloud/process-list-cloud-example.component.html

@@ -0,0 +1,94 @@
+<div>PROCESS LIST CLOUD</div>
+<adf-cloud-app-list *ngIf="!currentAppName"
+                    (appClick)="onAppClick($event)"></adf-cloud-app-list>
+<div *ngIf="currentAppName">
+    <mat-accordion>
+        <mat-expansion-panel>
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    Process Example Filters
+                </mat-panel-title>
+                <mat-panel-description>
+                    Apply one of the filters to the process list
+                </mat-panel-description>
+            </mat-expansion-panel-header>
+            <div class="app-process-cloud-spacing">
+                <mat-form-field>
+                    <mat-select placeholder="Status" [(ngModel)]="status">
+                        <mat-option value="">
+                            ALL
+                        </mat-option>
+                        <mat-option value="RUNNING">
+                            RUNNING
+                        </mat-option>
+                        <mat-option value="SUSPENDED">
+                            SUSPENDED
+                        </mat-option>
+                        <mat-option value="CANCELLED">
+                            CANCELLED
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+            </div>
+            <div class="app-process-cloud-spacing">
+                <mat-form-field class="example-full-width">
+                    <input matInput placeholder="Filter by id" [(ngModel)]="filterId">
+                </mat-form-field>
+            </div>
+        </mat-expansion-panel>
+        <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        Sorting Panel
+                    </mat-panel-title>
+                    <mat-panel-description>
+                        Choose how to sort your tasks
+                    </mat-panel-description>
+                </mat-expansion-panel-header>
+                <div class="task-cloud-demo-select">
+                    <mat-form-field>
+                        <mat-select placeholder="Sort Field" [(ngModel)]="sortField">
+                            <mat-option value="id">
+                                ID
+                            </mat-option>
+                            <mat-option value="name">
+                                NAME
+                            </mat-option>
+                            <mat-option value="status">
+                                STATUS
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                </div>
+                <div class="task-cloud-demo-select">
+                    <mat-form-field>
+                        <mat-select placeholder="Direction" [(ngModel)]="sortDirection">
+                            <mat-option value="ASC">
+                                ASC
+                            </mat-option>
+                            <mat-option value="DESC">
+                                DESC
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                </div>
+                <button mat-button (click)="onFilterButtonClick($event)">Apply Filter</button>
+                <button mat-button (click)="onClearFilters()">Clear Filter</button>
+            </mat-expansion-panel>
+    </mat-accordion>
+    <adf-cloud-process-list
+                            [applicationName]="currentAppName"
+                            [status]="status"
+                            [sorting]="sortArray"
+                            [id]="filterId"
+                            #processCloud>
+        <data-columns>
+            <data-column key="entry.id" title="Id"></data-column>
+            <data-column key="entry.appName" title="Name"></data-column>
+            <data-column key="entry.status" title="Status"></data-column>
+        </data-columns>
+    </adf-cloud-process-list>
+    <adf-pagination [target]="processCloud" (changePageSize)="onChangePageSize($event)">
+    </adf-pagination>
+    <button mat-fab class="adf-process-list-cloud-button" color="primary" (click)="onClick()">Back</button>
+</div>

demo-shell/src/app/components/cloud/process-list-cloud-example.component.scss

@@ -0,0 +1,7 @@
+.adf-process-list-cloud-button {
+    margin: 15px;
+}
+
+.app-process-cloud-spacing {
+    margin: 10px;
+}

demo-shell/src/app/components/cloud/process-list-cloud-example.component.ts

@@ -0,0 +1,66 @@
+/*!
+ * @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 } from '@angular/core';
+import { UserPreferencesService } from '@alfresco/adf-core';
+import { ProcessListCloudComponent } from '@alfresco/adf-process-services-cloud';
+
+@Component({
+    selector: 'app-process-list-example',
+    templateUrl: './process-list-cloud-example.component.html',
+    styleUrls: ['./process-list-cloud-example.component.scss']
+})
+export class ProcessListCloudExampleComponent {
+
+    @ViewChild('processCloud')
+    processCloud: ProcessListCloudComponent;
+
+    currentAppName: string = '';
+    status: string = '';
+    filterId: string = '';
+    sortArray: any = [];
+    sortField: string;
+    sortDirection: string;
+
+    constructor(private userPreference: UserPreferencesService) {
+    }
+
+    onAppClick(appClicked: any) {
+        this.currentAppName = appClicked.name;
+    }
+
+    onClick() {
+        this.currentAppName = '';
+    }
+
+    onChangePageSize(event) {
+        this.userPreference.paginationSize = event.maxItems;
+    }
+
+    onFilterButtonClick($event) {
+        let newSortParam: any = {
+            orderBy: this.sortField,
+            direction: this.sortDirection };
+        this.sortArray.push(newSortParam);
+        this.processCloud.reload();
+    }
+
+    onClearFilters() {
+        this.sortArray = [];
+        this.processCloud.reload();
+    }
+}