[ADF-4979] Add onChanges detection for Task Header Cloud component (#5208)

* [ADF-4979] Add onChanges detection for Task Header Cloud component * [ADF-4979] Revert licenses.txt changes * [ADF-4979] Documentation added for the taskError Event
2025-07-24 17:32:15 +00:00 · 2019-11-06 11:07:48 +00:00
parent 7d36400dbd
commit 3c1097fb84
25 changed files with 380 additions and 238 deletions
--- a/demo-shell/resources/i18n/en.json
+++ b/demo-shell/resources/i18n/en.json
@@ -94,6 +94,12 @@
    "TREE_VIEW": "Tree View",
    "ICONS": "Icons",
    "PEOPLE_GROUPS_CLOUD": "People/Group Cloud",
+    "TASK_HEADER_CLOUD": {
+      "COMPONENT_NAME": "Task Header Cloud",
+      "APP_NAME_INPUT": "App name",
+      "TASK_ID_INPUT": "Task id",
+      "FIND_TASK_BUTTON": "Find Task"
+    },
    "PEOPLE_CLOUD": "People Cloud Component",
    "GROUPS_CLOUD": "Groups Cloud Component",
    "CONFIRM-DIALOG": "Confirmation Dialog",
--- a/demo-shell/src/app/app.module.ts
+++ b/demo-shell/src/app/app.module.ts
@@ -71,6 +71,7 @@ import { AppsCloudDemoComponent } from './components/cloud/apps-cloud-demo.compo
 import { TasksCloudDemoComponent } from './components/cloud/tasks-cloud-demo.component';
 import { ProcessesCloudDemoComponent } from './components/cloud/processes-cloud-demo.component';
 import { TaskDetailsCloudDemoComponent } from './components/cloud/task-details-cloud-demo.component';
+import { TaskHeaderCloudDemoComponent } from './components/cloud/task-header-cloud-demo.component';
 import { CloudViewerComponent } from './components/cloud/cloud-viewer.component';
 import { ProcessDetailsCloudDemoComponent } from './components/cloud/process-details-cloud-demo.component';
 import { StartTaskCloudDemoComponent } from './components/cloud/start-task-cloud-demo.component';
@@ -182,6 +183,7 @@ registerLocaleData(localeSv);
        TasksCloudDemoComponent,
        ProcessesCloudDemoComponent,
        TaskDetailsCloudDemoComponent,
+        TaskHeaderCloudDemoComponent,
        CloudViewerComponent,
        ProcessDetailsCloudDemoComponent,
        StartTaskCloudDemoComponent,
--- a/demo-shell/src/app/app.routes.ts
+++ b/demo-shell/src/app/app.routes.ts
@@ -58,6 +58,7 @@ import { TemplateDemoComponent } from './components/template-list/template-demo.
 import { FormCloudDemoComponent } from './components/app-layout/cloud/form-demo/cloud-form-demo.component';
 import { ConfirmDialogExampleComponent } from './components/confirm-dialog/confirm-dialog-example.component';
 import { DemoErrorComponent } from './components/error/demo-error.component';
+import { TaskHeaderCloudDemoComponent } from './components/cloud/task-header-cloud-demo.component';
 export const appRoutes: Routes = [
    { path: 'login', loadChildren: 'app/components/login/login.module#AppLoginModule' },
    { path: 'logout', component: LogoutComponent },
@@ -177,6 +178,10 @@ export const appRoutes: Routes = [
                        path: 'people-group-cloud',
                        component: PeopleGroupCloudDemoComponent
                    },
+                    {
+                        path: 'task-header-cloud',
+                        component: TaskHeaderCloudDemoComponent
+                    },
                    {
                        path: 'community',
                        loadChildren: 'app/components/cloud/community/community.module#AppCommunityModule'
--- a/demo-shell/src/app/components/app-layout/app-layout.component.ts
+++ b/demo-shell/src/app/components/app-layout/app-layout.component.ts
@@ -48,12 +48,15 @@ export class AppLayoutComponent implements OnInit, OnDestroy {
        { href: '/node-selector', icon: 'attachment', title: 'APP_LAYOUT.NODE-SELECTOR' },
        { href: '/sites', icon: 'format_list_bulleted', title: 'APP_LAYOUT.SITES' },
        { href: '/task-list', icon: 'assignment', title: 'APP_LAYOUT.TASK_LIST' },
-        { href: '/cloud', icon: 'cloud', title: 'APP_LAYOUT.PROCESS_CLOUD', children: [
-            { href: '/cloud/', icon: 'cloud', title: 'APP_LAYOUT.HOME' },
-            { href: '/cloud/community', icon: 'cloud', title: 'APP_LAYOUT.COMMUNITY' },
-            { href: '/form-cloud', icon: 'poll', title: 'APP_LAYOUT.FORM' },
-            { href: '/cloud/people-group-cloud', icon: 'group', title: 'APP_LAYOUT.PEOPLE_GROUPS_CLOUD' }
-        ]},
+        {
+            href: '/cloud', icon: 'cloud', title: 'APP_LAYOUT.PROCESS_CLOUD', children: [
+                { href: '/cloud/', icon: 'cloud', title: 'APP_LAYOUT.HOME' },
+                { href: '/cloud/community', icon: 'cloud', title: 'APP_LAYOUT.COMMUNITY' },
+                { href: '/form-cloud', icon: 'poll', title: 'APP_LAYOUT.FORM' },
+                { href: '/cloud/people-group-cloud', icon: 'group', title: 'APP_LAYOUT.PEOPLE_GROUPS_CLOUD' },
+                { href: '/cloud/task-header-cloud', icon: 'cloud', title: 'APP_LAYOUT.TASK_HEADER_CLOUD.COMPONENT_NAME' }
+            ]
+        },
        { href: '/activiti', icon: 'device_hub', title: 'APP_LAYOUT.PROCESS_SERVICES', children: [
            { href: '/activiti', icon: 'vpn_key', title: 'APP_LAYOUT.APP' },
            { href: '/process-list', icon: 'assignment', title: 'APP_LAYOUT.PROCESS_LIST' },
--- a/demo-shell/src/app/components/cloud/task-details-cloud-demo.component.html
+++ b/demo-shell/src/app/components/cloud/task-details-cloud-demo.component.html
@@ -8,8 +8,6 @@
                [taskId]="taskId"
                (cancelClick)="goBack()"
                (taskCompleted)="onTaskCompleted()"
-                (taskClaimed)="onTaskClaimed()"
-                (taskUnclaimed)="onTaskUnclaimed()"
                (formContentClicked)="onFormContentClicked($event)"
                (formSaved)="onFormSaved()">
            </adf-cloud-task-form>
--- a/demo-shell/src/app/components/cloud/task-details-cloud-demo.component.ts
+++ b/demo-shell/src/app/components/cloud/task-details-cloud-demo.component.ts
@@ -60,14 +60,6 @@ export class TaskDetailsCloudDemoComponent {
        this.goBack();
    }

-    onTaskClaimed() {
-        this.taskHeader.ngOnInit();
-    }
-
-    onTaskUnclaimed() {
-        this.taskHeader.ngOnInit();
-    }
-
    onFormContentClicked(resourceClicked: any) {
        this.previewService.showResource(resourceClicked.nodeId);
    }
--- a/demo-shell/src/app/components/cloud/task-header-cloud-demo.component.html
+++ b/demo-shell/src/app/components/cloud/task-header-cloud-demo.component.html
@@ -0,0 +1,31 @@
+<h2>{{ 'APP_LAYOUT.TASK_HEADER_CLOUD.COMPONENT_NAME' | translate }}</h2>
+
+<mat-form-field class="app-appName-input">
+    {{ 'APP_LAYOUT.TASK_HEADER_CLOUD.APP_NAME_INPUT' | translate }}
+    <input matInput
+           [type]="'text'"
+           [formControl]="appNameFormControl">
+</mat-form-field>
+
+<mat-form-field class="app-taskId-input">
+    {{ 'APP_LAYOUT.TASK_HEADER_CLOUD.TASK_ID_INPUT' | translate }}
+    <input matInput
+           [type]="'text'"
+           [formControl]="taskIdFormControl">
+</mat-form-field>
+
+<button mat-button *ngIf="appNameFormControl.value && taskIdFormControl.value"
+        class="app-find-task-button"
+        (click)="updateTaskHeader()">
+    {{ 'APP_LAYOUT.TASK_HEADER_CLOUD.FIND_TASK_BUTTON' | translate }}
+</button>
+
+<mat-error *ngIf="errorMessage">{{errorMessage}}</mat-error>
+
+<div>
+    <adf-cloud-task-header #taskHeader
+                           [appName]="appName"
+                           [taskId]="taskId"
+                           (taskError)="onError($event)">
+    </adf-cloud-task-header>
+</div>
--- a/demo-shell/src/app/components/cloud/task-header-cloud-demo.component.scss
+++ b/demo-shell/src/app/components/cloud/task-header-cloud-demo.component.scss
@@ -0,0 +1,16 @@
+.app {
+
+    &-appName-input {
+        width: 500px;
+        margin-right: 50px;
+    }
+
+    &-taskId-input {
+        width: 500px;
+    }
+
+    &-find-task-button {
+        background-color: #ff9800;
+        margin-left: 30px;
+    }
+}
--- a/demo-shell/src/app/components/cloud/task-header-cloud-demo.component.ts
+++ b/demo-shell/src/app/components/cloud/task-header-cloud-demo.component.ts
@@ -0,0 +1,49 @@
+/*!
+ * @license
+ * Copyright 2019 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 { TaskHeaderCloudComponent } from '@alfresco/adf-process-services-cloud';
+import { FormControl, Validators } from '@angular/forms';
+
+@Component({
+    templateUrl: './task-header-cloud-demo.component.html',
+    styleUrls: ['./task-header-cloud-demo.component.scss']
+})
+export class TaskHeaderCloudDemoComponent {
+    @ViewChild('taskHeader')
+    taskHeader: TaskHeaderCloudComponent;
+
+    appName: string;
+    taskId: string;
+
+    errorMessage;
+
+    appNameFormControl = new FormControl('', Validators.required);
+    taskIdFormControl = new FormControl('', Validators.required);
+
+    constructor() {}
+
+    updateTaskHeader() {
+        this.errorMessage = undefined;
+        this.appName = this.appNameFormControl.value;
+        this.taskId = this.taskIdFormControl.value;
+    }
+
+    onError(error) {
+        this.errorMessage = error.message;
+    }
+}