[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.

docs/process-services/task-list.component.md

@@ -227,6 +227,17 @@ typical tasklist.
 
 You can customize the styling of a column and also add features like tooltips and automatic translation of column titles. See the [`DataColumn`](../../lib/core/datatable/data/data-column.model.ts) page for more information about these features.
 
+### Show custom template when tasklist is empty
+
+You can add your own template or message as shown in the example below:
+
+```html
+<adf-tasklist>
+    <adf-empty-custom-content>
+        Your Content
+    </adf-empty-custom-content>
+<adf-tasklist>
+```
 ## See also
 
 -   [Data column component](../core/data-column.component.md)

lib/core/datatable/datatable.module.ts

@@ -37,6 +37,7 @@ import { LocationCellComponent } from './components/datatable/location-cell.comp
 import { LoadingContentTemplateDirective } from './directives/loading-template.directive';
 import { NoContentTemplateDirective } from './directives/no-content-template.directive';
 import { NoPermissionTemplateDirective } from './directives/no-permission-template.directive';
+import { EmptyCustomContentDirective } from './directives/empty-custom-content.directive';
 
 @NgModule({
     imports: [
@@ -60,7 +61,8 @@ import { NoPermissionTemplateDirective } from './directives/no-permission-templa
         LocationCellComponent,
         NoContentTemplateDirective,
         NoPermissionTemplateDirective,
-        LoadingContentTemplateDirective
+        LoadingContentTemplateDirective,
+        EmptyCustomContentDirective
     ],
     exports: [
         DataTableComponent,
@@ -74,7 +76,8 @@ import { NoPermissionTemplateDirective } from './directives/no-permission-templa
         LocationCellComponent,
         NoContentTemplateDirective,
         NoPermissionTemplateDirective,
-        LoadingContentTemplateDirective
+        LoadingContentTemplateDirective,
+        EmptyCustomContentDirective
     ]
 })
 export class DataTableModule {}

lib/core/datatable/directives/empty-custom-content.directive.ts

@@ -0,0 +1,24 @@
+/*!
+ * @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 { Directive } from '@angular/core';
+
+@Directive({
+    selector: 'adf-empty-custom-content'
+})
+
+export class EmptyCustomContentDirective {}

lib/core/datatable/public-api.ts

@@ -39,5 +39,6 @@ export * from './components/datatable/location-cell.component';
 export * from './directives/loading-template.directive';
 export * from './directives/no-content-template.directive';
 export * from './directives/no-permission-template.directive';
+export * from './directives/empty-custom-content.directive';
 
 export * from './datatable.module';

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
     ],