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

redesign linking results (cards) to match the new style, fix a css selector for SDG page

This commit is contained in:
Alex Martzios 2023-07-04 10:16:08 +03:00
parent 1d31c7b234
commit 7e5317e920
8 changed files with 134 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
claims/claim-utils/claimResults.component.ts
View File

@ -6,13 +6,9 @@ declare var UIkit: any;
@Component({ @Component({
selector: 'claim-results', selector: 'claim-results',
template: ` template: `
<div *ngIf="results.length > 0 " class="uk-margin-top"> <div *ngIf="results.length > 0 " class="uk-margin-top">
<div *ngFor=" let entity of results " [class]="(isSelected(entity))?'uk-block-muted':''" class=" uk-card uk-card-default uk-card-body uk-margin-bottom"> <div *ngFor="let entity of results" class="uk-card">
<div> <div class="uk-padding-small">
<div class="uk-text-small ">
{{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}}
</div>
<div class="uk-grid"> <div class="uk-grid">
<div class="uk-width-expand uk-margin-right"> <div class="uk-width-expand uk-margin-right">
<claim-title [entity]="entity" [showIcon]="false"></claim-title> <claim-title [entity]="entity" [showIcon]="false"></claim-title>
@ -20,20 +16,19 @@ declare var UIkit: any;
<claim-project-metadata [entity]="entity"></claim-project-metadata> <claim-project-metadata [entity]="entity"></claim-project-metadata>
</div> </div>
<div class="uk-margin-auto-vertical uk-padding-remove-left uk-margin-small-left uk-margin-small-right" [title]="(this.selectedResults.length>=basketLimit)?'Basket reached the size limit':''"> <div class="uk-margin-auto-vertical uk-padding-remove-left uk-margin-small-left uk-margin-small-right" [title]="(this.selectedResults.length>=basketLimit)?'Basket reached the size limit':''">
<button class="linking-add-button" [class.uk-disabled]="(this.selectedResults.length>=basketLimit)" *ngIf="!isSelected(entity)" <button class="linking-add-button uk-icon-button-small" [class.uk-disabled]="(this.selectedResults.length>=basketLimit)" *ngIf="!isSelected(entity)"
(click)="add(entity)"> (click)="add(entity)">
<icon name="add" [flex]="true"></icon> <icon name="add" [flex]="true"></icon>
</button> </button>
<button *ngIf="isSelected(entity)" class="linking-selected-button" (click)="remove(entity)"> <button *ngIf="isSelected(entity)" class="linking-selected-button uk-icon-button-small" (click)="remove(entity)">
<icon name="check" [flex]="true"></icon> <icon name="check" [flex]="true"></icon>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>`, </div>
`
}) })
export class ClaimResultsComponent { export class ClaimResultsComponent {
@Input() results: ClaimEntity[]; @Input() results: ClaimEntity[];
@ -41,6 +36,9 @@ export class ClaimResultsComponent {
@Input() localStoragePrefix: string = ""; @Input() localStoragePrefix: string = "";
@Input() basketLimit; @Input() basketLimit;
ngOnInit() {
}
public isSelected(item: ClaimEntity) { public isSelected(item: ClaimEntity) {
return !!this.selectedResults.find(result => item.id === result.id); return !!this.selectedResults.find(result => item.id === result.id);
} }

1
claims/claim-utils/service/searchDatacite.service.ts
View File

@ -50,7 +50,6 @@ export class SearchDataciteService {
static parse(response): ClaimEntity[] { static parse(response): ClaimEntity[] {
const results: ClaimEntity[] = []; const results: ClaimEntity[] = [];
console.log(response);
for (let i = 0; i < response.length; i++) { for (let i = 0; i < response.length; i++) {
const item = response[i]; const item = response[i];
const entity: ClaimEntity = new ClaimEntity(); const entity: ClaimEntity = new ClaimEntity();

11
claims/linking/selected/ClaimEntityMetadata.component.less Normal file
View File

@ -0,0 +1,11 @@
@import (reference) "~src/assets/openaire-theme/less/_import-variables";
.claim-entity-metadata {
& > *:not(:last-child):not(.other-separator)::after {
content: "\2022";
font-weight: normal;
margin-left: @global-xsmall-margin;
margin-right: @global-xsmall-margin;
}
}

22
claims/linking/selected/ClaimEntityProjectMetadata.component.ts
View File

@ -4,18 +4,28 @@ import {ClaimEntity} from '../../claim-utils/claimHelper.class';
@Component({ @Component({
selector: 'claim-project-metadata', selector: 'claim-project-metadata',
template: ` template: `
<div *ngIf="entity.type == 'project' && entity.project" class="uk-text-small uk-flex uk-flex-wrap" [style.grid-gap]="shortVersion?'10px':'20px'"> <ng-container *ngIf="entity.type == 'project' && entity.project">
<div *ngIf="!shortVersion" class="claim-entity-metadata uk-flex-inline uk-flex-wrap uk-text-xsmall uk-text-emphasis"
[class.uk-margin-xsmall-top]="!shortVersion">
<span class="uk-text-capitalize">
{{entity.type}}
</span>
<span *ngIf="entity.project.startDate || entity.project.endDate">
{{(entity.project.startDate) ? entity.project.startDate : 'Unknown'}}{{'-' + ((entity.project.endDate) ? entity.project.endDate : 'Unknown')}}
</span>
</div>
<div class="uk-text-small uk-flex uk-flex-wrap" [style.grid-gap]="shortVersion?'10px':'20px'"
[class.uk-margin-small-top]="!shortVersion">
<div *ngIf="entity.project.funderName"> <div *ngIf="entity.project.funderName">
<span class="uk-text-meta">Funder: </span>{{entity.project.funderName}} <span class="uk-text-meta">Funder: </span>{{entity.project.funderName}}
</div> </div>
<div *ngIf="entity.project.code"> <div *ngIf="entity.project.code">
<span class="uk-text-meta">GrandID: </span>{{entity.project.code}} <span class="uk-text-meta">Project Code: </span>{{entity.project.code}}
</div>
<div *ngIf=" !shortVersion && (entity.project.startDate || entity.project.endDate)">
<span class="uk-text-meta">Duration: </span>{{(entity.project.startDate) ? entity.project.startDate : 'Unknown'}}{{'-' + ((entity.project.endDate) ? entity.project.endDate : 'Unknown')}}
</div> </div>
</div> </div>
` </ng-container>
`,
styleUrls: ['ClaimEntityMetadata.component.less']
}) })

38
claims/linking/selected/ClaimEntityResultMetadata.component.ts
View File

@ -4,29 +4,37 @@ import {ClaimEntity} from '../../claim-utils/claimHelper.class';
@Component({ @Component({
selector: 'claim-result-metadata', selector: 'claim-result-metadata',
template: ` template: `
<div *ngIf="entity.result" class="uk-text-small"> <div *ngIf="entity.result">
<div *ngIf="entity.result.authors && entity.result.authors.length >0 " class="uk-margin-small-bottom"> <!-- display all existing data similar to entity-metadata -->
<span class="uk-text-meta">Authors: </span>{{sliceArray(entity.result.authors)}} <div *ngIf="!shortVersion" class="claim-entity-metadata uk-flex-inline uk-flex-wrap uk-text-xsmall uk-text-emphasis uk-margin-xsmall-top">
</div> <span class="uk-text-capitalize uk-text-italic">
<div *ngIf="!shortVersion && entity.result.editors&& entity.result.editors.length > 0" class="uk-margin-small-bottom"> {{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}}
<span class="uk-text-meta">Editors: </span>{{sliceArray(entity.result.editors)}}
</div>
<div *ngIf="!shortVersion" class="uk-flex uk-flex-wrap" style="grid-gap: 20px;">
<span *ngIf="entity.result.publisher!=null">
<span class="uk-text-meta uk-margin-small-bottom">Publisher: </span>{{entity.result.publisher}}
</span> </span>
<span *ngIf="entity.result.journal!=null"> <span *ngIf="entity.result.publisher!=null">
<span class="uk-text-meta uk-margin-small-bottom">Journal: </span>{{entity.result.journal}} {{entity.result.publisher}}
</span> </span>
<span *ngIf="entity.result.date"> <span *ngIf="entity.result.date">
<span class="uk-text-meta uk-margin-small-bottom">Published: </span>
<span [class]="(getProjectDurationMessage(entity)?'uk-text-warning':'')">{{entity.result.date}}</span> <span [class]="(getProjectDurationMessage(entity)?'uk-text-warning':'')">{{entity.result.date}}</span>
</span> </span>
<div [class]="(getProjectDurationMessage(entity)?'uk-text-warning':'')">{{getProjectDurationMessage(entity)}} <span *ngIf="entity.result.journal!=null">
{{entity.result.journal}}
</span>
<div *ngIf="entity.result.editors && entity.result.editors.length > 0">
{{sliceArray(entity.result.editors)}}
</div> </div>
</div> </div>
<div *ngIf="entity.result.authors && entity.result.authors.length > 0" class="uk-flex uk-flex-wrap uk-text-small uk-text-emphasis uk-text-italic"
[class.uk-margin-small-top]="!shortVersion">
{{sliceArray(entity.result.authors)}}
</div> </div>
` <div class="uk-text-small uk-margin-top">
<span *ngIf="getProjectDurationMessage(entity)" [class]="(getProjectDurationMessage(entity)?'uk-text-warning':'')">
{{getProjectDurationMessage(entity)}}
</span>
</div>
</div>
`,
styleUrls: ['ClaimEntityMetadata.component.less']
}) })

50
claims/linking/selected/ClaimEntityTitle.component.ts
View File

@ -1,30 +1,35 @@
import {Component, Input} from '@angular/core'; import {Component, Input} from '@angular/core';
import {ClaimEntity} from '../../claim-utils/claimHelper.class'; import {ClaimEntity} from '../../claim-utils/claimHelper.class';
import {StringUtils} from "../../../utils/string-utils.class";
@Component({ @Component({
selector: 'claim-title', selector: 'claim-title',
template: template: `
`
<div class="uk-grid uk-flex uk-flex-middle"> <div class="uk-grid uk-flex uk-flex-middle">
<span *ngIf="showIcon" class="uk-flex"> <span *ngIf="showIcon" class="uk-flex">
<span *ngIf=" entity.result" class="material-icons uk-text-small uk-text-meta" >insert_drive_file <span *ngIf="entity.result" class="material-icons uk-text-small uk-text-meta">
insert_drive_file
</span> </span>
<span *ngIf=" entity.project" <span *ngIf="entity.project" class="material-icons uk-text-small uk-text-meta">
class="material-icons uk-text-small uk-text-meta">assignment_turned_in assignment_turned_in
</span> </span>
<span *ngIf="entity.type=='community'" style="margin-right: 2px;" <span *ngIf="entity.type=='community'" class="material-icons uk-text-small uk-text-meta" style="margin-right: 2px;">
class="material-icons uk-text-small uk-text-meta">people people
</span></span> </span>
<div class="uk-width-expand " style="word-break: break-word;" [class.uk-h6]="!shortVersion" [class.uk-text-bold]="shortVersion" [class.uk-text-truncate]="shortVersion" [class.uk-margin-bottom]="!shortVersion" [class.uk-padding-remove-left]="showIcon"> </span>
<div class="uk-width-expand multi-line-ellipsis lines-3" style="word-break: break-word;"
[class.uk-padding-remove-left]="showIcon" [class.uk-text-truncate]="shortVersion">
<div class="uk-margin-remove uk-text-break uk-inline-block"
[class.uk-h6]="!shortVersion" [class.uk-text-bold]="shortVersion">
<a *ngIf="entity.result && entity.result.url" target="_blank" [href]="entity.result.url" <a *ngIf="entity.result && entity.result.url" target="_blank" [href]="entity.result.url"
class="uk-link uk-link-heading">{{entity.title ? sliceString(entity.title) : '[No title available]'}}</a> class="uk-link uk-text-decoration-none uk-width-expand">
<span {{entity.title ? sliceString(entity.title) : '[No title available]'}}
*ngIf="(entity.result && !entity.result.url)">{{entity.title ? sliceString(entity.title) : '[No title available]'}}</span> </a>
<span *ngIf="(entity.result && !entity.result.url)">
{{entity.title ? sliceString(entity.title) : '[No title available]'}}
</span>
<span *ngIf="entity.type=='project' && entity.project"> <span *ngIf="entity.type=='project' && entity.project">
<a *ngIf="entity.project && entity.project.url" target="_blank" [href]="entity.project.url" <a *ngIf="entity.project && entity.project.url" target="_blank" [href]="entity.project.url"
class="uk-text-link"> class="uk-link uk-text-decoration-none uk-width-expand">
<span *ngIf="!shortVersion"> <span *ngIf="!shortVersion">
{{(entity.project.acronym ? '[' + entity.project.acronym + '] ' : '') + entity.title}} {{(entity.project.acronym ? '[' + entity.project.acronym + '] ' : '') + entity.title}}
</span> </span>
@ -32,8 +37,7 @@ import {StringUtils} from "../../../utils/string-utils.class";
{{(entity.project.acronym ? sliceString(entity.project.acronym):sliceString(entity.title))}} {{(entity.project.acronym ? sliceString(entity.project.acronym):sliceString(entity.title))}}
</span> </span>
</a> </a>
<span <span *ngIf="(entity.project && !entity.project.url)">
*ngIf="(entity.project && !entity.project.url)">
<span *ngIf="!shortVersion"> <span *ngIf="!shortVersion">
{{(entity.project.acronym ? '[' + entity.project.acronym + '] ' : '') + entity.title}} {{(entity.project.acronym ? '[' + entity.project.acronym + '] ' : '') + entity.title}}
</span> </span>
@ -41,15 +45,16 @@ import {StringUtils} from "../../../utils/string-utils.class";
{{(entity.project.acronym ? sliceString(entity.project.acronym):sliceString(entity.title))}} {{(entity.project.acronym ? sliceString(entity.project.acronym):sliceString(entity.title))}}
</span> </span>
</span> </span>
</span> </span>
<span *ngIf="entity.type=='community' && entity.context"> <span *ngIf="entity.type=='community' && entity.context">
<span *ngIf=" entity.context.community != entity.context.concept.label"> <span *ngIf=" entity.context.community != entity.context.concept.label">
{{entity.context.community }} > {{entity.context.category}} > {{entity.context.community }} > {{entity.context.category}} >
</span> </span>
<span> {{entity.context.concept.label}}</span> <span>
{{entity.context.concept.label}}
</span> </span>
</span>
</div>
</div> </div>
</div> </div>
` `
@ -57,8 +62,6 @@ import {StringUtils} from "../../../utils/string-utils.class";
}) })
export class ClaimEntityTitleComponent { export class ClaimEntityTitleComponent {
@Input() entity: ClaimEntity; @Input() entity: ClaimEntity;
@Input() slice:boolean = false; @Input() slice:boolean = false;
@Input() sliceSize:number = 45; @Input() sliceSize:number = 45;
@ -66,9 +69,8 @@ export class ClaimEntityTitleComponent {
@Input() showIcon: boolean = false; @Input() showIcon: boolean = false;
ngOnInit() { ngOnInit() {
} }
sliceString(mystr:string): string { sliceString(mystr:string): string {
if(this.slice){ if(this.slice){
// return StringUtils.sliceString(mystr,this.sliceSize); // return StringUtils.sliceString(mystr,this.sliceSize);

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

@ -12,8 +12,8 @@
<div class=" uk-margin uk-animation-toggle"> <div class=" uk-margin uk-animation-toggle">
<span class="uk-h6 "> SOURCES ({{sources.length + (inlineEntity ? 1 : 0) | number}}) <span class="uk-h6 "> SOURCES ({{sources.length + (inlineEntity ? 1 : 0) | number}})
</span> </span>
<a *ngIf="!inlineEntity" class="uk-float-right" (click)="showOptions.showSource() "> <span <a *ngIf="!inlineEntity" class="uk-float-right uk-text-small" (click)="showOptions.showSource() "> <span
uk-icon="pencil"></span>Edit uk-icon="pencil" class="uk-margin-xsmall-right"></span>Edit
sources</a> sources</a>
</div> </div>
<ul *ngIf="inlineEntity" class="uk-list uk-animation-fade uk-list-divider"> <ul *ngIf="inlineEntity" class="uk-list uk-animation-fade uk-list-divider">
@ -51,10 +51,10 @@
<ul *ngIf="!inlineEntity && sources.length > 0 " class="uk-list uk-animation-fade uk-list-divider"> <ul *ngIf="!inlineEntity && sources.length > 0 " class="uk-list uk-animation-fade uk-list-divider">
<li *ngFor=" let entity of sources "> <li *ngFor=" let entity of sources ">
<div class="uk-grid uk-text-small uk-margin-top"> <div class="uk-grid uk-text-small uk-margin-top">
<div class="uk-text-muted uk-width-1-2 uk-flex uk-flex-middle"> <!-- <div class="uk-text-muted uk-width-1-2 uk-flex uk-flex-middle">
<span class="material-icons uk-text-small uk-text-meta">insert_drive_file</span> <span class="material-icons uk-text-small uk-text-meta">insert_drive_file</span>
{{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}} {{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}}
</div> </div> -->
<div *ngIf="entity.errorMessages.length > 0" <div *ngIf="entity.errorMessages.length > 0"
class="uk-text-danger uk-width-1-2"> Link couldn't be saved class="uk-text-danger uk-width-1-2"> Link couldn't be saved
</div> </div>
@ -157,8 +157,8 @@
<span class=" uk-h6 "> LINK TO ({{results.length | number}})</span> <span class=" uk-h6 "> LINK TO ({{results.length | number}})</span>
<a class="uk-float-right" (click)="showOptions.showLinkTo()"> <span <a class="uk-float-right uk-text-small" (click)="showOptions.showLinkTo()"> <span
uk-icon="pencil"></span>Edit uk-icon="pencil" class="uk-margin-xsmall-right"></span>Edit
entities</a> entities</a>
</div> </div>
<div *ngIf="results.length == 0"> <div *ngIf="results.length == 0">
@ -174,7 +174,7 @@
<li *ngFor=" let entity of results " <li *ngFor=" let entity of results "
style="z-index: 0 !important;"> style="z-index: 0 !important;">
<div class="uk-grid uk-text-small uk-margin-top"> <div class="uk-grid uk-text-small uk-margin-top">
<div class="uk-text-muted uk-width-1-2 uk-flex uk-flex-middle"> <!-- <div class="uk-text-muted uk-width-1-2 uk-flex uk-flex-middle">
<span *ngIf="entity.result" class="material-icons uk-text-small uk-text-meta">insert_drive_file <span *ngIf="entity.result" class="material-icons uk-text-small uk-text-meta">insert_drive_file
</span> </span>
<span *ngIf="entity.project" <span *ngIf="entity.project"
@ -184,7 +184,7 @@
class="material-icons uk-text-small uk-text-meta">people class="material-icons uk-text-small uk-text-meta">people
</span> </span>
{{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}} {{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}}
</div> </div> -->
<div *ngIf="entity.errorMessages.length > 0" <div *ngIf="entity.errorMessages.length > 0"
class="uk-text-danger uk-width-1-2"> Link couldn't be saved class="uk-text-danger uk-width-1-2"> Link couldn't be saved
</div> </div>

2
sdg/sdg.component.less
View File

@ -3,7 +3,7 @@
@sdgs: #E6233D, #DF9F00, #19A220, #D70023, #FF0B00, #00BFE8, #FFC300, #B10240, #FF5D00, @sdgs: #E6233D, #DF9F00, #19A220, #D70023, #FF0B00, #00BFE8, #FFC300, #B10240, #FF5D00,
#F50D86, #FF8A00, #CA8A03, #2B772B, #0098DF, #00B91C, #0069A2, #1C336A; #F50D86, #FF8A00, #CA8A03, #2B772B, #0098DF, #00B91C, #0069A2, #1C336A;
custom-sdg-dot:after { .custom-sdg-dot:after {
content: ""; content: "";
background-image: url("~src/assets/common-assets/sdg/sdg-dot-img.svg"); background-image: url("~src/assets/common-assets/sdg/sdg-dot-img.svg");
display: inline-block; display: inline-block;