AAE-29424 Screens

lib/process-services-cloud/src/lib/screen/components/screen-cloud/screen-cloud.component.html

@@ -0,0 +1 @@
+<div #container></div>

lib/process-services-cloud/src/lib/screen/components/screen-cloud/screen-cloud.component.spec.ts

@@ -0,0 +1,53 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * 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 { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TaskScreenCloudComponent } from './screen-cloud.component';
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ScreenRenderingService } from '../../../services/public-api';
+import { By } from '@angular/platform-browser';
+
+@Component({
+    selector: 'adf-cloud-test-component',
+    template: `<div class="adf-cloud-test-container">test component</div>`,
+    imports: [CommonModule],
+    standalone: true
+})
+class TestComponent {}
+
+describe('TaskScreenCloudComponent', () => {
+    let fixture: ComponentFixture<TaskScreenCloudComponent>;
+    let screenRenderingService: ScreenRenderingService;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [TaskScreenCloudComponent, TestComponent]
+        });
+        fixture = TestBed.createComponent(TaskScreenCloudComponent);
+        screenRenderingService = TestBed.inject(ScreenRenderingService);
+        screenRenderingService.register({ ['test']: () => TestComponent });
+        fixture.componentRef.setInput('screenId', 'test');
+        fixture.detectChanges();
+    });
+
+    it('should create custom component instance', () => {
+        const dynamicComponent = fixture.debugElement.query(By.css('.adf-cloud-test-container'));
+        expect(dynamicComponent).toBeTruthy();
+    });
+});

lib/process-services-cloud/src/lib/screen/components/screen-cloud/screen-cloud.component.ts

@@ -0,0 +1,62 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * 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 { CommonModule } from '@angular/common';
+import { Component, ComponentRef, inject, Input, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import { ScreenRenderingService } from '../../../services/public-api';
+
+@Component({
+    selector: 'adf-cloud-task-screen',
+    standalone: true,
+    imports: [CommonModule],
+    template: '<div #container></div>'
+})
+export class TaskScreenCloudComponent implements OnInit {
+    /** Task id to fetch corresponding form and values. */
+    @Input() taskId: string;
+    /** App id to fetch corresponding form and values. */
+    @Input()
+    appName: string = '';
+    /** Screen id to fetch corresponding screen widget. */
+    @Input()
+    screenId: string = '';
+    /** Toggle readonly state of the task. */
+    @Input()
+    readOnly = false;
+
+    @ViewChild('container', { read: ViewContainerRef, static: true })
+    container: ViewContainerRef;
+    componentRef: ComponentRef<any>;
+
+    private readonly screenRenderingService = inject(ScreenRenderingService);
+
+    ngOnInit() {
+        if (this.screenId) {
+            const componentType = this.screenRenderingService.resolveComponentType({ type: this.screenId });
+            this.componentRef = this.container.createComponent(componentType);
+            if (this.taskId) {
+                this.componentRef.setInput('taskId', this.taskId);
+            }
+            if (this.appName) {
+                this.componentRef.setInput('appName', this.appName);
+            }
+            if (this.screenId) {
+                this.componentRef.setInput('screenId', this.screenId);
+            }
+        }
+    }
+}

lib/process-services-cloud/src/lib/services/public-api.ts

@@ -15,13 +15,14 @@
  * limitations under the License.
  */
 
-export * from './user-preference-cloud.service';
-export * from './local-preference-cloud.service';
+export * from './base-cloud.service';
 export * from './cloud-token.service';
+export * from './form-fields.interfaces';
+export * from './local-preference-cloud.service';
 export * from './notification-cloud.service';
 export * from './preference-cloud.interface';
-export * from './form-fields.interfaces';
-export * from './base-cloud.service';
+export * from './screen-rendering.service';
 export * from './task-list-cloud.service.interface';
+export * from './user-preference-cloud.service';
 export * from './variable-mapper.sevice';
 export * from './web-socket.service';

lib/process-services-cloud/src/lib/services/screen-rendering.service.spec.ts

@@ -0,0 +1,32 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * 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 { TestBed } from '@angular/core/testing';
+import { ScreenRenderingService } from './screen-rendering.service';
+
+describe('ScreenRenderingService', () => {
+    let service: ScreenRenderingService;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({});
+        service = TestBed.inject(ScreenRenderingService);
+    });
+
+    it('should be created', () => {
+        expect(service).toBeTruthy();
+    });
+});

lib/process-services-cloud/src/lib/services/screen-rendering.service.ts

@@ -0,0 +1,24 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * 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 { DynamicComponentMapper } from '@alfresco/adf-core';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ScreenRenderingService extends DynamicComponentMapper {}

lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud/task-form-cloud.component.html

@@ -0,0 +1,40 @@
+<div class="adf-task-form-cloud-container">
+    <adf-cloud-form
+        #adfCloudForm
+        [appName]="appName"
+        [appVersion]="taskDetails.appVersion"
+        [taskId]="taskId"
+        [showTitle]="showTitle"
+        [processInstanceId]="taskDetails.processInstanceId"
+        [readOnly]="isReadOnly()"
+        [showRefreshButton]="showRefreshButton"
+        [showValidationIcon]="showValidationIcon"
+        [showCompleteButton]="canCompleteTask()"
+        [showSaveButton]="canCompleteTask()"
+        [displayModeConfigurations]="displayModeConfigurations"
+        [fieldValidators]="fieldValidators"
+        (formSaved)="onFormSaved($event)"
+        (formCompleted)="onFormCompleted($event)"
+        (formError)="onError($event)"
+        (error)="onError($event)"
+        (formContentClicked)="onFormContentClicked($event)"
+        (executeOutcome)="onFormExecuteOutcome($event)"
+        (displayModeOn)="onDisplayModeOn($event)"
+        (displayModeOff)="onDisplayModeOff($event)"
+    >
+        <adf-cloud-form-custom-outcomes>
+            <adf-cloud-user-task-cloud-buttons
+                [appName]="appName"
+                [canClaimTask]="canClaimTask()"
+                [canUnclaimTask]="canUnclaimTask()"
+                [showCancelButton]="showCancelButton"
+                [taskId]="taskId"
+                (cancelClick)="onCancelClick()"
+                (claimTask)="onClaimTask()"
+                (unclaimTask)="onUnclaimTask()"
+                (error)="onError($event)"
+            >
+            </adf-cloud-user-task-cloud-buttons>
+        </adf-cloud-form-custom-outcomes>
+    </adf-cloud-form>
+</div>

lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.scss → lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud/task-form-cloud.component.scss

@@ -29,23 +29,4 @@
             }
         }
     }
-
-    &-cloud-spinner {
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
-}
-
-adf-cloud-task-form {
-    .adf-task-form-cloud-spinner {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        overflow: hidden;
-    }
 }