-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added a new filter-side-drawer component for filtering reports (#390)
* initial commit with first version of the side panel for filters. old filter has been commented out * added animation for the filter-side-drawer * made the first input fields for the metadatanames in the filter view. needs to be aligned correctly including other elements in the filter-side-drawer * made the filter side drawer look better with the input fields and made the basic method calls for updating the filter. it just needs to call the updatefilters method in table component now * put the filter fields next to each other for readability of code * added functionality to filter side drawer with the help of filter.service.ts table component functionality has barely been changed. only difference is that the api request now accepts string arrays so the parameters for the api call have also been changed. * Title change of filter side drawer * Update src/app/debug/filter-side-drawer/filter-side-drawer.component.html Co-authored-by: Sergi Philipsen <philipsen.sergi@gmail.com> * Update src/app/debug/filter-side-drawer/filter-side-drawer.component.ts Co-authored-by: Sergi Philipsen <philipsen.sergi@gmail.com> * Removed unnecessary line of code from filter-side-drawer.component.ts * changed name and order of observables and subjects of the filter.service.ts * refactor for code review. removed resetFilter from filter-side-drawer.component.ts as the trigger might as well call the resetFitler directly in the filterService. updateFilter parameter type added. Added autocomplete feature for filter options. Fixes a known ladybug-frontend issue Fixed filter side drawer size option. now possible to scroll if screen is too small * added unit tests for the mat autocomplete element * ngModelChange is now used to detect changes to user input. for filterContext a debounceTime was added to not overload the API. added cleardebugStorage() to afterEach() cypress e2e test for the filter table * filter is closed at the end of test * changed some api request issues. api was called multiple times when trying to refresh, filter reset has been removed from refresh method. moved creation of subscription in table component to ngInit to avoid multiple instances of a subscription being formed added refresh method to cypress tests * minor fixes to the structure of the code. subscriptions moved to dedicated subscribe and unsubscribe methods. Records have been changed to Maps for consistency. small css changes. Added a type to one of the subscribers where I forgot to add one. made filter-side-drawer.component.ts standalone Changed ngIf to an @if in filter-side-drawer.component.html Replaced the empty mat-option with a clear button that shows next to the metadata input element. updated the cypress e2e test accordingly with the new clear button * added word-break because correlationId would clip outside of container in firefox * added imports to spec file * FilterSideDrawerComponent removed from declaration and added to imports * Update src/app/debug/filter-side-drawer/filter-side-drawer.component.css Co-authored-by: Matthijs Smets <93487259+MatthijsSmets@users.noreply.github.com> * chore: change some styling in the filter side drawer * chore: added missing unsubscribe calls to table component * chore: removed console.logs and changed foreach loop to for loop in filter component * chore: removed unnecessary foreach and added more types to methods where it was missing. * chore: fixed some styling issues * chore: removed an unnecessary casting to string array * Update src/app/debug/filter-side-drawer/filter-side-drawer.component.html Co-authored-by: Matthijs Smets <93487259+MatthijsSmets@users.noreply.github.com> * Update src/app/debug/filter-side-drawer/filter-side-drawer.component.html Co-authored-by: Matthijs Smets <93487259+MatthijsSmets@users.noreply.github.com> --------- Co-authored-by: Sergi Philipsen <philipsen.sergi@gmail.com> Co-authored-by: Matthijs Smets <93487259+MatthijsSmets@users.noreply.github.com> Co-authored-by: MatthijsSmets <s1122126@student.hsleiden.nl>
- Loading branch information
4 people
authored
May 7, 2024
1 parent
8182b2b
commit 5a64ad7
Showing
13 changed files
with
403 additions
and
75 deletions.
There are no files selected for viewing
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
65 changes: 65 additions & 0 deletions
65
src/app/debug/filter-side-drawer/filter-side-drawer.component.css
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,65 @@ | ||
| .filter-vertical-panel { | ||
| position: fixed; | ||
| top: 0; | ||
| right: 0; | ||
| height: 100%; | ||
| width: 300px; | ||
| background-color: #f0f0f0; | ||
| box-shadow: 0 0 8px 1px gray; | ||
| z-index: 1000; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .panel-container { | ||
| position: relative; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .filter-input-container { | ||
| margin: 1rem 1rem; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| flex-grow: 4; | ||
| overflow-y: auto; | ||
| max-height: 800px; | ||
| height: 80%; | ||
| } | ||
|
|
||
| .input-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| margin: 0.6rem; | ||
| } | ||
|
|
||
| .btn-container { | ||
| display: flex; | ||
| width: calc(100% - 2rem); | ||
| justify-content: space-between; | ||
| margin: 1rem; | ||
| position: absolute; | ||
| bottom: 0; | ||
| z-index: 5; | ||
| } | ||
|
|
||
| .filter-label { | ||
| margin-left: 1rem; | ||
| margin-top: 1rem; | ||
| font-size: 1.5rem; | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| .metadata-input-label { | ||
| font-weight: bold; | ||
| font-size: .9rem; | ||
| } | ||
|
|
||
| .metadata-input-container { | ||
| display: flex; | ||
| } | ||
|
|
||
| .filter-option { | ||
| font-size: .9rem; | ||
| word-break: break-all; | ||
| } |
55 changes: 55 additions & 0 deletions
55
src/app/debug/filter-side-drawer/filter-side-drawer.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,55 @@ | ||
| @if (shouldShowFilter) { | ||
| <div @removeTrigger class="filter-vertical-panel" data-cy-debug="filter-side-drawer"> | ||
| <div class="panel-container"> | ||
| <h1 class="h1 filter-label">Filter</h1> | ||
| <div class="filter-input-container"> | ||
| @for (metadataName of metadataNames; track metadataName) { | ||
| <div class="input-container"> | ||
| <label class="metadata-input-label">{{ metadataName | titlecase }}</label> | ||
| <div class="metadata-input-container input-group"> | ||
| <input | ||
| class="form-control" | ||
| type="text" | ||
| [title]="metadataName" | ||
| [ngModel]="filterService.getCurrentFilterContext().get(metadataName)" | ||
| [matAutocomplete]="auto" | ||
| [placeholder]="'Filter for ' + metadataName" | ||
| (ngModelChange)="updateFilter($event, metadataName)" | ||
| data-cy-debug="tableFilter"> | ||
| <div class="input-group-append input-group-append"> | ||
| <button | ||
| class="btn btn-sm btn-danger button-clear-text input-group-text" | ||
| (click)="removeFilter(metadataName)" | ||
| data-cy-debug="filterClearButton"> | ||
| Clear | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <mat-autocomplete | ||
| #auto="matAutocomplete" | ||
| (optionSelected)="updateFilter($event.option.value, metadataName)"> | ||
| @for (option of currentRecords.get(metadataName.toLocaleLowerCase()); track option) { | ||
| <mat-option | ||
| [value]="option" | ||
| class="filter-option" | ||
| data-cy-debug="matAutocompleteOption"> | ||
| {{ option }} | ||
| </mat-option> | ||
| } | ||
| </mat-autocomplete> | ||
| </div> | ||
| } | ||
| </div> | ||
| <div class="btn-container"> | ||
| <button class="close-filter-btn btn btn-info" (click)="closeFilter()" data-cy-debug="close-filter-btn">Close | ||
| </button> | ||
| <button | ||
| class="clear-filter-btn btn btn-info" | ||
| (click)="filterService.resetFilter()" | ||
| data-cy-debug="clear-filter-btn"> | ||
| Clear | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| } |
24 changes: 24 additions & 0 deletions
24
src/app/debug/filter-side-drawer/filter-side-drawer.component.spec.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,24 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { FilterSideDrawerComponent } from './filter-side-drawer.component'; | ||
| import { MatAutocompleteModule } from '@angular/material/autocomplete'; | ||
| import { FormsModule } from '@angular/forms'; | ||
|
|
||
| describe('FilterSideDrawerComponent', () => { | ||
| let component: FilterSideDrawerComponent; | ||
| let fixture: ComponentFixture<FilterSideDrawerComponent>; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| imports: [MatAutocompleteModule, FormsModule, FilterSideDrawerComponent], | ||
| }).compileComponents(); | ||
|
|
||
| fixture = TestBed.createComponent(FilterSideDrawerComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
81 changes: 81 additions & 0 deletions
81
src/app/debug/filter-side-drawer/filter-side-drawer.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,81 @@ | ||
| import { Component, OnDestroy, OnInit } from '@angular/core'; | ||
| import { FilterService } from './filter.service'; | ||
| import { Subscription } from 'rxjs'; | ||
| import { animate, style, transition, trigger } from '@angular/animations'; | ||
| import { MatAutocompleteModule } from '@angular/material/autocomplete'; | ||
| import { FormsModule } from '@angular/forms'; | ||
| import { TitleCasePipe } from '@angular/common'; | ||
|
|
||
| @Component({ | ||
| standalone: true, | ||
| selector: 'app-filter-side-drawer', | ||
| templateUrl: './filter-side-drawer.component.html', | ||
| styleUrl: './filter-side-drawer.component.css', | ||
| animations: [ | ||
| trigger('removeTrigger', [ | ||
| transition(':enter', [ | ||
| style({ transform: 'translateX(100%)' }), | ||
| animate('300ms ease-in', style({ transform: 'translateX(0)' })), | ||
| ]), | ||
| transition(':leave', animate('300ms ease-out', style({ transform: 'translateX(100%)' }))), | ||
| ]), | ||
| ], | ||
| imports: [MatAutocompleteModule, FormsModule, TitleCasePipe], | ||
| }) | ||
| export class FilterSideDrawerComponent implements OnDestroy, OnInit { | ||
| protected shouldShowFilter!: boolean; | ||
| protected metadataNames!: string[]; | ||
| protected filters: Map<string, string> = new Map<string, string>(); | ||
| protected currentRecords: Map<string, Array<string>> = new Map<string, Array<string>>(); | ||
|
|
||
| shouldShowFilterSubscriber!: Subscription; | ||
| metadataNamesSubscriber!: Subscription; | ||
| filterSubscriber!: Subscription; | ||
| currentRecordsSubscriber!: Subscription; | ||
|
|
||
| constructor(protected filterService: FilterService) {} | ||
|
|
||
| ngOnInit(): void { | ||
| this.setSubscriptions(); | ||
| } | ||
|
|
||
| ngOnDestroy(): void { | ||
| this.unsubscribeAll(); | ||
| } | ||
|
|
||
| setSubscriptions(): void { | ||
| this.shouldShowFilterSubscriber = this.filterService.showFilter$.subscribe((show: boolean): void => { | ||
| this.shouldShowFilter = show; | ||
| }); | ||
| this.metadataNamesSubscriber = this.filterService.metadataNames$.subscribe((metadataNames: string[]): void => { | ||
| this.metadataNames = metadataNames; | ||
| }); | ||
| this.filterSubscriber = this.filterService.filterContext$.subscribe((filterContext: Map<string, string>): void => { | ||
| this.filters = filterContext; | ||
| }); | ||
| this.currentRecordsSubscriber = this.filterService.currentRecords$.subscribe( | ||
| (records: Map<string, Array<string>>): void => { | ||
| this.currentRecords = records; | ||
| }, | ||
| ); | ||
| } | ||
|
|
||
| unsubscribeAll(): void { | ||
| this.shouldShowFilterSubscriber.unsubscribe(); | ||
| this.metadataNamesSubscriber.unsubscribe(); | ||
| this.filterSubscriber.unsubscribe(); | ||
| this.currentRecordsSubscriber.unsubscribe(); | ||
| } | ||
|
|
||
| closeFilter() { | ||
| this.filterService.setShowFilter(false); | ||
| } | ||
|
|
||
| updateFilter(filter: string, metadataName: string): void { | ||
| this.filterService.updateFilterContext(metadataName, filter); | ||
| } | ||
|
|
||
| removeFilter(metadataName: string): void { | ||
| this.filterService.updateFilterContext(metadataName, ''); | ||
| } | ||
| } |
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,16 @@ | ||
| import { TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { FilterService } from './filter.service'; | ||
|
|
||
| describe('FilterService', () => { | ||
| let service: FilterService; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({}); | ||
| service = TestBed.inject(FilterService); | ||
| }); | ||
|
|
||
| it('should be created', () => { | ||
| expect(service).toBeTruthy(); | ||
| }); | ||
| }); |
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,45 @@ | ||
| import { Injectable } from '@angular/core'; | ||
| import { debounceTime, Observable, Subject } from 'rxjs'; | ||
|
|
||
| @Injectable({ | ||
| providedIn: 'root', | ||
| }) | ||
| export class FilterService { | ||
| private showFilterSubject: Subject<boolean> = new Subject(); | ||
| private metadataNamesSubject: Subject<string[]> = new Subject(); | ||
| private filterContextSubject: Subject<Map<string, string>> = new Subject(); | ||
| private currentRecordsSubject: Subject<Map<string, Array<string>>> = new Subject(); | ||
| private filters: Map<string, string> = new Map<string, string>(); | ||
|
|
||
| showFilter$: Observable<boolean> = this.showFilterSubject.asObservable(); | ||
| metadataNames$: Observable<string[]> = this.metadataNamesSubject.asObservable(); | ||
| filterContext$: Observable<Map<string, string>> = this.filterContextSubject.pipe(debounceTime(300)); | ||
| currentRecords$: Observable<Map<string, Array<string>>> = this.currentRecordsSubject.asObservable(); | ||
|
|
||
| setShowFilter(show: boolean): void { | ||
| this.showFilterSubject.next(show); | ||
| } | ||
|
|
||
| setMetadataNames(metadataNames: string[]): void { | ||
| this.metadataNamesSubject.next(metadataNames); | ||
| } | ||
|
|
||
| updateFilterContext(filterName: string, filterContext: string): void { | ||
| if (filterContext.length > 0) this.filters.set(filterName, filterContext); | ||
| else this.filters.delete(filterName); | ||
| this.filterContextSubject.next(this.filters); | ||
| } | ||
|
|
||
| getCurrentFilterContext(): Map<string, string> { | ||
| return this.filters; | ||
| } | ||
|
|
||
| resetFilter(): void { | ||
| this.filters = new Map<string, string>(); | ||
| this.filterContextSubject.next(this.filters); | ||
| } | ||
|
|
||
| setCurrentRecords(records: Map<string, Array<string>>): void { | ||
| this.currentRecordsSubject.next(records); | ||
| } | ||
| } |
Oops, something went wrong.