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

[Trunk|Connect]: communities.component: First page of connect changed according to ui/ux designers - css added for this page [this is not the final commit]. 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@55222 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2019-04-08 12:17:39 +00:00
parent 7bc8d4514b
commit 7a3d001451
6 changed files with 439 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/app/communities/browseCommunity/browse-community.component.ts Normal file
View File

@ -0,0 +1,103 @@
import {Component, Input, Output, EventEmitter} from '@angular/core';
import {ViewChild, ChangeDetectionStrategy} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Location} from '@angular/common';
import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
import {ErrorCodes} from '../../openaireLibrary/utils/properties/errorCodes';
import {CommunityInfo} from '../../openaireLibrary/connect/community/communityInfo';
@Component({
selector: 'browse-community',
template: `
<!--community-card-height-->
<!--div [class]="(showDescription ? 'uk-height-medium' : 'uk-height-max-medium') + ' uk-card uk-card-default uk-padding-small'"-->
<span>
<div class="uk-card-media-top">
<a *ngIf="!isProduction()" [queryParams]="{communityId: community.communityId}" routerLinkActive="router-link-active" routerLink="/" target="_blank">
<div style="" class="uk-margin-auto communitiesImageBox">
<img *ngIf= "community.logoUrl != null && community.logoUrl != '' " src="{{community.logoUrl}}" alt="{{(community.title)?community.title:community.shortTitle}} logo" class="uk-height-small uk-responsive-height ">
<span *ngIf= "community.logoUrl == null || community.logoUrl == '' "class="uk-icon">
<svg width="50" height="50" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="2.5"> <circle fill="none" stroke="#000" stroke-width="1.1" cx="7.7" cy="8.6" r="3.5"></circle> <path fill="none" stroke="#000" stroke-width="1.1" d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path> <path fill="none" stroke="#000" stroke-width="1.1" d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path></svg>
</span>
</div>
</a>
<a *ngIf="isProduction()" href="{{'https://'+getProductionPrefix()+community.communityId+'.openaire.eu'}}" target="_blank">
<div style="" class="uk-margin-auto communitiesImageBox">
<img *ngIf= "community.logoUrl != null && community.logoUrl != '' " src="{{community.logoUrl}}" alt="{{(community.title)?community.title:community.shortTitle}} logo" class="uk-height-small uk-responsive-height ">
<span *ngIf= "community.logoUrl == null || community.logoUrl == '' "class="uk-icon">
<svg width="50" height="50" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="2.5"> <circle fill="none" stroke="#000" stroke-width="1.1" cx="7.7" cy="8.6" r="3.5"></circle> <path fill="none" stroke="#000" stroke-width="1.1" d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path> <path fill="none" stroke="#000" stroke-width="1.1" d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path></svg>
</span>
</div>
</a>
</div>
</span>
<div class="uk-text-center ">
<!--[class]="(isManager ? 'community-title-height ' : '') + -->
<p class="uk-text-small uk-text-bold uk-margin-small">
<a *ngIf="!isProduction()" [queryParams]="{communityId: community.communityId}" routerLinkActive="router-link-active" routerLink="/" target="_blank">
{{(community.title)?community.title:community.shortTitle}}
</a>
<a *ngIf="isProduction()" href="{{'https://'+getProductionPrefix()+community.communityId+'.openaire.eu'}}" target="_blank">
{{(community.title)?community.title:community.shortTitle}}
</a>
</p>
<!--[class]="(isManager ? 'community-description-height ' : '') + -->
<div class="uk-text-center">
<!--span *ngIf="community.status !='all'" uk-tooltip="title: Community is hidden to registered users. It is visible only to users that have privileges to manage community; delay: 100">
<span class="private-view-label uk-label label-grey " aria-expanded="false">Private view</span>
</span-->
<!--community-description-font -->
<!--p class="uk-text-small uk-margin-small" *ngIf="community.description != null && !isManager" >{{community.description}}</p>
<p class="uk-text-small uk-margin-small" *ngIf="community.description != null && isManager" >{{community.description.slice(0,thresholdDescription)}}<span *ngIf="community.description.length > thresholdDescription">...</span></p-->
<p class="uk-text-small uk-margin-small" *ngIf="community.description != null && showDescription" >{{community.description}}</p>
</div>
</div>
<!--uk-margin-small-bottom-->
<!--uk-position-bottom-->
<div *ngIf="isManager" class=" uk-margin-small-bottom">
<a [href]="'https://beta.admin.connect.openaire.eu/dashboard?communityId='+community.communityId"
class="uk-button uk-button-default uk-button-small portal-button" target="_blank">
<!--span uk-icon="">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="cog" ratio="0.8"><circle fill="none" stroke="#000" cx="9.997" cy="10" r="3.31"></circle><path fill="none" stroke="#000" d="M18.488,12.285 L16.205,16.237 C15.322,15.496 14.185,15.281 13.303,15.791 C12.428,16.289 12.047,17.373 12.246,18.5 L7.735,18.5 C7.938,17.374 7.553,16.299 6.684,15.791 C5.801,15.27 4.655,15.492 3.773,16.237 L1.5,12.285 C2.573,11.871 3.317,10.999 3.317,9.991 C3.305,8.98 2.573,8.121 1.5,7.716 L3.765,3.784 C4.645,4.516 5.794,4.738 6.687,4.232 C7.555,3.722 7.939,2.637 7.735,1.5 L12.263,1.5 C12.072,2.637 12.441,3.71 13.314,4.22 C14.206,4.73 15.343,4.516 16.225,3.794 L18.487,7.714 C17.404,8.117 16.661,8.988 16.67,10.009 C16.672,11.018 17.415,11.88 18.488,12.285 L18.488,12.285 Z"></path></svg>
</span-->
Manage
</a>
</div>
<!--/div-->
`
})
export class BrowseCommunityComponent {
@Input() public community: CommunityInfo = null;
@Input() public isManager: boolean = false;
@Input() public showDescription: boolean = true;
// cut title too
// check title length, if is manager, if is private and cut description accordingly
public thresholdDescription: number = 150;
properties:EnvProperties;
constructor ( private route: ActivatedRoute,
private _router: Router,
private location: Location) {}
public ngOnInit() {
this.route.data
.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
});
}
public ngOnDestroy() {}
isProduction():boolean{
return this.properties.environment!="development";
}
getProductionPrefix():string{
return (this.properties.environment =="beta")?"beta.":""
}
}

