[Library | Trunk]

Search Filter - radio input:
	make it work for radio and make unique selection
	add field radioValue
	initiate it (in parse refine results) and clear it properly (from new search page)
	


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59117 d315682c-612b-4755-9ff5-7f18f6832af3

searchPages/searchUtils/newSearchPage.component.html

@@ -2,7 +2,7 @@
   <div class="uk-grid uk-grid-small uk-text-small" uk-grid>
     <ng-container *ngIf="customFilterEnabled && customFilter && refineFields.indexOf(customFilter.queryFieldName) ==
     -1 ">
-     <span>
+     <span class="uk-grid-margin">
         <span class="selectedFilterLabel uk-disabled ">
             <span class="">{{customFilter.valueName}}</span>
         </span>
@@ -11,7 +11,7 @@
     <ng-container *ngIf="selectedTypesNum > 0 && resultTypes">
       <ng-container *ngFor="let type of resultTypeOptions; let i = index;  let end = last; ">
         <ng-container *ngIf="resultTypes[type.id] == true">
-         <span [title]="'Remove '+ type.name" (click)="removeResultType(type.id) ">
+         <span class="uk-grid-margin" [title]="'Remove '+ type.name" (click)="removeResultType(type.id) ">
             <span class="selectedFilterLabel ">
               <a [class]="((disableForms)?'  uk-disabled':'  ')+' uk-link-text '">
                 <span class=" clickable" aria-hidden="true">
@@ -31,7 +31,7 @@
     <ng-container *ngIf="selectedRangeFilters > 0">
       <ng-container *ngFor="let filter of rangeFilters ">
         <ng-container *ngIf="filter.selectedFromAndToValues">
-                        <span [title]="'Remove '+ filter.selectedFromAndToValues" (click)="removeRangeFilter(filter) ">
+                        <span [title]="'Remove '+ filter.selectedFromAndToValues" (click)="removeRangeFilter(filter) "  class="uk-grid-margin" >
                           <span class="selectedFilterLabel ">
                             <a [class]="((disableForms)?'  uk-disabled':'  ')+' uk-link-text '">
                               <span class=" clickable" aria-hidden="true">
@@ -54,7 +54,7 @@
     <ng-container *ngFor="let filter of filters ">
       <ng-container *ngIf="filter.countSelectedValues > 0">
         <span *ngFor="let value of getSelectedValues(filter); let i = index;  let end = last; "
-              [title]="'Remove '+value.name" (click)="removeFilter(value, filter) ">
+              [title]="'Remove '+value.name" (click)="removeFilter(value, filter) "  class="uk-grid-margin" >
                         <!-- if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span -->
                         <span class="selectedFilterLabel ">
                           <a [class]="((disableForms)?'  uk-disabled':'  ')+' uk-link-text '">

searchPages/searchUtils/newSearchPage.component.ts

@@ -206,6 +206,7 @@ export class NewSearchPageComponent {
           this.filters[i].values[j].selected = false;
         }
         this.filters[i].countSelectedValues = 0;
+        this.filters[i].radioValue = "";
       }
     }
     this.selectedFilters = 0;
@@ -217,6 +218,9 @@ export class NewSearchPageComponent {
     if (this.quickFilter) {
       this.removeValueFromQuickFilter();
     }
+    for(let type of this.resultTypeOptions){
+      this.resultTypes[type.id]=false;
+    }
     this.goTo(1);
     // this.clearKeywords();
   }
@@ -511,6 +515,9 @@ export class NewSearchPageComponent {
     if (value.selected == true) {
       value.selected = false;
     }
+    if(filter.filterType == "radio"){
+      filter.radioValue = "";
+    }
     if (this.quickFilter && this.quickFilter.filterId == filter.filterId) {
       this.removeValueFromQuickFilter();
     }

searchPages/searchUtils/searchFilter.component.html

@@ -43,7 +43,8 @@
                 <input *ngIf="filter.filterType == 'checkbox'" type="checkbox" class="uk-checkbox"
                        [(ngModel)]="value.selected" (ngModelChange)="filterChange(value.selected)" />
                 <input *ngIf="filter.filterType == 'radio'" type="radio" class="uk-radio"
-                       [name]="value.id"  [value]="true" [(ngModel)]="value.selected" (click)="uniqueFilterChange(value)"/>
+                       [name]="filter.filterId"  [value]="value.id" [(ngModel)]="filter.radioValue"
+                       (ngModelChange)="uniqueFilterChange(value)"/>
                 {{' '+_formatName(value)}}
                 <span *ngIf = "showResultCount === true" >
                   {{' ('+(value.number|number)+')'}}

searchPages/searchUtils/searchFilter.component.ts

@@ -41,6 +41,13 @@ export class SearchFilterComponent implements OnInit, OnChanges{
 
     ngOnInit() {
       this.filter.values = this.filter.values.filter(value => !value.name.toLowerCase().includes('unknown') && !value.name.toLowerCase().includes('not available'));
+      if(this.filter.filterType == "radio"){
+        this.filter.values.forEach(value => {
+          if(value.selected){
+            this.filter.radioValue = value.id
+          }
+        });
+      }
     }
     
     ngOnChanges(changes: SimpleChanges) {
@@ -96,6 +103,9 @@ export class SearchFilterComponent implements OnInit, OnChanges{
         this.filter.countSelectedValues--;
       }
 
+      this.filter.values.forEach(value => {
+          value.selected = (value.id == this.filter.radioValue);
+      });
       this.onFilterChange.emit({
         value: this.filter
       });
@@ -108,6 +118,7 @@ export class SearchFilterComponent implements OnInit, OnChanges{
       this.onFilterChange.emit({
         value: this.filter
       });
+      this.filter.radioValue = "";
     }
 
   getSelectedAndTopValues(filter, topNum: number = 6):any{

searchPages/searchUtils/searchHelperClasses.class.ts

@@ -8,6 +8,7 @@ export class Filter{
     public filterOperator: string ='or';
     public valueIsExact: boolean = true;  // for search table view, if value is contained or is equal with column entry
     public filterType: string = "checkbox";
+    public radioValue?: string = "";
 //    public uniqueValueIdSelected: string;
 }
 

services/servicesUtils/refineResults.class.ts

@@ -20,6 +20,7 @@ export class RefineResultsUtils {
              filter.originalFilterId = fields[j];
              filter.filterType = searchFields.getFieldFilterType(fields[j], entityType, usedBy);
              filter.filterOperator = searchFields.getFieldOperator(fields[j]);
+             filter.radioValue = "";
              //console.info("filter.title: "+filter.title+" filter.filterType: "+filter.filterType);
 
              let field = data[fields[j]];