From 3b9a10dbfc70f2a6980ec03fe3f397c2247c4ef8 Mon Sep 17 00:00:00 2001
From: Mario Romano <dnamario@hotmail.com>
Date: Wed, 7 Sep 2016 16:02:18 +0100
Subject: [PATCH] #706 custom empty tepmlate for task details

---
 .../ng2-activiti-tasklist/README.md           | 20 +++++++++
 ng2-components/ng2-activiti-tasklist/index.ts |  3 +-
 .../activiti-task-details.component.html      | 10 ++++-
 .../activiti-task-details.component.ts        |  4 +-
 .../no-task-detail-template.component.ts      | 41 +++++++++++++++++++
 5 files changed, 75 insertions(+), 3 deletions(-)
 create mode 100644 ng2-components/ng2-activiti-tasklist/src/components/no-task-detail-template.component.ts

diff --git a/ng2-components/ng2-activiti-tasklist/README.md b/ng2-components/ng2-activiti-tasklist/README.md
index 87995cf4ea..a560fbc566 100644
--- a/ng2-components/ng2-activiti-tasklist/README.md
+++ b/ng2-components/ng2-activiti-tasklist/README.md
@@ -103,6 +103,26 @@ No events
 **taskId**: { string } required) The id of the task details that we
 are asking for.
 
+### Custom 'empty Activiti Task Details' template
+
+By default the Activiti Task Details provides the following message for the empty task details:
+
+'No Tasks'
+
+
+This can be changed by adding the following custom html template:
+
+```html
+<activiti-task-details [taskId]="taskId">
+    <no-task-details-template>
+        <template>
+             <h1>Sorry, no tasks here</h1>
+             <img src="example.jpg">
+        </template>
+    </no-task-details-template>
+</activiti-task-details>    
+```
+
 ## Basic usage example Activiti Filter
 The component shows all the available filters.
 
diff --git a/ng2-components/ng2-activiti-tasklist/index.ts b/ng2-components/ng2-activiti-tasklist/index.ts
index f8e68027dc..486f892126 100644
--- a/ng2-components/ng2-activiti-tasklist/index.ts
+++ b/ng2-components/ng2-activiti-tasklist/index.ts
@@ -18,8 +18,9 @@
 import { ActivitiTaskList } from './src/components/activiti-tasklist.component';
 import { ActivitiTaskDetails } from './src/components/activiti-task-details.component';
 import { ActivitiFilters } from './src/components/activiti-filters.component';
+import { NoTaskDetailsTemplateComponent } from './src/components/no-task-detail-template.component';
 
 export * from './src/components/activiti-tasklist.component';
 export * from './src/services/activiti-tasklist.service';
 
-export const ALFRESCO_TASKLIST_DIRECTIVES: [any] = [ActivitiFilters, ActivitiTaskList, ActivitiTaskDetails];
+export const ALFRESCO_TASKLIST_DIRECTIVES: [any] = [NoTaskDetailsTemplateComponent, ActivitiFilters, ActivitiTaskList, ActivitiTaskDetails];
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html
index 365e135e6c..f505ac7162 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html
@@ -1,4 +1,12 @@
-<div *ngIf="!taskDetails">{{ 'TASK_DETAILS.MESSAGES.NONE' | translate }}</div>
+<div *ngIf="!taskDetails">
+    <template *ngIf="noTaskDetailsTemplateComponent" ngFor [ngForOf]="[data]"
+              [ngForTemplate]="noTaskDetailsTemplateComponent">
+        {{ 'TASK_DETAILS.MESSAGES.NONE' | translate }}
+    </template>
+    <div *ngIf="!noTaskDetailsTemplateComponent">
+        {{ 'TASK_DETAILS.MESSAGES.NONE' | translate }}
+    </div>
+</div>
 <div *ngIf="taskDetails">
     <h2 class="mdl-card__title-text">{{taskDetails.name}}</h2>
     <activiti-task-header [taskDetails]="taskDetails" #activitiheader></activiti-task-header>
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts
index 39f49a780b..fbf4deab72 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
+import { Component, Input, OnInit, ViewChild, Output, EventEmitter, TemplateRef } from '@angular/core';
 import { AlfrescoTranslationService, AlfrescoAuthenticationService, AlfrescoPipeTranslate } from 'ng2-alfresco-core';
 import { ActivitiTaskListService } from './../services/activiti-tasklist.service';
 import { ActivitiTaskHeader } from './activiti-task-header.component';
@@ -81,6 +81,8 @@ export class ActivitiTaskDetails implements OnInit {
 
     taskPeople: User[] = [];
 
+    noTaskDetailsTemplateComponent: TemplateRef<any>;
+
     /**
      * Constructor
      * @param auth
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/no-task-detail-template.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/no-task-detail-template.component.ts
new file mode 100644
index 0000000000..0761f1e4c5
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/src/components/no-task-detail-template.component.ts
@@ -0,0 +1,41 @@
+/*!
+ * @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,
+    ContentChild,
+    TemplateRef,
+    AfterContentInit
+} from '@angular/core';
+import { ActivitiTaskDetails } from './activiti-task-details.component';
+
+@Directive({
+    selector: 'no-task-details-template'
+})
+export class NoTaskDetailsTemplateComponent implements AfterContentInit {
+
+    @ContentChild(TemplateRef)
+    template: any;
+
+    constructor(
+        private activitiTaskDetails: ActivitiTaskDetails) {
+    }
+
+    ngAfterContentInit() {
+        this.activitiTaskDetails.noTaskDetailsTemplateComponent = this.template;
+    }
+}