[ADF-1291] Attachment list is not instantly refreshed after upload (#2387)

* [ADF-1291] Attachment list after upload list is not instantly refreshed

* Implemented NgZone to ensure change detection

* [#2377 Github] Attachments control won't let you add a document you removed

* Reset the value of input after each upload so that change will be detected if the same file is selected repeatedly

* [#2377 Github] Attachments control won't let you add a document you removed

* Added test to make sure the input value is rest after upload

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { SimpleChange } from '@angular/core';
+import { NgZone, SimpleChange } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MdProgressSpinnerModule } from '@angular/material';
 import { By } from '@angular/platform-browser';
@@ -40,6 +40,7 @@ describe('ProcessAttachmentListComponent', () => {
     let mockAttachment: any;
 
     beforeEach(async(() => {
+        let zone = new NgZone({enableLongStackTrace: false});
         TestBed.configureTestingModule({
             imports: [
                 CoreModule,
@@ -51,7 +52,8 @@ describe('ProcessAttachmentListComponent', () => {
             ],
             providers: [
                 { provide: AlfrescoTranslationService, useClass: TranslationMock },
-                ActivitiContentService
+                ActivitiContentService,
+                { provide: NgZone, useValue: zone }
             ]
         }).compileComponents();
     }));

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, Input, NgZone, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { ActivitiContentService } from 'ng2-activiti-form';
 import { ContentService, ThumbnailService } from 'ng2-alfresco-core';
 
@@ -51,7 +51,8 @@ export class ProcessAttachmentListComponent implements OnChanges {
 
     constructor(private activitiContentService: ActivitiContentService,
                 private contentService: ContentService,
-                private thumbnailService: ThumbnailService) {
+                private thumbnailService: ThumbnailService,
+                private ngZone: NgZone) {
     }
 
     ngOnChanges(changes: SimpleChanges) {
@@ -65,16 +66,20 @@ export class ProcessAttachmentListComponent implements OnChanges {
     }
 
     reload(): void {
-        this.loadAttachmentsByProcessInstanceId(this.processInstanceId);
+        this.ngZone.run(() => {
+            this.loadAttachmentsByProcessInstanceId(this.processInstanceId);
+        });
     }
 
     add(content: any): void {
-        this.attachments.push({
-            id: content.id,
-            name: content.name,
-            created: content.created,
-            createdBy: content.createdBy.firstName + ' ' + content.createdBy.lastName,
-            icon: this.thumbnailService.getMimeTypeIcon(content.mimeType)
+        this.ngZone.run(() => {
+            this.attachments.push({
+                id: content.id,
+                name: content.name,
+                created: content.created,
+                createdBy: content.createdBy.firstName + ' ' + content.createdBy.lastName,
+                icon: this.thumbnailService.getMimeTypeIcon(content.mimeType)
+            });
         });
     }
 

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { SimpleChange } from '@angular/core';
+import { NgZone, SimpleChange } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MdProgressSpinnerModule } from '@angular/material';
 import { By } from '@angular/platform-browser';
@@ -41,6 +41,7 @@ describe('TaskAttachmentList', () => {
     let mockAttachment: any;
 
     beforeEach(async(() => {
+        let zone = new NgZone({enableLongStackTrace: false});
         TestBed.configureTestingModule({
             imports: [
                 CoreModule,
@@ -53,7 +54,8 @@ describe('TaskAttachmentList', () => {
             providers: [
                 ActivitiContentService,
                 { provide: AppConfigService, useClass: AppConfigServiceMock },
-                { provide: TranslationService, useClass: TranslationMock }
+                { provide: TranslationService, useClass: TranslationMock },
+                { provide: NgZone, useValue: zone }
             ]
         }).compileComponents();
 

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, Input, NgZone, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { ActivitiContentService } from 'ng2-activiti-form';
 import { ContentService, ThumbnailService } from 'ng2-alfresco-core';
 
@@ -51,7 +51,8 @@ export class TaskAttachmentListComponent implements OnChanges {
 
     constructor(private activitiContentService: ActivitiContentService,
                 private contentService: ContentService,
-                private thumbnailService: ThumbnailService) {
+                private thumbnailService: ThumbnailService,
+                private ngZone: NgZone) {
     }
 
     ngOnChanges(changes: SimpleChanges) {
@@ -65,16 +66,20 @@ export class TaskAttachmentListComponent implements OnChanges {
     }
 
     reload(): void {
-        this.loadAttachmentsByTaskId(this.taskId);
+        this.ngZone.run(() => {
+            this.loadAttachmentsByTaskId(this.taskId);
+        });
     }
 
     add(content: any): void {
-        this.attachments.push({
-            id: content.id,
-            name: content.name,
-            created: content.created,
-            createdBy: content.createdBy.firstName + ' ' + content.createdBy.lastName,
-            icon: this.thumbnailService.getMimeTypeIcon(content.mimeType)
+        this.ngZone.run(() => {
+            this.attachments.push({
+                id: content.id,
+                name: content.name,
+                created: content.created,
+                createdBy: content.createdBy.firstName + ' ' + content.createdBy.lastName,
+                icon: this.thumbnailService.getMimeTypeIcon(content.mimeType)
+            });
         });
     }
 

ng2-components/ng2-alfresco-core/src/directives/upload.directive.spec.ts

@@ -138,4 +138,15 @@ describe('UploadDirective', () => {
         directive.onDrop(event);
     });
 
+    it('should reset input value after file upload', () => {
+        directive.enabled = true;
+        directive.mode = ['click'];
+        const files = [
+            <FileInfo> {}
+        ];
+        const event = {'currentTarget': {'files': files}, 'target': {'value': '/testpath/document.pdf'}};
+
+        directive.onSelectFiles(event);
+        expect(event.target.value).toBe('');
+    });
 });

ng2-components/ng2-alfresco-core/src/directives/upload.directive.ts

@@ -235,7 +235,7 @@ export class UploadDirective implements OnInit, OnDestroy {
      * Invoked when user selects files or folders by means of File Dialog
      * @param e DOM event
      */
-    protected onSelectFiles(e: Event) {
+    onSelectFiles(e: any): void {
         if (this.isClickMode()) {
             const input = (<HTMLInputElement> e.currentTarget);
             const files = FileUtils.toFileArray(input.files);
@@ -244,6 +244,7 @@ export class UploadDirective implements OnInit, OnDestroy {
                 file: file,
                 relativeFolder: '/'
             }));
+            e.target.value = '';
         }
     }
 }