Input: enable tooltip in select type. Search Sorting: Change options for stakeholders

searchPages/searchUtils/advancedSearchForm.component.html

@@ -25,7 +25,7 @@
         <tr *ngFor="let selectedField of selectedFields; let i = index">
           <td>
             <div class="uk-grid uk-flex-middle uk-child-width-1-2@m uk-child-width-1-1">
-              <div input [(value)]="selectedField.id" inputClass="border-bottom" [tooltip]="true"
+              <div input [(value)]="selectedField.id" inputClass="border-bottom"
                    [options]="fieldIdsOptions" (valueChange)="fieldIdsChanged(i,selectedField.id)" type="select"></div>
               <div input *ngIf="selectedField.id != 'q'" [(value)]="selectedField.includes" inputClass="border-bottom" [options]="getNotOperators(selectedField)" type="select"></div>
               <div *ngIf="selectedField.id == 'q'">includes</div>

searchPages/searchUtils/searchSorting.component.ts

@@ -1,45 +1,55 @@
 import {Component, Input, Output, EventEmitter} from '@angular/core';
+import {Option} from "../../sharedComponents/input/input.component";
 
 @Component({
-    selector: 'search-sorting',
+  selector: 'search-sorting',
-    template: `
+  template: `
-      <div class="uk-width-small">
+    <div *ngIf="options" class="uk-width-small">
-				<div input *ngIf="(entityType != 'community' && entityType != 'stakeholder' )"
+      <div input
-					type="select" placeholder="Sort by" inputClass="flat x-small"
+           type="select" placeholder="Sort by" inputClass="flat x-small"
-					[options]="optionsA" [(value)]="sortBy" [disabled]="isDisabled"
+           [options]="options" [(value)]="sortBy" [disabled]="isDisabled"
-					(valueChange)="sortByChanged()"></div>
+           (valueChange)="sortByChanged()"></div>
-
+    </div>
-				<div input *ngIf="(entityType == 'community' || entityType == 'stakeholder')"
+  `
-					type="select" placeholder="Sort by" inputClass="flat x-small"
-					[options]="optionsB" [(value)]="sortBy" [disabled]="isDisabled"
-					(valueChange)="sortByChanged()"></div>
-      </div>
-    `
 })
 
 export class SearchSortingComponent {
-    @Input() isDisabled: boolean = false;
+  @Input() isDisabled: boolean = false;
-    @Input() sortBy: string = '';
+  @Input() sortBy: string = '';
-    @Input() entityType: string = '';
+  @Input() entityType: string = '';
-    @Output() sortByChange  = new EventEmitter();
+  @Output() sortByChange = new EventEmitter();
-		public optionsA = [
+  public options: Option[];
-			{value: '', label: 'Relevance'},
+  private generalOptions = [
-			{value: 'resultdateofacceptance,descending', label: 'Date (most recent)'},
+    {value: '', label: 'Relevance'},
-			{value: 'resultdateofacceptance,ascending', label: 'Date (least recent)'},
+    {value: 'resultdateofacceptance,descending', label: 'Date (most recent)'},
-		];
+    {value: 'resultdateofacceptance,ascending', label: 'Date (least recent)'},
-		public optionsB = [
+  ];
-			{value: '', label: 'Title'},
+  private communityOptions = [
-			{value: 'creationdate,descending', label: 'Creation Date (most recent)'},
+    {value: '', label: 'Title'},
-			{value: 'creationdate,ascending', label: 'Creation Date (least recent)'},
+    {value: 'creationdate,descending', label: 'Creation Date (most recent)'},
-		];
+    {value: 'creationdate,ascending', label: 'Creation Date (least recent)'},
-
+  ];
-
+  private stakeholderOptions = [
-    constructor () {}
+    {value: '', label: 'Name'},
-
+    {value: 'creationdate,descending', label: 'Creation Date (most recent)'},
-    ngOnInit() {}
+    {value: 'creationdate,ascending', label: 'Creation Date (least recent)'},
-
+  ];
-
+  
-    sortByChanged() {
+  constructor() {
-      this.sortByChange.emit(this.sortBy);
+  }
+  
+  ngOnInit() {
+    if (this.entityType === 'community') {
+      this.options = this.communityOptions;
+    } else if (this.entityType === 'stakeholder') {
+      this.options = this.stakeholderOptions;
+    } else {
+      this.options = this.generalOptions;
     }
+  }
+  
+  
+  sortByChanged() {
+    this.sortByChange.emit(this.sortBy);
+  }
 }

sharedComponents/input/input.component.ts

@@ -57,7 +57,7 @@ declare var UIkit;
             <label>{{placeholderInfo.label}} <sup *ngIf="required">*</sup></label>
           </div>
           <div class="uk-flex" [class.uk-flex-middle]="type !== 'textarea'"
-               [attr.uk-tooltip]="(tooltip && !focused && type !== 'chips')?('title: ' + getLabel(formControl.value) + '; delay: 500'):null">
+               [attr.uk-tooltip]="(tooltip && !focused && type !== 'chips' && type !== 'textarea')?('title: ' + getLabel(formControl.value) + '; delay: 500; pos: bottom-left'):null">
             <ng-template [ngIf]="type === 'text' || type === 'URL' || type === 'logoURL'">
               <input #input class="input" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
                      [formControl]="formAsControl" [class.uk-text-truncate]="!focused">
@@ -194,13 +194,13 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
   @Input() value: any | any[];
   @Output() valueChange = new EventEmitter<any | any[]>();
   @Input() hint: string;
+  @Input() tooltip: boolean = false;
   /** Text */
   @ViewChild('input') input: ElementRef;
   /** Textarea options */
   @ViewChild('textArea') textArea: ElementRef;
   @Input('rows') rows: number = 3;
   /** Select | Autocomplete | chips available options */
-  @Input() tooltip: boolean = false;
   @Input() selectArrow: string = 'arrow_drop_down';
   @Input() selectedIndex: number = 0;
   @Input() selectable: boolean = false;
@@ -263,6 +263,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
         this.icon = this.selectArrow;
       }
       this.selectable = true;
+      this.tooltip = true;
     }
   }