From 59bd3918e8437535eb4e69c649517bf32a6a5833 Mon Sep 17 00:00:00 2001 From: "konstantina.galouni" Date: Thu, 21 Dec 2023 10:57:14 +0200 Subject: [PATCH] [angular-16-irish-monitor | DONE | ADDED]: New type of filter (triplet) added - use of | Grouping of filters added | Fixed checks for dependent filters and added new checks for dependent to filter values. 1. newSearchPage.component.html: Added display of grouped filters | Added checks for triplet typed filters. 2. newSearchPage.component.ts: Fixed checks for dependent filters and added new checks for dependent to filter values. 3. searchFilter.component.html: New "triplet" type of filter | Grouping of filters - smaller titles. 4. searchFilter.component.ts: Added field "@Input() grouped: boolean = false" | Added check for triplet filter | Added method "tripletFilterChange()". 5. searchFilter.module.ts: Import MatButtonToggleModule. 6. searchResearchResults.component.ts: Fixed how groupedFilters are initialized - TODO: Add this fix in other search pages too. --- .../searchResearchResults.component.ts | 18 ++- .../searchUtils/newSearchPage.component.html | 32 +++-- .../searchUtils/newSearchPage.component.ts | 126 ++++++++++++++++-- .../searchUtils/searchFilter.component.html | 91 ++++++++++++- .../searchUtils/searchFilter.component.ts | 17 ++- .../searchUtils/searchFilter.module.ts | 3 +- 6 files changed, 255 insertions(+), 32 deletions(-) diff --git a/searchPages/searchResearchResults.component.ts b/searchPages/searchResearchResults.component.ts index b3eddab7..50e48e8c 100644 --- a/searchPages/searchResearchResults.component.ts +++ b/searchPages/searchResearchResults.component.ts @@ -318,7 +318,14 @@ export class SearchResearchResultsComponent { } if (refine) { - this.filters = this.searchPage.prepareFiltersToShow(filters, totalResults); + let refineFilters = this.searchPage.prepareFiltersToShow(filters, totalResults); + // for(let filter of refineFilters) { + // let index = this.filters.findIndex(oldFilter => oldFilter.filterId == filter.filterId); + // if(index != -1 && this.filters[index].isOpen) { + // filter.isOpen = true; + // } + // } + this.filters = refineFilters; this.rangeFilters = this.searchPage.prepareRangeFiltersToShow(); this.staticFilters = this.searchPage.prepareStaticFiltersToShow(); @@ -328,9 +335,14 @@ export class SearchResearchResultsComponent { if (group.type == "refine") { let groupedFilters = {title: group.title, values: []}; for (let field of group.values) { - let index = this.filters.findIndex(filter => filter.filterId == field); + let index = this.staticFilters.findIndex(filter => filter.filterId == field); if (index > -1) { - groupedFilters.values.push(this.filters[index]); + groupedFilters.values.push(this.staticFilters[index]); + } else { + index = this.filters.findIndex(filter => filter.filterId == field); + if (index > -1) { + groupedFilters.values.push(this.filters[index]); + } } } if (groupedFilters.values.length > 0) { diff --git a/searchPages/searchUtils/newSearchPage.component.html b/searchPages/searchUtils/newSearchPage.component.html index 04962d33..e52de3b5 100644 --- a/searchPages/searchUtils/newSearchPage.component.html +++ b/searchPages/searchUtils/newSearchPage.component.html @@ -49,9 +49,13 @@ - {{filter.title}}: - {{value.name=='true'?'Yes':'No'}} - + + + {{filter.title}}: + {{(value.name=='true'||value.name=='Yes')?'Yes':'No'}} + + + {{value.name}} @@ -70,10 +74,12 @@ class=""> - {{filter.title}}: - {{value.name=='true'?'Yes':'No'}} - + class="uk-margin-small-right uk-width-expand uk-text-truncate"> + + {{filter.title}}: + {{(value.name=='true'||value.name=='Yes')?'Yes':'No'}} + + {{value.name}} @@ -94,13 +100,13 @@ - + + [actionRoute]="true" [grouped]="grouped"> @@ -125,15 +131,15 @@
    -
    {{group.title}}
    - +
    {{group.title}}
    +
    • -
  • - +
  • +
    • diff --git a/searchPages/searchUtils/newSearchPage.component.ts b/searchPages/searchUtils/newSearchPage.component.ts index bc8d2293..d7cfb611 100644 --- a/searchPages/searchUtils/newSearchPage.component.ts +++ b/searchPages/searchUtils/newSearchPage.component.ts @@ -425,13 +425,19 @@ export class NewSearchPageComponent implements OnInit, OnDestroy, OnChanges { /* * Get A sub-array of this.refineFields array, which contains the ids of the selected filters */ - public getSelectedFilters(): string[] { - var selected: string[] = []; + public getSelectedFilters(): Map { + var selected: Map = new Map(); var filters = this.URLCreatedFilters; for (var i = 0; i < filters.length; i++) { var filter: Filter = filters[i]; if (filter.countSelectedValues > 0) { - selected.push(filter.filterId); + let selectedValues: string[] = []; + for(let value of filter.values) { + if(value.selected) { + selectedValues.push(value.id); + } + } + selected.set(filter.filterId, selectedValues); } } return selected; @@ -440,31 +446,96 @@ export class NewSearchPageComponent implements OnInit, OnDestroy, OnChanges { /* * Get A sub-array of this.refineFields array, which contains the ids of the selected parameters */ - private getSelectedParameters(): string[] { - var selected: string[] = []; + private getSelectedParameters(): Map { + var selected: Map = new Map(); for (var i = 0; i < this.refineFields.length; i++) { - if (this.parameterNames.indexOf(this.refineFields[i]) != -1) { - selected.push(this.refineFields[i]); + let selectedValues: string[] = []; + let index = this.parameterNames.indexOf(this.refineFields[i]); + if (index != -1) { + for(let values of this.parameterValues[index]) { + let split = values.split('"'); + for(let value of split) { + if(value != "" && value != ",") { + selectedValues.push(value); + } + } + } + selected.set(this.refineFields[i], selectedValues); } } return selected; } - + + /* +* Get A sub-array of this.staticFields array, which contains the ids of the selected filters +*/ + public getSelectedStaticFilters(): Map { + var selected: Map = new Map(); + var filters = this.URLCreatedStaticFilters; + for (var i = 0; i < filters.length; i++) { + var filter: Filter = filters[i]; + if (filter.countSelectedValues > 0) { + let selectedValues: string[] = []; + for(let value of filter.values) { + if(value.selected) { + selectedValues.push(value.id); + } + } + selected.set(filter.filterId, selectedValues); + } + } + return selected; + } + + /* + * Get A sub-array of this.staticFields array, which contains the ids of the selected parameters + */ + private getSelectedStaticParameters(): Map { + var selected: Map = new Map(); + for (var i = 0; i < this.staticFields.length; i++) { + let selectedValues: string[] = []; + let index = this.parameterNames.indexOf(this.staticFields[i]); + if (index != -1) { + let split = this.parameterValues[index].split('"'); + for(let value of split) { + if(value != "" && value != ",") { + selectedValues.push(value); + } + } + selected.set(this.staticFields[i], selectedValues); + } + } + return selected; + } + /* * Get A sub-array of this.refineFields array, which hides hidden fields (e.g Funding level 0,1,2,..), and contains those that depend on another fields (e.g Funding level 0 if Funder is selected ) */ public getFields(): string[] { - var selected_filters: string[] = this.getSelectedFilters(); - if (selected_filters.length == 0) { + var selected_filters: Map = this.getSelectedFilters(); + if (selected_filters.size == 0) { selected_filters = this.getSelectedParameters(); } + + var selected_static_filters: Map = this.getSelectedStaticFilters(); + if (selected_static_filters.size == 0) { + selected_static_filters = this.getSelectedStaticParameters(); + } + + let all_selected_filters = new Map([...selected_filters, ...selected_static_filters]); + // let all_selected_filters = selected_filters.concat(selected_static_filters); + var fields: string[] = []; for (var i = 0; i < this.refineFields.length; i++) { var dependentTo = this.searchFieldsHelper.DEPENDENT_FIELDS[this.refineFields[i]]; + var dependentToValues = this.searchFieldsHelper.DEPENDENT_FIELDS_AND_VALUES[this.refineFields[i]]; // TODO check again the checks //if filter is not marked as hidden OR it is hidden but it is dependent to a field that it IS selected if (this.searchFieldsHelper.HIDDEN_FIELDS.indexOf(this.refineFields[i]) == -1 - || (selected_filters.indexOf(dependentTo) != -1) || (selected_filters.indexOf(this.refineFields[i]) != -1) + || (all_selected_filters.has(this.refineFields[i])) + || (!dependentTo && !dependentToValues) + || (all_selected_filters.has(dependentTo)) + || (dependentToValues && (all_selected_filters.has(dependentToValues.field) && dependentToValues.values.some(dependentValue=> all_selected_filters.get(dependentToValues.field).includes(dependentValue)))) || (this.resultTypes && this.resultTypes.filterId == dependentTo && this.resultTypes.countSelectedValues > 0) // || (this.resultAccesses && this.resultAccesses.filterId == dependentTo && this.resultAccesses.countSelectedValues > 0) ) { @@ -1762,7 +1833,38 @@ export class NewSearchPageComponent implements OnInit, OnDestroy, OnChanges { } public prepareStaticFiltersToShow() { - this.staticFilters = RefineResultsUtils.parse(this.staticFieldValues, this.staticFields, this.entityType, "search", true); + var selected_filters: Map = this.getSelectedFilters(); + if (selected_filters.size == 0) { + selected_filters = this.getSelectedParameters(); + } + + var selected_static_filters: Map = this.getSelectedStaticFilters(); + if (selected_static_filters.size == 0) { + selected_static_filters = this.getSelectedStaticParameters(); + } + + let all_selected_filters = new Map([...selected_filters, ...selected_static_filters]); + // let all_selected_filters = selected_filters.concat(selected_static_filters); + + let staticFields: string[] = []; + + for (var i = 0; i < this.staticFields.length; i++) { + var dependentTo = this.searchFieldsHelper.DEPENDENT_FIELDS[this.staticFields[i]]; + var dependentToValues = this.searchFieldsHelper.DEPENDENT_FIELDS_AND_VALUES[this.staticFields[i]]; + + // TODO check again the checks + //if filter is not marked as hidden OR it is hidden but it is dependent to a field that it IS selected + if (this.searchFieldsHelper.HIDDEN_FIELDS.indexOf(this.staticFields[i]) == -1 + || (all_selected_filters.has(this.staticFields[i])) + || (!dependentTo && !dependentToValues) + || (all_selected_filters.has(dependentTo)) + || (dependentToValues && (all_selected_filters.has(dependentToValues.field) && dependentToValues.values.some(dependentValue=> all_selected_filters.get(dependentToValues.field).includes(dependentValue)))) + ) { + staticFields.push(this.staticFields[i]); + } + } + + this.staticFilters = RefineResultsUtils.parse(this.staticFieldValues, staticFields, this.entityType, "search", true); this.checkSelectedStaticFilters(this.staticFilters); this.countSelectedStaticFilters(this.staticFilters); this.cdr.detectChanges(); diff --git a/searchPages/searchUtils/searchFilter.component.html b/searchPages/searchUtils/searchFilter.component.html index 22575dc3..8495aebe 100644 --- a/searchPages/searchUtils/searchFilter.component.html +++ b/searchPages/searchUtils/searchFilter.component.html @@ -1,9 +1,35 @@
    -
    +
    {{_formatTitle(filter.title, filter.values.length)}}
    Clear
    -
    + +
    +
    {{_formatTitle(filter.title, filter.values.length)}}
    + Clear +
    +     + +
    + + + +
    {{value.name}}
    +     + + + + + + + + +     +     +
    + +
    @@ -49,6 +75,67 @@
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/searchPages/searchUtils/searchFilter.component.ts b/searchPages/searchUtils/searchFilter.component.ts index 9f33aa92..e9b005bd 100644 --- a/searchPages/searchUtils/searchFilter.component.ts +++ b/searchPages/searchUtils/searchFilter.component.ts @@ -46,6 +46,7 @@ export class SearchFilterComponent implements OnInit, OnChanges { // @Input() isViewAllOpen: boolean = false; sortedValues; hasMatch: boolean = false; + @Input() grouped: boolean = false; constructor(private _router: Router, private route: ActivatedRoute, @@ -88,7 +89,7 @@ export class SearchFilterComponent implements OnInit, OnChanges { // this.filter.values = this.filter.values.filter(value => !value.name.toLowerCase().includes('unknown') && !value.name.toLowerCase().includes('not available')); this.filter.values = this.filter.values.filter(value => value && value.name != "unidentified" && value.name != "Undetermined" && !value.name.toLowerCase().includes('unknown') && !value.name.toLowerCase().includes('not available')); - if (this.filter.filterType == "radio") { + if (this.filter.filterType == "radio" || this.filter.filterType == "triplet") { this.filter.radioValue = ""; this.filter.values.forEach(value => { if (value.selected) { @@ -162,6 +163,20 @@ export class SearchFilterComponent implements OnInit, OnChanges { value: this.filter }); } + + tripletFilterChange() { + if(this.filter.radioValue == "") { + this.clearFilter(); + } else { + this.filter.countSelectedValues = 1; + this.filter.values.forEach(value => { + value.selected = (value.id == this.filter.radioValue); + }); + this.onFilterChange.emit({ + value: this.filter + }); + } + } clearFilter() { for (var i = 0; i < this.filter.values.length; i++) { diff --git a/searchPages/searchUtils/searchFilter.module.ts b/searchPages/searchUtils/searchFilter.module.ts index 5f014308..940d93e8 100644 --- a/searchPages/searchUtils/searchFilter.module.ts +++ b/searchPages/searchUtils/searchFilter.module.ts @@ -9,11 +9,12 @@ import {RouterModule} from "@angular/router"; import {InputModule} from '../../sharedComponents/input/input.module'; import {IconsModule} from "../../utils/icons/icons.module"; import {LoadingModule} from "../../utils/loading/loading.module"; +import {MatButtonToggleModule} from "@angular/material/button-toggle"; @NgModule({ imports: [ CommonModule, FormsModule, ModalModule, RouterModule, - InputModule, IconsModule, LoadingModule + InputModule, IconsModule, LoadingModule, MatButtonToggleModule ], declarations: [ SearchFilterComponent, SearchFilterModalComponent