[ADF-3540] Start Task Cloud by cli (#3954)

* [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

* Add a cloud component as example

* Skip the scss style

* 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

* Fix process service cloud path

* Remove useless file

* [ADF-3540] Start Task Component APS2

* Generated startTaskCloudModule
* Generated start-task-cloud  component by cli
* Used  start-task-cloud in the demo shell

* * Added FormModule instead of  CoreModule
* Added StartTaskTestingModule
* Refactored startTaskCloud Component

* * Used FlexLayout
* Used Keylock api to fetch users
* Removed all css
* Refactored start-task-cloud component
* Removed form field from the starttask form
* Created UsedCloud model
* Added unit test to the recent changes
* Added mock objects

* * Added  unit test to the startTaskCloud component

* * Added documentation about startTaskCLoud component
* Changed runtimeBundle to appName
* Changed defaultTaskName to name

* * Generated people-cloud component
* Created initialUserName pipe

* * Fetching roles by userId
* Filtering Users with required roles
* Removed duplicates
* Generated initial-user-name pipe
* Generated people-cloud component
* Created roleCloud module

* * Rebased with development branch
* Created start-task-cloud-demo component in the demo-shell

* * Added unit tests to the start-task-cloud service
* Added unit test to the people-cloud component and userInitail pipe
* Updated start-task unit tests to the recent changes
* Created mock data

* * Updated people-cloud component with  error message* Updated unit tests

* * Included StartTaskCloud component in the demoShell* Created startTask demo component* Added create task button in the tasklist demo component

* * Added lodash

* * Fixed lodash import

* Add the start task into the cloud demo

* Fix the lodash import and @type

* Show the My task once the task has been created

* first change

* [ADF-3540] Improved start task component

* [ADF-3540] Fixed expression changed error

* [ADF-3540] Refactored code

* [ADF-3540] Fix lodash import error

* [ADF-3540] Remove lodash dependency

* [ADF-3540] Refatored code

* tmp

* [ADF-3540] Show/Hide current user as part of list

* [ADF-3340] Assign new task to current user when no assignee selected

* [ADF-3540] Rebased the latest changes

* [ADF-3540] Refactored code

* [ADF-3540] Improved user search logic for people component

* [ADF-3540] Moved user services to Core module

* [ADF-3540] Modified translation keys

* Add process-services-cloud into the license rule

* Fix wrong import for prod build

* Add license header

* Fix unit tests

* Fix proxy karma for content

* Fix proxy karma for process services

* Fix proxy karma for process cloud

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

@@ -121,7 +121,8 @@ import { AppExtensionsModule } from './extensions/extensions.module';
         ReportIssueComponent,
         TaskListCloudDemoComponent,
         ProcessListCloudExampleComponent,
-        TreeViewSampleComponent
+        TreeViewSampleComponent,
+        TaskListCloudDemoComponent
     ],
     providers: [
         {

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

@@ -141,11 +141,13 @@ export const appRoutes: Routes = [
                 children: [
                     {
                         path: '',
-                        component: CloudComponent
+                        component: CloudComponent,
+                        canActivate: [AuthGuard]
                     },
                     {
                         path: ':applicationName/tasks',
-                        component: TaskListCloudDemoComponent
+                        component: TaskListCloudDemoComponent,
+                        canActivate: [AuthGuard]
                     }
                 ]
             },

demo-shell/src/app/components/cloud/cloud.component.ts

@@ -15,21 +15,18 @@
  * limitations under the License.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 @Component({
     selector: 'app-cloud',
     templateUrl: './cloud.component.html',
     styleUrls: ['./cloud.component.scss']
 })
-export class CloudComponent implements OnInit {
+export class CloudComponent {
 
     constructor(private router: Router) {
     }
 
-    ngOnInit() {
-    }
-
     onAppClick(app) {
         this.router.navigate([`/cloud/${app.name}/tasks/`]);
     }

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

@@ -1,15 +1,31 @@
 <h2>TASK LIST CLOUD DEMO</h2>
-<adf-cloud-task-filters
-    [appName]="applicationName"
-    [showIcons]="true"
-    (filterClick)="onFilterSelected($event)">
-</adf-cloud-task-filters>
+<div fxLayout="row" fxLayout.xs="column">
+    <div fxFlexOrder="1" fxFlex="15%">
+        <adf-sidebar-action-menu [expanded]="true" [width]="205" title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
+            <mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
+            <div sidebar-menu-options>
+                <button mat-menu-item data-automation-id="btn-start-task" (click)="onStartTask()">
+                    <mat-icon>assessment</mat-icon>
+                    <span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span>
+                </button>
+            </div>
+        </adf-sidebar-action-menu>
+    </div>
+</div>
+
+<div *ngIf="showStartTask">
+    <adf-cloud-start-task [appName]="applicationName" (success)="onStartTaskSuccess()" (cancel)="onCancelStartTask()">
+    </adf-cloud-start-task>
+</div>
+<div *ngIf="!showStartTask">
+    <adf-cloud-task-filters [appName]="applicationName" [filterParam]="filterTaskParam" [showIcons]="true" (filterClick)="onFilterSelected($event)">
+    </adf-cloud-task-filters>
 
 <mat-accordion>
     <mat-expansion-panel>
         <mat-expansion-panel-header>
             <mat-panel-title>
-                {{filterName}}
+                {{filterName | translate}}
             </mat-panel-title>
             <mat-panel-description>
                 Customise your filter
@@ -62,25 +78,21 @@
             </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>
+        </mat-expansion-panel>
+    </mat-accordion>
+    <div *ngIf="isFilterLoaded">
+        <adf-cloud-task-list #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" 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" (changePageSize)="onChangePageSize($event)">
+        </adf-pagination>
+    </div>
 </div>

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

@@ -21,6 +21,7 @@ import { UserPreferencesService } from '@alfresco/adf-core';
 import { Observable } from 'rxjs';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormControl } from '@angular/forms';
+import { MatDialog } from '@angular/material';
 
 @Component({
     selector: 'app-task-list-cloud-demo',
@@ -36,14 +37,16 @@ export class TaskListCloudDemoComponent implements OnInit {
     sortDirectionFormControl: FormControl;
 
     appDefinitionList: Observable<any>;
-    applicationName: string = '';
+    applicationName;
     status: string = '';
     sort: string = '';
     isFilterLoaded = false;
+    showStartTask = false;
     sortDirection: string = 'ASC';
     filterName: string;
     clickedRow: string = '';
     selectTask: string = '';
+    filterTaskParam;
     sortArray: TaskListCloudSortingModel [];
 
     columns = [
@@ -55,13 +58,13 @@ export class TaskListCloudDemoComponent implements OnInit {
       ];
 
     constructor(
+        public dialog: MatDialog,
         private route: ActivatedRoute,
         private router: Router,
         private userPreference: UserPreferencesService) {
     }
 
     ngOnInit() {
-        this.isFilterLoaded = false;
         this.route.params.subscribe(params => {
             this.applicationName = params.applicationName;
         });
@@ -117,6 +120,19 @@ export class TaskListCloudDemoComponent implements OnInit {
         this.router.navigate([`/cloud/${this.applicationName}/tasks/`], {queryParams: queryParams});
     }
 
+    onStartTask() {
+        this.showStartTask = true;
+    }
+
+    onStartTaskSuccess() {
+        this.showStartTask = false;
+        this.filterTaskParam = { name: 'My tasks'};
+    }
+
+    onCancelStartTask() {
+        this.showStartTask = false;
+    }
+
     onChangePageSize(event) {
         this.userPreference.paginationSize = event.maxItems;
     }
@@ -124,5 +140,4 @@ export class TaskListCloudDemoComponent implements OnInit {
     onRowClick($event) {
         this.clickedRow = $event;
     }
-
 }