[ADF-2297] App-list - The component shows "No Apps found" until all the apps are loaded (#2945)

* [ADF-2297] When loading the process workspace landing page after login, there is a message "No Apps found" displayed until all the apps are loaded * Added a template in app-list component to show apps loading status. * [ADF-2297] When loading the process workspace landing page after login, there is a message "No Apps found" displayed until all the apps are loaded * Added a template in app-list component to show apps loading status. * [ADF-2297] When loading the process workspace landing page after login, there is a message "No Apps found" displayed until all the apps are loaded * Added a template in app-list component to show apps loading status. * [ADF-2297] When loading the process workspace landing page after login, there is a message "No Apps found" displayed until all the apps are loaded * Added a template in app-list component to show apps loading status. * added a way to pass custom no-apps template to adf-apps * [ADF-2297] When loading the process workspace landing page after login, there is a message "No Apps found" displayed until all the apps are loaded * Added a template in app-list component to show apps loading status. * added a way to pass custom no-apps template to adf-apps
2025-07-24 17:32:15 +00:00 · 2018-02-20 15:55:53 +05:30
parent de575fd47b
commit 5955cc567d
6 changed files with 125 additions and 8 deletions
--- a/docs/apps-list.component.md
+++ b/docs/apps-list.component.md
@@ -12,6 +12,19 @@ Shows all available apps.
 </adf-apps>
 ```

+## Passing custom no-apps template
+
+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-apps>
+```
+
 ### Properties

 | Name | Type | Default value | Description |
--- a/lib/process-services/app-list/apps-list.component.html
+++ b/lib/process-services/app-list/apps-list.component.html
@@ -34,6 +34,22 @@
        </div>
    </div>
 </div>
-<div class="menu-container" *ngIf="isEmpty()">
+
+<ng-container *ngIf="isLoading(); else empty">
+    <div class="adf-app-list-spinner">
+        <mat-spinner></mat-spinner>
+    </div>
+</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>
+            </div>
+        </adf-empty-list>
+    </ng-template>
+</ng-template>
--- a/lib/process-services/app-list/apps-list.component.scss
+++ b/lib/process-services/app-list/apps-list.component.scss
@@ -24,6 +24,17 @@ $themes: (
    theme-10: (bg: #cabb33, color: #baab23)
 );

+.adf-app-list-spinner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    height: 85vh;
+    .mat-spinner {
+        margin: 0 auto;
+    }
+}
+
 .adf-app-listgrid {
    padding: 8px;

--- a/lib/process-services/app-list/apps-list.component.spec.ts
+++ b/lib/process-services/app-list/apps-list.component.spec.ts
@@ -15,7 +15,7 @@
 * limitations under the License.
 */

-import { DebugElement } from '@angular/core';
+import { DebugElement, Component } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { AppsProcessService, CoreModule } from '@alfresco/adf-core';
@@ -70,6 +70,19 @@ describe('AppsListComponent', () => {
        expect(getAppsSpy).toHaveBeenCalled();
    });

+    it('loading should be false by default', () => {
+        expect(component.loading).toBeFalsy();
+    });
+
+    it('should show the loading spinner when the apps are loading', async(() => {
+        component.loading = true;
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+        let loadingSpinner = fixture.nativeElement.querySelector('mat-spinner');
+        expect(loadingSpinner).toBeDefined();
+        });
+    }));
+
    it('should show the apps filtered by defaultAppId', () => {
        component.filtersAppId = [{defaultAppId: 'fake-app-1'}];
        fixture.detectChanges();
@@ -239,3 +252,45 @@ 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-apps>
+       `
+})
+class CustomEmptyAppListTemplateComponent {
+}
+
+describe('Custom CustomEmptyAppListTemplateComponent', () => {
+    let fixture: ComponentFixture<CustomEmptyAppListTemplateComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                AppsListComponent,
+                CustomEmptyAppListTemplateComponent
+            ],
+            imports: [
+                MaterialModule
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(CustomEmptyAppListTemplateComponent);
+        fixture.detectChanges();
+    });
+
+    it('should render the custom no-apps template', async(() => {
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            let title: any = fixture.debugElement.queryAll(By.css('[adf-empty-list-header]'));
+            expect(title.length).toBe(1);
+            expect(title[0].nativeElement.innerText).toBe('No Apps');
+        });
+    }));
+});
--- a/lib/process-services/app-list/apps-list.component.ts
+++ b/lib/process-services/app-list/apps-list.component.ts
@@ -15,8 +15,8 @@
 * limitations under the License.
 */

-import { AppsProcessService, TranslationService } from '@alfresco/adf-core';
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { AppsProcessService, TranslationService, EmptyListComponent } 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';
 import { AppDefinitionRepresentationModel } from '../task-list';
@@ -27,7 +27,7 @@ import { IconModel } from './icon.model';
    templateUrl: 'apps-list.component.html',
    styleUrls: ['./apps-list.component.scss']
 })
-export class AppsListComponent implements OnInit {
+export class AppsListComponent implements OnInit, AfterContentInit {

    public static LAYOUT_LIST: string = 'LIST';
    public static LAYOUT_GRID: string = 'GRID';
@@ -37,6 +37,9 @@ export class AppsListComponent implements OnInit {
    public static DEFAULT_TASKS_APP_ICON: string = 'glyphicon-asterisk';
    public static DEFAULT_TASKS_APP_MATERIAL_ICON: string = 'favorite_border';

+    @ContentChild(EmptyListComponent)
+    emptyTemplate: EmptyListComponent;
+
    /** (**required**) Defines the layout of the apps. There are two possible
     * values, "GRID" and "LIST".
     */
@@ -64,6 +67,10 @@ export class AppsListComponent implements OnInit {

    private iconsMDL: IconModel;

+    loading: boolean = false;
+
+    hasCustomEmptyListTemplate: boolean = false;
+
    constructor(
        private appsProcessService: AppsProcessService,
        private translationService: TranslationService) {
@@ -82,7 +89,14 @@ export class AppsListComponent implements OnInit {
        this.load();
    }

+    ngAfterContentInit() {
+        if (this.emptyTemplate) {
+            this.hasCustomEmptyListTemplate = true;
+        }
+    }
+
    private load() {
+        this.loading = true;
        this.appsProcessService.getDeployedApplications()
        .subscribe(
            (res: AppDefinitionRepresentationModel[]) => {
@@ -94,10 +108,12 @@ export class AppsListComponent implements OnInit {
                    } else if (app.deploymentId) {
                        this.appsObserver.next(app);
                    }
+                    this.loading = false;
                });
            },
            (err) => {
                this.error.emit(err);
+                this.loading = false;
            }
        );
    }
@@ -185,6 +201,10 @@ export class AppsListComponent implements OnInit {
        return this.appList.length === 0;
    }

+    isLoading(): boolean {
+        return this.loading;
+    }
+
    getTheme(app: AppDefinitionRepresentationModel): string {
        return app.theme ? app.theme : '';
    }
--- a/lib/process-services/app-list/apps-list.module.ts
+++ b/lib/process-services/app-list/apps-list.module.ts
@@ -20,6 +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 { AppsListComponent } from './apps-list.component';
 import { SelectAppsDialogComponent } from './select-apps-dialog-component';
@@ -29,7 +30,8 @@ import { SelectAppsDialogComponent } from './select-apps-dialog-component';
        CommonModule,
        MaterialModule,
        FlexLayoutModule,
-        TranslateModule
+        TranslateModule,
+        DataTableModule
    ],
    declarations: [
        AppsListComponent,