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

[Trunk|Connect]: 

1. browse-community.component: In connect first page: 
	Add tooltip to show description in 'my communities' section and for 'private' tag.
	Add modal when a community is clicked.
	Use component for button 'manage'.
2. communities.component: In connect first page: fix 'how to' link | show appropriate error messages.
3. assets/connect-custom.css: Remove unecessary custom classes for connect first page.


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@55248 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2019-04-09 18:48:03 +00:00
parent b2c8a41570
commit 9170447523
5 changed files with 94 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/app/communities/browseCommunity/browse-community.component.ts
View File

@ -12,34 +12,29 @@ import {CommunityInfo} from '../../openaireLibrary/co
selector: 'browse-community', selector: 'browse-community',
template: ` template: `
<!--community-card-height--> <!--community-card-height-->
<!--div [class]="(showDescription ? 'uk-height-medium' : 'uk-height-max-medium') + ' uk-card uk-card-default uk-padding-small'"--> <div [class]="(showDescription ? 'uk-height-medium' : 'uk-height-max-medium') + ' uk-card uk-card-default uk-padding-small'"
[attr.uk-tooltip]="(!showDescription && community.description ? ('title: '+ community.description + (community.status != 'all' ? '<hr> '+hiddenMessage : '')) : 'cls: uk-invisible')">
<span> <span>
<div class="uk-card-media-top"> <div class="uk-card-media-top">
<a *ngIf="!isProduction()" [queryParams]="{communityId: community.communityId}" routerLinkActive="router-link-active" routerLink="/" target="_blank"> <a (click)="confirmModalOpen()">
<div style="" class="uk-margin-auto communitiesImageBox"> <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 "> <!--class="uk-card-badge portal-card-badge uk-width-1-2 uk-position-top-left uk-text-small uk-text-center"-->
<span *ngIf= "community.logoUrl == null || community.logoUrl == '' "class="uk-icon"> <div *ngIf="community.status !='all'" class="uk-card-badge portal-card-badge uk-width-1-2 uk-position-top-left uk-text-small uk-text-center"
<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> [attr.uk-tooltip]="showDescription || !community.description ? 'title: ' + hiddenMessage : 'cls: uk-invisible'">
</span> Private view
</div> </div>
</a> <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 uk-padding-small">
<a *ngIf="isProduction()" href="{{'https://'+getProductionPrefix()+community.communityId+'.openaire.eu'}}" target="_blank"> <span *ngIf= "community.logoUrl == null || community.logoUrl == '' "class="uk-icon uk-padding-small">
<div style="" class="uk-margin-auto communitiesImageBox"> <svg width="50" height="37" 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>
<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> </span>
</div> </div>
</a> </a>
</div> </div>
</span> </span>
<div class="uk-text-center "> <div class="uk-text-center">
<!--[class]="(isManager ? 'community-title-height ' : '') + --> <!--[class]="(isManager ? 'community-title-height ' : '') + -->
<p class="uk-text-small uk-text-bold uk-margin-small"> <p class="uk-text-small uk-text-bold uk-margin-small community-title">
<a *ngIf="!isProduction()" [queryParams]="{communityId: community.communityId}" routerLinkActive="router-link-active" routerLink="/" target="_blank"> <a (click)="confirmModalOpen()">
{{(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}} {{(community.title)?community.title:community.shortTitle}}
</a> </a>
</p> </p>
@ -55,18 +50,19 @@ import {CommunityInfo} from '../../openaireLibrary/co
<p class="uk-text-small uk-margin-small" *ngIf="community.description != null && showDescription" >{{community.description}}</p> <p class="uk-text-small uk-margin-small" *ngIf="community.description != null && showDescription" >{{community.description}}</p>
</div> </div>
</div> </div>
<!--uk-margin-small-bottom--> <!--uk-margin-small-bottom-->
<!--uk-position-bottom--> <!--uk-position-bottom-->
<div *ngIf="isManager" class=" uk-margin-small-bottom"> <div *ngIf="isManager" class=" uk-margin-small ">
<a [href]="'https://beta.admin.connect.openaire.eu/dashboard?communityId='+community.communityId" <manage [communityId]="community.communityId"></manage>
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>
<!--/div--> </div>
<modal-alert #AlertModal (alertOutput)="goToCommunityPage($event)">
<div class="uk-text-center">
The profile will be presented in a new tab.<br>
Are you sure that you want to proceed?
</div>
</modal-alert>
` `
}) })
@ -74,14 +70,16 @@ export class BrowseCommunityComponent {
@Input() public community: CommunityInfo = null; @Input() public community: CommunityInfo = null;
@Input() public isManager: boolean = false; @Input() public isManager: boolean = false;
@Input() public showDescription: boolean = true; @Input() public showDescription: boolean = true;
@ViewChild('AlertModal') modal;
public hiddenMessage: string = "Community is hidden to registered users. It is visible only to users that have privileges to manage community; delay: 100";
// cut title too // cut title too
// check title length, if is manager, if is private and cut description accordingly // check title length, if is manager, if is private and cut description accordingly
public thresholdDescription: number = 150; public thresholdDescription: number = 150;
properties:EnvProperties; properties:EnvProperties;
constructor ( private route: ActivatedRoute, constructor ( private route: ActivatedRoute,
private _router: Router, private router: Router,
private location: Location) {} private location: Location) {}
@ -100,4 +98,26 @@ export class BrowseCommunityComponent {
getProductionPrefix():string{ getProductionPrefix():string{
return (this.properties.environment =="beta")?"beta.":"" return (this.properties.environment =="beta")?"beta.":""
} }
public confirmModalOpen() {
this.modal.cancelButton = true;
this.modal.okButton = true;
this.modal.alertTitle = 'You have selected ' + this.community.title;
this.modal.alertMessage = false;
this.modal.okButtonLeft = false;
this.modal.okButtonText = 'Yes';
this.modal.cancelButtonText = 'No';
this.modal.open();
}
public goToCommunityPage(data: any) {
let url = '';
if(this.isProduction()) {
url = 'https://'+ this.getProductionPrefix() + this.community.communityId +'.openaire.eu';
} else {
url = this.router.createUrlTree(['/'], {
queryParams: { 'communityId': this.community.communityId} }).toString();
}
window.open(url, '_blank');
}
} }

