MaDgIK
/
connect
13
0
Fork 0
Code Issues Pull Requests Projects Releases 14 Wiki Activity

[Trunk | Connect]: affiliations.component: Component to show affiliations (used by community page, curators page, organizations page). 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@56029 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2019-06-07 13:03:33 +00:00
parent 1083de3202
commit 5267641363
9 changed files with 194 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/app/affiliations/affiliations.component.html Normal file
View File

@ -0,0 +1,95 @@
<ng-template #card let-organization="organization" let-fullView="fullView">
<div class="uk-card-media-top affiliation-logo uk-flex uk-flex-middle uk-flex-center uk-padding-small">
<img *ngIf= "organization.logo_url != null && organization.logo_url != '' "
src="{{organization.logo_url}}" alt="{{(organization.name)?organization.name:''}} logo" width="80" height="80">
<span *ngIf= "organization.logo_url == null || organization.logo_url == '' "class="uk-icon uk-padding-small">
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 20 20" icon="image" ratio="2.5"><circle cx="16.1" cy="6.1" r="1.1"></circle><rect fill="none" stroke="#000" x="0.5" y="2.5" width="19" height="15"></rect><polyline fill="none" stroke="#000" stroke-width="1.01" points="4,13 8,9 13,14"></polyline><polyline fill="none" stroke="#000" stroke-width="1.01" points="11,12 12.5,10.5 16,14"></polyline></svg>
</span>
</div>
<div *ngIf="organization.name && fullView" class="uk-card-body uk-padding-small">
<span class="uk-text-bold">{{organization.name.slice(0,100)}}</span><span *ngIf="organization.name.length > 100">...</span>
</div>
</ng-template>
<ng-container *ngIf="affiliations.length > 0">
<div *ngIf="fullView"
class="uk-child-width-1-5@l uk-child-width-1-3@m uk-child-width-1-2@s
uk-text-center uk-grid-match uk-grid-small uk-grid-margin uk-margin-remove"
uk-height-match="target: > div > .uk-card > .affiliation-content > .affiliation-logo"
uk-scrollspy="cls: uk-animation-fade; target: > div > .uk-card; repeat: false"
uk-grid>
<div *ngFor="let affiliation of affiliations">
<div class=" uk-card uk-card-default uk-padding-small">
<a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url" class="affiliation-content">
<ng-container *ngTemplateOutlet="card; context: { organization: affiliation, fullView: true}"></ng-container>
</a>
<span *ngIf="!affiliation.website_url" class="affiliation-content">
<ng-container *ngTemplateOutlet="card; context: { organization: affiliation, fullView: true}"></ng-container>
</span>
</div>
</div>
</div>
<!-- <div uk-slider="center: true">-->
<!-- <div class="uk-position-relative uk-slider-container uk-visible-toggle">-->
<!-- <ul class="uk-slider-items uk-child-width-1-3@s uk-child-width-1-5@m uk-grid" uk-height-match="target: > li > .uk-card">-->
<!-- <li *ngFor="let organization of organizations">-->
<!-- <div class=" uk-card uk-card-default uk-padding-small uk-flex uk-flex-middle uk-flex-center">-->
<!-- <a *ngIf="organization.website_url" target="_blank" [href]="organization.website_url" class="affiliation-content">-->
<!-- <ng-container *ngTemplateOutlet="card; context: { organization: organization}"></ng-container>-->
<!-- </a>-->
<!-- <span *ngIf="!organization.website_url" class="affiliation-content">-->
<!-- <ng-container *ngTemplateOutlet="card; context: { organization: organization}"></ng-container>-->
<!-- </span>-->
<!-- </div>-->
<!-- </li>-->
<!-- </ul>-->
<!-- <a class="uk-position-center-left uk-position-small uk-hidden-hover" uk-slidenav-previous uk-slider-item="previous"></a>-->
<!-- <a class="uk-position-center-right uk-position-small uk-hidden-hover" uk-slidenav-next uk-slider-item="next"></a>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div *ngIf="(!fullView && affiliations.length <= 2)" >-->
<!-- <div class="uk-grid-small" uk-grid uk-height-match="target: > .uk-card">-->
<!-- <ng-container *ngFor="let affiliation of affiliations" class="">-->
<!-- <div class="uk-card uk-card-small uk-card-default uk-flex uk-flex-middle uk-flex-center uk-margin-left"-->
<!-- [attr.uk-tooltip]="affiliation.name">-->
<!-- <a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url" class="affiliation-content">-->
<!-- <ng-container *ngTemplateOutlet="card; context: { organization: affiliation, fullView: false}"></ng-container>-->
<!-- </a>-->
<!-- <span *ngIf="!affiliation.website_url" class="affiliation-content">-->
<!-- <ng-container *ngTemplateOutlet="card; context: { organization: affiliation}"></ng-container>-->
<!-- </span>-->
<!-- </div>-->
<!-- </ng-container>-->
<!-- </div>-->
<!-- </div>-->
<!-- uk-slider="center: true"-->
<div *ngIf="(!fullView)" class="uk-position-relative uk-visible-toggle" tabindex="-1" uk-slider>
<ul class="uk-slider-items uk-grid-small" uk-height-match="target: > li > .uk-card" uk-grid>
<li *ngFor="let affiliation of affiliations" [class]="'uk-width-1-'+affiliationsInSlider">
<div class="uk-card uk-card-small uk-card-default uk-flex uk-flex-middle uk-flex-center"
[attr.uk-tooltip]="affiliation.name">
<a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url" class="affiliation-content">
<ng-container *ngTemplateOutlet="card; context: { organization: affiliation, fullView: false}"></ng-container>
</a>
<span *ngIf="!affiliation.website_url" class="affiliation-content">
<ng-container *ngTemplateOutlet="card; context: { organization: affiliation}"></ng-container>
</span>
</div>
</li>
</ul>
<a *ngIf="(affiliations.length > affiliationsInSlider)"
class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a *ngIf="(affiliations.length > affiliationsInSlider)"
class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
</ng-container>
<div *ngIf="affiliations.length == 0 && fullView" class="uk-animation-fade uk-alert uk-alert-primary" role="alert">
No affiliations available
</div>

