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

[Trunk | Library]: searchFilter.component.html & searchResultsPerPage.component.ts & searchSorting.component.ts & citeThis.component.ts: [Bug fix] Fix <mat-select> elements. 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58258 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2020-03-13 16:11:36 +00:00
parent cea0278008
commit aec9795ebd
4 changed files with 93 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
landingPages/landing-utils/citeThis/citeThis.component.ts
View File

@ -13,7 +13,7 @@ declare var Sys:any;
<dl class="uk-description-list-line">
<!--dt class="title">Cite this {{type}}</dt-->
<dd class="line" >
<mat-select class="select matSelection" id="citations" name="citeselect" [(ngModel)]="selectedStyle" (ngModelChange)="styleChanged()"
<mat-select class="matSelection" id="citations" name="citeselect" [(ngModel)]="selectedStyle" (ngModelChange)="styleChanged()"
[disableOptionCentering]="true"
panelClass="matSelectionPanel">
<mat-option value="0">select a citation style</mat-option>

14
searchPages/searchUtils/searchFilter.component.html
View File

@ -65,12 +65,18 @@
<span *ngIf="filter.values.length >= 99">* only the Top 100 values are shown</span>
<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 *ngIf = "showResultCount === true" class="uk-flex-inline uk-flex-middle uk-width-5-6@m uk-width-1-1@s uk-align-right uk-margin-small-bottom">
<span class="uk-width-1-4 uk-text-muted"> Sort by:</span>
<select [(ngModel)]="sortBy"
class="uk-width-3-4@m uk-width-auto uk-select uk-hidden@m"
id="form-horizontal-select" name="select_order">
<option value="num">Results number</option>
<option value="name">Name</option>
</select>
<mat-select [(ngModel)]="sortBy"
class="uk-select uk-width-3-4@m uk-width-auto matSelection"
id="form-horizontal-select" name="select_order"
[disableOptionCentering]="true" panelClass="matSelectionPanel">
class="uk-width-3-4@m uk-width-auto matSelection uk-visible@m"
id="form-horizontal-select1" name="select_order"
[disableOptionCentering]="true" panelClass="matSelectionPanel">
<mat-option value="num">Results number</mat-option>
<mat-option value="name">Name</mat-option>
</mat-select>

41
searchPages/searchUtils/searchResultsPerPage.component.ts
View File