26
src/app/communities/browseCommunity/browse-community.module.ts Normal file
View File

@ -0,0 +1,26 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {BrowseCommunityComponent} from './browse-community.component';
import {FreeGuard} from '../../openaireLibrary/login/freeGuard.guard';
import {SearchFormModule} from '../../openaireLibrary/searchPages/searchUtils/searchForm.module';
@NgModule({
imports: [
CommonModule, FormsModule, RouterModule,
SearchFormModule
],
declarations: [
BrowseCommunityComponent
],
providers:[
FreeGuard
],
exports: [
BrowseCommunityComponent
]
})
export class BrowseCommunityModule { }

302
src/app/communities/communities.component.html
View File

@ -1,149 +1,134 @@
<div class="image-front-topbar uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
<div style=" min-height: calc(7.89999px + 60vh);"
class=" mainPageSearchForm uk-background-norepeat uk-background-cover uk-background-fixed uk-section uk-padding-remove-bottom" >
<!-- uk-height-viewport="offset-top: true;offset-bottom: 20"> -->
<div class="uk-position-cover" style="/*background-color: rgba(70, 68, 68, 0.24);*/"></div>
<div class="uk-position-relative uk-panel">
<div class="uk-container uk-container-small uk-section">
<h1 class="el-title uk-margin uk-heading-hero portal-color uk-margin-large-top">
Research Community Dashboard </h1>
<div class="el-content uk-margin"><h2 > Your view to open science</h2></div>
<!-- <p><a href="/" class="el-link uk-button uk-button-primary portal-button">Start here</a></p> -->
</div>
</div>
</div>
</div>
<!-- <div class="image-front-topbar uk-section-muted uk-section-overlap uk-light" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-slide-top&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
<div style=" background-color: #1e3040;" class=" mainPageSearchForm uk-background-norepeat uk-background-cover uk-background-top-center uk-background-fixed uk-section uk-section-large uk-padding-remove-bottom">
<div class="tm-header-placeholder uk-margin-remove-adjacent" style="height: 84px;"></div>
<div class="uk-grid-collapse uk-flex-middle uk-margin-remove-vertical uk-grid uk-grid-stack" uk-grid="">
<div class="uk-width-1-1@m uk-first-column">
<h5 class="uk-margin-large uk-text-center uk-h1 uk-scrollspy-inview uk-animation-slide-top" uk-scrollspy-class="" style="">
Research Community Dashboard
</h5>
<h1 class="uk-text-center uk-h2 uk-scrollspy-inview uk-animation-slide-top" uk-scrollspy-class="" style="">
Your view to open science
</h1>
</div>
</div>
</div>
</div> -->
<div class=" uk-section uk-section-small">
<div class="uk-container uk-container-small">
<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
<div class="uk-width-1-1@m uk-first-column">
<div id="page#8" class="uk-margin uk-text-center uk-child-width-1-1 uk-grid-match uk-child-width-1-1@s uk-child-width-1-3@m uk-child-width-1-3@l uk-grid-large uk-grid" uk-grid="">
<div class="uk-first-column">
<div class="el-item uk-card uk-card-hover uk-card-small uk-card-body">
<!-- <a routerLinkActive="uk-link" routerLink="/search/find" class="el-link uk-position-cover uk-position-z-index uk-margin-remove-adjacent"></a> -->
<!-- <span class="portal-color">
<svg width="50" height="50" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="2.5">
<circle fill="none" stroke="#EBB13E" stroke-width="1.1" cx="7.7" cy="8.6" r="3.5"></circle>
<path fill="none" stroke="#EBB13E" stroke-width="1.1" d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path>
<path fill="none" stroke="#EBB13E" stroke-width="1.1" d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path></svg>
</span> -->
<img class="" width="60" height="70" src="assets/researcher.svg" alt="">
<!-- <h3 class="el-title uk-margin uk-h3">
Are you a research community?
</h3>
<div class=" uk-margin-small-top uk-text-left">
All you need to do is to provide OpenAIRE with a ‘very limited’ set of metadata fields from your database and we will take it up from there.
</div>
<div class=" uk-margin-small-top uk-text-left" >
Learn how to participate and ensure that your information is picked up by OpenAIRE.
</div> -->
<h3 class="el-title uk-margin uk-h3">
Are you a researcher?
</h3>
<div class=" uk-margin-small-top uk-text-lead uk-text-left">
Research community dashboard
</div>
<div class=" uk-margin-small-top uk-text-left">
A virtual environment designed for your community to:
</div>
<div class=" uk-margin-top uk-text-left" >
<ul class="uk-list uk-list-divider">
<li>share all your research results</li>
<li>link all your research</li>
<li>gather all your research results in one place</li>
<li>monitor & report</li>
</ul>
</div>
</div>
<div *ngIf="loading" class="uk-margin-large">
<div class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert"><span class="loading-gif uk-align-center" ></span></div>
</div>
<div *ngIf="!loading" class="image-front-topbar uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
<div style=" min-height: calc(7.89999px + 60vh);"
class=" mainPageSearchForm uk-background-norepeat uk-background-cover uk-background-fixed uk-section uk-padding-remove-bottom" >
<div class="uk-position-cover" style=""></div>
<div class="uk-position-relative uk-panel">
<!-- <errorMessages [status]="[status]" [type]="'communities'"></errorMessages> -->
<!-- *ngIf="status != errorCodes.LOADING && subscriberOfCommunitiesStatus != errorCodes.LOADING" -->
<div
class="uk-container uk-section">
<div *ngIf="managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0">
<h3 class="uk-margin-top">My Communities</h3>
<div *ngIf="managerOfCommunities.length > 0">
<h5 class="uk-margin-remove-bottom">You are managing</h5>
<div class="uk-container">
<div class="uk-margin-remove-left uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center uk-grid-match" uk-grid>
<div *ngFor="let community of managerOfCommunities.slice(0,3); let i = index" class="uk-padding-small"><!-- uk-padding-remove-bottom"-->
<!-- <div class="community-card-height uk-card uk-card-default uk-padding-small"> -->
<div class="uk-height-max-medium uk-card uk-card-default uk-padding-small">
<browse-community [showDescription]=false [isManager]=true [community]="community"></browse-community>
</div>
</div>
<div class="">
<div class="el-item uk-card uk-card-hover uk-card-small uk-card-body">
<!-- <a class="el-link uk-position-cover uk-position-z-index uk-margin-remove-adjacent"></a> -->
<!-- <img class="" width="60" height="70" src="assets/ask-connect.svg" alt="What is it?"> -->
<!--span class=" portal-color uk-icon">
<svg width="70" height="70" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="cog" ratio="3.5">
<circle fill="none" cx="9.997" cy="10" r="3.31" stroke="#EBB13E"></circle>
<path fill="none" d="M18.488,12.285 L16.205,16.237 C15.322,15.496 14.185,15.281 13.303,15.791 C12.428,16.289 12.047,17.373 12.246,18.5 L7.735,18.5 C7.938,17.374 7.553,16.299 6.684,15.791 C5.801,15.27 4.655,15.492 3.773,16.237 L1.5,12.285 C2.573,11.871 3.317,10.999 3.317,9.991 C3.305,8.98 2.573,8.121 1.5,7.716 L3.765,3.784 C4.645,4.516 5.794,4.738 6.687,4.232 C7.555,3.722 7.939,2.637 7.735,1.5 L12.263,1.5 C12.072,2.637 12.441,3.71 13.314,4.22 C14.206,4.73 15.343,4.516 16.225,3.794 L18.487,7.714 C17.404,8.117 16.661,8.988 16.67,10.009 C16.672,11.018 17.415,11.88 18.488,12.285 L18.488,12.285 Z" stroke="#EBB13E"></path></svg></span> -->
<img class="" width="60" height="70" src="assets/manager.svg" alt="">
<h3 class="el-title uk-margin uk-h3">
Are you managing a research community?
</h3>
<div class=" uk-margin-small-top uk-text-lead uk-text-left">
Use dashboard to configure:
</div>
<!-- <div class=" uk-margin-small-top uk-text-left">
A virtual environment designed for your community to:
</div> -->
<div class=" uk-margin-top uk-text-left" >
<ul class="uk-list uk-list-divider">
<li>the community profile</li>
<li>the community content</li>
<li>statistics & charts</li>
<li>users links</li>
</ul>
</div>
</div>
</div>
<div class="">
<div class="el-item uk-card uk-card-hover uk-card-small uk-card-body">
<img class="" width="60" height="70" src="assets/ask-connect.svg" alt="Have more questions?">
<!-- <a routerLinkActive="uk-link" routerLink="/participate/claim" routerLink="/participate/claim" class="el-link uk-position-cover uk-position-z-index uk-margin-remove-adjacent"></a> -->
<h3 class="el-title uk-margin uk-h3">
Need help?
</h3>
<div class=" uk-margin-small-top uk-text-left">
<ul class="uk-list uk-list-divider">
<li><a href="https://www.openaire.eu/os-primers">Learn about open science policies and how to align</a></li>
<li><a href="https://www.openaire.eu/rdm-handbook">Learn more on how to manage your data in the open science era</a> </li>
<li><a href="https://www.openaire.eu/guides/">Find out how to use OpenAIRE to best serve your needs</a></li>
<li><a href="https://www.openaire.eu/webinars/">View our training material on a variety of related topics</a></li>
<li><a href="https://www.openaire.eu/contact-us">Contact us</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="managerOfCommunities.length > 3" class="uk-text-right uk-width-3-5">
<!-- createQueryParams() -->
<a [queryParams]="{status: quote('managing')}" routerLinkActive="router-link-active" routerLink="/search/find/communities">
<u>View all ></u>
</a>
</div>
</div>
</div>
<div *ngIf="subscriberOfCommunities.length > 0">
<h5 class="uk-margin-remove-bottom">You are subscribed to</h5>
<div class="uk-container">
<div class="uk-margin-remove-left uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center uk-grid-match" uk-grid>
<div *ngFor="let community of subscriberOfCommunities.slice(0,3); let i = index" class="uk-padding-small"><!-- uk-padding-remove-bottom"-->
<!-- <div class="community-card-height uk-card uk-card-default uk-padding-small"> -->
<div class="uk-height-max-medium uk-card uk-card-default uk-padding-small">
<browse-community [showDescription]="false" [community]="community"></browse-community>
</div>
</div>
</div>
</div>
<div *ngIf="subscriberOfCommunities.length > 3" class="uk-text-right uk-width-3-5">
<a [queryParams]="{status: quote('subscribed')}" routerLinkActive="router-link-active" routerLink="/search/find/communities">
<u>View all ></u>
</a>
</div>
</div>
</div>
<div *ngIf="managerOfCommunities.length == 0 && subscriberOfCommunities.length == 0">
<h3 class="uk-margin-remove-bottom uk-margin-large-top">Embrace Open Science with OpenAIRE Connect</h3>
<h5 class="uk-margin-remove-top">A plattform to manage your community profile and to share, access and link community research results</h5>
<div class="uk-width-1-2 uk-text-center uk-margin-large-top">
<p>Create and manage your research community page</p>
<div>
<a [class]="'uk-button portal-button uk-button-large' + (loading ? ' uk-disabled' : '')" (click)="subscribe()"> LEARN HOW</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="!loading" class="uk-margin-top">
<div class="">
<errorMessages [status]="[status]" [type]="'communities'"></errorMessages>
<div *ngIf= "communitiesResults != null && communitiesResults.length > 0" class="uk-section-muted ">
<div *ngIf="status != errorCodes.LOADING && subscriberOfCommunitiesStatus != errorCodes.LOADING"
class="uk-margin-bottom uk-margin-top">
<!-- <div class="uk-padding-remove"> -->
<div class="uk-container">
<h3>Search, share, link results of your research community</h3>
</div>
<div class="uk-container">
<h5 class=" uk-width-expand uk-margin-remove-bottom">Start by locating your community</h5>
<search-form class="uk-align-left" placeholderText="" link="/search/find/communities"></search-form>
</div>
<div *ngIf= "researchCommunities.length > 0" class="uk-container">
<h5 class="uk-width-expand">Browse Research Communities</h5>
<div class="uk-container uk-margin-top">
<div class="uk-margin-remove-left uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center uk-grid-match" uk-grid>
<div *ngFor="let community of researchCommunities.slice(0,5); let i = index" class="uk-padding-small"><!-- uk-padding-remove-bottom"-->
<!-- <div *ngIf="showCommunityByType(item, 'community')" class="uk-padding-small"> -->
<!-- <div class="uk-card uk-card-default uk-padding-small"> -->
<div class="uk-height-medium uk-card uk-card-default uk-padding-small">
<browse-community [community]="community"></browse-community>
</div>
</div>
<!-- </ng-container> -->
</div>
</div>
<div class="uk-text-right">
<a [queryParams]="{type: quote('community')}" routerLinkActive="router-link-active" routerLink="/search/find/communities">
<u>Show all Research Communities ></u>
</a>
</div>
</div>
<div *ngIf= "researchInitiatives.length > 0" class="uk-container portal-hr">
<h5 class="uk-width-expand">Browse Research Initiatives</h5>
<div class="uk-container uk-margin-top">
<div class="uk-margin-remove-left uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center uk-grid-match" uk-grid>
<div *ngFor="let community of researchInitiatives.slice(0,5); let i = index" class="uk-padding-small"><!-- uk-padding-remove-bottom"-->
<!-- <div *ngIf="showCommunityByType(item, 'community')" class="uk-padding-small"> -->
<!-- <div class="uk-card uk-card-default uk-padding-small"> -->
<div class="uk-height-medium uk-card uk-card-default uk-padding-small">
<browse-community [community]="community"></browse-community>
</div>
</div>
<!-- </ng-container> -->
</div>
</div>
<div class="uk-text-right">
<a [queryParams]="{type: quote('ri')}" routerLinkActive="router-link-active" routerLink="/search/find/communities">
<u>Show all Research Initiatives ></u>
</a>
</div>
</div>
<!-- </div> -->
</div>
</div>
</div>
<!-- <div *ngIf= "communitiesResults != null && communitiesResults.length > 0" class="uk-section-muted ">
<div class="uk-container ">
<div class="uk-grid portal-hr uk-margin-bottom uk-margin-top">
<h3 class=" uk-padding-remove-left uk-width-expand">Research Communities</h3>
@ -152,8 +137,8 @@
<option value="ri" >Research initiative</option>
<option value="community" >Research community</option>
</select>
</div>
<div class="uk-grid uk-margin-remove-top ">
</div>
<div class="uk-grid uk-margin-remove-top ">
<form class="uk-padding-remove-left ">
<input type="text" class="uk-input uk-width-xlarge" placeholder="Search for research communities" [(ngModel)]="keyword" name="keyword" >
<button *ngIf="!link" (click)="searchChanged()" type="submit" class=" uk-button portal-button">
@ -161,7 +146,7 @@
</button>
</form>
</div>
</div>
<div class="uk-container uk-margin-top ">
<div class="uk-child-width-1-3@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center uk-grid-match portal-hr " uk-grid >
<ng-container *ngFor="let item of communitiesToShow; let i = index">
@ -198,17 +183,6 @@
</h3>
</div>
<!--div *ngIf="item.title != null">
<h3 class="uk-card-title"><a [queryParams]="{communityId: item.communityId}" routerLinkActive="router-link-active" routerLink="/community">
{{item.title}}</a></h3>
</div>
<div *ngIf="item.title == null && item.shortTitle != null">
<h3 class="uk-card-title"><a [queryParams]="{communityId: item.communityId}" routerLinkActive="router-link-active" routerLink="/community">
{{item.shortTitle}}</a></h3>
</div-->
<span *ngIf="item.type =='ri'" class=" uk-label label-grey " aria-expanded="false">Research Initiative</span>
<span *ngIf="item.type !='ri'" class="uk-label label-grey " aria-expanded="false">Research Community</span>
<span *ngIf="item.status !='all'" uk-tooltip="title: Community is hidden to registered users. It is visible only to users that have privileges to manage community; delay: 100">
<span class="private-view-label uk-label label-grey " aria-expanded="false">Private view</span>
</span>
@ -222,7 +196,7 @@
</div>
</div>
</div>
</div> -->
<div class="uk-section-muted" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}">
<div class="uk-container uk-container-large">
@ -257,21 +231,7 @@
</p>
</div>
</div>
<!--div class="uk-width-expand@m uk-width-1-2@s uk-dark uk-grid-item-match connect">
<div class="uk-margin uk-panel uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
<h4 class="el-title uk-margin uk-h4">
Research community?
</h4>
<div class="el-content uk-margin">
Use a trusted partner to share, link, disseminate and monitor your research.
</div>
<p>
<a target="_blank" href="https://connect.openaire.eu" class="el-link uk-button uk-button-default">
OpenAIRE.CONNECT
</a>
</p>
</div>
</div-->
<div class="uk-width-expand@m uk-width-1-2@s uk-dark uk-grid-item-match monitor">
<div class="uk-margin uk-panel uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
<h4 class="el-title uk-margin uk-h4">