53
src/app/affiliations/affiliations.component.ts Normal file
View File

@ -0,0 +1,53 @@
import {Component, Input} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Title, Meta} from '@angular/platform-browser';
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
import {AffiliationService} from "../openaireLibrary/connect/affiliations/affiliation.service";
import {Affiliation} from "../openaireLibrary/utils/entities/CuratorInfo";
import {ConnectHelper} from "../openaireLibrary/connect/connectHelper";
@Component({
selector: 'affiliations',
templateUrl: './affiliations.component.html'
})
export class AffiliationsComponent {
@Input() getAffiliationsFromAPI: boolean = false;
@Input() fullView: boolean = false;
@Input() affiliationsInSlider: number = 5;
@Input() affiliations: Affiliation[] = [];
communityId: string;
properties:EnvProperties;
constructor ( private route: ActivatedRoute, private _router: Router,
private _meta: Meta, private _title: Title,
private affiliationService: AffiliationService) {}
public ngOnInit() {
this.route.data
.subscribe((data: { envSpecific: EnvProperties }) => {
this.route.queryParams.subscribe(
communityId => {
this.communityId = communityId['communityId'];
if(!this.communityId){
this.communityId = ConnectHelper.getCommunityFromDomain(data.envSpecific.domain);
}
this.properties = data.envSpecific;
if(this.getAffiliationsFromAPI) {
console.info("onInit: before affiliations");
this.affiliationService.initAffiliations(this.properties, this.properties.communityAPI + this.communityId + "/organizations");
this.affiliationService.affiliations.subscribe(
affiliations => {
this.affiliations = affiliations;
},
error => {
console.error("Affiliations Component: Error getting affiliations for community with id: "+this.communityId, error);
}
);
}
});
});
}
}

