From 7e5317e920340db31fff4eca37497b5ab37e50c7 Mon Sep 17 00:00:00 2001 From: Alex Martzios Date: Tue, 4 Jul 2023 10:16:08 +0300 Subject: [PATCH] redesign linking results (cards) to match the new style, fix a css selector for SDG page --- claims/claim-utils/claimResults.component.ts | 22 ++-- .../service/searchDatacite.service.ts | 1 - .../ClaimEntityMetadata.component.less | 11 ++ .../ClaimEntityProjectMetadata.component.ts | 34 ++++-- .../ClaimEntityResultMetadata.component.ts | 44 ++++--- .../selected/ClaimEntityTitle.component.ts | 110 +++++++++--------- .../selected/metadataPreview.component.html | 16 +-- sdg/sdg.component.less | 2 +- 8 files changed, 134 insertions(+), 106 deletions(-) create mode 100644 claims/linking/selected/ClaimEntityMetadata.component.less diff --git a/claims/claim-utils/claimResults.component.ts b/claims/claim-utils/claimResults.component.ts index 3b6177e2..815dabf9 100644 --- a/claims/claim-utils/claimResults.component.ts +++ b/claims/claim-utils/claimResults.component.ts @@ -6,13 +6,9 @@ declare var UIkit: any; @Component({ selector: 'claim-results', template: ` -
-
-
-
- {{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}} -
+
+
@@ -20,27 +16,29 @@ declare var UIkit: any;
- -
-
-
`, - +
+ ` }) export class ClaimResultsComponent { @Input() results: ClaimEntity[]; @Input() selectedResults: ClaimEntity[]; @Input() localStoragePrefix: string = ""; @Input() basketLimit; - + + ngOnInit() { + } + public isSelected(item: ClaimEntity) { return !!this.selectedResults.find(result => item.id === result.id); } diff --git a/claims/claim-utils/service/searchDatacite.service.ts b/claims/claim-utils/service/searchDatacite.service.ts index 52854ed5..4361462f 100644 --- a/claims/claim-utils/service/searchDatacite.service.ts +++ b/claims/claim-utils/service/searchDatacite.service.ts @@ -50,7 +50,6 @@ export class SearchDataciteService { static parse(response): ClaimEntity[] { const results: ClaimEntity[] = []; - console.log(response); for (let i = 0; i < response.length; i++) { const item = response[i]; const entity: ClaimEntity = new ClaimEntity(); diff --git a/claims/linking/selected/ClaimEntityMetadata.component.less b/claims/linking/selected/ClaimEntityMetadata.component.less new file mode 100644 index 00000000..33e65cd1 --- /dev/null +++ b/claims/linking/selected/ClaimEntityMetadata.component.less @@ -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; + } +} diff --git a/claims/linking/selected/ClaimEntityProjectMetadata.component.ts b/claims/linking/selected/ClaimEntityProjectMetadata.component.ts index fa83b344..0b90acc6 100644 --- a/claims/linking/selected/ClaimEntityProjectMetadata.component.ts +++ b/claims/linking/selected/ClaimEntityProjectMetadata.component.ts @@ -4,18 +4,28 @@ import {ClaimEntity} from '../../claim-utils/claimHelper.class'; @Component({ selector: 'claim-project-metadata', template: ` -
-
- Funder: {{entity.project.funderName}} -
-
- GrandID: {{entity.project.code}} -
-
- Duration: {{(entity.project.startDate) ? entity.project.startDate : 'Unknown'}}{{'-' + ((entity.project.endDate) ? entity.project.endDate : 'Unknown')}} -
-
- ` + +
+ + {{entity.type}} + + + {{(entity.project.startDate) ? entity.project.startDate : 'Unknown'}}{{'-' + ((entity.project.endDate) ? entity.project.endDate : 'Unknown')}} + +
+
+
+ Funder: {{entity.project.funderName}} +
+
+ Project Code: {{entity.project.code}} +
+
+ + `, + styleUrls: ['ClaimEntityMetadata.component.less'] }) diff --git a/claims/linking/selected/ClaimEntityResultMetadata.component.ts b/claims/linking/selected/ClaimEntityResultMetadata.component.ts index c74bb953..d4db19f4 100644 --- a/claims/linking/selected/ClaimEntityResultMetadata.component.ts +++ b/claims/linking/selected/ClaimEntityResultMetadata.component.ts @@ -4,29 +4,37 @@ import {ClaimEntity} from '../../claim-utils/claimHelper.class'; @Component({ selector: 'claim-result-metadata', template: ` -
-
- Authors: {{sliceArray(entity.result.authors)}} -
-
- Editors: {{sliceArray(entity.result.editors)}} -
-
- - Publisher: {{entity.result.publisher}} +
+ +
+ + {{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}} + + + {{entity.result.publisher}} - - Journal: {{entity.result.journal}} - - - Published: + {{entity.result.date}} -
{{getProjectDurationMessage(entity)}} -
+ + {{entity.result.journal}} + +
+ {{sliceArray(entity.result.editors)}} +
+
+
+ {{sliceArray(entity.result.authors)}} +
+
+ + {{getProjectDurationMessage(entity)}} +
- ` + `, + styleUrls: ['ClaimEntityMetadata.component.less'] }) diff --git a/claims/linking/selected/ClaimEntityTitle.component.ts b/claims/linking/selected/ClaimEntityTitle.component.ts index 76fd338d..12231e53 100644 --- a/claims/linking/selected/ClaimEntityTitle.component.ts +++ b/claims/linking/selected/ClaimEntityTitle.component.ts @@ -1,64 +1,67 @@ import {Component, Input} from '@angular/core'; import {ClaimEntity} from '../../claim-utils/claimHelper.class'; -import {StringUtils} from "../../../utils/string-utils.class"; @Component({ selector: 'claim-title', - template: - ` -
- - insert_drive_file - - assignment_turned_in - - people - -
- - {{entity.title ? sliceString(entity.title) : '[No title available]'}} - {{entity.title ? sliceString(entity.title) : '[No title available]'}} - - - - {{(entity.project.acronym ? '[' + entity.project.acronym + '] ' : '') + entity.title}} - - - {{(entity.project.acronym ? sliceString(entity.project.acronym):sliceString(entity.title))}} - + template: ` +
+ + + insert_drive_file + + + assignment_turned_in + + + people + + +
+
+ + {{entity.title ? sliceString(entity.title) : '[No title available]'}} - - - {{(entity.project.acronym ? '[' + entity.project.acronym + '] ' : '') + entity.title}} - - - {{(entity.project.acronym ? sliceString(entity.project.acronym):sliceString(entity.title))}} - - - - - - - - {{entity.context.community }} > {{entity.context.category}} > - - {{entity.context.concept.label}} - + + {{entity.title ? sliceString(entity.title) : '[No title available]'}} + + + + + {{(entity.project.acronym ? '[' + entity.project.acronym + '] ' : '') + entity.title}} + + + {{(entity.project.acronym ? sliceString(entity.project.acronym):sliceString(entity.title))}} + + + + + {{(entity.project.acronym ? '[' + entity.project.acronym + '] ' : '') + entity.title}} + + + {{(entity.project.acronym ? sliceString(entity.project.acronym):sliceString(entity.title))}} + + + + + + {{entity.context.community }} > {{entity.context.category}} > + + + {{entity.context.concept.label}} + + +
-
+
` }) export class ClaimEntityTitleComponent { - - @Input() entity: ClaimEntity; @Input() slice:boolean = false; @Input() sliceSize:number = 45; @@ -66,14 +69,13 @@ export class ClaimEntityTitleComponent { @Input() showIcon: boolean = false; ngOnInit() { - - } + sliceString(mystr:string): string { - if(this.slice){ + if(this.slice){ // return StringUtils.sliceString(mystr,this.sliceSize); - } - return mystr; + } + return mystr; } } diff --git a/claims/linking/selected/metadataPreview.component.html b/claims/linking/selected/metadataPreview.component.html index f5b5221f..2a8f38c3 100644 --- a/claims/linking/selected/metadataPreview.component.html +++ b/claims/linking/selected/metadataPreview.component.html @@ -12,8 +12,8 @@
SOURCES ({{sources.length + (inlineEntity ? 1 : 0) | number}}) - Edit + Edit sources
    @@ -51,10 +51,10 @@
    • -
      +
      Link couldn't be saved
      @@ -157,8 +157,8 @@ LINK TO ({{results.length | number}}) - Edit + Edit entities
      @@ -174,7 +174,7 @@
    • -
      +
      Link couldn't be saved
      diff --git a/sdg/sdg.component.less b/sdg/sdg.component.less index d24ff52d..56f50806 100644 --- a/sdg/sdg.component.less +++ b/sdg/sdg.component.less @@ -3,7 +3,7 @@ @sdgs: #E6233D, #DF9F00, #19A220, #D70023, #FF0B00, #00BFE8, #FFC300, #B10240, #FF5D00, #F50D86, #FF8A00, #CA8A03, #2B772B, #0098DF, #00B91C, #0069A2, #1C336A; -custom-sdg-dot:after { +.custom-sdg-dot:after { content: ""; background-image: url("~src/assets/common-assets/sdg/sdg-dot-img.svg"); display: inline-block;