app list component

lib/process-services-cloud/src/lib/app/app-list-cloud.module.ts

@@ -16,15 +16,14 @@
  */
 
 import { NgModule } from '@angular/core';
-import { MaterialModule } from '../material.module';
-import { CommonModule } from '@angular/common';
 import { AppDetailsCloudComponent } from './components/app-details-cloud.component';
 import { AppListCloudComponent } from './components/app-list-cloud.component';
-import { TEMPLATE_DIRECTIVES, CoreModule } from '@alfresco/adf-core';
 
+export const APP_LIST_CLOUD_DIRECTIVES = [AppListCloudComponent, AppDetailsCloudComponent] as const;
+
+/** @deprecated use `...APP_LIST_CLOUD_DIRECTIVES` instead. */
 @NgModule({
-    imports: [CommonModule, ...TEMPLATE_DIRECTIVES, MaterialModule, CoreModule],
+    imports: [AppListCloudComponent, AppDetailsCloudComponent],
-    declarations: [AppListCloudComponent, AppDetailsCloudComponent],
     exports: [AppListCloudComponent, AppDetailsCloudComponent]
 })
 export class AppListCloudModule {}

lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.spec.ts

@@ -19,7 +19,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { fakeApplicationInstance } from '../mock/app-model.mock';
 import { AppDetailsCloudComponent } from './app-details-cloud.component';
 import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module';
