From ed283c7386f5dad45abdc622e0d40e1d59f81043 Mon Sep 17 00:00:00 2001 From: camorra-skk Date: Thu, 24 May 2018 22:31:06 +0530 Subject: [PATCH] [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 | 11 +++++ lib/core/datatable/datatable.module.ts | 7 +++- .../empty-custom-content.directive.ts | 24 +++++++++++ lib/core/datatable/public-api.ts | 1 + .../components/task-list.component.html | 9 ++-- .../components/task-list.component.spec.ts | 42 ++++++++++++++++++- .../components/task-list.component.ts | 3 +- .../task-list/task-list.module.ts | 11 +---- 8 files changed, 90 insertions(+), 18 deletions(-) create mode 100644 lib/core/datatable/directives/empty-custom-content.directive.ts diff --git a/docs/process-services/task-list.component.md b/docs/process-services/task-list.component.md index 7d8834370c..fbfdd12ad2 100644 --- a/docs/process-services/task-list.component.md +++ b/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 + + + Your Content + + +``` ## See also - [Data column component](../core/data-column.component.md) diff --git a/lib/core/datatable/datatable.module.ts b/lib/core/datatable/datatable.module.ts index b38fa30b0c..88394d4d5d 100644 --- a/lib/core/datatable/datatable.module.ts +++ b/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 {} diff --git a/lib/core/datatable/directives/empty-custom-content.directive.ts b/lib/core/datatable/directives/empty-custom-content.directive.ts new file mode 100644 index 0000000000..7bcafabd5e --- /dev/null +++ b/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 {} diff --git a/lib/core/datatable/public-api.ts b/lib/core/datatable/public-api.ts index ddde741fe0..74487ffe20 100644 --- a/lib/core/datatable/public-api.ts +++ b/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'; diff --git a/lib/process-services/task-list/components/task-list.component.html b/lib/process-services/task-list/components/task-list.component.html index 6f69e8b222..715e36a0d0 100644 --- a/lib/process-services/task-list/components/task-list.component.html +++ b/lib/process-services/task-list/components/task-list.component.html @@ -21,11 +21,12 @@ - -
- {{ 'ADF_TASK_LIST.LIST.MESSAGES.NONE' | translate }} -
+ + + diff --git a/lib/process-services/task-list/components/task-list.component.spec.ts b/lib/process-services/task-list/components/task-list.component.spec.ts index 41b88c32f6..bd497980b4 100644 --- a/lib/process-services/task-list/components/task-list.component.spec.ts +++ b/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: ` + + +

+ + + ` +}) +class EmptyTemplateComponent { +} + +describe('Custom EmptyTemplateComponent', () => { + let component: EmptyTemplateComponent; + let fixture: ComponentFixture; + + 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(); + }); + })); +}); diff --git a/lib/process-services/task-list/components/task-list.component.ts b/lib/process-services/task-list/components/task-list.component.ts index 64ab4d5e7b..f116beea97 100644 --- a/lib/process-services/task-list/components/task-list.component.ts +++ b/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() diff --git a/lib/process-services/task-list/task-list.module.ts b/lib/process-services/task-list/task-list.module.ts index e61a9466d5..d4a176d9f4 100644 --- a/lib/process-services/task-list/task-list.module.ts +++ b/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 ],