[HIMA-12] working with product details

src/app/components/product-details/product-details.component.html

@@ -3,7 +3,23 @@
     <div class="product-image">
       <img [src]="product.productIcon$ | async">
     </div>
-    <div class="product-info"></div>
+    <div class="product-info">
+      <div class="autor standart-text">
+        <span>{{product.author}}</span>
+      </div>
+      <div class="title">
+        <span>{{product.title}}</span>
+      </div>
+      <div class="languages standart-text">
+        <span>{{product.locale}}</span>
+      </div>
+      <div class="ean standart-text">
+        <span>{{product.eanTag}}</span>
+      </div>
+      <div class="publication-format-pages">
+        
+      </div>
+    </div>
     <div class="product-staus-info"></div>
   </div>
   <div class="product-details">

src/app/components/product-details/product-details.component.scss

@@ -25,10 +25,24 @@
 
 .details span {
     font-size: 16px;
-    color: #000000;
     line-height: 21px;
 }
 
 .product-image img {
     width: 169px;
+}
+
+.product-info {
+    display: grid;
+    grid-template-columns: auto; 
+}
+
+.title span {
+    font-size: 26px;
+    font-weight: bold;
+}
+
+.standart-text {
+    font-size: 16px;
+    line-height: 21px;
 }

src/app/components/product-details/product-details.component.ts

@@ -17,8 +17,16 @@ export class ProductDetailsComponent implements OnInit {
   item: ItemDTO;
 
   readonly FULL_DESCRIPTION_LABEL = 'Klappentext';
+  readonly AUTOR = 'Autor';
+  readonly TITLE = 'Titel';
+
   product: {
+    author: string;
+    title: string;
     ean: string,
+    eanTag: string,
+    locale: string,
+    publicationDate: Date,
     productIcon$: Observable<string>,
     fullDescription: string
   };
@@ -39,14 +47,23 @@ export class ProductDetailsComponent implements OnInit {
   }
 
   productDetailMapper(item: ItemDTO) {
+    console.log(item);
     let fullDescription: string = null;
     let ean: string = null;
+    let eanTag: string = null;
     let productIcon$: Observable<string> = null;
+    let author: string;
+    let title: string;
+    let locale: string;
+    let publicationDate: Date;
 
     // product object mapping
     if (item.pr) {
       ean = item.pr.ean;
-      productIcon$ = this.catImageService.getImageUrl(ean);
+      eanTag = 'EAN ' + ean;
+      productIcon$ = this.catImageService.getImageUrl(ean, { width: 369, height: 475});
+      locale = item.pr.locale;
+      publicationDate = item.pr.publicationDate;
     }
 
     // text object mapping
@@ -54,8 +71,19 @@ export class ProductDetailsComponent implements OnInit {
       fullDescription = item.te.find(t => t.label === this.FULL_DESCRIPTION_LABEL).value;
     }
 
+    // specs object mapping
+    if (item.sp) {
+      author = item.sp.find(s => s.key === this.AUTOR).value;
+      title = item.sp.find(s => s.key === this.TITLE).value;
+    }
+
     return {
+      author: author,
+      title: title,
       ean: ean,
+      eanTag: eanTag,
+      locale: locale,
+      publicationDate: publicationDate,
       productIcon$: productIcon$,
       fullDescription: fullDescription
     };