#4750 Code improvements, Check if Icon gets loaded

apps/page/remission/src/lib/remission-list/remission-list-item/remission-list-item.component.html

@@ -30,9 +30,15 @@
   </div>
 
   <div class="grid grid-flow-row gap-1 w-48">
-    <div class="overflow-hidden overflow-ellipsis whitespace-nowrap" *ngIf="checkFormatAvailable()">
-      <img *ngIf="iconExists()" class="inline" [src]="formatIconUrl" [alt]="item.formatDetail" />
-      <span class="ml-1 font-bold format-detail">{{ item.formatDetail }}</span>
+    <div class="overflow-hidden overflow-ellipsis whitespace-nowrap" *ngIf="formatAvailable">
+      <img
+        *ngIf="formatIconAvailable"
+        class="inline mr-1"
+        [src]="formatIconUrl"
+        [alt]="item.formatDetail"
+        (error)="formatIconAvailable = false"
+      />
+      <span class="font-bold format-detail">{{ item.formatDetail }}</span>
     </div>
     <div class="font-bold ean">
       {{ item.ean }}

apps/page/remission/src/lib/remission-list/remission-list-item/remission-list-item.component.ts

@@ -15,7 +15,6 @@ import { first, takeUntil } from 'rxjs/operators';
 import { AddProductToShippingDocumentModalComponent } from '../../modals/add-product-to-shipping-document-modal/add-product-to-shipping-document-modal.component';
 import { RemissionListComponentStore } from '../remission-list.component-store';
 import { RemissionListComponent } from '../remission-list.component';
-import { HttpClient } from '@angular/common/http';
 
 @Component({
   selector: 'page-remission-list-item',
@@ -60,11 +59,16 @@ export class RemissionListItemComponent implements OnDestroy {
     return `/assets/images/Icon_${this.item.dto.product.format}.svg`;
   }
 
+  get formatAvailable() {
+    return !!this.item.format && !!this.item.formatDetail && this.item.format !== 'UNKNOWN';
+  }
+
+  formatIconAvailable: boolean = true;
+
   constructor(
     private _modal: UiModalService,
     private _remissionService: DomainRemissionService,
     private _store: RemissionListComponentStore,
-    private readonly _http: HttpClient,
     @Host() private _listComponent: RemissionListComponent
   ) {}
 
@@ -73,19 +77,6 @@ export class RemissionListItemComponent implements OnDestroy {
     this._onDestroy$.complete();
   }
 
-  checkFormatAvailable() {
-    return !!this.item.format && !!this.item.formatDetail && this.item.format !== 'UNKNOWN';
-  }
-
-  async iconExists(): Promise<boolean> {
-    try {
-      const response = await this._http.head(this.formatIconUrl, { observe: 'response' }).pipe(first()).toPromise();
-      return response?.status === 200;
-    } catch {
-      return false;
-    }
-  }
-
   addProductToShippingDocument() {
     const modal = this._modal.open({
       content: AddProductToShippingDocumentModalComponent,