sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-31 09:37:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

fixing filter bindings

Browse Source
This commit is contained in:
Peter Skrlj
2019-02-08 21:26:21 +01:00
parent a86172ce04
commit c58cafa34c
4 changed files with 214 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

339
mocks/filters.mock.ts
View File

@@ -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[] = <Filter[]>[
<Filter>{
id: 1,
name: 'Schnellsuche',
items: <FilterItem[]> [
<FilterItem> {
id: 1,
name: 'First filter',
selected: false
},
<FilterItem> {
id: 2,
name: 'Second filter',
selected: false
} ,
<FilterItem> {
id: 3,
name: 'Third filter',
selected: false
}
],
expanded: false
},
<Filter>{
id: 2,
name: 'Sortierung',
items: <FilterItem[]> [
<FilterItem> {
id: 1,
name: 'A - Z',
selected: false
},
<FilterItem> {
id: 2,
name: 'Z - A',
selected: false
}
],
expanded: false
},
<Filter>{
id: 3,
name: 'Warengruppe',
items: <FilterItem[]> [
<FilterItem> {
id: 1,
name: 'Group by publisher',
selected: false
},
<FilterItem> {
id: 2,
name: 'Group by title',
selected: false
}
,
<FilterItem> {
id: 3,
name: 'Group by price',
selected: false
},
<FilterItem> {
id: 4,
name: 'Group by author',
selected: false
},
<FilterItem> {
id: 5,
name: 'Group by type',
selected: false
}
],
expanded: false
},
<Filter>{
id: 4,
name: 'Lesealter',
items: <FilterItem[]> [
<FilterItem> {
id: 1,
name: 'First filter',
selected: false
},
<FilterItem> {
id: 2,
name: 'Second filter',
selected: false
} ,
<FilterItem> {
id: 3,
name: 'Third filter',
selected: false
}
],
expanded: false
},
<Filter>{
id: 5,
name: 'Sprache',
items: <FilterItem[]> [
<FilterItem> {
id: 1,
name: 'Englisch',
selected: false
},
<FilterItem> {
id: 2,
name: 'Deutsch',
selected: false
}
],
expanded: false
},
<Filter>{
id: 6,
name: 'Bestand',
items: <FilterItem[]> [
<FilterItem> {
id: 1,
name: 'First filter',
selected: false
},
<FilterItem> {
id: 2,
name: 'Second filter',
selected: false
} ,
<FilterItem> {
id: 3,
name: 'Third filter',
selected: false
}
],
expanded: false
},
<Filter>{
id: 7,
name: 'Kategorien',
items: <FilterItem[]> [
<FilterItem> {
id: 1,
name: 'Bücher',
selected: false
},
<FilterItem> {
id: 2,
name: 'eBooks',
selected: false
},
<FilterItem> {
id: 3,
name: 'tolino',
selected: false
},
<FilterItem> {
id: 4,
name: 'Hörbücher',
selected: false
},
<FilterItem> {
id: 5,
name: 'Film',
selected: false
},
<FilterItem> {
id: 6,
name: 'Musik',
selected: false
}
],
expanded: false
}
<Filter>{
id: '1',
name: 'Schnellsuche',
items: <FilterItem[]>[
<FilterItem>{
id: '1',
name: 'First filter',
selected: false
},
<FilterItem>{
id: '2',
name: 'Second filter',
selected: false
},
<FilterItem>{
id: '3',
name: 'Third filter',
selected: false
}
],
expanded: false
},
<Filter>{
id: '2',
name: 'Sortierung',
items: <FilterItem[]>[
<FilterItem>{
id: '1',
name: 'A - Z',
selected: false
},
<FilterItem>{
id: '2',
name: 'Z - A',
selected: false
}
],
expanded: false
},
<Filter>{
id: '3',
name: 'Warengruppe',
items: <FilterItem[]>[
<FilterItem>{
id: '1',
name: 'Group by publisher',
selected: false
},
<FilterItem>{
id: '2',
name: 'Group by title',
selected: false
},
<FilterItem>{
id: '3',
name: 'Group by price',
selected: false
},
<FilterItem>{
id: '4',
name: 'Group by author',
selected: false
},
<FilterItem>{
id: '5',
name: 'Group by type',
selected: false
}
],
expanded: false
},
<Filter>{
id: '4',
name: 'Lesealter',
items: <FilterItem[]>[
<FilterItem>{
id: '1',
name: 'First filter',
selected: false
},
<FilterItem>{
id: '2',
name: 'Second filter',
selected: false
},
<FilterItem>{
id: '3',
name: 'Third filter',
selected: false
}
],
expanded: false
},
<Filter>{
id: '5',
name: 'Sprache',
items: <FilterItem[]>[
<FilterItem>{
id: '1',
name: 'Englisch',
selected: false
},
<FilterItem>{
id: '2',
name: 'Deutsch',
selected: false
}
],
expanded: false
},
<Filter>{
id: '6',
name: 'Bestand',
items: <FilterItem[]>[
<FilterItem>{
id: '1',
name: 'First filter',
selected: false
},
<FilterItem>{
id: '2',
name: 'Second filter',
selected: false
},
<FilterItem>{
id: '3',
name: 'Third filter',
selected: false
}
],
expanded: false
},
<Filter>{
id: '7',
name: 'Kategorien',
items: <FilterItem[]>[
<FilterItem>{
id: '1',
name: 'Bücher',
selected: false
},
<FilterItem>{
id: '2',
name: 'eBooks',
selected: false
},
<FilterItem>{
id: '3',
name: 'tolino',
selected: false
},
<FilterItem>{
id: '4',
name: 'Hörbücher',
selected: false
},
<FilterItem>{
id: '5',
name: 'Film',
selected: false
},
<FilterItem>{
id: '6',
name: 'Musik',
selected: false
}
],
expanded: false
}
];

21
src/app/components/filter-item/filter-item.component.ts
View File

@@ -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() {}
}

61
src/app/core/services/filter.service.ts
View File

@@ -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<Filter[]> {
const newFilterState = filters.map(
(filter: Filter) => {
if (filter.id === id) {
return {...filter, expanded: true};
}
return {...filter, expanded: false };
selectFilterById(filters: Filter[], id: string): Observable<Filter[]> {
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<Filter[]> {
const newFilterState = filters.map(
(filter: Filter) => {
if (filter.id === id) {
return {...filter, expanded: false};
}
return {...filter };
unselectFilterById(filters: Filter[], id: string): Observable<Filter[]> {
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<Filter[]> {
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<Filter[]> {
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

16
src/app/core/store/actions/filter.actions.ts
View File

@@ -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[]) {}
}