Merged in bugfix/sprint-16-alex (pull request #1250)

[HIMA-888] Artikel suche: article card font resize if more than one line of the article title implementation

apps/sales/src/app/modules/product/components/product-card/product-card.component.html

@@ -20,7 +20,7 @@
           <lib-icon name="Empfehlungen_Icon"></lib-icon>
         </div>
         <div>
-          <span>{{ product.title }}</span>
+          <span #titleLine>{{ product.title }}</span>
         </div>
       </div>
       <div class="price align-right">

apps/sales/src/app/modules/product/components/product-card/product-card.component.scss

@@ -59,6 +59,11 @@
   font-size: 26px;
   font-weight: bold;
   display: inline-block;
+
+  &.multi-line {
+    font-size: 22px;
+    transition: font-size .05s ease-out;
+  }
 }
 
 .price span {

apps/sales/src/app/modules/product/components/product-card/product-card.component.ts

@@ -1,28 +1,39 @@
-import { Component, OnInit, Input, OnDestroy, Output, EventEmitter, ElementRef } from '@angular/core';
-import { Router } from '@angular/router';
 import { Subject } from 'rxjs';
+import {
+  Component,
+  OnInit,
+  Input,
+  OnDestroy,
+  Output,
+  EventEmitter,
+  ElementRef,
+  Renderer2,
+  AfterViewChecked,
+  ViewChild
+} from '@angular/core';
+import { Router } from '@angular/router';
 import { Store } from '@ngxs/store';
 import { AddSelectedProduct } from '../../../../core/store/actions/product.actions';
 import { ChangeCurrentRoute } from '../../../../core/store/actions/process.actions';
 import { SharedSelectors } from '../../../../core/store/selectors/shared.selectors';
-
-import { AddBreadcrumb } from 'apps/sales/src/app/core/store/actions/breadcrumb.actions';
 import { Product } from '../../../../core/models/product.model';
-import { ProductService } from 'apps/sales/src/app/core/services/product.service';
+import { AddBreadcrumb } from 'apps/sales/src/app/core/store/actions/breadcrumb.actions';
 
 @Component({
   selector: 'app-product-card',
   templateUrl: './product-card.component.html',
   styleUrls: ['./product-card.component.scss']
 })
-export class ProductCardComponent implements OnInit, OnDestroy {
+export class ProductCardComponent implements OnInit, OnDestroy, AfterViewChecked {
   private _product: Product;
   @Input() processId: number;
   @Input() index: number;
+
   @Input()
   get product() {
     return this._product;
   }
+
   set product(val) {
     if (val !== this.product) {
       this._product = val;
@@ -34,6 +45,7 @@ export class ProductCardComponent implements OnInit, OnDestroy {
       this.splitAuthors(val.author);
     }
   }
+
   @Output() authorFilter = new EventEmitter();
   @Output() saveProductPosition = new EventEmitter<number>();
 
@@ -42,11 +54,18 @@ export class ProductCardComponent implements OnInit, OnDestroy {
   }
 
   publicationDate: string;
-  productTypeIcon: string;
   authors: string[];
   destroy$ = new Subject();
 
-  constructor(public elementRef: ElementRef, private router: Router, private store: Store, private productService: ProductService) {}
+  @ViewChild('titleLine') titleLine: ElementRef;
+  private clearAfterCheckedTimeout;
+
+  constructor(
+    public elementRef: ElementRef,
+    private router: Router,
+    private store: Store,
+    private renderer: Renderer2
+  ) {}
 
   ngOnInit() {}
 
@@ -54,6 +73,25 @@ export class ProductCardComponent implements OnInit, OnDestroy {
     this.destroy$.next();
   }
 
+  ngAfterViewChecked(): void {
+    clearTimeout(this.clearAfterCheckedTimeout);
+    this.clearAfterCheckedTimeout = setTimeout(() => {
+      if (!this.titleLine) {
+        return;
+      }
+      const line = this.titleLine.nativeElement;
+      const d = line.dataset.product;
+      const p = `${this._product.id}`;
+      if (d !== p) {
+        this.renderer.setAttribute(line, 'data-product', `${this._product.id}`);
+        this.renderer.removeClass(line, 'multi-line');
+        if (line.offsetHeight > 40) {
+          this.renderer.addClass(line, 'multi-line');
+        }
+      }
+    }, 50);
+  }
+
   productDetails(product: Product, element: HTMLElement, event: any) {
     if ((event.target.id as string).startsWith('author')) {
       return;
@@ -95,7 +133,7 @@ export class ProductCardComponent implements OnInit, OnDestroy {
     if (!!date) {
       try {
         const dateToFormat = new Date(date);
-        const monthName = dateToFormat.toLocaleString('de', { month: 'long' });
+        const monthName = dateToFormat.toLocaleString('de', {month: 'long'});
         return `${monthName} ${dateToFormat.getFullYear()}`;
       } catch (error) {
         console.error(error);