searchPage.component: clear All (for filters) became an <a> tag | searchFilter.component: accordion removed - filters always open | browseStatistic.component: modal fixed for View more options | search.component + publication.component: added responsiveness in tabs | claimsByToken.component: added metadata information (description + title -> to be changed) - datatables' paging and column width with slightly better appearance

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@47314 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2017-05-22 14:59:20 +00:00
parent 4b515378a4
commit ffd555f288
8 changed files with 182 additions and 36 deletions

View File

@ -10,6 +10,8 @@ import {ModalLoading} from '../../utils/modal/loading.component';
import {Session} from '../../login/utils/helper.class';
import {RouterHelper} from '../../utils/routerHelper.class';
import { Meta} from '../../../angular2-meta';
//import {DataTable} from "angular2-datatable";
@Component({
selector: 'claims-project-manager',
@ -84,20 +86,20 @@ import {RouterHelper} from '../../utils/routerHelper.class';
<thead>
<tr>
<th><mfDefaultSorter [by]="sortByTitle1">Research Result</mfDefaultSorter></th>
<th class="uk-text-center"><mfDefaultSorter by="claim1.userMail">Claimed By</mfDefaultSorter></th>
<th class="uk-text-center"><mfDefaultSorter by="userMail">Claimed By</mfDefaultSorter></th>
<th class="uk-text-center"><mfDefaultSorter [by]="sortByClaimDate1">Claimed Date</mfDefaultSorter></th>
<th class="uk-text-center">Approve</th>
</tr>
</thead>
<tbody>
<tr class="uk-table-middle" *ngFor="let claim1 of mf1.data">
<td class="uk-width-2-6" *ngIf="claim1.targetType != 'project'"><claim-entity [entity]="claim1.target" [type]="claim1.targetType" > </claim-entity></td>
<td class="uk-width-1-6 uk-text-center" *ngIf="claim1.sourceType != 'project'"><claim-entity [entity]="claim1.source" [type]="claim1.sourceType" > </claim-entity></td>
<td class="uk-width-1-6 uk-text-center">{{claim1.userMail}}</td>
<td class="uk-width-1-6 uk-text-center">{{claim1.date}}</td>
<td class="uk-width-1-6 uk-text-center">
<td class="uk-width-2-5" *ngIf="claim1.targetType != 'project'"><claim-entity [entity]="claim1.target" [type]="claim1.targetType" > </claim-entity></td>
<td class="uk-width-2-5 uk-text-center" *ngIf="claim1.sourceType != 'project'"><claim-entity [entity]="claim1.source" [type]="claim1.sourceType" > </claim-entity></td>
<td class="uk-width-1-5 uk-text-center">{{claim1.userMail}}</td>
<td class="uk-width-1-5 uk-text-center">{{claim1.date}}</td>
<td class="uk-width-1-5 uk-text-center">
<label>
<label>
Yes <input [id]="claim1.id" type="checkbox" (click)="selectApprove(claim1.id,$event)" [ngModel]="isSelectedRight(claim1.id)"/>
</label>
<label>
@ -106,12 +108,14 @@ import {RouterHelper} from '../../utils/routerHelper.class';
</td>
</tr>
</tbody>
<tfoot>
<div>
<paging-no-load [currentPage]="1" [totalResults]="pending_claims.length" [size]="rowsOnPage" (pageChange)="refreshTable(mf1, $event)"></paging-no-load>
</div>
<!--paging-no-load [currentPage]="1" [totalResults]="pending_claims.length" [size]="rowsOnPage" ></paging-no-load-->
<tfoot class="uk-child-width-1-1">
<!--paging-no-load class="uk-width-1-1" [currentPage]="1" [totalResults]="pending_claims.length" [size]="rowsOnPage" (pageChange)="refreshTable(mf1, $event)"></paging-no-load-->
</tfoot>
</table>
<paging-no-load class="uk-float-right" [currentPage]="1" [totalResults]="pending_claims.length" [size]="rowsOnPage" (pageChange)="refreshTable(table1, $event)"></paging-no-load>
</div>
<h2> Already Curated Claims</h2>
@ -191,10 +195,10 @@ import {RouterHelper} from '../../utils/routerHelper.class';
<!--td><button class="uk-button" (click)="editable.add(i)">Edit</button></td-->
</tr>
</tbody>
<tfoot>
<!--tfoot>
<tr>
<td>
<!--mfBootstrapPaginator></mfBootstrapPaginator-->
<mfBootstrapPaginator></mfBootstrapPaginator>
</td>
<td></td>
<td></td>
@ -204,8 +208,10 @@ import {RouterHelper} from '../../utils/routerHelper.class';
<paging-no-load [currentPage]="1" [totalResults]="curated_claims.length" [size]="rowsOnPage" (pageChange)="refreshTable(mf2, $event)"> </paging-no-load>
</td>
</tr>
</tfoot>
</tfoot-->
</table>
<paging-no-load class="uk-float-right" [currentPage]="1" [totalResults]="curated_claims.length" [size]="rowsOnPage" (pageChange)="refreshTable(table2, $event)"> </paging-no-load>
</div>
@ -237,13 +243,16 @@ export class ClaimsByTokenComponent {
public rowsOnPage = 5;
public sortOrder = "asc";
@ViewChild('mf1') table1: any;//DataTable;
@ViewChild('mf2') table2: any;//DataTable;
@ViewChild (ModalSelect) selectModal : ModalSelect;
@ViewChild (ModalLoading) loading : ModalLoading ;
public routerHelper:RouterHelper = new RouterHelper();
constructor ( private route: ActivatedRoute, private _router:Router, private claimsByTokenService: ClaimsByTokenService ) {
constructor ( private route: ActivatedRoute, private _router:Router, private claimsByTokenService: ClaimsByTokenService, private _meta: Meta) {
}
ngOnInit() {
@ -256,13 +265,15 @@ export class ClaimsByTokenComponent {
//this.setMessageSelect("Please select your identity:");
//this.setOptionsSelect(this.contact_person);
this.validateJWTandToken();
this.updateTitle("Claims By Token");
this.updateDescription("");
}
);
}
refreshTable(mf:any, $event:any) {
mf.mfActivePage=$event.value;
mf.setPage(mf.mfActivePage, this.rowsOnPage);
refreshTable(table:any, $event:any) {
table.mfActivePage=$event.value;
table.setPage(table.mfActivePage, this.rowsOnPage);
}
public sortByClaimDate1 = (claim: any) => {
@ -424,4 +435,15 @@ public sortByTitle2= (claim: any) => {
this.selectModal.options = options;
}
}
updateDescription(description:string){
this._meta.updateMeta("description", description);
this._meta.updateMeta("og:description", description);
}
updateTitle(title:string){
var _suffix ="| OpenAIRE";
var _title = ((title.length> 50 ) ?title.substring(0,50):title) + _suffix;
this._meta.setTitle(_title );
this._meta.updateMeta("og:title",_title);
}
}

View File

@ -64,8 +64,8 @@
<a class="uk-float-right uk-button uk-button-default" [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[articleId,'publication','result'])" routerLinkActive="router-link-active" routerLink="/participate/direct-claim" > <span uk-icon="icon: link"></span> Links to research Results</a>
</div>
<ul class="uk-tab" data-uk-switcher="{connect: '#tab-content'}">
<li class="uk-active">
<ul class="uk-tab uk-visible@xl" uk-tab="connect: #tab-content">
<li (click)="activeTab='References'">
<a>
References
<span *ngIf="publicationInfo.references == undefined" class="uk-badge uk-badge-notification">0</span>
@ -74,7 +74,7 @@
</span>
</a>
</li>
<li>
<li (click)="activeTab='Related Research Results'">
<a>
Related Research Results
<span class="uk-badge uk-badge-notification">
@ -82,7 +82,7 @@
</span>
</a>
</li>
<li>
<li (click)="activeTab='Similar Research Results'">
<a>
Similar Research Results
<span *ngIf="publicationInfo.similarResearchResults == undefined" class="uk-badge uk-badge-notification">0</span>
@ -91,7 +91,7 @@
</span>
</a>
</li>
<li>
<li (click)="activeTab='Related Organizations'">
<a>
Related Organizations
<span *ngIf="publicationInfo.organizations == undefined" class="uk-badge uk-badge-notification">0</span>
@ -100,26 +100,86 @@
</span>
</a>
</li>
<li *ngIf="publicationInfo.bioentities != undefined">
<li *ngIf="publicationInfo.bioentities != undefined" (click)="activeTab='Bioentities'">
<a>
Bioentities
<span class="uk-badge uk-badge-notification">{{bioentitiesNum}}</span>
</a>
</li>
<li *ngIf="publicationInfo.software != undefined">
<li *ngIf="publicationInfo.software != undefined" (click)="activeTab='Software'">
<a>
Software
<span class="uk-badge uk-badge-notification">{{publicationInfo.software.length}}</span>
</a>
</li>
<li>
<a (click)="metricsClicked=true;">
<li (click)="metricsClicked=true; activeTab='Metrics'">
<a>
Metrics
<i class="uk-icon-line-chart"></i>
</a>
</li>
</ul>
<!--span uk-icon="icon: menu"></span> {{activeTab}}<-->
<button class="uk-button uk-button-default uk-hidden@xl" type="button">
<span uk-navbar-toggle-icon></span> <span class="uk-margin-small-left">{{activeTab}}</span>
</button>
<ul id="toggle-small-tabs" class="uk-subnav uk-subnav-pill uk-dropdown uk-hidden@xl" uk-switcher="{connect: #tab-content}" uk-dropdown="mode: click" uk-toggle="target: #toggle-small-tabs">
<li (click)="activeTab='References'">
<a>
References
<span *ngIf="publicationInfo.references == undefined" class="uk-badge uk-badge-notification">0</span>
<span *ngIf="publicationInfo.references != undefined" class="uk-badge uk-badge-notification">
{{publicationInfo.references.length}}
</span>
</a>
</li>
<li (click)="activeTab='Related Research Results'">
<a>
Related Research Results
<span class="uk-badge uk-badge-notification">
{{relatedResearchResultsNum}}
</span>
</a>
</li>
<li (click)="activeTab='Similar Research Results'">
<a>
Similar Research Results
<span *ngIf="publicationInfo.similarResearchResults == undefined" class="uk-badge uk-badge-notification">0</span>
<span *ngIf="publicationInfo.similarResearchResults != undefined" class="uk-badge uk-badge-notification">
{{publicationInfo.similarResearchResults.length}}
</span>
</a>
</li>
<li (click)="activeTab='Related Organizations'">
<a>
Related Organizations
<span *ngIf="publicationInfo.organizations == undefined" class="uk-badge uk-badge-notification">0</span>
<span *ngIf="publicationInfo.organizations != undefined" class="uk-badge uk-badge-notification">
{{publicationInfo.organizations.length}}
</span>
</a>
</li>
<li *ngIf="publicationInfo.bioentities != undefined" (click)="activeTab='Bioentities'">
<a>
Bioentities
<span class="uk-badge uk-badge-notification">{{bioentitiesNum}}</span>
</a>
</li>
<li *ngIf="publicationInfo.software != undefined" (click)="activeTab='Software'">
<a>
Software
<span class="uk-badge uk-badge-notification">{{publicationInfo.software.length}}</span>
</a>
</li>
<li (click)="metricsClicked=true; activeTab='Metrics'">
<a>
Metrics<i class="uk-icon-line-chart"></i>
</a>
</li>
</ul>
<ul id="tab-content" class="uk-switcher uk-margin custom-tab-content">
<li class="uk-animation-fade">
<div *ngIf="publicationInfo.references == undefined" class = "uk-alert uk-alert-primary" >

View File

@ -49,6 +49,8 @@ export class PublicationComponent {
public errorMessage = "";
public routerHelper:RouterHelper = new RouterHelper();
public activeTab: string = "References";
constructor ( private element: ElementRef,
private _publicationService: PublicationService,
private route: ActivatedRoute, private _meta: Meta) { }
@ -214,4 +216,5 @@ export class PublicationComponent {
this._meta.setTitle(_title );
this._meta.updateMeta("og:title",_title);
}
}

View File

@ -40,7 +40,7 @@ import {RouterHelper} from '../../utils/routerHelper.class';
</div>
<div class=" uk-margin-top uk-width-1-1">
<ul class=" uk-tab " uk-tab="connect: #searchtabs; animation: uk-animation-fade">
<ul class=" uk-tab uk-visible@m" uk-tab="connect: #searchtabs; animation: uk-animation-fade">
<li (click)="searchPublications()" >
<a>
Publications
@ -88,6 +88,55 @@ import {RouterHelper} from '../../utils/routerHelper.class';
</ul>
<button class="uk-button uk-button-default uk-hidden@m" type="button">
<span uk-navbar-toggle-icon></span> <span class="uk-margin-small-left">{{activeTab}}</span>
</button>
<ul id="toggle-small-tabs" class="uk-subnav uk-subnav-pill uk-dropdown uk-hidden@m" uk-switcher="{connect: #searchtabs; animation: uk-animation-fade}" uk-dropdown="mode: click" uk-toggle="target: #toggle-small-tabs">
<li (click)="searchPublications()" >
<a>
Publications
<span *ngIf = "fetchPublications.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span>
<span *ngIf = "fetchPublications.searchUtils.status != errorCodes.LOADING && keyword.length > 0" class="uk-badge uk-badge-notification">{{((keyword.length > 0)? fetchPublications.searchUtils.totalResults :'')}}</span>
</a>
</li>
<li (click)="searchDatasets()">
<a>
Datasets
<span *ngIf = "fetchDatasets.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span>
<span *ngIf = "fetchDatasets.searchUtils.status != errorCodes.LOADING && keyword.length > 0" class="uk-badge uk-badge-notification"> {{((keyword.length > 0)? fetchDatasets.searchUtils.totalResults :'')}}</span>
</a>
</li>
<li (click)="searchProjects()" >
<a>
Projects
<span *ngIf = "fetchProjects.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span>
<span *ngIf = "fetchProjects.searchUtils.status != errorCodes.LOADING && keyword.length > 0" class="uk-badge uk-badge-notification"> {{((keyword.length > 0)? fetchProjects.searchUtils.totalResults :'')}}</span>
</a>
</li>
<li (click)="searchDataProviders()" >
<a>
Data Providers
<span *ngIf = "fetchDataproviders.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span>
<span *ngIf = "fetchDataproviders.searchUtils.status != errorCodes.LOADING && keyword.length > 0" class="uk-badge uk-badge-notification"> {{((keyword.length > 0)? fetchDataproviders.searchUtils.totalResults :'')}}</span>
</a>
</li>
<li (click)="searchOrganizations()" >
<a>
Organizations
<span *ngIf = "fetchOrganizations.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span>
<span *ngIf = "fetchOrganizations.searchUtils.status != errorCodes.LOADING && keyword.length > 0" class="uk-badge uk-badge-notification"> {{((keyword.length > 0)? fetchOrganizations.searchUtils.totalResults :'')}}</span>
</a>
</li>
<li (click)="searchPeople()" >
<a>
People
<span *ngIf = "fetchPeople.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span>
<span *ngIf = "fetchPeople.searchUtils.status != errorCodes.LOADING && keyword.length > 0" class="uk-badge uk-badge-notification"> {{((keyword.length > 0)? fetchPeople.searchUtils.totalResults :'')}}</span>
</a>
</li>
</ul>
<ul id="searchtabs" class="uk-switcher uk-width-1-1 uk-margin-top custom-tab-content-large">
<li>
<div *ngIf = "keyword.length > 0" class ="uk-animation-fade">

View File

@ -24,7 +24,14 @@ import {RouterHelper} from '../../utils/routerHelper.class';
<span class="filterName"><div title = "{{value.name}}">{{_formatName(value)}} </div></span> <span class="filterNumber" > ({{value.number}})</span></a>
</li>
<li *ngIf= " filter.values.length > 5 ">
<span uk-toggle="target: #modal"><span class="uk-text-muted clickable">View more </span><a><span uk-icon="icon: triangle-right"></span></a></span>
<a href="#modal-{{filter.filterId}}" uk-toggle><span class="uk-text-muted">View more </span><span uk-icon="icon: triangle-right"></span></a>
<!--
uk-toggle="target: modal-"
uk-toggle='{"target": modal-}'>
uk-toggle target="modal-"
-->
<!--span uk-toggle='{"target": modal-}'><span class="uk-text-muted clickable">View more </span><a><span uk-icon="icon: triangle-right"></span></a></span-->
</li>
</ul>
<ul *ngIf="filter.values.length > 0 && viewAll" class="uk-list uk-list-divider browseFilters">
@ -39,7 +46,7 @@ import {RouterHelper} from '../../utils/routerHelper.class';
<!-- This is the modal -->
<div id="modal" uk-modal>
<div id="modal-{{filter.filterId}}" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<button class="uk-modal-close-default" type="button" uk-close></button>

View File

@ -7,11 +7,11 @@ import {Open} from '../../utils/modal/open.component';
@Component({
selector: 'search-filter',
template: `
<ul *ngIf= "filter.values.length >0" class = "uk-accordion uk-animation-fade" uk-accordion="">
<ul *ngIf= "filter.values.length >0" class="uk-list">
<li class="uk-open">
<h3 class="uk-accordion-title uk-margin-bottom-remove uk-margin-top">{{_formatTitle(filter.title,filter.values.length)}}
</h3>
<div class="uk-accordion-content" data-wrapper="true" style="overflow:hidden;position:relative;" aria-expanded="false">
<h5 class="uk-margin-bottom-remove uk-margin-top">{{_formatTitle(filter.title,filter.values.length)}}
</h5>
<div aria-expanded="false">
<div class="searchFilterBoxValues ">
<div *ngFor = "let value of getSelectedValues(filter)" class = "uk-animation-fade filterItem">

View File

@ -33,9 +33,12 @@ import {SearchFilterModalComponent} from './searchFilterModal.component';
</span>
</span>
</span>
<span>
<!--span>
Clear All
<a (click)="clearFilters()" class="uk-icon-button uk-text-right"><span uk-icon="icon: close"></span></a></span>
<a (click)="clearFilters()" class="uk-icon-button uk-text-right"><span uk-icon="icon: close"></span></a></span-->
<a (click)="clearFilters()">
Clear All
</a>
</div>
<a *ngIf = "advancedSearchLink && advancedSearchLink.length > 0" routerLinkActive="router-link-active" class="uk-float-right" [routerLink]=advancedSearchLink >More search options <span uk-icon="icon: chevron-right"></span></a>
</div>

View File

@ -31,8 +31,10 @@ export class OpenaireProperties {
private static metricsAPIURL = "https://beta.services.openaire.eu/usagestats/";
private static framesAPIURL = "https://beta.openaire.eu/stats3/";
//private static loginAPIURL = "http://mpagasas.di.uoa.gr:8080/uoa-user-management-1.0.0-SNAPSHOT/api/users/authenticates";
private static loginAPIURL = "http://scoobydoo.di.uoa.gr:8080/uoa-user-management-1.0.0-SNAPSHOT/api/users/authenticates";
// public claimsAPIURL = "http://rudie.di.uoa.gr:8080/dnet-openaire-connector-service-1.0.0-SNAPSHOT/rest/claimsService/"
private static claimsAPIURL = "http://scoobydoo.di.uoa.gr:8080/dnet-openaire-connector-service-1.0.0-SNAPSHOT/rest/claimsService/";