-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merged PR 11794: GB3-333: DataCatalogue filtering
This PR adds the DataCatalogueFilter shenanigans: * Adds the filter component as a popup * Adds a basic filter button (without the final design) AND all the chips (yummy) * Refactored some existing components (i.e. the accordion) to be reusable * Adds tests (note: I had to use a `get`ter for the filterConfig, because it was not testable using `public readonly`, since I have to play with the configuration to test all paths - it's not optimal, I know)
- Loading branch information
Showing
33 changed files
with
984 additions
and
102 deletions.
There are no files selected for viewing
21 changes: 21 additions & 0 deletions
21
...logue/components/data-catalogue-filter-dialog/data-catalogue-filter-dialog.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| <h1 mat-dialog-title>Filter</h1> | ||
| <div mat-dialog-content class="filter-dialog-content"> | ||
| <cdk-accordion> | ||
| <accordion-item *ngFor="let filter of dataCatalogueFilters; trackBy: trackByFilterLabel" [header]="filter.label" variant="dark"> | ||
| <div class="filter-dialog-content__wrapper"> | ||
| <mat-checkbox | ||
| class="filter-dialog-content__wrapper__checkbox" | ||
| (change)="toggleFilter(filter.key, filterValue.value)" | ||
| *ngFor="let filterValue of filter.filterValues" | ||
| [checked]="filterValue.isActive" | ||
| > | ||
| {{ filterValue.value }} | ||
| </mat-checkbox> | ||
| </div> | ||
| </accordion-item> | ||
| </cdk-accordion> | ||
| </div> | ||
| <div mat-dialog-actions> | ||
| <button (click)="resetFilters()" mat-button>Zurücksetzen</button> | ||
| <button (click)="close()" mat-button>Schliessen</button> | ||
| </div> |
19 changes: 19 additions & 0 deletions
19
...logue/components/data-catalogue-filter-dialog/data-catalogue-filter-dialog.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| @use 'functions/helper.function' as functions; | ||
| @use 'mixins/material.mixin' as mat-mixins; | ||
| @use 'variables/ktzh-design-variables' as ktzh-variables; | ||
|
|
||
| :host ::ng-deep .filter-dialog-content__wrapper__checkbox { | ||
| @include mat-mixins.mat-checkbox-override-accent-color( | ||
| functions.get-color-from-palette(ktzh-variables.$zh-secondary-accent), | ||
| functions.get-contrast-color-from-palette(ktzh-variables.$zh-secondary-accent) | ||
| ); | ||
| } | ||
|
|
||
| .filter-dialog-content { | ||
| padding: 20px 24px 20px 24px; | ||
|
|
||
| .filter-dialog-content__wrapper { | ||
| display: flex; | ||
| flex-flow: column; | ||
| } | ||
| } |
50 changes: 50 additions & 0 deletions
50
...talogue/components/data-catalogue-filter-dialog/data-catalogue-filter-dialog.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import {Component, OnDestroy, OnInit} from '@angular/core'; | ||
| import {MatDialogRef} from '@angular/material/dialog'; | ||
| import {DataCatalogueFilter} from '../../../shared/interfaces/data-catalogue-filter.interface'; | ||
| import {Observable, Subscription, tap} from 'rxjs'; | ||
| import {selectFilters} from '../../../state/data-catalogue/reducers/data-catalogue.reducer'; | ||
| import {Store} from '@ngrx/store'; | ||
| import {DataCatalogueActions} from '../../../state/data-catalogue/actions/data-catalogue.actions'; | ||
| import {DataCatalogueFilterKey} from '../../../shared/types/data-catalogue-filter.type'; | ||
|
|
||
| @Component({ | ||
| selector: 'data-catalogue-filter-dialog', | ||
| templateUrl: './data-catalogue-filter-dialog.component.html', | ||
| styleUrls: ['./data-catalogue-filter-dialog.component.scss'], | ||
| }) | ||
| export class DataCatalogueFilterDialogComponent implements OnInit, OnDestroy { | ||
| public dataCatalogueFilters: DataCatalogueFilter[] = []; | ||
| private readonly dataCatalogueFilters$: Observable<DataCatalogueFilter[]> = this.store.select(selectFilters); | ||
| private readonly subscriptions: Subscription = new Subscription(); | ||
|
|
||
| constructor( | ||
| private readonly dialogRef: MatDialogRef<DataCatalogueFilterDialogComponent>, | ||
| private readonly store: Store, | ||
| ) {} | ||
|
|
||
| public ngOnDestroy() { | ||
| this.subscriptions.unsubscribe(); | ||
| } | ||
|
|
||
| public ngOnInit() { | ||
| this.subscriptions.add( | ||
| this.dataCatalogueFilters$.pipe(tap((dataCatalogueFilters) => (this.dataCatalogueFilters = dataCatalogueFilters))).subscribe(), | ||
| ); | ||
| } | ||
|
|
||
| public trackByFilterLabel(index: number, item: DataCatalogueFilter) { | ||
| return item.label; | ||
| } | ||
|
|
||
| public toggleFilter(key: DataCatalogueFilterKey, filterValue: string) { | ||
| this.store.dispatch(DataCatalogueActions.toggleFilter({key, value: filterValue})); | ||
| } | ||
|
|
||
| public resetFilters() { | ||
| this.store.dispatch(DataCatalogueActions.resetFilters()); | ||
| } | ||
|
|
||
| public close() { | ||
| this.dialogRef.close(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 27 additions & 0 deletions
27
src/app/shared/components/accordion-item/accordion-item.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| <cdk-accordion-item | ||
| #accordionItem="cdkAccordionItem" | ||
| [attr.aria-controls]="'media-contact-body-' + ariaIdentifier" | ||
| [attr.aria-expanded]="accordionItem.expanded" | ||
| [attr.id]="'media-contact-header-' + ariaIdentifier" | ||
| class="accordion-item" | ||
| role="button" | ||
| tabindex="0" | ||
| > | ||
| <div class="accordion-item__content" [ngClass]="{'accordion-item__content--dark': variant === 'dark'}"> | ||
| <div (click)="accordionItem.toggle()" class="accordion-item__content__header mat-h2"> | ||
| <span>{{ header }}</span> | ||
| <span class="accordion-item__content__header__icon-wrapper"> | ||
| <mat-icon [svgIcon]="accordionItem.expanded ? 'ktzh_remove' : 'ktzh_add'"></mat-icon> | ||
| </span> | ||
| </div> | ||
| <div | ||
| [attr.aria-labelledby]="'media-contact-header-' + ariaIdentifier" | ||
| [attr.id]="'media-contact-body-' + ariaIdentifier" | ||
| [style.display]="accordionItem.expanded ? '' : 'none'" | ||
| class="accordion-item__content__body" | ||
| role="region" | ||
| > | ||
| <ng-content></ng-content> | ||
| </div> | ||
| </div> | ||
| </cdk-accordion-item> |
36 changes: 36 additions & 0 deletions
36
src/app/shared/components/accordion-item/accordion-item.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| @use 'variables/ktzh-design-variables' as ktzh-variables; | ||
|
|
||
| .accordion-item { | ||
| .accordion-item__content { | ||
| border-width: 1px 0; | ||
| border-color: ktzh-variables.$zh-white; | ||
| border-style: solid; | ||
| /* Use negative margin to overlap the borders. Hack? */ | ||
| /* todo: The issue here is that for this to work, you'd also have to | ||
| * set border-bottom to none for all .accordion_item__content:not(:last-child) | ||
| * set the negative margin on .accordion_item + .accordion_item | ||
| -> That way, it would be properly faked. But it does not work because we cannot access the host container of the host, which would be the accordion? | ||
| */ | ||
| margin-top: -1px; | ||
|
|
||
| &--dark { | ||
| border-color: ktzh-variables.$zh-black20; | ||
| } | ||
|
|
||
| .accordion-item__content__header { | ||
| margin: 18px 0; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| cursor: pointer; | ||
|
|
||
| .accordion-item__content__header__icon-wrapper { | ||
| display: flex; | ||
| } | ||
| } | ||
|
|
||
| .accordion-item__content__body { | ||
| margin-bottom: 24px; | ||
| } | ||
| } | ||
| } |
25 changes: 25 additions & 0 deletions
25
src/app/shared/components/accordion-item/accordion-item.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import {Component, Input, OnInit} from '@angular/core'; | ||
|
|
||
| /** | ||
| * Implements the KTZH accordion style; to be used with a cdk-accordion element. | ||
| */ | ||
| @Component({ | ||
| selector: 'accordion-item', | ||
| templateUrl: './accordion-item.component.html', | ||
| styleUrls: ['./accordion-item.component.scss'], | ||
| }) | ||
| export class AccordionItemComponent implements OnInit { | ||
| /** | ||
| * Defines the color of the borders and the text: | ||
| * * Light = white borders, white font | ||
| * * Dark = dark borders, black font | ||
| */ | ||
| @Input() public variant: 'light' | 'dark' = 'light'; | ||
| @Input() public header!: string; | ||
| public ariaIdentifier!: string; | ||
|
|
||
| public ngOnInit() { | ||
| // generate identifier without custom characters and stuff for aria identification | ||
| this.ariaIdentifier = btoa(this.header); | ||
| } | ||
| } |
Oops, something went wrong.