[Trunk | Library]:

1. newSearchPage.component.ts: In year range filter show "from {year}" or "until {year}" if only one of the is selected.
2. searchFilter.component: (search redesign) 
	a. Do not show "+" after the values number if >=99
	b. In view more results are sorted by name
	c. Show always 6 more popular and all selected (all sorted by number).


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

searchPages/searchUtils/newSearchPage.component.ts

@@ -360,15 +360,18 @@ export class NewSearchPageComponent {
               //console.log("checkSelectedRangeFilters: yearFrom: " + yearFrom + " - yearTo: "+yearTo);
               if(yearFrom) {
                 filter.selectedFromValue = yearFrom;
-                filter.selectedFromAndToValues = yearFrom;
-              }
-              if(yearFrom && yearTo) {
-                filter.selectedFromAndToValues += "-";
               }
               if(yearTo) {
                 filter.selectedToValue = yearTo;
-                filter.selectedFromAndToValues += yearTo;
               }
+              if(yearFrom && yearTo) {
+                filter.selectedFromAndToValues = yearFrom + "-" + yearTo;
+              } else if(yearFrom) {
+                filter.selectedFromAndToValues = "from " + yearFrom;
+              } else if(yearTo) {
+                filter.selectedFromAndToValues = "until " + yearTo;
+              }
+
               if(!yearFrom && !yearTo) {
                 validDates = false;
               }

searchPages/searchUtils/searchFilter.component.html

@@ -7,38 +7,56 @@
   </div>
     <div  aria-expanded="false">
       <div>
-        <ng-container  *ngIf="!isOpen">
+        <ng-container>
-          <div *ngFor = "let value of getSelectedValues(filter,'num')"  class="uk-animation-fade filterItem searchFilterItem uk-text-small">
+<!--          <div *ngFor = "let value of getSelectedValues(filter,'num')"  class="uk-animation-fade filterItem searchFilterItem uk-text-small">-->
+<!--                <div title = "{{value.name}}">-->
+<!--                  <ng-container *ngIf="filter.filterType == 'checkbox' || filter.filterType == 'radio'">-->
+<!--                    <input *ngIf="filter.filterType == 'checkbox'" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />-->
+<!--                    <input *ngIf="filter.filterType == 'radio'" type="radio" (click)="uniqueFilterChange(value)"-->
+<!--                           [name]=filter.filterId checked/>-->
+<!--                    {{' '+_formatName(value)}}-->
+<!--                    <span *ngIf = "showResultCount === true" >-->
+<!--                      {{' ('+(value.number|number)+')'}}</span>-->
+<!--                  </ng-container>-->
+<!--                </div>-->
+<!--          </div>-->
+
+<!--          <div *ngFor = "let value of getNotSelectedValues(filter,'num').slice(0,(!addShowMore?getNotSelectedValues(filter,'num').length:filterValuesNum-getSelectedValues(filter,'num').length))" class = "uk-animation-fade filterItem searchFilterItem uk-text-small">-->
+<!--                <div title = "{{value.name}}" [class]="(isDisabled || (showResultCount && value.number === 0))?'uk-text-muted':''" >-->
+<!--                  <input *ngIf="filter.filterType == 'checkbox'" [disabled]="isDisabled || (showResultCount && value.number === 0)" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />-->
+<!--                  <input *ngIf="filter.filterType == 'radio'" [disabled]="isDisabled || (showResultCount && value.number === 0)" type="radio" (click)="uniqueFilterChange(value)"-->
+<!--                         [name]=filter.filterId value=false  />-->
+<!--                  {{' '+ _formatName(value) }}-->
+<!--                  <span *ngIf = "showResultCount === true" [class]="(isDisabled || value.number === 0)?'uk-text-muted':''" >-->
+<!--                   {{' ('+(value.number|number)+')'}}-->
+<!--                  </span>-->
+<!--                </div>-->
+<!--          </div>-->
+
+          <div *ngFor="let value of getSelectedAndTopValues(filter, 6)"
+               class="uk-animation-fade filterItem searchFilterItem uk-text-small">
             <div title = "{{value.name}}">
               <ng-container *ngIf="filter.filterType == 'checkbox' || filter.filterType == 'radio'">
-                    <input *ngIf="filter.filterType == 'checkbox'" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
+                <input *ngIf="filter.filterType == 'checkbox'" type="checkbox"
-                    <input *ngIf="filter.filterType == 'radio'" type="radio" (click)="uniqueFilterChange(value)"
+                       [disabled]="isDisabled || (showResultCount && value.number === 0)"
-                           [name]=filter.filterId checked/>
+                       [(ngModel)]="value.selected" (ngModelChange)="filterChange(value.selected)" />
+                <input *ngIf="filter.filterType == 'radio'" type="radio"
+                       [disabled]="isDisabled || (showResultCount && value.number === 0)"
+                       [name]=filter.filterId [checked]="value.selected" (click)="uniqueFilterChange(value)"/>
                 {{' '+_formatName(value)}}
                 <span *ngIf = "showResultCount === true" >
                       {{' ('+(value.number|number)+')'}}</span>
               </ng-container>
             </div>
           </div>
-
-          <div *ngFor = "let value of getNotSelectedValues(filter,'num').slice(0,(!addShowMore?getNotSelectedValues(filter,'num').length:filterValuesNum-getSelectedValues(filter,'num').length))" class = "uk-animation-fade filterItem searchFilterItem uk-text-small">
-                <div title = "{{value.name}}" [class]="(isDisabled || (showResultCount && value.number === 0))?'uk-text-muted':''" >
-                  <input *ngIf="filter.filterType == 'checkbox'" [disabled]="isDisabled || (showResultCount && value.number === 0)" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
-                  <input *ngIf="filter.filterType == 'radio'" [disabled]="isDisabled || (showResultCount && value.number === 0)" type="radio" (click)="uniqueFilterChange(value)"
-                         [name]=filter.filterId value=false  />
-                  {{' '+ _formatName(value) }}
-                  <span *ngIf = "showResultCount === true" [class]="(isDisabled || value.number === 0)?'uk-text-muted':''" >
-                   {{' ('+(value.number|number)+')'}}
-                  </span>
-                </div>
-          </div>
         </ng-container>
 
         <div *ngIf=" addShowMore && (filter.values.length) > filterValuesNum">
-          <a *ngIf="!isOpen"
+          <a
              [class]="((isDisabled)?'uk-disabled uk-link-muted ':' portal-link ') + ' uk-margin-small-top'"
              [attr.uk-toggle]="'target: #toggle-'+filter.filterId" (click)="toggle()">
-            + View more
+            <span *ngIf="!isOpen">+ View more</span>
+            <span *ngIf="isOpen">- View less</span>
           </a>
 
           <div hidden [id]="'toggle-'+filter.filterId" class="uk-text-small uk-margin-small-bottom">
@@ -47,7 +65,7 @@
               <input   class="uk-input uk-margin-small-bottom uk-width-1-1  " name="filter-keyword"  placeholder="Search for {{filter.title}}" type="text" [(ngModel)]="keyword">
 
               <span *ngIf = "showResultCount === true" class="uk-width-5-6@m uk-width-1-1@s uk-align-right uk-margin-small-bottom">
-                <span class="uk-width-1-4"> Sort by:</span>
+                <span class="uk-width-1-4 uk-text-muted"> Sort by:</span>
                 <select [(ngModel)]="sortBy"
                         class="uk-select uk-width-3-4@m uk-width-auto"
                         id="form-horizontal-select" name="select_order">
@@ -58,39 +76,55 @@
             </div>
 
             <div   class="uk-modal-body uk-overflow-auto uk-height-max-small uk-padding-remove
-                      uk-margin-small-left uk-margin-small-right uk-margin-small-top">
+                      uk-margin-small-left uk-margin-small-right uk-margin-small-top uk-width-1-1">
-              <ng-container *ngFor = "let value of getSelectedValues(filter, sortBy)">
+<!--              <ng-container *ngFor = "let value of getSelectedValues(filter, sortBy)">-->
-                <div *ngIf="filterKeywords(value.name)"  class = "uk-animation-fade filterItem searchFilterItem">
+<!--                <div *ngIf="filterKeywords(value.name)"  class = "uk-animation-fade filterItem searchFilterItem">-->
 
+<!--                      <div title = "{{value.name}}">-->
+<!--                        <input *ngIf="filter.filterType == 'checkbox'" [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />-->
+<!--                        <input *ngIf="filter.filterType == 'radio'" [disabled]="isDisabled" type="radio" (click)="uniqueFilterChange(value)"-->
+<!--                               [name]=filter.filterId checked/>-->
+<!--                        {{' ' + _formatName(value) + ' '}}-->
+<!--                        <span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number|number}})</span>-->
+<!--                      </div>-->
+
+<!--                </div>-->
+<!--              </ng-container>-->
+
+<!--              <ng-container *ngFor = "let value of getNotSelectedValues(filter, sortBy)">-->
+<!--                <div *ngIf="filterKeywords(value.name)"  class = "uk-animation-fade filterItem searchFilterItem">-->
+
+<!--                      <div title = "{{value.name}}">-->
+<!--                        <input *ngIf="filter.filterType == 'checkbox'" [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />-->
+<!--                        <input *ngIf="filter.filterType == 'radio'" [disabled]="isDisabled" type="radio" (click)="uniqueFilterChange(value)"-->
+<!--                               [name]=filter.filterId value=false  />-->
+<!--                        {{' ' + _formatName(value) + ' '}}-->
+<!--                        <span   *ngIf = "showResultCount === true" > ({{value.number|number}})</span>-->
+<!--                      </div>-->
+<!--                </div>-->
+<!--              </ng-container>-->
+              <ng-container *ngFor="let value of sort(filter.values)"
+                   class="uk-animation-fade filterItem searchFilterItem uk-text-small">
                 <div title = "{{value.name}}">
-                        <input *ngIf="filter.filterType == 'checkbox'" [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
+                  <ng-container *ngIf="filter.filterType == 'checkbox' || filter.filterType == 'radio'">
-                        <input *ngIf="filter.filterType == 'radio'" [disabled]="isDisabled" type="radio" (click)="uniqueFilterChange(value)"
+                    <input *ngIf="filter.filterType == 'checkbox'" type="checkbox"
-                               [name]=filter.filterId checked/>
+                           [disabled]="isDisabled || (showResultCount && value.number === 0)"
-                        {{' ' + _formatName(value) + ' '}}
+                           [(ngModel)]="value.selected" (ngModelChange)="filterChange(value.selected)" />
-                        <span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number|number}})</span>
+                    <input *ngIf="filter.filterType == 'radio'" type="radio"
-                      </div>
+                           [disabled]="isDisabled || (showResultCount && value.number === 0)"
-
+                           [name]=filter.filterId [checked]="value.selected" (click)="uniqueFilterChange(value)"/>
-                </div>
+                    {{' '+_formatName(value)}}
+                    <span *ngIf = "showResultCount === true" >
+                      {{' ('+(value.number|number)+')'}}</span>
                   </ng-container>