-import { AppListCloudModule } from '../app-list-cloud.module';
 import { DEFAULT_APP_INSTANCE_THEME } from '../models/application-instance.model';
 
 describe('AppDetailsCloudComponent', () => {
@@ -29,7 +28,7 @@ describe('AppDetailsCloudComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ProcessServiceCloudTestingModule, AppListCloudModule]
+            imports: [ProcessServiceCloudTestingModule, AppDetailsCloudComponent]
         });
         fixture = TestBed.createComponent(AppDetailsCloudComponent);
         component = fixture.componentInstance;

lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.ts

@@ -17,46 +17,49 @@
 
 import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
 import { ApplicationInstanceModel, DEFAULT_APP_INSTANCE_ICON, DEFAULT_APP_INSTANCE_THEME } from '../models/application-instance.model';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
-  selector: 'adf-cloud-app-details',
+    selector: 'adf-cloud-app-details',
-  templateUrl: './app-details-cloud.component.html',
+    standalone: true,
-  styleUrls: ['./app-details-cloud.component.scss'],
+    imports: [CommonModule, MatCardModule, MatIconModule],
-  encapsulation: ViewEncapsulation.None
+    templateUrl: './app-details-cloud.component.html',
+    styleUrls: ['./app-details-cloud.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
-
 export class AppDetailsCloudComponent {
+    @Input()
+    applicationInstance: ApplicationInstanceModel;
 
-  @Input()
+    @Output()
-  applicationInstance: ApplicationInstanceModel;
+    selectedApp = new EventEmitter<ApplicationInstanceModel>();
 
-  @Output()
+    /**
-  selectedApp = new EventEmitter<ApplicationInstanceModel>();
+     * Pass the selected app as next
+     *
+     * @param app application model
+     */
+    onSelectApp(app: ApplicationInstanceModel): void {
+        this.selectedApp.emit(app);
+    }
 
-  /**
+    /**
-   * Pass the selected app as next
+     * Get application instance theme
-   *
+     *
-   * @param app application model
+     * @returns the name of the theme
-   */
+     */
-  onSelectApp(app: ApplicationInstanceModel): void {
+    getTheme(): string {
-    this.selectedApp.emit(app);
+        return this.applicationInstance.theme || DEFAULT_APP_INSTANCE_THEME;
-  }
+    }
 
-  /**
+    /**
-   * Get application instance theme
+     * Get application instance icon
-   *
+     *
-   * @returns the name of the theme
+     * @returns the name of the icon
-   */
+     */
-  getTheme(): string {
+    getIcon(): string {
-    return this.applicationInstance.theme || DEFAULT_APP_INSTANCE_THEME;
+        return this.applicationInstance.icon || DEFAULT_APP_INSTANCE_ICON;
-  }
+    }
-
-  /**
-   * Get application instance icon
-   *
-   * @returns the name of the icon
-   */
-  getIcon(): string {
-    return this.applicationInstance.icon || DEFAULT_APP_INSTANCE_ICON;
-  }
 }

lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.spec.ts

@@ -23,6 +23,8 @@ import { fakeApplicationInstance } from '../mock/app-model.mock';
 import { AppListCloudComponent, LAYOUT_GRID, LAYOUT_LIST } from './app-list-cloud.component';
 import { AppsProcessCloudService } from '../services/apps-process-cloud.service';
 import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module';
+import { MatIconModule } from '@angular/material/icon';
+import { CustomEmptyContentTemplateDirective } from '@alfresco/adf-core';
 
 describe('AppListCloudComponent', () => {
     let component: AppListCloudComponent;
@@ -40,6 +42,8 @@ describe('AppListCloudComponent', () => {
     };
 
     @Component({
+        standalone: true,
+        imports: [MatIconModule, CustomEmptyContentTemplateDirective, AppListCloudComponent],
         template: `
             <adf-cloud-app-list>
                 <adf-custom-empty-content-template>
@@ -53,8 +57,7 @@ describe('AppListCloudComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ProcessServiceCloudTestingModule],
+            imports: [ProcessServiceCloudTestingModule, CustomEmptyAppListCloudTemplateComponent]
-            declarations: [CustomEmptyAppListCloudTemplateComponent]
         });
         fixture = TestBed.createComponent(AppListCloudComponent);
         component = fixture.componentInstance;

lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.ts

@@ -15,21 +15,19 @@
  * limitations under the License.
  */
 
-import { CustomEmptyContentTemplateDirective } from '@alfresco/adf-core';
+import { CustomEmptyContentTemplateDirective, EmptyContentComponent } from '@alfresco/adf-core';
-import {
+import { AfterContentInit, Component, ContentChild, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
-    AfterContentInit,
-    Component,
-    ContentChild,
-    EventEmitter,
-    Input,
-    OnInit,
-    Output,
-    ViewEncapsulation
-} from '@angular/core';
 import { Observable, of, Subject } from 'rxjs';
 import { AppsProcessCloudService } from '../services/apps-process-cloud.service';
 import { ApplicationInstanceModel } from '../models/application-instance.model';
 import { catchError } from 'rxjs/operators';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatLineModule } from '@angular/material/core';
+import { MatListModule } from '@angular/material/list';
+import { AppDetailsCloudComponent } from './app-details-cloud.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 export const LAYOUT_LIST: string = 'LIST';
 export const LAYOUT_GRID: string = 'GRID';
@@ -37,6 +35,17 @@ export const RUNNING_STATUS: string = 'RUNNING';
 
 @Component({
     selector: 'adf-cloud-app-list',
+    standalone: true,
+    imports: [
+        CommonModule,
+        MatIconModule,
+        MatLineModule,
+        MatListModule,
+        AppDetailsCloudComponent,
+        TranslateModule,
+        EmptyContentComponent,
+        MatProgressSpinnerModule
+    ],
     templateUrl: './app-list-cloud.component.html',
     styleUrls: ['./app-list-cloud.component.scss'],
     encapsulation: ViewEncapsulation.None
@@ -60,20 +69,19 @@ export class AppListCloudComponent implements OnInit, AfterContentInit {
     loadingError$ = new Subject<boolean>();
     hasEmptyCustomContentTemplate: boolean = false;
 
-    constructor(private appsProcessCloudService: AppsProcessCloudService) { }
+    constructor(private appsProcessCloudService: AppsProcessCloudService) {}
 
     ngOnInit() {
         if (!this.isValidType()) {
             this.setDefaultLayoutType();
         }
 
-        this.apps$ = this.appsProcessCloudService.getDeployedApplicationsByStatus(RUNNING_STATUS)
+        this.apps$ = this.appsProcessCloudService.getDeployedApplicationsByStatus(RUNNING_STATUS).pipe(
-            .pipe(
+            catchError(() => {
-                catchError(() => {
+                this.loadingError$.next(true);
-                    this.loadingError$.next(true);
+                return of();
-                    return of();
+            })
-                })
+        );
-            );
     }
 
     ngAfterContentInit() {

lib/process-services-cloud/src/lib/process-services-cloud.module.ts

@@ -17,7 +17,7 @@
 
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CoreModule, FormRenderingService, provideTranslations } from '@alfresco/adf-core';
-import { AppListCloudModule } from './app/app-list-cloud.module';
+import { APP_LIST_CLOUD_DIRECTIVES } from './app/app-list-cloud.module';
 import { TaskCloudModule } from './task/task-cloud.module';
 import { ProcessCloudModule } from './process/process-cloud.module';
 import { GroupCloudModule } from './group/group-cloud.module';
@@ -40,7 +40,7 @@ import { RichTextEditorModule } from './rich-text-editor/rich-text-editor.module
 @NgModule({
     imports: [
         CoreModule,
-        AppListCloudModule,
+        ...APP_LIST_CLOUD_DIRECTIVES,
         ProcessCloudModule,
         TaskCloudModule,
         GroupCloudModule,
@@ -51,11 +51,9 @@ import { RichTextEditorModule } from './rich-text-editor/rich-text-editor.module
         ApolloModule,
         RichTextEditorModule
     ],
-    providers: [
+    providers: [provideTranslations('adf-process-services-cloud', 'assets/adf-process-services-cloud')],
-        provideTranslations('adf-process-services-cloud', 'assets/adf-process-services-cloud')
-    ],
     exports: [
-        AppListCloudModule,
+        ...APP_LIST_CLOUD_DIRECTIVES,
         ProcessCloudModule,
         TaskCloudModule,
         GroupCloudModule,