Layout changes for linking

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@47537 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki 2017-06-16 10:26:41 +00:00
parent dc34b0d85a
commit 25e2f5727e
12 changed files with 123 additions and 59 deletions

View File

@ -46,7 +46,7 @@
You have selected {{selected.length}} claim(s)
</div>
</div>
<div *ngIf="deleteMessage.length>0 " class = "uk-alert uk-alert-primary " [innerHTML]="deleteMessage">
<div *ngIf="deleteMessage.length>0 " [innerHTML]="deleteMessage">
</div>
<button class=" uk-button uk-button-default" (click)="confirmOpen()"> <span uk-icon="icon: trash"></span> Delete</button>

View File

@ -454,10 +454,10 @@ export class DisplayClaimsComponent {
this.resultsNum = this.resultsNum - res.deletedIds.length;
this.loading.close();
if(res.deletedIds.length>0){
this.deleteMessage=this.deleteMessage+'<div class = "alert alert-success " >'+res.deletedIds.length+' claim(s) successfully deleted.</div>';
this.deleteMessage=this.deleteMessage+'<div class = "uk-alert uk-alert-primary " >'+res.deletedIds.length+' claim(s) successfully deleted.</div>';
}
if(res.notFoundIds.length>0){
this.deleteMessage=this.deleteMessage+'<div class = "alert alert-warning " >'+res.notFoundIds.length+' claim(s) couldn\'t be deleted.</div>';
this.deleteMessage=this.deleteMessage+'<div class = "uk-alert uk-alert-warning " >'+res.notFoundIds.length+' claim(s) couldn\'t be deleted.</div>';
}
});
}

View File

@ -64,9 +64,9 @@ export class ClaimsService {
deleteClaimById(claimId:string,token:string):any{
console.warn('Trying to delete claim with id : '+claimId);
let url = this.baseUrl +"claims/"+claimId+"?token="+token;
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.delete( url, options).map(request => <any> request.json())
// let headers = new Headers({ 'Content-Type': 'application/json' });
// let options = new RequestOptions({ headers: headers });
return this.http.delete( url, this.getOptions()).map(request => <any> request.json())
// .do(request => console.info("After delete" ))
.catch(this.handleError);
@ -80,9 +80,9 @@ export class ClaimsService {
url=url+(url.length >0 ?"&":"")+"claimId="+claimId;
}
url= this.baseUrl +"claims/bulk?"+url+"&token="+token;
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.delete( url, options).map(request => <any> request.json())
// let headers = new Headers({ 'Content-Type': 'application/json' });
// let options = new RequestOptions({ headers: headers });
return this.http.delete( url, this.getOptions()).map(request => <any> request.json())
// .do(request => console.info("After delete" ))
.catch(this.handleError);
@ -92,9 +92,9 @@ export class ClaimsService {
let url = this.baseUrl +"claims/bulk"+"?token="+token;
let body = JSON.stringify( claims );
console.warn('Json body: : '+body);
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post(url, body, options)
// let headers = new Headers({ 'Content-Type': 'application/json' });
// let options = new RequestOptions({ headers: headers });
return this.http.post(url, body, this.getOptions())
.map(res => res.json())
.do(request => console.info("Insert Response:"+request.status) )
.catch(this.handleError);
@ -104,9 +104,9 @@ export class ClaimsService {
console.warn('Trying toinsert claim : '+claim);
let url = this.baseUrl +"claims"+"?token="+token;
let body = JSON.stringify( claim );
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post(url, body, options)
// let headers = new Headers({ 'Content-Type': 'application/json' });
// let options = new RequestOptions({ headers: headers });
return this.http.post(url, body, this.getOptions())
.map(res => res.json())
.do(request => console.info("Insert Response:"+request.status) )
.catch(this.handleError);
@ -117,9 +117,9 @@ export class ClaimsService {
let url = this.baseUrl +"feed/bulk"+"?token="+token;
let body = JSON.stringify( records );
console.warn('Json body: : '+body);
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post(url, body, options)
// let headers = new Headers({ 'Content-Type': 'application/json' });
// let options = new RequestOptions({ headers: headers });
return this.http.post(url, body, this.getOptions())
.map(res => res.json())
.do(request => console.info("Insert Response:"+request) )
.catch(this.handleError);
@ -149,4 +149,11 @@ export class ClaimsService {
});
}
private getOptions(){
let headers = new Headers();
headers.append('Content-Type', 'application/json');
let options = new RequestOptions({ headers: headers });
return options;
}
}

View File

@ -12,9 +12,12 @@ import {ClaimsService} from './claims.service';
declarations: [
],
providers:[
ClaimsService
ClaimsService,
],
exports: [
]
})
export class ClaimServiceModule { }

