From 42cc5c66ee377759b1185bd60af787e09fdf0a36 Mon Sep 17 00:00:00 2001
From: "argiro.kokogiannaki"
 <argiro.kokogiannaki@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Thu, 5 Mar 2020 13:21:01 +0000
Subject: [PATCH] [Library|Trunk]

Search:
	Search all: update tabs css
	Advanced Search Form:
		change select to mat-select
		changes for publication date field
	Entities Selection: on simple search navigate when entity changes





git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58181 d315682c-612b-4755-9ff5-7f18f6832af3
---
 searchPages/find/searchAll.component.html     |  2 +-
 .../advancedSearchForm.component.html         | 21 ++++++++--------
 .../searchUtils/advancedSearchForm.module.ts  |  3 ++-
 .../searchUtils/dateFilter.component.ts       | 15 ++++++------
 searchPages/searchUtils/dateFilter.module.ts  |  4 ++--
 .../entitiesSelection.component.ts            | 24 ++++---------------
 .../searchUtils/searchHelperClasses.class.ts  |  4 ++--
 7 files changed, 30 insertions(+), 43 deletions(-)

diff --git a/searchPages/find/searchAll.component.html b/searchPages/find/searchAll.component.html
index f602f3f7..cd7097d8 100644
--- a/searchPages/find/searchAll.component.html
+++ b/searchPages/find/searchAll.component.html
@@ -34,7 +34,7 @@
                [logoURL]="properties.baseLink+logoURL" type="search" [name]=name></schema2jsonld>
 <div class="uk-container-large uk-container">
 
-  <ul class=" uk-tab  uk-width-1-1 " uk-tab="animation: uk-animation-fade">
+  <ul class=" portalTabs uk-tab  uk-width-1-1 " uk-tab="animation: uk-animation-fade">
     <li *ngIf="showPublications || showDatasets || showOrps || showSoftware" (click)="entityChanged('result')"
         [class]="activeEntity == 'result'?'uk-active':''">
       <a>
diff --git a/searchPages/searchUtils/advancedSearchForm.component.html b/searchPages/searchUtils/advancedSearchForm.component.html
index 1c01a4e6..44218bc2 100644
--- a/searchPages/searchUtils/advancedSearchForm.component.html
+++ b/searchPages/searchUtils/advancedSearchForm.component.html
@@ -27,10 +27,10 @@
         <td class="uk-text-muted uk-text-uppercase">Term</td>
       </tr>
       <tr *ngFor="let selectedField of selectedFields; let i = index" class="-row  ">
-        <td><select [(ngModel)]="selectedField.id" name="selectField_{{i}}"
+        <td><mat-select [(ngModel)]="selectedField.id" name="selectField_{{i}}" [disableOptionCentering]="true" class="matSelection uk-input" panelClass="matSelectionPanel"
                     (ngModelChange)="fieldIdsChanged(i,selectedField.id)"><!--(click)="fieldIdsChanged(i)"  -->
-          <option *ngFor="let id of fieldIds" [value]="id">{{fieldIdsMap[id].name}} </option>
-        </select></td>
+          <mat-option *ngFor="let id of fieldIds" [value]="id">{{fieldIdsMap[id].name}} </mat-option>
+        </mat-select></td>
         <td *ngIf="selectedField.type == 'keyword'">
           <div class="uk-inline uk-width-expand">
             <a *ngIf="selectedField.value.length > 0" class="uk-form-icon uk-form-icon-flip"
@@ -44,7 +44,7 @@
 
         </td>
         <td *ngIf="selectedField.type == 'date'">
-          <date-filter [dateValue]=selectedField.dateValue [validDateFrom]=validDateFrom
+          <date-filter [dateValue]=selectedField.dateValue [validDateFrom]=validDateFrom class="uk-width-expand"
                        [validDateTo]=validDateTo></date-filter>
         </td>
         <td *ngIf=" selectedField.id && selectedField.type == 'vocabulary'">
@@ -85,12 +85,12 @@
                            value="false">No<br>
                   </span>
         </td>
-        <td  style="min-width: 75px;"><select *ngIf="i+1 <selectedFields.length"
+        <td  style="min-width: 75px;"><mat-select *ngIf="i+1 <selectedFields.length"
                                         [(ngModel)]="selectedFields[i+1].operatorId"
-                              name="selectOp_{{i}}">
-          <option *ngFor="let op of operators" (change)="fieldOperatorChanged(i+1, op.id, op.id)"
-                  (click)="fieldOperatorChanged(i+1, op.id, op.id)" [value]="op.id">{{op.id}}</option>
-        </select>
+                              name="selectOp_{{i}}" [disableOptionCentering]="true" class="matSelection uk-input" panelClass="matSelectionPanel">
+          <mat-option *ngFor="let op of operators" (change)="fieldOperatorChanged(i+1, op.id, op.id)"
+                  (click)="fieldOperatorChanged(i+1, op.id, op.id)" [value]="op.id">{{op.id}}</mat-option>
+        </mat-select>
           <div *ngIf="i == selectedFields.length-1 " class=" uk-text-right" style="margin-top: 55px;">
             <span class="uk-text-muted uk-text-uppercase uk-margin-small-right " > Add rule</span>
           </div>
