fix: use observable in image container (#123)

package.json

@@ -49,12 +49,12 @@
     "@ngneat/falso": "^7.2.0",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
-    "@onecx/accelerator": "^4.20.2",
-    "@onecx/angular-accelerator": "^4.20.2",
-    "@onecx/integration-interface": "^4.20.2",
-    "@onecx/keycloak-auth": "^4.20.2",
-    "@onecx/portal-integration-angular": "^4.20.2",
-    "@onecx/portal-layout-styles": "^4.20.2",
+    "@onecx/accelerator": "^4.23.0",
+    "@onecx/angular-accelerator": "^4.23.0",
+    "@onecx/integration-interface": "^4.23.0",
+    "@onecx/keycloak-auth": "^4.23.0",
+    "@onecx/portal-integration-angular": "^4.23.0",
+    "@onecx/portal-layout-styles": "^4.23.0",
     "file-saver": "^2.0.5",
     "ngx-color": "^8.0.3",
     "primeflex": "^3.3.1",

src/app/product-store/app-search/app-search.component.html

@@ -71,7 +71,7 @@
       [value]="(apps$ | async) ?? []"
       [paginator]="true"
       [alwaysShowPaginator]="false"
-      [rowsPerPageOptions]="[10, 20, 50]"
+      [rowsPerPageOptions]="'grid' ? [24, 48, 96] : [10, 20, 50]"
       [rows]="viewMode === 'grid' ? 24 : 10"
       [layout]="viewMode"
       [emptyMessage]="'ACTIONS.SEARCH.NOT_FOUND' | translate"

src/app/product-store/product-search/product-search.component.html

@@ -42,7 +42,7 @@
       [value]="(products$ | async)?.stream!.sort(sortProductsByDisplayName)"
       [paginator]="true"
       [alwaysShowPaginator]="false"
-      [rowsPerPageOptions]="[10, 20, 50]"
+      [rowsPerPageOptions]="'grid' ? [12, 24, 60] : [10, 20, 50]"
       [rows]="viewMode === 'grid' ? 12 : 10"
       [layout]="viewMode"
       [emptyMessage]="'ACTIONS.SEARCH.NOT_FOUND' | translate"

src/app/product-store/product-search/product-search.component.ts

@@ -194,12 +194,8 @@ export class ProductSearchComponent implements OnInit {
   }
 
   public getLogoUrl(product: ProductAbstract | undefined): string | undefined {
-    if (!product) {
-      return undefined
-    }
-    if (product.imageUrl && product.imageUrl != '') {
-      return product.imageUrl
-    }
+    if (!product) return undefined
+    if (product.imageUrl && product.imageUrl != '') return product.imageUrl
     return bffImageUrl(this.imageApi.configuration.basePath, product.name, RefType.Logo)
   }
 }

src/app/product-store/slot-search/slot-search.component.html

@@ -38,7 +38,7 @@
       [value]="(slots$ | async)?.stream!.sort(sortSlotsByName)"
       [paginator]="true"
       [alwaysShowPaginator]="false"
-      [rowsPerPageOptions]="[10, 20, 50]"
+      [rowsPerPageOptions]="[12, 24, 60]"
       [rows]="12"
       [layout]="viewMode"
       [emptyMessage]="'ACTIONS.SEARCH.NOT_FOUND' | translate"

src/app/shared/image-container/image-container.component.html

@@ -1,17 +1,17 @@
 <img
-  [id]="id"
   *ngIf="!displayDefaultLogo"
+  [id]="id"
   [class]="'image-object image-' + (small ? 'sm' : 'lg') + ' sm:image-lg ' + (styleClass ? styleClass : '')"
   [ocxSrc]="displayImageUrl"
   (error)="onImageError()"
   [alt]="'DIALOG.LOGO.LABEL' | translate"
   [title]="title ? title : ('DIALOG.LOGO.LABEL' | translate)"
 />
 <img
-  [id]="id"
   *ngIf="displayDefaultLogo"
+  [id]="id"
   [class]="'image-object image-' + (small ? 'sm' : 'lg') + ' sm:image-lg ' + (styleClass ? styleClass : '')"
-  [src]="defaultImageUrl"
+  [src]="defaultImageUrl$ | async"
   [alt]="'DIALOG.LOGO.PLACEHOLDER' | translate"
   [title]="title ? title : ('DIALOG.LOGO.PLACEHOLDER' | translate)"
 />

src/app/shared/image-container/image-container.component.spec.ts

@@ -39,7 +39,6 @@ describe('ImageContainerComponent', () => {
 
   it('should create', () => {
     expect(component).toBeTruthy()
-    expect(component.defaultImageUrl).toEqual('/base/assets/images/logo.png')
   })
 
   describe('ngOnChanges', () => {

src/app/shared/image-container/image-container.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'
-import { map } from 'rxjs'
+import { Observable, map } from 'rxjs'
 
 import { AppStateService } from '@onecx/angular-integration-interface'
 
@@ -18,26 +18,24 @@ import { prepareUrlPath } from 'src/app/shared/utils'
   templateUrl: './image-container.component.html'
 })
 export class ImageContainerComponent implements OnChanges {
-  @Input() public id = ''
+  @Input() public id = 'image-container'
   @Input() public title: string | undefined
   @Input() public small = false
   @Input() public imageUrl: string | undefined
   @Input() public styleClass: string | undefined
 
   public displayImageUrl: string | undefined
-  public defaultImageUrl = ''
+  public defaultImageUrl$: Observable<string>
   public displayDefaultLogo = false
 
   prepareUrlPath = prepareUrlPath
 
   constructor(private appState: AppStateService) {
-    appState.currentMfe$
-      .pipe(
-        map((mfe) => {
-          this.defaultImageUrl = this.prepareUrlPath(mfe.remoteBaseUrl, environment.DEFAULT_LOGO_PATH)
-        })
-      )
-      .subscribe()
+    this.defaultImageUrl$ = appState.currentMfe$.pipe(
+      map((mfe) => {
+        return this.prepareUrlPath(mfe.remoteBaseUrl, environment.DEFAULT_LOGO_PATH)
+      })
+    )
   }
 
   public onImageError(): void {
@@ -46,8 +44,8 @@ export class ImageContainerComponent implements OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    this.displayDefaultLogo = false
     if (changes['imageUrl']) {
+      this.displayDefaultLogo = false
       if (this.imageUrl) this.displayImageUrl = this.imageUrl
       else this.displayDefaultLogo = true
     }