Merge remote-tracking branch 'origin/development' into feature/HIMA-50-create-address-change-screen

2025-12-31 09:37:15 +01:00 · 2019-02-11 08:22:47 +01:00
parent 8a52efb03f d0b499f501
commit 41e2100a05
40 changed files with 352 additions and 112 deletions
--- a/mocks/feed.mock.ts
+++ b/mocks/feed.mock.ts
@@ -6,11 +6,11 @@ import { FeedRecommandation } from 'src/app/core/models/feed-recommandation.mode

 export const feedMock: FeedCard[] = <FeedCard[]> [
    <FeedCard> {
-        id: 1,
+        id: '1',
        cardTitle: 'BESTSELLER',
        type: 'BOOK',
        books: <FeedBook> {
-            id: 1,
+            id: '1',
            firstBookAuthor: 'Michelle Obama',
            firstBookTitle: 'Becoming Meine Geschichte',
            firstBookType: 'B',
@@ -26,29 +26,29 @@ export const feedMock: FeedCard[] = <FeedCard[]> [
        }
    },
    <FeedCard> {
-        id: 2,
+        id: '2',
        cardTitle: 'EVENT',
        type: 'EVENT',
-        event: <FeedEvent> {
+        event: <FeedEvent[]> [{
            id: 1,
            title: 'Lesung Manfred Bomm',
            // tslint:disable-next-line:max-line-length
            content: 'Möchten Sie an der Lesung des Krimiautors Manfred Bomm „Himmelsfelsen“ teilnehmen? Die Lesung findet am Dienstag, den 11.12.18 in der Filliale am Stachus in unserem große…'
-        }
+        }]
    },
    <FeedCard> {
-        id: 3,
+        id: '3',
        cardTitle: 'NEWS',
        type: 'NEWS',
-        news: <FeedNews> {
+        news: <FeedNews[]> [{
            id: 1,
            title: 'Neueröffnung am Stachus in München',
            // tslint:disable-next-line:max-line-length
            content: 'Sie sind das erste Mal nach der Neueröffnung in unserem Store? Entdecken Sie unsere neue Lesewelten, sowie neue interessante Veranstaltungen b…'
-        }
+        }]
    },
    <FeedCard> {
-        id: 4,
+        id: '4',
        cardTitle: 'EMPFEHLUNG',
        type: 'REC',
        recommandation: <FeedRecommandation> {
@@ -59,11 +59,11 @@ export const feedMock: FeedCard[] = <FeedCard[]> [
        }
    },
    <FeedCard> {
-        id: 5,
+        id: '5',
        cardTitle: 'NEUERSCHEINUNG FANTASY',
        type: 'BOOK',
        books: <FeedBook> {
-            id: 1,
+            id: '1',
            firstBookAuthor: 'Joanne K. Rowling',
            firstBookTitle: 'Grindelwalds verbrechen',
            firstBookType: 'B',
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -105,7 +105,7 @@ export function _feedServiceEndpointProviderFactory(conf: ConfigService) {
      deps: [ConfigService]
    },
    // { provide: CatSearchService, useClass: CatSearchMockService },  // Uncomment if u want to use the CatSearchMockService
-    { provide: FeedService, useClass: FeedMockService } // Uncomment if u want to use the FeedMockService
+    // { provide: FeedService, useClass: FeedMockService } // Uncomment if u want to use the FeedMockService
  ],
  bootstrap: [AppComponent]
 })
--- a/src/app/components/article-search/article-search.component.ts
+++ b/src/app/components/article-search/article-search.component.ts
--- a/src/app/components/checkout/checkout.component.scss
+++ b/src/app/components/checkout/checkout.component.scss
@@ -345,7 +345,7 @@
        width: 13px;
        position: relative;
        top: 2px;
-        padding-right: 10px;
+        padding-right: 8px;
      }

      span {
@@ -359,7 +359,7 @@
      }

      &-delivery-info {
-        font-weight: bold;
+        font-weight: 600;
      }
    }

