#152 Support for custom 'empty folder' template

- default background image for empty folders
- support for user-defined custom templates
- readme updated

demo-shell-ng2/app/components/files/files.component.html

@@ -9,6 +9,13 @@
             [breadcrumb]="breadcrumb"
             (itemClick)="showFile($event)"
             (folderChange)="onFolderChanged($event)">
+        <!--
+        <empty-folder-content>
+            <template>
+                <h1>Sorry, no content here</h1>
+            </template>
+        </empty-folder-content>
+        -->
         <content-columns>
             <content-column source="$thumbnail"></content-column>
             <content-column
@@ -136,4 +143,4 @@
 <alfresco-viewer [(showViewer)]="fileShowed" [urlFile]="urlFile" [overlayMode]="true">
     <div class="mdl-spinner mdl-js-spinner is-active"></div>
 </alfresco-viewer>
-<file-uploading-dialog></file-uploading-dialog>
+<file-uploading-dialog></file-uploading-dialog>

ng2-components/ng2-alfresco-documentlist/README.md

@@ -458,6 +458,29 @@ export class MyView {
 
 ## Advanced usage and customization
 
+### Custom 'empty folder' template
+
+By default Document List provides the following content for the empty folder:
+
+![Default empty folder](docs/assets/empty-folder-template-default.png)
+
+This can be changed by means of the custom html template:
+
+```html
+<alfresco-document-list ...>
+    <empty-folder-content>
+        <template>
+            <h1>Sorry, no content here</h1>
+        </template>
+    </empty-folder-content>
+</alfresco-document-list>
+```
+
+That will give the following output:
+
+![Custom empty folder](docs/assets/empty-folder-template-custom.png)
+
+
 ### Customizing default actions
 
 It is possible extending or replacing the list of available system actions for documents and folders.

ng2-components/ng2-alfresco-documentlist/ng2-alfresco-documentlist.ts

@@ -20,6 +20,7 @@ import { ContentColumn } from './src/components/content-column';
 import { ContentColumnList } from './src/components/content-column-list';
 import { ContentAction } from './src/components/content-action';
 import { ContentActionList } from './src/components/content-action-list';
+import { EmptyFolderContent } from './src/components/empty-folder-content';
 
 import { FolderActionsService } from './src/services/folder-actions.service';
 import { DocumentActionsService } from './src/services/document-actions.service';
@@ -31,6 +32,7 @@ export * from './src/components/content-column';
 export * from './src/components/content-column-list';
 export * from './src/components/content-action';
 export * from './src/components/content-action-list';
+export * from './src/components/empty-folder-content';
 
 // models
 export * from './src/models/column-sorting.model';
@@ -60,7 +62,8 @@ export const DOCUMENT_LIST_DIRECTIVES: [any] = [
     ContentColumn,
     ContentColumnList,
     ContentAction,
-    ContentActionList
+    ContentActionList,
+    EmptyFolderContent
 ];
 
 export const DOCUMENT_LIST_PROVIDERS: [any] = [

ng2-components/ng2-alfresco-documentlist/src/components/document-list.css

@@ -64,6 +64,10 @@
     color: #777;
 }
 
+:host .empty-folder-content > img {
+    width: 100%;
+}
+
 /* Utils */
 
 :host .sr-only {

ng2-components/ng2-alfresco-documentlist/src/components/document-list.html

@@ -100,5 +100,18 @@
             </ul>
         </td>
     </tr>
+
+    <tr *ngIf="folder?.list?.entries?.length === 0">
+        <td class="mdl-data-table__cell--non-numeric empty-folder-content"
+            [attr.colspan]="1 + columns?.length">
+            <template *ngIf="emptyFolderTemplate"
+                      ngFor [ngForOf]="[folder]"
+                      [ngForTemplate]="emptyFolderTemplate">
+            </template>
+            <img *ngIf="!emptyFolderTemplate"
+                 [src]="__baseUrl + '/document-list.empty-folder.png'">
+        </td>
+    </tr>
+
     </tbody>
 </table>

ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts

@@ -23,7 +23,8 @@ import {
     EventEmitter,
     AfterContentInit,
     AfterViewChecked,
-    OnChanges
+    OnChanges,
+    TemplateRef
 } from 'angular2/core';
 import { AlfrescoService } from './../services/alfresco.service';
 import { MinimalNodeEntity, NodePaging } from './../models/document-library.model';
@@ -45,6 +46,8 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
 
     DEFAULT_ROOT_FOLDER: string = '/Sites/swsdp/documentLibrary';
 
+    __baseUrl = __moduleName.replace('/document-list.js', '');
+
     @Input()
     navigate: boolean = true;
 
@@ -73,6 +76,7 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
 
     actions: ContentActionModel[] = [];
     columns: ContentColumnModel[] = [];
+    emptyFolderTemplate: TemplateRef;
 
     private _folder: NodePaging;
 

ng2-components/ng2-alfresco-documentlist/src/components/empty-folder-content.ts

@@ -0,0 +1,45 @@
+/*!
+ * @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,
+    OnInit,
+    AfterContentInit
+} from 'angular2/core';
+import { DocumentList } from './document-list';
+
+@Directive({
+    selector: 'empty-folder-content'
+})
+export class EmptyFolderContent implements OnInit, AfterContentInit {
+
+    @ContentChild(TemplateRef)
+    template: any;
+
+    constructor(
+        private documentList: DocumentList) {
+    }
+
+    ngOnInit() {
+    }
+
+    ngAfterContentInit() {
+        this.documentList.emptyFolderTemplate = this.template;
+    }
+}

ng2-components/ng2-alfresco-documentlist/src/models/document-library.model.ts

@@ -17,10 +17,12 @@
 
 // note: contains only limited subset of available fields
 
+// TODO: deprecated
 export class FolderEntity {
     items: DocumentEntity[];
 }
 
+// TODO: deprecated
 export class DocumentEntity {
     nodeRef: string;
     nodeType: string;
@@ -52,6 +54,7 @@ export class DocumentEntity {
     location: LocationEntity;
 }
 
+// TODO: deprecated
 export class LocationEntity {
     repositoryId: string;
     site: string;
@@ -62,6 +65,7 @@ export class LocationEntity {
     parent: LocationParentEntity;
 }
 
+// TODO: deprecated
 export class LocationParentEntity {
     nodeRef: string;
 }