[ADF-3066] ProcessList Component - Empty State issue. (#3434)

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

@@ -131,7 +131,7 @@
                         </adf-accordion-group>
                     </adf-accordion>
                 </div>
-                <div class="adf-grid-item adf-processes-list adf-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
+                <div class="adf-grid-item adf-processes-list adf-list" fxFlex.gt-md="380px" [ngClass.gt-md]="{'small-pagination': true}"
                      *ngIf="processFilter && !isStartProcessMode()">
                     <adf-process-instance-list
                         #processList

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

@@ -158,6 +158,18 @@ The Process Instance List also supports pagination:
 </adf-pagination>
 ```
 
+### Show custom template when processList is empty
+
+You can add your own template or message as shown in the example below:
+
+```html
+<adf-process-instance-list>
+    <adf-empty-custom-content>
+        Your Content
+    </adf-empty-custom-content>
+<adf-process-instance-list>
+```
+
 ## See also
 
 -   [Data column component](../core/data-column.component.md)

lib/process-services/i18n/en.json

@@ -153,7 +153,8 @@
   },
   "ADF_PROCESS_LIST": {
     "LIST": {
-      "NONE": "No process instances found",
+      "TITLE": "No Processes Found",
+      "SUBTITLE":"Create a new process that you want to easily find later",
       "SUMMARY": "{{total}} process instances found",
       "ERROR": "Couldn't load processes instances. Try again or share the following message with your IT Team: {{errorMessage}}"
     },

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

@@ -1,5 +1,4 @@
-<div>
-    <adf-datatable #dataTable
+<adf-datatable #dataTable
         [data]="data"
         [sorting]="dataSort"
         [loading]="isLoading"
@@ -18,12 +17,13 @@
             </ng-template>
         </loading-content-template>
         <no-content-template>
-            <!--Add your custom empty template here-->
             <ng-template>
-                <div class="no-content-message">
-                    {{ (requestNode ? 'ADF_PROCESS_LIST.LIST.NONE' : 'ADF_PROCESS_LIST.FILTERS.MESSAGES.NONE') | translate }}
-                </div>
+                    <adf-empty-content *ngIf="!emptyCustomContent"
+                    icon="assessment"
+                    [title]="(requestNode ? 'ADF_PROCESS_LIST.LIST.TITLE' : 'ADF_PROCESS_LIST.FILTERS.MESSAGES.NONE') | translate "
+                    [subtitle]="'ADF_PROCESS_LIST.LIST.SUBTITLE'| translate">
+                    </adf-empty-content>
+                <ng-content select="adf-empty-custom-content"></ng-content>
             </ng-template>
         </no-content-template>
     </adf-datatable>
-</div>

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

@@ -15,9 +15,11 @@
  * limitations under the License.
  */
 
-import { Component, SimpleChange, ViewChild } from '@angular/core';
+import { Component, SimpleChange, ViewChild, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { Observable } from 'rxjs/Observable';
+import { By } from '@angular/platform-browser';
+
 import { ProcessInstanceListComponent } from './process-list.component';
 
 import { AppConfigService, setupTestBed, CoreModule } from '@alfresco/adf-core';
@@ -552,3 +554,42 @@ describe('CustomProcessListComponent', () => {
         expect(component.processList.data.getColumns().length).toEqual(3);
     });
 });
+
+@Component({
+    template: `
+    <adf-process-instance-list>
+        <adf-empty-content-holder>
+            <p id="custom-id"> No Process Instance</p>
+        </adf-empty-content-holder>
+    </adf-process-instance-list>
+       `
+})
+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();
+            let title = fixture.debugElement.query(By.css('#custom-id'));
+            expect(title).not.toBeNull();
+            expect(title.nativeElement.innerText).toBe('No Process Instance');
+            expect(fixture.debugElement.query(By.css('.adf-empty-content'))).toBeNull();
+        });
+    }));
+});

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

@@ -23,7 +23,8 @@ import {
     DataTableAdapter,
     ObjectDataColumn,
     ObjectDataRow,
-    ObjectDataTableAdapter
+    ObjectDataTableAdapter,
+    EmptyCustomContentDirective
 } from '@alfresco/adf-core';
 import {
     AppConfigService,
@@ -60,6 +61,8 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit
 
     @ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;
 
+    @ContentChild(EmptyCustomContentDirective) emptyCustomContent: EmptyCustomContentDirective;
+
     @ViewChild('dataTable') dataTable: DataTableComponent;
 
     /** The id of the app. */

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

@@ -20,7 +20,7 @@ import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
-import { FormModule, CommentsModule } from '@alfresco/adf-core';
+import { CoreModule } from '@alfresco/adf-core';
 import { MaterialModule } from '../material.module';
 import { ProcessCommentsModule } from '../process-comments/process-comments.module';
 import { CardViewModule, DataColumnModule, DataTableModule, DirectiveModule, PipeModule } from '@alfresco/adf-core';
@@ -40,7 +40,7 @@ import { StartProcessInstanceComponent } from './components/start-process.compon
     imports: [
         CommonModule,
         DataTableModule,
-        FormModule,
+        CoreModule,
         TaskListModule,
         MaterialModule,
         FlexLayoutModule,
@@ -52,7 +52,6 @@ import { StartProcessInstanceComponent } from './components/start-process.compon
         DataColumnModule,
         DirectiveModule,
         PeopleModule,
-        CommentsModule,
         ContentWidgetModule,
         ProcessCommentsModule
     ],