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

[Trunk | Library]: 

searchSorting.module - searchSorting.component.ts & searchResultsPerPage.component.ts & searchFilter.module.ts - searchFilter.component.html & 
browseStatistic.component.html - browseEntities.module.ts & citeThis.module.ts - citeThis.component.ts & 
metadataPreview.module.ts - metadataPreview.component.html & linkingGeneric.module.ts - linkingGeneric.component.html & 
displayClaims.module.ts - displayClaims.component.html & claimResultSearchForm.module.ts - claimResultSearchForm.component.html: 
	Use material select (<select> to <mat-select>)


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58235 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2020-03-12 10:48:04 +00:00
parent 3045d7afec
commit 2cc64b9e4e
17 changed files with 130 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
claims/claim-utils/claimResultSearchForm.component.html
View File

@ -226,12 +226,14 @@
<div class="dropdown">
<select [(ngModel)]="selectAuthorId" name="select_author"
(ngModelChange)="getOrcidResultsById(selectAuthorId)" class="uk-select">
<option [value]="0">Choose another one:</option>
<option *ngFor=" let item of authors let i = index"
[value]="authors[i].id">{{authors[i].authorGivenName}} {{authors[i].authorFamilyName}} : {{authors[i].id}} </option>
</select>
<mat-select [(ngModel)]="selectAuthorId" name="select_author"
(ngModelChange)="getOrcidResultsById(selectAuthorId)" class="uk-select matSelection"
[disableOptionCentering]="true"
panelClass="matSelectionPanel">
<mat-option [value]="0">Choose another one:</mat-option>
<mat-option *ngFor=" let item of authors let i = index"
[value]="authors[i].id">{{authors[i].authorGivenName}} {{authors[i].authorFamilyName}} : {{authors[i].id}} </mat-option>
</mat-select>
</div>
</div>

3
claims/claim-utils/claimResultSearchForm.module.ts
View File