@@ -387,6 +387,7 @@

      .dropdown-selected-text {
        padding: 5px;
+        font-weight: 600;

        &-active {
          background-color: #E9EDF9;
--- a/src/app/components/menu/menu.component.html
+++ b/src/app/components/menu/menu.component.html
@@ -2,26 +2,34 @@
  <div class="menu-grid">
    <div class="menu-item-grid align-center" (click)="routeToMenu('/article-search', 'articlesearch')">
      <div>
-        <img class="menu-icon" *ngIf="router.url === '/article-search'; else articleSearchImageElse" src="/assets/images/Icon_Artikelsuche.svg">
+        <img class="menu-icon" *ngIf="router.url === '/article-search' ||
+        router.url.startsWith('/search-results') ||
+        router.url.startsWith('/product-details');
+         else articleSearchImageElse" src="/assets/images/Icon_Artikelsuche.svg">
        <ng-template #articleSearchImageElse>
          <img class="menu-icon" src="/assets/images/Icon_Artikelsuche_inactive.svg">
        </ng-template>
      </div>
-      <span *ngIf="router.url === '/article-search'; else articleSearchLabelElse" class="menu-item selected">Artikelsuche</span>
+      <span *ngIf="router.url === '/article-search' ||
+      router.url.startsWith('/search-results') ||
+      router.url.startsWith('/product-details');
+       else articleSearchLabelElse" class="menu-item selected">Artikelsuche</span>
      <ng-template #articleSearchLabelElse>
-          <span class="menu-item">Artikelsuche</span>
+        <span class="menu-item">Artikelsuche</span>
      </ng-template>
    </div>
    <div class="menu-item-grid align-center" (click)="routeToMenu('/customer-search', 'customersearch')">
      <div>
-        <img class="menu-icon" *ngIf="router.url === '/customer-search'; else customerSearchImageElse" src="/assets/images/Icon_Kundensuche.svg">
+        <img class="menu-icon" *ngIf="router.url === '/customer-search'; else customerSearchImageElse"
+          src="/assets/images/Icon_Kundensuche.svg">
        <ng-template #customerSearchImageElse>
          <img class="menu-icon" src="/assets/images/Icon_Kundensuche_inactive.svg">
        </ng-template>
      </div>
-      <span *ngIf="router.url === '/customer-search'; else customerSearchLabelElse" class="menu-item selected">Kundensuche</span>
+      <span *ngIf="router.url === '/customer-search'; else customerSearchLabelElse"
+        class="menu-item selected">Kundensuche</span>
      <ng-template #customerSearchLabelElse>
-          <span class="menu-item">Kundensuche</span>
+        <span class="menu-item">Kundensuche</span>
      </ng-template>
    </div>
    <div class="menu-item-grid align-center">
--- a/src/app/components/menu/menu.component.scss
+++ b/src/app/components/menu/menu.component.scss
@@ -12,7 +12,7 @@

 .menu-grid {
  display: grid;
-  grid-template-columns: auto auto auto auto auto;
+  grid-template-columns: 20% 20% 20% 20% 20%;
  padding-top: 20px;
 }

--- a/src/app/components/product-card/product-card.component.html
+++ b/src/app/components/product-card/product-card.component.html
@@ -23,7 +23,7 @@
        </div>
      </div>
      <div class="price align-right">
-        <span>{{ product.price }}</span>
+        <span>{{ price }}</span>
        <span class="currency">{{ product.currency }}</span>
      </div>
    </div>
@@ -41,7 +41,7 @@
        </div>
      </div>
      <div class="stock-container align-right">
-        <div *ngIf="product.availability" class="available-stock">
+        <div *ngIf="product.itemsInStock > 0" class="available-stock">
          <div class="available-icon-container">
            <img
              class="available-icon"
@@ -67,7 +67,7 @@
            <span>{{ product.itemsInStock }}x</span>
          </div>
        </div>
-        <div *ngIf="!product.availability" class="not-available-stock">
+        <div *ngIf="product.itemsInStock === 0" class="not-available-stock">
          <span>{{ product.notAvailableReason }}</span>
        </div>
      </div>
@@ -85,7 +85,7 @@
        </div>
      </div>
      <div class="order">
-        <span>{{ product.category }}</span>
+        <span>{{ product.location }}</span>
      </div>
    </div>
  </div>
--- a/src/app/components/product-card/product-card.component.scss
+++ b/src/app/components/product-card/product-card.component.scss
@@ -123,4 +123,8 @@

 .type-icon-container {
    padding-top: 3px;
+}
+
+.publisher {
+    max-width: 300px;
 }
--- a/src/app/components/product-card/product-card.component.ts
+++ b/src/app/components/product-card/product-card.component.ts
@@ -29,6 +29,13 @@ export class ProductCardComponent implements OnInit {
    }
  }

+  get price() {
+    if (this._product.price.toString().indexOf('.') === -1) {
+      return this._product.price + ',00';
+    }
+    return this._product.price.toString().replace('.', ',');
+  }
+
  eanChangedSub = new ReplaySubject<string>();

  imageUrl$: Observable<string>;
--- a/src/app/components/product-details/product-details.component.html
+++ b/src/app/components/product-details/product-details.component.html
@@ -35,10 +35,10 @@
            <div class="stock-label">
              <span>Lieferbar</span>
            </div>
-            <div class="home-icon">
+            <div class="home-icon" *ngIf="product.quantity > 0">
              <img class="icon" src="../../../assets/images/Icon_House.svg">
            </div>
-            <div class="stock-quantity">
+            <div class="stock-quantity" *ngIf="product.quantity > 0">
              <span>{{product.quantity}}</span>
            </div>
          </div>
--- a/src/app/components/product-details/product-details.component.scss
+++ b/src/app/components/product-details/product-details.component.scss
@@ -81,7 +81,7 @@
 .type {
    display: grid;
    grid-template-columns: min-content auto;
-    grid-gap: 10px;
+    grid-gap: 13px;
 }

 .type span {
--- a/src/app/components/product-details/product-details.component.ts
+++ b/src/app/components/product-details/product-details.component.ts
@@ -86,7 +86,7 @@ export class ProductDetailsComponent implements OnInit {
    if (item.pr) {
      ean = item.pr.ean;
      eanTag = ean;
-      productIcon$ = this.catImageService.getImageUrl(ean, { width: 469, height: 575});
+      productIcon$ = this.catImageService.getImageUrl(ean, { width: 469, height: 575 });
      locale = item.pr.locale;
      publicationDate = getFormatedPublicationDate(item.pr.publicationDate);
      format = this.selectedItem ? this.selectedItem.pr.formatDetail : null;
@@ -109,6 +109,11 @@ export class ProductDetailsComponent implements OnInit {
    if (item.av.length > 0) {
      quantity = (item.av[0].qty ? item.av[0].qty : 0) + 'x';
      price = item.av[0].price.value.value + ' ' + item.av[0].price.value.currency;
+      if (item.av[0].price.value.value.toString().indexOf('.') === -1) {
+        price = item.av[0].price.value.value + ',00 ' + item.av[0].price.value.currency;
+      } else {
+        price = item.av[0].price.value.value.toString().replace('.', ',') + ' ' + item.av[0].price.value.currency;
+      }
    }

    return {
--- a/src/app/components/search-results/search-results.component.html
+++ b/src/app/components/search-results/search-results.component.html
@@ -11,9 +11,9 @@
    <app-product-card *ngFor="let product of products" [product]="product">
    </app-product-card>
  </div>
+  <!-- [style.padding.px]="30" -->
  <app-loading
-    [style.padding.px]="30"
-    loading="true"
+    loading="loading"
    text="Inhalte werden geladen"
  ></app-loading>
 </div>
--- a/src/app/components/search-results/search-results.component.ts
+++ b/src/app/components/search-results/search-results.component.ts
@@ -23,6 +23,7 @@ import { ProductMapping } from 'src/app/core/mappings/product.mapping';
 export class SearchResultsComponent implements OnInit {
  currentSearch: Search;
  products: Product[];
+  loading = true;
  @Select(ProcessState.getProducts) products$: Observable<ItemDTO[]>;
  skip = 0;

@@ -30,7 +31,7 @@ export class SearchResultsComponent implements OnInit {
    private store: Store,
    private router: Router,
    private productMapping: ProductMapping
-  ) {}
+  ) { }

  ngOnInit() {
    this.loadCurrentSearch();
@@ -67,6 +68,9 @@ export class SearchResultsComponent implements OnInit {
        filter(f => Array.isArray(f)),
        map(items => items.map(item => this.productMapping.fromItemDTO(item)))
      )
-      .subscribe(data => (this.products = data));
+      .subscribe(
+        data => (this.products = data),
+        () => this.loading = false
+      );
  }
 }
--- a/src/app/core/mappings/feed.mapping.ts
+++ b/src/app/core/mappings/feed.mapping.ts
@@ -0,0 +1,74 @@
+import { FeedCard } from '../models/feed-card.model';
+import { FeedDTO } from 'feed-service';
+import { FeedBook } from '../models/feed-book.model';
+import { FeedEvent } from '../models/feed-event.model';
+import { FeedNews } from '../models/feed-news.model';
+import { FeedRecommandation } from '../models/feed-recommandation.model';
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class FeedMapping {
+    constructor () {}
+
+    fromFeedDTO (feed: FeedDTO): FeedCard {
+        let books: FeedBook = null;
+        const event: FeedEvent[] = [];
+        const news: FeedNews[] = [];
+        const recommandation: FeedRecommandation = null;
+
+        if (feed.type === 'products' && feed.items[0]) {
+            books = {
+                id: feed.id,
+                firstBookTypeIcon: feed.items[0].pr.format,
+                firstBookEan: feed.items[0].pr.ean,
+                firstBookAuthor: feed.items[0].pr.name,
+                firstBookTitle: feed.items[0].pr.additionalName,
+                firstBookType: feed.items[0].pr.formatDetail,
+                firstBookIcon: feed.items[0].pr.format,
+                firstBookLanguage: feed.items[0].pr.locale,
+                firstBookPrice: feed.items[0].av[0].price.value.value,
+                firstBookCurrency: feed.items[0].av[0].price.value.currency
+            };
+            if (feed.items[1]) {
+                books = {
+                    ...books,
+                    secondBookEan: feed.items[1].pr.ean,
+                    secondBookAuthor: feed.items[1].pr.name,
+                    secondBookTitle: feed.items[1].pr.additionalName,
+                    secondBookType: feed.items[1].pr.formatDetail,
+                    secondBookTypeIcon: feed.items[1].pr.format,
+                    secondBookIcon: feed.items[1].pr.format,
+                    secondBookLanguage: feed.items[1].pr.locale,
+                    secondBookPrice: feed.items[1].av[0].price.value.value,
+                    secondBookCurrency: feed.items[1].av[0].price.value.currency
+                };
+            }
+        } else if (feed.type === 'events') {
+            feed.items.forEach (
+                i => event.push(<FeedEvent> {
+                    id: i.id,
+                    title: i.name,
+                    content: i.desc
+                })
+            );
+        } else if (feed.type === 'info') {
+            feed.items.forEach (
+                i => news.push(<FeedNews> {
+                    id: i.id,
+                    title: i.heading,
+                    content: i.text
+                })
+            );
+        }
+
+        return <FeedCard> {
+            id: feed.id,
+            cardTitle: feed.label,
+            type: feed.type,
+            books: books,
+            event: event,
+            news: news,
+            recommandation: recommandation
+        };
+    }
+}
--- a/src/app/core/mappings/filter-item.mapping.ts
+++ b/src/app/core/mappings/filter-item.mapping.ts
@@ -9,7 +9,7 @@ export class FilterItemMapping {

    fromOptionDto(option: OptionDTO): FilterItem {
        return {
-            id: option.key,
+            id: option.value,
            name: option.label,
            selected: false
        };
--- a/src/app/core/mappings/product.mapping.ts
+++ b/src/app/core/mappings/product.mapping.ts
@@ -45,7 +45,7 @@ export class ProductMapping {
            err: '',
            category: item.pr.productGroup,
            icon: '',
-            notAvailableReason: '',
+            notAvailableReason: itemsInStock === 0 ? 'Not in stock' : '',
            publisher: item.pr.manufacturer,
            recommandation: false,
            serial: item.pr.serial,
--- a/src/app/core/models/feed-book.model.ts
+++ b/src/app/core/models/feed-book.model.ts
@@ -1,15 +1,21 @@
 export interface FeedBook {
-    id: number;
+    id: string;
+    firstBookEan: string;
    firstBookAuthor: string;
    firstBookTitle: string;
    firstBookType: string;
+    firstBookTypeIcon: string;
    firstBookLanguage: string;
    firstBookPrice: string;
+    firstBookCurrency: string;
    firstBookIcon: string;
-    secondBookAuthor: string;
-    secondBookTitle: string;
-    secondBookType: string;
-    secondBookLanguage: string;
-    secondBookPrice: string;
-    secondBookIcon: string;
+    secondBookEan?: string;
+    secondBookAuthor?: string;
+    secondBookTitle?: string;
+    secondBookType?: string;
+    secondBookTypeIcon?: string;
+    secondBookLanguage?: string;
+    secondBookPrice?: string;
+    secondBookIcon?: string;
+    secondBookCurrency?: string;
 }
--- a/src/app/core/models/feed-card.model.ts
+++ b/src/app/core/models/feed-card.model.ts
@@ -4,11 +4,11 @@ import { FeedNews } from './feed-news.model';
 import { FeedRecommandation } from './feed-recommandation.model';

 export interface FeedCard {
-    id: number;
+    id: string;
    cardTitle: string;
    type: string;
    books: FeedBook;
-    event: FeedEvent;
-    news: FeedNews;
+    event: FeedEvent[];
+    news: FeedNews[];
    recommandation: FeedRecommandation;
 }
--- a/src/app/core/services/filter.service.ts
+++ b/src/app/core/services/filter.service.ts
@@ -3,14 +3,18 @@ import { Observable, of } from 'rxjs';
 import { Filter } from '../models/filter.model';
 import { filterMock } from 'mocks/filters.mock';
 import { CatSearchService, ApiResponse, UISettingsDTO } from 'cat-service';
-import { expand } from 'rxjs/operators';
 import { FilterItem } from '../models/filter-item.model';
+import { FilterMapping } from '../mappings/filter.mapping';
+import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
 })
 export class FilterService {
-  constructor(private service: CatSearchService) {}
+  constructor(
+    private service: CatSearchService,
+    private filterMapping: FilterMapping
+  ) { }

  selectFilterById(filters: Filter[], id: string): Observable<Filter[]> {
    const newFilterState = filters.map((filter: Filter) => {
@@ -43,6 +47,17 @@ export class FilterService {
    return of(newFilterState);
  }

+  toggleFilterItemsByName(filters: Filter[], name: string): Observable<Filter[]> {
+    const newFilterState = filters.map((filter: Filter) => {
+      if (filter.expanded === true) {
+        const newItemsState = this.toggleItemByName(filter.items, name);
+        return { ...filter, items: newItemsState };
+      }
+      return { ...filter };
+    });
+    return of(newFilterState);
+  }
+
  private toggleItem(items: FilterItem[], id: string): FilterItem[] {
    return items.map((item: FilterItem) => {
      if (item.id === id) {
@@ -52,19 +67,30 @@ export class FilterService {
    });
  }

+  private toggleItemByName(items: FilterItem[], name: string): FilterItem[] {
+    return items.map((item: FilterItem) => {
+      if (item.name === name) {
+        return { ...item, selected: !item.selected };
+      }
+      return { ...item };
+    });
+  }
+
  // service method to get the first 3 filters
  getFilters(): Observable<Filter[]> {
-    // TODO: implement call to backend API to get filter metadata
-    // this.service.settings().subscribe(
-    //  (data: ApiResponse<UISettingsDTO>) =>
-    //    console.log(data.result.filter, data.result.orderBy, data)
-    // );
-    return of(filterMock.slice(0, 3));
+    return this.service.settings().pipe(
+      map(
+        (data: ApiResponse<UISettingsDTO>) =>
+          this.filterMapping.fromUiSettingsDto(data.result).slice(0, 3)
+      ));
  }

  // service method to get filters metadata
  getFullFilter(): Observable<Filter[]> {
-    // TODO: implement call to backend API to get filter metadata
-    return of(filterMock);
+    return this.service.settings().pipe(
+      map(
+        (data: ApiResponse<UISettingsDTO>) =>
+          this.filterMapping.fromUiSettingsDto(data.result)
+      ));
  }
 }
--- a/src/app/core/services/product.service.ts
+++ b/src/app/core/services/product.service.ts
@@ -12,6 +12,7 @@ import {
 } from 'cat-service';
 import { map } from 'rxjs/operators';
 import { Search } from '../models/search.model';
+import { FilterMapping } from '../mappings/filter.mapping';


@Injectable({
@@ -22,7 +23,8 @@ export class ProductService {
  searchResponse$: Observable<PagedApiResponse<ItemDTO>>;

  constructor(
-    private searchService: CatSearchService
+    private searchService: CatSearchService,
+    private filterMapping: FilterMapping
    ) { }

  persistLastSearchToLocalStorage(param: string) {
@@ -70,7 +72,8 @@ export class ProductService {
      take: search.take
    };

-    return this.searchService.search(queryToken).pipe(
+    const queryWithFilters = this.filterMapping.toQueryTokenDto(queryToken, search.fitlers);
+    return this.searchService.search(queryWithFilters).pipe(
      map(response => {
        if (response.error) {
          throw new Error(response.message);
--- a/src/app/core/store/actions/filter.actions.ts
+++ b/src/app/core/store/actions/filter.actions.ts
@@ -5,6 +5,7 @@ export const LOAD_FULL_FILTERS = '[FILTERS] Load full';
 export const SELECT_FILTER_BY_ID = '[FILTERS] Select by id';
 export const UNSELECT_FILTER_BY_ID = '[FILTERS] Unselect by id';
 export const TOGGLE_FILTER_ITEM_BY_ID = '[FILTERS] Toggle item by id';
+export const TOGGLE_FILTER_ITEM_BY_NAME = '[FILTERS] Toggle item by name';

 export class LoadFilters {
  static readonly type = LOAD_FILTERS;
@@ -31,3 +32,9 @@ export class ToggleFilterItemById {

  constructor(public id: string, public payload: Filter[]) {}
 }
+
+export class ToggleFilterItemByName {
+  static readonly type = TOGGLE_FILTER_ITEM_BY_NAME;
+
+  constructor(public name: string, public payload: Filter[]) {}
+}
--- a/src/app/core/store/state/feed.state.ts
+++ b/src/app/core/store/state/feed.state.ts
@@ -2,7 +2,10 @@ import { State, Selector, Action, StateContext } from '@ngxs/store';
 import { LoadFeed } from '../actions/feed.actions';
 import { feedMock } from 'mocks/feed.mock';
 import { FeedCard } from '../../models/feed-card.model';
-import { FeedService } from 'feed-service';
+import { FeedService, FeedDTO } from 'feed-service';
+import { map } from 'rxjs/operators';
+import { FeedMapping } from 'src/app/core/mappings/feed.mapping';
+import { PagedApiResponse } from 'projects/feed-service/src/lib';

 export class FeedStateModel {
    feed: FeedCard[];
@@ -16,7 +19,7 @@ export class FeedStateModel {
 })
 export class FeedState {

-    constructor(private feedService: FeedService) {}
+    constructor(private feedService: FeedService, private feedMapping: FeedMapping) { }

    @Selector()
    static getFeed(state: FeedStateModel) {
@@ -26,13 +29,20 @@ export class FeedState {
    @Action(LoadFeed)
    load(ctx: StateContext<FeedStateModel>) {
        const state = ctx.getState();
-        // TODO: implement api call to state
-        // this.feedService.info().subscribe(
-        //    (feed: any) => console.log(feed)
-        // );
-        ctx.patchState({
-            ...state,
-            feed: [...feedMock]
-        });
+        this.feedService.info().subscribe(
+            (feed: PagedApiResponse<FeedDTO<any>>) => {
+                const feeds = feed.result.map(t =>
+                    this.feedMapping.fromFeedDTO(t)
+                );
+                ctx.patchState({
+                    ...state,
+                    feed: [...feeds]
+                });
+            }
+        );
+        // ctx.patchState({
+        //     ...state,
+        //     feed: [...feedMock]
+        // });
    }
 }
--- a/src/app/core/store/state/filter.state.ts
+++ b/src/app/core/store/state/filter.state.ts
@@ -1,6 +1,13 @@
 import { Filter } from '../../models/filter.model';
 import { State, Selector, Action, StateContext } from '@ngxs/store';
-import { LoadFilters, LoadFullFilters, SelectFilterById, UnselectFilterById, ToggleFilterItemById } from '../actions/filter.actions';
+import {
+    LoadFilters,
+    LoadFullFilters,
+    SelectFilterById,
+    UnselectFilterById,
+    ToggleFilterItemById,
+    ToggleFilterItemByName
+} from '../actions/filter.actions';
 import { load } from '@angular/core/src/render3';
 import { FilterService } from '../../services/filter.service';

@@ -16,13 +23,18 @@ export class FilterStateModel {
 })
 export class FilterState {

-    constructor(private filterService: FilterService) {}
+    constructor(private filterService: FilterService) { }

    @Selector()
    static getFilters(state: FilterStateModel) {
        return state.filters;
    }

+    @Selector()
+    static getSelectedFilters(state: FilterStateModel) {
+        return state.filters.filter(f => f.items.find(i => i.selected === true));
+    }
+
    @Action(LoadFilters)
    load(ctx: StateContext<FilterStateModel>) {
        const state = ctx.getState();
@@ -87,4 +99,17 @@ export class FilterState {
            }
        );
    }
+
+    @Action(ToggleFilterItemByName)
+    toggleItemByName(ctx: StateContext<FilterStateModel>, { name, payload }: ToggleFilterItemByName) {
+        const state = ctx.getState();
+        this.filterService.toggleFilterItemsByName(payload, name).subscribe(
+            (filters: Filter[]) => {
+                ctx.patchState({
+                    ...state,
+                    filters: [...filters]
+                });
+            }
+        );
+    }
 }
--- a/src/app/core/store/state/process.state.ts
+++ b/src/app/core/store/state/process.state.ts
@@ -9,7 +9,7 @@ import { ProductService } from '../../services/product.service';
 import { RecentArticleSearch } from '../../models/recent-article-search.model';
 import { GetProducts, LoadRecentProducts, AddSelectedProduct } from '../actions/product.actions';
 import { ItemDTO } from 'dist/cat-service/lib/dtos';
-import { getCurrentProcess } from '../../utils/process.util'
+import { getCurrentProcess } from '../../utils/process.util';

 export class ProcessStateModel {
    processes: Process[];
@@ -202,7 +202,7 @@ export class ProcessState {
            (process: Process) => {
                if (process.selected === true) {
                    if (removeLastBreadcrumb) {
-                        let updateBreadcrumbs: Breadcrumb[] = [];
+                        const updateBreadcrumbs: Breadcrumb[] = [];
                        process.breadcrumbs.forEach((breadcrumb: Breadcrumb, index: number) => {
                            if ((process.breadcrumbs.length - 1) !== index) {
                                updateBreadcrumbs.push(breadcrumb);
--- a/src/app/modules/article-search/components/filter-item/filter-item.component.ts
+++ b/src/app/modules/article-search/components/filter-item/filter-item.component.ts
@@ -3,7 +3,7 @@ import { Filter } from 'src/app/core/models/filter.model';
 import {
  SelectFilterById,
  UnselectFilterById,
-  ToggleFilterItemById
+  ToggleFilterItemByName
 } from 'src/app/core/store/actions/filter.actions';
 import { FilterItem } from 'src/app/core/models/filter-item.model';
 import { Store } from '@ngxs/store';
@@ -31,8 +31,9 @@ export class FilterItemComponent implements OnInit {
  }

  selectItem(item: FilterItem) {
-    this.store.dispatch(new ToggleFilterItemById(item.id, this.filters));
+    this.store.dispatch(new ToggleFilterItemByName(item.name, this.filters));
  }

-  ngOnInit() {}
+  ngOnInit() {
+  }
 }
--- a/src/app/modules/article-search/components/filter/filter.component.scss
+++ b/src/app/modules/article-search/components/filter/filter.component.scss
@@ -4,7 +4,7 @@
  display: grid;
  grid-template-columns: auto auto auto auto;
  //grid-gap: 5vh;
-  margin-top: 15px;
+  margin-top: 5px;
  width: 80%;
  margin-left: 15%;
  line-height: 3;
--- a/src/app/modules/article-search/components/text-search/text-search.component.ts
+++ b/src/app/modules/article-search/components/text-search/text-search.component.ts
@@ -26,6 +26,7 @@ import {
 } from '@angular/core';
 import { Router } from '@angular/router';
 import { Select, Store } from '@ngxs/store';
+import { FilterState } from 'src/app/core/store/state/filter.state';

@Component({
  selector: 'app-text-search',
@@ -41,6 +42,7 @@ export class TextSearchComponent implements OnInit, AfterViewInit {
  products: Product[];
  filters: Filter[];
  @Select(ProcessState.getProcesses) processes$: Observable<Process[]>;
+  @Select(FilterState.getSelectedFilters) filters$: Observable<Filter[]>;
  processes: Process[];

  @Input()
@@ -62,7 +64,8 @@ export class TextSearchComponent implements OnInit, AfterViewInit {
    if (!this.searchParams) {
      return;
    }
-    this.loadSelectedFilters();
+    this.filters$.subscribe(f => this.filters = f);
+    console.log(this.filters);
    const search = <Search>{
      query: this.searchParams,
      fitlers: this.filters,
@@ -112,13 +115,6 @@ export class TextSearchComponent implements OnInit, AfterViewInit {
      .subscribe((data: any) => this.searchProductsHandler(data));
  }

-  loadSelectedFilters() {
-    // TODO filter selected filters
-    // this.store.select('filters').subscribe(
-    //  (data: Filter[]) => this.filters = data
-    // );
-  }
-
  loadProcesses() {
    this.processes$.subscribe((data: Process[]) => (this.processes = data));
  }
@@ -142,6 +138,7 @@ export class TextSearchComponent implements OnInit, AfterViewInit {
  }

  createTab() {
+    this.searchParams = this.searchInput.input;
    this.loadProcesses();
    if (this.processes.length === 0) {
      this.createProcess();
--- a/src/app/modules/dashboard/components/book-card/book-card.component.html
+++ b/src/app/modules/dashboard/components/book-card/book-card.component.html
@@ -2,38 +2,38 @@
  <div class="card-title align-left">
    <span>{{card.cardTitle}}</span>
  </div>
-  <div class="card-items">
+  <div class="card-items" [ngClass]="{'single-item-mode': !card.books.secondBookAuthor}">
    <div class="item align-left">
      <div class="item-logo">
-        <img class="book-image" src="../../../assets/images/{{card.books.firstBookIcon}}">
+        <img class="book-image" [src]='firstBookImageUrl$ | async'>
      </div>
      <div class="item-content">
        <div class="book-author wrap-text-more">{{card.books.firstBookAuthor}}</div>
        <div class="book-title wrap-text-more">{{card.books.firstBookTitle}}</div>
-        <div class="item-detail">
-          <div class="book-type">
-            <div><img class="book-type-icon" src="../../../assets/images/Icon_Book.svg"></div>
+        <div class="item-detail" [ngClass]="{'single-item-detail-mode': !card.books.secondBookAuthor}">
+          <div class="book-type" [ngClass]="{'book-type-single-mode': !card.books.secondBookAuthor}">
+            <div><img class="book-type-icon" src="../../../assets/images/Icon_{{card.books.firstBookTypeIcon}}.svg"></div>
            <div class="item-detail wrap-text-more">{{card.books.firstBookType}}</div>
            <div class="separator">|</div>
          </div>
-          <div class="book-language">
+          <div class="book-language" [ngClass]="{'book-language-single-mode': !card.books.secondBookAuthor}">
            <div class="item-details wrap-text-more">{{card.books.firstBookLanguage}}</div>
            <div class="separator">|</div>
          </div>
-          <div class="item-details wrap-text-more">{{card.books.firstBookPrice}}</div>
+          <div class="item-details wrap-text-more">{{price}}</div>
        </div>
      </div>
    </div>
-    <div class="item align-left">
+    <div class="item align-left" *ngIf="card.books.secondBookAuthor">
        <div class="item-logo">
-          <img class="book-image" src="../../../assets/images/{{card.books.secondBookIcon}}">
+          <img class="book-image" [src]='secondBookImageUrl$ | async'>
        </div>
        <div class="item-content">
          <div class="book-author wrap-text-more">{{card.books.secondBookAuthor}}</div>
          <div class="book-title wrap-text-more">{{card.books.secondBookTitle}}</div>
          <div class="item-detail">
            <div class="book-type">
-              <div><img class="book-type-icon" src="../../../assets/images/Icon_Book.svg"></div>
+              <div><img class="book-type-icon" src="../../../assets/images/Icon_{{card.books.secondBookTypeIcon}}.svg"></div>
              <div class="item-detail wrap-text-more">{{card.books.secondBookType}}</div>
              <div class="separator">|</div>
            </div>
@@ -41,7 +41,7 @@
              <div class="item-details wrap-text-more">{{card.books.secondBookLanguage}}</div>
              <div class="separator">|</div>
            </div>
-            <div class="item-details wrap-text-more">{{card.books.secondBookPrice}}</div>
+            <div class="item-details wrap-text-more">{{secondPrice}}</div>
          </div>
        </div>
      </div>
--- a/src/app/modules/dashboard/components/book-card/book-card.component.scss
+++ b/src/app/modules/dashboard/components/book-card/book-card.component.scss
@@ -25,6 +25,10 @@
  margin-top: 15px;
 }

+.single-item-mode {
+  grid-template-columns: auto;
+}
+
@media screen and (max-width: 563px) {
  .card-items {
    display: grid;
@@ -53,6 +57,11 @@
  grid-template-columns: auto auto auto;
 }

+.single-item-detail-mode {
+  grid-template-columns: max-content max-content auto;
+  grid-gap: 2vh;
+}
+
 .book-author {
  height: 21px;
  font-size: 16px;
@@ -70,6 +79,10 @@
  grid-template-columns: auto auto auto;
 }

+.book-type-single-mode {
+  grid-gap: 1vh;
+}
+
 .separator .item-details {
  height: 21px;
  font-size: 16px;
@@ -80,3 +93,11 @@
  display: grid;
  grid-template-columns: auto auto;
 }
+
+.book-language-single-mode {
+  grid-gap: 1vh;
+}
+
+.book-type-icon {
+  margin-top: 2px;
+}
--- a/src/app/modules/dashboard/components/book-card/book-card.component.ts
+++ b/src/app/modules/dashboard/components/book-card/book-card.component.ts
@@ -1,5 +1,7 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { FeedCard } from 'src/app/core/models/feed-card.model';
+import { CatImageService } from 'cat-service';
+import { Observable, of } from 'rxjs';

@Component({
  selector: 'app-book-card',
@@ -9,10 +11,34 @@ import { FeedCard } from 'src/app/core/models/feed-card.model';
 export class BookCardComponent implements OnInit {

  @Input() card: FeedCard;
+  firstBookImageUrl$: Observable<string>;
+  secondBookImageUrl$: Observable<string>;

-  constructor() { }
+  constructor(private catImageService: CatImageService) { }
+
+  get price() {
+    if (this.card.books.firstBookPrice.toString().indexOf('.') === -1) {
+      return this.card.books.firstBookPrice + ',00 ' + this.card.books.firstBookCurrency;
+    }
+    return  this.card.books.firstBookPrice.replace('.', ',') + ' ' + this.card.books.firstBookCurrency;
+  }
+
+  get secondPrice() {
+    if (this.card.books.secondBookPrice.toString().indexOf('.') === -1) {
+      return this.card.books.secondBookPrice + ',00 ' + this.card.books.secondBookPrice;
+    }
+    return  this.card.books.secondBookPrice.replace('.', ',') + ' ' + this.card.books.secondBookPrice;
+  }

  ngOnInit() {
+    this.catImageService.getImageUrl(this.card.books.firstBookEan).subscribe(
+      (url: string) => this.firstBookImageUrl$ = of(url)
+    );
+    if (this.card.books.secondBookEan) {
+      this.catImageService.getImageUrl(this.card.books.secondBookEan).subscribe(
+        (url: string) => this.secondBookImageUrl$ = of(url)
+      );
+    }
  }

 }
--- a/src/app/modules/dashboard/components/event-card/event-card.component.html
+++ b/src/app/modules/dashboard/components/event-card/event-card.component.html
@@ -1,11 +1,11 @@
-<div class="card-container">
+<div class="card-container" *ngFor="let event of card.event">
  <div class="card-title align-left">
    <span>{{card.cardTitle}}</span>
  </div>
  <div class="event-title align-left wrap-text-more">
-    <span>{{card.event.title}}</span>
+    <span [innerHTML]='event.title'></span>
  </div>
  <div class="event-content align-left">
-    <span>{{card.event.content}}</span>
+    <span [innerHTML]='event.content'></span>
  </div>
 </div>
--- a/src/app/modules/dashboard/components/news-card/news-card.component.html
+++ b/src/app/modules/dashboard/components/news-card/news-card.component.html
@@ -1,16 +1,16 @@
-<div class="card-container">
-    <div class="card-icon-container align-center">
+<div class="card-container card-container-no-image" *ngFor="let news of card.news">
+    <!-- <div class="card-icon-container align-center">
      <img class="news-icon" src="../../../assets/images/News_Icon.svg"> 
-    </div>
+    </div> -->
    <div class="card-content-container">
      <div class="card-title align-left">
        <span>{{card.cardTitle}}</span>
      </div>
      <div class="news-title align-left wrap-text-more">
-        <span>{{card.news.title}}</span>
+        <span>{{news.title}}</span>
      </div>
      <div class="news-content align-left">
-        <span>{{card.news.content}}</span>
+        <span>{{news.content}}</span>
      </div>
    </div>
  </div>
--- a/src/app/modules/dashboard/components/news-card/news-card.component.scss
+++ b/src/app/modules/dashboard/components/news-card/news-card.component.scss
@@ -13,6 +13,10 @@
  border-radius: 4px;
 }

+.card-container-no-image {
+  grid-template-columns: auto;
+}
+
 .card-content-container {
  display: grid;
  grid-template-columns: auto;
--- a/src/app/modules/dashboard/dashboard.component.html
+++ b/src/app/modules/dashboard/dashboard.component.html
@@ -1,6 +1,7 @@
 <div *ngFor="let card of feed$ | async">
-  <app-book-card *ngIf="card.type === 'BOOK'" [card]="card"></app-book-card>
-  <app-event-card *ngIf="card.type === 'EVENT'" [card]="card"></app-event-card>
-  <app-news-card *ngIf="card.type === 'NEWS'" [card]="card"></app-news-card>
+  <app-book-card *ngIf="card.type === 'products'" [card]="card"></app-book-card>
+  <app-event-card *ngIf="card.type === 'events'" [card]="card"></app-event-card>
+  <app-news-card *ngIf="card.type === 'info'" [card]="card"></app-news-card>
  <app-recommandation-card *ngIf="card.type === 'REC'" [card]="card"></app-recommandation-card>
-</div>
+</div>
+<app-loading [loading]="loading" text="Inhalte werden geladen"></app-loading>
--- a/src/app/modules/dashboard/dashboard.component.ts
+++ b/src/app/modules/dashboard/dashboard.component.ts
@@ -12,6 +12,8 @@ import { FeedState } from 'src/app/core/store/state/feed.state';
 })
 export class DashboardComponent implements OnInit {

+  loading = true;
+
  @Select(FeedState.getFeed) feed$: Observable<FeedCard[]>;
  constructor(
    private store: Store
@@ -19,5 +21,8 @@ export class DashboardComponent implements OnInit {

  ngOnInit() {
    this.store.dispatch(new LoadFeed());
+    this.feed$.subscribe(
+      () => this.loading = false
+    );
  }
 }
--- a/src/app/modules/dashboard/dashboard.module.ts
+++ b/src/app/modules/dashboard/dashboard.module.ts
@@ -6,8 +6,9 @@ import { BookCardComponent } from './components/book-card/book-card.component';
 import { EventCardComponent } from './components/event-card/event-card.component';
 import { NewsCardComponent } from './components/news-card/news-card.component';
 import { RecommandationCardComponent } from './components/recommandation-card/recommandation-card.component';
+import { SharedModule } from 'src/app/shared/shared.module';
@NgModule({
-  imports: [CommonModule],
+  imports: [CommonModule, SharedModule],
  exports: [DashboardComponent],
  declarations: [
    DashboardComponent,
--- a/src/app/shared/components/modal/modal.component.scss
+++ b/src/app/shared/components/modal/modal.component.scss
@@ -82,7 +82,7 @@
  left: 0;

  /* semi-transparent black */
-  background-color: #000;
+  background-color: #1B1E32;
  opacity: 0.75;

  /* z-index must be below .jw-modal and above everything else */
--- a/src/app/shared/components/search-input/search-input.component.ts
+++ b/src/app/shared/components/search-input/search-input.component.ts
@@ -29,7 +29,7 @@ import {
        src="/assets/images/close.svg"
      />
      <img
-        (click)="search.emit(input)"
+        (click)="emitSearch(input)"
        class="search-icon"
        src="/assets/images/search.svg"
      />
@@ -62,6 +62,10 @@ export class SearchComponent implements OnInit {
    this.change('');
  }

+  emitSearch(input: string) {
+    this.search.emit(input);
+  }
+
  keyHandler(event: any) {
    if (event.key === 'Enter') {
      this.search.emit(this.input);
--- a/src/index.html
+++ b/src/index.html
@@ -6,9 +6,9 @@
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
 </head>
 <body>
  <app-root></app-root>