212
src/app/communities/communities.component.ts
View File

@ -1,22 +1,29 @@
import {Component, Input, Output, EventEmitter} from '@angular/core';
import {ViewChild, ChangeDetectionStrategy} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Location} from '@angular/common';
import {Title, Meta} from '@angular/platform-browser';
import {Component, Input, Output, EventEmitter} from '@angular/core';
import {ViewChild, ChangeDetectionStrategy} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Location} from '@angular/common';
import {Title, Meta} from '@angular/platform-browser';
import {Observable} from 'rxjs/Observable';
import {Observable} from 'rxjs/Observable';
import "rxjs/add/observable/zip";
import {ConnectHelper} from '../openaireLibrary/connect/connectHelper';
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
import {ErrorCodes} from '../openaireLibrary/utils/properties/errorCodes';
import {ConnectHelper} from '../openaireLibrary/connect/connectHelper';
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
import {ConfigurationService} from '../openaireLibrary/utils/configuration/configuration.service';
import {CommunitiesService} from '../openaireLibrary/connect/communities/communities.service';
import {SubscribeService} from '../openaireLibrary/utils/subscribe/subscribe.service';
import {CommunityInfo} from '../openaireLibrary/connect/community/communityInfo';
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
import {Session} from '../openaireLibrary/login/utils/helper.class';
import {StringUtils} from '../openaireLibrary/utils/string-utils.class';
import {ErrorCodes} from '../openaireLibrary/utils/properties/errorCodes';
import {ErrorMessagesComponent} from '../openaireLibrary/utils/errorMessages.component';
import {ConfigurationService} from '../openaireLibrary/utils/configuration/configuration.service';
import {CommunitiesService} from '../openaireLibrary/connect/communities/communities.service';
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
import {Session} from '../openaireLibrary/login/utils/helper.class';
@Component({
selector: 'communities',
templateUrl: 'communities.component.html',
@ -31,6 +38,18 @@ export class CommunitiesComponent {
public communitiesResults = null;
public communitiesToShow = null;
public researchCommunities = [];
public researchInitiatives = [];
public subscriberOfCommunities = [];
public managerOfCommunities = [];
// Message variables
public status: number;
public subscriberOfCommunitiesStatus: number;
public loading: boolean = true;
public errorCodes: ErrorCodes;
private errorMessages: ErrorMessagesComponent;
properties:EnvProperties;
public keyword:string="";
public type:string="all";
@ -42,48 +61,127 @@ export class CommunitiesComponent {
private _title: Title,
private _piwikService:PiwikService,
private _communitiesService:CommunitiesService,
private _subscribeService: SubscribeService,
private config: ConfigurationService) {
var description = "OpenAIRE - Connect, Community Dashboard, research community";
var title = "OpenAIRE - Connect";
var description = "OpenAIRE - Connect, Community Dashboard, research community";
var title = "OpenAIRE - Connect";
this._meta.updateTag({content:description},"name='description'");
this._meta.updateTag({content:description},"property='og:description'");
this._meta.updateTag({content:title},"property='og:title'");
this._title.setTitle(title);
this._meta.updateTag({content:description},"name='description'");
this._meta.updateTag({content:description},"property='og:description'");
this._meta.updateTag({content:title},"property='og:title'");
this._title.setTitle(title);
this.errorCodes = new ErrorCodes();
this.errorMessages = new ErrorMessagesComponent();
this.status = this.errorCodes.LOADING;
this.subscriberOfCommunitiesStatus = this.errorCodes.LOADING;
}
public ngOnInit() {
this.route.data
.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
var url = data.envSpecific.baseLink+this._router.url
this._meta.updateTag({content:url},"property='og:url'");
if(this.properties.enablePiwikTrack && (typeof document !== 'undefined')){
this.piwiksub = this._piwikService.trackView(this.properties, "OpenAIRE Connect", this.properties.piwikSiteId).subscribe();
}
this.getCommunities();
});
}
public getCommunities() {
this.loading = true;
this.status = this.errorCodes.LOADING;
this.subscriberOfCommunitiesStatus = this.errorCodes.LOADING;
this.researchCommunities = [];
this.researchInitiatives = [];
this.subscriberOfCommunities = [];
this.managerOfCommunities = [];
this._communitiesService.getCommunities(this.properties, this.properties.communitiesAPI).subscribe(
communitiesResults => {
//this.communitiesResults = communitiesResults;
//this.communitiesToShow = this.communitiesResults.slice();
//console.log(communitiesResults);
var mail = Session.getUserEmail();
communitiesResults.forEach((community, index) => {
let showCommunity: boolean = true;
let isManager: boolean = false;
let isSubscriber: boolean = false;
if(community['status'] == "hidden"){
showCommunity = false;
}else if(community['status'] == "manager"){
if(mail == null){ // no user
showCommunity = false;
}else if(Session.isCommunityCurator() || Session.isPortalAdministrator()){
isManager = true;
}else if(community.managers.indexOf(mail)!=-1){
isManager = true;
} else {
showCommunity = false;
}
}
if(showCommunity) {
if(community.type == "community"){
this.researchCommunities.push(community);
} else if(community.type == "ri") {
this.researchInitiatives.push(community);
}
if(isManager) {
this.managerOfCommunities.push(community);
}
}
this.status = this.errorCodes.DONE;
if(mail != null && showCommunity && !isManager){
this._subscribeService.isSubscribedToCommunity(community.communityId, mail, this.properties.adminToolsAPIURL).subscribe (
res => {
isSubscriber = res;
if(isSubscriber) {
this.subscriberOfCommunities.push(community);
}
this.subscriberOfCommunitiesStatus = this.errorCodes.DONE;
this.loading = false;
},
error => {
this.handleError("Error getting response if email: "+mail+" is subscribed to community with id: "+community.communityId, error, this.subscriberOfCommunitiesStatus);
this.loading = false;
});
} else {
this.subscriberOfCommunitiesStatus = this.errorCodes.DONE;
this.loading = false;
}
});
},
error => {
this.handleError("Error getting communities", error, status);
this.subscriberOfCommunitiesStatus = this.errorCodes.DONE;
this.loading = false;
}
);
}
public quote(param: string): string {
return StringUtils.quote(param);
}
public ngOnDestroy() {
if(this.piwiksub){
this.piwiksub.unsubscribe();
}
}
public ngOnInit() {
this.route.data
.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
var url = data.envSpecific.baseLink+this._router.url
this._meta.updateTag({content:url},"property='og:url'");
if(this.properties.enablePiwikTrack && (typeof document !== 'undefined')){
this.piwiksub = this._piwikService.trackView(this.properties, "OpenAIRE Connect", this.properties.piwikSiteId).subscribe();
}
this._communitiesService.getCommunities(this.properties, this.properties.communitiesAPI).subscribe(
communitiesResults => {
this.communitiesResults = communitiesResults;
this.communitiesToShow = this.communitiesResults.slice();
//console.log(communitiesResults);
},
error => {
this.handleError("Error getting communities", error);
}
);
});
}
public ngOnDestroy() {
if(this.piwiksub){
this.piwiksub.unsubscribe();
}
}
isProduction():boolean{
return this.properties.environment!="development";
}
getProductionPrefix():string{
return (this.properties.environment =="beta")?"beta.":""
@ -105,6 +203,7 @@ export class CommunitiesComponent {
return true;
}
existsIn(word, keyword):boolean{
if(word!= null && (keyword=="" || word.toLowerCase().indexOf(keyword.toLowerCase())!=-1)){
return true;
@ -132,7 +231,16 @@ export class CommunitiesComponent {
}
private handleError(message: string, error) {
console.error("Communities (component): "+message, error);
}
private handleError(message: string, error, status) {
var code = "";
if(!error.status) {
var error = error.json();
code = error.code;
} else {
code = error.status;
}
status = this.errorMessages.getErrorCode(code);
console.error("Communities (component): "+message, error);
}
}

6
src/app/communities/communities.module.ts
View File

@ -15,12 +15,16 @@ import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousR
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
import {ConfigurationService} from '../openaireLibrary/utils/configuration/configuration.service';
import {CommunitiesService} from '../openaireLibrary/connect/communities/communities.service';
import {ErrorMessagesModule} from '../openaireLibrary/utils/errorMessages.module';
import {SearchFormModule} from '../openaireLibrary/searchPages/searchUtils/searchForm.module';
import {BrowseCommunityModule} from './browseCommunity/browse-community.module';
@NgModule({
imports: [
CommonModule, FormsModule, RouterModule,
// CommunitiesRoutingModule,
SubscribeModule, ManageModule
SubscribeModule, ManageModule, ErrorMessagesModule,
SearchFormModule, BrowseCommunityModule
],
declarations: [
CommunitiesComponent

15
src/assets/connect-custom.css
View File

@ -23,7 +23,20 @@
.communitiesImageBox{
width:284px; height:109px;
/*width:284px; height:109px;*/
width:107px; height:57px;
}
.community-title-height {
height: 47px;
}
.community-description-height {
height: 50px;
}
.community-description-font {
font-size: 10px;
}
.community-card-height {
height: 230px;
}
.tm-toolbar .uk-subnav-line .custom-connect-li {
background:var(--portal-main-color) !important;