mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-19 17:14:57 +00:00
[ADF-710] Create an Process Attachment List component (#1919)
* added new component to list the process attachments with view, download and delete functionality * added unit test cases for activit-process-attachment-list component * exported new process attachment list component * added documentation for process-attachment-list component
This commit is contained in:
Infad Kachancheri
Eugenio Romano
parent
07fe51e96c
commit
7ea5a5fb5f
@ -0,0 +1,17 @@
|
||||
alfresco-datatable >>> .column-header {
|
||||
color: #232323;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
alfresco-datatable >>> .data-cell {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.no-attachment-message {
|
||||
border: 1px solid rgb(224, 224, 224);
|
||||
background: #fff;
|
||||
text-align: left;
|
||||
border-top: none;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
<div class="no-attachment-message" *ngIf="isEmpty()">
|
||||
No Attachments Found
|
||||
</div>
|
||||
<alfresco-datatable *ngIf="!isEmpty()"
|
||||
[rows]="attachments"
|
||||
[actions]="true"
|
||||
(rowDblClick)="openContent($event)"
|
||||
(showRowActionsMenu)="onShowRowActionsMenu($event)"
|
||||
(executeRowAction)="onExecuteRowAction($event)">
|
||||
<data-columns>
|
||||
<data-column key="icon" type="image" class="icon-cell" srTitle="Thumbnail" [sortable]="false"></data-column>
|
||||
<data-column key="name" type="text" title="Name" class="full-width ellipsis-cell" [sortable]="true"></data-column>
|
||||
<data-column key="created" type="date" format="shortDate" title="Created On"></data-column>
|
||||
</data-columns>
|
||||
</alfresco-datatable>
|
||||
@ -0,0 +1,210 @@
|
||||
/*!
|
||||
* @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 { DataTableModule, ObjectDataRow, DataRowEvent, ObjectDataTableAdapter, DataSorting } from 'ng2-alfresco-datatable';
|
||||
|
||||
import { ActivitiProcessAttachmentListComponent } from './activiti-process-attachment-list.component';
|
||||
import { TranslationMock } from './../assets/translation.service.mock';
|
||||
|
||||
describe('Activiti Process Instance Attachment List', () => {
|
||||
|
||||
let componentHandler: any;
|
||||
let service: ActivitiContentService;
|
||||
let component: ActivitiProcessAttachmentListComponent;
|
||||
let fixture: ComponentFixture<ActivitiProcessAttachmentListComponent>;
|
||||
let getProcessRelatedContentSpy: jasmine.Spy;
|
||||
let deleteContentSpy: jasmine.Spy;
|
||||
let getFileRawContentSpy: jasmine.Spy;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [
|
||||
CoreModule.forRoot(),
|
||||
DataTableModule.forRoot()
|
||||
],
|
||||
declarations: [
|
||||
ActivitiProcessAttachmentListComponent
|
||||
],
|
||||
providers: [
|
||||
{ provide: AlfrescoTranslationService, useClass: TranslationMock },
|
||||
ActivitiContentService
|
||||
]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
|
||||
fixture = TestBed.createComponent(ActivitiProcessAttachmentListComponent);
|
||||
component = fixture.componentInstance;
|
||||
service = fixture.debugElement.injector.get(ActivitiContentService);
|
||||
|
||||
getProcessRelatedContentSpy = spyOn(service, 'getProcessRelatedContent').and.returnValue(Observable.of(
|
||||
{
|
||||
'size': 2,
|
||||
'total': 2,
|
||||
'start': 0,
|
||||
'data': [{
|
||||
'id': 4001,
|
||||
'name': 'Invoice01.pdf',
|
||||
'created': '2017-05-12T12:50:05.522+0000',
|
||||
'createdBy': {
|
||||
'id': 1,
|
||||
'firstName': 'Apps',
|
||||
'lastName': 'Administrator',
|
||||
'email': 'admin@app.activiti.com',
|
||||
'company': 'Alfresco.com',
|
||||
'pictureId': 3003
|
||||
},
|
||||
'relatedContent': true,
|
||||
'contentAvailable': true,
|
||||
'link': false,
|
||||
'mimeType': 'application/pdf',
|
||||
'simpleType': 'pdf',
|
||||
'previewStatus': 'created',
|
||||
'thumbnailStatus': 'created'
|
||||
},
|
||||
{
|
||||
'id': 4002,
|
||||
'name': 'Invoice02.pdf',
|
||||
'created': '2017-05-12T12:50:05.522+0000',
|
||||
'createdBy': {
|
||||
'id': 1,
|
||||
'firstName': 'Apps',
|
||||
'lastName': 'Administrator',
|
||||
'email': 'admin@app.activiti.com',
|
||||
'company': 'Alfresco.com',
|
||||
'pictureId': 3003
|
||||
},
|
||||
'relatedContent': true,
|
||||
'contentAvailable': true,
|
||||
'link': false,
|
||||
'mimeType': 'application/pdf',
|
||||
'simpleType': 'pdf',
|
||||
'previewStatus': 'created',
|
||||
'thumbnailStatus': 'created'
|
||||
}]
|
||||
}));
|
||||
|
||||
deleteContentSpy = spyOn(service, 'deleteRelatedContent').and.returnValue(Observable.of({successCode: true}));
|
||||
|
||||
let blobObj = new Blob();
|
||||
getFileRawContentSpy = spyOn(service, 'getFileRawContent').and.returnValue(Observable.of(
|
||||
blobObj
|
||||
));
|
||||
|
||||
componentHandler = jasmine.createSpyObj('componentHandler', [
|
||||
'upgradeAllRegistered',
|
||||
'upgradeElement'
|
||||
]);
|
||||
window['componentHandler'] = componentHandler;
|
||||
});
|
||||
|
||||
it('should load attachments when processInstanceId specified', () => {
|
||||
let change = new SimpleChange(null, '123', true);
|
||||
component.ngOnChanges({ 'processInstanceId': change });
|
||||
expect(getProcessRelatedContentSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should emit an error when an error occurs loading attachments', () => {
|
||||
let emitSpy = spyOn(component.error, 'emit');
|
||||
getProcessRelatedContentSpy.and.returnValue(Observable.throw({}));
|
||||
let change = new SimpleChange(null, '123', true);
|
||||
component.ngOnChanges({ 'processInstanceId': change });
|
||||
expect(emitSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should not attach when no processInstanceId is specified', () => {
|
||||
fixture.detectChanges();
|
||||
expect(getProcessRelatedContentSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should display attachments when the process has attachments', async(() => {
|
||||
let change = new SimpleChange(null, '123', true);
|
||||
component.ngOnChanges({ 'processInstanceId': change });
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(fixture.debugElement.queryAll(By.css('alfresco-datatable tbody tr')).length).toBe(2);
|
||||
});
|
||||
}));
|
||||
|
||||
it('should not display attachments when the process has no attachments', async(() => {
|
||||
component.processInstanceId = '123';
|
||||
getProcessRelatedContentSpy.and.returnValue(Observable.of({
|
||||
'size': 0,
|
||||
'total': 0,
|
||||
'start': 0,
|
||||
'data': []
|
||||
}));
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(fixture.debugElement.queryAll(By.css('alfresco-datatable tbody tr')).length).toBe(0);
|
||||
});
|
||||
}));
|
||||
|
||||
describe('change detection', () => {
|
||||
|
||||
let change = new SimpleChange('123', '456', true);
|
||||
let nullChange = new SimpleChange('123', null, true);
|
||||
|
||||
beforeEach(async(() => {
|
||||
component.processInstanceId = '123';
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
getProcessRelatedContentSpy.calls.reset();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should fetch new attachments when processInstanceId changed', () => {
|
||||
component.ngOnChanges({ 'processInstanceId': change });
|
||||
expect(getProcessRelatedContentSpy).toHaveBeenCalledWith('456');
|
||||
});
|
||||
|
||||
it('should NOT fetch new attachments when empty changeset made', () => {
|
||||
component.ngOnChanges({});
|
||||
expect(getProcessRelatedContentSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should NOT fetch new attachments when processInstanceId changed to null', () => {
|
||||
component.ngOnChanges({ 'processInstanceId': nullChange });
|
||||
expect(getProcessRelatedContentSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Delete attachments', () => {
|
||||
|
||||
beforeEach(async(() => {
|
||||
component.processInstanceId = '123';
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable();
|
||||
}));
|
||||
|
||||
it('should display a dialog to the user when the Add button clicked', () => {
|
||||
expect(true).toBe(true);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
@ -0,0 +1,163 @@
|
||||
/*!
|
||||
* @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, ContentService } from 'ng2-alfresco-core';
|
||||
import { ActivitiContentService } from 'ng2-activiti-form';
|
||||
|
||||
@Component({
|
||||
selector: 'activiti-process-attachment-list',
|
||||
styleUrls: ['./activiti-process-attachment-list.component.css'],
|
||||
templateUrl: './activiti-process-attachment-list.component.html'
|
||||
})
|
||||
export class ActivitiProcessAttachmentListComponent implements OnChanges {
|
||||
|
||||
@Input()
|
||||
processInstanceId: string;
|
||||
|
||||
@Output()
|
||||
attachmentClick = new EventEmitter();
|
||||
|
||||
@Output()
|
||||
error: EventEmitter<any> = new EventEmitter<any>();
|
||||
|
||||
attachments: any[] = [];
|
||||
|
||||
constructor(private translateService: AlfrescoTranslationService,
|
||||
private activitiContentService: ActivitiContentService,
|
||||
private contentService: ContentService) {
|
||||
|
||||
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;
|
||||
this.loadAttachmentsByProcessInstanceId(this.processInstanceId);
|
||||
}
|
||||
}
|
||||
|
||||
reset () {
|
||||
this.attachments = [];
|
||||
}
|
||||
|
||||
private loadAttachmentsByProcessInstanceId(processInstanceId: string) {
|
||||
if (processInstanceId) {
|
||||
this.reset();
|
||||
this.activitiContentService.getProcessRelatedContent(processInstanceId).subscribe(
|
||||
(res: any) => {
|
||||
res.data.forEach(content => {
|
||||
this.attachments.push({
|
||||
id: content.id,
|
||||
name: content.name,
|
||||
created: content.created,
|
||||
createdBy: content.createdBy.firstName + ' ' + content.createdBy.lastName,
|
||||
icon: this.activitiContentService.getMimeTypeIcon(content.mimeType)
|
||||
});
|
||||
});
|
||||
|
||||
},
|
||||
(err) => {
|
||||
this.error.emit(err);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private deleteAttachmentById(contentId: string) {
|
||||
if (contentId) {
|
||||
this.activitiContentService.deleteRelatedContent(contentId).subscribe(
|
||||
(res: any) => {
|
||||
this.attachments = this.attachments.filter(content => {
|
||||
return content.id !== contentId;
|
||||
});
|
||||
},
|
||||
(err) => {
|
||||
this.error.emit(err);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
isEmpty(): boolean {
|
||||
return this.attachments && this.attachments.length === 0;
|
||||
}
|
||||
|
||||
onShowRowActionsMenu(event: any) {
|
||||
let viewAction = {
|
||||
title: 'View',
|
||||
name: 'view'
|
||||
};
|
||||
|
||||
let removeAction = {
|
||||
title: 'Remove',
|
||||
name: 'remove'
|
||||
};
|
||||
|
||||
let downloadAction = {
|
||||
title: 'Download',
|
||||
name: 'download'
|
||||
};
|
||||
|
||||
event.value.actions = [
|
||||
viewAction,
|
||||
removeAction,
|
||||
downloadAction
|
||||
];
|
||||
}
|
||||
|
||||
onExecuteRowAction(event: any) {
|
||||
let args = event.value;
|
||||
let action = args.action;
|
||||
if (action.name === 'view') {
|
||||
this.emitDocumentContent(args.row.obj);
|
||||
} else if (action.name === 'remove') {
|
||||
this.deleteAttachmentById(args.row.obj.id);
|
||||
} else if (action.name === 'download') {
|
||||
this.downloadContent(args.row.obj);
|
||||
}
|
||||
}
|
||||
|
||||
openContent(event: any): void {
|
||||
let content = event.value.obj;
|
||||
this.emitDocumentContent(content);
|
||||
}
|
||||
|
||||
emitDocumentContent(content: any) {
|
||||
this.activitiContentService.getFileRawContent(content.id).subscribe(
|
||||
(blob: Blob) => {
|
||||
content.contentBlob = blob;
|
||||
this.attachmentClick.emit(content);
|
||||
},
|
||||
(err) => {
|
||||
this.error.emit(err);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Invoke content download.
|
||||
*/
|
||||
downloadContent(content: any): void {
|
||||
this.activitiContentService.getFileRawContent(content.id).subscribe(
|
||||
(blob: Blob) => this.contentService.downloadBlob(blob, content.name),
|
||||
(err) => {
|
||||
this.error.emit(err);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user