From c58cafa34c0e83306980f66cce7e7045f81d809d Mon Sep 17 00:00:00 2001 From: Peter Skrlj Date: Fri, 8 Feb 2019 21:26:21 +0100 Subject: [PATCH] fixing filter bindings --- mocks/filters.mock.ts | 339 +++++++++--------- .../filter-item/filter-item.component.ts | 21 +- src/app/core/services/filter.service.ts | 61 ++-- src/app/core/store/actions/filter.actions.ts | 16 +- 4 files changed, 214 insertions(+), 223 deletions(-) diff --git a/mocks/filters.mock.ts b/mocks/filters.mock.ts index 77eded7d0..c8aeaaeae 100644 --- a/mocks/filters.mock.ts +++ b/mocks/filters.mock.ts @@ -2,174 +2,173 @@ import { Filter } from 'src/app/core/models/filter.model'; import { FilterItem } from 'src/app/core/models/filter-item.model'; export const filterMock: Filter[] = [ - { - id: 1, - name: 'Schnellsuche', - items: [ - { - id: 1, - name: 'First filter', - selected: false - }, - { - id: 2, - name: 'Second filter', - selected: false - } , - { - id: 3, - name: 'Third filter', - selected: false - } - ], - expanded: false - }, - { - id: 2, - name: 'Sortierung', - items: [ - { - id: 1, - name: 'A - Z', - selected: false - }, - { - id: 2, - name: 'Z - A', - selected: false - } - ], - expanded: false - }, - { - id: 3, - name: 'Warengruppe', - items: [ - { - id: 1, - name: 'Group by publisher', - selected: false - }, - { - id: 2, - name: 'Group by title', - selected: false - } - , - { - id: 3, - name: 'Group by price', - selected: false - }, - { - id: 4, - name: 'Group by author', - selected: false - }, - { - id: 5, - name: 'Group by type', - selected: false - } - ], - expanded: false - }, - { - id: 4, - name: 'Lesealter', - items: [ - { - id: 1, - name: 'First filter', - selected: false - }, - { - id: 2, - name: 'Second filter', - selected: false - } , - { - id: 3, - name: 'Third filter', - selected: false - } - ], - expanded: false - }, - { - id: 5, - name: 'Sprache', - items: [ - { - id: 1, - name: 'Englisch', - selected: false - }, - { - id: 2, - name: 'Deutsch', - selected: false - } - ], - expanded: false - }, - { - id: 6, - name: 'Bestand', - items: [ - { - id: 1, - name: 'First filter', - selected: false - }, - { - id: 2, - name: 'Second filter', - selected: false - } , - { - id: 3, - name: 'Third filter', - selected: false - } - ], - expanded: false - }, - { - id: 7, - name: 'Kategorien', - items: [ - { - id: 1, - name: 'Bücher', - selected: false - }, - { - id: 2, - name: 'eBooks', - selected: false - }, - { - id: 3, - name: 'tolino', - selected: false - }, - { - id: 4, - name: 'Hörbücher', - selected: false - }, - { - id: 5, - name: 'Film', - selected: false - }, - { - id: 6, - name: 'Musik', - selected: false - } - ], - expanded: false - } + { + id: '1', + name: 'Schnellsuche', + items: [ + { + id: '1', + name: 'First filter', + selected: false + }, + { + id: '2', + name: 'Second filter', + selected: false + }, + { + id: '3', + name: 'Third filter', + selected: false + } + ], + expanded: false + }, + { + id: '2', + name: 'Sortierung', + items: [ + { + id: '1', + name: 'A - Z', + selected: false + }, + { + id: '2', + name: 'Z - A', + selected: false + } + ], + expanded: false + }, + { + id: '3', + name: 'Warengruppe', + items: [ + { + id: '1', + name: 'Group by publisher', + selected: false + }, + { + id: '2', + name: 'Group by title', + selected: false + }, + { + id: '3', + name: 'Group by price', + selected: false + }, + { + id: '4', + name: 'Group by author', + selected: false + }, + { + id: '5', + name: 'Group by type', + selected: false + } + ], + expanded: false + }, + { + id: '4', + name: 'Lesealter', + items: [ + { + id: '1', + name: 'First filter', + selected: false + }, + { + id: '2', + name: 'Second filter', + selected: false + }, + { + id: '3', + name: 'Third filter', + selected: false + } + ], + expanded: false + }, + { + id: '5', + name: 'Sprache', + items: [ + { + id: '1', + name: 'Englisch', + selected: false + }, + { + id: '2', + name: 'Deutsch', + selected: false + } + ], + expanded: false + }, + { + id: '6', + name: 'Bestand', + items: [ + { + id: '1', + name: 'First filter', + selected: false + }, + { + id: '2', + name: 'Second filter', + selected: false + }, + { + id: '3', + name: 'Third filter', + selected: false + } + ], + expanded: false + }, + { + id: '7', + name: 'Kategorien', + items: [ + { + id: '1', + name: 'Bücher', + selected: false + }, + { + id: '2', + name: 'eBooks', + selected: false + }, + { + id: '3', + name: 'tolino', + selected: false + }, + { + id: '4', + name: 'Hörbücher', + selected: false + }, + { + id: '5', + name: 'Film', + selected: false + }, + { + id: '6', + name: 'Musik', + selected: false + } + ], + expanded: false + } ]; diff --git a/src/app/components/filter-item/filter-item.component.ts b/src/app/components/filter-item/filter-item.component.ts index f5a92d7fe..ff6af0027 100644 --- a/src/app/components/filter-item/filter-item.component.ts +++ b/src/app/components/filter-item/filter-item.component.ts @@ -1,6 +1,10 @@ import { Component, OnInit, Input } from '@angular/core'; import { Filter } from 'src/app/core/models/filter.model'; -import { SelectFilterById, UnselectFilterById, ToggleFilterItemById } from 'src/app/core/store/actions/filter.actions'; +import { + SelectFilterById, + UnselectFilterById, + ToggleFilterItemById +} from 'src/app/core/store/actions/filter.actions'; import { FilterItem } from 'src/app/core/models/filter-item.model'; import { Store } from '@ngxs/store'; @@ -10,7 +14,6 @@ import { Store } from '@ngxs/store'; styleUrls: ['./filter-item.component.scss'] }) export class FilterItemComponent implements OnInit { - @Input() filter: Filter; @Input() @@ -18,12 +21,12 @@ export class FilterItemComponent implements OnInit { @Input() expanded: boolean; - constructor(private store: Store) { } + constructor(private store: Store) {} - toggleMenu(id: number) { - const action = this.filter.expanded ? - new UnselectFilterById(id, this.filters) : - new SelectFilterById(id, this.filters); + toggleMenu(id: string) { + const action = this.filter.expanded + ? new UnselectFilterById(id, this.filters) + : new SelectFilterById(id, this.filters); this.store.dispatch(action); } @@ -31,7 +34,5 @@ export class FilterItemComponent implements OnInit { this.store.dispatch(new ToggleFilterItemById(item.id, this.filters)); } - ngOnInit() { - } - + ngOnInit() {} } diff --git a/src/app/core/services/filter.service.ts b/src/app/core/services/filter.service.ts index d194b8272..9000428f4 100644 --- a/src/app/core/services/filter.service.ts +++ b/src/app/core/services/filter.service.ts @@ -10,55 +10,46 @@ import { FilterItem } from '../models/filter-item.model'; providedIn: 'root' }) export class FilterService { + constructor(private service: CatSearchService) {} - constructor(private service: CatSearchService) { } - - selectFilterById(filters: Filter[], id: number): Observable { - const newFilterState = filters.map( - (filter: Filter) => { - if (filter.id === id) { - return {...filter, expanded: true}; - } - return {...filter, expanded: false }; + selectFilterById(filters: Filter[], id: string): Observable { + const newFilterState = filters.map((filter: Filter) => { + if (filter.id === id) { + return { ...filter, expanded: true }; } - ); + return { ...filter, expanded: false }; + }); return of(newFilterState); } - unselectFilterById(filters: Filter[], id: number): Observable { - const newFilterState = filters.map( - (filter: Filter) => { - if (filter.id === id) { - return {...filter, expanded: false}; - } - return {...filter }; + unselectFilterById(filters: Filter[], id: string): Observable { + const newFilterState = filters.map((filter: Filter) => { + if (filter.id === id) { + return { ...filter, expanded: false }; } - ); + return { ...filter }; + }); return of(newFilterState); } - toggleFilterItemsById(filters: Filter[], id: number): Observable { - const newFilterState = filters.map( - (filter: Filter) => { - if (filter.expanded === true) { - const newItemsState = this.toggleItem(filter.items, id); - return { ...filter, items: newItemsState }; - } - return { ...filter }; + toggleFilterItemsById(filters: Filter[], id: string): Observable { + const newFilterState = filters.map((filter: Filter) => { + if (filter.expanded === true) { + const newItemsState = this.toggleItem(filter.items, id); + return { ...filter, items: newItemsState }; } - ); + return { ...filter }; + }); return of(newFilterState); } - private toggleItem(items: FilterItem[], id: number): FilterItem[] { - return items.map( - (item: FilterItem) => { - if (item.id === id) { - return {...item, selected: !item.selected}; - } - return { ...item }; + private toggleItem(items: FilterItem[], id: string): FilterItem[] { + return items.map((item: FilterItem) => { + if (item.id === id) { + return { ...item, selected: !item.selected }; } - ); + return { ...item }; + }); } // service method to get the first 3 filters diff --git a/src/app/core/store/actions/filter.actions.ts b/src/app/core/store/actions/filter.actions.ts index b7a937aa2..d206eb7b1 100644 --- a/src/app/core/store/actions/filter.actions.ts +++ b/src/app/core/store/actions/filter.actions.ts @@ -7,27 +7,27 @@ export const UNSELECT_FILTER_BY_ID = '[FILTERS] Unselect by id'; export const TOGGLE_FILTER_ITEM_BY_ID = '[FILTERS] Toggle item by id'; export class LoadFilters { - static readonly type = LOAD_FILTERS; + static readonly type = LOAD_FILTERS; } export class LoadFullFilters { - static readonly type = LOAD_FULL_FILTERS; + static readonly type = LOAD_FULL_FILTERS; } export class SelectFilterById { - static readonly type = SELECT_FILTER_BY_ID; + static readonly type = SELECT_FILTER_BY_ID; - constructor(public id: number, public payload: Filter[]) {} + constructor(public id: string, public payload: Filter[]) {} } export class UnselectFilterById { - static readonly type = UNSELECT_FILTER_BY_ID; + static readonly type = UNSELECT_FILTER_BY_ID; - constructor(public id: number, public payload: Filter[]) {} + constructor(public id: string, public payload: Filter[]) {} } export class ToggleFilterItemById { - static readonly type = TOGGLE_FILTER_ITEM_BY_ID; + static readonly type = TOGGLE_FILTER_ITEM_BY_ID; - constructor(public id: number, public payload: Filter[]) {} + constructor(public id: string, public payload: Filter[]) {} }