fix thumbnail task process list (#1951)

ng2-components/ng2-activiti-processlist/README.md

@@ -418,17 +418,17 @@ This component displays attached documents on a specified process instance
 
 #### Options
 
-
 | Name | Description |
 | --- | --- |
 | `processInstanceId` | (required): The numeric ID of the process instance to display |
 
 #### Events
 
-
 | Name | Description |
 | --- | --- |
-| `attachmentClick` |  Emitted when the attachment double clicked or selected view option from context menu by the user from within the component |
+| `attachmentClick` |  Emitted when the attachment double clicked or selected view option from context menu by the user from within the component and return a Blob obj of the object clicker|
+| `success` |  Emitted when the attachment list fetch all the attach and return a list of attachments |
+| `error` |  Emitted when the attachment list is not able to fetch the attachments for example network error   |
 
 ### Create Process Attachment component
 

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

@@ -8,8 +8,8 @@
     (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="icon" type="icon" 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>
+</alfresco-datatable>

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

@@ -36,6 +36,7 @@ describe('Activiti Process Instance Attachment List', () => {
     let getProcessRelatedContentSpy: jasmine.Spy;
     let deleteContentSpy: jasmine.Spy;
     let getFileRawContentSpy: jasmine.Spy;
+    let mockAttachment: any;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -59,31 +60,30 @@ describe('Activiti Process Instance Attachment List', () => {
         component = fixture.componentInstance;
         service = fixture.debugElement.injector.get(ActivitiContentService);
 
-        getProcessRelatedContentSpy = spyOn(service, 'getProcessRelatedContent').and.returnValue(Observable.of(
+        mockAttachment = {
-            {
+            'size': 2,
-                'size': 2,
+            'total': 2,
-                'total': 2,
+            'start': 0,
-                'start': 0,
+            'data': [{
-                'data': [{
+                'id': 4001,
-                    'id': 4001,
+                'name': 'Invoice01.pdf',
-                    'name': 'Invoice01.pdf',
+                'created': '2017-05-12T12:50:05.522+0000',
-                    'created': '2017-05-12T12:50:05.522+0000',
+                'createdBy': {
-                    'createdBy': {
+                    'id': 1,
-                        'id': 1,
+                    'firstName': 'Apps',
-                        'firstName': 'Apps',
+                    'lastName': 'Administrator',
-                        'lastName': 'Administrator',
+                    'email': 'admin@app.activiti.com',
-                        'email': 'admin@app.activiti.com',
+                    'company': 'Alfresco.com',
-                        'company': 'Alfresco.com',
+                    'pictureId': 3003
-                        'pictureId': 3003
-                    },
-                    'relatedContent': true,
-                    'contentAvailable': true,
-                    'link': false,
-                    'mimeType': 'application/pdf',
-                    'simpleType': 'pdf',
-                    'previewStatus': 'created',
-                    'thumbnailStatus': 'created'
                 },
+                'relatedContent': true,
+                'contentAvailable': true,
+                'link': false,
+                'mimeType': 'application/pdf',
+                'simpleType': 'pdf',
+                'previewStatus': 'created',
+                'thumbnailStatus': 'created'
+            },
                 {
                     'id': 4002,
                     'name': 'Invoice02.pdf',
@@ -104,7 +104,9 @@ describe('Activiti Process Instance Attachment List', () => {
                     'previewStatus': 'created',
                     'thumbnailStatus': 'created'
                 }]
-            }));
+        };
+
+        getProcessRelatedContentSpy = spyOn(service, 'getProcessRelatedContent').and.returnValue(Observable.of(mockAttachment));
 
         deleteContentSpy = spyOn(service, 'deleteRelatedContent').and.returnValue(Observable.of({successCode: true}));
 
@@ -134,6 +136,16 @@ describe('Activiti Process Instance Attachment List', () => {
         expect(emitSpy).toHaveBeenCalled();
     });
 
+    it('should emit a success event when the attachments are loaded', () => {
+        let change = new SimpleChange(null, '123', true);
+        component.success.subscribe((attachments) => {
+            expect(attachments[0].name).toEqual(mockAttachment.data[0].name);
+            expect(attachments[0].id).toEqual(mockAttachment.data[0].id);
+        });
+
+        component.ngOnChanges({'taskId': change});
+    });
+
     it('should not attach when no processInstanceId is specified', () => {
         fixture.detectChanges();
         expect(getProcessRelatedContentSpy).not.toHaveBeenCalled();

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

@@ -32,6 +32,9 @@ export class ActivitiProcessAttachmentListComponent implements OnChanges {
     @Output()
     attachmentClick = new EventEmitter();
 
+    @Output()
+    success = new EventEmitter();
+
     @Output()
     error: EventEmitter<any> = new EventEmitter<any>();
 
@@ -42,14 +45,13 @@ export class ActivitiProcessAttachmentListComponent implements OnChanges {
                 private contentService: ContentService) {
 
         if (translateService) {
-            translateService.addTranslationFolder('ng2-activiti-processlist', 'node_modules/ng2-activiti-processlist/src');
+            translateService.addTranslationFolder('ng2-activiti-processlist', 'assets/ng2-activiti-processlist');
         }
     }
 
     ngOnChanges(changes: SimpleChanges) {
         if (changes['processInstanceId'] && changes['processInstanceId'].currentValue) {
-            this.processInstanceId = changes['processInstanceId'].currentValue;
+            this.loadAttachmentsByProcessInstanceId(changes['processInstanceId'].currentValue);
-            this.loadAttachmentsByProcessInstanceId(this.processInstanceId);
         }
     }
 
@@ -71,7 +73,7 @@ export class ActivitiProcessAttachmentListComponent implements OnChanges {
                             icon: this.activitiContentService.getMimeTypeIcon(content.mimeType)
                         });
                     });
-
+                    this.success.emit(this.attachments);
                 },
                 (err) => {
                     this.error.emit(err);
@@ -149,9 +151,6 @@ export class ActivitiProcessAttachmentListComponent implements OnChanges {
         );
     }
 
-    /**
-     * Invoke content download.
-     */
     downloadContent(content: any): void {
         this.activitiContentService.getFileRawContent(content.id).subscribe(
             (blob: Blob) => this.contentService.downloadBlob(blob, content.name),

ng2-components/ng2-activiti-tasklist/README.md

@@ -456,7 +456,9 @@ This component displays attached documents on a specified task
 
 | Name | Description |
 | --- | --- |
-| `attachmentClick` |  Emitted when the attachment double clicked or selected view option from context menu by the user from within the component |
+| `attachmentClick` |  Emitted when the attachment double clicked or selected view option from context menu by the user from within the component and return a Blob obj of the object clicker|
+| `success` |  Emitted when the attachment list fetch all the attach and return a list of attachments |
+| `error` |  Emitted when the attachment list is not able to fetch the attachments for example network error   |
 
 
 ### Create Task Attachment component

ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.spec.ts

@@ -22,6 +22,7 @@ import { DataTableModule } from 'ng2-alfresco-datatable';
 import { ActivitiContentService } from 'ng2-activiti-form';
 import { TaskAttachmentListComponent } from './adf-task-attachment-list.component';
 import { Observable } from 'rxjs/Rx';
+import { By } from '@angular/platform-browser';
 
 declare let jasmine: any;
 
@@ -31,14 +32,10 @@ describe('TaskAttachmentList', () => {
     let component: TaskAttachmentListComponent;
     let fixture: ComponentFixture<TaskAttachmentListComponent>;
     let service: ActivitiContentService;
-
+    let getTaskRelatedContentSpy: jasmine.Spy;
-    beforeEach(() => {
+    let deleteContentSpy: jasmine.Spy;
-        jasmine.Ajax.install();
+    let getFileRawContentSpy: jasmine.Spy;
-    });
+    let mockAttachment: any;
-
-    afterEach(() => {
-        jasmine.Ajax.uninstall();
-    });
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -56,7 +53,9 @@ describe('TaskAttachmentList', () => {
 
         let translateService = TestBed.get(AlfrescoTranslationService);
         spyOn(translateService, 'addTranslationFolder').and.stub();
-        spyOn(translateService, 'get').and.callFake((key) => { return Observable.of(key); });
+        spyOn(translateService, 'get').and.callFake((key) => {
+            return Observable.of(key);
+        });
     }));
 
     beforeEach(() => {
@@ -66,6 +65,51 @@ describe('TaskAttachmentList', () => {
 
         service = TestBed.get(ActivitiContentService);
 
+        mockAttachment = {
+            size: 2,
+            total: 2,
+            start: 0,
+            data: [
+                {
+                    id: 8,
+                    name: 'fake.zip',
+                    created: 1494595697381,
+                    createdBy: {id: 2, firstName: 'user', lastName: 'user', email: 'user@user.com'},
+                    relatedContent: true,
+                    contentAvailable: true,
+                    link: false,
+                    mimeType: 'application/zip',
+                    simpleType: 'content',
+                    previewStatus: 'unsupported',
+                    thumbnailStatus: 'unsupported'
+                },
+                {
+                    id: 9,
+                    name: 'fake.jpg',
+                    created: 1494595655381,
+                    createdBy: {id: 2, firstName: 'user', lastName: 'user', email: 'user@user.com'},
+                    relatedContent: true,
+                    contentAvailable: true,
+                    link: false,
+                    mimeType: 'image/jpeg',
+                    simpleType: 'image',
+                    previewStatus: 'unsupported',
+                    thumbnailStatus: 'unsupported'
+                }
+            ]
+        };
+
+        getTaskRelatedContentSpy = spyOn(service, 'getTaskRelatedContent').and.returnValue(Observable.of(
+            mockAttachment
+        ));
+
+        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'
@@ -73,58 +117,100 @@ describe('TaskAttachmentList', () => {
         window['componentHandler'] = componentHandler;
     });
 
-    it('should fetch all the attachments of a taskId', (done) => {
+    it('should load attachments when taskId specified', () => {
+        let change = new SimpleChange(null, '123', true);
+        component.ngOnChanges({'taskId': change});
+        expect(getTaskRelatedContentSpy).toHaveBeenCalled();
+    });
 
-        component.success.subscribe((res) => {
+    it('should emit an error when an error occurs loading attachments', () => {
-            expect(res).toBeDefined();
+        let emitSpy = spyOn(component.error, 'emit');
-            expect(res.length).toBe(2);
+        getTaskRelatedContentSpy.and.returnValue(Observable.throw({}));
-            expect(res[0].name).toBe('fake.zip');
+        let change = new SimpleChange(null, '123', true);
-            expect(res[0].icon).toBe('ft_ic_archive.svg');
+        component.ngOnChanges({'taskId': change});
-            expect(res[1].name).toBe('fake.jpg');
+        expect(emitSpy).toHaveBeenCalled();
-            expect(res[1].icon).toBe('ft_ic_raster_image.svg');
+    });
-            done();
+
+    it('should emit a success event when the attachments are loaded', () => {
+        let change = new SimpleChange(null, '123', true);
+        component.success.subscribe((attachments) => {
+            expect(attachments[0].name).toEqual(mockAttachment.data[0].name);
+            expect(attachments[0].id).toEqual(mockAttachment.data[0].id);
         });
 
-        let taskId = '1';
+        component.ngOnChanges({'taskId': change});
-        let change = new SimpleChange(null, taskId, true);
+    });
-        component.ngOnChanges({ 'taskId': change });
 
-        jasmine.Ajax.requests.mostRecent().respondWith({
+    it('should not attach when no taskId is specified', () => {
-            'status': 200,
+        fixture.detectChanges();
-            contentType: 'application/json',
+        expect(getTaskRelatedContentSpy).not.toHaveBeenCalled();
-            responseText: JSON.stringify({
+    });
-                size: 2,
+
-                total: 2,
+    it('should display attachments when the task has attachments', async(() => {
-                start: 0,
+        let change = new SimpleChange(null, '123', true);
-                data: [
+        component.ngOnChanges({'taskId': change});
-                    {
+
-                        id: 8,
+        fixture.whenStable().then(() => {
-                        name: 'fake.zip',
+            fixture.detectChanges();
-                        created: 1494595697381,
+            expect(fixture.debugElement.queryAll(By.css('alfresco-datatable tbody tr')).length).toBe(2);
-                        createdBy: {id: 2, firstName: 'user', lastName: 'user', email: 'user@user.com'},
+        });
-                        relatedContent: true,
+    }));
-                        contentAvailable: true,
+
-                        link: false,
+    it('should not display attachments when the task has no attachments', async(() => {
-                        mimeType: 'application/zip',
+        component.taskId = '123';
-                        simpleType: 'content',
+        getTaskRelatedContentSpy.and.returnValue(Observable.of({
-                        previewStatus: 'unsupported',
+            'size': 0,
-                        thumbnailStatus: 'unsupported'
+            'total': 0,
-                    },
+            'start': 0,
-                    {
+            'data': []
-                        id: 9,
+        }));
-                        name: 'fake.jpg',
+        fixture.detectChanges();
-                        created: 1494595655381,
+        fixture.whenStable().then(() => {
-                        createdBy: {id: 2, firstName: 'user', lastName: 'user', email: 'user@user.com'},
+            fixture.detectChanges();
-                        relatedContent: true,
+            expect(fixture.debugElement.queryAll(By.css('alfresco-datatable tbody tr')).length).toBe(0);
-                        contentAvailable: true,
+        });
-                        link: false,
+    }));
-                        mimeType: 'image/jpeg',
+
-                        simpleType: 'image',
+    describe('change detection', () => {
-                        previewStatus: 'unsupported',
+
-                        thumbnailStatus: 'unsupported'
+        let change = new SimpleChange('123', '456', true);
-                    }
+        let nullChange = new SimpleChange('123', null, true);
-                ]
+
-            })
+        beforeEach(async(() => {
+            component.taskId = '123';
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                getTaskRelatedContentSpy.calls.reset();
+            });
+        }));
+
+        it('should fetch new attachments when taskId changed', () => {
+            component.ngOnChanges({'taskId': change});
+            expect(getTaskRelatedContentSpy).toHaveBeenCalledWith('456');
+        });
+
+        it('should NOT fetch new attachments when empty changeset made', () => {
+            component.ngOnChanges({});
+            expect(getTaskRelatedContentSpy).not.toHaveBeenCalled();
+        });
+
+        it('should NOT fetch new attachments when taskId changed to null', () => {
+            component.ngOnChanges({'taskId': nullChange});
+            expect(getTaskRelatedContentSpy).not.toHaveBeenCalled();
         });
     });
+
+    describe('Delete attachments', () => {
+
+        beforeEach(async(() => {
+            component.taskId = '123';
+            fixture.detectChanges();
+            fixture.whenStable();
+        }));
+
+        it('should display a dialog to the user when the Add button clicked', () => {
+            expect(true).toBe(true);
+        });
+
+    });
 });

ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.ts

@@ -78,8 +78,10 @@ export class TaskAttachmentListComponent implements OnChanges {
                         });
                     });
                     this.success.emit(this.attachments);
-                });
+                },
-        }
+                (err) => {
+                    this.error.emit(err);
+                });        }
     }
 
     private deleteAttachmentById(contentId: string) {
@@ -89,6 +91,9 @@ export class TaskAttachmentListComponent implements OnChanges {
                     this.attachments = this.attachments.filter(content => {
                         return content.id !== contentId;
                     });
+                },
+                (err) => {
+                    this.error.emit(err);
                 });
         }
     }