From fc010d48b7d931a186a64bfadfdc006735c11de3 Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Tue, 20 Feb 2024 10:09:02 +0100 Subject: [PATCH 01/21] feat(search-form): add a search-form with basic UI search-filters are just placeholders for now --- apps/datahub/src/app/app.module.ts | 2 ++ .../search-form/search-form.component.html | 35 +++++++++++++++++++ .../search-form/search-form.component.ts | 16 +++++++++ .../search-page/search-page.component.html | 5 ++- .../search-results.component.html | 16 ++++----- apps/datahub/src/assets/i18n/fr_MEL.json | 6 ++++ apps/datahub/src/assets/icons/arrow-down.svg | 3 ++ 7 files changed, 73 insertions(+), 10 deletions(-) create mode 100644 apps/datahub/src/app/search/search-form/search-form.component.html create mode 100644 apps/datahub/src/app/search/search-form/search-form.component.ts create mode 100644 apps/datahub/src/assets/icons/arrow-down.svg diff --git a/apps/datahub/src/app/app.module.ts b/apps/datahub/src/app/app.module.ts index 7778eb8e..3bf73919 100644 --- a/apps/datahub/src/app/app.module.ts +++ b/apps/datahub/src/app/app.module.ts @@ -60,6 +60,7 @@ import { MelFuzzySearchComponent } from './common/fuzzy-search/fuzzy-search.comp import { MelAutocompleteComponent } from './common/autocomplete/autocomplete.component' import { ReactiveFormsModule } from '@angular/forms' import { MatAutocompleteModule } from '@angular/material/autocomplete' +import { SearchFormComponent } from './search/search-form/search-form.component' @NgModule({ declarations: [ @@ -91,6 +92,7 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete' DatasetInformationComponent, MelFuzzySearchComponent, MelAutocompleteComponent, + SearchFormComponent, ], imports: [ BrowserModule, diff --git a/apps/datahub/src/app/search/search-form/search-form.component.html b/apps/datahub/src/app/search/search-form/search-form.component.html new file mode 100644 index 00000000..75170f07 --- /dev/null +++ b/apps/datahub/src/app/search/search-form/search-form.component.html @@ -0,0 +1,35 @@ +
+
+

+ mel.datahub.search.form.title +

+

+ mel.datahub.search.form.description +

+
+ + + + +
+
+
+ +
+
diff --git a/apps/datahub/src/app/search/search-form/search-form.component.ts b/apps/datahub/src/app/search/search-form/search-form.component.ts new file mode 100644 index 00000000..5594325a --- /dev/null +++ b/apps/datahub/src/app/search/search-form/search-form.component.ts @@ -0,0 +1,16 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core' +import { RouterFacade } from 'geonetwork-ui' +import { CatalogRecord } from 'geonetwork-ui/libs/common/domain/src/lib/model/record' + +@Component({ + selector: 'mel-datahub-search-form', + templateUrl: './search-form.component.html', + styles: ``, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class SearchFormComponent { + constructor(private routerFacade: RouterFacade) {} + onFuzzySearchSelection(record: CatalogRecord) { + this.routerFacade.goToMetadata(record) + } +} diff --git a/apps/datahub/src/app/search/search-page/search-page.component.html b/apps/datahub/src/app/search/search-page/search-page.component.html index bf8c4a8e..4e08a7c0 100644 --- a/apps/datahub/src/app/search/search-page/search-page.component.html +++ b/apps/datahub/src/app/search/search-page/search-page.component.html @@ -1,2 +1,5 @@ - +
+ + +
diff --git a/apps/datahub/src/app/search/search-results/search-results.component.html b/apps/datahub/src/app/search/search-results/search-results.component.html index e2ca792e..9cd56e89 100644 --- a/apps/datahub/src/app/search/search-results/search-results.component.html +++ b/apps/datahub/src/app/search/search-results/search-results.component.html @@ -1,10 +1,8 @@ -
-
- -
-
- -
+
+ +
+
+
diff --git a/apps/datahub/src/assets/i18n/fr_MEL.json b/apps/datahub/src/assets/i18n/fr_MEL.json index c631e746..bce45ced 100644 --- a/apps/datahub/src/assets/i18n/fr_MEL.json +++ b/apps/datahub/src/assets/i18n/fr_MEL.json @@ -14,6 +14,12 @@ "mel.common.header.title": "Data platform", "mel.datahub.home.title": "Métropole Européenne Lille", "mel.datahub.search.clear": "Effacer", + "mel.datahub.search.filter.date": "Date", + "mel.datahub.search.filter.organisation": "Producteur", + "mel.datahub.search.filter.status": "Statut", + "mel.datahub.search.filter.theme": "Thématique", + "mel.datahub.search.form.description": "Vous pouvez utiliser la barre de recherche où les différents filtres situés ci-dessous pour trouver un jeu de données plus rapidement.", + "mel.datahub.search.form.title": "Trouver un jeu de données", "mel.datahub.search.title": "Catalogue de jeux de données", "mel.dataset.abstract": "Description", "mel.dataset.api": "API", diff --git a/apps/datahub/src/assets/icons/arrow-down.svg b/apps/datahub/src/assets/icons/arrow-down.svg new file mode 100644 index 00000000..3695fb96 --- /dev/null +++ b/apps/datahub/src/assets/icons/arrow-down.svg @@ -0,0 +1,3 @@ + + + From fbd84159e32ac962d12ea5d870f8faa2dc5ff3b3 Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Tue, 20 Feb 2024 11:19:45 +0100 Subject: [PATCH 02/21] feat(search-filters): add filter component that uses gn-ui components for now --- apps/datahub/src/app/app.module.ts | 4 ++++ .../search-filters.component.html | 24 +++++++++++++++++++ .../search-filters.component.ts | 16 +++++++++++++ .../search-form/search-form.component.html | 19 +-------------- 4 files changed, 45 insertions(+), 18 deletions(-) create mode 100644 apps/datahub/src/app/search/search-filters/search-filters.component.html create mode 100644 apps/datahub/src/app/search/search-filters/search-filters.component.ts diff --git a/apps/datahub/src/app/app.module.ts b/apps/datahub/src/app/app.module.ts index 3bf73919..daa88b64 100644 --- a/apps/datahub/src/app/app.module.ts +++ b/apps/datahub/src/app/app.module.ts @@ -15,6 +15,7 @@ import { ThemeService, TRANSLATE_DEFAULT_CONFIG, UiElementsModule, + UiInputsModule, UiLayoutModule, UiWidgetsModule, } from 'geonetwork-ui' @@ -61,6 +62,7 @@ import { MelAutocompleteComponent } from './common/autocomplete/autocomplete.com import { ReactiveFormsModule } from '@angular/forms' import { MatAutocompleteModule } from '@angular/material/autocomplete' import { SearchFormComponent } from './search/search-form/search-form.component' +import { SearchFiltersComponent } from './search/search-filters/search-filters.component' @NgModule({ declarations: [ @@ -93,6 +95,7 @@ import { SearchFormComponent } from './search/search-form/search-form.component' MelFuzzySearchComponent, MelAutocompleteComponent, SearchFormComponent, + SearchFiltersComponent, ], imports: [ BrowserModule, @@ -100,6 +103,7 @@ import { SearchFormComponent } from './search/search-form/search-form.component' UiWidgetsModule, UiElementsModule, UiLayoutModule, + UiInputsModule, FeatureSearchModule, FeatureCatalogModule, FeatureRecordModule, diff --git a/apps/datahub/src/app/search/search-filters/search-filters.component.html b/apps/datahub/src/app/search/search-filters/search-filters.component.html new file mode 100644 index 00000000..57b7bcb3 --- /dev/null +++ b/apps/datahub/src/app/search/search-filters/search-filters.component.html @@ -0,0 +1,24 @@ +
+ + +
diff --git a/apps/datahub/src/app/search/search-filters/search-filters.component.ts b/apps/datahub/src/app/search/search-filters/search-filters.component.ts new file mode 100644 index 00000000..a4ba2b66 --- /dev/null +++ b/apps/datahub/src/app/search/search-filters/search-filters.component.ts @@ -0,0 +1,16 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core' + +@Component({ + selector: 'mel-datahub-search-filters', + templateUrl: './search-filters.component.html', + styles: ``, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class SearchFiltersComponent { + searchConfig = ['topic', 'publisher', 'publicationYear', 'format'].map( + (filter) => ({ + fieldName: filter, + title: `search.filters.${filter}`, + }) + ) +} diff --git a/apps/datahub/src/app/search/search-form/search-form.component.html b/apps/datahub/src/app/search/search-form/search-form.component.html index 75170f07..0e4425a7 100644 --- a/apps/datahub/src/app/search/search-form/search-form.component.html +++ b/apps/datahub/src/app/search/search-form/search-form.component.html @@ -6,24 +6,7 @@

mel.datahub.search.form.description

-
- - - - -
+

Date: Wed, 21 Feb 2024 12:11:28 +0100 Subject: [PATCH 03/21] feat(search-filters): extend components for dropdown to implement dropdown button template corresponding to mockups --- apps/datahub/src/app/app.module.ts | 8 ++ .../dropdown-select.component.html | 124 ++++++++++++++++++ .../dropdown-select.component.ts | 24 ++++ .../search-filter-dropdown.component.html | 11 ++ .../search-filter-dropdown.component.ts | 10 ++ .../search-filters.component.html | 21 +-- .../search-filters.component.ts | 8 +- apps/datahub/src/assets/i18n/fr_MEL.json | 9 +- 8 files changed, 191 insertions(+), 24 deletions(-) create mode 100644 apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.html create mode 100644 apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.ts create mode 100644 apps/datahub/src/app/search/search-filters/search-filter-dropdown/search-filter-dropdown.component.html create mode 100644 apps/datahub/src/app/search/search-filters/search-filter-dropdown/search-filter-dropdown.component.ts diff --git a/apps/datahub/src/app/app.module.ts b/apps/datahub/src/app/app.module.ts index daa88b64..14d58f57 100644 --- a/apps/datahub/src/app/app.module.ts +++ b/apps/datahub/src/app/app.module.ts @@ -63,6 +63,10 @@ import { ReactiveFormsModule } from '@angular/forms' import { MatAutocompleteModule } from '@angular/material/autocomplete' import { SearchFormComponent } from './search/search-form/search-form.component' import { SearchFiltersComponent } from './search/search-filters/search-filters.component' +import { SearchFilterDropdownComponent } from './search/search-filters/search-filter-dropdown/search-filter-dropdown.component' +import { DropdownSelectComponent } from './search/search-filters/dropdown-select/dropdown-select.component' +import { OverlayModule } from '@angular/cdk/overlay' +import { FormsModule } from '@angular/forms' @NgModule({ declarations: [ @@ -96,6 +100,8 @@ import { SearchFiltersComponent } from './search/search-filters/search-filters.c MelAutocompleteComponent, SearchFormComponent, SearchFiltersComponent, + SearchFilterDropdownComponent, + DropdownSelectComponent, ], imports: [ BrowserModule, @@ -110,6 +116,8 @@ import { SearchFiltersComponent } from './search/search-filters/search-filters.c MatAutocompleteModule, MatIconModule, MatTabsModule, + OverlayModule, + FormsModule, TranslateModule.forRoot({ ...TRANSLATE_DEFAULT_CONFIG, loader: { diff --git a/apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.html b/apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.html new file mode 100644 index 00000000..8c5de6f8 --- /dev/null +++ b/apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.html @@ -0,0 +1,124 @@ + +
+
+ {{ title }} +
+
+ {{ selected['length'] }} +
+
+ + + expand_less + expand_more + + + + +
+
+ + +
+ + +
+
+ + +
+ diff --git a/apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.ts b/apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.ts new file mode 100644 index 00000000..e8096b12 --- /dev/null +++ b/apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.ts @@ -0,0 +1,24 @@ +import { + ChangeDetectionStrategy, + Component, + EventEmitter, + Input, + Output, +} from '@angular/core' +import { Choice, DropdownMultiselectComponent } from 'geonetwork-ui' + +@Component({ + selector: 'mel-datahub-dropdown-select', + templateUrl: './dropdown-select.component.html', + styles: ``, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class DropdownSelectComponent extends DropdownMultiselectComponent { + //FIXME: overrides and casting via method due to typing issues with gn-ui + @Input() override selected: any + @Output() override selectValues = new EventEmitter() + + selectFromEvent(choice: Choice, event: Event) { + this.select(choice, (event.target as HTMLInputElement).checked) + } +} diff --git a/apps/datahub/src/app/search/search-filters/search-filter-dropdown/search-filter-dropdown.component.html b/apps/datahub/src/app/search/search-filters/search-filter-dropdown/search-filter-dropdown.component.html new file mode 100644 index 00000000..044439bd --- /dev/null +++ b/apps/datahub/src/app/search/search-filters/search-filter-dropdown/search-filter-dropdown.component.html @@ -0,0 +1,11 @@ + + diff --git a/apps/datahub/src/app/search/search-filters/search-filter-dropdown/search-filter-dropdown.component.ts b/apps/datahub/src/app/search/search-filters/search-filter-dropdown/search-filter-dropdown.component.ts new file mode 100644 index 00000000..1d972e2d --- /dev/null +++ b/apps/datahub/src/app/search/search-filters/search-filter-dropdown/search-filter-dropdown.component.ts @@ -0,0 +1,10 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core' +import { FilterDropdownComponent } from 'geonetwork-ui' + +@Component({ + selector: 'mel-datahub-search-filter-dropdown', + templateUrl: './search-filter-dropdown.component.html', + styles: ``, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class SearchFilterDropdownComponent extends FilterDropdownComponent {} diff --git a/apps/datahub/src/app/search/search-filters/search-filters.component.html b/apps/datahub/src/app/search/search-filters/search-filters.component.html index 57b7bcb3..9c7a1c26 100644 --- a/apps/datahub/src/app/search/search-filters/search-filters.component.html +++ b/apps/datahub/src/app/search/search-filters/search-filters.component.html @@ -1,24 +1,7 @@
- - + >
diff --git a/apps/datahub/src/app/search/search-filters/search-filters.component.ts b/apps/datahub/src/app/search/search-filters/search-filters.component.ts index a4ba2b66..564dd5b6 100644 --- a/apps/datahub/src/app/search/search-filters/search-filters.component.ts +++ b/apps/datahub/src/app/search/search-filters/search-filters.component.ts @@ -1,4 +1,10 @@ import { ChangeDetectionStrategy, Component } from '@angular/core' +import { marker } from '@biesbjerg/ngx-translate-extract-marker' + +marker('mel.datahub.search.filters.topic') +marker('mel.datahub.search.filters.publisher') +marker('mel.datahub.search.filters.publicationYear') +marker('mel.datahub.search.filters.format') @Component({ selector: 'mel-datahub-search-filters', @@ -10,7 +16,7 @@ export class SearchFiltersComponent { searchConfig = ['topic', 'publisher', 'publicationYear', 'format'].map( (filter) => ({ fieldName: filter, - title: `search.filters.${filter}`, + title: `mel.datahub.search.filters.${filter}`, }) ) } diff --git a/apps/datahub/src/assets/i18n/fr_MEL.json b/apps/datahub/src/assets/i18n/fr_MEL.json index bce45ced..9aa7e993 100644 --- a/apps/datahub/src/assets/i18n/fr_MEL.json +++ b/apps/datahub/src/assets/i18n/fr_MEL.json @@ -13,11 +13,12 @@ "mel.common.footer.social": "Réseaux sociaux", "mel.common.header.title": "Data platform", "mel.datahub.home.title": "Métropole Européenne Lille", + "mel.datahub.multiselect.filter.placeholder": "Rechercher", "mel.datahub.search.clear": "Effacer", - "mel.datahub.search.filter.date": "Date", - "mel.datahub.search.filter.organisation": "Producteur", - "mel.datahub.search.filter.status": "Statut", - "mel.datahub.search.filter.theme": "Thématique", + "mel.datahub.search.filters.format": "Format", + "mel.datahub.search.filters.publicationYear": "Date", + "mel.datahub.search.filters.publisher": "Producteur", + "mel.datahub.search.filters.topic": "Thématique", "mel.datahub.search.form.description": "Vous pouvez utiliser la barre de recherche où les différents filtres situés ci-dessous pour trouver un jeu de données plus rapidement.", "mel.datahub.search.form.title": "Trouver un jeu de données", "mel.datahub.search.title": "Catalogue de jeux de données", From 952bb532192383c914bfa65490f9c91a0ebc5729 Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Wed, 21 Feb 2024 15:15:58 +0100 Subject: [PATCH 04/21] feat(dropdown-select): display selected counter and arrow only use mel-primary-button tailwind component here instead of angular component --- .../dropdown-select.component.html | 15 ++++++--------- apps/datahub/src/assets/icons/arrow-down.svg | 3 --- 2 files changed, 6 insertions(+), 12 deletions(-) delete mode 100644 apps/datahub/src/assets/icons/arrow-down.svg diff --git a/apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.html b/apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.html index 8c5de6f8..bda05d7f 100644 --- a/apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.html +++ b/apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.html @@ -1,19 +1,16 @@ - + {{ title }}
-
- {{ title }} -
{{ selected['length'] }}
@@ -27,11 +24,11 @@ close - + expand_less expand_more - + - - From a6d8a99ad15f5eb57cb29ba1e7b47426aa841f7c Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Thu, 22 Feb 2024 15:56:25 +0100 Subject: [PATCH 05/21] chore(package.json): update gn-ui --- package-lock.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8017b231..29893637 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12577,9 +12577,9 @@ "integrity": "sha512-osHqhtjojpCsACVnuD11xO5g9xaCyw7Qqn/C2KParkMv42i8jrJJgx3g7mkHfpxwhy9MnOJr8+pKOdZ7qzgizg==" }, "node_modules/embla-carousel": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.0.0.tgz", - "integrity": "sha512-ecixcyqS6oKD2nh5Nj5MObcgoSILWNI/GtBxkidn5ytFaCCmwVHo2SecksaQZHcARMMpIR2dWOlSIdA1LkZFUA==" + "version": "8.0.0-rc23", + "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.0.0-rc23.tgz", + "integrity": "sha512-ybuDHm+udElyH+XpuemS/W+x8ZhB3a/4UzeTBvsoZUxDSty12ch1f2T0CZxGqIs2FfdaofEOmpLMSvuEPVTMCg==" }, "node_modules/emittery": { "version": "0.13.1", @@ -16262,9 +16262,9 @@ } }, "node_modules/geonetwork-ui/node_modules/@types/node": { - "version": "16.18.83", - "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.83.tgz", - "integrity": "sha512-TmBqzDY/GeCEmLob/31SunOQnqYE3ZiiuEh1U9o3HqE1E2cqKZQA5RQg4krEguCY3StnkXyDmCny75qyFLx/rA==", + "version": "16.18.82", + "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.82.tgz", + "integrity": "sha512-pcDZtkx9z8XYV+ius2P3Ot2VVrcYOfXffBQUBuiszrlUzKSmoDYqo+mV+IoL8iIiIjjtOMvNSmH1hwJ+Q+f96Q==", "optional": true, "peer": true }, From 6127e7b828a445003c0ad8546c6928aa56102078 Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Thu, 22 Feb 2024 15:57:07 +0100 Subject: [PATCH 06/21] type(dropdown-select): remove workarounds for gn-ui typing issues --- .../dropdown-select.component.html | 2 +- .../dropdown-select.component.ts | 20 +++---------------- 2 files changed, 4 insertions(+), 18 deletions(-) diff --git a/apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.html b/apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.html index bda05d7f..a7c00ddf 100644 --- a/apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.html +++ b/apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.html @@ -111,7 +111,7 @@ type="checkbox" #checkBox [checked]="isSelected(choice)" - (change)="selectFromEvent(choice, $event)" + (change)="select(choice, checkBox.checked)" /> {{ choice.label }} diff --git a/apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.ts b/apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.ts index e8096b12..c307bd06 100644 --- a/apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.ts +++ b/apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.ts @@ -1,11 +1,5 @@ -import { - ChangeDetectionStrategy, - Component, - EventEmitter, - Input, - Output, -} from '@angular/core' -import { Choice, DropdownMultiselectComponent } from 'geonetwork-ui' +import { ChangeDetectionStrategy, Component } from '@angular/core' +import { DropdownMultiselectComponent } from 'geonetwork-ui' @Component({ selector: 'mel-datahub-dropdown-select', @@ -13,12 +7,4 @@ import { Choice, DropdownMultiselectComponent } from 'geonetwork-ui' styles: ``, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class DropdownSelectComponent extends DropdownMultiselectComponent { - //FIXME: overrides and casting via method due to typing issues with gn-ui - @Input() override selected: any - @Output() override selectValues = new EventEmitter() - - selectFromEvent(choice: Choice, event: Event) { - this.select(choice, (event.target as HTMLInputElement).checked) - } -} +export class DropdownSelectComponent extends DropdownMultiselectComponent {} From 4a057cf7ad06b4f089ee669d2a5453bd3eb5ccd2 Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Fri, 23 Feb 2024 09:27:13 +0100 Subject: [PATCH 07/21] feat(results-list-grid): add show more button --- .../results-list-grid/results-list-grid.component.html | 7 +++++++ .../src/app/common/results-list/results-list.component.ts | 4 ++++ apps/datahub/src/assets/i18n/fr_MEL.json | 1 + 3 files changed, 12 insertions(+) diff --git a/apps/datahub/src/app/common/results-list/results-list-grid/results-list-grid.component.html b/apps/datahub/src/app/common/results-list/results-list-grid/results-list-grid.component.html index 939d1737..bdd91bbb 100644 --- a/apps/datahub/src/app/common/results-list/results-list-grid/results-list-grid.component.html +++ b/apps/datahub/src/app/common/results-list/results-list-grid/results-list-grid.component.html @@ -9,4 +9,11 @@ > }
+
+ +
diff --git a/apps/datahub/src/app/common/results-list/results-list.component.ts b/apps/datahub/src/app/common/results-list/results-list.component.ts index fede18fe..c2b54100 100644 --- a/apps/datahub/src/app/common/results-list/results-list.component.ts +++ b/apps/datahub/src/app/common/results-list/results-list.component.ts @@ -54,4 +54,8 @@ export class ResultsListComponent implements OnInit, OnDestroy { onMetadataSelection(metadata: CatalogRecord): void { this.routerFacade.goToMetadata(metadata) } + + onShowMore() { + this.searchFacade.scroll() + } } diff --git a/apps/datahub/src/assets/i18n/fr_MEL.json b/apps/datahub/src/assets/i18n/fr_MEL.json index 9aa7e993..af13b1de 100644 --- a/apps/datahub/src/assets/i18n/fr_MEL.json +++ b/apps/datahub/src/assets/i18n/fr_MEL.json @@ -21,6 +21,7 @@ "mel.datahub.search.filters.topic": "Thématique", "mel.datahub.search.form.description": "Vous pouvez utiliser la barre de recherche où les différents filtres situés ci-dessous pour trouver un jeu de données plus rapidement.", "mel.datahub.search.form.title": "Trouver un jeu de données", + "mel.datahub.search.showMore": "Plus de résultats...", "mel.datahub.search.title": "Catalogue de jeux de données", "mel.dataset.abstract": "Description", "mel.dataset.api": "API", From 2c1b9f32d0fad34bfb18c90174a2c70632031d1f Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Fri, 23 Feb 2024 09:48:40 +0100 Subject: [PATCH 08/21] feat(results-list): display content ghost on grid list as well --- .../results-list-carousel.component.ts | 31 +------------- .../results-list-grid.component.html | 40 +++++++++++-------- .../results-list/results-list.component.ts | 15 +++++-- 3 files changed, 36 insertions(+), 50 deletions(-) diff --git a/apps/datahub/src/app/common/results-list/results-list-carousel/results-list-carousel.component.ts b/apps/datahub/src/app/common/results-list/results-list-carousel/results-list-carousel.component.ts index 6707258e..7f263b53 100644 --- a/apps/datahub/src/app/common/results-list/results-list-carousel/results-list-carousel.component.ts +++ b/apps/datahub/src/app/common/results-list/results-list-carousel/results-list-carousel.component.ts @@ -1,11 +1,5 @@ -import { - ChangeDetectionStrategy, - Component, - OnDestroy, - OnInit, -} from '@angular/core' +import { ChangeDetectionStrategy, Component } from '@angular/core' import { ResultsListComponent } from '../results-list.component' -import { Subscription } from 'rxjs' @Component({ selector: 'mel-datahub-results-list-carousel', @@ -13,25 +7,4 @@ import { Subscription } from 'rxjs' styles: ``, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class ResultsListCarouselComponent - extends ResultsListComponent - implements OnInit, OnDestroy -{ - resultsSubscription: Subscription - - resultsReady = false - - override ngOnInit(): void { - super.ngOnInit() - this.resultsSubscription = this.searchFacade.results$.subscribe( - (results) => { - if (results.length > 0) this.resultsReady = true - } - ) - } - - override ngOnDestroy(): void { - super.ngOnDestroy() - this.resultsSubscription.unsubscribe() - } -} +export class ResultsListCarouselComponent extends ResultsListComponent {} diff --git a/apps/datahub/src/app/common/results-list/results-list-grid/results-list-grid.component.html b/apps/datahub/src/app/common/results-list/results-list-grid/results-list-grid.component.html index bdd91bbb..9ee17275 100644 --- a/apps/datahub/src/app/common/results-list/results-list-grid/results-list-grid.component.html +++ b/apps/datahub/src/app/common/results-list/results-list-grid/results-list-grid.component.html @@ -1,19 +1,25 @@
-
- @for (record of searchFacade.results$ | async; track - record.uniqueIdentifier) { - - } -
-
- -
+ +
+ @for (record of searchFacade.results$ | async; track + record.uniqueIdentifier) { + + } +
+
+ +
+
diff --git a/apps/datahub/src/app/common/results-list/results-list.component.ts b/apps/datahub/src/app/common/results-list/results-list.component.ts index c2b54100..c359217f 100644 --- a/apps/datahub/src/app/common/results-list/results-list.component.ts +++ b/apps/datahub/src/app/common/results-list/results-list.component.ts @@ -22,7 +22,8 @@ export class ResultsListComponent implements OnInit, OnDestroy { } favoritesOnlyValue: boolean @Input() numberOfResults = 10 - myFavoritesSubscription: Subscription + subscriptions: Subscription + resultsReady = false constructor( protected searchService: SearchService, @@ -37,14 +38,20 @@ export class ResultsListComponent implements OnInit, OnDestroy { .setConfigRequestFields([...FIELDS_BRIEF, 'createDate', 'changeDate']) .setPageSize(this.numberOfResults) .setSortBy(['desc', 'createDate']) - this.myFavoritesSubscription = - this.favoritesService.myFavoritesUuid$.subscribe(() => { + this.subscriptions = this.favoritesService.myFavoritesUuid$.subscribe( + () => { if (this.favoritesOnlyValue) this.searchFacade.setFavoritesOnly(true) + } + ) + this.subscriptions.add( + this.searchFacade.results$.subscribe((results) => { + if (results.length > 0) this.resultsReady = true }) + ) } ngOnDestroy() { - this.myFavoritesSubscription.unsubscribe() + this.subscriptions.unsubscribe() } onInfoKeywordClick(keyword: string) { From 6d9e2bfbef666cfae0e489bf296909ad4b251e8d Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Fri, 23 Feb 2024 10:54:42 +0100 Subject: [PATCH 09/21] feat(search-form): rework layout also adds mel-title-line to styles for common red line over titles and makes checked checkboxes display in primary color --- .../search-filters/search-filters.component.html | 2 +- .../search/search-form/search-form.component.html | 13 ++++++------- .../search/search-page/search-page.component.html | 2 +- apps/datahub/src/styles.css | 6 ++++++ 4 files changed, 14 insertions(+), 9 deletions(-) diff --git a/apps/datahub/src/app/search/search-filters/search-filters.component.html b/apps/datahub/src/app/search/search-filters/search-filters.component.html index 9c7a1c26..e4529e21 100644 --- a/apps/datahub/src/app/search/search-filters/search-filters.component.html +++ b/apps/datahub/src/app/search/search-filters/search-filters.component.html @@ -1,4 +1,4 @@ -
+
-
+
+
+

mel.datahub.search.form.title

-

- mel.datahub.search.form.description -

- +

mel.datahub.search.form.description

-
+
+ -
+
diff --git a/apps/datahub/src/styles.css b/apps/datahub/src/styles.css index 5b2ad7c5..1e7245e2 100644 --- a/apps/datahub/src/styles.css +++ b/apps/datahub/src/styles.css @@ -8,6 +8,9 @@ .mel-page-title { @apply text-black text-5xl font-extrabold font-title; } + .mel-title-line { + @apply inline-flex bg-primary h-1 w-16; + } .mel-badge-button { @apply inline-block bg-white py-1.5 px-2 rounded font-medium text-sm leading-none hover:text-gray-8 cursor-pointer transition-colors; } @@ -74,3 +77,6 @@ .tippy-box a:hover { @apply text-primary-dark; } +input[type='checkbox'] { + accent-color: var(--color-primary); +} From ed3293fad586e7aa7e5f0dc013057010f85f0c03 Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Fri, 23 Feb 2024 11:39:09 +0100 Subject: [PATCH 10/21] feat(search-page): ajust result hits and spacings to mel design --- .../results-list-grid.component.html | 7 +++++++ .../app/search/search-form/search-form.component.html | 2 +- .../app/search/search-page/search-page.component.html | 2 +- .../search-results/search-results.component.html | 11 +++-------- apps/datahub/src/assets/i18n/fr_MEL.json | 1 + 5 files changed, 13 insertions(+), 10 deletions(-) diff --git a/apps/datahub/src/app/common/results-list/results-list-grid/results-list-grid.component.html b/apps/datahub/src/app/common/results-list/results-list-grid/results-list-grid.component.html index 9ee17275..290179ab 100644 --- a/apps/datahub/src/app/common/results-list/results-list-grid/results-list-grid.component.html +++ b/apps/datahub/src/app/common/results-list/results-list-grid/results-list-grid.component.html @@ -4,6 +4,13 @@ class="container" [showContent]="resultsReady" > +
+ mel.datahub.search.hits.found +
@for (record of searchFacade.results$ | async; track record.uniqueIdentifier) { diff --git a/apps/datahub/src/app/search/search-form/search-form.component.html b/apps/datahub/src/app/search/search-form/search-form.component.html index f6e22531..aaca89bd 100644 --- a/apps/datahub/src/app/search/search-form/search-form.component.html +++ b/apps/datahub/src/app/search/search-form/search-form.component.html @@ -1,4 +1,4 @@ -
+

diff --git a/apps/datahub/src/app/search/search-page/search-page.component.html b/apps/datahub/src/app/search/search-page/search-page.component.html index 1c8bad52..a394e09c 100644 --- a/apps/datahub/src/app/search/search-page/search-page.component.html +++ b/apps/datahub/src/app/search/search-page/search-page.component.html @@ -1,5 +1,5 @@ -
+
diff --git a/apps/datahub/src/app/search/search-results/search-results.component.html b/apps/datahub/src/app/search/search-results/search-results.component.html index 9cd56e89..e555df3c 100644 --- a/apps/datahub/src/app/search/search-results/search-results.component.html +++ b/apps/datahub/src/app/search/search-results/search-results.component.html @@ -1,8 +1,3 @@ -
- -
-
- -
+ diff --git a/apps/datahub/src/assets/i18n/fr_MEL.json b/apps/datahub/src/assets/i18n/fr_MEL.json index af13b1de..b07126f1 100644 --- a/apps/datahub/src/assets/i18n/fr_MEL.json +++ b/apps/datahub/src/assets/i18n/fr_MEL.json @@ -21,6 +21,7 @@ "mel.datahub.search.filters.topic": "Thématique", "mel.datahub.search.form.description": "Vous pouvez utiliser la barre de recherche où les différents filtres situés ci-dessous pour trouver un jeu de données plus rapidement.", "mel.datahub.search.form.title": "Trouver un jeu de données", + "mel.datahub.search.hits.found": "{hits, plural, =0{Aucune correspondance.} one{1 enregistrement trouvé.} other{Ensemble des données: {hits}}}", "mel.datahub.search.showMore": "Plus de résultats...", "mel.datahub.search.title": "Catalogue de jeux de données", "mel.dataset.abstract": "Description", From fbb2f479a1a5c2a58597b419389e530be577f27b Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Fri, 23 Feb 2024 11:58:07 +0100 Subject: [PATCH 11/21] refactor(search-page): move template around grid to search-results --- .../results-list-carousel.component.html | 2 +- .../results-list-grid.component.html | 40 +++++-------------- .../results-list/results-list.component.ts | 10 ----- .../search-results.component.html | 28 +++++++++++-- .../search-results.component.ts | 9 ++++- 5 files changed, 43 insertions(+), 46 deletions(-) diff --git a/apps/datahub/src/app/common/results-list/results-list-carousel/results-list-carousel.component.html b/apps/datahub/src/app/common/results-list/results-list-carousel/results-list-carousel.component.html index a8801913..6ab90501 100644 --- a/apps/datahub/src/app/common/results-list/results-list-carousel/results-list-carousel.component.html +++ b/apps/datahub/src/app/common/results-list/results-list-carousel/results-list-carousel.component.html @@ -2,7 +2,7 @@ - -
- mel.datahub.search.hits.found -
-
- @for (record of searchFacade.results$ | async; track - record.uniqueIdentifier) { - - } -
-
- -
- +
+ @for (record of searchFacade.results$ | async; track record.uniqueIdentifier) + { + + }
diff --git a/apps/datahub/src/app/common/results-list/results-list.component.ts b/apps/datahub/src/app/common/results-list/results-list.component.ts index c359217f..6e797cd5 100644 --- a/apps/datahub/src/app/common/results-list/results-list.component.ts +++ b/apps/datahub/src/app/common/results-list/results-list.component.ts @@ -23,7 +23,6 @@ export class ResultsListComponent implements OnInit, OnDestroy { favoritesOnlyValue: boolean @Input() numberOfResults = 10 subscriptions: Subscription - resultsReady = false constructor( protected searchService: SearchService, @@ -43,11 +42,6 @@ export class ResultsListComponent implements OnInit, OnDestroy { if (this.favoritesOnlyValue) this.searchFacade.setFavoritesOnly(true) } ) - this.subscriptions.add( - this.searchFacade.results$.subscribe((results) => { - if (results.length > 0) this.resultsReady = true - }) - ) } ngOnDestroy() { @@ -61,8 +55,4 @@ export class ResultsListComponent implements OnInit, OnDestroy { onMetadataSelection(metadata: CatalogRecord): void { this.routerFacade.goToMetadata(metadata) } - - onShowMore() { - this.searchFacade.scroll() - } } diff --git a/apps/datahub/src/app/search/search-results/search-results.component.html b/apps/datahub/src/app/search/search-results/search-results.component.html index e555df3c..116ae614 100644 --- a/apps/datahub/src/app/search/search-results/search-results.component.html +++ b/apps/datahub/src/app/search/search-results/search-results.component.html @@ -1,3 +1,25 @@ - +
+ +
+ mel.datahub.search.hits.found +
+ +
+ +
+ +
diff --git a/apps/datahub/src/app/search/search-results/search-results.component.ts b/apps/datahub/src/app/search/search-results/search-results.component.ts index acff04a2..2e9ada0e 100644 --- a/apps/datahub/src/app/search/search-results/search-results.component.ts +++ b/apps/datahub/src/app/search/search-results/search-results.component.ts @@ -1,4 +1,5 @@ import { ChangeDetectionStrategy, Component } from '@angular/core' +import { SearchFacade } from 'geonetwork-ui' @Component({ selector: 'mel-datahub-search-results', @@ -6,4 +7,10 @@ import { ChangeDetectionStrategy, Component } from '@angular/core' styles: ``, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class SearchResultsComponent {} +export class SearchResultsComponent { + constructor(protected searchFacade: SearchFacade) {} + + onShowMore() { + this.searchFacade.scroll() + } +} From e6fd7dc7c6e851af52d4af3cd9a651c07bb9b671 Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Fri, 23 Feb 2024 12:04:36 +0100 Subject: [PATCH 12/21] feat(search-results): add spinning loader to show more button --- .../search-results.component.html | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/apps/datahub/src/app/search/search-results/search-results.component.html b/apps/datahub/src/app/search/search-results/search-results.component.html index 116ae614..0d898cde 100644 --- a/apps/datahub/src/app/search/search-results/search-results.component.html +++ b/apps/datahub/src/app/search/search-results/search-results.component.html @@ -15,11 +15,21 @@ [numberOfResults]="18" >
- + + + + + +
From 951f87f4c0a1e2c663a9e9eccea35dcf44ad68d9 Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Fri, 23 Feb 2024 14:06:14 +0100 Subject: [PATCH 13/21] refactor(search-page): use control flow syntax --- .../dropdown-select.component.html | 27 ++++++++++++------- .../search-filters.component.html | 3 ++- .../search-results.component.html | 13 +++++---- 3 files changed, 25 insertions(+), 18 deletions(-) diff --git a/apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.html b/apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.html index a7c00ddf..a1a04009 100644 --- a/apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.html +++ b/apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.html @@ -8,25 +8,30 @@ > {{ title }}
+ @if(hasSelectedChoices){
{{ selected['length'] }}
+ }
- expand_less - expand_more + @if(overlayOpen){ + expand_less + } @else { + expand_more + } @@ -57,9 +62,9 @@
+ @for(selected of selectedChoices; track selected.value){
- -
+ } @if(allowSearch){ +
+ @if(!!searchInputValue){ + }
+ }
- + @for(choice of filteredChoicesByText; track choice.value){ + }

diff --git a/apps/datahub/src/app/search/search-filters/search-filters.component.html b/apps/datahub/src/app/search/search-filters/search-filters.component.html index e4529e21..915f0406 100644 --- a/apps/datahub/src/app/search/search-filters/search-filters.component.html +++ b/apps/datahub/src/app/search/search-filters/search-filters.component.html @@ -1,7 +1,8 @@
+ @for(filter of searchConfig; track filter.fieldName) { + }
diff --git a/apps/datahub/src/app/search/search-results/search-results.component.html b/apps/datahub/src/app/search/search-results/search-results.component.html index 0d898cde..7ff447d2 100644 --- a/apps/datahub/src/app/search/search-results/search-results.component.html +++ b/apps/datahub/src/app/search/search-results/search-results.component.html @@ -15,21 +15,20 @@ [numberOfResults]="18" >
- + @if((searchFacade.isLoading$ | async) === false && + (searchFacade.isEndOfResults$ | async) === false){ + - + } @else if((searchFacade.isLoading$ | async) === true){ + + }
From b540d1a93be6e439bb852377963fdeee5369b0ef Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Fri, 23 Feb 2024 14:16:21 +0100 Subject: [PATCH 14/21] refactor(filter-dropdown): rename components extended from gn-ui with mel prefix in class name --- apps/datahub/src/app/app.module.ts | 8 ++++---- .../dropdown-multiselect.component.html} | 0 .../dropdown-multiselect.component.ts} | 6 +++--- .../filter-dropdown.component.html} | 4 ++-- .../filter-dropdown.component.ts} | 6 +++--- .../search/search-filters/search-filters.component.html | 4 ++-- 6 files changed, 14 insertions(+), 14 deletions(-) rename apps/datahub/src/app/search/search-filters/{dropdown-select/dropdown-select.component.html => dropdown-multiselect/dropdown-multiselect.component.html} (100%) rename apps/datahub/src/app/search/search-filters/{dropdown-select/dropdown-select.component.ts => dropdown-multiselect/dropdown-multiselect.component.ts} (52%) rename apps/datahub/src/app/search/search-filters/{search-filter-dropdown/search-filter-dropdown.component.html => filter-dropdown/filter-dropdown.component.html} (75%) rename apps/datahub/src/app/search/search-filters/{search-filter-dropdown/search-filter-dropdown.component.ts => filter-dropdown/filter-dropdown.component.ts} (52%) diff --git a/apps/datahub/src/app/app.module.ts b/apps/datahub/src/app/app.module.ts index 14d58f57..1544d927 100644 --- a/apps/datahub/src/app/app.module.ts +++ b/apps/datahub/src/app/app.module.ts @@ -63,8 +63,8 @@ import { ReactiveFormsModule } from '@angular/forms' import { MatAutocompleteModule } from '@angular/material/autocomplete' import { SearchFormComponent } from './search/search-form/search-form.component' import { SearchFiltersComponent } from './search/search-filters/search-filters.component' -import { SearchFilterDropdownComponent } from './search/search-filters/search-filter-dropdown/search-filter-dropdown.component' -import { DropdownSelectComponent } from './search/search-filters/dropdown-select/dropdown-select.component' +import { MelFilterDropdownComponent } from './search/search-filters/filter-dropdown/filter-dropdown.component' +import { MelDropdownMultiselectComponent } from './search/search-filters/dropdown-multiselect/dropdown-multiselect.component' import { OverlayModule } from '@angular/cdk/overlay' import { FormsModule } from '@angular/forms' @@ -100,8 +100,8 @@ import { FormsModule } from '@angular/forms' MelAutocompleteComponent, SearchFormComponent, SearchFiltersComponent, - SearchFilterDropdownComponent, - DropdownSelectComponent, + MelFilterDropdownComponent, + MelDropdownMultiselectComponent, ], imports: [ BrowserModule, diff --git a/apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.html b/apps/datahub/src/app/search/search-filters/dropdown-multiselect/dropdown-multiselect.component.html similarity index 100% rename from apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.html rename to apps/datahub/src/app/search/search-filters/dropdown-multiselect/dropdown-multiselect.component.html diff --git a/apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.ts b/apps/datahub/src/app/search/search-filters/dropdown-multiselect/dropdown-multiselect.component.ts similarity index 52% rename from apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.ts rename to apps/datahub/src/app/search/search-filters/dropdown-multiselect/dropdown-multiselect.component.ts index c307bd06..d38cfe67 100644 --- a/apps/datahub/src/app/search/search-filters/dropdown-select/dropdown-select.component.ts +++ b/apps/datahub/src/app/search/search-filters/dropdown-multiselect/dropdown-multiselect.component.ts @@ -2,9 +2,9 @@ import { ChangeDetectionStrategy, Component } from '@angular/core' import { DropdownMultiselectComponent } from 'geonetwork-ui' @Component({ - selector: 'mel-datahub-dropdown-select', - templateUrl: './dropdown-select.component.html', + selector: 'mel-datahub-dropdown-multiselect', + templateUrl: './dropdown-multiselect.component.html', styles: ``, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class DropdownSelectComponent extends DropdownMultiselectComponent {} +export class MelDropdownMultiselectComponent extends DropdownMultiselectComponent {} diff --git a/apps/datahub/src/app/search/search-filters/search-filter-dropdown/search-filter-dropdown.component.html b/apps/datahub/src/app/search/search-filters/filter-dropdown/filter-dropdown.component.html similarity index 75% rename from apps/datahub/src/app/search/search-filters/search-filter-dropdown/search-filter-dropdown.component.html rename to apps/datahub/src/app/search/search-filters/filter-dropdown/filter-dropdown.component.html index 044439bd..7b6c6477 100644 --- a/apps/datahub/src/app/search/search-filters/search-filter-dropdown/search-filter-dropdown.component.html +++ b/apps/datahub/src/app/search/search-filters/filter-dropdown/filter-dropdown.component.html @@ -1,4 +1,4 @@ - - + diff --git a/apps/datahub/src/app/search/search-filters/search-filter-dropdown/search-filter-dropdown.component.ts b/apps/datahub/src/app/search/search-filters/filter-dropdown/filter-dropdown.component.ts similarity index 52% rename from apps/datahub/src/app/search/search-filters/search-filter-dropdown/search-filter-dropdown.component.ts rename to apps/datahub/src/app/search/search-filters/filter-dropdown/filter-dropdown.component.ts index 1d972e2d..ef5d38b1 100644 --- a/apps/datahub/src/app/search/search-filters/search-filter-dropdown/search-filter-dropdown.component.ts +++ b/apps/datahub/src/app/search/search-filters/filter-dropdown/filter-dropdown.component.ts @@ -2,9 +2,9 @@ import { ChangeDetectionStrategy, Component } from '@angular/core' import { FilterDropdownComponent } from 'geonetwork-ui' @Component({ - selector: 'mel-datahub-search-filter-dropdown', - templateUrl: './search-filter-dropdown.component.html', + selector: 'mel-datahub-filter-dropdown', + templateUrl: './filter-dropdown.component.html', styles: ``, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class SearchFilterDropdownComponent extends FilterDropdownComponent {} +export class MelFilterDropdownComponent extends FilterDropdownComponent {} diff --git a/apps/datahub/src/app/search/search-filters/search-filters.component.html b/apps/datahub/src/app/search/search-filters/search-filters.component.html index 915f0406..053e41af 100644 --- a/apps/datahub/src/app/search/search-filters/search-filters.component.html +++ b/apps/datahub/src/app/search/search-filters/search-filters.component.html @@ -1,8 +1,8 @@
@for(filter of searchConfig; track filter.fieldName) { - + > }
From 8687a72aaa3a0fd6b8bf263bc2f071b2b5e30352 Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Fri, 23 Feb 2024 14:31:46 +0100 Subject: [PATCH 15/21] test(search-results): fix e2e tests --- apps/datahub-e2e/src/e2e/search.cy.ts | 2 +- .../src/app/search/search-results/search-results.component.html | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/datahub-e2e/src/e2e/search.cy.ts b/apps/datahub-e2e/src/e2e/search.cy.ts index 5d7ae9a2..3d758728 100644 --- a/apps/datahub-e2e/src/e2e/search.cy.ts +++ b/apps/datahub-e2e/src/e2e/search.cy.ts @@ -5,7 +5,7 @@ describe('datahub-e2e', () => { cy.get('.mel-page-title').should('be.visible') }) it('should display the number of result hits', () => { - cy.get('gn-ui-results-hits-number').should('contain', 14) + cy.get('[data-cy="searchResults"]').should('contain', 14) }) it('should display the footer', () => { cy.get('mel-datahub-footer').should('be.visible') diff --git a/apps/datahub/src/app/search/search-results/search-results.component.html b/apps/datahub/src/app/search/search-results/search-results.component.html index 7ff447d2..37e034d8 100644 --- a/apps/datahub/src/app/search/search-results/search-results.component.html +++ b/apps/datahub/src/app/search/search-results/search-results.component.html @@ -5,6 +5,7 @@ [showContent]="(searchFacade.results$ | async).length > 0" >
Date: Tue, 27 Feb 2024 10:59:29 +0100 Subject: [PATCH 16/21] chore(i18n): run `npm run i18n:extract` after rebase --- apps/datahub/src/assets/i18n/en_MEL.json | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/apps/datahub/src/assets/i18n/en_MEL.json b/apps/datahub/src/assets/i18n/en_MEL.json index 13594e8b..86f969c3 100644 --- a/apps/datahub/src/assets/i18n/en_MEL.json +++ b/apps/datahub/src/assets/i18n/en_MEL.json @@ -13,7 +13,16 @@ "mel.common.footer.social": "Social medias", "mel.common.header.title": "Data platform", "mel.datahub.home.title": "Métropole Européenne de Lille", + "mel.datahub.multiselect.filter.placeholder": "", "mel.datahub.search.clear": "", + "mel.datahub.search.filters.format": "", + "mel.datahub.search.filters.publicationYear": "", + "mel.datahub.search.filters.publisher": "", + "mel.datahub.search.filters.topic": "", + "mel.datahub.search.form.description": "", + "mel.datahub.search.form.title": "", + "mel.datahub.search.hits.found": "", + "mel.datahub.search.showMore": "", "mel.datahub.search.title": "dataset catalog", "mel.dataset.abstract": "Abstract", "mel.dataset.api": "API", From 2e96f5888144e590b15941422150f6bbe1772b4c Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Tue, 27 Feb 2024 11:14:45 +0100 Subject: [PATCH 17/21] feat(search-form): use mel fuzzy-search.component --- .../app/search/search-form/search-form.component.html | 10 +++++----- apps/datahub/src/styles.css | 3 +++ 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/apps/datahub/src/app/search/search-form/search-form.component.html b/apps/datahub/src/app/search/search-form/search-form.component.html index aaca89bd..884700c1 100644 --- a/apps/datahub/src/app/search/search-form/search-form.component.html +++ b/apps/datahub/src/app/search/search-form/search-form.component.html @@ -1,4 +1,4 @@ -
+

@@ -8,10 +8,10 @@

- + [autoFocus]="false" + >
diff --git a/apps/datahub/src/styles.css b/apps/datahub/src/styles.css index 1e7245e2..01da8362 100644 --- a/apps/datahub/src/styles.css +++ b/apps/datahub/src/styles.css @@ -50,6 +50,9 @@ .mel-social-media-button { @apply inline-flex items-center justify-center w-10 h-10 bg-primary rounded-full cursor-pointer hover:bg-primary-dark; } + .mel-fuzzy-search { + @apply w-[645px] text-[17px] pointer-events-auto; + } } .tippy-box[data-theme~='data-platform'] { background-color: rgba(0, 0, 0, 0); From 521388ff54143c65888e83510e1fe719dff666f1 Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Tue, 27 Feb 2024 11:15:17 +0100 Subject: [PATCH 18/21] refactor(style): use mel-title-line class --- .../dataset-information/dataset-information.component.html | 2 +- .../src/app/home/home-header/home-header.component.html | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/datahub/src/app/dataset/dataset-information/dataset-information.component.html b/apps/datahub/src/app/dataset/dataset-information/dataset-information.component.html index 9052cd78..5c369689 100644 --- a/apps/datahub/src/app/dataset/dataset-information/dataset-information.component.html +++ b/apps/datahub/src/app/dataset/dataset-information/dataset-information.component.html @@ -1,6 +1,6 @@
-
+
mel.dataset.informations
diff --git a/apps/datahub/src/app/home/home-header/home-header.component.html b/apps/datahub/src/app/home/home-header/home-header.component.html index cec1d998..47dbe395 100644 --- a/apps/datahub/src/app/home/home-header/home-header.component.html +++ b/apps/datahub/src/app/home/home-header/home-header.component.html @@ -5,14 +5,14 @@

-
+
mel.homepage.public.datasets
From b33f1cb6720f4c2b477dcbf09b130f1e88ebaeb9 Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Tue, 27 Feb 2024 14:47:16 +0100 Subject: [PATCH 19/21] fix(content-ghost): change condition to isLoading to prevent ghost displaying in search-results if no results found --- .../results-list-carousel/results-list-carousel.component.html | 2 +- .../src/app/search/search-results/search-results.component.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/datahub/src/app/common/results-list/results-list-carousel/results-list-carousel.component.html b/apps/datahub/src/app/common/results-list/results-list-carousel/results-list-carousel.component.html index 6ab90501..c82e49ec 100644 --- a/apps/datahub/src/app/common/results-list/results-list-carousel/results-list-carousel.component.html +++ b/apps/datahub/src/app/common/results-list/results-list-carousel/results-list-carousel.component.html @@ -2,7 +2,7 @@
Date: Tue, 27 Feb 2024 14:47:58 +0100 Subject: [PATCH 20/21] test(e2e): add and restructure tests --- apps/datahub-e2e/src/e2e/home.cy.ts | 61 +++++--- apps/datahub-e2e/src/e2e/search.cy.ts | 207 +++++++++++++++++++------- 2 files changed, 188 insertions(+), 80 deletions(-) diff --git a/apps/datahub-e2e/src/e2e/home.cy.ts b/apps/datahub-e2e/src/e2e/home.cy.ts index 828be208..4ff8fca5 100644 --- a/apps/datahub-e2e/src/e2e/home.cy.ts +++ b/apps/datahub-e2e/src/e2e/home.cy.ts @@ -1,33 +1,33 @@ -describe('datahub-e2e', () => { +describe('home', () => { beforeEach(() => cy.visit('/home')) - it('should display the title', () => { - cy.get('.mel-page-title').should('be.visible') - }) - it('should display the search bar and placeholder', () => { - cy.get('mel-datahub-fuzzy-search').should('be.visible') - cy.get('mel-datahub-autocomplete').should('have.length.gt', 0) + describe('home header search', () => { + it('should display the title', () => { + cy.get('.mel-page-title').should('be.visible') + }) + it('should display the search bar and placeholder', () => { + cy.get('mel-datahub-fuzzy-search').should('be.visible') + cy.get('mel-datahub-autocomplete').should('have.length.gt', 0) + }) + it('should navigate to search and display results when executing a search', () => { + cy.get('mel-datahub-fuzzy-search').type('test{enter}') + cy.url().should('include', 'search') + cy.get('mel-datahub-results-card-search').should('have.length.gt', 0) + }) }) - it('should display results card last created', () => { - cy.get('mel-datahub-results-card-last-created').should('be.visible') - cy.get('mel-datahub-results-card-last-created').should('have.length.gt', 0) - cy.get('mel-datahub-results-card-last-created').as('lastCreatedCard') - cy.get('@lastCreatedCard').find('h1').should('be.visible') - cy.get('@lastCreatedCard').find('.mel-badge-button').should('be.visible') - }) + describe('home header carousel', () => { + it('should display results card last created', () => { + cy.get('mel-datahub-results-card-last-created').should('be.visible') + cy.get('mel-datahub-results-card-last-created').should( + 'have.length.gt', + 0 + ) + cy.get('mel-datahub-results-card-last-created').as('lastCreatedCard') - describe('interactions with dataset', () => { - beforeEach(() => { - cy.get('mel-datahub-results-card-last-created').first().as('firstResult') - }) - it('should open the dataset page in the same application on click', () => { - cy.get('@firstResult').click() - cy.url().should('include', 'dataset') - cy.get('mel-datahub-dataset-page').should('be.visible') + cy.get('@lastCreatedCard').find('h1').should('be.visible') + cy.get('@lastCreatedCard').find('.mel-badge-button').should('be.visible') }) - }) - describe('custom carousel', () => { it('should display a carousel that loops through last created cards', () => { cy.get('mel-datahub-custom-carousel').find( 'mel-datahub-results-card-last-created' @@ -45,7 +45,20 @@ describe('datahub-e2e', () => { ) .should('be.visible') }) + describe('interactions with dataset', () => { + beforeEach(() => { + cy.get('mel-datahub-results-card-last-created') + .first() + .as('firstResult') + }) + it('should open the dataset page in the same application on click', () => { + cy.get('@firstResult').click() + cy.url().should('include', 'dataset') + cy.get('mel-datahub-dataset-page').should('be.visible') + }) + }) }) + describe('footer', () => { beforeEach(() => { cy.get('mel-datahub-footer').as('footer') diff --git a/apps/datahub-e2e/src/e2e/search.cy.ts b/apps/datahub-e2e/src/e2e/search.cy.ts index 3d758728..14a8e059 100644 --- a/apps/datahub-e2e/src/e2e/search.cy.ts +++ b/apps/datahub-e2e/src/e2e/search.cy.ts @@ -1,60 +1,26 @@ -describe('datahub-e2e', () => { +describe('search', () => { beforeEach(() => cy.visit('/search')) - it('should display the title', () => { - cy.get('.mel-page-title').should('be.visible') - }) - it('should display the number of result hits', () => { - cy.get('[data-cy="searchResults"]').should('contain', 14) - }) - it('should display the footer', () => { - cy.get('mel-datahub-footer').should('be.visible') - }) - it('should display the result hits in search card', () => { - cy.get('mel-datahub-results-card-search').should('have.length', 14) - }) - - // If not logged in or no favorites exists - it('should display record results in last created cards inside a carousel', () => { - cy.get('mel-datahub-custom-carousel') - .find('mel-datahub-results-card-last-created') - .eq(0) - .find('h1') - .should( - 'have.text', - ' Metadata for E2E testing purpose. (this title is too long and should be cut, this title is too long and should be cut, this title is too long and should be cut, this title is too long and should be cut, this title is too long and should be cut) ' - ) - - cy.get('mel-datahub-results-card-last-created') - .find('h1') - .should('be.visible') - - cy.get('mel-datahub-results-card-last-created') - .find('.mel-badge-button') - .should('be.visible') - }) - - describe('interactions with dataset', () => { - beforeEach(() => { - cy.get('mel-datahub-results-card-last-created').first().as('firstResult') + describe('search page defaults', () => { + it('should display the title', () => { + cy.get('.mel-page-title').should('be.visible') + }) + it('should display the number of result hits', () => { + cy.get('[data-cy="searchResults"]').should('contain', 14) + }) + it('should display the footer', () => { + cy.get('mel-datahub-footer').should('be.visible') }) - it('should open the dataset page in the same application on click', () => { - cy.get('@firstResult').click() - cy.url().should('include', 'dataset') - cy.get('mel-datahub-dataset-page').should('be.visible') + it('should display the result hits in search card', () => { + cy.get('mel-datahub-results-card-search').should('have.length', 14) }) }) - // If logged in and favorites exist - describe('User logged in', () => { - beforeEach(() => { - cy.login() - cy.visit('/search') - cy.get('mel-datahub-heart-toggle').first().click() - }) - it('should display record results in favorite cards inside a carousel', () => { + describe('search header carousel', () => { + // If not logged in or no favorites exists + it('should display record results in last created cards inside a carousel', () => { cy.get('mel-datahub-custom-carousel') - .find('mel-datahub-results-card-favorite') + .find('mel-datahub-results-card-last-created') .eq(0) .find('h1') .should( @@ -62,24 +28,153 @@ describe('datahub-e2e', () => { ' Metadata for E2E testing purpose. (this title is too long and should be cut, this title is too long and should be cut, this title is too long and should be cut, this title is too long and should be cut, this title is too long and should be cut) ' ) - cy.get('mel-datahub-results-card-favorite') - .find('.mel-badge-button') + cy.get('mel-datahub-results-card-last-created') + .find('h1') .should('be.visible') - cy.get('mel-datahub-results-card-favorite') - .find('mel-datahub-metadata-quality') + cy.get('mel-datahub-results-card-last-created') + .find('.mel-badge-button') .should('be.visible') }) describe('interactions with dataset', () => { beforeEach(() => { - cy.get('mel-datahub-results-card-favorite').first().as('firstResult') + cy.get('mel-datahub-results-card-last-created') + .first() + .as('firstResult') }) it('should open the dataset page in the same application on click', () => { - cy.get('@firstResult').find('h1').click() + cy.get('@firstResult').click() cy.url().should('include', 'dataset') cy.get('mel-datahub-dataset-page').should('be.visible') }) }) + + // If logged in and favorites exist + describe('User logged in', () => { + beforeEach(() => { + cy.login() + cy.visit('/search') + cy.get('mel-datahub-heart-toggle').first().click() + }) + it('should display record results in favorite cards inside a carousel', () => { + cy.get('mel-datahub-custom-carousel') + .find('mel-datahub-results-card-favorite') + .eq(0) + .find('h1') + .should( + 'have.text', + ' Metadata for E2E testing purpose. (this title is too long and should be cut, this title is too long and should be cut, this title is too long and should be cut, this title is too long and should be cut, this title is too long and should be cut) ' + ) + + cy.get('mel-datahub-results-card-favorite') + .find('.mel-badge-button') + .should('be.visible') + + cy.get('mel-datahub-results-card-favorite') + .find('mel-datahub-metadata-quality') + .should('be.visible') + }) + + describe('interactions with dataset', () => { + beforeEach(() => { + cy.get('mel-datahub-results-card-favorite').first().as('firstResult') + }) + it('should open the dataset page in the same application on click', () => { + cy.get('@firstResult').find('h1').click() + cy.url().should('include', 'dataset') + cy.get('mel-datahub-dataset-page').should('be.visible') + }) + }) + }) + }) + + describe('search form and results', () => { + const getFilterOptions = () => { + cy.get('[id^=dropdown-multiselect-] label').as('options') + } + + beforeEach(() => { + cy.get('mel-datahub-filter-dropdown').as('filters') + cy.get('mel-datahub-results-card-search').as('result-cards') + }) + + it('should display the search form', () => { + cy.get('mel-datahub-search-form').should('be.visible') + }) + it('should display the search filters', () => { + cy.get('mel-datahub-search-filters').should('be.visible') + }) + it('should display the search results', () => { + cy.get('mel-datahub-search-results').should('be.visible') + }) + it('should display the search results in a grid', () => { + cy.get('mel-datahub-results-list-grid').should('be.visible') + }) + it('should filter the results when selecting a filter value (topic)', () => { + cy.get('@filters').eq(0).click() + getFilterOptions() + cy.get('@options').eq(0).click() + cy.get('@result-cards').should('have.length', 2) + cy.get('@result-cards') + .eq(0) + .find('h1') + .should('have.text', ' Alpenkonvention ') + cy.get('@result-cards') + .eq(1) + .find('h1') + .should( + 'have.text', + ' Patrimoine - Biens classés et zones de protection - Série ' + ) + }) + it('should filter the results when selecting multiple filter values (producer)', () => { + cy.get('@filters').eq(1).click() + getFilterOptions() + cy.get('@options').eq(0).click() + cy.get('@options').eq(1).click() + cy.get('@options').eq(2).click() + cy.get('mel-datahub-results-card-search').should('have.length', 3) + }) + it('should filter the results when executing a search', () => { + cy.get('mel-datahub-autocomplete input').type('velo') + cy.get('mel-datahub-autocomplete .material-symbols-outlined') + .contains('search') + .click() + cy.get('@result-cards').should('have.length', 1) + cy.get('@result-cards') + .eq(0) + .find('h1') + .should('have.text', ' Accroches vélos MEL ') + }) + it('should combine search input and filters (producer)', () => { + cy.get('mel-datahub-autocomplete input').type('test') + cy.get('mel-datahub-autocomplete .material-symbols-outlined') + .contains('search') + .click() + cy.get('@result-cards').should('have.length', 3) + cy.get('@filters').eq(1).click() + getFilterOptions() + cy.get('@options').eq(12).click() + cy.get('@result-cards').should('have.length', 1) + cy.get('@result-cards') + .eq(0) + .find('h1') + .should('have.text', ' Accroches vélos MEL ') + }) + it('should combine search input and filters and display a message if no results found', () => { + cy.get('mel-datahub-autocomplete input').type('test') + cy.get('mel-datahub-autocomplete .material-symbols-outlined') + .contains('search') + .click() + cy.get('@result-cards').should('have.length', 3) + cy.get('@filters').eq(1).click() + getFilterOptions() + cy.get('@options').eq(10).click() + cy.get('[data-cy=searchResults]').should( + 'have.text', + ' Aucune correspondance. ' + ) + }) }) }) From c763763a5b8f3178bb453bd7a76392c52f82a5e6 Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Wed, 28 Feb 2024 09:21:58 +0100 Subject: [PATCH 21/21] review: address comments --- apps/datahub-e2e/src/e2e/search.cy.ts | 16 ++++++++-------- .../dropdown-multiselect.component.html | 6 +++--- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/apps/datahub-e2e/src/e2e/search.cy.ts b/apps/datahub-e2e/src/e2e/search.cy.ts index 14a8e059..dd282926 100644 --- a/apps/datahub-e2e/src/e2e/search.cy.ts +++ b/apps/datahub-e2e/src/e2e/search.cy.ts @@ -21,7 +21,7 @@ describe('search', () => { it('should display record results in last created cards inside a carousel', () => { cy.get('mel-datahub-custom-carousel') .find('mel-datahub-results-card-last-created') - .eq(0) + .first() .find('h1') .should( 'have.text', @@ -60,7 +60,7 @@ describe('search', () => { it('should display record results in favorite cards inside a carousel', () => { cy.get('mel-datahub-custom-carousel') .find('mel-datahub-results-card-favorite') - .eq(0) + .first() .find('h1') .should( 'have.text', @@ -112,12 +112,12 @@ describe('search', () => { cy.get('mel-datahub-results-list-grid').should('be.visible') }) it('should filter the results when selecting a filter value (topic)', () => { - cy.get('@filters').eq(0).click() + cy.get('@filters').first().click() getFilterOptions() - cy.get('@options').eq(0).click() + cy.get('@options').first().click() cy.get('@result-cards').should('have.length', 2) cy.get('@result-cards') - .eq(0) + .first() .find('h1') .should('have.text', ' Alpenkonvention ') cy.get('@result-cards') @@ -131,7 +131,7 @@ describe('search', () => { it('should filter the results when selecting multiple filter values (producer)', () => { cy.get('@filters').eq(1).click() getFilterOptions() - cy.get('@options').eq(0).click() + cy.get('@options').first().click() cy.get('@options').eq(1).click() cy.get('@options').eq(2).click() cy.get('mel-datahub-results-card-search').should('have.length', 3) @@ -143,7 +143,7 @@ describe('search', () => { .click() cy.get('@result-cards').should('have.length', 1) cy.get('@result-cards') - .eq(0) + .first() .find('h1') .should('have.text', ' Accroches vélos MEL ') }) @@ -158,7 +158,7 @@ describe('search', () => { cy.get('@options').eq(12).click() cy.get('@result-cards').should('have.length', 1) cy.get('@result-cards') - .eq(0) + .first() .find('h1') .should('have.text', ' Accroches vélos MEL ') }) diff --git a/apps/datahub/src/app/search/search-filters/dropdown-multiselect/dropdown-multiselect.component.html b/apps/datahub/src/app/search/search-filters/dropdown-multiselect/dropdown-multiselect.component.html index a1a04009..a3494706 100644 --- a/apps/datahub/src/app/search/search-filters/dropdown-multiselect/dropdown-multiselect.component.html +++ b/apps/datahub/src/app/search/search-filters/dropdown-multiselect/dropdown-multiselect.component.html @@ -1,5 +1,5 @@