MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[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
This commit is contained in:
argiro.kokogiannaki 2020-03-05 13:21:01 +00:00
parent 204ac6eed6
commit 42cc5c66ee
7 changed files with 30 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
searchPages/find/searchAll.component.html
View File

@ -34,7 +34,7 @@
[logoURL]="properties.baseLink+logoURL" type="search" [name]=name></schema2jsonld> [logoURL]="properties.baseLink+logoURL" type="search" [name]=name></schema2jsonld>
<div class="uk-container-large uk-container"> <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')" <li *ngIf="showPublications || showDatasets || showOrps || showSoftware" (click)="entityChanged('result')"
[class]="activeEntity == 'result'?'uk-active':''"> [class]="activeEntity == 'result'?'uk-active':''">
<a> <a>

21
searchPages/searchUtils/advancedSearchForm.component.html
View File

@ -27,10 +27,10 @@
<td class="uk-text-muted uk-text-uppercase">Term</td> <td class="uk-text-muted uk-text-uppercase">Term</td>
</tr> </tr>
<tr *ngFor="let selectedField of selectedFields; let i = index" class="-row "> <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)" --> (ngModelChange)="fieldIdsChanged(i,selectedField.id)"><!--(click)="fieldIdsChanged(i)" -->
<option *ngFor="let id of fieldIds" [value]="id">{{fieldIdsMap[id].name}} </option> <mat-option *ngFor="let id of fieldIds" [value]="id">{{fieldIdsMap[id].name}} </mat-option>
</select></td> </mat-select></td>
<td *ngIf="selectedField.type == 'keyword'"> <td *ngIf="selectedField.type == 'keyword'">
<div class="uk-inline uk-width-expand"> <div class="uk-inline uk-width-expand">
<a *ngIf="selectedField.value.length > 0" class="uk-form-icon uk-form-icon-flip" <a *ngIf="selectedField.value.length > 0" class="uk-form-icon uk-form-icon-flip"
@ -44,7 +44,7 @@
</td> </td>
<td *ngIf="selectedField.type == 'date'"> <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> [validDateTo]=validDateTo></date-filter>
</td> </td>
<td *ngIf=" selectedField.id && selectedField.type == 'vocabulary'"> <td *ngIf=" selectedField.id && selectedField.type == 'vocabulary'">
@ -85,12 +85,12 @@
value="false">No<br> value="false">No<br>
</span> </span>
</td> </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" [(ngModel)]="selectedFields[i+1].operatorId"
name="selectOp_{{i}}"> name="selectOp_{{i}}" [disableOptionCentering]="true" class="matSelection uk-input" panelClass="matSelectionPanel">
<option *ngFor="let op of operators" (change)="fieldOperatorChanged(i+1, op.id, op.id)" <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}}</option> (click)="fieldOperatorChanged(i+1, op.id, op.id)" [value]="op.id">{{op.id}}</mat-option>
</select> </mat-select>
<div *ngIf="i == selectedFields.length-1 " class=" uk-text-right" style="margin-top: 55px;"> <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> <span class="uk-text-muted uk-text-uppercase uk-margin-small-right " > Add rule</span>
</div> </div>
@ -134,7 +134,8 @@
<div [class]="(entitiesSelection)?'':'uk-width-medium@m uk-width-small@s'"> <div [class]="(entitiesSelection)?'':'uk-width-medium@m uk-width-small@s'">
<entities-selection *ngIf="entitiesSelection" [simpleView]="true" [currentEntity]="entityType" <entities-selection *ngIf="entitiesSelection" [simpleView]="true" [currentEntity]="entityType"
[properties]="properties" [properties]="properties"
(selectionChange)=" simpleEntityChanged($event)"></entities-selection> (selectionChange)=" simpleEntityChanged($event)"
[onChangeNavigate]="true"></entities-selection>
</div> </div>
<div [class]="((resultTypes || quickFilter)?'quickSelectionsBox':'')+' uk-padding-remove-left'"> <div [class]="((resultTypes || quickFilter)?'quickSelectionsBox':'')+' uk-padding-remove-left'">
<div class="uk-inline"> <div class="uk-inline">

3
searchPages/searchUtils/advancedSearchForm.module.ts
View File

