[ADF-2494] Task Standalone - Provide a way to attach a form (#3459)

* button added for task standalone * attach form component added * slide-toggle position fixed * tests added * rebase fixed * review fix * test added & fixes * tests fixes * refresh task details * tests fixed * attachFormToATask test added * formPreview test fixed * adf-form test fixed
2025-07-24 17:32:15 +00:00 · 2018-06-28 12:39:15 +03:00
parent 9fef181155
commit 8dfd67e037
16 changed files with 323 additions and 20 deletions
--- a/lib/process-services/task-list/components/attach-form.component.html
+++ b/lib/process-services/task-list/components/attach-form.component.html
@@ -0,0 +1,30 @@
+<div class="adf-attach-form">
+    <mat-card>
+        <mat-card-content>
+            <div class="adf-no-form-message-container">
+                <mat-card-title class="mat-card-title">
+                    <h4 class="adf-form-title">{{ 'ADF_TASK_LIST.ATTACH_FORM.SELECT_FORM' | translate }}</h4>
+                </mat-card-title>
+                <div class="adf-attach-form-row">
+                    <mat-form-field class="adf-grid-full-width">
+                        <mat-select id="form_id" [(ngModel)]="formKey">
+                            <mat-option *ngFor="let form of forms" [value]="form.id">{{ form.name }}</mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                </div>
+
+                <adf-form
+                    [formId]="formKey"
+                    [readOnly]="true"
+                    [disableCompleteButton]="true"
+                    [showRefreshButton]="false">
+                </adf-form>
+            </div>
+        </mat-card-content>
+
+        <mat-card-actions class="adf-no-form-mat-card-actions">
+            <button mat-button id="adf-no-form-cancel-button" (click)="onCancelButtonClick()">{{ 'ADF_TASK_LIST.START_TASK.FORM.ACTION.CANCEL' | translate }}</button>
+            <button mat-button id="adf-no-form-attach-form-button" color="primary" (click)="onAttachFormButtonClick()">{{ 'ADF_TASK_LIST.START_TASK.FORM.LABEL.ATTACHFORM' | translate }}</button>
+        </mat-card-actions>
+    </mat-card>
+</div>
--- a/lib/process-services/task-list/components/attach-form.component.scss
+++ b/lib/process-services/task-list/components/attach-form.component.scss
@@ -0,0 +1,17 @@
+.adf-attach-form {
+    .mat-form-field {
+        width: 100%;
+    }
+
+    &-row {
+        display: flex;
+        justify-content: space-between;
+        margin: 20px 0;
+    }
+
+    .adf-no-form-mat-card-actions {
+        justify-content: flex-end;
+        margin-top: 30px;
+        text-align: right;
+    }
+}
--- a/lib/process-services/task-list/components/attach-form.component.spec.ts
+++ b/lib/process-services/task-list/components/attach-form.component.spec.ts
@@ -0,0 +1,78 @@
+/*!
+ * @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 { AttachFormComponent } from './attach-form.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { setupTestBed } from '@alfresco/adf-core';
+import { ProcessTestingModule } from '../../testing/process.testing.module';
+import { TaskListService } from './../services/tasklist.service';
+import { Observable } from 'rxjs/Observable';
+
+describe('AttachFormComponent', () => {
+    let component: AttachFormComponent;
+    let fixture: ComponentFixture<AttachFormComponent>;
+    let element: HTMLElement;
+    let taskService: TaskListService;
+
+    setupTestBed({
+        imports: [
+            ProcessTestingModule
+        ]
+    });
+
+    beforeEach(async(() => {
+        fixture = TestBed.createComponent(AttachFormComponent);
+        component = fixture.componentInstance;
+        element = fixture.nativeElement;
+        taskService = TestBed.get(TaskListService);
+        fixture.detectChanges();
+    }));
+
+    it('should emit cancel event if clicked on Cancel Button ', async(() => {
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            const emitSpy = spyOn(component.cancelAttachForm, 'emit');
+            const el = fixture.nativeElement.querySelector('#adf-no-form-cancel-button');
+            el.click();
+            expect(emitSpy).toHaveBeenCalled();
+        });
+    }));
+
+    it('should call attachFormToATask if clicked on Complete Button', async(() => {
+        component.taskId = 1;
+        component.formKey = 2;
+        spyOn(taskService, 'attachFormToATask').and.returnValue(Observable.of(true));
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            expect(element.querySelector('#adf-no-form-attach-form-button')).toBeDefined();
+            const el = fixture.nativeElement.querySelector('#adf-no-form-attach-form-button');
+            el.click();
+            expect(taskService.attachFormToATask).toHaveBeenCalledWith(1, 2);
+        });
+    }));
+
+    it('should show the adf-form of the selected form', async(() => {
+        component.taskId = 1;
+        component.formKey = 12;
+        fixture.detectChanges();
+        const formContainer = fixture.debugElement.nativeElement.querySelector('adf-form');
+        fixture.whenStable().then(() => {
+            expect(formContainer).toBeDefined();
+            expect(formContainer).not.toBeNull();
+        });
+    }));
+});
--- a/lib/process-services/task-list/components/attach-form.component.ts
+++ b/lib/process-services/task-list/components/attach-form.component.ts
@@ -0,0 +1,87 @@
+/*!
+ * @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 { LogService } from '@alfresco/adf-core';
+import { Component, EventEmitter, Input, OnInit, OnChanges, Output } from '@angular/core';
+import { Form } from '../models/form.model';
+import { TaskListService } from './../services/tasklist.service';
+
+@Component({
+    selector: 'adf-attach-form',
+    templateUrl: './attach-form.component.html',
+    styleUrls: ['./attach-form.component.scss']
+})
+
+export class AttachFormComponent implements OnInit, OnChanges {
+    constructor(private taskService: TaskListService,
+                private logService: LogService) { }
+
+    /** The id of the task whose details we are asking for. */
+    @Input()
+    taskId;
+
+    /** Emitted when the "Cancel" button is clicked. */
+    @Output()
+    cancelAttachForm: EventEmitter<void> = new EventEmitter<void>();
+
+    /** Emitted when the form associated with the form task is attached. */
+    @Output()
+    completeAttachForm: EventEmitter<void> = new EventEmitter<void>();
+
+    /** Emitted when an error occurs. */
+    @Output()
+    error: EventEmitter<any> = new EventEmitter<any>();
+
+    forms: Form[];
+
+    formKey: number;
+
+    ngOnInit() {
+        this.loadFormsTask();
+    }
+
+    ngOnChanges() {
+        this.loadFormsTask();
+    }
+
+    onCancelButtonClick(): void {
+        this.cancelAttachForm.emit();
+    }
+
+    onAttachFormButtonClick(): void {
+        this.attachForm(this.taskId, this.formKey);
+    }
+
+    private loadFormsTask(): void {
+        this.taskService.getFormList().subscribe((res: Form[]) => {
+                this.forms = res;
+            },
+            (err) => {
+                this.error.emit(err);
+                this.logService.error('An error occurred while trying to get the forms');
+            });
+    }
+
+    private attachForm(taskId: string, formKey: number) {
+        if (taskId && formKey) {
+            this.taskService.attachFormToATask(taskId, formKey)
+                .subscribe((res) => {
+                    this.completeAttachForm.emit();
+                });
+        }
+    }
+}
--- a/lib/process-services/task-list/components/task-details.component.html
+++ b/lib/process-services/task-list/components/task-details.component.html
@@ -39,12 +39,14 @@
                          (error)='onFormError($event)'
                          (executeOutcome)='onFormExecuteOutcome($event)'>
                </adf-form>
