diff --git a/ng2-components/ng2-activiti-form/src/services/activiti-content-service.ts b/ng2-components/ng2-activiti-form/src/services/activiti-content-service.ts index 36dd1d1e2b..fbcd24056f 100644 --- a/ng2-components/ng2-activiti-form/src/services/activiti-content-service.ts +++ b/ng2-components/ng2-activiti-form/src/services/activiti-content-service.ts @@ -95,6 +95,16 @@ export class ActivitiContentService { .catch(err => this.handleError(err)); } + /** + * Return all the related content of the process instance + * @param processInstanceId + * @returns {any} + */ + createProcessRelatedContent(processInstanceId: string, content: any): Observable { + return Observable.fromPromise(this.apiService.getInstance().activiti.contentApi.createRelatedContentOnProcessInstance(processInstanceId, content)) + .catch(err => this.handleError(err)); + } + toJson(res: any) { if (res) { return res || {}; diff --git a/ng2-components/ng2-activiti-processlist/README.md b/ng2-components/ng2-activiti-processlist/README.md index ab523f7adc..8ca863df02 100644 --- a/ng2-components/ng2-activiti-processlist/README.md +++ b/ng2-components/ng2-activiti-processlist/README.md @@ -405,6 +405,34 @@ This component displays attached documents on a specified process instance | --- | --- | | `attachmentClick` | Emitted when the attachment double clicked or selected view option from context menu by the user from within the component | +### Create Process Attachment component + +This component displays Upload Component(Drag and Click) to upload the attachment to a specified process instance + +```html + +``` + +![process-create-attachment](docs/assets/process-create-attachment.png) + +#### Options + + +| Name | Description | +| --- | --- | +| `processInstanceId` | (required): The numeric ID of the process instance to display | + +#### Events + + +| Name | Description | +| --- | --- | +| `error` | Emitted when the error occured while creating/uploading the attachment by the user from within the component | +| `success` | Emitted when the attachement created/uploaded successfully from within the component | + ## Build from sources Alternatively you can build component from sources with the following commands: diff --git a/ng2-components/ng2-activiti-processlist/docs/assets/process-create-attachment.png b/ng2-components/ng2-activiti-processlist/docs/assets/process-create-attachment.png new file mode 100644 index 0000000000..f755633f7c Binary files /dev/null and b/ng2-components/ng2-activiti-processlist/docs/assets/process-create-attachment.png differ diff --git a/ng2-components/ng2-activiti-processlist/index.ts b/ng2-components/ng2-activiti-processlist/index.ts index f779eb0e8e..d4abc2f117 100644 --- a/ng2-components/ng2-activiti-processlist/index.ts +++ b/ng2-components/ng2-activiti-processlist/index.ts @@ -30,7 +30,8 @@ import { ActivitiProcessComments, ActivitiProcessInstanceDetails, ActivitiStartProcessInstance, - ActivitiProcessAttachmentListComponent + ActivitiProcessAttachmentListComponent, + ActivitiCreateProcessAttachmentComponent } from './src/components/index'; import { ActivitiProcessService } from './src/services/activiti-process.service'; @@ -41,6 +42,7 @@ export * from './src/components/activiti-filters.component'; export * from './src/components/activiti-process-instance-details.component'; export * from './src/components/activiti-start-process.component'; export * from './src/components/activiti-process-attachment-list.component'; +export * from './src/components/activiti-create-process-attachment.component'; // models export * from './src/models/index'; @@ -57,7 +59,8 @@ export const ACTIVITI_PROCESSLIST_DIRECTIVES: [any] = [ ActivitiProcessInstanceVariables, ActivitiProcessComments, ActivitiStartProcessInstance, - ActivitiProcessAttachmentListComponent + ActivitiProcessAttachmentListComponent, + ActivitiCreateProcessAttachmentComponent ]; export const ACTIVITI_PROCESSLIST_PROVIDERS: [any] = [ diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-create-process-attachment.component.css b/ng2-components/ng2-activiti-processlist/src/components/activiti-create-process-attachment.component.css new file mode 100644 index 0000000000..59422a60f7 --- /dev/null +++ b/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; +} diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-create-process-attachment.component.html b/ng2-components/ng2-activiti-processlist/src/components/activiti-create-process-attachment.component.html new file mode 100644 index 0000000000..6638e1d2d6 --- /dev/null +++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-create-process-attachment.component.html @@ -0,0 +1,15 @@ +
+
+ Drop Files Here... +
+ +
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-create-process-attachment.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-create-process-attachment.component.spec.ts new file mode 100644 index 0000000000..91631267c8 --- /dev/null +++ b/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; + 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(); + }); +}); diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-create-process-attachment.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-create-process-attachment.component.ts new file mode 100644 index 0000000000..a3ee2c6183 --- /dev/null +++ b/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 = new EventEmitter(); + + @Output() + success: EventEmitter = new EventEmitter(); + + 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); + } + ); + } + } +} diff --git a/ng2-components/ng2-activiti-processlist/src/components/index.ts b/ng2-components/ng2-activiti-processlist/src/components/index.ts index ab3d5f1a07..32baa76c79 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/index.ts +++ b/ng2-components/ng2-activiti-processlist/src/components/index.ts @@ -24,3 +24,4 @@ export * from './activiti-process-comments.component'; export * from './activiti-process-instance-details.component'; export * from './activiti-start-process.component'; export * from './activiti-process-attachment-list.component'; +export * from './activiti-create-process-attachment.component';