@ -10,11 +10,12 @@ import {DateFilterModule} from './dateFilter.module';
import {SearchFormModule} from './searchForm.module'; import {SearchFormModule} from './searchForm.module';
import {QuickSelectionsModule} from "./quick-selections.module"; import {QuickSelectionsModule} from "./quick-selections.module";
import {EntitiesSelectionModule} from "./entitiesSelection.module"; import {EntitiesSelectionModule} from "./entitiesSelection.module";
import {MatSelectModule} from "@angular/material";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, FormsModule, RouterModule, EntitiesAutocompleteModule, StaticAutocompleteModule, DateFilterModule, SearchFormModule, QuickSelectionsModule, EntitiesSelectionModule CommonModule, FormsModule, RouterModule, EntitiesAutocompleteModule, StaticAutocompleteModule, DateFilterModule, SearchFormModule, QuickSelectionsModule, EntitiesSelectionModule, MatSelectModule
], ],
declarations: [ declarations: [
AdvancedSearchFormComponent, AdvancedSearchFormComponent,

15
searchPages/searchUtils/dateFilter.component.ts
View File

@ -11,17 +11,17 @@ import {MatDatepickerInputEvent} from "@angular/material";
@Component({ @Component({
selector: 'date-filter', selector: 'date-filter',
template: ` template: `
<div class="uk-input uk-width-medium">
<select *ngIf="dateValue && dateValue.type!='range' " name="{{'select_date_type'+filterId}}" [(ngModel)]=dateValue.type > <mat-select *ngIf="dateValue && dateValue.type!='range' " name="{{'select_date_type'+filterId}}" class=" matSelection uk-input" [(ngModel)]=dateValue.type [disableOptionCentering]="true" panelClass="matSelectionPanel">
<option *ngFor="let type of dateValue.types let i = index" [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</option> <mat-option *ngFor="let type of dateValue.types let i = index" [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</mat-option>
</select> </mat-select>
<div *ngIf="dateValue && dateValue.type=='range' "> <div *ngIf="dateValue && dateValue.type=='range' ">
<table class=" uk-table uk-table-responsive" > <table class=" uk-table uk-table-responsive" >
<tr> <tr>
<td class="uk-padding-remove"> <td class="uk-padding-remove">
<select name="{{'select_date_type'+filterId}}" [(ngModel)]=dateValue.type > <mat-select name="{{'select_date_type'+filterId}}" [(ngModel)]=dateValue.type [disableOptionCentering]="true" class="matSelection uk-input" panelClass="matSelectionPanel">
<option *ngFor="let type of dateValue.types let i = index" [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</option> <mat-option *ngFor="let type of dateValue.types let i = index" [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</mat-option>
</select> </mat-select>
</td> </td>
<!-- <td>--> <!-- <td>-->
<!-- From--> <!-- From-->
@ -48,6 +48,7 @@ import {MatDatepickerInputEvent} from "@angular/material";
</tr> </tr>
</table> </table>
</div> </div>
</div>
<!-- <div *ngIf="dateValue.type=='range' " class="-row dateFilter" >--> <!-- <div *ngIf="dateValue.type=='range' " class="-row dateFilter" >-->
<!-- <table class=" uk-table uk-table-responsive" >--> <!-- <table class=" uk-table uk-table-responsive" >-->

4
searchPages/searchUtils/dateFilter.module.ts
View File

@ -3,14 +3,14 @@ import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MyDatePickerModule } from '../../utils/my-date-picker/my-date-picker.module'; import { MyDatePickerModule } from '../../utils/my-date-picker/my-date-picker.module';
import {DateFilterComponent} from './dateFilter.component'; import {DateFilterComponent} from './dateFilter.component';
import {MatNativeDateModule} from '@angular/material'; import {MatNativeDateModule, MatSelectModule} from '@angular/material';
import {MatDatepickerModule} from '@angular/material/datepicker'; import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatFormFieldModule} from '@angular/material'; import {MatFormFieldModule} from '@angular/material';
import {MatInputModule} from '@angular/material'; import {MatInputModule} from '@angular/material';
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, FormsModule, ReactiveFormsModule, MyDatePickerModule, CommonModule, FormsModule, ReactiveFormsModule, MyDatePickerModule,
MatNativeDateModule, MatDatepickerModule, MatFormFieldModule, MatInputModule MatNativeDateModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatSelectModule
], ],
declarations: [ declarations: [
DateFilterComponent DateFilterComponent

24
searchPages/searchUtils/entitiesSelection.component.ts
View File

@ -9,25 +9,9 @@ import {Router} from "@angular/router";
@Component({ @Component({
selector: 'entities-selection', selector: 'entities-selection',
template: ` template: `
<!-- <select *ngIf="show" [(ngModel)]="selectedEntity" class="uk-select uk-width-auto portal-box uk-text-small" (ngModelChange)="entityChanged()" > <span class="entitiesSelection portal-box uk-text-small " style="" >
<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="" >
<mat-select *ngIf="show && selectedEntity" [(value)]="selectedEntity" <mat-select *ngIf="show && selectedEntity" [(value)]="selectedEntity"
(valueChange)="entityChanged()" [disableOptionCentering]="true" panelClass="entitiesSelectionPanel"> (valueChange)="entityChanged()" [disableOptionCentering]="true" panelClass="matSelectionPanel">
<mat-option <mat-option
*ngIf="simpleView && (showResearchOutcomes + showDataProviders + showOrganizations + showProjects )>1 " *ngIf="simpleView && (showResearchOutcomes + showDataProviders + showOrganizations + showProjects )>1 "
value="all">All content value="all">All content
@ -108,8 +92,8 @@ export class EntitiesSelectionComponent {
entityChanged() { entityChanged() {
if (!this.simpleView) { if (!this.simpleView || this.onChangeNavigate) {
this.router.navigate([this.getUrl(false)]); this.router.navigate([this.getUrl(this.simpleView)]);
} else { } else {
this.selectionChange.emit({ this.selectionChange.emit({
entity: this.selectedEntity, entity: this.selectedEntity,

4
searchPages/searchUtils/searchHelperClasses.class.ts
View File

@ -41,8 +41,8 @@ export class AdvancedField{
} }
} }
export class DateValue{ export class DateValue{
public types = ["any","range","1mon","2mon","3mon","6mon","12mon","2year","5year","10year"]; public types = ["1mon","2mon","3mon","6mon","12mon","2year","5year","10year","range"];
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 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 type: string ;
public from:Date = new Date(); public from:Date = new Date();
public to:Date = new Date(); public to:Date = new Date();