25
src/app/affiliations/affiliations.module.ts Normal file
View File

@ -0,0 +1,25 @@
import { NgModule, ModuleWithProviders } from '@angular/core';
import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard';
import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
import {IsRouteEnabled} from '../openaireLibrary/error/isRouteEnabled.guard'
import {AffiliationsComponent} from './affiliations.component';
import {AffiliationService} from "../openaireLibrary/connect/affiliations/affiliation.service";
import {CommonModule} from "@angular/common";
@NgModule({
imports: [
CommonModule
],
declarations: [
AffiliationsComponent
],
providers:[FreeGuard,PreviousRouteRecorder, IsRouteEnabled, AffiliationService],
exports: [
AffiliationsComponent
]
})
export class AffiliationsModule{}

4
src/app/community/community.component.html
View File

@ -323,10 +323,10 @@
</div>
</div>
</div>
<div class="uk-section tm-middle uk-container uk-margin-small-top uk-padding-remove-top" id="">
<div class="uk-section tm-middle uk-container uk-margin-top uk-padding-remove-top" id="">
<div class="uk-container uk-margin-bottom uk-grid">
<div class="uk-width-expand uk-padding-remove">
Related Organizations....
<affiliations [fullView]="false" [getAffiliationsFromAPI]="true"></affiliations>
</div>
</div>

3
src/app/community/community.module.ts
View File