5
src/app/communities/browseCommunity/browse-community.module.ts
View File

@ -8,10 +8,13 @@ import {BrowseCommunityComponent} from './browse-community.component';
import {FreeGuard} from '../../openaireLibrary/login/freeGuard.guard'; import {FreeGuard} from '../../openaireLibrary/login/freeGuard.guard';
import {SearchFormModule} from '../../openaireLibrary/searchPages/searchUtils/searchForm.module'; import {SearchFormModule} from '../../openaireLibrary/searchPages/searchUtils/searchForm.module';
import {ManageModule} from '../../openaireLibrary/utils/manage/manage.module';
import {AlertModalModule} from "../../openaireLibrary/utils/modal/alertModal.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, FormsModule, RouterModule, CommonModule, FormsModule, RouterModule,
SearchFormModule SearchFormModule, ManageModule, AlertModalModule
], ],
declarations: [ declarations: [
BrowseCommunityComponent BrowseCommunityComponent

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

@ -6,41 +6,38 @@
class=" mainPageSearchForm uk-background-norepeat uk-background-cover uk-background-fixed uk-section uk-padding-remove-bottom" > 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-cover" style=""></div>
<div class="uk-position-relative uk-panel"> <div class="uk-position-relative uk-panel">
<!-- <errorMessages [status]="[status]" [type]="'communities'"></errorMessages> --> <div class="uk-container uk-section">
<!-- *ngIf="status != errorCodes.LOADING && subscriberOfCommunitiesStatus != errorCodes.LOADING" -->
<div
class="uk-container uk-section">
<div *ngIf="managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0"> <div *ngIf="managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0">
<h3 class="uk-margin-top">My Communities</h3> <h3 class="uk-margin-top">My Communities</h3>
<div *ngIf="managerOfCommunities.length > 0"> <div *ngIf="managerOfCommunities.length > 0">
<h5 class="uk-margin-remove-bottom">You are managing</h5> <h5 class="uk-margin-remove-bottom">You are managing</h5>
<div class="uk-container"> <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 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 uk-height-match=".community-title">
<div *ngFor="let community of managerOfCommunities.slice(0,3); let i = index" class="uk-padding-small"><!-- uk-padding-remove-bottom"--> <ng-container *ngFor="let community of managerOfCommunities.slice(0,3); let i = index">
<!-- <div class="community-card-height uk-card uk-card-default uk-padding-small"> --> <browse-community class="uk-padding-small" [showDescription]=false [isManager]=true [community]="community"></browse-community>
<div class="uk-height-max-medium uk-card uk-card-default uk-padding-small"> </ng-container>
<browse-community [showDescription]=false [isManager]=true [community]="community"></browse-community>
</div>
</div>
</div> </div>
</div> </div>
<div *ngIf="managerOfCommunities.length > 3" class="uk-text-right uk-width-3-5"> <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"> <a [queryParams]="{status: quote('managing')}" routerLinkActive="router-link-active" routerLink="/search/find/communities">
<u>View all ></u> <u>View all ></u>
</a> </a>
</div> </div>
</div> </div>
<div class="uk-container uk-margin uk-margin-small-left uk-width-4-5">
<div *ngIf="subscriberErrorMessage" class="uk-animation-fade uk-alert uk-alert-warning" role="alert">
{{subscriberErrorMessage}}
</div>
</div>
<div *ngIf="subscriberOfCommunities.length > 0"> <div *ngIf="subscriberOfCommunities.length > 0">
<h5 class="uk-margin-remove-bottom">You are subscribed to</h5> <h5 class="uk-margin-remove-bottom uk-margin-small-top">You are subscribed to</h5>
<div class="uk-container"> <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 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 uk-grid uk-height-match=".community-title">
<div *ngFor="let community of subscriberOfCommunities.slice(0,3); let i = index" class="uk-padding-small"><!-- uk-padding-remove-bottom"--> <ng-container *ngFor="let community of subscriberOfCommunities.slice(0,3); let i = index">
<!-- <div class="community-card-height uk-card uk-card-default uk-padding-small"> --> <browse-community class="uk-padding-small" [showDescription]="false" [community]="community"></browse-community>
<div class="uk-height-max-medium uk-card uk-card-default uk-padding-small"> </ng-container>
<browse-community [showDescription]="false" [community]="community"></browse-community>
</div>
</div>
</div> </div>
</div> </div>
<div *ngIf="subscriberOfCommunities.length > 3" class="uk-text-right uk-width-3-5"> <div *ngIf="subscriberOfCommunities.length > 3" class="uk-text-right uk-width-3-5">
@ -58,7 +55,7 @@
<div class="uk-width-1-2 uk-text-center uk-margin-large-top"> <div class="uk-width-1-2 uk-text-center uk-margin-large-top">
<p>Create and manage your research community page</p> <p>Create and manage your research community page</p>
<div> <div>
<a [class]="'uk-button portal-button uk-button-large' + (loading ? ' uk-disabled' : '')" (click)="subscribe()"> LEARN HOW</a> <a class="uk-button portal-button uk-button-large" [queryParams]="" routerLinkActive="router-link-active" routerLink="/how-to-create-community"> LEARN HOW</a>
</div> </div>
</div> </div>
</div> </div>
@ -69,11 +66,7 @@
<div *ngIf="!loading" class="uk-margin-top"> <div *ngIf="!loading" class="uk-margin-top">
<div class=""> <div class="">
<errorMessages [status]="[status]" [type]="'communities'"></errorMessages> <div class="uk-margin-bottom uk-margin-top">
<div *ngIf="status != errorCodes.LOADING && subscriberOfCommunitiesStatus != errorCodes.LOADING"
class="uk-margin-bottom uk-margin-top">
<!-- <div class="uk-padding-remove"> -->
<div class="uk-container"> <div class="uk-container">
<h3>Search, share, link results of your research community</h3> <h3>Search, share, link results of your research community</h3>
</div> </div>
@ -82,18 +75,17 @@
<search-form class="uk-align-left" placeholderText="" link="/search/find/communities"></search-form> <search-form class="uk-align-left" placeholderText="" link="/search/find/communities"></search-form>
</div> </div>
<div class="uk-container">
<errorMessages [status]="[status]" [type]="'communities'"></errorMessages>
</div>
<div *ngIf= "researchCommunities.length > 0" class="uk-container"> <div *ngIf= "researchCommunities.length > 0" class="uk-container">
<h5 class="uk-width-expand">Browse Research Communities</h5> <h5 class="uk-width-expand">Browse Research Communities</h5>
<div class="uk-container uk-margin-top"> <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 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 uk-grid uk-height-match=".community-title">
<div *ngFor="let community of researchCommunities.slice(0,5); let i = index" class="uk-padding-small"><!-- uk-padding-remove-bottom"--> <ng-container *ngFor="let community of researchCommunities.slice(0,5); let i = index">
<!-- <div *ngIf="showCommunityByType(item, 'community')" class="uk-padding-small"> --> <browse-community class="uk-padding-small" [community]="community"></browse-community>
<!-- <div class="uk-card uk-card-default uk-padding-small"> --> </ng-container>
<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> </div>
<div class="uk-text-right"> <div class="uk-text-right">
@ -106,15 +98,10 @@
<div *ngIf= "researchInitiatives.length > 0" class="uk-container portal-hr"> <div *ngIf= "researchInitiatives.length > 0" class="uk-container portal-hr">
<h5 class="uk-width-expand">Browse Research Initiatives</h5> <h5 class="uk-width-expand">Browse Research Initiatives</h5>
<div class="uk-container uk-margin-top"> <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 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 uk-grid uk-height-match=".community-title">
<div *ngFor="let community of researchInitiatives.slice(0,5); let i = index" class="uk-padding-small"><!-- uk-padding-remove-bottom"--> <ng-container *ngFor="let community of researchInitiatives.slice(0,5); let i = index"><!-- uk-padding-remove-bottom"-->
<!-- <div *ngIf="showCommunityByType(item, 'community')" class="uk-padding-small"> --> <browse-community class="uk-padding-small" [community]="community"></browse-community>
<!-- <div class="uk-card uk-card-default uk-padding-small"> --> </ng-container>
<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> </div>
<div class="uk-text-right"> <div class="uk-text-right">
@ -123,81 +110,10 @@
</a> </a>
</div> </div>
</div> </div>
<!-- </div> -->
</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>
<select [(ngModel)]="type" (ngModelChange)="searchChanged()" class=" uk-padding-remove-left uk-select uk-width-small " name="select_funder" >
<option value="all" >Type</option>
<option value="ri" >Research initiative</option>
<option value="community" >Research community</option>
</select>
</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">
<span class="uk-icon" ><svg width="30" height="30" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1.5"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg></span>
</button>
</form>
</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">
<div *ngIf="showCommunity(item)" class="uk-padding-small">
<div class="uk-card uk-card-default uk-margin-bottom uk-padding-small">
<span >
<div class="uk-card-media-top">
<a *ngIf="!isProduction()" [queryParams]="{communityId: item.communityId}" routerLinkActive="router-link-active" routerLink="/" target="_blank">
<div style="" class="uk-margin-auto communitiesImageBox uk-background-muted">
<img *ngIf= "item.logoUrl != null && item.logoUrl != '' " src="{{item.logoUrl}}" alt="{{(item.title)?item.title:item.shortTitle}} logo" class="uk-height-small uk-responsive-height ">
<span *ngIf= "item.logoUrl == null || item.logoUrl == '' " class="uk-icon uk-margin-top">
<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()+item.communityId+'.openaire.eu'}}" target="_blank">
<div style="" class="uk-margin-auto communitiesImageBox">
<img *ngIf= "item.logoUrl != null && item.logoUrl != '' " src="{{item.logoUrl}}" alt="{{(item.title)?item.title:item.shortTitle}} logo" class="uk-height-small uk-responsive-height ">
<span *ngIf= "item.logoUrl == null || item.logoUrl == '' " class="uk-icon uk-margin-top">
<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-padding-small uk-text-left">
<div>
<h3 class="">
<a *ngIf="!isProduction()" [queryParams]="{communityId: item.communityId}" routerLinkActive="router-link-active" routerLink="/" target="_blank">
{{(item.title)?item.title:item.shortTitle}}</a>
<a *ngIf="isProduction()" href="{{'https://'+getProductionPrefix()+item.communityId+'.openaire.eu'}}" target="_blank">
{{(item.title)?item.title:item.shortTitle}}</a>
</h3>
</div>
<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>
<p *ngIf="item.description != null" >{{item.description}}</p>
<subscribe [communityId]="item.communityId"></subscribe>
<manage [communityId]="item.communityId"></manage>
</div>
</div>
</div>
</ng-container>
</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-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"> <div class="uk-container uk-container-large">
<div uk-grid="" class="uk-grid uk-margin-large-top uk-margin-large-bottom"> <div uk-grid="" class="uk-grid uk-margin-large-top uk-margin-large-bottom">

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

