Merged PR 1314: #3268 Artikelformat wird überall auf undefined geprüft. Fehlendes FormatIcon...

#3268 Artikelformat wird überall auf undefined geprüft. Fehlendes FormatIcon in PurchasingOptions implementiert

Related work items: #3268

apps/page/catalog/src/lib/article-details/article-details.component.html

@@ -36,7 +36,7 @@
 
           <div class="row">
             <div>
-              <div class="format">
+              <div class="format" *ngIf="item?.product?.format && item?.product?.formatDetail">
                 <img
                   *ngIf="item?.product?.format !== '--'"
                   class="format-icon"

apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.html

@@ -39,7 +39,7 @@
     {{ item?.catalogAvailability?.ssc }} - {{ item?.catalogAvailability?.sscText }}
   </div>
 
-  <div class="item-format">
+  <div class="item-format" *ngIf="item?.product?.format && item?.product?.formatDetail">
     <img
       *ngIf="item?.product?.format !== '--'"
       loading="lazy"

apps/page/checkout/src/lib/checkout-review/shopping-cart-item/shopping-cart-item.component.html

@@ -28,7 +28,7 @@
   }}</a>
 </div>
 
-<div class="item-format">
+<div class="item-format" *ngIf="item?.product?.format && item?.product?.formatDetail">
   <img
     *ngIf="item?.product?.format !== '--'"
     src="assets/images/Icon_{{ item?.product?.format }}.svg"

apps/page/checkout/src/lib/checkout-summary/checkout-summary.component.html

@@ -70,10 +70,12 @@
 
         <div class="product-details">
           <div class="info-row">
-            <img class="order-icon" [src]="'/assets/images/Icon_' + order?.product?.format + '.svg'" alt="book-icon" />
-            <span class="format">{{ order.product?.format }}</span>
+            <ng-container *ngIf="order?.product?.format && order?.product?.formatDetail">
+              <img class="order-icon" [src]="'/assets/images/Icon_' + order?.product?.format + '.svg'" alt="book-icon" />
+              <span class="format">{{ order.product?.formatDetail }}</span>
+            </ng-container>
             <ng-container *ngIf="order?.product?.contributors">
-              <span class="separator">|</span>
+              <span class="separator" *ngIf="order?.product?.format && order?.product?.formatDetail">|</span>
               <span class="contributors">{{ order?.product?.contributors }}</span>
             </ng-container>
           </div>

apps/page/checkout/src/lib/modals/purchasing-options-list-modal/purchasing-options-list-item/purchasing-options-list-item.component.html

@@ -23,7 +23,7 @@
   </div>
 </ng-container>
 
-<div class="item-format">
+<div class="item-format" *ngIf="item?.product?.format && item?.product?.formatDetail">
   <img
     *ngIf="item?.product?.format !== '--'"
     src="assets/images/Icon_{{ item?.product?.format }}.svg"

apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component.html

@@ -39,7 +39,15 @@
         <h6 class="title">{{ item?.product?.contributors }} - {{ item?.product?.name }}</h6>
         <strong class="can-add-error" *ngIf="canAddError$ | async; let canAddError">{{ canAddError }}</strong>
         <div class="grow"></div>
-        <div class="format">{{ item?.product?.formatDetail }}</div>
+        <div class="format" *ngIf="item?.product?.format && item?.product?.formatDetail">
+          <img
+            *ngIf="item?.product?.format !== '--'"
+            src="assets/images/Icon_{{ item?.product?.format }}.svg"
+            [alt]="item?.product?.formatDetail"
+          />
+          {{ item?.product?.formatDetail }}
+        </div>
+
         <div class="price">
           {{ price$ | async | currency: item?.catalogAvailability?.price?.value?.currency || 'EUR':'code' }}
         </div>

apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component.scss

@@ -70,6 +70,14 @@ img.thumbnail {
   }
 }
 
+.format {
+  @apply flex flex-row items-center whitespace-nowrap;
+
+  img {
+    @apply mr-2;
+  }
+}
+
 .quantity {
   @apply self-end flex flex-col justify-end;
 

apps/page/remission/src/lib/modals/add-product-modal/add-product-modal.component.html

@@ -14,7 +14,7 @@
     <div class="grid grid-flow-row gap-1">
       <div class="flex flex-row">
         <div class="w-32">Format</div>
-        <div data-name="format" class="flex-grow">
+        <div data-name="format" class="flex-grow" *ngIf="item?.product?.format && item?.product?.formatDetail">
           <img class="inline" src="/assets/images/Icon_{{ item.product.format }}.svg" [alt]="item.product.formatDetail" />
           <span class="ml-1 font-bold">{{ item.product.formatDetail }}</span>
         </div>

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

@@ -34,13 +34,11 @@
   </div>
 
   <div class="grid grid-flow-row gap-1 w-48">
-    <div class="overflow-hidden overflow-ellipsis whitespace-nowrap" *ngIf="!!item.formatDetail">
-      <img
-        *ngIf="!!item.dto.product.format"
-        class="inline"
-        src="/assets/images/Icon_{{ item.dto.product.format }}.svg"
-        [alt]="item.formatDetail"
-      />
+    <div
+      class="overflow-hidden overflow-ellipsis whitespace-nowrap"
+      *ngIf="!!item.format && !!item.formatDetail && item.format !== 'UNKNOWN'"
+    >
+      <img class="inline" src="/assets/images/Icon_{{ item.dto.product.format }}.svg" [alt]="item.formatDetail" />
       <span class="ml-1 font-bold">{{ item.formatDetail }}</span>
     </div>
     <div class="font-bold">

apps/shared/goods-in-out/src/lib/goods-in-out-order-group/goods-in-out-order-group-item.component.html

@@ -23,7 +23,10 @@
     </div>
     <div class="item-data-wrapper">
       <div class="item-data">
-        <div class="item-format">
+        <div
+          class="item-format"
+          [class.invisible]="!item?.product?.format || !item?.product?.formatDetail || item?.product?.format === 'UNKNOWN'"
+        >
           <img
             class="format-icon"
             *ngIf="item?.product?.format && item?.product?.format !== 'UNKNOWN'"