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

search page: add view more option for partners, projects, match styling for authors as well

This commit is contained in:
Alex Martzios 2023-10-02 12:18:29 +03:00
parent d10df32853
commit af95b395bd
2 changed files with 106 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
landingPages/landing-utils/entity-metadata.component.ts
View File

@ -1,4 +1,4 @@
import {Component, Input} from "@angular/core";
import {Component, Input, ViewChild} from "@angular/core";
import {EnvProperties} from "../../utils/properties/env-properties";
import {properties} from "../../../../environments/environment";
import {OpenaireEntities} from "../../utils/properties/searchFields";
@ -151,12 +151,32 @@ import {RouterHelper} from "../../utils/routerHelper.class";
<span>Thematic</span>
</ng-container>
<!-- Projects -->
<span uk-tooltip="Funded By" *ngIf="projects && projects.length > 0" [class.truncated]="projects.length > 3">
{{projectNames.slice(0,3).join(', ')}}
<span *ngIf="projects && projects.length > 0"
[attr.uk-tooltip]="projects.length > projectsLimit ? 'cls: uk-invisible' : 'pos: top; cls: uk-active'" title="Funded by">
{{showInline ? projectNames.join(', ') : projectNames.slice(0, projectsLimit).join(', ')}}
<span *ngIf="projects.length > projectsLimit">
<a *ngIf="!showInline" (click)="viewAllProjectsClick();" class="uk-background-muted custom-extra-entities">
+{{projects.length - projectsLimit | number}} projects
</a>
<a *ngIf="showInline && lessBtn" (click)="showInline = !showInline; lessBtn = false;"
class="uk-background-muted custom-extra-entities">
View less
</a>
</span>
</span>
<!-- Organizations -->
<span uk-tooltip="Partners" *ngIf="organizations && organizations.length > 0" [class.truncated]="organizations.length > 3">
{{organizationNames.slice(0, 3).join(', ')}}
<span *ngIf="organizations && organizations.length > 0"
[attr.uk-tooltip]="organizations.length > organizationsLimit ? 'cls: uk-invisible' : 'pos: top; cls: uk-active'" title="Partners">
{{showInline ? organizationNames.join(', ') : organizationNames.slice(0, organizationsLimit).join(', ')}}
<span *ngIf="organizations.length > organizationsLimit">
<a *ngIf="!showInline" (click)="viewAllPartnersClick();" class="uk-background-muted custom-extra-entities">
+{{organizations.length - organizationsLimit | number}} partners
</a>
<a *ngIf="showInline && lessBtn" (click)="showInline = !showInline; lessBtn = false;"
class="uk-background-muted custom-extra-entities">
View less
</a>
</span>
</span>
<!-- Subjects -->
<span uk-tooltip="Subjects" *ngIf="subjects && subjects.length > 0" [class.truncated]="subjects.length > 3">
@ -169,10 +189,37 @@ import {RouterHelper} from "../../utils/routerHelper.class";
<span>{{relationName}}</span>
</ng-container>
</div>
<modal-alert *ngIf="!isMobile" #partnersModal>
<div class="uk-text-small uk-text-emphasis uk-grid uk-grid-column-collapse uk-grid-row-small" uk-grid>
<ng-container *ngFor="let item of organizations; let i = index">
<div class="uk-margin-xsmall-right">
{{item.name}}{{i == organizations.length - 1 ? '' : ','}}
</div>
</ng-container>
</div>
</modal-alert>
<modal-alert *ngIf="!isMobile" #projectsModal>
<div class="uk-text-small uk-text-emphasis uk-grid uk-grid-column-collapse uk-grid-row-small" uk-grid>
<ng-container *ngFor="let item of projects; let i = index">
<div class="uk-margin-xsmall-right">
<span
*ngIf="item['funderShortname'] || item['funderName']">{{item['funderShortname'] ? item['funderShortname'] : item['funderName']}}</span>
<span *ngIf="!item['funderShortname'] && !item['funderName']">[no funder available]</span>
<span *ngIf="item['acronym'] || item['title']">| {{ item['acronym'] ? item['acronym'] : item['title']}}</span>
{{i == projects.length - 1 ? '' : ','}}
</div>
</ng-container>
</div>
</modal-alert>
`,
styleUrls: ['entity-metadata.component.less']
})
export class EntityMetadataComponent {
@Input() isMobile: boolean = false;
@Input() entityType: string;
@Input() types: string[];
@Input() year: string; // search result
@ -204,6 +251,14 @@ export class EntityMetadataComponent {
@Input() subjects: string[];
@Input() prevPath: string = "";
@ViewChild('partnersModal') partnersModal;
@ViewChild('projectsModal') projectsModal;
organizationsLimit: number = 5;
projectsLimit: number = 3;
showInline: boolean = false;
lessBtn: boolean = false;
properties: EnvProperties = properties;
public openaireEntities = OpenaireEntities;
public routerHelper: RouterHelper = new RouterHelper();
@ -260,4 +315,48 @@ export class EntityMetadataComponent {
}
return obj;
}
}
public viewAllPartnersClick() {
if(this.organizations.length <= this.organizationsLimit * 2) {
this.showInline = true;
this.lessBtn = true;
} else {
this.openPartnersModal();
}
}
public openPartnersModal() {
if (this.isMobile) {
this.partnersModal.okButton = false;
this.partnersModal.title = "Partners";
this.partnersModal.open();
} else {
this.partnersModal.cancelButton = false;
this.partnersModal.okButton = false;
this.partnersModal.alertTitle = "Partners";
this.partnersModal.open();
}
}
public viewAllProjectsClick() {
if(this.projects.length <= this.projectsLimit * 2) {
this.showInline = true;
this.lessBtn = true;
} else {
this.openProjectsModal();
}
}
public openProjectsModal() {
if (this.isMobile) {
this.projectsModal.okButton = false;
this.projectsModal.title = "Projects";
this.projectsModal.open();
} else {
this.projectsModal.cancelButton = false;
this.projectsModal.okButton = false;
this.projectsModal.alertTitle = "Projects";
this.projectsModal.open();
}
}
}

2
utils/authors/showAuthors.component.ts
View File

@ -109,7 +109,7 @@ import {properties} from "../../../../environments/environment";
+{{authors.length - authorsLimit | number}} more
</span>
<span *ngIf="showAll && authors && authors.length > authorsLimit && !viewAll">
<a (click)="viewAllClick();">
<a (click)="viewAllClick();" class="uk-background-muted custom-extra-entities">
+{{authors.length - authorsLimit | number}} Authors
</a>
</span>