From 6b7495b47f0247df82a235fde8d92ea636dfce25 Mon Sep 17 00:00:00 2001 From: Eraldo Hasanaj Date: Sun, 10 Feb 2019 12:29:28 +0100 Subject: [PATCH 01/11] import fix --- src/app/core/store/state/process.state.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/core/store/state/process.state.ts b/src/app/core/store/state/process.state.ts index f4680c934..34f32097a 100644 --- 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); From 9ce0c6869c7ce6ded4f5e8c035cb769563aa1f12 Mon Sep 17 00:00:00 2001 From: Eraldo Hasanaj Date: Sun, 10 Feb 2019 12:42:35 +0100 Subject: [PATCH 02/11] fixed padding on search-results --- src/app/components/product-card/product-card.component.scss | 4 ++++ .../components/search-results/search-results.component.html | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/app/components/product-card/product-card.component.scss b/src/app/components/product-card/product-card.component.scss index 380c2f8a2..c612a094a 100644 --- 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; } \ No newline at end of file diff --git a/src/app/components/search-results/search-results.component.html b/src/app/components/search-results/search-results.component.html index aa33c1a99..0839d8278 100644 --- a/src/app/components/search-results/search-results.component.html +++ b/src/app/components/search-results/search-results.component.html @@ -11,8 +11,8 @@ + From b1de5aa9637c57bb10c35034b7e4f8d4f6cab25d Mon Sep 17 00:00:00 2001 From: Eraldo Hasanaj Date: Sun, 10 Feb 2019 12:51:11 +0100 Subject: [PATCH 03/11] Added menu active status for serch results and product details --- src/app/components/menu/menu.component.html | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/app/components/menu/menu.component.html b/src/app/components/menu/menu.component.html index cfa2c9710..06af78f19 100644 --- a/src/app/components/menu/menu.component.html +++ b/src/app/components/menu/menu.component.html @@ -2,26 +2,34 @@
- +
- Artikelsuche + Artikelsuche - Artikelsuche + Artikelsuche
- +
- Kundensuche + Kundensuche - Kundensuche + Kundensuche
From 1fcb838ba16604ad7105f185fdf4128ee154ec73 Mon Sep 17 00:00:00 2001 From: Eraldo Hasanaj Date: Sun, 10 Feb 2019 16:41:35 +0100 Subject: [PATCH 04/11] [HIMA-26] Finished implementing dashboard feed --- mocks/feed.mock.ts | 22 +++--- src/app/app.module.ts | 2 +- src/app/core/mappings/feed.mapping.ts | 72 +++++++++++++++++++ src/app/core/models/feed-book.model.ts | 18 +++-- src/app/core/models/feed-card.model.ts | 6 +- src/app/core/store/state/feed.state.ts | 32 ++++++--- .../book-card/book-card.component.html | 18 ++--- .../book-card/book-card.component.scss | 21 ++++++ .../book-card/book-card.component.ts | 14 +++- .../event-card/event-card.component.html | 6 +- .../news-card/news-card.component.html | 10 +-- .../news-card/news-card.component.scss | 4 ++ .../dashboard/dashboard.component.html | 9 +-- .../modules/dashboard/dashboard.component.ts | 5 ++ src/app/modules/dashboard/dashboard.module.ts | 3 +- src/index.html | 1 + 16 files changed, 188 insertions(+), 55 deletions(-) create mode 100644 src/app/core/mappings/feed.mapping.ts diff --git a/mocks/feed.mock.ts b/mocks/feed.mock.ts index e304d7720..5bd9cbb73 100644 --- 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[] = [ { - id: 1, + id: '1', cardTitle: 'BESTSELLER', type: 'BOOK', books: { - id: 1, + id: '1', firstBookAuthor: 'Michelle Obama', firstBookTitle: 'Becoming Meine Geschichte', firstBookType: 'B', @@ -26,29 +26,29 @@ export const feedMock: FeedCard[] = [ } }, { - id: 2, + id: '2', cardTitle: 'EVENT', type: 'EVENT', - event: { + event: [{ 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…' - } + }] }, { - id: 3, + id: '3', cardTitle: 'NEWS', type: 'NEWS', - news: { + news: [{ 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…' - } + }] }, { - id: 4, + id: '4', cardTitle: 'EMPFEHLUNG', type: 'REC', recommandation: { @@ -59,11 +59,11 @@ export const feedMock: FeedCard[] = [ } }, { - id: 5, + id: '5', cardTitle: 'NEUERSCHEINUNG FANTASY', type: 'BOOK', books: { - id: 1, + id: '1', firstBookAuthor: 'Joanne K. Rowling', firstBookTitle: 'Grindelwalds verbrechen', firstBookType: 'B', diff --git a/src/app/app.module.ts b/src/app/app.module.ts index de7a933d0..46b278e92 100644 --- 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] }) diff --git a/src/app/core/mappings/feed.mapping.ts b/src/app/core/mappings/feed.mapping.ts new file mode 100644 index 000000000..04f78e8ec --- /dev/null +++ b/src/app/core/mappings/feed.mapping.ts @@ -0,0 +1,72 @@ +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 + ' ' + 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 + ' ' + feed.items[0].av[0].price.value.currency + }; + } + } else if (feed.type === 'events') { + feed.items.forEach ( + i => event.push( { + id: i.id, + title: i.name, + content: i.desc + }) + ); + } else if (feed.type === 'info') { + feed.items.forEach ( + i => news.push( { + id: i.id, + title: i.heading, + content: i.text + }) + ); + } + + return { + id: feed.id, + cardTitle: feed.label, + type: feed.type, + books: books, + event: event, + news: news, + recommandation: recommandation + }; + } +} diff --git a/src/app/core/models/feed-book.model.ts b/src/app/core/models/feed-book.model.ts index 0e96934c8..8c04678f2 100644 --- a/src/app/core/models/feed-book.model.ts +++ b/src/app/core/models/feed-book.model.ts @@ -1,15 +1,19 @@ export interface FeedBook { - id: number; + id: string; + firstBookEan: string; firstBookAuthor: string; firstBookTitle: string; firstBookType: string; + firstBookTypeIcon: string; firstBookLanguage: string; firstBookPrice: 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; } diff --git a/src/app/core/models/feed-card.model.ts b/src/app/core/models/feed-card.model.ts index 052045218..9da46532a 100644 --- 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; } diff --git a/src/app/core/store/state/feed.state.ts b/src/app/core/store/state/feed.state.ts index 6ea6bac72..b8be4f103 100644 --- 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,22 @@ export class FeedState { @Action(LoadFeed) load(ctx: StateContext) { 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>) => { + console.log(feed); + const feeds = feed.result.map(t => + this.feedMapping.fromFeedDTO(t) + ); + console.log(feeds); + ctx.patchState({ + ...state, + feed: [...feeds] + }); + } + ); + // ctx.patchState({ + // ...state, + // feed: [...feedMock] + // }); } } diff --git a/src/app/modules/dashboard/components/book-card/book-card.component.html b/src/app/modules/dashboard/components/book-card/book-card.component.html index 76f9bb58b..bd7cfb539 100644 --- 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,21 +2,21 @@
{{card.cardTitle}}
-
+
{{card.books.firstBookAuthor}}
{{card.books.firstBookTitle}}
-
-
-
+
+
+
{{card.books.firstBookType}}
|
-
+
{{card.books.firstBookLanguage}}
|
@@ -24,16 +24,16 @@
-
+
{{card.books.secondBookAuthor}}
{{card.books.secondBookTitle}}
-
+
{{card.books.secondBookType}}
|
diff --git a/src/app/modules/dashboard/components/book-card/book-card.component.scss b/src/app/modules/dashboard/components/book-card/book-card.component.scss index 246050584..e0588733a 100644 --- 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; +} \ No newline at end of file diff --git a/src/app/modules/dashboard/components/book-card/book-card.component.ts b/src/app/modules/dashboard/components/book-card/book-card.component.ts index 0fab0fb7b..37b554558 100644 --- 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,20 @@ import { FeedCard } from 'src/app/core/models/feed-card.model'; export class BookCardComponent implements OnInit { @Input() card: FeedCard; + firstBookImageUrl$: Observable; + secondBookImageUrl$: Observable; - constructor() { } + constructor(private catImageService: CatImageService) { } 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) + ); + } } } diff --git a/src/app/modules/dashboard/components/event-card/event-card.component.html b/src/app/modules/dashboard/components/event-card/event-card.component.html index 8df45ab3a..6111e6dbf 100644 --- 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 @@ -
+
{{card.cardTitle}}
- {{card.event.title}} +
- {{card.event.content}} +
\ No newline at end of file diff --git a/src/app/modules/dashboard/components/news-card/news-card.component.html b/src/app/modules/dashboard/components/news-card/news-card.component.html index 37053164f..c2089592b 100644 --- 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 @@ -
-
+
+
{{card.cardTitle}}
- {{card.news.title}} + {{news.title}}
- {{card.news.content}} + {{news.content}}
\ No newline at end of file diff --git a/src/app/modules/dashboard/components/news-card/news-card.component.scss b/src/app/modules/dashboard/components/news-card/news-card.component.scss index f3244f35f..4bf82aa20 100644 --- 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; diff --git a/src/app/modules/dashboard/dashboard.component.html b/src/app/modules/dashboard/dashboard.component.html index fc2cdb30a..93766906b 100644 --- a/src/app/modules/dashboard/dashboard.component.html +++ b/src/app/modules/dashboard/dashboard.component.html @@ -1,6 +1,7 @@
- - - + + + -
\ No newline at end of file +
+ \ No newline at end of file diff --git a/src/app/modules/dashboard/dashboard.component.ts b/src/app/modules/dashboard/dashboard.component.ts index c2be4e5d3..5cf26bac7 100644 --- 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; 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 + ); } } diff --git a/src/app/modules/dashboard/dashboard.module.ts b/src/app/modules/dashboard/dashboard.module.ts index 3804451ff..75c532d9a 100644 --- 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, diff --git a/src/index.html b/src/index.html index 4d237f071..0b40b13a0 100644 --- a/src/index.html +++ b/src/index.html @@ -6,6 +6,7 @@ + From 87d4dcd7bbb3526fc04176c2f29d5163c4ae9b2e Mon Sep 17 00:00:00 2001 From: Eraldo Hasanaj Date: Sun, 10 Feb 2019 16:52:09 +0100 Subject: [PATCH 05/11] load compleate on search products compleate --- .../search-results/search-results.component.html | 2 +- .../components/search-results/search-results.component.ts | 8 ++++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/app/components/search-results/search-results.component.html b/src/app/components/search-results/search-results.component.html index 0839d8278..51f55c071 100644 --- a/src/app/components/search-results/search-results.component.html +++ b/src/app/components/search-results/search-results.component.html @@ -13,7 +13,7 @@
diff --git a/src/app/components/search-results/search-results.component.ts b/src/app/components/search-results/search-results.component.ts index ba2d6760e..04e734c68 100644 --- 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; 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 + ); } } From 25146545b5cdf501cb96b6af55249797e23b3e06 Mon Sep 17 00:00:00 2001 From: Eraldo Hasanaj Date: Sun, 10 Feb 2019 17:32:50 +0100 Subject: [PATCH 06/11] [HIMA-69][HIMA-73] fixed price format --- .../product-card/product-card.component.html | 2 +- .../product-card/product-card.component.ts | 7 +++++++ .../product-details/product-details.component.ts | 7 ++++++- src/app/core/mappings/feed.mapping.ts | 6 ++++-- src/app/core/models/feed-book.model.ts | 2 ++ .../components/book-card/book-card.component.html | 4 ++-- .../components/book-card/book-card.component.ts | 14 ++++++++++++++ 7 files changed, 36 insertions(+), 6 deletions(-) diff --git a/src/app/components/product-card/product-card.component.html b/src/app/components/product-card/product-card.component.html index 743178035..3a50db78e 100644 --- a/src/app/components/product-card/product-card.component.html +++ b/src/app/components/product-card/product-card.component.html @@ -23,7 +23,7 @@
- {{ product.price }} + {{ price }} {{ product.currency }}
diff --git a/src/app/components/product-card/product-card.component.ts b/src/app/components/product-card/product-card.component.ts index 5e754ece5..5deb9204a 100644 --- 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(); imageUrl$: Observable; diff --git a/src/app/components/product-details/product-details.component.ts b/src/app/components/product-details/product-details.component.ts index ba69be8b6..e2866c76b 100644 --- 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 { diff --git a/src/app/core/mappings/feed.mapping.ts b/src/app/core/mappings/feed.mapping.ts index 04f78e8ec..b91c20e35 100644 --- a/src/app/core/mappings/feed.mapping.ts +++ b/src/app/core/mappings/feed.mapping.ts @@ -26,7 +26,8 @@ export class FeedMapping { 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 + ' ' + feed.items[0].av[0].price.value.currency + firstBookPrice: feed.items[0].av[0].price.value.value, + firstBookCurrency: feed.items[0].av[0].price.value.currency }; if (feed.items[1]) { books = { @@ -38,7 +39,8 @@ export class FeedMapping { 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 + ' ' + feed.items[0].av[0].price.value.currency + secondBookPrice: feed.items[1].av[0].price.value.value, + secondBookCurrency: feed.items[1].av[0].price.value.currency }; } } else if (feed.type === 'events') { diff --git a/src/app/core/models/feed-book.model.ts b/src/app/core/models/feed-book.model.ts index 8c04678f2..6045b500f 100644 --- a/src/app/core/models/feed-book.model.ts +++ b/src/app/core/models/feed-book.model.ts @@ -7,6 +7,7 @@ export interface FeedBook { firstBookTypeIcon: string; firstBookLanguage: string; firstBookPrice: string; + firstBookCurrency: string; firstBookIcon: string; secondBookEan?: string; secondBookAuthor?: string; @@ -16,4 +17,5 @@ export interface FeedBook { secondBookLanguage?: string; secondBookPrice?: string; secondBookIcon?: string; + secondBookCurrency?: string; } diff --git a/src/app/modules/dashboard/components/book-card/book-card.component.html b/src/app/modules/dashboard/components/book-card/book-card.component.html index bd7cfb539..94e2fa9fc 100644 --- a/src/app/modules/dashboard/components/book-card/book-card.component.html +++ b/src/app/modules/dashboard/components/book-card/book-card.component.html @@ -20,7 +20,7 @@
{{card.books.firstBookLanguage}}
|
-
{{card.books.firstBookPrice}}
+
{{price}}
@@ -41,7 +41,7 @@
{{card.books.secondBookLanguage}}
|
-
{{card.books.secondBookPrice}}
+
{{secondPrice}}
diff --git a/src/app/modules/dashboard/components/book-card/book-card.component.ts b/src/app/modules/dashboard/components/book-card/book-card.component.ts index 37b554558..6a8952ec0 100644 --- a/src/app/modules/dashboard/components/book-card/book-card.component.ts +++ b/src/app/modules/dashboard/components/book-card/book-card.component.ts @@ -16,6 +16,20 @@ export class BookCardComponent implements OnInit { 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) From 3bd9e7672c3c6b9bdf96bcf6e9022391bb0e9966 Mon Sep 17 00:00:00 2001 From: Eraldo Hasanaj Date: Sun, 10 Feb 2019 19:06:11 +0100 Subject: [PATCH 07/11] [HIMA-13] Addresing QA comments --- src/app/components/product-card/product-card.component.html | 6 +++--- .../product-details/product-details.component.html | 4 ++-- .../product-details/product-details.component.scss | 2 +- src/app/core/mappings/product.mapping.ts | 4 +++- 4 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/app/components/product-card/product-card.component.html b/src/app/components/product-card/product-card.component.html index 3a50db78e..2c6f5954f 100644 --- a/src/app/components/product-card/product-card.component.html +++ b/src/app/components/product-card/product-card.component.html @@ -41,7 +41,7 @@
-
+
{{ product.itemsInStock }}x
-
+
{{ product.notAvailableReason }}
@@ -85,7 +85,7 @@
- {{ product.category }} + {{ product.location }}
diff --git a/src/app/components/product-details/product-details.component.html b/src/app/components/product-details/product-details.component.html index 4606b13dd..96c2c55ea 100644 --- a/src/app/components/product-details/product-details.component.html +++ b/src/app/components/product-details/product-details.component.html @@ -35,10 +35,10 @@
Lieferbar
-
+
-
+
{{product.quantity}}
diff --git a/src/app/components/product-details/product-details.component.scss b/src/app/components/product-details/product-details.component.scss index 0b255e9dd..0dc6752b2 100644 --- 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 { diff --git a/src/app/core/mappings/product.mapping.ts b/src/app/core/mappings/product.mapping.ts index d16768d25..ca5b7362e 100644 --- a/src/app/core/mappings/product.mapping.ts +++ b/src/app/core/mappings/product.mapping.ts @@ -35,6 +35,8 @@ export class ProductMapping { itemsInStock = item.st.reduce((aggr, si) => aggr + si.inStock, 0); } + console.log(item); + return { author: item.pr.contributors, availability: !!availability, @@ -45,7 +47,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, From db3e3685d695768a610e6227be3ce4bb88de13f5 Mon Sep 17 00:00:00 2001 From: Eraldo Hasanaj Date: Mon, 11 Feb 2019 00:06:04 +0100 Subject: [PATCH 08/11] [HIMA-29] fixed filter visibility on article search --- .../article-search.component.ts | 0 src/app/core/mappings/product.mapping.ts | 2 -- src/app/core/services/filter.service.ts | 26 ++++++++++++------- src/app/core/store/state/feed.state.ts | 2 -- .../text-search/text-search.component.ts | 1 + 5 files changed, 17 insertions(+), 14 deletions(-) create mode 100644 src/app/components/article-search/article-search.component.ts diff --git a/src/app/components/article-search/article-search.component.ts b/src/app/components/article-search/article-search.component.ts new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/core/mappings/product.mapping.ts b/src/app/core/mappings/product.mapping.ts index ca5b7362e..fecfbcbdf 100644 --- a/src/app/core/mappings/product.mapping.ts +++ b/src/app/core/mappings/product.mapping.ts @@ -35,8 +35,6 @@ export class ProductMapping { itemsInStock = item.st.reduce((aggr, si) => aggr + si.inStock, 0); } - console.log(item); - return { author: item.pr.contributors, availability: !!availability, diff --git a/src/app/core/services/filter.service.ts b/src/app/core/services/filter.service.ts index 9000428f4..bfeed3417 100644 --- 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 { const newFilterState = filters.map((filter: Filter) => { @@ -54,17 +58,19 @@ export class FilterService { // service method to get the first 3 filters getFilters(): Observable { - // TODO: implement call to backend API to get filter metadata - // this.service.settings().subscribe( - // (data: ApiResponse) => - // console.log(data.result.filter, data.result.orderBy, data) - // ); - return of(filterMock.slice(0, 3)); + return this.service.settings().pipe( + map( + (data: ApiResponse) => + this.filterMapping.fromUiSettingsDto(data.result).slice(0, 3) + )); } // service method to get filters metadata getFullFilter(): Observable { - // TODO: implement call to backend API to get filter metadata - return of(filterMock); + return this.service.settings().pipe( + map( + (data: ApiResponse) => + this.filterMapping.fromUiSettingsDto(data.result) + )); } } diff --git a/src/app/core/store/state/feed.state.ts b/src/app/core/store/state/feed.state.ts index b8be4f103..a909536e0 100644 --- a/src/app/core/store/state/feed.state.ts +++ b/src/app/core/store/state/feed.state.ts @@ -31,11 +31,9 @@ export class FeedState { const state = ctx.getState(); this.feedService.info().subscribe( (feed: PagedApiResponse>) => { - console.log(feed); const feeds = feed.result.map(t => this.feedMapping.fromFeedDTO(t) ); - console.log(feeds); ctx.patchState({ ...state, feed: [...feeds] diff --git 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 index 37560be28..7fcd09215 100644 --- 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 @@ -142,6 +142,7 @@ export class TextSearchComponent implements OnInit, AfterViewInit { } createTab() { + this.searchParams = this.searchInput.input; this.loadProcesses(); if (this.processes.length === 0) { this.createProcess(); From d30c8458344d288d9c2022baf3f4092e0766a06a Mon Sep 17 00:00:00 2001 From: Eraldo Hasanaj Date: Mon, 11 Feb 2019 01:20:54 +0100 Subject: [PATCH 09/11] [HIMA-29] Implemented filter logic with filter backend API --- src/app/components/menu/menu.component.scss | 2 +- src/app/core/mappings/filter-item.mapping.ts | 2 +- src/app/core/services/filter.service.ts | 20 +++++++++++++ src/app/core/services/product.service.ts | 7 +++-- src/app/core/store/actions/filter.actions.ts | 7 +++++ src/app/core/store/state/filter.state.ts | 29 +++++++++++++++++-- .../filter-item/filter-item.component.ts | 7 +++-- .../components/filter/filter.component.scss | 2 +- .../text-search/text-search.component.ts | 12 +++----- 9 files changed, 70 insertions(+), 18 deletions(-) diff --git a/src/app/components/menu/menu.component.scss b/src/app/components/menu/menu.component.scss index e75467b25..39035f473 100644 --- 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; } diff --git a/src/app/core/mappings/filter-item.mapping.ts b/src/app/core/mappings/filter-item.mapping.ts index f27c4dd30..ee4ce79fb 100644 --- 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 }; diff --git a/src/app/core/services/filter.service.ts b/src/app/core/services/filter.service.ts index bfeed3417..71fbe1c0a 100644 --- a/src/app/core/services/filter.service.ts +++ b/src/app/core/services/filter.service.ts @@ -47,6 +47,17 @@ export class FilterService { return of(newFilterState); } + toggleFilterItemsByName(filters: Filter[], name: string): Observable { + 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) { @@ -56,6 +67,15 @@ 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 { return this.service.settings().pipe( diff --git a/src/app/core/services/product.service.ts b/src/app/core/services/product.service.ts index edca220c8..0ce658ede 100644 --- 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>; 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); diff --git a/src/app/core/store/actions/filter.actions.ts b/src/app/core/store/actions/filter.actions.ts index d206eb7b1..f4dc13683 100644 --- 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[]) {} +} diff --git a/src/app/core/store/state/filter.state.ts b/src/app/core/store/state/filter.state.ts index d138b77ef..a022d2f8f 100644 --- 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) { const state = ctx.getState(); @@ -87,4 +99,17 @@ export class FilterState { } ); } + + @Action(ToggleFilterItemByName) + toggleItemByName(ctx: StateContext, { name, payload }: ToggleFilterItemByName) { + const state = ctx.getState(); + this.filterService.toggleFilterItemsByName(payload, name).subscribe( + (filters: Filter[]) => { + ctx.patchState({ + ...state, + filters: [...filters] + }); + } + ); + } } diff --git 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 index ff6af0027..e3683f4ae 100644 --- 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() { + } } diff --git a/src/app/modules/article-search/components/filter/filter.component.scss b/src/app/modules/article-search/components/filter/filter.component.scss index bd53c75ab..052d2c7ae 100644 --- 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; diff --git 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 index 7fcd09215..95fcd008a 100644 --- 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; + @Select(FilterState.getSelectedFilters) filters$: Observable; 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 = { 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)); } From b6705c0017378b8a7c4aa207aae75dc98a671793 Mon Sep 17 00:00:00 2001 From: Eraldo Hasanaj Date: Mon, 11 Feb 2019 01:32:04 +0100 Subject: [PATCH 10/11] Fixed article search loop icon not working --- .../components/search-input/search-input.component.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/app/shared/components/search-input/search-input.component.ts b/src/app/shared/components/search-input/search-input.component.ts index a9780f276..afa3dfd7a 100644 --- 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" /> @@ -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); From 9e9198a4230d76336d9f93203a8aa72d9583a26d Mon Sep 17 00:00:00 2001 From: Milos Jovanov Date: Mon, 11 Feb 2019 08:01:33 +0100 Subject: [PATCH 11/11] [HIMA-44] FE: Add to cart dialog QA comments implemented. --- src/app/components/checkout/checkout.component.scss | 5 +++-- src/app/shared/components/modal/modal.component.scss | 2 +- src/index.html | 3 +-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/app/components/checkout/checkout.component.scss b/src/app/components/checkout/checkout.component.scss index 71c9dcefc..4f5f02fca 100644 --- 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; diff --git a/src/app/shared/components/modal/modal.component.scss b/src/app/shared/components/modal/modal.component.scss index 64f93d587..76cac54e8 100644 --- 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 */ diff --git a/src/index.html b/src/index.html index 0b40b13a0..69d013098 100644 --- a/src/index.html +++ b/src/index.html @@ -7,9 +7,8 @@ - - +