-                <adf-task-standalone *ngIf="!hasFormKey()" 
-                [taskName]= "taskDetails.name"
-                [isCompleted]="isCompletedTask()"
-                [hasCompletePermission]="isCompleteButtonEnabled()"
-                [hideCancelButton]="true"
-                (complete)="onComplete()">
+                <adf-task-standalone *ngIf="!hasFormKey()"
+                                     [taskName]= "taskDetails.name"
+                                     [taskId]= "taskDetails.id"
+                                     [isCompleted]="isCompletedTask()"
+                                     [hasCompletePermission]="isCompleteButtonEnabled()"
+                                     [hideCancelButton]="true"
+                                     (complete)="onComplete()"
+                                     (formAttached)="onFormAttached()">
                </adf-task-standalone>
            </div>
            <div *ngIf="!isAssigned()" id="claim-message-id">
--- a/lib/process-services/task-list/components/task-details.component.scss
+++ b/lib/process-services/task-list/components/task-details.component.scss
@@ -74,10 +74,12 @@ adf-task-header.assign-edit-view ::ng-deep adf-card-view ::ng-deep .adf-property
            flex-grow: 1;

            & ::ng-deep .adf-form-debug-container {
-                padding: 20px 0 0 0;
+                display: flex;
+                flex-direction: column;
+                padding: 20px 0;

                .mat-slide-toggle {
-                    float: right;
+                    margin-left: auto;

                    & + div {
                        background-color: black;
--- a/lib/process-services/task-list/components/task-details.component.spec.ts
+++ b/lib/process-services/task-list/components/task-details.component.spec.ts
@@ -160,9 +160,12 @@ describe('TaskDetailsComponent', () => {

    it('should not display task standalone component when the task have an associated form', async(() => {
        component.taskId = '123';
+        component.taskDetails = new TaskDetailsModel(taskDetailsMock);
+        component.taskDetails.formKey = '10';
        fixture.detectChanges();
        fixture.whenStable().then(() => {
            fixture.detectChanges();
+            expect(fixture.debugElement.query(By.css('adf-task-standalone'))).toBeDefined();
            expect(fixture.debugElement.query(By.css('adf-task-standalone'))).not.toBeNull();
        });
    }));
--- a/lib/process-services/task-list/components/task-details.component.ts
+++ b/lib/process-services/task-list/components/task-details.component.ts
@@ -21,6 +21,7 @@ import {
    CardViewUpdateService,
    ClickNotification,
    LogService,
+    FormService,
    UpdateNotification,
    FormRenderingService,
    CommentsComponent
@@ -186,6 +187,7 @@ export class TaskDetailsComponent implements OnInit, OnChanges {
                private authService: AuthenticationService,
                private peopleProcessService: PeopleProcessService,
                private formRenderingService: FormRenderingService,
+                private formService: FormService,
                private logService: LogService,
                private cardViewUpdateService: CardViewUpdateService,
                private dialog: MatDialog) {
@@ -363,6 +365,13 @@ export class TaskDetailsComponent implements OnInit, OnChanges {
        );
    }

+    onFormAttached() {
+        this.formService.getTaskForm(this.taskId)
+            .subscribe((res) => {
+                this.loadDetails(this.taskId);
+            }, error => this.logService.error('Could not load forms'));
+    }
+
    onFormContentClick(content: ContentLinkModel): void {
        this.formContentClicked.emit(content);
    }
--- a/lib/process-services/task-list/components/task-standalone.component.html
+++ b/lib/process-services/task-list/components/task-standalone.component.html
@@ -1,4 +1,4 @@
-<mat-card class="adf-message-card">
+<mat-card class="adf-message-card" *ngIf="!showAttachForm">
    <mat-card-content>
        <div class="adf-no-form-message-container">
            <div class="adf-no-form-message-list">
@@ -18,7 +18,16 @@
    </mat-card-content>

    <mat-card-actions class="adf-no-form-mat-card-actions">
-        <button mat-button *ngIf="hasCancelButton()" id="adf-no-form-cancel-button" (click)="onCancelButtonClick()">{{ 'ADF_TASK_LIST.START_TASK.FORM.ACTION.CANCEL' | translate }}</button>
-        <button mat-button *ngIf="hasCompleteButton()" id="adf-no-form-complete-button" color="primary" (click)="onCompleteButtonClick()">{{ 'ADF_TASK_LIST.DETAILS.BUTTON.COMPLETE' | translate }}</button>
+        <button mat-button *ngIf="hasAttachFormButton()" id="adf-no-form-attach-form-button" (click)="onShowAttachForm()">{{ 'ADF_TASK_LIST.START_TASK.FORM.LABEL.ATTACHFORM' | translate }}</button>
+        <div>
+            <button mat-button *ngIf="hasCancelButton()" id="adf-no-form-cancel-button" (click)="onCancelButtonClick()">{{ 'ADF_TASK_LIST.START_TASK.FORM.ACTION.CANCEL' | translate }}</button>
+            <button mat-button *ngIf="hasCompleteButton()" id="adf-no-form-complete-button" color="primary" (click)="onCompleteButtonClick()">{{ 'ADF_TASK_LIST.DETAILS.BUTTON.COMPLETE' | translate }}</button>
+        </div>
    </mat-card-actions>
-</mat-card>
+</mat-card>
+
+<adf-attach-form *ngIf="showAttachForm"
+                 [taskId]="taskId"
+                 (cancelAttachForm)="onCancelAttachForm()"
+                 (completeAttachForm)="onCompleteAttachForm()">
+</adf-attach-form>
--- a/lib/process-services/task-list/components/task-standalone.component.scss
+++ b/lib/process-services/task-list/components/task-standalone.component.scss
@@ -2,7 +2,7 @@

    $config: mat-typography-config();
    $background: map-get($theme, background);
-    
+
    .adf {
        &-message-card {
            width: 60%;
@@ -13,7 +13,7 @@
              }
        }
        &-no-form-message-container {
-            height:256px;
+            height: 256px;
            width: 100%;
            display: table;
        }
@@ -37,8 +37,9 @@
            margin: auto;
            width: fit-content !important;
        }
-        &-no-form-mat-card-actions {
-            text-align: right;
+        &-no-form-mat-card-actions.mat-card-actions {
+            display: flex;
+            justify-content: space-between;
            & .mat-button {
                text-transform: uppercase;
                border-radius: 5px;
@@ -50,4 +51,4 @@
            }
        }
    }
-}
+}
--- a/lib/process-services/task-list/components/task-standalone.component.ts
+++ b/lib/process-services/task-list/components/task-standalone.component.ts
@@ -28,7 +28,11 @@ export class TaskStandaloneComponent {

    /** Name of the task. */
    @Input()
-    taskName: string;
+    taskName;
+
+    /** Id of the task. */
+    @Input()
+    taskId;

    /** If true then Task completed message is shown and `Complete` and `Cancel` buttons are hidden. */
    @Input()
@@ -50,6 +54,11 @@ export class TaskStandaloneComponent {
    @Output()
    complete: EventEmitter<void> = new EventEmitter<void>();

+    @Output()
+    formAttached: EventEmitter<void> = new EventEmitter<void>();
+
+    showAttachForm: boolean = false;
+
    constructor() { }

    onCancelButtonClick(): void {
@@ -67,4 +76,21 @@ export class TaskStandaloneComponent {
    hasCancelButton(): boolean {
        return !this.hideCancelButton && !this.isCompleted;
    }
+
+    hasAttachFormButton(): boolean {
+        return !this.isCompleted;
+    }
+
+    onShowAttachForm() {
+        this.showAttachForm = true;
+    }
+
+    onCancelAttachForm() {
+        this.showAttachForm = false;
+    }
+
+    onCompleteAttachForm() {
+        this.showAttachForm = false;
+        this.formAttached.emit();
+    }
 }