View File

@ -4,7 +4,7 @@ import {ClaimResult} from '../claim-utils/claimEntities.class';
@Component({
selector: 'start-over',
template: `<button (click)="startOver()" class="uk-button uk-button-danger uk-align-right" > <span uk-icon="icon: refresh"></span> Start Over</button>`,
template: `<button (click)="startOver()" class="uk-button uk-button-danger uk-align-right" > <span uk-icon="icon: refresh"></span> Clear All</button>`,
})
export class StartOverComponent {

View File

@ -6,6 +6,7 @@ import {ClaimProject, ClaimResult} from '../claim-utils/claimEntities.class';
import {SearchPublicationsService} from '../../services/searchPublications.service';
import {SearchDatasetsService} from '../../services/searchDatasets.service';
import { Meta} from '../../../angular2-meta';
declare var UIkit:any;
@Component({
selector: 'linking-generic',
@ -14,12 +15,27 @@ import { Meta} from '../../../angular2-meta';
<div class="page-header">
<h1>Linking</h1>
</div>
<!--ul class="uk-breadcrumb">
<li><a > Select Projects</a></li>
<li><a > Select Communities</a></li>
<li><a > Select Research Results</a></li>
<li class="uk-active"><a > Complete metadata</a></li>
</ul-->
<ul class="uk-breadcrumb">
<li [class]="(show=='project')?'uk-active':''" ><a (click)="show='project';"> Select Projects <span >({{projects.length}})</span></a></li>
<li [class]="(show=='context')?'uk-active':''" ><a (click)="show='context';"> Select Communities <span >({{contexts.length}})</span></a></li>
<li [class]="(show=='result')?'uk-active':''" ><a (click)="show='result';"> Select Research Results <span >({{results.length}})</span></a></li>
<li [class]="(show=='claim')?'uk-active':''" (click)="canProceedToMetadata();"><a [class]="(results.length == 0)?'uk-disabled':''" (click)="show='claim';" > Complete metadata</a></li>
</ul>
<start-over [results]="results" [contexts]="contexts" [projects]="projects" ></start-over>
<div class="uk-clearfix">
<a class="uk-float-right" uk-toggle="target: #linkingInfo; animation: uk-animation-fade"><span uk-icon="icon: info"></span> What is linking about? </a>
</div>
<div id="linkingInfo" class="uk-card uk-card-default uk-card-body uk-margin-small" hidden>
<a uk-toggle="target: #uploadInfo; animation: uk-animation-fade" class="uk-float-right"><span uk-icon="icon: close"></span></a>
<div class="uk-text-bold"><span uk-icon="icon: info"></span> Linking Functioanlity:</div>
<p>TODO: Put some useful information here... </p>
</div>
<!--ul class="uk-pagination uk-margin-remove-bottom">
<li *ngIf="show != 'result' " (click)="prev()"><a><span class="uk-margin-small-right" uk-pagination-previous></span> Previous</a></li>
<li *ngIf="show != 'claim' " (click)="next()" class="uk-margin-auto-left"><a>Next <span class="uk-margin-small-left" uk-pagination-next></span></a></li>
@ -29,12 +45,11 @@ import { Meta} from '../../../angular2-meta';
</li>
</ul-->
<start-over [results]="results" [contexts]="contexts" [projects]="projects" ></start-over>
<!-- link with Projects & Contexts -->
<!--div class="uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-grid">
<div class="uk-width-1-1@s uk-width-1-2@m uk-width-1-2@l uk-width-1-2@xl "-->
<ul class=" uk-tab " uk-tab="connect: #tabs; animation: uk-animation-fade">
<!--ul class=" uk-tab " uk-tab="connect: #tabs; animation: uk-animation-fade">
<li>
<a>Projects ({{projects.length}})</a>
</li>
@ -43,24 +58,24 @@ import { Meta} from '../../../angular2-meta';
</li>
</ul>
<ul id="tabs" class="uk-switcher uk-margin-left uk-width-1-1">
<li>
<claim-selected-projects title="link Projects" [projects]="projects" [show]="show" [linkType]=linkType
<li-->
<claim-selected-projects *ngIf="show=='project'" title="link Projects" [projects]="projects" [show]="show" [linkType]=linkType
(showChange)="showChange($event)" > </claim-selected-projects>
</li>
<li>
<claim-selected-contexts title="link Communities" [contexts]="contexts" [projects]="projects" [results]="results" [inlineEntity] = "inlineResult" [show]="show" [linkType]=linkType
<!--/li>
<li-->
<claim-selected-contexts *ngIf="show=='context'" title="link Communities" [contexts]="contexts" [projects]="projects" [results]="results" [inlineEntity] = "inlineResult" [show]="show" [linkType]=linkType
(showChange)="showChange($event)" > </claim-selected-contexts>
</li>
<!--/li-->
<!--/div>
<div class="uk-width-1-1@s uk-width-1-2@m uk-width-1-2@l uk-width-1-2@xl "-->
</ul>
<!--/div>
</div-->
<hr>
<!--/ul>
<!--/div-->
<!--/div-->
<!--hr-->
<!-- Research Results -->
<div class="uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l">
<claim-selected-results title= "with Research Results" [results]="results" [bulkMode]="bulkMode" [showSearch]="show=='claim'|| bulkMode? false: true" [showAccessRights]="show=='claim' || bulkMode? true: false">
<div *ngIf="show=='result' || show=='claim'" class="uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l">
<claim-selected-results title= "Selected Research Results" [results]="results" [bulkMode]="bulkMode" [showSearch]="show=='claim'|| bulkMode? false: true" [showAccessRights]="show=='claim' || bulkMode? true: false">
</claim-selected-results>
</div>
@ -68,8 +83,8 @@ import { Meta} from '../../../angular2-meta';
<ul class="uk-pagination">
<li *ngIf="show != 'result' " (click)="prev()"><a><span class="uk-margin-small-right" uk-pagination-previous></span> Previous</a></li>
<li *ngIf="show != 'claim' " (click)="next()" class="uk-margin-auto-left"><a>Next <span class="uk-margin-small-left" uk-pagination-next></span></a></li>
<!--li *ngIf="show != 'result' " (click)="prev()"><a><span class="uk-margin-small-right" uk-pagination-previous></span> Previous</a></li-->
<li *ngIf="show != 'claim' " (click)="canProceedToMetadata()" class="uk-margin-auto-left"><a> Review Metadata <span class="uk-margin-small-left" uk-pagination-next></span></a></li>
<li *ngIf="show == 'claim' " (click)="next()" class="uk-margin-auto-left">
<claim-insert [contexts]="contexts" [results]="results" [projects]="projects" [show] = "show"
(showChange)="showChange($event)" ></claim-insert>
@ -91,7 +106,7 @@ export class LinkingGenericComponent {
contexts=[];
projects=[];
results = [];
show = "result";
show = "project";
date='8-6-2016';
keyword: string = "";
linkType:string ="project"; // link type (selected in home page) : project, context, software, etc
@ -169,4 +184,17 @@ export class LinkingGenericComponent {
}
}
canProceedToMetadata(){
if(this.results.length == 0){
UIkit.notification({
message : 'No research results selected!<br>Please select research results to link with projects and/ or ommunities.',
status : 'warning',
timeout : 1000,
pos : 'top-center'
});
}else{
this.show = 'claim';
}
}
}

View File

@ -11,16 +11,25 @@ import {ClaimContext} from '../../claim-utils/claimEntities.class';
<li class="uk-open">
<h3 class="uk-accordion-title"> {{title}} ({{(contexts.length)}})</h3>
<div class="uk-accordion-content" --><!--(contextSelected)="contextSelected($event)"-->
<div class="uk-clearfix"><button *ngIf=" !showsearch " (click)="showsearch = true;" class="uk-button uk-button-default uk-animation uk-float-right">Add more <span uk-icon="icon: plus"></span></button></div>
<claim-contexts-search-form *ngIf=" showsearch " [selectedList]="contexts" [projects]="projects" [results]="results" [inlineEntity]="inlineEntity" > </claim-contexts-search-form>
<ul class="uk-list uk-list-divider">
<li class="list-group-item" *ngFor="let context of contexts" >
<span *ngIf="context.community != context.concept.label">{{context.community }} > {{context.category}} ></span><span> {{context.concept.label}} </span>
<span (click)="removeContext(context)" aria-hidden="true" class="uk-icon-button"><span uk-icon="icon: close"></span></span>
<div class="uk-accordion-content uk-grid uk-width-1-1" >
</li>
</ul>
<div *ngIf="contexts.length == 0 " class="uk-alert uk-alert-primary">There are no communities</div>
<div class="uk-width-1-2 ">
<div class="uk-clearfix"><button *ngIf=" !showsearch " (click)="showsearch = true;" class="uk-button uk-button-default uk-animation uk-float-right">Add more <span uk-icon="icon: plus"></span></button></div>
<claim-contexts-search-form *ngIf=" showsearch " [selectedList]="contexts" [projects]="projects" [results]="results" [inlineEntity]="inlineEntity" > </claim-contexts-search-form>
</div>
<div class="uk-width-1-2 ">
<h3 > Selected Projects ({{projects.length}}) </h3>
<ul class="uk-list uk-list-divider">
<li class="list-group-item" *ngFor="let context of contexts" >
<span *ngIf="context.community != context.concept.label">{{context.community }} > {{context.category}} ></span><span> {{context.concept.label}} </span>
<span (click)="removeContext(context)" aria-hidden="true" class="uk-icon-button"><span uk-icon="icon: close"></span></span>
</li>
</ul>
<div *ngIf="contexts.length == 0 " class="uk-alert uk-alert-primary">There are no communities</div>
</div>
</div>
<!--/div>
</li>
</ul-->

View File

@ -12,8 +12,15 @@ import {RouterHelper} from '../../../utils/routerHelper.class';
</h3>
<div class="uk-accordion-content"-->
<div class="uk-clearfix"><button *ngIf=" !showsearch " (click)="showsearch = true;" class="uk-button-default uk-float-right uk-animation ">Add more <span uk-icon="icon: plus"></span></button></div>
<claim-projects-search-form *ngIf=" showsearch " [selectedProjects]="projects" (projectSelected)="projectSelected($event)" > </claim-projects-search-form>
<div class="uk-accordion-content uk-grid uk-width-1-1" >
<div class="uk-width-1-2 ">
<div class="uk-clearfix"><button *ngIf=" !showsearch " (click)="showsearch = true;" class="uk-button-default uk-float-right uk-animation ">Add more <span uk-icon="icon: plus"></span></button></div>
<claim-projects-search-form *ngIf=" showsearch " [selectedProjects]="projects" (projectSelected)="projectSelected($event)" > </claim-projects-search-form>
</div>
<div class="uk-width-1-2 ">
<h3 > Selected Projects ({{projects.length}}) </h3>
<ul class="uk-list uk-list-divider">
<li class="list-group-item" *ngFor="let project of projects">
<a [queryParams]="routerHelper.createQueryParam('projectId',project.projectId)" routerLinkActive="router-link-active" routerLink="/search/project" >{{project.funderName}} | {{project.projectName}} {{(project.projectAcronym)?'('+project.projectAcronym+')':''}} <!--[{{project.startDate}} - {{project.endDate}}]--></a>
@ -21,6 +28,8 @@ import {RouterHelper} from '../../../utils/routerHelper.class';
</li>
</ul>
<div *ngIf="projects.length == 0 " class="uk-alert uk-alert-primary">There are no projects</div>
</div>
</div>
<!--/div>
</li></ul-->

View File

@ -9,8 +9,8 @@ import {Dates} from '../../../utils/string-utils.class';
template: `
<ul class="uk-accordion " uk-accordion="{showfirst:true}" ><li class="uk-open">
<h3 class="uk-accordion-title" > {{title}} ({{results.length}}) </h3>
<!--ul class="uk-accordion " uk-accordion="{showfirst:true}" ><li class="uk-open">
<h3 class="uk-accordion-title" > {{title}} ({{results.length}}) </h3-->
<div class="uk-accordion-content uk-grid uk-width-1-1" >
<div *ngIf="showSearch " class="uk-width-1-2 ">
@ -22,6 +22,7 @@ import {Dates} from '../../../utils/string-utils.class';
<bulk-claim *ngIf="bulkMode" [results]="results" > </bulk-claim>
</div>
<div [ngClass]="showAccessRights && !showSearch?'uk-width-1-1':'uk-width-1-2'">
<h3 > {{title}} ({{results.length}}) </h3>
<!--div class="uk-clearfix"><button *ngIf=" !showSearch " (click)="showSearch = true;" class="uk-button-default uk-float-right uk-animation ">Add more <span uk-icon="icon: plus"></span></button></div-->
<div *ngIf="results.length == 0 " class="uk-alert uk-alert-primary">There are no research results</div>
@ -95,7 +96,7 @@ import {Dates} from '../../../utils/string-utils.class';
</modal-alert>
</div>
</div>
</li></ul>
<!--/li></ul-->
`

View File

@ -34,6 +34,7 @@ import {RouterHelper} from '../../utils/routerHelper.class';
<h1>{{pageTitle}}</h1>
</div>
<div >
<div class="uk-width-1-1 uk-margin uk-padding uk-panel uk-background-muted">
<search-form [(keyword)]=keyword (keywordChange)="keywordChanged($event)"></search-form>

View File

@ -26,11 +26,11 @@ import {OpenaireProperties} from '../../utils/properties/openaireProperties';
<div class="uk-width-1-1 uk-margin uk-padding uk-panel uk-background-muted">
<search-form [isDisabled]="disableForms" [(keyword)]="searchUtils.keyword" (keywordChange)="keywordChanged($event)"></search-form>
<div *ngIf="isFiltered()" class = " uk-text-center ">
<span *ngIf = "searchUtils.keyword.length > 0">Keywords: <span>{{searchUtils.keyword}}<a (click) = "clearKeywords() " [class]="(disableForms)?'uk-icon-button uk-disabled':'uk-icon-button'"><span class=" clickable " aria-hidden="true"><span uk-icon="icon: close"></span></span></a></span>
<span *ngIf = "searchUtils.keyword.length > 0">Keywords: <span [innerHtml]="searchUtils.keyword"></span><a (click) = "clearKeywords() " [class]="(disableForms)?'uk-icon-button uk-disabled':'uk-icon-button'"><span class=" clickable " aria-hidden="true"><span uk-icon="icon: close"></span></span></a>
</span>
<span *ngFor="let filter of filters " >
<span *ngIf = "filter.countSelectedValues > 0"> {{filter.title}}:
<span *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; " >{{value.name}}<a (click) = "removeFilter(value, filter) " [class]="(disableForms)?'uk-icon-button uk-disabled':'uk-icon-button'"><span class=" clickable" aria-hidden="true"><span uk-icon="icon: close"></span></span></a>
<span *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; " ><span [innerHtml]="value.name"></span><a (click) = "removeFilter(value, filter) " [class]="(disableForms)?'uk-icon-button uk-disabled':'uk-icon-button'"><span class=" clickable" aria-hidden="true"><span uk-icon="icon: close"></span></span></a>
<span *ngIf="!end">, </span>
</span>
</span>

View File

@ -150,3 +150,9 @@ max-height:265px;
.uk-link{
color: #292C3D !important;
}
.uk-breadcrumb > :last-child > * {
color:#cbcbcb !important;
}
.uk-breadcrumb .uk-active a{
color: #767779 !important;
}