From fbdac3fff6aa9e8c2a830ac741b0550df86df4ef Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Wed, 18 Sep 2024 14:34:56 -0400 Subject: [PATCH] app list component --- .../src/lib/app/app-list-cloud.module.ts | 9 ++- .../app-details-cloud.component.spec.ts | 3 +- .../components/app-details-cloud.component.ts | 71 ++++++++++--------- .../app-list-cloud.component.spec.ts | 7 +- .../components/app-list-cloud.component.ts | 46 +++++++----- .../src/lib/process-services-cloud.module.ts | 10 ++- 6 files changed, 78 insertions(+), 68 deletions(-) diff --git a/lib/process-services-cloud/src/lib/app/app-list-cloud.module.ts b/lib/process-services-cloud/src/lib/app/app-list-cloud.module.ts index e7bac2f782..041dea66ef 100644 --- a/lib/process-services-cloud/src/lib/app/app-list-cloud.module.ts +++ b/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], - declarations: [AppListCloudComponent, AppDetailsCloudComponent], + imports: [AppListCloudComponent, AppDetailsCloudComponent], exports: [AppListCloudComponent, AppDetailsCloudComponent] }) export class AppListCloudModule {} diff --git a/lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.spec.ts index 2d366db307..fdb7f18c47 100644 --- a/lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.spec.ts +++ b/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; diff --git a/lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.ts b/lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.ts index 93493f96a4..bcf67d9466 100644 --- a/lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.ts +++ b/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', - templateUrl: './app-details-cloud.component.html', - styleUrls: ['./app-details-cloud.component.scss'], - encapsulation: ViewEncapsulation.None + selector: 'adf-cloud-app-details', + standalone: true, + imports: [CommonModule, MatCardModule, MatIconModule], + templateUrl: './app-details-cloud.component.html', + styleUrls: ['./app-details-cloud.component.scss'], + encapsulation: ViewEncapsulation.None }) - export class AppDetailsCloudComponent { + @Input() + applicationInstance: ApplicationInstanceModel; - @Input() - applicationInstance: ApplicationInstanceModel; + @Output() + selectedApp = new EventEmitter(); - @Output() - selectedApp = new EventEmitter(); + /** + * Pass the selected app as next + * + * @param app application model + */ + onSelectApp(app: ApplicationInstanceModel): void { + this.selectedApp.emit(app); + } - /** - * Pass the selected app as next - * - * @param app application model - */ - onSelectApp(app: ApplicationInstanceModel): void { - this.selectedApp.emit(app); - } + /** + * Get application instance theme + * + * @returns the name of the theme + */ + getTheme(): string { + return this.applicationInstance.theme || DEFAULT_APP_INSTANCE_THEME; + } - /** - * Get application instance theme - * - * @returns the name of the theme - */ - getTheme(): string { - return this.applicationInstance.theme || DEFAULT_APP_INSTANCE_THEME; - } - - /** - * Get application instance icon - * - * @returns the name of the icon - */ - getIcon(): string { - 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; + } } diff --git a/lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.spec.ts index 799dfb72d1..0a36a8678d 100644 --- a/lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.spec.ts +++ b/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: ` @@ -53,8 +57,7 @@ describe('AppListCloudComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - imports: [ProcessServiceCloudTestingModule], - declarations: [CustomEmptyAppListCloudTemplateComponent] + imports: [ProcessServiceCloudTestingModule, CustomEmptyAppListCloudTemplateComponent] }); fixture = TestBed.createComponent(AppListCloudComponent); component = fixture.componentInstance; diff --git a/lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.ts b/lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.ts index 402682a90c..64625884b2 100644 --- a/lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.ts +++ b/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 { - AfterContentInit, - Component, - ContentChild, - EventEmitter, - Input, - OnInit, - Output, - ViewEncapsulation -} from '@angular/core'; +import { CustomEmptyContentTemplateDirective, EmptyContentComponent } from '@alfresco/adf-core'; +import { 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(); hasEmptyCustomContentTemplate: boolean = false; - constructor(private appsProcessCloudService: AppsProcessCloudService) { } + constructor(private appsProcessCloudService: AppsProcessCloudService) {} ngOnInit() { if (!this.isValidType()) { this.setDefaultLayoutType(); } - this.apps$ = this.appsProcessCloudService.getDeployedApplicationsByStatus(RUNNING_STATUS) - .pipe( - catchError(() => { - this.loadingError$.next(true); - return of(); - }) - ); + this.apps$ = this.appsProcessCloudService.getDeployedApplicationsByStatus(RUNNING_STATUS).pipe( + catchError(() => { + this.loadingError$.next(true); + return of(); + }) + ); } ngAfterContentInit() { diff --git a/lib/process-services-cloud/src/lib/process-services-cloud.module.ts b/lib/process-services-cloud/src/lib/process-services-cloud.module.ts index 2bebb21b91..a8f78a14ad 100644 --- a/lib/process-services-cloud/src/lib/process-services-cloud.module.ts +++ b/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: [ - provideTranslations('adf-process-services-cloud', 'assets/adf-process-services-cloud') - ], + providers: [provideTranslations('adf-process-services-cloud', 'assets/adf-process-services-cloud')], exports: [ - AppListCloudModule, + ...APP_LIST_CLOUD_DIRECTIVES, ProcessCloudModule, TaskCloudModule, GroupCloudModule,