mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
[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
This commit is contained in:
Eugenio Romano
committed by
Eugenio Romano
Eugenio Romano
parent
0a81979a4d
commit
99467ba957
@@ -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,104 +29,108 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<ng-container *ngIf="!loading">
|
||||
|
||||
<tr *ngFor="let row of data.getRows(); let idx = index" tabindex="0"
|
||||
class="alfresco-datatable__row"
|
||||
[class.alfresco-datatable__row--selected]="row.isSelected"
|
||||
[adf-upload]="allowDropFiles && rowAllowsDrop(row)" [adf-upload-data]="row"
|
||||
[ngStyle]="rowStyle"
|
||||
[ngClass]="rowStyleClass">
|
||||
<tr *ngFor="let row of data.getRows(); let idx = index" tabindex="0"
|
||||
class="alfresco-datatable__row"
|
||||
[class.alfresco-datatable__row--selected]="row.isSelected"
|
||||
[adf-upload]="allowDropFiles && rowAllowsDrop(row)" [adf-upload-data]="row"
|
||||
[ngStyle]="rowStyle"
|
||||
[ngClass]="rowStyleClass">
|
||||
|
||||
<!-- Actions (left) -->
|
||||
<td *ngIf="actions && actionsPosition === 'left'" class="alfresco-datatable__actions-cell">
|
||||
<button [id]="'action_menu_' + idx" alfresco-mdl-button class="mdl-button--icon"
|
||||
[attr.data-automation-id]="actions_menu">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<ul alfresco-mdl-menu class="mdl-menu--bottom-left"
|
||||
[attr.for]="'action_menu_' + idx">
|
||||
<li class="mdl-menu__item" [attr.disabled]="action.disabled"
|
||||
[attr.data-automation-id]="action.title"
|
||||
*ngFor="let action of getRowActions(row)"
|
||||
(click)="onExecuteRowAction(row, action)">
|
||||
{{action.title}}
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<!-- Actions (left) -->
|
||||
<td *ngIf="actions && actionsPosition === 'left'" class="alfresco-datatable__actions-cell">
|
||||
<button [id]="'action_menu_' + idx" alfresco-mdl-button class="mdl-button--icon"
|
||||
[attr.data-automation-id]="actions_menu">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<ul alfresco-mdl-menu class="mdl-menu--bottom-left"
|
||||
[attr.for]="'action_menu_' + idx">
|
||||
<li class="mdl-menu__item" [attr.disabled]="action.disabled"
|
||||
[attr.data-automation-id]="action.title"
|
||||
*ngFor="let action of getRowActions(row)"
|
||||
(click)="onExecuteRowAction(row, action)">
|
||||
{{action.title}}
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
|
||||
<td *ngIf="multiselect">
|
||||
<md-checkbox [(ngModel)]="row.isSelected"></md-checkbox>
|
||||
</td>
|
||||
<td *ngFor="let col of data.getColumns()"
|
||||
class="mdl-data-table__cell--non-numeric non-selectable data-cell {{col.cssClass}}"
|
||||
(click)="onRowClick(row, $event)"
|
||||
(dblclick)="onRowDblClick(row, $event)"
|
||||
[context-menu]="getContextMenuActions(row, col)"
|
||||
[context-menu-enabled]="contextMenu">
|
||||
<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>
|
||||
<img *ngIf="!isIconValue(row, col)"
|
||||
class="image-cell"
|
||||
alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
|
||||
src="{{ data.getValue(row, col) }}"
|
||||
(error)="onImageLoadingError($event)">
|
||||
</div>
|
||||
<div *ngSwitchCase="'icon'" class="cell-value">
|
||||
<img class="image-cell"
|
||||
alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
|
||||
src="{{ data.getValue(row, col) }}"
|
||||
(error)="onImageLoadingError($event)">
|
||||
</div>
|
||||
<div *ngSwitchCase="'date'" class="cell-value"
|
||||
[attr.data-automation-id]="'date_' + data.getValue(row, col)">
|
||||
<alfresco-datatable-cell [data]="data" [column]="col" [row]="row"></alfresco-datatable-cell>
|
||||
</div>
|
||||
<div *ngSwitchCase="'text'" class="cell-value"
|
||||
[attr.data-automation-id]="'text_' + data.getValue(row, col)">
|
||||
<alfresco-datatable-cell [data]="data" [column]="col" [row]="row"></alfresco-datatable-cell>
|
||||
</div>
|
||||
<td *ngIf="multiselect">
|
||||
<md-checkbox [(ngModel)]="row.isSelected"></md-checkbox>
|
||||
</td>
|
||||
<td *ngFor="let col of data.getColumns()"
|
||||
class="mdl-data-table__cell--non-numeric non-selectable data-cell {{col.cssClass}}"
|
||||
(click)="onRowClick(row, $event)"
|
||||
(dblclick)="onRowDblClick(row, $event)"
|
||||
[context-menu]="getContextMenuActions(row, col)"
|
||||
[context-menu-enabled]="contextMenu">
|
||||
<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>
|
||||
<img *ngIf="!isIconValue(row, col)"
|
||||
class="image-cell"
|
||||
alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
|
||||
src="{{ data.getValue(row, col) }}"
|
||||
(error)="onImageLoadingError($event)">
|
||||
</div>
|
||||
<div *ngSwitchCase="'icon'" class="cell-value">
|
||||
<img class="image-cell"
|
||||
alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
|
||||
src="{{ data.getValue(row, col) }}"
|
||||
(error)="onImageLoadingError($event)">
|
||||
</div>
|
||||
<div *ngSwitchCase="'date'" class="cell-value"
|
||||
[attr.data-automation-id]="'date_' + data.getValue(row, col)">
|
||||
<alfresco-datatable-cell [data]="data" [column]="col" [row]="row"></alfresco-datatable-cell>
|
||||
</div>
|
||||
<div *ngSwitchCase="'text'" class="cell-value"
|
||||
[attr.data-automation-id]="'text_' + data.getValue(row, col)">
|
||||
<alfresco-datatable-cell [data]="data" [column]="col" [row]="row"></alfresco-datatable-cell>
|
||||
</div>
|
||||
<span *ngSwitchDefault class="cell-value">
|
||||
<!-- empty cell for unknown column type -->
|
||||
</span>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div *ngIf="col.template" class="cell-container">
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="col.template"
|
||||
[ngOutletContext]="{ $implicit: { data: data, row: row, col: col }, value: data.getValue(row, col) }">
|
||||
</ng-container>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div *ngIf="col.template" class="cell-container">
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="col.template"
|
||||
[ngOutletContext]="{ $implicit: { data: data, row: row, col: col }, value: data.getValue(row, col) }">
|
||||
</ng-container>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Actions (right) -->
|
||||
<td *ngIf="actions && actionsPosition === 'right'" class="alfresco-datatable__actions-cell">
|
||||
<button [id]="'action_menu_' + idx" alfresco-mdl-button class="mdl-button--icon"
|
||||
[attr.data-automation-id]="actions_menu">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<ul alfresco-mdl-menu class="mdl-menu--bottom-right"
|
||||
[attr.for]="'action_menu_' + idx">
|
||||
<li class="mdl-menu__item" [attr.disabled]="action.disabled || undefined"
|
||||
[attr.data-automation-id]="action.title"
|
||||
*ngFor="let action of getRowActions(row)"
|
||||
(click)="onExecuteRowAction(row, action)">
|
||||
{{action.title}}
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<!-- Actions (right) -->
|
||||
<td *ngIf="actions && actionsPosition === 'right'" class="alfresco-datatable__actions-cell">
|
||||
<button [id]="'action_menu_' + idx" alfresco-mdl-button class="mdl-button--icon"
|
||||
[attr.data-automation-id]="actions_menu">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<ul alfresco-mdl-menu class="mdl-menu--bottom-right"
|
||||
[attr.for]="'action_menu_' + idx">
|
||||
<li class="mdl-menu__item" [attr.disabled]="action.disabled || undefined"
|
||||
[attr.data-automation-id]="action.title"
|
||||
*ngFor="let action of getRowActions(row)"
|
||||
(click)="onExecuteRowAction(row, action)">
|
||||
{{action.title}}
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<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"
|
||||
ngFor [ngForOf]="[data]"
|
||||
[ngForTemplate]="noContentTemplate">
|
||||
</ng-template>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-container>
|
||||
|
||||
</tr>
|
||||
<tr *ngIf="data.getRows().length === 0 && !loading">
|
||||
<td class="mdl-data-table__cell--non-numeric adf-no-content-container"
|
||||
[attr.colspan]="1 + data.getColumns().length">
|
||||
<ng-template *ngIf="noContentTemplate"
|
||||
ngFor [ngForOf]="[data]"
|
||||
[ngForTemplate]="noContentTemplate">
|
||||
</ng-template>
|
||||
</td>
|
||||
</tr>
|
||||
<tr *ngIf="loading">
|
||||
<td class="mdl-data-table__cell--non-numeric adf-loading-content-container"
|
||||
[attr.colspan]="1 + data.getColumns().length">
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
<md-progress-spinner id="adf-document-list-loading"
|
||||
class="adf-document-list-loading-margin"
|
||||
[color]="'primary'"
|
||||
[mode]="'indeterminate'">
|
||||
</md-progress-spinner>
|
||||
<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>
|
||||
|
||||
@@ -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 () {
|
||||
|
||||
Reference in New Issue
Block a user