openaire-library/landingPages/landing-utils/relatedTo.component.ts

157 lines
5.5 KiB
TypeScript
Raw Permalink Normal View History

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {Subscriber} from 'rxjs';
import {properties} from 'src/environments/environment';
import {CommunityService} from '../../connect/community/community.service';
import {ConnectHelper} from '../../connect/connectHelper';
import {UserManagementService} from '../../services/user-management.service';
import {HelperFunctions} from "../../utils/HelperFunctions.class";
import {Context} from "../../utils/entities/resultLandingInfo";
import {OpenaireEntities} from "../../utils/properties/searchFields";
@Component({
selector: 'relatedTo, [relatedTo]',
template: `
<ng-container *ngIf="communities && communities.length > 0">
<div *ngIf="!mobileView" class="uk-margin-small-bottom uk-flex uk-flex-between">
<span *ngIf="viewAll && !lessBtn" class="clickable uk-h6 uk-flex uk-flex-middle" (click)="viewLessClick()">
<icon class="uk-margin-small-right" name="arrow_back" flex="true" ratio="1.2"></icon>
{{title}}
</span>
2023-01-13 14:57:26 +01:00
<span *ngIf="!viewAll || lessBtn" class="uk-text-emphasis uk-text-bolder">{{title}}</span>
<a *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;" class="view-more-less-link uk-link-text">View less</a>
<a *ngIf="communities && communities.length > threshold && !viewAll"
(click)="viewAllClick();" class="view-more-less-link uk-link-text">View all</a>
</div>
<div *ngFor="let community of communities.slice(0, viewAll?communities.length:threshold)" class="uk-text-truncate"
[class.uk-margin-small-bottom]="mobileView">
<!-- If there are any communities with dashboard -->
[Library & common-assets | new-theme]: Updates for redesign. 1. availableOn.component.ts: Updated class of title to "uk-text-light-grey" and added custom-external icon to links and updated accessright icons. 2. citation.class.ts: Added fileFormatOptions: Option[] to use it in input options. 3. citeThis.component.ts: Updated select inputs using "input" from InputComponent | Updated copy to clipboard button to link. 4. citeThis.module.ts: Import InputModule. 5. fos.component.ts: Updated class of title to "uk-text-light-grey". 6. fundedBy.component.ts: Updated class of title to "uk-text-light-grey" and updated links with uk-text-emphasis class. 7. landing-header.component.ts: Increase authorsLimit to 7 | Changed class of "under curation" to uk-text-primary (used to be custom class). 8. metrics.component.ts: Updated in clickOutside event. parsingFunctions.class.ts: Updated open, closed and unknown with icon names instead of paths to svgs (download accessright icons). 9. relatedTo.component.ts: Updated class of title to "uk-text-light-grey" and added custom-external for links. 10. resultLandingUtils.module.ts: Inport AlertModalModule (to open modal). 11. sdg.component.ts: Updated class of titlte to "uk-text-light-grey". 12. showIdentifiers.component.ts: Added view more functionality. 13. showPublisher.component.ts: Updated custon-external class. 14. resultLanding.module.ts: registerIcon link. 15. resultLanding.component.html: Updated css for result landing and commented annotations (b2note). 16. orcid-work.component.ts: Updated orcid action button for landing page. 17. orcid.module.ts: registerIcons orcid_add and orcid_bin. 18. customOptions.class.ts: [Bug fix] [By Kostis] registryOptions() was not returning properly httpHeaders. 19. showAuthors.component.ts: Updated css 20. icons.ts: Export svgs orcid_add, orcid_bin, link. 21. alert.ts: Removed margin from title. 22. result-preview.component.html: Title of results set to <h2> and uk-h6 and when links to uk-link-heading | accessRightIcon for hostedBy_collectedFrom. 23. result-preview.module.ts: Imported IconsModule. 24. landing-utils.css: Updates in landing css & css of landing-action-button & added backdrop filter missing rules. 25. utils.css: Updated class orcid-clipboard-wrapper and renamed to clipboad-wrapper | Update class .custom-external to set in content with code instead of name and updated not to underline it on hover 26. library.css: Added class .default-dropdown with max-width: 500px;
2022-04-16 09:47:30 +02:00
<a *ngIf="community.link" href="{{community.link}}" target="_blank" [attr.uk-tooltip]="community.labelContext" class="custom-external">
{{community.labelContext}}
</a>
<!-- Other communities (without dashboards) -->
<ng-container *ngIf="!community.link">
{{community.labelContext}}
<span *ngIf="community.labelCategory && (currentCommunity == community.idContext)">
<span uk-icon="icon: arrow-right"></span> {{community.labelCategory}}
</span>
<span *ngIf="community.labelConcept && (currentCommunity == community.idContext)">
: {{community.labelConcept}}
</span>
</ng-container>
</div>
</ng-container>
`
})
export class RelatedToComponent implements OnInit {
@Input() mobileView: boolean = false;
@Input() contexts: Context[];
@Input() viewAll: boolean = false;
@Output() viewAllClicked = new EventEmitter();
@Output() noCommunities = new EventEmitter();
public lessBtn: boolean = false;
public threshold: number = 4;
public communities: Context[] = [];
public currentCommunity = ConnectHelper.getCommunityFromDomain(properties.domain);
private subscriptions = [];
public title: string = "Related to "+OpenaireEntities.COMMUNITIES;
constructor(private communityService: CommunityService,
private userManagementService: UserManagementService) {
}
ngOnInit() {
2021-11-10 14:08:09 +01:00
this.contexts.sort(this.compare);
let index = 0;
this.contexts.forEach( context => {
if(context.idContext) {
this.subscriptions.push(
this.userManagementService.getUserInfo().subscribe( user => {
//- handling subscribe errors?
this.subscriptions.push(
this.communityService.getCommunityInfo(context.idContext).subscribe( community => {
if(community && !ConnectHelper.isPrivate(community,user) && (this.currentCommunity != context.idContext)) {
if(properties.environment == "beta") {
context.link = 'https://beta.' + context.idContext + '.openaire.eu';
} else {
context.link = 'https://' + context.idContext + '.openaire.eu';
}
}
for(let community of this.communities) {
if(community.link == context.link) {
index++;
if(index == this.contexts.length) {
this.communitiesInitialized();
}
return; // skips so that we don't get duplicate gateways
}
}
this.communities.push(context);
index++;
if(index == this.contexts.length) {
this.communitiesInitialized();
}
}, error => {
index++;
if(index == this.contexts.length) {
this.communitiesInitialized();
}
})
);
})
);
}
});
}
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
if(subscription instanceof Subscriber) {
subscription.unsubscribe();
}
});
}
public scroll() {
HelperFunctions.scroll();
}
2021-11-10 14:08:09 +01:00
public communitiesInitialized() {
if(this.communities.length == 0) {
this.noCommunities.emit(true);
}
this.communities.sort(this.compare);
}
2021-11-10 14:08:09 +01:00
public compare(a, b) {
if (a.link && !b.link) {
return -1;
} else if(!a.link && b.link) {
return 1;
} else {
if (a.labelContext < b.labelContext) {
return -1;
} else if (a.labelContext > b.labelContext) {
return 1;
}
}
return 0;
2021-11-10 14:08:09 +01:00
}
public viewAllClick() {
if(this.communities.length <= this.threshold*2) {
this.viewAll = true;
this.lessBtn = true;
} else {
this.viewAll = true;
this.viewAllClicked.emit('relatedTo');
}
}
public viewLessClick() {
this.viewAll = false;
this.viewAllClicked.emit("");
}
}