+
Drop Files Here...
diff --git a/ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.css b/ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.css
new file mode 100644
index 0000000000..7371ee4215
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.html b/ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.html
new file mode 100644
index 0000000000..e9ce0c521d
--- /dev/null
+++ b/ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.html
@@ -0,0 +1,17 @@
+
+
+ {{ 'DETAILS.BUTTON.DRAG-ATTACHMENT' | translate }}
+
+
+
diff --git a/ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.spec.ts
new file mode 100644
index 0000000000..ad1d9a4d56
--- /dev/null
+++ b/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
;
+ 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 = 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 = 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)
+ });
+ }));
+
+});
diff --git a/ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.ts b/ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.ts
new file mode 100644
index 0000000000..67f7375adb
--- /dev/null
+++ b/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 = new EventEmitter();
+
+ @Output()
+ contentCreated: EventEmitter = new EventEmitter();
+
+ 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);
+ }
+ );
+ }
+ }
+}
diff --git a/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.ts b/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.ts
index 1647ca5500..0c8f1d4cba 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.ts
+++ b/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();
diff --git a/ng2-components/ng2-activiti-processlist/src/components/index.ts b/ng2-components/ng2-activiti-processlist/src/components/index.ts
index 80600270a9..da3601a1fa 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/index.ts
+++ b/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';
diff --git a/ng2-components/ng2-activiti-processlist/src/i18n/en.json b/ng2-components/ng2-activiti-processlist/src/i18n/en.json
index da1c7edfef..d08053d444 100644
--- a/ng2-components/ng2-activiti-processlist/src/i18n/en.json
+++ b/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."