-
-              <ng-container *ngFor = "let value of getNotSelectedValues(filter, sortBy)">
-                <div *ngIf="filterKeywords(value.name)"  class = "uk-animation-fade filterItem searchFilterItem">
-
-                      <div title = "{{value.name}}">
-                        <input *ngIf="filter.filterType == 'checkbox'" [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
-                        <input *ngIf="filter.filterType == 'radio'" [disabled]="isDisabled" type="radio" (click)="uniqueFilterChange(value)"
-                               [name]=filter.filterId value=false  />
-                        {{' ' + _formatName(value) + ' '}}
-                        <span   *ngIf = "showResultCount === true" > ({{value.number|number}})</span>
-                      </div>
                 </div>
               </ng-container>
             </div>
           </div>
-          <a [class]="(isDisabled)?'uk-disabled uk-link-muted ':' portal-link '"
+<!--          <a [class]="(isDisabled)?'uk-disabled uk-link-muted ':' portal-link '"-->
-             [attr.uk-toggle]="'target: #toggle-'+filter.filterId" (click)="toggle()">
+<!--             [attr.uk-toggle]="'target: #toggle-'+filter.filterId" (click)="toggle()">-->
-            <span *ngIf="isOpen">- View less</span>
+<!--            <span *ngIf="isOpen">- View less</span>-->
-          </a>
+<!--          </a>-->
         </div>
    </div>
   </div>

searchPages/searchUtils/searchFilter.component.ts

@@ -22,7 +22,7 @@ export class SearchFilterComponent {
   @Output() modalChange = new EventEmitter();
   @Output() onFilterChange = new EventEmitter();
   keyword = "";
-  sortBy = "num";
+  sortBy = "name";
 
   public isOpen:boolean=false;
 
@@ -32,7 +32,7 @@ export class SearchFilterComponent {
     ngOnInit() {}
 
     public _formatTitle(title,length){
-      return (((title+" ("+length+")").length >this._maxCharacters)?(title.substring(0,(this._maxCharacters - (" ("+length+")").length - ('...').length))+"..."):title+" ("+((length >= 99)?length+"+":length)+")")
+      return (((title+" ("+length+")").length >this._maxCharacters)?(title.substring(0,(this._maxCharacters - (" ("+length+")").length - ('...').length))+"..."):title+" ("+length+")")
     }
     public _formatName(value){
       //let maxLineLength = 24;
@@ -64,9 +64,9 @@ export class SearchFilterComponent {
       }else{
           this.filter.countSelectedValues--;
       }
-        this.onFilterChange.emit({
+      // this.onFilterChange.emit({
-            value: this.filter
+      //     value: this.filter
-          });
+      // });
     }
     uniqueFilterChange(value: Value) {
       let tmp = value.selected;
@@ -78,9 +78,9 @@ export class SearchFilterComponent {
         this.filter.countSelectedValues--;
       }
 
-      this.onFilterChange.emit({
+      // this.onFilterChange.emit({
-        value: this.filter
+      //   value: this.filter
-      });
+      // });
     }
     clearFilter() {
       for (var i=0; i < this.filter.values.length; i++){
@@ -91,6 +91,28 @@ export class SearchFilterComponent {
         value: this.filter
       });
     }
+
+  getSelectedAndTopValues(filter, topNum: number = 6):any{
+    var values = [];
+
+    for (let i=0; i < topNum; i++){
+      if(filter.values.length <= i) {
+        break;
+      }
+      values.push(filter.values[i]);
+    }
+
+    if(filter.countSelectedValues >0){
+      for (let i=topNum; i < filter.values.length; i++){
+        if(filter.values[i].selected){
+          values.push(filter.values[i]);
+        }
+      }
+    }
+
+    return values;
+  }
+
     getSelectedValues(filter, sortBy:string = "num"):any{
       var selected = [];
       if(filter.countSelectedValues >0){
@@ -141,6 +163,25 @@ export class SearchFilterComponent {
       return notSselected;
     }
 
+    sort(values: Value[]) {
+      let sorted: Value[] = values.slice();
+      if(this.sortBy == "name"){
+
+        sorted.sort((n1,n2)=> {
+          if (n1.name > n2.name) {
+            return 1;
+          }
+
+          if (n1.name < n2.name) {
+            return -1;
+          }
+
+          return 0;
+        });
+      }
+      return sorted;
+    }
+
   toggle() {
     this.isOpen = !this.isOpen;
   }