[Trunk|Connect]:

1. Connect first page: browse-community.component & communities.component & assets/home.jpg:
	a. Show 'private' and 'subscribed' tags in all cards.
	b. Show 'manage' button in below (browse) cards too.
	c. Cut title in 50 characters and description in 150 characters.
	d. Change home.jpg for better view.
	e. Queryparam to Communities Search Page for manager changed from 'status: "managing"' to 'role: "manager"'.
	f. In 'View all' links, add number.
	g. Bug fix: properly show communities.
	h. Query if user is subscribed for every community to initialize correctly 'subscribed' tag.
	i. Sort communities by 'creationDate' and then by 'title'.
2. community-creation-instructions.component: Add piwik service call and set title of the browser tab.


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@55354 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2019-04-15 10:06:58 +00:00
parent 77f285703f
commit 8ed77aef1e
6 changed files with 147 additions and 114 deletions

View File

@ -12,16 +12,27 @@ import {CommunityInfo} from '../../openaireLibrary/co
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'"
[attr.uk-tooltip]="(!showDescription && community.description ? ('title: '+ community.description + (community.status != 'all' ? '<hr> '+hiddenMessage : '')) : 'cls: uk-invisible')">
<!--div [class]="(showDescription ? 'uk-height-max-medium' : 'uk-height-max-medium') + ' uk-card uk-card-default uk-padding-small'"
[attr.uk-tooltip]="((!showDescription && community.description) ? ('title: '+ community.description) : 'cls: uk-invisible')"-->
<!--+ (community.status != 'all' ? '<hr> '+hiddenMessage : '')-->
<div class="uk-container">
<span>
<div class="uk-card-media-top">
<a (click)="confirmModalOpen()">
<div style="" class="uk-margin-auto communitiesImageBox">
<!--class="uk-card-badge portal-card-badge uk-width-1-2 uk-position-top-left uk-text-small uk-text-center"-->
<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"
<!--div *ngIf="community.status !='all'" class="uk-card-badge portal-card-badge uk-width-1-3 uk-position-top-left uk-text-small uk-text-center"
[attr.uk-tooltip]="showDescription || !community.description ? 'title: ' + hiddenMessage : 'cls: uk-invisible'">
Private view
Private
</div-->
<!--div *ngIf="community.status == 'manager'" class="uk-position-top-right uk-card-badge private-card-badge uk-text-small">
<span class="uk-padding-small">Private</span>
</div-->
<div *ngIf="community.status =='manager'" class="uk-card-badge private-card-badge uk-width-1-3 uk-position-top-left uk-text-small uk-text-center">
Private
</div>
<div *ngIf="community.isSubscribed" class="uk-position-top-right uk-card-badge portal-card-badge uk-width-1-2 uk-text-small uk-text-center">
<span>Subscribed</span>
</div>
<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">
<span *ngIf= "community.logoUrl == null || community.logoUrl == '' "class="uk-icon uk-padding-small">
@ -31,29 +42,29 @@ import {CommunityInfo} from '../../openaireLibrary/co
</a>
</div>
</span>
<div class="uk-text-center">
<!--uk-height-match=".community-title"-->
<div class="uk-text-center community-main">
<!--[class]="(isManager ? 'community-title-height ' : '') + -->
<p class="uk-text-small uk-text-bold uk-margin-small community-title">
<a (click)="confirmModalOpen()">
{{(community.title)?community.title:community.shortTitle}}
<!--{{(community.title)?community.title:community.shortTitle}}-->
<span class="uk-text-small uk-margin-small" *ngIf="community.title" >{{community.title.slice(0,thresholdTitle)}}<span *ngIf="community.title.length > thresholdTitle">...</span></span>
<span class="uk-text-small uk-margin-small" *ngIf="!community.title && community.shortTitle" >{{community.shortTitle.slice(0,thresholdTitle)}}<span *ngIf="community.shortTitle.length > thresholdTitle">...</span></span>
</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>
<p class="uk-text-small uk-margin-small community-title2" *ngIf="community.description != null && showDescription">
<span>{{community.description.slice(0,thresholdDescription)}}<span *ngIf="community.description.length > thresholdDescription">...</span></span>
</p>
</div>
<!--uk-margin-small-bottom-->
<!--uk-position-bottom-->
<div *ngIf="isManager" class=" uk-margin-small ">
<!--*ngIf="isManager" -->
<div *ngIf="community.isManager" class=" uk-margin-small">
<manage [communityId]="community.communityId"></manage>
</div>
</div>
@ -75,6 +86,7 @@ export class BrowseCommunityComponent {
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
// check title length, if is manager, if is private and cut description accordingly
public thresholdTitle: number = 50;
public thresholdDescription: number = 150;
properties:EnvProperties;

View File

@ -3,24 +3,29 @@
</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" >
class=" mainPageSearchForm uk-background-norepeat uk-background-cover uk-section uk-padding-remove-bottom" >
<div class="uk-position-cover" style=""></div>
<div class="uk-position-relative uk-panel">
<div class="uk-container uk-section">
<div *ngIf="managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0">
<h3 class="uk-margin-top">My Communities</h3>
<h3 class="uk-margin-large-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 uk-height-match=".community-title">
<ng-container *ngFor="let community of managerOfCommunities.slice(0,3); let i = index">
<browse-community class="uk-padding-small" [showDescription]=false [isManager]=true [community]="community"></browse-community>
</ng-container>
<div class="uk-grid-match uk-grid-small uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community-title">
<div *ngFor="let community of managerOfCommunities.slice(0,3); let i = index">
<div class="uk-padding-small uk-height-max-medium uk-card uk-card-default"
[attr.uk-tooltip]="((community.description) ? ('title: '+ community.description) : 'cls: uk-invisible')">
<browse-community [community]="community" [showDescription]="false" [isManager]="true"></browse-community>
</div>
</div>
</div>
</div>
<div *ngIf="managerOfCommunities.length > 3" class="uk-text-right uk-width-3-5">
<a [queryParams]="{status: quote('managing')}" routerLinkActive="router-link-active" routerLink="/search/find/communities">
<u>View all ></u>
<a [queryParams]="{role: quote('manager')}" routerLinkActive="router-link-active" routerLink="/search/find/communities">
<u>View all {{managerOfCommunities.length | number}} ></u>
</a>
</div>
</div>
@ -34,15 +39,20 @@
<div *ngIf="subscriberOfCommunities.length > 0">
<h5 class="uk-margin-remove-bottom uk-margin-small-top">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 uk-grid uk-height-match=".community-title">
<ng-container *ngFor="let community of subscriberOfCommunities.slice(0,3); let i = index">
<browse-community class="uk-padding-small" [showDescription]="false" [community]="community"></browse-community>
</ng-container>
<div class="uk-grid-match uk-grid-small uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community-title">
<div *ngFor="let community of subscriberOfCommunities.slice(0,3); let i = index">
<div class="uk-padding-small uk-height-max-medium uk-card uk-card-default"
[attr.uk-tooltip]="((community.description) ? ('title: '+ community.description) : 'cls: uk-invisible')">
<browse-community [community]="community" [showDescription]="false"></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>
<u>View all {{subscriberOfCommunities.length | number}} ></u>
</a>
</div>
</div>
@ -52,12 +62,26 @@
<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 class="uk-width-medium uk-text-center uk-margin-large-top uk-margin-large-left">
<h5>Create and manage your research community page</h5>
<div>
<a class="uk-button portal-button uk-button-large" [queryParams]="" routerLinkActive="router-link-active" routerLink="/how-to-create-community"> LEARN HOW</a>
<a class="uk-button portal-button" [queryParams]="" routerLinkActive="router-link-active" routerLink="/how-to-create-community"> LEARN HOW</a>
</div>
</div-->
<div class="uk-width-1-2 uk-inline uk-margin-large-top uk-margin-large-bottom">
<div class="uk-position-center ">
<div class="uk-width-medium uk-text-center">
<h5>Create and manage your research community page</h5>
<div>
<a class="uk-button portal-button" routerlink="/how-to-create-community" routerlinkactive="router-link-active" ng-reflect-router-link="/how-to-create-community" ng-reflect-router-link-active="router-link-active" href="/how-to-create-community"> LEARN HOW</a>
</div>
</div>
</div>
<br>
</div>
</div>
</div>
</div>
@ -66,31 +90,36 @@
<div *ngIf="!loading" class="uk-margin-top">
<div class="">
<div class="uk-margin-bottom uk-margin-top">
<div class="uk-container">
<div class="uk-margin-bottom uk-margin-medium-top">
<div class="uk-container uk-margin-small-bottom">
<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>
<search-form class="uk-align-left" placeholderText="Start by locating your community" link="/search/find/communities"></search-form>
</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 uk-margin-medium-top">
<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 uk-grid uk-height-match=".community-title">
<ng-container *ngFor="let community of researchCommunities.slice(0,5); let i = index">
<browse-community class="uk-padding-small" [community]="community"></browse-community>
</ng-container>
<div [class]="'uk-container uk-margin-top' + (researchCommunities.length <= 5 ? ' uk-margin-medium-bottom' : '')">
<div class="uk-grid-match uk-grid-small uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community-main">
<div *ngFor="let community of researchCommunities.slice(0,5); let i = index">
<div class="uk-padding-small uk-height-max-medium uk-card uk-card-default">
<browse-community [community]="community"></browse-community>
</div>
</div>
</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 *ngIf="researchCommunities.length > 5"
[queryParams]="{type: quote('community')}" routerLinkActive="router-link-active" routerLink="/search/find/communities">
<u>View all <span *ngIf="researchCommunities.length > 1">{{researchCommunities.length | number}}</span> Research Communities ></u>
</a>
</div>
</div>
@ -98,15 +127,20 @@
<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 uk-grid uk-height-match=".community-title">
<ng-container *ngFor="let community of researchInitiatives.slice(0,5); let i = index"><!-- uk-padding-remove-bottom"-->
<browse-community class="uk-padding-small" [community]="community"></browse-community>
</ng-container>
<div class="uk-grid-match uk-grid-small uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community-main">
<div *ngFor="let community of researchInitiatives.slice(0,5); let i = index">
<div class="uk-padding-small uk-height-max-medium uk-card uk-card-default">
<browse-community [community]="community"></browse-community>
</div>
</div>
</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 *ngIf="researchInitiatives.length > 5"
[queryParams]="{type: quote('ri')}" routerLinkActive="router-link-active" routerLink="/search/find/communities">
<u>View all <span *ngIf="researchInitiatives.length > 1">{{researchInitiatives.length | number}}</span> Research Initiatives ></u>
</a>
</div>
</div>

View File

@ -106,6 +106,8 @@ export class CommunitiesComponent {
//this.communitiesResults = communitiesResults;
//this.communitiesToShow = this.communitiesResults.slice();
//console.log(communitiesResults);
this.sort(communitiesResults);
var mail = Session.getUserEmail();
communitiesResults.forEach((community, index) => {
let showCommunity: boolean = true;
@ -114,14 +116,14 @@ export class CommunitiesComponent {
if(community['status'] == "hidden"){
showCommunity = false;
}else if(community['status'] == "manager"){
if(mail == null){ // no user
}else {
if(mail == null && community['status'] == "manager"){ // no user
showCommunity = false;
}else if(Session.isCommunityCurator() || Session.isPortalAdministrator()){
isManager = true;
}else if(community.managers.indexOf(mail)!=-1){
isManager = true;
} else {
} else if(community['status'] == "manager") {
showCommunity = false;
}
}
@ -134,24 +136,28 @@ export class CommunitiesComponent {
}
if(isManager) {
community.isManager = true;
this.managerOfCommunities.push(community);
}
}
this.status = this.errorCodes.DONE;
if(mail != null && showCommunity && !isManager) {
if(mail != null && showCommunity) {
this._subscribeService.isSubscribedToCommunity(community.communityId, mail, this.properties.adminToolsAPIURL).subscribe (
res => {
isSubscriber = res;
if(isSubscriber) {
this.subscriberOfCommunities.push(community);
community.isSubscribed = true;
if(!isManager) {
this.subscriberOfCommunities.push(community);
}
}
this.loading = false;
},
error => {
this.subscriberErrorMessage = "Error fetching your subscribed communities";
this.subscriberErrorMessage = "Error fetching communities you are subscribed to";
this.handleError("Error getting response if email: "+mail+" is subscribed to community with id: "+community.communityId, error);
this.loading = false;
});
@ -167,6 +173,24 @@ export class CommunitiesComponent {
);
}
private sort(results: CommunityInfo[]) {
results.sort((left, right): number => {
if (!right.date || left.date > right.date) {
return -1;
} else if (!left.date || left.date < right.date) {
return 1;
} else {
if (left.title > right.title) {
return 1;
} else if (left.title < right.title) {
return -1;
} else {
return 0;
}
}
})
}
public quote(param: string): string {
return StringUtils.quote(param);
}
@ -177,57 +201,6 @@ export class CommunitiesComponent {
}
}
isProduction():boolean{
return this.properties.environment!="development";
}
getProductionPrefix():string{
return (this.properties.environment =="beta")?"beta.":""
}
showCommunity(community):boolean{
if(community['status'] == "hidden"){
return false;
}else if(community['status'] == "manager"){
var mail = Session.getUserEmail();
if(mail == null){ // no user
return false;
}else if(Session.isCommunityCurator() || Session.isPortalAdministrator()){
return true;
}else if(community.managers.indexOf(mail)!=-1){
return true;
}
return false;
}
return true;
}
existsIn(word, keyword):boolean{
if(word!= null && (keyword=="" || word.toLowerCase().indexOf(keyword.toLowerCase())!=-1)){
return true;
}
return false;
}
isType(communityType):boolean{
if(this.type == "all" || communityType == this.type){
return true;
}
return false;
}
searchChanged(){
this.communitiesToShow = [];
for(var i=0; i <this.communitiesResults.length; i++){
if((this.existsIn(this.communitiesResults[i].description, this.keyword) ||
this.existsIn(this.communitiesResults[i].title, this.keyword) ||
this.existsIn(this.communitiesResults[i].shortTitle, this.keyword))
&& this.isType(this.communitiesResults[i].type)){
this.communitiesToShow.push(this.communitiesResults[i]);
}
}
}
private handleError(message: string, error): number {
var code = "";
if(!error.status) {

View File

@ -1,6 +1,8 @@
import {Component, Input} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Title, Meta} from '@angular/platform-browser';
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
@Component({
@ -8,7 +10,7 @@ import {EnvProperties} from '../openaireLibrary/utils/properties/env-pr
template: `
<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" >
class=" mainPageSearchForm uk-background-norepeat uk-background-cover uk-section uk-padding-remove-bottom" >
<div class="uk-position-cover" style=""></div>
<div class="uk-position-relative uk-panel">
<div class="uk-container uk-section">
@ -16,10 +18,10 @@ import {EnvProperties} from '../openaireLibrary/utils/properties/env-pr
<h3 class="uk-margin-remove-bottom uk-margin-large-top">Discover the power of OpenAIRE Connect managing tool</h3>
<h5 class="uk-margin-remove-top">Bring your content online</h5>
<div class="uk-width-1-2 uk-text-center uk-margin-large-top">
<p>Contact OpenAIRE team, in order to create your community page</p>
<div class="uk-width-medium uk-text-center uk-margin-large-top uk-margin-large-left">
<h5>Contact OpenAIRE team, in order to create your community page</h5>
<div>
<a class="uk-button portal-button uk-button-large" [queryParams]="" routerLinkActive="router-link-active" routerLink="/contact"> CONTACT US</a>
<a class="uk-button portal-button" [queryParams]="" routerLinkActive="router-link-active" routerLink="/contact"> CONTACT US</a>
</div>
</div>
</div>
@ -121,7 +123,7 @@ import {EnvProperties} from '../openaireLibrary/utils/properties/env-pr
<h4 class="uk-margin uk-h4 uk-text-bold">
Why trust OpenAIRE?
</h4>
<ul class="uk-list uk-list-bullet">
<ul class="uk-list uk-margin-left">
<li>It is the Open Access Infrastructure for Europe.</li>
<li>It is community based and independent.</li>
<li>Provides organizational and technical framework to support OpenScience.</li>
@ -145,10 +147,13 @@ export class CommunityCreationInstructionsComponent {
constructor (
private route: ActivatedRoute,
private _router: Router) {
private _router: Router,
private _title: Title,
private _piwikService:PiwikService) {
var description = "OpenAIRE - Connect, Community Dashboard, research community";
var title = "OpenAIRE - Connect";
var title = "OpenAIRE - Connect | Create and manage your community page";
this._title.setTitle(title);
}
public ngOnInit() {
@ -156,10 +161,18 @@ export class CommunityCreationInstructionsComponent {
.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
var url = data.envSpecific.baseLink+this._router.url;
if(this.properties.enablePiwikTrack && (typeof document !== 'undefined')){
this.piwiksub = this._piwikService.trackView(this.properties, "OpenAIRE Connect | Create and manage your community page", this.properties.piwikSiteId).subscribe();
}
});
}
public ngOnDestroy() {}
public ngOnDestroy() {
if(this.piwiksub){
this.piwiksub.unsubscribe();
}
}
public createTooltip(content: string) : string {
return "<div class=\"uk-text-center uk-text-bold uk-padding-small\">"+content+"</div>";

View File

@ -4,6 +4,7 @@ import { RouterModule } from '@angular/router';
import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard';
import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
import {CommunityCreationInstructionsComponent} from './community-creation-instructions.component';
import {CommunityCreationInstructionsRoutingModule} from './community-creation-instructions-routing.module';
@ -19,7 +20,7 @@ import {CommunityCreationInstructionsRoutingModule} from './community-creation-i
CommunityCreationInstructionsComponent
],
providers:[
FreeGuard, PreviousRouteRecorder
FreeGuard, PreviousRouteRecorder, PiwikService
]
})
export class CommunityCreationInstructionsModule { }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 322 KiB

After

Width:  |  Height:  |  Size: 231 KiB