Skip to content

Commit 08b8e4e

Browse files
tylercchasetylercchase
authored
Merge pull request #2434 from asfadmin/tyler/dataset-filter
Add Dataset Selector search filter input
2 parents b0e3987 + 6f29851 commit 08b8e4e

6 files changed

Lines changed: 157 additions & 37 deletions

File tree

‎src/app/components/shared/selectors/dataset-selector/dataset-selector.component.html‎

Lines changed: 56 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
class="button-menu-trigger"
1212
color="basic"
1313
mat-button
14+
(menuOpened)="menuOpen()"
1415
>
1516
<div class="button-text">
1617
{{ datasetName() }}
@@ -22,17 +23,63 @@
2223
</div>
2324
<div class="gtm-search-type-selector fx-nogrow">
2425
<mat-menu #platformMenu="matMenu" class="dataset-selector">
25-
@for (dataset of datasets; track dataset; let isLast = $last) {
26-
<button mat-menu-item>
27-
<app-dataset
28-
[dataset]="dataset"
29-
(selected)="onSelectionChange($event)"
26+
<form
27+
class="dataset-filter-form"
28+
(click)="$event.stopPropagation()"
29+
(keydown)="$event.stopPropagation()"
30+
>
31+
<mat-form-field class="search-field" appearance="outline">
32+
<mat-icon matPrefix class="filter-icon">search</mat-icon>
33+
<input
34+
matInput
35+
[placeholder]="'SEARCH_DATASETS' | translate"
36+
[(ngModel)]="datasetFilter"
37+
name="dataset-options-filter"
38+
#datasetOptions
3039
/>
31-
</button>
32-
@if (!isLast) {
33-
<hr class="dataset-hr" />
40+
@if (datasetFilter()) {
41+
<button
42+
mat-icon-button
43+
matSuffix
44+
(click)="datasetFilter.set('')"
45+
[aria-label]="'CLEAR' | translate"
46+
class="close-button filter-icon"
47+
>
48+
<mat-icon>clear</mat-icon>
49+
</button>
50+
}
51+
</mat-form-field>
52+
</form>
53+
<div class="datasets-wrapper">
54+
@for (dataset of filteredDatasets(); track dataset.id) {
55+
<button
56+
mat-menu-item
57+
(keydown.enter)="onSelectionChange(dataset.id)"
58+
>
59+
<app-dataset
60+
[dataset]="dataset"
61+
(selected)="onSelectionChange($event)"
62+
/>
63+
</button>
64+
@if (!$last) {
65+
<hr class="dataset-hr" />
66+
}
67+
} @empty {
68+
<p class="datasets-empty">
69+
{{ 'NO_MATCHING_DATASETS' | translate }}
70+
</p>
3471
}
35-
}
72+
</div>
73+
<div class="dataset-footer">
74+
{{
75+
'SHOWING_X_OF_Y'
76+
| translate
77+
: {
78+
shown: filteredDatasets().length,
79+
total: datasets()?.length ?? 0,
80+
}
81+
}}
82+
</div>
3683
</mat-menu>
3784
</div>
3885
</div>

‎src/app/components/shared/selectors/dataset-selector/dataset-selector.component.scss‎

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,34 @@
1-
@use "asf-theme-variables" as *;
2-
@use "deluxe-menu" as *;
3-
@use "deluxe-menu-2" as *;
1+
@use 'asf-theme-variables' as *;
2+
@use 'deluxe-menu' as *;
3+
@use 'deluxe-menu-2' as *;
44

5-
.dataset--layout {
6-
white-space: normal;
7-
flex: 7;
5+
.search-field {
6+
width: 90%;
7+
padding-left: 5%;
88
}
9-
10-
.dataset-aside--layout {
11-
flex: 3;
12-
text-align: center;
9+
.datasets-wrapper {
10+
min-height: calc(95vh - 64px);
11+
max-height: calc(95vh - 64px);
12+
overflow: auto;
13+
overflow-x: hidden;
1314
}
14-
15-
.smaller-font {
16-
font-size: smaller;
15+
.datasets-empty {
16+
min-width: 100vw;
17+
margin-left: 35%;
1718
}
1819

19-
.increase-right-margin {
20-
margin-right: 15px;
20+
.dataset-footer {
21+
display: grid;
22+
place-content: center;
23+
padding-top: 8px;
24+
}
25+
@media (width <= 500px) {
26+
.dataset-footer {
27+
padding: 0;
28+
}
2129
}
22-
.disclaimer {
23-
font-size: large;
24-
margin-top: 10px;
30+
.close-button {
31+
height: unset;
32+
line-height: unset;
33+
min-width: unset;
2534
}

‎src/app/components/shared/selectors/dataset-selector/dataset-selector.component.ts‎

Lines changed: 44 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,27 @@
11
import {
22
Component,
3-
Input,
43
Output,
54
EventEmitter,
65
inject,
76
input,
87
computed,
8+
Signal,
9+
signal,
10+
viewChild,
11+
ElementRef,
912
} from '@angular/core';
1013

1114
import * as models from '@models';
1215
import { ScreenSizeService } from '@services';
1316
import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
1417
import { AsyncPipe } from '@angular/common';
15-
import { MatLabel } from '@angular/material/input';
16-
import { MatButton } from '@angular/material/button';
17-
import { TranslateModule } from '@ngx-translate/core';
18+
import { MatLabel, MatInputModule } from '@angular/material/input';
19+
import { MatButton, MatIconButton } from '@angular/material/button';
20+
import { TranslateModule, TranslateService } from '@ngx-translate/core';
1821
import { DatasetComponent } from './dataset/dataset.component';
22+
import { MatFormFieldModule } from '@angular/material/form-field';
23+
import { FormsModule } from '@angular/forms';
24+
import { MatIconModule } from '@angular/material/icon';
1925

2026
// Declare GTM dataLayer array.
2127
declare global {
@@ -37,29 +43,59 @@ declare global {
3743
AsyncPipe,
3844
TranslateModule,
3945
DatasetComponent,
46+
MatFormFieldModule,
47+
MatInputModule,
48+
FormsModule,
49+
MatIconModule,
50+
MatIconButton,
4051
],
4152
})
4253
export class DatasetSelectorComponent {
4354
private screenSize = inject(ScreenSizeService);
44-
45-
@Input() datasets: models.Dataset[];
46-
55+
private translate = inject(TranslateService);
4756
@Output() selectedChange = new EventEmitter<string>();
4857

58+
public datasets = input<models.Dataset[]>();
4959
public selected = input<string>();
60+
61+
public datasetFilter = signal<string>(null);
5062
public breakpoint$ = this.screenSize.breakpoint$;
5163
public breakpoints = models.Breakpoints;
5264
public isReadMore = true;
5365

66+
public searchElement = viewChild<ElementRef>('datasetOptions');
67+
5468
public datasetName = computed(() => {
5569
let datasetName = '';
56-
this.datasets.forEach((dataset) => {
70+
this.datasets().forEach((dataset) => {
5771
if (dataset.id === this.selected()) {
5872
datasetName = dataset.name;
5973
}
6074
});
6175
return datasetName;
6276
});
77+
78+
public filteredDatasets: Signal<models.Dataset[]> = computed(() => {
79+
if (!this.datasetFilter()) {
80+
return this.datasets();
81+
}
82+
const userInput = this.datasetFilter().toUpperCase();
83+
return this.datasets().filter((dataset) => {
84+
return (
85+
dataset.name.toUpperCase().includes(userInput) ||
86+
this.translate
87+
.instant(dataset.platformDesc)
88+
.toUpperCase()
89+
.includes(userInput) ||
90+
dataset.source.name.includes(userInput)
91+
);
92+
});
93+
});
94+
95+
public menuOpen() {
96+
this.searchElement().nativeElement.focus();
97+
}
98+
6399
public onSelectionChange(dataset: string): void {
64100
window.dataLayer = window.dataLayer || [];
65101
window.dataLayer.push({

‎src/app/components/shared/selectors/dataset-selector/dataset/dataset.component.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,10 @@
3434
color: themed('dark-secondary-text');
3535
}
3636
}
37+
.menu-item-icon {
38+
img {
39+
@include themify($themes) {
40+
filter: themed('inverted-image');
41+
}
42+
}
43+
}

‎src/assets/i18n/en.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1230,4 +1230,4 @@
12301230
"ZOOM_TO_FIT": "Zoom To Fit",
12311231
"ZOOM_TO_RESULTS": "Zoom to results",
12321232
"ZOOM_TO_SCENE": "Zoom to scene"
1233-
}
1233+
}

‎src/styles.scss‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -899,7 +899,28 @@ $d-height: 550px;
899899
}
900900

901901
.mat-mdc-menu-panel.dataset-selector {
902-
overflow: auto;
902+
overflow: unset;
903+
.datasets-empty {
904+
@include themify_non_host($themes) {
905+
color: themed('dark-primary-text') !important;
906+
}
907+
}
908+
.dataset-footer {
909+
@include themify_non_host($themes) {
910+
color: themed('dark-secondary-text') !important;
911+
border-top: 1px solid themed('dark-dividers');
912+
}
913+
}
914+
.dataset-filter-form {
915+
@include themify_non_host($themes) {
916+
border-bottom: 1px solid themed('dark-dividers');
917+
}
918+
}
919+
.filter-icon {
920+
@include themify_non_host($themes) {
921+
color: themed('dark-primary-text');
922+
}
923+
}
903924
}
904925

905926
.mat-mdc-menu-panel.search-type-menu {

0 commit comments

Comments
 (0)