@ -22,13 +22,14 @@ import {SearchDataprovidersServiceModule} from "../openaireLibrary/connect/conte
import {SearchProjectsServiceModule} from '../openaireLibrary/connect/projects/searchProjectsService.module';
import {SearchResearchResultsServiceModule} from "../openaireLibrary/services/searchResearchResultsService.module";
import {SearchResultsModule} from "../openaireLibrary/searchPages/searchUtils/searchResults.module";
import {AffiliationsModule} from "../affiliations/affiliations.module";
@NgModule({
imports: [
CommonModule, FormsModule, RouterModule,
SubscribeModule, StatisticsModule, ManageModule, InviteModule,
SearchZenodoCommunitiesServiceModule, ZenodoCommunitiesServiceModule, SearchFormModule, SearchDataprovidersServiceModule, SearchProjectsServiceModule,
SearchResearchResultsServiceModule, SearchResultsModule
SearchResearchResultsServiceModule, SearchResultsModule, AffiliationsModule
],
declarations: [

47
src/app/curators/curators.component.html
View File

@ -8,12 +8,13 @@
<div class="uk-section uk-section-small">
<div class="uk-container uk-container-small">
<div *ngIf="curators.length > 0">
<h4 class="uk-margin-auto-top uk-h4">
<h4 class="uk-margin-top uk-h4">
<span class="uk-text-bold">Curators</span>
<span> ({{curators.length}})</span>
</h4>
<div *ngFor="let curator of curators let i=index;" class="uk-width-1-1 uk-card uk-card-default uk-card-body uk-margin-top">
<div [class]="(curator.affiliations.length <= 2)?'uk-grid-divider':''" uk-grid>
<div [class]="(curator.affiliations.length > 0 && curator.affiliations.length <= 2)?'uk-grid-divider':''" uk-grid>
<div class="uk-width-1-2 uk-first-column">
<div class="uk-flex uk-flex-middle">
<div>
@ -25,52 +26,22 @@
</div>
</div>
</div>
<div *ngIf="(curator.affiliations.length <= 2)" class="uk-width-1-2">
<div *ngIf="(curator.affiliations.length > 0 && curator.affiliations.length <= 2)" class="uk-width-1-2">
<div class="uk-flex uk-flex-middle">
<div *ngFor="let affiliation of curator.affiliations" class="uk-margin-left" title="{{affiliation.name}}">
<a href="{{affiliation.website_url}}" target="_blank">
<div class="uk-card-small uk-card-default uk-card-body">
<img class="uk-border-rounded" src="{{affiliation.logo_url}}" width="80" height="80" alt="{{affiliation.name}}">
</div>
</a>
</div>
<div class="uk-width-expand uk-margin-left uk-text-meta uk-flex-first">
Affiliations
</div>
<affiliations [fullView]="false" [affiliations]="curator.affiliations" [affiliationsInSlider]="2"></affiliations>
</div>
</div>
<div *ngIf="(curator.affiliations.length > 2)" class="uk-width-1-1 uk-margin-top">
<div class="uk-text-meta uk-margin-small-bottom">
Affiliations
</div>
<div *ngIf="(curator.affiliations.length > 5)" class="uk-position-relative uk-visible-toggle" tabindex="-1" uk-slider>
<ul class="uk-slider-items">
<li *ngFor="let affiliation of curator.affiliations" class="uk-width-1-5">
<div class="uk-panel">
<div class="uk-card-small uk-card-default uk-card-body">
<a href="{{affiliation.website_url}}" target="_blank">
<img class="uk-border-rounded" src="{{affiliation.logo_url}}" width="80" height="80" alt="{{affiliation.name}}">
</a>
</div>
</div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<div *ngIf="(curator.affiliations.length <= 5) "class="uk-position-relative uk-visible-toggle" tabindex="-1">
<ul class="uk-slider-items" uk-height-match="target: > li > div > .uk-card" uk-grid>
<li *ngFor="let affiliation of curator.affiliations" class="uk-width-1-5">
<div class="uk-panel">
<div class="uk-card uk-card-small uk-card-default uk-card-body uk-flex uk-flex-middle uk-flex-center">
<a href="{{affiliation.website_url}}" target="_blank">
<img class="uk-border-rounded" src="{{affiliation.logo_url}}" width="80" height="80" alt="{{affiliation.name}}">
</a>
</div>
</div>
</li>
</ul>
</div>
<affiliations [fullView]="false" [affiliations]="curator.affiliations"></affiliations>
</div>
<div class="uk-width-1-1 uk-first-column uk-margin-top uk-height-max-large uk-overflow-auto">
<div class="uk-text-meta uk-margin-small-bottom">

3
src/app/curators/curators.module.ts
View File

@ -6,11 +6,12 @@ import { RouterModule } from '@angular/router';
import {CuratorsComponent} from './curators.component';
import {CuratorService} from "../openaireLibrary/connect/curators/curator.service";
import {CuratorsRoutingModule} from "./curators-routing.module";
import {AffiliationsModule} from "../affiliations/affiliations.module";
@NgModule({
imports: [
CommonModule, FormsModule, RouterModule,
CuratorsRoutingModule
CuratorsRoutingModule, AffiliationsModule
],
declarations: [
CuratorsComponent

1
src/app/htmlPages/organizations/organizationsPage.component.ts
View File

@ -10,6 +10,7 @@ import{EnvProperties} from '../../openaireLibrary/utils/properties/env-propertie
<div class=" uk-section uk-margin-large-top tm-middle uk-container" id="tm-main">
<div class="uk-container uk-margin-bottom">
<html-page></html-page>
<affiliations [fullView]="true" [getAffiliationsFromAPI]="true"></affiliations>
</div>
</div>
`

3
src/app/htmlPages/organizations/organizationsPage.module.ts
View File

@ -8,10 +8,11 @@ import {OrganizationsPageComponent} from './organizationsPage.component';
import {OrganizationsPageRoutingModule} from './organizationsPage-routing.module';
import {HtmlPagesModule} from '../htmlPages.module';
import {AffiliationsModule} from "../../affiliations/affiliations.module";
@NgModule({
imports: [
OrganizationsPageRoutingModule, HtmlPagesModule
OrganizationsPageRoutingModule, HtmlPagesModule, AffiliationsModule
],
declarations: [
OrganizationsPageComponent