@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
import { SharedModule } from '../../shared/shared.module';
import { CommonModule } from '@angular/common';
import { MatSelectModule } from "@angular/material";
import {ClaimResultSearchFormComponent} from './claimResultSearchForm.component';
import {ClaimResultsModule} from './claimResults.module';
@ -17,7 +18,7 @@ import {SearchFilterModule} from '../../searchPages/searchUtils/searchFilter.mod
@NgModule({
imports: [SharedModule, CommonModule, SearchResearchResultsServiceModule, PagingModule, SearchCrossrefServiceModule,
SearchDataciteServiceModule, HelperModule, SearchFilterModule, ClaimResultsModule],
SearchDataciteServiceModule, HelperModule, SearchFilterModule, ClaimResultsModule, MatSelectModule],
providers:[
SearchOrcidService
],

10
claims/claim-utils/displayClaims/displayClaims.component.html
View File

@ -73,10 +73,12 @@
data-uk-grid-margin="">
<div class="uk-width-1-2 uk-margin-top uk-margin-bottom">
<span> Results per page
<select *ngIf="resultsNum>10" class="uk-width-1-5 uk-select" [(ngModel)]="size" name="select_size"
(ngModelChange)="changeSize()" [disabled]="pageLoading">
<option *ngFor="let size of sizes" [value]="size">{{size}}</option>
</select>
<mat-select *ngIf="resultsNum>10" class="uk-width-1-5 uk-select matSelection" [(ngModel)]="size" name="select_size"
(ngModelChange)="changeSize()" [disabled]="pageLoading"
[disableOptionCentering]="true"
panelClass="matSelectionPanel">
<mat-option *ngFor="let size of sizes" [value]="size">{{size}}</mat-option>
</mat-select>
</span>
</div>
<div class="uk-grid">

3
claims/claim-utils/displayClaims/displayClaims.module.ts
View File

@ -2,6 +2,7 @@ import { NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { MatSelectModule } from "@angular/material";
import {ClaimServiceModule} from '../service/claimsService.module';
import {DisplayClaimsComponent} from './displayClaims.component';
import {LoadingModalModule} from '../../../utils/modal/loadingModal.module';
@ -18,7 +19,7 @@ import {PiwikServiceModule} from "../../../utils/piwik/piwikService.module";
imports: [
CommonModule, FormsModule, RouterModule, ClaimServiceModule, LoadingModalModule, AlertModalModule,
ClaimEntityFormatterModule, PagingModule, HelperModule, Schema2jsonldModule, SEOServiceModule, PiwikServiceModule,
IndexInfoServiceModule
IndexInfoServiceModule, MatSelectModule
],
declarations: [

20
claims/linking/linkingGeneric.component.html
View File

@ -27,15 +27,17 @@
<div class="uk-h5">
<span *ngIf="showOptions.show!='source' && showOptions.show != 'claim'">
<span>LINK TO </span>
<select [(ngModel)]="showOptions.show" class="uk-select uk-width-auto uk-text-bold "
*ngIf="showOptions.linkToEntities.length > 1">
<option *ngIf="showOptions.linkToEntities.indexOf('project')!=-1 "
value="project">PROJECTS</option>
<option *ngIf="showOptions.linkToEntities.indexOf('result')!=-1 " value="result">RESEARCH
RESULTS</option>
<option *ngIf="showOptions.linkToEntities.indexOf('context')!=-1 " value="context">COMMUNITIES
</option>
</select>
<mat-select [(ngModel)]="showOptions.show" class="uk-select uk-width-auto uk-text-bold matSelection"
*ngIf="showOptions.linkToEntities.length > 1"
[disableOptionCentering]="true"
panelClass="matSelectionPanel">
<mat-option *ngIf="showOptions.linkToEntities.indexOf('project')!=-1 "
value="project">PROJECTS</mat-option>
<mat-option *ngIf="showOptions.linkToEntities.indexOf('result')!=-1 " value="result">RESEARCH
RESULTS</mat-option>
<mat-option *ngIf="showOptions.linkToEntities.indexOf('context')!=-1 " value="context">COMMUNITIES
</mat-option>
</mat-select>
<span class=" uk-width-auto uk-text-bold "
*ngIf="showOptions.linkToEntities.length ==1">
<span *ngIf="showOptions.linkToEntities.indexOf('project')!=-1 "

4
claims/linking/linkingGeneric.module.ts
View File

@ -1,4 +1,5 @@
import { NgModule } from '@angular/core';
import { MatSelectModule } from "@angular/material";
import { SharedModule } from '../../shared/shared.module';
import {SelectedProjectsModule} from './selected/selectedProjects.module';
@ -29,7 +30,8 @@ import {PiwikServiceModule} from "../../utils/piwik/piwikService.module";
StartOverModule,
ClaimContextSearchFormModule, ClaimProjectsSearchFormModule, BulkClaimModule, ClaimResultSearchFormModule,
HelperModule, Schema2jsonldModule, SEOServiceModule, MetadataPreviewModule, ClaimEntitiesMetadataModule, AlertModalModule,
PiwikServiceModule
PiwikServiceModule,
MatSelectModule
],
providers:[LoginGuard, PreviousRouteRecorder, IsRouteEnabled],
declarations: [

72
claims/linking/selected/metadataPreview.component.html
View File

@ -113,29 +113,33 @@
class="uk-grid uk-margin-remove-top uk-text-small">
<div class="uk-width-1-2">
<span class="uk-text-muted">Type </span>
<select [(ngModel)]="entity.type" name="{{'select_type_'+entity.id}}"
class="uk-select uk-width-small">
<option [value]="'publication'"
<mat-select [(ngModel)]="entity.type" name="{{'select_type_'+entity.id}}"
class="uk-select uk-width-small matSelection"
[disableOptionCentering]="true"
panelClass="entitiesSelectionPanel">
<mat-option [value]="'publication'"
(click)="onTypeChanged('publication',entity, false)">Publication
</option>
<option [value]="'dataset'"
</mat-option>
<mat-option [value]="'dataset'"
(click)="onTypeChanged('dataset',entity, false)">Research data
</option>
<option [value]="'software'" (click)="onTypeChanged('software',entity, false)">Software
</option>
<option [value]="'other'"
</mat-option>
<mat-option [value]="'software'" (click)="onTypeChanged('software',entity, false)">Software
</mat-option>
<mat-option [value]="'other'"
(click)="onTypeChanged('other',entity, false)">Other research product
</option>
</select>
</mat-option>
</mat-select>
</div>
<div class="uk-width-1-2 uk-padding-remove-left ">
<div class="uk-grid">
<span class="uk-text-muted uk-margin-small-top uk-padding-remove-left">Access mode</span>
<select [(ngModel)]="entity.result.accessRights" name="{{'select_rights_'+entity.id}}"
class="uk-select uk-width-small uk-padding-remove-left uk-margin-left">
<option *ngFor="let type of accessTypes" [value]="type"
(click)="accessRightsTypeChanged(type,entity, false)">{{type}}</option>
</select>
<mat-select [(ngModel)]="entity.result.accessRights" name="{{'select_rights_'+entity.id}}"
class="uk-select uk-width-small uk-padding-remove-left uk-margin-left matSelection"
[disableOptionCentering]="true"
panelClass="matSelectionPanel">
<mat-option *ngFor="let type of accessTypes" [value]="type"
(click)="accessRightsTypeChanged(type,entity, false)">{{type}}</mat-option>
</mat-select>
<mat-form-field *ngIf="entity.result.accessRights== 'EMBARGO'">
<input matInput [matDatepicker]="picker" placeholder="Choose embargo end date"
(click)="picker.open()" [ngModel]="embargoEndDates[entity.id+'_source']"
@ -253,29 +257,33 @@
class="uk-grid uk-text-small uk-margin-remove-top">
<div class="uk-width-1-2">
<span class="uk-text-muted">Type </span>
<select [(ngModel)]="entity.type" name="{{'select_type_'+entity.id}}"
class="uk-select uk-width-small">
<option [value]="'publication'"
<mat-select [(ngModel)]="entity.type" name="{{'select_type_'+entity.id}}"
class="uk-select uk-width-small matSelection"
[disableOptionCentering]="true"
panelClass="matSelectionPanel">
<mat-option [value]="'publication'"
(click)="onTypeChanged('publication',entity, false)">Publication
</option>
<option [value]="'dataset'"
</mat-option>
<mat-option [value]="'dataset'"
(click)="onTypeChanged('dataset',entity, false)">Research data
</option>
<option [value]="'software'" (click)="onTypeChanged('software',entity, false)">Software
</option>
<option [value]="'other'"
</mat-option>
<mat-option [value]="'software'" (click)="onTypeChanged('software',entity, false)">Software
</mat-option>
<mat-option [value]="'other'"
(click)="onTypeChanged('other',entity, false)">Other research product
</option>
</select>
</mat-option>
</mat-select>
</div>
<div class="uk-width-1-2 uk-padding-remove-left ">
<div class="uk-grid">
<span class="uk-text-muted uk-margin-small-top uk-padding-remove-left">Access mode</span>
<select [(ngModel)]="entity.result.accessRights" name="{{'select_rights_'+entity.id}}"
class="uk-select uk-width-small uk-padding-remove-left uk-margin-left">
<option *ngFor="let type of accessTypes" [value]="type"
(click)="accessRightsTypeChanged(type,entity, true)">{{type}}</option>
</select>
<mat-select [(ngModel)]="entity.result.accessRights" name="{{'select_rights_'+entity.id}}"
class="uk-select uk-width-small uk-padding-remove-left uk-margin-left matSelection"
[disableOptionCentering]="true"
panelClass="matSelectionPanel">
<mat-option *ngFor="let type of accessTypes" [value]="type"
(click)="accessRightsTypeChanged(type,entity, true)">{{type}}</mat-option>
</mat-select>
<mat-form-field *ngIf="entity.result.accessRights== 'EMBARGO'">
<input matInput [matDatepicker]="picker" placeholder="Choose embargo end date"
(click)="picker.open()" [ngModel]="embargoEndDates[entity.id+'_result']"

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

@ -13,10 +13,12 @@ declare var Sys:any;
<dl class="uk-description-list-line">
<!--dt class="title">Cite this {{type}}</dt-->
<dd class="line" >
<select class="select" id="citations" name="citeselect" [(ngModel)]="selectedStyle" (ngModelChange)="styleChanged()">
<option value="0">select a citation style</option>
<option *ngFor=" let style of this.citation.templates let i = index" [value]="style">{{style}}</option>
</select>
<mat-select class="select matSelection" id="citations" name="citeselect" [(ngModel)]="selectedStyle" (ngModelChange)="styleChanged()"
[disableOptionCentering]="true"
panelClass="matSelectionPanel">
<mat-option value="0">select a citation style</mat-option>
<mat-option *ngFor=" let style of this.citation.templates let i = index" [value]="style">{{style}}</mat-option>
</mat-select>
<div *ngIf="selectedStyle!='0'" id="citation" class="box-content uk-padding-small uk-overflow-auto" [innerHTML]=citationText></div>
</dd>
</dl>

3
landingPages/landing-utils/citeThis/citeThis.module.ts
View File

@ -3,11 +3,12 @@ import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import {CiteThisComponent} from './citeThis.component';
import {MatSelectModule} from "@angular/material";
@NgModule({
imports: [
CommonModule, FormsModule
CommonModule, FormsModule, MatSelectModule
],
declarations: [
CiteThisComponent

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

@ -2,6 +2,7 @@ import { NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { MatSelectModule } from "@angular/material";
import {RefineFieldResultsServiceModule} from '../../services/refineFieldResultsService.module';
@ -13,7 +14,8 @@ import {ErrorMessagesModule} from '../../utils/errorMessages.module';
@NgModule({
imports: [
CommonModule, FormsModule, ErrorMessagesModule,
RefineFieldResultsServiceModule, RouterModule
RefineFieldResultsServiceModule, RouterModule,
MatSelectModule
],
declarations: [
BrowseEntitiesComponent,

11
searchPages/searchUtils/browseStatistic.component.html
View File

@ -46,10 +46,13 @@
<h4 class="tm-article-subtitle">{{filter.title}}</h4>
<div class="uk-grid uk-margin-left uk-margin-right">
<input class="uk-input uk-margin-small-bottom uk-width-1-2 " name="filter-keyword" placeholder="Search for {{filter.title}}" type="text" [(ngModel)]="keyword">
<select [(ngModel)]="sortBy" class="uk-select uk-margin-small-bottom uk-width-1-2 uk-padding-remove" name="select_order" >
<option value="num" >Sort by results number</option>
<option value="name" >Sort by name</option>
</select>
<mat-select [(ngModel)]="sortBy" class="uk-select uk-margin-small-bottom uk-width-1-2 uk-padding-remove matSelection"
name="select_order"
[disableOptionCentering]="true"
panelClass="matSelectionPanel">
<mat-option value="num" >Sort by results number</mat-option>
<mat-option value="name" >Sort by name</mat-option>
</mat-select>
</div>
<ul *ngIf="filter.values.length > 0" class="uk-list uk-list-line browseFilters">

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

@ -67,12 +67,13 @@
<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 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">
<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">
<mat-option value="num">Results number</mat-option>
<mat-option value="name">Name</mat-option>
</mat-select>
</span>
</div>

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

@ -5,10 +5,11 @@ import { FormsModule } from '@angular/forms';
import {SearchFilterComponent} from './searchFilter.component';
import{SearchFilterModalComponent} from './searchFilterModal.component';
import {ModalModule} from '../../utils/modal/modal.module';
import {MatSelectModule} from "@angular/material";
@NgModule({
imports: [
CommonModule, FormsModule, ModalModule
CommonModule, FormsModule, ModalModule, MatSelectModule
],
declarations: [
SearchFilterComponent, SearchFilterModalComponent

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

@ -4,13 +4,15 @@ import {Component, Input, Output, EventEmitter} from '@angular/core';
selector: 'search-results-per-page',
template: `
<span> Results per page:</span>
<select class="uk-select uk-width-auto uk-text-bold" id="form-horizontal-select" name="select_results_per_page"
[(ngModel)]="size" (ngModelChange)="sizeChanged()">
<option [ngValue]="5" > 5</option>
<option [ngValue]="10">10</option>
<option [ngValue]="20">20</option>
<option [ngValue]="50">50</option>
</select>
<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>
`
})

5
searchPages/searchUtils/searchResultsPerPage.module.ts
View File

@ -3,11 +3,12 @@ import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import{SearchResultsPerPageComponent} from './searchResultsPerPage.component';
import {SearchResultsPerPageComponent} from './searchResultsPerPage.component';
import {MatSelectModule} from "@angular/material";
@NgModule({
imports: [
CommonModule, FormsModule, RouterModule
CommonModule, FormsModule, RouterModule, MatSelectModule
],
declarations: [
SearchResultsPerPageComponent

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

@ -4,22 +4,26 @@ import {Component, Input, Output, EventEmitter} from '@angular/core';
selector: 'search-sorting',
template: `
<span class="uk-width-1-4"> Sort by:</span>
<select *ngIf="(entityType != 'community' && entityType != 'funder' )"
class="uk-select uk-width-auto uk-text-bold"
<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()">
<option value="">Relevance</option>
<option value="resultdateofacceptance,descending">Date (most recent)</option>
<option value="resultdateofacceptance,ascending">Date (least recent)</option>
</select>
<select *ngIf="(entityType == 'community' || entityType == 'funder')"
class="uk-select uk-width-auto uk-text-bold"
<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()">
<option value="">Title</option>
<option value="creationdate,descending">Creation Date (most recent)</option>
<option value="creationdate,ascending">Creation Date (least recent)</option>
</select>
[(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>
`
})

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

@ -4,10 +4,11 @@ import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import{SearchSortingComponent} from './searchSorting.component';
import {MatSelectModule} from "@angular/material";
@NgModule({
imports: [
CommonModule, FormsModule, RouterModule
CommonModule, FormsModule, RouterModule, MatSelectModule
],
declarations: [
SearchSortingComponent