sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merged PR 87: Show partially selected filters expanded on filter overlay open

Browse Source 
Related work items: #535, #569
This commit is contained in:
Sebastian Neumair
2020-05-20 07:44:24 +00:00
parent 18160c844d 2c528f4973
commit c2c3cd115f
3 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/sales/src/app/modules/filter/filter-group/components/select-filter/select-filter-option.component.html
View File

@@ -15,7 +15,7 @@
type="button"
class="isa-btn expand-button"
[class.expanded]="option?.expanded"
(click)="option.expanded = !option?.expanded"
(click)="toggleExpanded()"
>
<lib-icon name="Arrow_Down_2"></lib-icon>
</button>

8
apps/sales/src/app/modules/filter/filter-group/components/select-filter/select-filter-option.component.ts
View File

@@ -24,7 +24,7 @@ export class SelectFilterOptionComponent implements OnChanges {
@Output()
optionChanged = new EventEmitter<SelectFilterOption>();
constructor(private cdr: ChangeDetectorRef) {}
constructor(private cdr: ChangeDetectorRef) { }
ngOnChanges({ option }: SimpleChanges): void {
if (option) {
@@ -62,6 +62,12 @@ export class SelectFilterOptionComponent implements OnChanges {
this.optionChanged.emit(this.option);
}
toggleExpanded() {
this.option.expanded = !this.option.expanded;
this.onChange();
this.cdr.markForCheck();
}
childChanged(option: SelectFilterOption, index: number) {
this.option.options[index] = option;

14
apps/sales/src/app/modules/remission/services/remission-filter.service.ts
View File

@@ -30,6 +30,7 @@ export class RemissionFilterService {
}
getFilters(): Observable<SelectFilter[]> {
// tslint:disable-next-line: deprecation
return combineLatest(this.remissionProcess$, this.resetFilters$.pipe(startWith(true))).pipe(
debounceTime(100),
filter(([process, _]) => !isNullOrUndefined(process)),
@@ -47,7 +48,7 @@ export class RemissionFilterService {
startWith({})
)
),
map(([filters, activeFilters]) => {
map(([filters, activeFilters], index) => {
// tslint:disable-next-line: no-shadowed-variable
return filters.map((filter) => {
const activeFilterMatch = activeFilters[filter.id];
@@ -65,7 +66,7 @@ export class RemissionFilterService {
...filter,
type: 'select',
key: filter.id,
options: this.traverse(filter.options as SelectFilterOption[], 'options', activeFilterMatch),
options: this.traverse(filter.options as SelectFilterOption[], 'options', activeFilterMatch, !index),
};
});
}),
@@ -160,7 +161,7 @@ export class RemissionFilterService {
return filter$.pipe(map((fltrs) => this.groupBy(fltrs)));
}
traverse<T extends SelectFilterOption>(arr: T[], prop: keyof T, match: string[]): SelectFilter[] {
traverse<T extends SelectFilterOption>(arr: T[], prop: keyof T, match: string[], setExpanded?: boolean): SelectFilter[] {
return (arr.map((item) => {
item.selected = match.includes(item.name) || match.includes(item.id);
const hasNestedOptions = Array.isArray(item[prop]);
@@ -170,6 +171,11 @@ export class RemissionFilterService {
const childFilters = item[prop];
item.selected = ((childFilters as unknown) as SelectFilterOption[]).every((f) => !!f.selected);
if (!!setExpanded) {
const hasNestedOptionsSelected = ((childFilters as unknown) as SelectFilterOption[]).some((f) => !!f.selected);
item.expanded = !item.selected && !!hasNestedOptionsSelected;
}
}
return item;
@@ -198,7 +204,7 @@ export class RemissionFilterService {
): {
[filterId: string]: string[];
} {
const result: { [filterId: string]: string[] } = {};
const result: { [filterId: string]: string[]; } = {};
f.forEach((fltr) => {
const key = fltr.key;