@ -2,17 +2,36 @@ import {Component, Input, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'search-results-per-page',
template: `
<span> Results per page:</span>
<mat-select class="uk-select uk-width-auto uk-text-bold matSelection" id="form-horizontal-select" name="select_results_per_page"
[(ngModel)]="size" (ngModelChange)="sizeChanged()"
[disableOptionCentering]="true"
panelClass="matSelectionPanel">
<mat-option [value]="5" > 5</mat-option>
<mat-option [value]="10">10</mat-option>
<mat-option [value]="20">20</mat-option>
<mat-option [value]="50">50</mat-option>
</mat-select>
template: `
<!-- <span class="uk-grid">-->
<!-- <div> Results per page:</div>-->
<!-- <div class="uk-width-small">-->
<!-- <mat-select class="uk-width-auto uk-text-bold matSelection" id="form-horizontal-select" name="select_results_per_page"-->
<!-- [(ngModel)]="size" (ngModelChange)="sizeChanged()"-->
<!-- [disableOptionCentering]="true"-->
<!-- panelClass="matSelectionPanel">-->
<!-- <mat-option [value]="5" > 5</mat-option>-->
<!-- <mat-option [value]="10">10</mat-option>-->
<!-- <mat-option [value]="20">20</mat-option>-->
<!-- <mat-option [value]="50">50</mat-option>-->
<!-- </mat-select>-->
<!-- </div>-->
<!-- </span>-->
<div>
<mat-form-field class="matSelectionFormField">
<mat-label>Results per page:</mat-label>
<mat-select [(ngModel)]="size" (ngModelChange)="sizeChanged()"
[disableOptionCentering]="true"
panelClass="matSelectionPanel"
class="uk-text-bold matSelection">
<mat-option [value]="5" > 5</mat-option>
<mat-option [value]="10">10</mat-option>
<mat-option [value]="20">20</mat-option>
<mat-option [value]="50">50</mat-option>
</mat-select>
</mat-form-field>
</div>
`
})

74
searchPages/searchUtils/searchSorting.component.ts
View File

@ -2,28 +2,58 @@ import {Component, Input, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'search-sorting',
template: `
<span class="uk-width-1-4"> Sort by:</span>
<mat-select *ngIf="(entityType != 'community' && entityType != 'funder' )"
class="uk-select uk-width-auto uk-text-bold matSelection"
id="form-horizontal-select" name="select_results_per_page"
[disableOptionCentering]="true"
panelClass="matSelectionPanel"
[(ngModel)]="sortBy" (ngModelChange)="sortByChanged()">
<mat-option value="">Relevance</mat-option>
<mat-option value="resultdateofacceptance,descending">Date (most recent)</mat-option>
<mat-option value="resultdateofacceptance,ascending">Date (least recent)</mat-option>
</mat-select>
<mat-select *ngIf="(entityType == 'community' || entityType == 'funder')"
class="uk-select uk-width-auto uk-text-bold matSelection"
id="form-horizontal-select" name="select_results_per_page"
[(ngModel)]="sortBy" (ngModelChange)="sortByChanged()"
[disableOptionCentering]="true"
panelClass="matSelectionPanel">
<mat-option value="">Title</mat-option>
<mat-option value="creationdate,descending">Creation Date (most recent)</mat-option>
<mat-option value="creationdate,ascending">Creation Date (least recent)</mat-option>
</mat-select>
template: `
<!-- <span class="uk-grid">-->
<!-- <div class=""> Sort by:</div>-->
<!-- <div class="uk-width-small">-->
<!-- <mat-select *ngIf="(entityType != 'community' && entityType != 'funder' )" -->
<!-- class="uk-width-auto uk-text-bold matSelection" -->
<!-- id="form-horizontal-select" name="select_results_per_page"-->
<!-- [disableOptionCentering]="true"-->
<!-- panelClass="matSelectionPanel"-->
<!-- [(ngModel)]="sortBy" (ngModelChange)="sortByChanged()">-->
<!-- <mat-option value="">Relevance</mat-option>-->
<!-- <mat-option value="resultdateofacceptance,descending">Date (most recent)</mat-option>-->
<!-- <mat-option value="resultdateofacceptance,ascending">Date (least recent)</mat-option>-->
<!-- </mat-select>-->
<!-- <mat-select *ngIf="(entityType == 'community' || entityType == 'funder')" -->
<!-- class="uk-width-small uk-text-bold matSelection" -->
<!-- id="form-horizontal-select" name="select_results_per_page"-->
<!-- [(ngModel)]="sortBy" (ngModelChange)="sortByChanged()"-->
<!-- [disableOptionCentering]="true"-->
<!-- panelClass="matSelectionPanel">-->
<!-- <mat-option value="">Title</mat-option>-->
<!-- <mat-option value="creationdate,descending">Creation Date (most recent)</mat-option>-->
<!-- <mat-option value="creationdate,ascending">Creation Date (least recent)</mat-option>-->
<!-- </mat-select>-->
<!-- </div>-->
<!-- </span>-->
<div>
<mat-form-field class="matSelectionFormField">
<mat-label>Sort by:</mat-label>
<mat-select *ngIf="(entityType != 'community' && entityType != 'funder' )"
[(ngModel)]="sortBy" (ngModelChange)="sortByChanged()"
[disableOptionCentering]="true"
panelClass="matSelectionPanel"
class="uk-text-bold matSelection">
<mat-option value="">Relevance</mat-option>
<mat-option value="resultdateofacceptance,descending">Date (most recent)</mat-option>
<mat-option value="resultdateofacceptance,ascending">Date (least recent)</mat-option>
</mat-select>
<mat-select *ngIf="(entityType == 'community' || entityType == 'funder')">
class="uk-text-bold matSelection"
id="form-horizontal-select" name="select_results_per_page"
[(ngModel)]="sortBy" (ngModelChange)="sortByChanged()"
[disableOptionCentering]="true"
panelClass="matSelectionPanel">
<mat-option value="">Title</mat-option>
<mat-option value="creationdate,descending">Creation Date (most recent)</mat-option>
<mat-option value="creationdate,ascending">Creation Date (least recent)</mat-option>
</mat-select>
</mat-form-field>
</div>
`
})