@ -45,8 +45,8 @@ export class CommunitiesComponent {
// Message variables // Message variables
public status: number; public status: number;
public subscriberOfCommunitiesStatus: number;
public loading: boolean = true; public loading: boolean = true;
public subscriberErrorMessage: string = "";
public errorCodes: ErrorCodes; public errorCodes: ErrorCodes;
private errorMessages: ErrorMessagesComponent; private errorMessages: ErrorMessagesComponent;
@ -75,7 +75,6 @@ export class CommunitiesComponent {
this.errorCodes = new ErrorCodes(); this.errorCodes = new ErrorCodes();
this.errorMessages = new ErrorMessagesComponent(); this.errorMessages = new ErrorMessagesComponent();
this.status = this.errorCodes.LOADING; this.status = this.errorCodes.LOADING;
this.subscriberOfCommunitiesStatus = this.errorCodes.LOADING;
} }
public ngOnInit() { public ngOnInit() {
@ -95,7 +94,7 @@ export class CommunitiesComponent {
public getCommunities() { public getCommunities() {
this.loading = true; this.loading = true;
this.status = this.errorCodes.LOADING; this.status = this.errorCodes.LOADING;
this.subscriberOfCommunitiesStatus = this.errorCodes.LOADING; this.subscriberErrorMessage = "";
this.researchCommunities = []; this.researchCommunities = [];
this.researchInitiatives = []; this.researchInitiatives = [];
@ -141,7 +140,7 @@ export class CommunitiesComponent {
this.status = this.errorCodes.DONE; this.status = this.errorCodes.DONE;
if(mail != null && showCommunity && !isManager){ if(mail != null && showCommunity && !isManager) {
this._subscribeService.isSubscribedToCommunity(community.communityId, mail, this.properties.adminToolsAPIURL).subscribe ( this._subscribeService.isSubscribedToCommunity(community.communityId, mail, this.properties.adminToolsAPIURL).subscribe (
res => { res => {
isSubscriber = res; isSubscriber = res;
@ -149,22 +148,20 @@ export class CommunitiesComponent {
this.subscriberOfCommunities.push(community); this.subscriberOfCommunities.push(community);
} }
this.subscriberOfCommunitiesStatus = this.errorCodes.DONE;
this.loading = false; this.loading = false;
}, },
error => { error => {
this.handleError("Error getting response if email: "+mail+" is subscribed to community with id: "+community.communityId, error, this.subscriberOfCommunitiesStatus); this.subscriberErrorMessage = "Error fetching your subscribed communities";
this.handleError("Error getting response if email: "+mail+" is subscribed to community with id: "+community.communityId, error);
this.loading = false; this.loading = false;
}); });
} else { } else {
this.subscriberOfCommunitiesStatus = this.errorCodes.DONE;
this.loading = false; this.loading = false;
} }
}); });
}, },
error => { error => {
this.handleError("Error getting communities", error, status); this.status = this.handleError("Error getting communities", error);
this.subscriberOfCommunitiesStatus = this.errorCodes.DONE;
this.loading = false; this.loading = false;
} }
); );
@ -231,7 +228,7 @@ export class CommunitiesComponent {
} }
private handleError(message: string, error, status) { private handleError(message: string, error): number {
var code = ""; var code = "";
if(!error.status) { if(!error.status) {
var error = error.json(); var error = error.json();
@ -239,8 +236,9 @@ export class CommunitiesComponent {
} else { } else {
code = error.status; code = error.status;
} }
status = this.errorMessages.getErrorCode(code);
console.error("Communities (component): "+message, error); console.error("Communities (component): "+message, error);
return this.errorMessages.getErrorCode(code);
} }
} }

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

@ -26,18 +26,6 @@
/*width:284px; height:109px;*/ /*width:284px; height:109px;*/
width:107px; height:57px; 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 { .tm-toolbar .uk-subnav-line .custom-connect-li {
background:var(--portal-main-color) !important; background:var(--portal-main-color) !important;
} }