[ADF-713] Process Attachment - Provide a way to attach a new content (#1920)

* added service to get all the related content of the process instance

* added new component to create/upload attachment for process instance

* added unit test cases for create-process-attachment component

* exported create-process-attachment component

* added documentation for create-process-attachment component

ng2-components/ng2-activiti-processlist/src/components/activiti-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/activiti-create-process-attachment.component.html

@@ -0,0 +1,15 @@
+<div class="upload-attachment-container">
+    <div class="drag-area"
+    (upload-files)="onFileUpload($event)" 
+    mode="['click', 'drop']"
+    [adf-upload]="true">
+        Drop Files Here...
+    </div>
+    <button class="mdl-button mdl-js-button mdl-button--raised"
+    [adf-upload]="true" 
+    mode="['click']" 
+    [multiple]="true" 
+    (upload-files)="onFileUpload($event)">
+        Upload Attachment
+    </button>
+</div>

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

@@ -0,0 +1,100 @@
+/*!
+ * @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 { By } from '@angular/platform-browser';
+import { Observable } from 'rxjs/Rx';
+
+import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
+import { ActivitiContentService } from 'ng2-activiti-form';
+
+import { ActivitiCreateProcessAttachmentComponent } from './activiti-create-process-attachment.component';
+import { TranslationMock } from './../assets/translation.service.mock';
+
+describe('Activiti Process Instance Create Attachment', () => {
+
+    let componentHandler: any;
+    let service: ActivitiContentService;
+    let component: ActivitiCreateProcessAttachmentComponent;
+    let fixture: ComponentFixture<ActivitiCreateProcessAttachmentComponent>;
+    let createProcessRelatedContentSpy: jasmine.Spy;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                CoreModule.forRoot()
+            ],
+            declarations: [
+                ActivitiCreateProcessAttachmentComponent
+            ],
+            providers: [
+                { provide: AlfrescoTranslationService, useClass: TranslationMock },
+                ActivitiContentService
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+
+        fixture = TestBed.createComponent(ActivitiCreateProcessAttachmentComponent);
+        component = fixture.componentInstance;
+        service = fixture.debugElement.injector.get(ActivitiContentService);
+
+        createProcessRelatedContentSpy = spyOn(service, 'createProcessRelatedContent').and.returnValue(Observable.of({successCode: true}));
+
+        componentHandler = jasmine.createSpyObj('componentHandler', [
+            'upgradeAllRegistered',
+            'upgradeElement'
+        ]);
+        window['componentHandler'] = componentHandler;
+    });
+
+    it('should not call createProcessRelatedContent service when processInstanceId changed', () => {
+        let change = new SimpleChange(null, '123', true);
+        component.ngOnChanges({ 'processInstanceId': change });
+        expect(createProcessRelatedContentSpy).not.toHaveBeenCalled();
+    });
+
+    it('should not call createProcessRelatedContent service when there is no file uploaded', () => {
+        let change = new SimpleChange(null, '123', true);
+        component.ngOnChanges({ 'processInstanceId': change });
+        let customEvent = {
+            detail: {
+                files: [
+                ]
+            }
+        };
+        component.onFileUpload(customEvent);
+        expect(createProcessRelatedContentSpy).not.toHaveBeenCalled();
+    });
+
+    it('should call createProcessRelatedContent service when there is a file uploaded', () => {
+        let change = new SimpleChange(null, '123', true);
+        component.ngOnChanges({ 'processInstanceId': change });
+        let file = new File([new Blob()], 'Test');
+        let customEvent = {
+            detail: {
+                files: [
+                    file
+                ]
+            }
+        };
+        component.onFileUpload(customEvent);
+        expect(createProcessRelatedContentSpy).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,68 @@
+/*!
+ * @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: 'activiti-create-process-attachment',
+    styleUrls: ['./activiti-create-process-attachment.component.css'],
+    templateUrl: './activiti-create-process-attachment.component.html'
+})
+export class ActivitiCreateProcessAttachmentComponent implements OnChanges {
+
+    @Input()
+    processInstanceId: string;
+
+    @Output()
+    error: EventEmitter<any> = new EventEmitter<any>();
+
+    @Output()
+    success: EventEmitter<any> = new EventEmitter<any>();
+
+    constructor(private translateService: AlfrescoTranslationService,
+                private activitiContentService: ActivitiContentService) {
+
+        if (translateService) {
+            translateService.addTranslationFolder('ng2-activiti-processlist', 'node_modules/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.success.emit(res);
+                },
+                (err) => {
+                    this.error.emit(err);
+                }
+            );
+        }
+    }
+}