[ADF-740] Add button for process attachment list (#1955)

* [ADF-740] adding button to allow user to upload related content on process instance

* [ADF-740] add button for attachment content list for process

* changed locatin for translation

* [ADF-740] added test for add button for process attach

* [ADF-740] added PR request changes

demo-shell-ng2/app/components/activiti/activiti-demo.component.html

@@ -88,7 +88,7 @@
                             <div *ngIf="isCreateTaskAttachVisible()">
                                 <adf-create-task-attachment *ngIf="currentTaskId"
                                                             [taskId]="currentTaskId"
-                                                            (success)="onCreateTaskSuccess  ()">
+                                                            (success)="onCreateTaskSuccess()">
                                 </adf-create-task-attachment>
                             </div>
                         </div>
@@ -155,10 +155,22 @@
                             </activiti-process-instance-details>
                             <hr>
                             <h5>Attachments</h5>
+                            <div class="action-header">
+                                <button id="show_process_attach" class="mdl-button mdl-js-button" (click)="toggleCreateProcessAttach()">
+                                    Attach Document
+                                    <i class="material-icons">add</i>
+                                </button>
+                            </div>
                             <adf-process-attachment-list *ngIf="currentProcessInstanceId"
                                                       [processInstanceId]="currentProcessInstanceId"
                                                       (attachmentClick)="onAttachmentClick($event)">
                             </adf-process-attachment-list>
+                            <div *ngIf="isCreateProcessAttachVisible()">
+                                <adf-create-process-attachment *ngIf="currentProcessInstanceId"
+                                                            [processInstanceId]="currentProcessInstanceId"
+                                                            (contentCreated)="onContentCreated()">
+                                </adf-create-process-attachment>
+                            </div>
                         </div>
                         <div class="mdl-cell mdl-cell--10-col task-column mdl-shadow--2dp" *ngIf="isStartProcessMode()">
                             <activiti-start-process [appId]="appId" (start)="onStartProcessInstance($event)"></activiti-start-process>

demo-shell-ng2/app/components/activiti/activiti-demo.component.ts

@@ -30,7 +30,8 @@ import {
     ActivitiProcessInstanceListComponent,
     ActivitiStartProcessInstance,
     FilterProcessRepresentationModel,
-    ProcessInstance
+    ProcessInstance,
+    ActivitiProcessAttachmentListComponent
 } from 'ng2-activiti-processlist';
 import { AnalyticsReportListComponent } from 'ng2-activiti-analytics';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -73,6 +74,9 @@ export class ActivitiDemoComponent implements AfterViewInit {
     @ViewChild(ActivitiProcessInstanceDetails)
     activitiprocessdetails: ActivitiProcessInstanceDetails;
 
+    @ViewChild(ActivitiProcessAttachmentListComponent)
+    processAttachList: ActivitiProcessAttachmentListComponent;
+
     @ViewChild(ActivitiStartProcessInstance)
     activitiStartProcess: ActivitiStartProcessInstance;
 
@@ -105,6 +109,7 @@ export class ActivitiDemoComponent implements AfterViewInit {
     blobFile: any;
     flag: boolean = true;
     createTaskAttach: boolean = false;
+    createProcessAttach: boolean = false;
 
     dataTasks: ObjectDataTableAdapter;
     dataProcesses: ObjectDataTableAdapter;
@@ -336,6 +341,11 @@ export class ActivitiDemoComponent implements AfterViewInit {
         this.toggleCreateTakAttach();
     }
 
+    onContentCreated() {
+        this.processAttachList.reload();
+        this.toggleCreateProcessAttach();
+    }
+
     toggleCreateTakAttach(): void {
         this.createTaskAttach = !this.createTaskAttach;
     }
@@ -344,4 +354,11 @@ export class ActivitiDemoComponent implements AfterViewInit {
         return this.createTaskAttach;
     }
 
+    toggleCreateProcessAttach(): void {
+        this.createProcessAttach = !this.createProcessAttach;
+    }
+
+    isCreateProcessAttachVisible(): boolean {
+        return this.createProcessAttach;
+    }
 }

ng2-components/ng2-activiti-processlist/src/components/activiti-create-process-attachment.component.css

@@ -1,4 +1,4 @@
-.upload-attachment-container {
+.adf-upload-attachment-container {
     border: 1px solid rgb(224, 224, 224);
     background: #fff;
     text-align: left;
@@ -7,13 +7,13 @@
     text-align: center;
 }
 
-.drag-area {
+.adf-drag-area {
     border: 1px solid #eee;
     padding: 100px 10px;
     margin-bottom: 10px;
 }
 
-.upload-attachment-container button {
+.adf-upload-attachment-container button {
     color: rgb(253, 145, 0);
     opacity: 0.64;
 }

ng2-components/ng2-activiti-processlist/src/components/activiti-create-process-attachment.component.html

@@ -1,5 +1,5 @@
-<div class="upload-attachment-container">
+<div class="adf-upload-attachment-container">
-    <div class="drag-area"
+    <div class="adf-drag-area"
     (upload-files)="onFileUpload($event)"
     mode="['click', 'drop']"
     [adf-upload]="true">

ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.css

@@ -0,0 +1,19 @@
+.upload-attachment-container {
+    border: 1px solid rgb(224, 224, 224);
+    background: #fff;
+    text-align: left;
+    border-top: none;
+    padding: 10px;
+    text-align: center;
+}
+
+.drag-area {
+    border: 1px solid #eee;
+    padding: 100px 10px;
+    margin-bottom: 10px;
+}
+
+.upload-attachment-container button {
+    color: rgb(253, 145, 0);
+    opacity: 0.64;
+}

ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.html

@@ -0,0 +1,17 @@
+<div class="upload-attachment-container">
+    <div class="drag-area"
+         id="add_new_process_content_area"
+         (upload-files)="onFileUpload($event)"
+         mode="['click', 'drop']"
+         [adf-upload]="true">
+        {{ 'DETAILS.BUTTON.DRAG-ATTACHMENT' | translate }}
+    </div>
+    <button class="mdl-button mdl-js-button mdl-button--raised"
+            id="add_new_process_content_button"
+            [adf-upload]="true"
+            mode="['click']"
+            [multiple]="true"
+            (upload-files)="onFileUpload($event)">
+        {{ 'DETAILS.BUTTON.UPLOAD-ATTACHMENT' | translate }}
+    </button>
+</div>

ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.spec.ts

@@ -0,0 +1,159 @@
+/*!
+ * @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 { SimpleChange } from '@angular/core';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
+import { ActivitiContentService } from 'ng2-activiti-form';
+import { ActivitiCreateProcessAttachmentComponent } from './adf-create-process-attachment.component';
+
+declare let jasmine: any;
+
+describe('Activiti Process Create Attachment', () => {
+
+    let componentHandler: any;
+    let service: ActivitiContentService;
+    let component: ActivitiCreateProcessAttachmentComponent;
+    let fixture: ComponentFixture<ActivitiCreateProcessAttachmentComponent>;
+    let element: HTMLElement;
+
+    let file = new File([new Blob()], 'Test');
+    let customEvent = { detail: { files: [file] } };
+
+    let fakeUploadResponse = {
+        id: 9999,
+        name: 'BANANA.jpeg',
+        created: '2017-06-12T12:52:11.109Z',
+        createdBy: { id: 2, firstName: 'fake-user', lastName: 'fake-user', email: 'fake-user' },
+        relatedContent: false,
+        contentAvailable: true,
+        link: false,
+        mimeType: 'image/jpeg',
+        simpleType: 'image',
+        previewStatus: 'queued',
+        thumbnailStatus: 'queued'
+    };
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                CoreModule.forRoot()
+            ],
+            declarations: [
+                ActivitiCreateProcessAttachmentComponent
+            ],
+            providers: [
+                { provide: AlfrescoTranslationService },
+                ActivitiContentService
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ActivitiCreateProcessAttachmentComponent);
+        component = fixture.componentInstance;
+        service = fixture.debugElement.injector.get(ActivitiContentService);
+        element = fixture.nativeElement;
+
+        componentHandler = jasmine.createSpyObj('componentHandler', [
+            'upgradeAllRegistered',
+            'upgradeElement'
+        ]);
+        window['componentHandler'] = componentHandler;
+
+        component.processInstanceId = '9999';
+        fixture.detectChanges();
+    });
+
+    beforeEach(() => {
+        jasmine.Ajax.install();
+    });
+
+    afterEach(() => {
+        jasmine.Ajax.uninstall();
+    });
+
+    it('should update the processInstanceId when it is changed', () => {
+        component.processInstanceId = null;
+
+        let change = new SimpleChange(null, '123', true);
+        component.ngOnChanges({ 'processInstanceId': change });
+
+        expect(component.processInstanceId).toBe('123');
+    });
+
+    it('should emit content created event when the file is uploaded', async(() => {
+        component.contentCreated.subscribe((res) => {
+            expect(res).toBeDefined();
+            expect(res).not.toBeNull();
+            expect(res.id).toBe(9999);
+        });
+
+        component.onFileUpload(customEvent);
+
+        jasmine.Ajax.requests.mostRecent().respondWith({
+            'status': 200,
+            contentType: 'application/json',
+            responseText: JSON.stringify(fakeUploadResponse)
+        });
+    }));
+
+    it('should allow user to drag&drop files', async(() => {
+        let dragArea: HTMLElement = <HTMLElement> element.querySelector('#add_new_process_content_area');
+        expect(dragArea).toBeDefined();
+        expect(dragArea).not.toBeNull();
+
+        component.contentCreated.subscribe((res) => {
+            expect(res).toBeDefined();
+            expect(res).not.toBeNull();
+            expect(res.id).toBe(9999);
+        });
+
+        let dropEvent = new CustomEvent('upload-files', customEvent);
+        dragArea.dispatchEvent(dropEvent);
+        fixture.detectChanges();
+
+        jasmine.Ajax.requests.mostRecent().respondWith({
+            'status': 200,
+            contentType: 'application/json',
+            responseText: JSON.stringify(fakeUploadResponse)
+        });
+    }));
+
+    it('should allow user to upload files via button', async(() => {
+        let buttonUpload: HTMLElement = <HTMLElement> element.querySelector('#add_new_process_content_button');
+        expect(buttonUpload).toBeDefined();
+        expect(buttonUpload).not.toBeNull();
+
+        component.contentCreated.subscribe((res) => {
+            expect(res).toBeDefined();
+            expect(res).not.toBeNull();
+            expect(res.id).toBe(9999);
+        });
+
+        let dropEvent = new CustomEvent('upload-files', customEvent);
+        buttonUpload.dispatchEvent(dropEvent);
+        fixture.detectChanges();
+
+        jasmine.Ajax.requests.mostRecent().respondWith({
+            'status': 200,
+            contentType: 'application/json',
+            responseText: JSON.stringify(fakeUploadResponse)
+        });
+    }));
+
+});

ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.ts

@@ -0,0 +1,67 @@
+/*!
+ * @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, OnChanges, Input, SimpleChanges, Output, EventEmitter } from '@angular/core';
+import { AlfrescoTranslationService } from 'ng2-alfresco-core';
+import { ActivitiContentService } from 'ng2-activiti-form';
+
+@Component({
+    selector: 'adf-create-process-attachment',
+    styleUrls: ['./adf-create-process-attachment.component.css'],
+    templateUrl: './adf-create-process-attachment.component.html'
+})
+export class ActivitiCreateProcessAttachmentComponent implements OnChanges {
+
+    @Input()
+    processInstanceId: string;
+
+    @Output()
+    creationError: EventEmitter<any> = new EventEmitter<any>();
+
+    @Output()
+    contentCreated: EventEmitter<any> = new EventEmitter<any>();
+
+    constructor(private translateService: AlfrescoTranslationService,
+                private activitiContentService: ActivitiContentService) {
+
+        if (translateService) {
+            translateService.addTranslationFolder('ng2-activiti-processlist', 'assets/ng2-activiti-processlist/src');
+        }
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes['processInstanceId'] && changes['processInstanceId'].currentValue) {
+            this.processInstanceId = changes['processInstanceId'].currentValue;
+        }
+    }
+
+    onFileUpload(event: any) {
+        let files: File[] = event.detail.files;
+
+        for (let i = 0; i < files.length; i++) {
+            let file: File = files[i];
+            this.activitiContentService.createProcessRelatedContent(this.processInstanceId, file).subscribe(
+                (res) => {
+                    this.contentCreated.emit(res);
+                },
+                (err) => {
+                    this.creationError.emit(err);
+                }
+            );
+        }
+    }
+}

ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.ts

@@ -59,6 +59,10 @@ export class ActivitiProcessAttachmentListComponent implements OnChanges {
         this.attachments = [];
     }
 
+    reload(): void {
+        this.loadAttachmentsByProcessInstanceId(this.processInstanceId);
+    }
+
     private loadAttachmentsByProcessInstanceId(processInstanceId: string) {
         if (processInstanceId) {
             this.reset();

ng2-components/ng2-activiti-processlist/src/components/index.ts

@@ -24,4 +24,4 @@ export * from './activiti-process-comments.component';
 export * from './activiti-process-instance-details.component';
 export * from './activiti-start-process.component';
 export * from './adf-process-attachment-list.component';
-export * from './activiti-create-process-attachment.component';
+export * from './adf-create-process-attachment.component';

ng2-components/ng2-activiti-processlist/src/i18n/en.json

@@ -25,7 +25,9 @@
         },
         "BUTTON": {
             "CANCEL": "Cancel Process",
-            "SHOW_DIAGRAM": "Show Diagram"
+            "SHOW_DIAGRAM": "Show Diagram",
+            "DRAG-ATTACHMENT": "Drop Files Here...",
+            "UPLOAD-ATTACHMENT": "Upload Attachment"
         },
         "MESSAGES": {
             "NONE": "No process details found."