Use local default image (#87)

* feat: use local default image

* feat: use local default image

* fix: tests

package.json

@@ -46,16 +46,15 @@
     "@angular/platform-browser-dynamic": "15.2.7",
     "@angular/router": "15.2.7",
     "@ngneat/error-tailor": "^2.2.0",
-    "@ngneat/falso": "^6.4.0",
+    "@ngneat/falso": "^7.2.0",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
-    "@onecx/accelerator": "^4.5.1",
-    "@onecx/integration-interface": "^4.9.0",
-    "@onecx/keycloak-auth": "^4.9.0",
-    "@onecx/portal-integration-angular": "^4.9.0",
-    "@onecx/portal-layout-styles": "^4.9.0",
+    "@onecx/accelerator": "^4.11.0",
+    "@onecx/integration-interface": "^4.11.0",
+    "@onecx/keycloak-auth": "^4.11.0",
+    "@onecx/portal-integration-angular": "^4.11.0",
+    "@onecx/portal-layout-styles": "^4.11.0",
     "file-saver": "^2.0.5",
-    "i18n-iso-countries": "^7.10.0",
     "ngx-color": "^8.0.3",
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
@@ -87,7 +86,7 @@
     "@storybook/angular": "7.0.4",
     "@storybook/core-server": "7.6.17",
     "@svgr/webpack": "^7.0.0",
-    "@swc-node/register": "^1.8.0",
+    "@swc-node/register": "^1.9.0",
     "@swc/cli": "~0.1.63",
     "@swc/core": "^1.3.56",
     "@swc/helpers": "0.5.1",
@@ -103,7 +102,7 @@
     "eslint-config-prettier": "8.8.0",
     "eslint-plugin-cypress": "^2.13.3",
     "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-storybook": "^0.6.12",
     "husky": "^8.0.3",

src/_mixins.scss

@@ -78,7 +78,6 @@
     .data-view-control * {
       color: var(--emphasis-medium);
     }
-    // correction for data-view-control component
     .data-view-control-border.p-dropdown {
       .p-inputtext {
         color: var(--emphasis-medium);

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

@@ -6,6 +6,7 @@ import { Router, ActivatedRoute } from '@angular/router'
 import { of, throwError } from 'rxjs'
 import { FormControl, FormGroup, Validators } from '@angular/forms'
 import { TranslateTestingModule } from 'ngx-translate-testing'
+import { TranslateService } from '@ngx-translate/core'
 
 import { UserService } from '@onecx/portal-integration-angular'
 import { AppAbstract, AppType, AppSearchComponent, AppSearchCriteria } from './app-search.component'
@@ -120,6 +121,37 @@ describe('AppSearchComponent', () => {
     expect(component).toBeTruthy()
   })
 
+  xit('should prepare dialog translations', async () => {
+    const translateService = TestBed.inject(TranslateService)
+    const actionsTranslations = {
+      'ACTIONS.NAVIGATION.BACK': 'back',
+      'ACTIONS.NAVIGATION.BACK.TOOLTIP': 'backTooltip',
+      'ACTIONS.CREATE.MS.LABEL': 'msLabel',
+      'ACTIONS.CREATE.MFE.LABEL': 'mfeLabel',
+      'ACTIONS.CREATE.APP.TOOLTIP': 'appTooltip'
+    }
+    const dialogTranslations = {
+      'ACTIONS.DATAVIEW.FILTER_OF': 'searchFilterOf',
+      'APP.APP_ID': 'appId',
+      'APP.APP_TYPE': 'appType',
+      'APP.PRODUCT_NAME': 'productName'
+    }
+    spyOn(translateService, 'get').and.returnValues(of(actionsTranslations), of(dialogTranslations))
+
+    await component.ngOnInit()
+
+    expect(component.dataViewControlsTranslations).toEqual({
+      filterInputTooltip:
+        dialogTranslations['ACTIONS.DATAVIEW.FILTER_OF'] +
+        ': ' +
+        dialogTranslations['APP.APP_ID'] +
+        ', ' +
+        dialogTranslations['APP.APP_TYPE'] +
+        ', ' +
+        dialogTranslations['APP.PRODUCT_NAME']
+    })
+  })
+
   it('should call onBack when actionCallback is executed', () => {
     spyOn(component, 'onBack')
 

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

@@ -241,43 +241,22 @@ export class AppSearchComponent implements OnInit, OnDestroy {
         })
       )
   }
-  private prepareDialogTranslations(): void {
-    this.translate
-      .get([
-        'APP.APP_ID',
-        'APP.APP_TYPE',
-        'APP.PRODUCT_NAME',
-        'ACTIONS.DATAVIEW.VIEW_MODE_GRID',
-        'ACTIONS.DATAVIEW.VIEW_MODE_LIST',
-        'ACTIONS.DATAVIEW.VIEW_MODE_TABLE',
-        'ACTIONS.DATAVIEW.SORT_BY',
-        'ACTIONS.DATAVIEW.FILTER',
-        'ACTIONS.DATAVIEW.FILTER_OF',
-        'ACTIONS.DATAVIEW.SORT_DIRECTION_ASC',
-        'ACTIONS.DATAVIEW.SORT_DIRECTION_DESC'
-      ])
-      .subscribe((data) => {
+
+  public prepareDialogTranslations(): void {
+    this.translate.get(['APP.APP_ID', 'APP.APP_TYPE', 'APP.PRODUCT_NAME', 'ACTIONS.DATAVIEW.FILTER_OF']).pipe(
+      map((data) => {
         this.dataViewControlsTranslations = {
-          sortDropdownPlaceholder: data['ACTIONS.DATAVIEW.SORT_BY'],
-          filterInputPlaceholder: data['ACTIONS.DATAVIEW.FILTER'],
           filterInputTooltip:
             data['ACTIONS.DATAVIEW.FILTER_OF'] +
+            ': ' +
             data['APP.APP_ID'] +
             ', ' +
             data['APP.APP_TYPE'] +
             ', ' +
-            data['APP.PRODUCT_NAME'],
-          viewModeToggleTooltips: {
-            grid: data['ACTIONS.DATAVIEW.VIEW_MODE_GRID'],
-            list: data['ACTIONS.DATAVIEW.VIEW_MODE_LIST']
-          },
-          sortOrderTooltips: {
-            ascending: data['ACTIONS.DATAVIEW.SORT_DIRECTION_ASC'],
-            descending: data['ACTIONS.DATAVIEW.SORT_DIRECTION_DESC']
-          },
-          sortDropdownTooltip: data['ACTIONS.DATAVIEW.SORT_BY']
+            data['APP.PRODUCT_NAME']
         }
       })
+    )
   }
 
   /**

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

@@ -123,10 +123,10 @@
                 [small]="false"
               ></app-image-container>
             </div>
-            <div class="h-3rem flex flex-column justify-content-between gap-1 lg:gap-2 mt-0 mb-1 text-center">
+            <div class="h-3rem flex flex-column justify-content-between gap-1 text-center">
               <div
                 [id]="'product_search_data_grid_' + idx + '_product_display_name'"
-                class="font-bold text-xl"
+                class="mt-2 font-bold text-lg"
                 [title]="('PRODUCT.DISPLAY_NAME' | translate) + ': ' + limitText(product.displayName, 100)"
               >
                 {{ limitText(product.displayName, 20) }}

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

@@ -1,6 +1,9 @@
 import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'
-import { prepareUrl } from 'src/app/shared/utils'
+import { map } from 'rxjs'
+
+import { prepareUrl, prepareUrlPath } from 'src/app/shared/utils'
 import { environment } from 'src/environments/environment'
+import { AppStateService } from '@onecx/portal-integration-angular'
 
 @Component({
   selector: 'app-image-container',
@@ -12,10 +15,23 @@ export class ImageContainerComponent implements OnChanges {
   @Input() public imageUrl: string | undefined
   @Input() public small = false
 
-  public defaultImageUrl = environment.DEFAULT_LOGO_URL
+  public defaultImageUrl = ''
   public displayPlaceHolder = false
 
-  public onImageError() {
+  prepareUrl = prepareUrl
+  prepareUrlPath = prepareUrlPath
+
+  constructor(private appState: AppStateService) {
+    appState.currentMfe$
+      .pipe(
+        map((mfe) => {
+          this.defaultImageUrl = this.prepareUrlPath(mfe.remoteBaseUrl, environment.DEFAULT_LOGO_URL)
+        })
+      )
+      .subscribe()
+  }
+
+  public onImageError(): void {
     this.displayPlaceHolder = true
   }
 

src/app/shared/utils.spec.ts

@@ -5,7 +5,9 @@ import {
   dropDownSortItemsByLabel,
   dropDownGetLabelByValue,
   sortByLocale,
-  convertToUniqueStringArray
+  convertToUniqueStringArray,
+  prepareUrl,
+  prepareUrlPath
 } from './utils'
 
 describe('utils', () => {
@@ -82,4 +84,43 @@ describe('utils', () => {
       expect(sortedArray[0]).toEqual('a')
     })
   })
+
+  describe('prepareUrl', () => {
+    it('should prepare internal url', () => {
+      const url = 'url'
+
+      const preparedUrl = prepareUrl(url) ?? ''
+
+      expect(preparedUrl).toEqual('bff/url')
+    })
+  })
+
+  describe('prepareUrl', () => {
+    it('should prepare external url', () => {
+      const url = 'http://url'
+
+      const preparedUrl = prepareUrl(url) ?? ''
+
+      expect(preparedUrl).toEqual(url)
+    })
+  })
+
+  describe('prepareUrlPath', () => {
+    it('should prepare urls', () => {
+      const url = 'http://url'
+      const path = 'path'
+
+      let urlPath = prepareUrlPath(url, path)
+
+      expect(urlPath).toEqual(url + '/' + path)
+
+      urlPath = prepareUrlPath(url)
+
+      expect(urlPath).toEqual(urlPath)
+
+      urlPath = prepareUrlPath()
+
+      expect(urlPath).toEqual('')
+    })
+  })
 })

src/app/shared/utils.ts

@@ -17,6 +17,11 @@ export function prepareUrl(url: string | undefined): string | undefined {
     return url
   }
 }
+export function prepareUrlPath(url?: string, path?: string): string {
+  if (url && path) return Location.joinWithSlash(url, path)
+  else if (url) return url
+  else return ''
+}
 
 export function dropDownSortItemsByLabel(a: SelectItem, b: SelectItem): number {
   return (a.label ? (a.label as string).toUpperCase() : '').localeCompare(

src/environments/environment.prod.ts

@@ -2,5 +2,5 @@ export const environment = {
   production: true,
   BASE_PATH: '/bff',
   apiPrefix: 'bff',
-  DEFAULT_LOGO_URL: 'http://pragmaticscrum.info/wp-content/uploads/2016/06/t1.jpg'
+  DEFAULT_LOGO_URL: 'assets/images/product.jpg'
 }

src/environments/environment.ts

@@ -9,5 +9,5 @@ export const environment = {
   KEYCLOAK_REALM: 'OneCX',
   skipRemoteConfigLoad: true,
   apiPrefix: 'bff',
-  DEFAULT_LOGO_URL: 'http://pragmaticscrum.info/wp-content/uploads/2016/06/t1.jpg'
+  DEFAULT_LOGO_URL: './assets/images/product.jpg'
 }