[ADF-1711] Task Attachment list - fix custom template (#2748)

* fix custom template

* rollback change process attachment

demo-shell/src/app/components/process-service/task-attachments.component.html

@@ -8,9 +8,8 @@
                 [disabled]="isCompletedTask()"
                 [taskId]="taskId"
                 (attachmentClick)="onAttachmentClick($event)">
-                <div adf-empty-list>
+                <adf-empty-list>
-                    <div adf-empty-list-header class="adf-empty-list-header"> {{'ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER'
+                    <div adf-empty-list-header class="adf-empty-list-header">{{'ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER' | translate}}
-                        | translate}}
                     </div>
                     <div adf-empty-list-body>
                         <div fxHide.lt-md="true" class="adf-empty-list-drag_drop">
@@ -20,7 +19,7 @@
                             {{'ADF_TASK_LIST.ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}}
                         </div>
                     </div>
-                </div>
+                </adf-empty-list>
             </adf-task-attachment-list>
 
         </adf-upload-drag-area>

lib/process-services/attachment/task-attachment-list.component.html

@@ -4,15 +4,18 @@
                (rowDblClick)="openContent($event)"
                (showRowActionsMenu)="onShowRowActionsMenu($event)"
                (executeRowAction)="onExecuteRowAction($event)">
-
+            <no-content-template>
-            <adf-empty-list *ngIf="isEmpty()">
+                <ng-template>
-                <div *ngIf="!isCustomTemplateDefined()" adf-empty-list-header class="adf-empty-list-header">
+                    <ng-content *ngIf="hasCustomTemplate; else defaulEmptyList" class="adf-custom-empty-template"></ng-content>
+                    <ng-template #defaulEmptyList>
+                        <adf-empty-list>
+                            <div adf-empty-list-header class="adf-empty-list-header">
                                 {{'ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER' | translate}}
                             </div>
-                <div *ngIf="isCustomTemplateDefined()" #customEmptyListTemplate class="adf-custom-empty-template">
-                    <ng-content select="[adf-empty-list]"></ng-content>
-                </div>
                         </adf-empty-list>
+                    </ng-template>
+                </ng-template>
+            </no-content-template>
 
             <data-columns>
                 <data-column key="icon" type="image" srTitle="ADF_TASK_LIST.PROPERTIES.THUMBNAIL" [sortable]="false"></data-column>

lib/process-services/attachment/task-attachment-list.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { SimpleChange } from '@angular/core';
+import { SimpleChange, Component } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { MaterialModule } from '../material.module';
@@ -168,23 +168,6 @@ describe('TaskAttachmentList', () => {
         });
     }));
 
-    it('should not show the custom empty message when has custom template', async(() => {
-        getTaskRelatedContentSpy.and.returnValue(Observable.of({
-            'size': 0,
-            'total': 0,
-            'start': 0,
-            'data': []
-        }));
-        let change = new SimpleChange(null, '123', true);
-        component.ngOnChanges({ 'taskId': change });
-        component.hasCustomTemplate = true;
-
-        fixture.whenStable().then(() => {
-            fixture.detectChanges();
-            expect(fixture.nativeElement.querySelector('.adf-custom-empty-template')).not.toBeNull();
-        });
-    }));
-
     it('should display all actions if attachments are not read only', () => {
         let change = new SimpleChange(null, '123', true);
         component.ngOnChanges({ 'taskId': change });
@@ -314,3 +297,43 @@ describe('TaskAttachmentList', () => {
 
     });
 });
+
+@Component({
+    template: `
+    <adf-task-attachment-list>
+        <adf-empty-list>
+            <div adf-empty-list-header class="adf-empty-list-header">Custom header</div>
+        </adf-empty-list>
+    </adf-task-attachment-list>
+       `
+})
+class CustomEmptyTemplateComponent {
+}
+
+describe('Custom CustomEmptyTemplateComponent', () => {
+    let fixture: ComponentFixture<CustomEmptyTemplateComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                TaskAttachmentListComponent,
+                CustomEmptyTemplateComponent
+            ],
+            imports: [
+                MaterialModule
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(CustomEmptyTemplateComponent);
+        fixture.detectChanges();
+    });
+
+    it('should render the custom template', () => {
+        fixture.detectChanges();
+        let title: any = fixture.debugElement.queryAll(By.css('[adf-empty-list-header]'));
+        expect(title.length).toBe(1);
+        expect(title[0].nativeElement.innerText).toBe('Custom header');
+    });
+});

lib/process-services/attachment/task-attachment-list.component.ts

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-import { ContentService, ThumbnailService } from '@alfresco/adf-core';
+import { ContentService, ThumbnailService, EmptyListComponent } from '@alfresco/adf-core';
-import { AfterViewInit, Component, ElementRef, EventEmitter, Input, NgZone, OnChanges, Output, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
+import { AfterContentInit, ContentChild, Component, ElementRef, EventEmitter, Input, NgZone, OnChanges, Output, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ProcessContentService, UploadService } from '@alfresco/adf-core';
 import { TaskUploadService } from '../task-list/services/task-upload.service';
 
@@ -29,7 +29,10 @@ import { TaskUploadService } from '../task-list/services/task-upload.service';
         { provide: UploadService, useClass: TaskUploadService }
     ]
 })
-export class TaskAttachmentListComponent implements OnChanges, AfterViewInit {
+export class TaskAttachmentListComponent implements OnChanges, AfterContentInit {
+
+    @ContentChild(EmptyListComponent)
+    emptyTemplate: EmptyListComponent;
 
     @Input()
     taskId: string;
@@ -51,6 +54,8 @@ export class TaskAttachmentListComponent implements OnChanges, AfterViewInit {
     @ViewChild('customEmptyListTemplate')
     customTemplateRef: ElementRef;
 
+    curret: any;
+
     attachments: any[] = [];
     isLoading: boolean = false;
 
@@ -66,9 +71,8 @@ export class TaskAttachmentListComponent implements OnChanges, AfterViewInit {
         }
     }
 
-    ngAfterViewInit() {
+    ngAfterContentInit() {
-        if (this.customTemplateRef && this.customTemplateRef.nativeElement &&
+        if (this.emptyTemplate) {
-            this.customTemplateRef.nativeElement.children && this.customTemplateRef.nativeElement.children.length > 0) {
             this.hasCustomTemplate = true;
         }
     }
@@ -77,6 +81,10 @@ export class TaskAttachmentListComponent implements OnChanges, AfterViewInit {
         this.attachments = [];
     }
 
+    hasCutomEmptyTemplate() {
+        return !!this.emptyTemplate;
+    }
+
     reload(): void {
         this.ngZone.run(() => {
             this.loadAttachmentsByTaskId(this.taskId);
@@ -140,10 +148,6 @@ export class TaskAttachmentListComponent implements OnChanges, AfterViewInit {
         return this.attachments && this.attachments.length === 0;
     }
 
-    isCustomTemplateDefined(): boolean {
-        return this.hasCustomTemplate;
-    }
-
     onShowRowActionsMenu(event: any) {
         let viewAction = {
             title: 'ADF_TASK_LIST.MENU_ACTIONS.VIEW_CONTENT',