Feature/marp 1058 market website remove using of images url from GitH…

…ub in product detail (#159)
axonivy-market · Sep 19, 2024 · 8e5bb1b · 8e5bb1b
1 parent f0eb9bc
commit 8e5bb1b
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 26 deletions.
diff --git a/marketplace-ui/src/app/modules/product/product-card/product-card.component.html b/marketplace-ui/src/app/modules/product/product-card/product-card.component.html
@@ -6,7 +6,8 @@
       class="card-img-top rounded"
       width="70"
       height="70"
-      [ngSrc]="product | logo"
+      [ngSrc]="logoUrl"
+      (error)="onLogoError()"
       [alt]="
         product.names | multilingualism: languageService.selectedLanguage()
       "

diff --git a/marketplace-ui/src/app/modules/product/product-card/product-card.component.ts b/marketplace-ui/src/app/modules/product/product-card/product-card.component.ts
@@ -4,14 +4,14 @@ import { TranslateModule } from '@ngx-translate/core';
 import { LanguageService } from '../../../core/services/language/language.service';
 import { ThemeService } from '../../../core/services/theme/theme.service';
 import { Product } from '../../../shared/models/product.model';
-import { ProductLogoPipe } from '../../../shared/pipes/logo.pipe';
 import { MultilingualismPipe } from '../../../shared/pipes/multilingualism.pipe';
 import { ProductComponent } from '../product.component';
+import { DEFAULT_IMAGE_URL } from '../../../shared/constants/common.constant';
 
 @Component({
   selector: 'app-product-card',
   standalone: true,
-  imports: [CommonModule, ProductLogoPipe, MultilingualismPipe, TranslateModule, NgOptimizedImage],
+  imports: [CommonModule, MultilingualismPipe, TranslateModule, NgOptimizedImage],
   templateUrl: './product-card.component.html',
   styleUrl: './product-card.component.scss'
 })
@@ -21,4 +21,13 @@ export class ProductCardComponent {
   isShowInRESTClientEditor = inject(ProductComponent).isRESTClient();
 
   @Input() product!: Product;
+  logoUrl = DEFAULT_IMAGE_URL;
+
+  ngOnInit(): void {
+    this.logoUrl = this.product.logoUrl;
+  }
+
+  onLogoError() {
+    this.logoUrl = DEFAULT_IMAGE_URL;
+  }
 }
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html
@@ -20,13 +20,15 @@
           <div class="d-flex">
             <div class="logo__image-container">
               <img
+                fill
                 [lang]="languageService.selectedLanguage()"
                 class="logo__image"
-                [src]="productDetail().logoUrl"
+                [ngSrc]="logoUrl"
+                (error)="onLogoError()"
                 [alt]="
                   productDetail().names
                     | multilingualism: languageService.selectedLanguage()
-                " />
+                "/>
             </div>
             <h1
               [lang]="languageService.selectedLanguage()"

diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.scss b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.scss
@@ -4,11 +4,13 @@
 }
 
 .logo__image {
-  width: 70px;
+  object-fit: contain;
 }
 
 .logo__image-container {
   margin-right: 20px;
+  width: 70px;
+  position: relative !important;
 }
 
 .link-to-main {
@@ -226,6 +228,7 @@ hr {
 
   .logo__image {
     width: 41px;
+    object-fit: contain;
   }
 
   .product-analysis {

diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts
@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 import {
   Component,
   ElementRef,
@@ -19,6 +19,7 @@ import { LanguageService } from '../../../core/services/language/language.servic
 import { ThemeService } from '../../../core/services/theme/theme.service';
 import { CommonDropdownComponent } from '../../../shared/components/common-dropdown/common-dropdown.component';
 import {
+  DEFAULT_IMAGE_URL,
   PRODUCT_DETAIL_TABS,
   VERSION
 } from '../../../shared/constants/common.constant';
@@ -72,7 +73,8 @@ const DEFAULT_ACTIVE_TAB = 'description';
     ProductInstallationCountActionComponent,
     ProductTypeIconPipe,
     MissingReadmeContentPipe,
-    CommonDropdownComponent
+    CommonDropdownComponent,
+    NgOptimizedImage
   ],
   providers: [ProductService, MarkdownService],
   templateUrl: './product-detail.component.html',
@@ -113,7 +115,7 @@ export class ProductDetailComponent {
   showPopup!: boolean;
   isMobileMode = signal<boolean>(false);
   installationCount = 0;
-
+  logoUrl = DEFAULT_IMAGE_URL;
   @HostListener('window:popstate', ['$event'])
   onPopState() {
     this.activeTab = window.location.hash.split('#tab-')[1];
@@ -147,6 +149,7 @@ export class ProductDetailComponent {
         this.installationCount = productDetail.installationCount;
         this.handleProductContentVersion();
         this.updateProductDetailActionType(productDetail);
+        this.logoUrl = productDetail.logoUrl;
       });
 
       this.productFeedbackService.initFeedbacks();
@@ -155,6 +158,10 @@ export class ProductDetailComponent {
     this.updateDropdownSelection();
   }
 
+  onLogoError() {
+    this.logoUrl = DEFAULT_IMAGE_URL;
+  }
+
   handleProductContentVersion() {
     if (this.isEmptyProductContent()) {
       return;

diff --git a/marketplace-ui/src/app/shared/constants/common.constant.ts b/marketplace-ui/src/app/shared/constants/common.constant.ts
@@ -204,4 +204,6 @@ export const ERROR_CODES = [
   UNDEFINED_ERROR_CODE,
   NOT_FOUND_ERROR_CODE,
   INTERNAL_SERVER_ERROR_CODE
-];
+];
+
+export const DEFAULT_IMAGE_URL = '/assets/images/misc/axonivy-logo-round.png';
diff --git a/marketplace-ui/src/app/shared/pipes/logo.pipe.ts b/marketplace-ui/src/app/shared/pipes/logo.pipe.ts