[ADF-524] Fix empty state after the loading introduction (#1980)

* fix empty state after the loading introduction

* Update document-list.component.spec.ts

remove typo

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html

@@ -7,6 +7,7 @@
         <th *ngIf="actions && actionsPosition === 'left'" class="alfresco-datatable__actions-header">
             <span class="sr-only">Actions</span>
         </th>
+
         <!-- Columns -->
         <th *ngIf="multiselect">
             <md-checkbox [checked]="isSelectAllChecked" (change)="onSelectAllClick($event)"></md-checkbox>
@@ -28,6 +29,7 @@
     </tr>
     </thead>
     <tbody>
+    <ng-container *ngIf="!loading">
 
         <tr *ngFor="let row of data.getRows(); let idx = index" tabindex="0"
             class="alfresco-datatable__row"
@@ -65,7 +67,8 @@
                 <div *ngIf="!col.template" class="cell-container">
                     <ng-container [ngSwitch]="col.type">
                         <div *ngSwitchCase="'image'" class="cell-value">
-                        <i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row, col)}}</i>
+                            <i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row,
+                                col)}}</i>
                             <img *ngIf="!isIconValue(row, col)"
                                  class="image-cell"
                                  alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
@@ -117,7 +120,7 @@
             </td>
 
         </tr>
-    <tr *ngIf="data.getRows().length === 0 && !loading">
+        <tr *ngIf="data.getRows().length === 0">
             <td class="mdl-data-table__cell--non-numeric adf-no-content-container"
                 [attr.colspan]="1 + data.getColumns().length">
                 <ng-template *ngIf="noContentTemplate"
@@ -126,6 +129,8 @@
                 </ng-template>
             </td>
         </tr>
+    </ng-container>
+
     <tr *ngIf="loading">
         <td class="mdl-data-table__cell--non-numeric adf-loading-content-container"
             [attr.colspan]="1 + data.getColumns().length">

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

@@ -46,3 +46,16 @@
 .adf-document-list-loading-margin {
     margin: auto;
 }
+
+.adf-document-list-loading-container {
+    min-height: 300px;
+    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
+    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
+    display: -webkit-flex; /* NEW - Chrome */
+    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
+    -webkit-box-flex-direction: row;
+    -moz-box-flex-direction: row;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+    height: 100%;
+}

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

@@ -25,23 +25,25 @@
     <div *ngIf="!isEmptyTemplateDefined()">
         <no-content-template>
             <ng-template>
-                <!--put your cutom template here-->
-                <md-progress-spinner
-                    class="adf-document-list-loading-margin"
-                    [color]="'primary'"
-                    [mode]="'indeterminate'">
-                </md-progress-spinner>
+                <div  id="adf-document-list-empty" class="document-list_empty_template">
+                    <div class="document-list__this-space-is-empty">This folder is empty</div>
+                    <div class="document-list__drag-drop">Drag and Drop</div>
+                    <div class="document-list__any-files-here-to-add">any files here to add</div>
+                    <img [src]="emptyFolderImageUrl" class="document-list__empty_doc_lib">
+                </div>
             </ng-template>
         </no-content-template>
     </div>
     <div>
         <loading-content-template>
             <ng-template>
+                <div class="adf-document-list-loading-container">
                     <md-progress-spinner id="adf-document-list-loading"
                                          class="adf-document-list-loading-margin"
                                          [color]="'primary'"
                                          [mode]="'indeterminate'">
                     </md-progress-spinner>
+                </div>
             </ng-template>
         </loading-content-template>
     </div>

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

@@ -167,6 +167,27 @@ describe('DocumentList', () => {
         });
     });
 
+    it('should empty template be present when no element are present', (done) => {
+        documentList.currentFolderId = '1d26e465-dea3-42f3-b415-faa8364b9692';
+        documentList.folderNode = new NodeMinimal();
+        documentList.folderNode.id = '1d26e465-dea3-42f3-b415-faa8364b9692';
+        documentList.reload();
+
+        fixture.detectChanges();
+
+        documentList.ready.subscribe(() => {
+            fixture.detectChanges();
+            expect(element.querySelector('#adf-document-list-empty')).toBeDefined();
+            done();
+        });
+
+        jasmine.Ajax.requests.at(0).respondWith({
+            status: 200,
+            contentType: 'application/json',
+            responseText: JSON.stringify(fakeNodeAnswerWithNOEntries)
+        });
+    });
+
     it('should not execute action without node provided', () => {
         let action = new ContentActionModel();
         action.handler = function () {