[ADF-3041] TaskList Component - Empty State issue. (#3345)

* [DW-635] Empty State Component

* [DW-635] Empty State Component

* [DW-635] Empty state Issue

* [DW-635] Use empty state component and custom empty directive

* [ADF-3041] Documentation for TaskList Component - Empty State issue.

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

@@ -21,11 +21,12 @@
                 </ng-template>
             </loading-content-template>
             <no-content-template>
-                <!--Add your custom empty template here-->
                 <ng-template>
-                    <div class="no-content-message">
-                        {{ 'ADF_TASK_LIST.LIST.MESSAGES.NONE' | translate }}
-                    </div>
+                    <adf-empty-content *ngIf="!emptyCustomContent"
+                        icon="assessment"
+                        [title]="'ADF_TASK_LIST.LIST.MESSAGES.NONE' | translate">
+                    </adf-empty-content>
+                    <ng-content select="adf-empty-custom-content"></ng-content>
                 </ng-template>
             </no-content-template>
         </adf-datatable>

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

@@ -15,8 +15,9 @@
  * limitations under the License.
  */
 
-import { Component, SimpleChange, ViewChild } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, SimpleChange, ViewChild, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 import { AppConfigService, setupTestBed, CoreModule } from '@alfresco/adf-core';
 import { DataRowEvent, ObjectDataRow, ObjectDataTableAdapter } from '@alfresco/adf-core';
 import { TaskListService } from '../services/tasklist.service';
@@ -644,3 +645,40 @@ describe('CustomTaskListComponent', () => {
         expect(component.taskList.data.getColumns().length).toEqual(3);
     });
 });
+
+@Component({
+    template: `
+    <adf-tasklist>
+        <adf-empty-content-holder>
+            <p id="custom-id"></p>
+        </adf-empty-content-holder>
+    </adf-tasklist>
+       `
+})
+class EmptyTemplateComponent {
+}
+
+describe('Custom EmptyTemplateComponent', () => {
+    let component: EmptyTemplateComponent;
+    let fixture: ComponentFixture<EmptyTemplateComponent>;
+
+    setupTestBed({
+        imports: [ProcessTestingModule],
+        declarations: [EmptyTemplateComponent],
+        schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(EmptyTemplateComponent);
+        fixture.detectChanges();
+        component = fixture.componentInstance;
+    });
+
+    it('should render the custom template', async(() => {
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(fixture.debugElement.query(By.css('#custom-id'))).not.toBeNull();
+            expect(fixture.debugElement.query(By.css('.adf-empty-content'))).toBeNull();
+        });
+    }));
+});

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

@@ -16,7 +16,7 @@
  */
 
 import { DataColumn, DataRowEvent, DataTableAdapter, ObjectDataColumn,
-    ObjectDataRow, ObjectDataTableAdapter } from '@alfresco/adf-core';
+    ObjectDataRow, ObjectDataTableAdapter, EmptyCustomContentDirective } from '@alfresco/adf-core';
 import {
     AppConfigService, DataColumnListComponent, PaginationComponent, PaginatedComponent,
     UserPreferencesService, UserPreferenceValues, PaginationModel } from '@alfresco/adf-core';
@@ -41,6 +41,7 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
     requestNode: TaskQueryRequestRepresentationModel;
 
     @ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;
+    @ContentChild(EmptyCustomContentDirective) emptyCustomContent: EmptyCustomContentDirective;
 
     /** The id of the app. */
     @Input()

lib/process-services/task-list/task-list.module.ts

@@ -19,9 +19,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { TranslateModule } from '@ngx-translate/core';
-import { FormModule, CommentsModule } from '@alfresco/adf-core';
+import { CoreModule } from '@alfresco/adf-core';
 import { ProcessCommentsModule } from '../process-comments/process-comments.module';
-import { CardViewModule, DataColumnModule, DataTableModule, DirectiveModule, InfoDrawerModule } from '@alfresco/adf-core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { MaterialModule } from '../material.module';
@@ -44,20 +43,14 @@ import { TaskStandaloneComponent } from './components/task-standalone.component'
 
 @NgModule({
     imports: [
+        CoreModule,
         CommonModule,
-        CardViewModule,
-        DataTableModule,
-        DataColumnModule,
-        DirectiveModule,
-        FormModule,
         FlexLayoutModule,
-        InfoDrawerModule,
         MaterialModule,
         TranslateModule,
         FormsModule,
         ReactiveFormsModule,
         PeopleModule,
-        CommentsModule,
         ProcessCommentsModule,
         ContentWidgetModule
     ],