@@ -134,7 +134,8 @@
       <div [class]="(entitiesSelection)?'':'uk-width-medium@m uk-width-small@s'">
         <entities-selection *ngIf="entitiesSelection" [simpleView]="true" [currentEntity]="entityType"
                             [properties]="properties"
-                            (selectionChange)=" simpleEntityChanged($event)"></entities-selection>
+                            (selectionChange)=" simpleEntityChanged($event)"
+                            [onChangeNavigate]="true"></entities-selection>
       </div>
       <div [class]="((resultTypes || quickFilter)?'quickSelectionsBox':'')+' uk-padding-remove-left'">
         <div class="uk-inline">
diff --git a/searchPages/searchUtils/advancedSearchForm.module.ts b/searchPages/searchUtils/advancedSearchForm.module.ts
index e8e3b25b..87ec3891 100644
--- a/searchPages/searchUtils/advancedSearchForm.module.ts
+++ b/searchPages/searchUtils/advancedSearchForm.module.ts
@@ -10,11 +10,12 @@ import {DateFilterModule} from './dateFilter.module';
 import {SearchFormModule} from './searchForm.module';
 import {QuickSelectionsModule} from "./quick-selections.module";
 import {EntitiesSelectionModule} from "./entitiesSelection.module";
+import {MatSelectModule} from "@angular/material";
 
 
 @NgModule({
   imports: [
-    CommonModule, FormsModule, RouterModule, EntitiesAutocompleteModule, StaticAutocompleteModule, DateFilterModule, SearchFormModule, QuickSelectionsModule, EntitiesSelectionModule
+    CommonModule, FormsModule, RouterModule, EntitiesAutocompleteModule, StaticAutocompleteModule, DateFilterModule, SearchFormModule, QuickSelectionsModule, EntitiesSelectionModule, MatSelectModule
   ],
   declarations: [
     AdvancedSearchFormComponent,
diff --git a/searchPages/searchUtils/dateFilter.component.ts b/searchPages/searchUtils/dateFilter.component.ts
index 66528d91..21215bbb 100644
--- a/searchPages/searchUtils/dateFilter.component.ts
+++ b/searchPages/searchUtils/dateFilter.component.ts
@@ -11,17 +11,17 @@ import {MatDatepickerInputEvent} from "@angular/material";
 @Component({
     selector: 'date-filter',
     template: `
-
-    <select *ngIf="dateValue && dateValue.type!='range' "  name="{{'select_date_type'+filterId}}"    [(ngModel)]=dateValue.type >
-      <option *ngFor="let type of dateValue.types let i = index"  [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</option>
-    </select>
+<div  class="uk-input uk-width-medium">
+    <mat-select *ngIf="dateValue && dateValue.type!='range' "  name="{{'select_date_type'+filterId}}"   class=" matSelection uk-input"    [(ngModel)]=dateValue.type  [disableOptionCentering]="true" panelClass="matSelectionPanel">
+      <mat-option *ngFor="let type of dateValue.types let i = index"  [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</mat-option>
+    </mat-select>
     <div *ngIf="dateValue && dateValue.type=='range' ">
       <table class=" uk-table uk-table-responsive" >
         <tr>
           <td class="uk-padding-remove">
-            <select name="{{'select_date_type'+filterId}}"    [(ngModel)]=dateValue.type >
-              <option *ngFor="let type of dateValue.types let i = index"  [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</option>
-            </select>
+            <mat-select name="{{'select_date_type'+filterId}}"    [(ngModel)]=dateValue.type [disableOptionCentering]="true" class="matSelection uk-input" panelClass="matSelectionPanel">
+              <mat-option *ngFor="let type of dateValue.types let i = index"  [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</mat-option>
+            </mat-select>
           </td>
 <!--          <td>-->
 <!--            From-->
@@ -48,6 +48,7 @@ import {MatDatepickerInputEvent} from "@angular/material";
         </tr>
       </table>
     </div>
+</div>
 <!--    <div *ngIf="dateValue.type=='range' " class="-row dateFilter" >-->
 
 <!--      <table class=" uk-table uk-table-responsive" >-->
diff --git a/searchPages/searchUtils/dateFilter.module.ts b/searchPages/searchUtils/dateFilter.module.ts
index 86c1c25b..f1c4fd19 100644
--- a/searchPages/searchUtils/dateFilter.module.ts
+++ b/searchPages/searchUtils/dateFilter.module.ts
@@ -3,14 +3,14 @@ import { CommonModule }        from '@angular/common';
 import { FormsModule, ReactiveFormsModule }         from '@angular/forms';
 import { MyDatePickerModule } from '../../utils/my-date-picker/my-date-picker.module';
 import {DateFilterComponent} from './dateFilter.component';
-import {MatNativeDateModule} from '@angular/material';
+import {MatNativeDateModule, MatSelectModule} from '@angular/material';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MatFormFieldModule} from '@angular/material';
 import {MatInputModule} from '@angular/material';
 @NgModule({
   imports: [
     CommonModule, FormsModule, ReactiveFormsModule, MyDatePickerModule,
-    MatNativeDateModule, MatDatepickerModule, MatFormFieldModule, MatInputModule
+    MatNativeDateModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatSelectModule
   ],
   declarations: [
     DateFilterComponent
diff --git a/searchPages/searchUtils/entitiesSelection.component.ts b/searchPages/searchUtils/entitiesSelection.component.ts
index 302a3cd2..c3ab479a 100644
--- a/searchPages/searchUtils/entitiesSelection.component.ts
+++ b/searchPages/searchUtils/entitiesSelection.component.ts
@@ -9,25 +9,9 @@ import {Router} from "@angular/router";
 @Component({
   selector: 'entities-selection',
   template: `
-    <!--  <select *ngIf="show" [(ngModel)]="selectedEntity" class="uk-select uk-width-auto  portal-box uk-text-small" (ngModelChange)="entityChanged()" >
-        <option *ngIf="simpleView && (showResearchOutcomes + showDataProviders + showOrganizations + showProjects )>1 " value="all">All content</option>
-        <option *ngIf="showResearchOutcomes" value="result">Research outcomes</option>
-        <option *ngIf="showProjects" value="project">Projects</option>
-        <option *ngIf="showDataProviders" value="dataprovider">Content providers</option>
-        <option *ngIf="showOrganizations" value="organization">Organizations</option>
-      </select>-->
-
-    <!--<button *ngIf="!show && currentEntity"  class="uk-select uk-width-auto  portal-box uk-text-small">
-      <span *ngIf="currentEntity=='all'">All content</span>
-      <span *ngIf="currentEntity=='result'">Research outcomes</span>
-      <span *ngIf="currentEntity=='project'">Projects</span>
-      <span *ngIf="currentEntity=='dataprovider'">Content providers</span>
-      <span *ngIf="currentEntity=='organization'">Organizations</span>
-    </button>-->
-<!---->
-    <span  class="entitiesSelection portal-box uk-text-small " style="" >
+     <span  class="entitiesSelection portal-box uk-text-small " style="" >
       <mat-select *ngIf="show && selectedEntity" [(value)]="selectedEntity"
-                 (valueChange)="entityChanged()" [disableOptionCentering]="true" panelClass="entitiesSelectionPanel">
+                 (valueChange)="entityChanged()" [disableOptionCentering]="true" panelClass="matSelectionPanel">
         <mat-option
           *ngIf="simpleView && (showResearchOutcomes + showDataProviders + showOrganizations + showProjects )>1 "
           value="all">All content
@@ -108,8 +92,8 @@ export class EntitiesSelectionComponent {
 
   entityChanged() {
 
-    if (!this.simpleView) {
-      this.router.navigate([this.getUrl(false)]);
+    if (!this.simpleView || this.onChangeNavigate) {
+      this.router.navigate([this.getUrl(this.simpleView)]);
     } else {
       this.selectionChange.emit({
         entity: this.selectedEntity,
diff --git a/searchPages/searchUtils/searchHelperClasses.class.ts b/searchPages/searchUtils/searchHelperClasses.class.ts
index c53b643a..e8927af7 100644
--- a/searchPages/searchUtils/searchHelperClasses.class.ts
+++ b/searchPages/searchUtils/searchHelperClasses.class.ts
@@ -41,8 +41,8 @@ export class AdvancedField{
     }
 }
 export class DateValue{
-    public types = ["any","range","1mon","2mon","3mon","6mon","12mon","2year","5year","10year"];
-    public typesTitle = ["any","in the specified date range","in the last month","in the last 2 months","in the last 3 months","in the last 6 months","in the last year","in the last 2 years","in the last 5 years","in the last 10 years"];
+    public types = ["1mon","2mon","3mon","6mon","12mon","2year","5year","10year","range"];
+    public typesTitle = ["Last month","Last 2 months","Last 3 months","Last 6 months","Last year","Last 2 years","Last 5 years","Last 10 years", "Specify date range..."];
     public type: string ;
     public from:Date = new Date();
     public to:Date = new Date();