@@ -81,10 +81,12 @@
+
+
diff --git a/src/app/datasets/components/results/results.component.scss b/src/app/datasets/components/results/results.component.scss index 5d715f9373056ba9f51d4ce4948c4ef4e31ff162..951fd8b001531ce444ba71ae08ca1ce75595fbe6 100644 --- a/src/app/datasets/components/results/results.component.scss +++ b/src/app/datasets/components/results/results.component.scss @@ -1,6 +1,19 @@ @import "../../../../../node_modules/bulma/sass/utilities/_all"; @import "../../../../scss/variables.scss"; +//not working in a calc() +$sticky-distance: $header-bar-height + 32px; + +.main-content { + display: flex; + padding: 2rem; + flex-direction: column; + + @media screen and(min-width:$desktop) { + flex-direction: row; + } +} + @media (max-width: $tablet) { .header-dataset { flex-direction: column-reverse; @@ -27,7 +40,7 @@ justify-content: space-between; align-items: center; background: $grey-background-color; - border-bottom: 1px solid $grey-super-light-color; + //border-bottom: 1px solid $grey-super-light-color; cursor: pointer; .filter-title { @@ -65,12 +78,19 @@ .filter-column { padding: 0; top: 10px; + background: white; + box-shadow: 0px 6px 12px rgba(129, 128, 128, 0.1); + border-radius: 8px; + padding: 0.7rem; + margin-bottom: 1rem; @media screen and (min-width: $desktop) { height: calc(100vh - #{$header-bar-height} - #{$footer-height}); overflow-y: auto; position: sticky; - top: $header-bar-height; + top: $sticky-distance; + margin-right: 1rem; + margin-bottom: 0; } } @@ -79,27 +99,31 @@ // Padding more small for mobile padding: 0.5rem; padding-top: 0; + box-shadow: 0px 6px 12px rgba(129, 128, 128, 0.1); + border-radius: 8px; + box-sizing: border-box; + flex-shrink: 1; @media screen and (min-width: $tablet) { - padding: 1.5rem; + padding: 2rem; } .tab-results { margin-top: 1rem; margin-bottom: 1rem; - border-bottom: 1px solid $grey-super-light-color; + border-bottom: 2px solid $grey-background-color; // Make the border have all the screen margin-left: -0.5rem; margin-right: -0.5rem; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-left: 1.25rem; + padding-right: 1.25rem; @media screen and (min-width: $tablet) { - margin-left: -1.5rem; - margin-right: -1.5rem; + margin-left: -2rem; + margin-right: -2rem; padding-left: 1.5rem; padding-right: 1.5rem; - margin-top: 2rem; + margin-top: 0; } } @@ -205,6 +229,12 @@ span.item-found { margin-top: 0.5rem; } +hr { + margin-left: -2rem; + margin-right: -2rem; + background: $grey-background-color; +} + .pagination-bottom { display: flex; justify-content: center; diff --git a/src/app/datasets/components/results/results.component.ts b/src/app/datasets/components/results/results.component.ts index f113d3ff3627c28c6a6cb395511066f6b505f551..e81ed1d27ae1052e53ccd9be32b50acfb8ef2a88 100644 --- a/src/app/datasets/components/results/results.component.ts +++ b/src/app/datasets/components/results/results.component.ts @@ -1,17 +1,17 @@ import { DatePipe, ViewportScroller } from '@angular/common'; import { Component, OnDestroy, OnInit } from '@angular/core'; import { Meta } from '@angular/platform-browser'; +import { ActivatedRoute } from '@angular/router'; import { Subscription } from 'rxjs'; -import { metaDescription } from '../../../../i18n/traductions'; +import { metaDescription, notificationMessages } from '../../../../i18n/traductions'; import { Notification } from '../../../core/models'; import { NotificationService } from '../../../core/services'; -import { MatomoService } from '../../../core/services/matomo.service'; import { CMSContent } from '../../../editorialisation/models'; import { IScope } from '../../../elasticsearch/models'; import { AppRoutes } from '../../../routes'; import { Dataset, IMetadataLink, PaginatorOptions } from '../../../shared/models'; import { SearchSuggestion } from '../../models'; -import { DatasetResearchService } from '../../services'; +import { DatasetResearchService, ResearchUrlService } from '../../services'; @Component({ selector: 'app-results', @@ -25,7 +25,7 @@ export class ResultsComponent implements OnInit, OnDestroy { results: Dataset[] | CMSContent[]; countResults: []; - + hasParams: boolean = false; searchChangeSub: Subscription; // Paginator options paginator: PaginatorOptions; @@ -39,15 +39,36 @@ export class ResultsComponent implements OnInit, OnDestroy { private _datasetResearchService: DatasetResearchService, private _notificationService: NotificationService, private _datePipe: DatePipe, - private _matomoService: MatomoService, + private _researchUrlService: ResearchUrlService, private _viewportScroller: ViewportScroller, private _meta: Meta, + private _route: ActivatedRoute, ) { } ngOnInit() { + // Set the title and description for the research page this._meta.updateTag({ name: 'description', content: metaDescription.research }); + // If url with parameters too long, we reset it and display a notif + + if (location.href.length > 2000) { + this._researchUrlService.reset(); + this._notificationService.notify(new Notification({ + message: notificationMessages.general.urlToolLong, + type: 'warning', + })); + } else { + this._route.queryParams.subscribe((params) => { + this.manageUrlParameters(params); + }); + } + + if (!this.hasParams) { + this.search(); + this.getSuggestion(); + } + this.countResults = []; this.paginator = { pageIndex: this._datasetResearchService.pageIndex + 1, @@ -55,8 +76,7 @@ export class ResultsComponent implements OnInit, OnDestroy { pageSize: this._datasetResearchService.pageSize, pageSizeOptions: [5, 10, 20], }; - this.search(); - this.getSuggestion(); + this.searchChangeSub = this._datasetResearchService.searchChange$.subscribe( (value) => { this.search(); @@ -65,14 +85,80 @@ export class ResultsComponent implements OnInit, OnDestroy { ); } + // If there are parameters, we extract them to set the ESoptions for a news search. + private manageUrlParameters(params) { + if (params && Object.keys(params).length > 0) { + this.hasParams = true; + // We need to make an initial request to get the aggregations and subaggregations + this._datasetResearchService.getResults().subscribe(() => { + // Create the ESOptions + const options = this._researchUrlService.getOptionsFromParameters(params); + this._datasetResearchService.elasticSearchOptions.setElasticsearchOptions(options); + // Force to recalculate the aggregate counts + this._datasetResearchService.shouldAggregateResultCount = true; + // Set the aggregations + const aggParameters = this._researchUrlService.aggParameters; + + Object.keys(aggParameters).forEach((key) => { + const aggField = `metadata-fr.${key}`; + const oneAgg = aggParameters[key]; + + oneAgg.forEach((troncatedKey: string) => { + let newAggField = aggField; + let aggKey = ''; + + // Find out if it's an aggregation or subaggregation + const filters = this._datasetResearchService.elasticSearchOptions.filters; + let parentAgg = ''; + + filters.forEach((filter) => { + + if (filter.field === aggField) { + // No need this rule. In this case we control the parameters, and we want a loose + // comparison to handle the filter with a 'Date' type (where the key aggregation is a number). + // tslint:disable-next-line: triple-equals + const aggregation = filter.aggregations.find(el => el.troncatedKey == troncatedKey); + if (aggregation) { + aggKey = aggregation.key; + } + } + if (filter.subField === aggField) { + // We need to find the parent aggregation + filter.aggregations.forEach((aggregation) => { + if (aggregation.subAggregations.length > 0) { + const index = aggregation.subAggregations.findIndex(el => el.troncatedKey === troncatedKey); + + const subAggregation = aggregation.subAggregations[index]; + + if (subAggregation) { + aggKey = subAggregation.key; + parentAgg = subAggregation.parentAggregation.key; + newAggField = subAggregation.parentAggregation.field; + } + } + }); + } + }); + + this._datasetResearchService.updateAggregation(newAggField, aggKey, true, parentAgg, false); + }); + }); + this._datasetResearchService.triggerSearchChange(); + }); + } + } + ngOnDestroy() { this.searchChangeSub.unsubscribe(); + // Reset the url parameters + this._researchUrlService.reset(); } search() { this._datasetResearchService.getResults().subscribe( (res) => { this.selectedScope = this._datasetResearchService.scopeReasearch; + const position = this._viewportScroller.getScrollPosition(); this.results = res; diff --git a/src/app/datasets/components/search-bar/search-bar.component.html b/src/app/datasets/components/search-bar/search-bar.component.html index b52e1ed495033a46ee478e23ddaaea6ac38b52c3..2c5c2fc257684e7765a279d4aff9760623891773 100644 --- a/src/app/datasets/components/search-bar/search-bar.component.html +++ b/src/app/datasets/components/search-bar/search-bar.component.html @@ -18,9 +18,15 @@