inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-3067] App-list Empty State. (#3432)

Browse Source
This commit is contained in:
camorra-skk
2018-06-06 14:24:43 +05:30
committed by Maurizio Vitale
parent 302091d338
commit 508308113c
7 changed files with 29 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/process-services/apps-list.component.md
View File

@@ -24,9 +24,9 @@ If we intend to show a custom template if there are no apps present
```html
<adf-apps
[layoutType]="'GRID'">
<adf-empty-list>
<div adf-empty-list-header class="adf-empty-list-header">No apps present</div>
</adf-empty-list>
<adf-empty-custom-content>
No Apps present
</adf-empty-custom-content>
</adf-apps>
```

21
lib/process-services/app-list/apps-list.component.html
View File

@@ -42,14 +42,15 @@
</ng-container>
<ng-template #empty>
<ng-content *ngIf="hasCustomEmptyListTemplate; else defaulEmptyList" class="adf-custom-empty-template"></ng-content>
<ng-template #defaulEmptyList>
<adf-empty-list *ngIf="isEmpty()">
<div adf-empty-list-header class="adf-empty-list-header">
{{ 'ADF_TASK_LIST.APPS.NONE' | translate }}
</div>
</adf-empty-list>
</ng-template>
<div class="adf-app-list-empty" *ngIf="isEmpty()">
<ng-content select="adf-empty-custom-content" *ngIf="hasEmptyCustomContentTemplate; else defaultEmptyTemplate" class="adf-custom-empty-template"></ng-content>
<ng-template #defaultEmptyTemplate>
<adf-empty-content
icon="apps"
[title]="'ADF_TASK_LIST.APPS.TITLE' | translate"
[subtitle]="'ADF_TASK_LIST.APPS.SUBTITLE' | translate">
</adf-empty-content>
</ng-template>
</div>
</ng-template>

2
lib/process-services/app-list/apps-list.component.scss
View File

@@ -21,7 +21,7 @@
theme-10: (bg: #cabb33, color: #baab23)
);
.adf-app-list-spinner {
.adf-app-list-spinner, .adf-app-list-empty {
display: flex;
align-items: center;
justify-content: center;

8
lib/process-services/app-list/apps-list.component.spec.ts
View File

@@ -243,9 +243,9 @@ describe('AppsListComponent', () => {
@Component({
template: `
<adf-apps>
<adf-empty-list>
<div adf-empty-list-header class="adf-empty-list-header">No Apps</div>
</adf-empty-list>
<adf-empty-custom-content>
<p id="custom-id">No Apps</p>
</adf-empty-custom-content>
</adf-apps>
`
})
@@ -272,7 +272,7 @@ describe('Custom CustomEmptyAppListTemplateComponent', () => {
it('should render the custom no-apps template', async(() => {
fixture.detectChanges();
fixture.whenStable().then(() => {
let title: any = fixture.debugElement.queryAll(By.css('[adf-empty-list-header]'));
let title: any = fixture.debugElement.queryAll(By.css('#custom-id'));
expect(title.length).toBe(1);
expect(title[0].nativeElement.innerText).toBe('No Apps');
});

12
lib/process-services/app-list/apps-list.component.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { AppsProcessService, TranslationService, EmptyListComponent } from '@alfresco/adf-core';
import { AppsProcessService, TranslationService, EmptyCustomContentDirective } from '@alfresco/adf-core';
import { AfterContentInit, Component, EventEmitter, Input, OnInit, Output, ContentChild } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
@@ -37,8 +37,8 @@ export class AppsListComponent implements OnInit, AfterContentInit {
public static DEFAULT_TASKS_APP_ICON: string = 'glyphicon-asterisk';
public static DEFAULT_TASKS_APP_MATERIAL_ICON: string = 'favorite_border';
@ContentChild(EmptyListComponent)
emptyTemplate: EmptyListComponent;
@ContentChild(EmptyCustomContentDirective)
emptyCustomContent: EmptyCustomContentDirective;
/** (**required**) Defines the layout of the apps. There are two possible
* values, "GRID" and "LIST".
@@ -69,7 +69,7 @@ export class AppsListComponent implements OnInit, AfterContentInit {
loading: boolean = false;
hasCustomEmptyListTemplate: boolean = false;
hasEmptyCustomContentTemplate: boolean = false;
constructor(
private appsProcessService: AppsProcessService,
@@ -90,8 +90,8 @@ export class AppsListComponent implements OnInit, AfterContentInit {
}
ngAfterContentInit() {
if (this.emptyTemplate) {
this.hasCustomEmptyListTemplate = true;
if (this.emptyCustomContent) {
this.hasEmptyCustomContentTemplate = true;
}
}

4
lib/process-services/app-list/apps-list.module.ts
View File

@@ -20,7 +20,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
import { NgModule } from '@angular/core';
import { MaterialModule } from '../material.module';
import { TranslateModule } from '@ngx-translate/core';
import { DataTableModule } from '@alfresco/adf-core';
import { CoreModule } from '@alfresco/adf-core';
import { AppsListComponent } from './apps-list.component';
import { SelectAppsDialogComponent } from './select-apps-dialog-component';
@@ -31,7 +31,7 @@ import { SelectAppsDialogComponent } from './select-apps-dialog-component';
MaterialModule,
FlexLayoutModule,
TranslateModule,
DataTableModule
CoreModule
],
declarations: [
AppsListComponent,

3
lib/process-services/i18n/en.json
View File

@@ -13,7 +13,8 @@
},
"ADF_TASK_LIST": {
"APPS": {
"NONE": "No apps found",
"TITLE": "No Applications Found",
"SUBTITLE":"Create a new application that you want to easily find later",
"TASK_APP_NAME": "Task App"
},
"LIST": {