Community Page: Change the layout 

Invite: change the short view to dropdown



git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@55271 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki 2019-04-11 09:39:46 +00:00
parent a764eafb47
commit 11af7eed0f
8 changed files with 185 additions and 129 deletions

View File

@ -36,6 +36,7 @@ import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
// ]
// }));
// be able to get request and get domain from there
app.engine('html', (_, options, callback) => {
let engine = ngExpressEngine({
bootstrap: AppServerModuleNgFactory,

View File

@ -1,27 +1,101 @@
<div class="uk-section uk-margin-top tm-middle uk-container uk-padding-small-top" id="tm-main">
<div id="stickhere">
</div>
<div *ngIf="communityInfo" class="uk-section uk-margin-top uk-padding-remove-bottom" uk-sticky="top: #stickhere">
<div class="uk-background-muted uk-padding-small">
<div class="uk-container uk-text-center uk-margin-small-top uk-margin-small-bottom">
<manage *ngIf="communityId != null && communityId != ''" [communityId]="communityId" class=" " [buttonSizeSmall]=false></manage>
<subscribe *ngIf="communityId != null && communityId != ''" [communityId]="communityId" class=""></subscribe>
<invite *ngIf="showInvite()" [longView]=false [buttonSizeSmall]=false></invite>
</div>
</div>
</div>
<div class="uk-section tm-middle uk-container uk-margin-small-top uk-padding-remove-top" id="tm-main">
<div class="uk-container uk-margin-bottom uk-grid">
<div class="uk-width-expand uk-padding-remove">
<article *ngIf="communityInfo" class="uk-article ">
<div *ngIf="communityId == null || communityId == ''" class="uk-child-width-1-6@l uk-child-width-1-6@m uk-child-width-1-3@s uk-text-center uk-alert uk-alert-primary">
No community chosen
</div>
<div class="uk-clearfix uk-margin-bottom">
<!-- <div class="uk-clearfix uk-margin-bottom">
<manage *ngIf="communityId != null && communityId != ''" [communityId]="communityId" class=" uk-float-right"></manage>
<subscribe *ngIf="communityId != null && communityId != ''" [communityId]="communityId" class=" uk-float-right"></subscribe>
</div>
</div> -->
<div *ngIf="communityId != null && communityId != '' && community != null">
<blockquote>
<div *ngIf="community.title != null">
<div *ngIf="community.title != null" class="uk-article-title">
<p> {{community.title}}</p>
</div>
<div *ngIf="community.title == null && community.shortTitle != null">
<div *ngIf="community.title == null && community.shortTitle != null" class="uk-article-title">
<p> {{community.shortTitle}}</p>
</div>
<div *ngIf="community.description != null">
<div *ngIf="community.description != null" class="uk-text-lead">
<p> {{community.description}}</p>
</div>
</blockquote>
<div class="uk-grid uk-grid-divider">
<div class="uk-width-1-2@m uk-width-1-1@s uk-first-column uk-margin-top">
<div *ngIf="community.date != null" > Created: <span class="uk-text-muted">{{community.date | date:'dd-MM-yyyy'}}</span></div>
<subscribe *ngIf="communityId != null" [communityId]="communityId" showNumbers=true class=""></subscribe>
<div *ngIf="community.managers != null && community.managers[0] != '' && community.managers[0] != null"> Curated by:
<span *ngFor='let manager of community.managers; let i = index' class="uk-text-muted">{{manager.substr(0, manager.indexOf('@'))}}<span *ngIf="manager.includes('@') == 0">{{manager}}</span><span *ngIf="i<(community.managers.length-1)">,</span>
</span>
</div>
<div *ngIf=" isRouteEnabled('/participate/share-zenodo')" class="uk-margin-top">
<a [queryParams]=params routerLinkActive="router-link-active" routerLink="/participate/share-zenodo" >
Zenodo communities:<span> {{zenodoCommunityIdS.length + ((masterZenodoCommunity)?1:0)}}</span>
<span class="uk-icon" uk-tooltip="title:<div class='uk-pargin'>Zenodo is a catch-all repository for OpenAIRE<hr>A zenodo community is created and curated by Zenodo users</div>">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="question" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle><circle cx="10.44" cy="14.42" r="1.05"></circle><path fill="none" stroke="#000" stroke-width="1.2" d="M8.17,7.79 C8.17,4.75 12.72,4.73 12.72,7.72 C12.72,8.67 11.81,9.15 11.23,9.75 C10.75,10.24 10.51,10.73 10.45,11.4 C10.44,11.53 10.43,11.64 10.43,11.75"></path></svg>
</span>
</a>
</div>
</div>
<div class="uk-width-1-2@m uk-width-1-1@s">
<div class="uk-grid-medium uk-text-large uk-margin-bottom">Statistics</div>
<div *ngIf="communityId != null && communityId != ''" class="uk-child-width-1-6@l uk-child-width-1-6@m uk-child-width-1-3@s uk-text-center uk-grid uk-grid-medium ">
<div *ngIf="publicationTotal != null && isEntityEnabled('publication') && isRouteEnabled('/search/find/publications')" class="uk-padding-remove-left">
<div class="uk-card uk-card-default uk-card-body uk-padding-remove uk-margin-small-right uk-height-1-1 uk-flex">
<a class="uk-margin-auto-vertical uk-margin-auto" [queryParams]=params routerLinkActive="router-link-active" routerLink="/search/find/publications" ><span class="uk-text-bold">{{publicationTotal|number}}</span>
<br><span class="uk-text-small">publications</span></a>
</div>
</div>
<div *ngIf="researchDataTotal != null && isEntityEnabled('dataset') && isRouteEnabled('/search/find/datasets')" class="uk-padding-remove-left">
<div class="uk-card uk-card-default uk-card-body uk-padding-remove uk-margin-small-left uk-margin-small-right uk-height-1-1">
<a class="uk-margin-auto-vertical uk-margin-auto" [queryParams]=params routerLinkActive="router-link-active" routerLink="/search/find/datasets"><span class="uk-text-bold">{{researchDataTotal|number}}</span>
<br><span class="uk-text-small">research data</span></a>
</div>
</div>
<div *ngIf="softwareTotal != null && isEntityEnabled('software') && isRouteEnabled('/search/find/software')" class="uk-padding-remove-left">
<div class="uk-card uk-card-default uk-card-body uk-padding-remove uk-margin-small-right uk-height-1-1 uk-flex">
<a class="uk-margin-auto-vertical uk-margin-auto" [queryParams]=params routerLinkActive="router-link-active" routerLink="/search/find/software"><span class="uk-text-bold">{{softwareTotal|number}}</span>
<br><span class="uk-text-small">software</span></a>
</div>
</div>
<div *ngIf="orpTotal != null && isEntityEnabled('orp') && isRouteEnabled('/search/find/other')" class="uk-padding-remove-left">
<div class="uk-card uk-card-default uk-card-body uk-padding-remove uk-margin-small-right uk-height-1-1 uk-flex">
<a class="uk-margin-auto-vertical uk-margin-auto" [queryParams]=params routerLinkActive="router-link-active" routerLink="/search/find/other"><span class="uk-text-bold">{{orpTotal|number}}</span>
<br><span class="uk-text-small">other products</span></a>
</div>
</div>
<div *ngIf="projectTotal != null && isEntityEnabled('project') && isRouteEnabled('/search/find/projects')" class="uk-padding-remove-left">
<div class="uk-card uk-card-default uk-card-body uk-padding-remove uk-margin-small-right uk-height-1-1 uk-flex">
<a class="uk-margin-auto-vertical uk-margin-auto" [queryParams]=params routerLinkActive="router-link-active" routerLink="/search/find/projects"><span class="uk-text-bold">{{projectTotal|number}}</span>
<br><span class="uk-text-small">projects</span></a>
</div>
</div>
<div *ngIf="contentProviderTotal != null && isEntityEnabled('datasource') && isRouteEnabled('/search/find/dataproviders')" class="uk-padding-remove-left">
<div class="uk-card uk-card-default uk-card-body uk-padding-remove uk-margin-small-right uk-height-1-1 uk-flex">
<a class="uk-margin-auto-vertical uk-margin-auto" [queryParams]=params routerLinkActive="router-link-active" routerLink="/search/find/dataproviders"><span class="uk-text-bold">{{contentProviderTotal|number}}</span>
<br><span class="uk-text-small">content providers</span></a>
</div>
</div>
</div>
<div *ngIf="community.subjects != null && community.subjects.length > 0" class="uk-grid-medium uk-text-large uk-margin-bottom">Subjects related to community</div>
<div *ngIf="community.subjects != null">
<span *ngFor="let subject of community.subjects.slice(0,10) let i=index">
<span *ngIf="subject != ''" class="uk-label uk-margin-small-bottom">{{subject}}</span>
@ -44,101 +118,46 @@
</a>
</span>
</div>
<p>
<span *ngIf="community.managers != null && community.managers[0] != '' && community.managers[0] != null"> Curated by:
<span *ngFor='let manager of community.managers; let i = index'>{{manager.substr(0, manager.indexOf('@'))}}<span *ngIf="manager.includes('@') == 0">{{manager}}</span><span *ngIf="i<(community.managers.length-1)">,</span>
</span>
</span>
<span *ngIf="community.date != null" class="uk-margin-left"> Created: {{community.date | date:'dd-MM-yyyy'}}</span>
<subscribe *ngIf="communityId != null" [communityId]="communityId" showNumbers=true class="uk-margin-left"></subscribe>
<span *ngIf=" IsRouteEnabled('/participate/share-zenodo')" class="uk-margin-left">
<a [queryParams]=params routerLinkActive="router-link-active" routerLink="/participate/share-zenodo" >
Zenodo communities:<span> {{zenodoCommunityIdS.length + ((masterZenodoCommunity)?1:0)}}</span>
</a>
</span>
</p>
</div>
<div *ngIf="communityId != null && communityId != ''" class="uk-child-width-1-6@l uk-child-width-1-6@m uk-child-width-1-3@s uk-text-center uk-grid uk-grid-medium ">
<div *ngIf="publicationTotal != null && IsEntityEnabled('publication') && IsRouteEnabled('/search/find/publications')" class=" uk-padding-remove-left uk-first-column">
<div class="uk-card uk-card-default uk-card-small uk-card-body">
<div>
<a [queryParams]=params routerLinkActive="router-link-active" routerLink="/search/find/publications" ><h3 class="uk-card-title">{{publicationTotal|number}}</h3>
<p>publications</p></a>
</div>
</div>
</div>
<div *ngIf="researchDataTotal != null && IsEntityEnabled('dataset') && IsRouteEnabled('/search/find/datasets')">
<div class="uk-card uk-card-default uk-card-small uk-card-body">
<div>
<a [queryParams]=params routerLinkActive="router-link-active" routerLink="/search/find/datasets"><h3 class="uk-card-title">{{researchDataTotal|number}}</h3>
<p>research data</p></a>
</div>
</div>
</div>
<div *ngIf="softwareTotal != null && IsEntityEnabled('software') && IsRouteEnabled('/search/find/software')">
<div class="uk-card uk-card-default uk-card-small uk-card-body">
<div>
<a [queryParams]=params routerLinkActive="router-link-active" routerLink="/search/find/software"><h3 class="uk-card-title">{{softwareTotal|number}}</h3>
<p>software</p></a>
</div>
</div>
</div>
<div *ngIf="orpTotal != null && IsEntityEnabled('orp') && IsRouteEnabled('/search/find/other')">
<div class="uk-card uk-card-default uk-card-small uk-card-body">
<div>
<a [queryParams]=params routerLinkActive="router-link-active" routerLink="/search/find/other"><h3 class="uk-card-title">{{orpTotal|number}}</h3>
<p>other research products</p></a>
</div>
</div>
</div>
<div *ngIf="projectTotal != null && IsEntityEnabled('project') && IsRouteEnabled('/search/find/projects')">
<div class="uk-card uk-card-default uk-card-small uk-card-body">
<div>
<a [queryParams]=params routerLinkActive="router-link-active" routerLink="/search/find/projects"><h3 class="uk-card-title">{{projectTotal|number}}</h3>
<p>projects</p></a>
</div>
</div>
</div>
<div *ngIf="contentProviderTotal != null && IsEntityEnabled('datasource') && IsRouteEnabled('/search/find/dataproviders')">
<div class="uk-card uk-card-default uk-card-small uk-card-body">
<div>
<a [queryParams]=params routerLinkActive="router-link-active" routerLink="/search/find/dataproviders"><h3 class="uk-card-title">{{contentProviderTotal|number}}</h3>
<p>content providers</p></a>
</div>
</div>
</div>
</div>
<div>
<div *ngIf="isRouteEnabled('/search/find')" class="uk-margin-large-top">
<div class="uk-text-large">Search research results</div>
<search-form [setFormCentered]=false [placeholderText]="getSearchPlaceHolder()" link="/search/find"></search-form>
</div>
<div class="uk-margin-large-top">
<h2 class="uk-h3 uk-text-primary">
<div class="uk-text-large">
Recent research results
</h2>
</div>
<ul class="uk-tab uk-margin-top" data-uk-tab="{connect: '#resultTabs'">
<li *ngIf="IsEntityEnabled('publication')" class="uk-active"><a href="#">publications</a></li>
<li *ngIf="IsEntityEnabled('dataset')" (click)="searchResearchData()"><a href="#">research data</a></li>
<li *ngIf="IsEntityEnabled('software')" (click)="searchSoftware()"><a href="#">software</a></li>
<li *ngIf="IsEntityEnabled('orp')" (click)="searchOrps()"><a href="#">other research products</a></li>
<li *ngIf="isEntityEnabled('publication')" class="uk-active"><a href="#">publications</a></li>
<li *ngIf="isEntityEnabled('dataset')" (click)="searchResearchData()"><a href="#">research data</a></li>
<li *ngIf="isEntityEnabled('software')" (click)="searchSoftware()"><a href="#">software</a></li>
<li *ngIf="isEntityEnabled('orp')" (click)="searchOrps()"><a href="#">other research products</a></li>
</ul>
<ul id="resultTabs" class="uk-switcher" style="min-height:450px;">
<li *ngIf="IsEntityEnabled('publication')"><results-comp [(results)]=publicationResults [(total)]=publicationTotal resultType="publication" [community]=community [params]=params></results-comp></li>
<li *ngIf="IsEntityEnabled('dataset')"><results-comp [(results)]=researchDataResults [(total)]=researchDataTotal resultType="dataset" [community]=community [params]=params></results-comp></li>
<li *ngIf="IsEntityEnabled('software')"><results-comp [(results)]=softwareResults [(total)]=softwareTotal resultType="software" [community]=community [params]=params></results-comp></li>
<li *ngIf="IsEntityEnabled('orp')"><results-comp [(results)]=orpResults [(total)]=orpTotal resultType="other" [community]=community [params]=params></results-comp></li>
<li *ngIf="isEntityEnabled('publication')">
<div class="uk-grid">
<results-comp [(results)]=publicationResults [(total)]=publicationTotal resultType="publication" [community]=community [params]=params class="uk-width-expand"></results-comp>
<div class="uk-width-1-2@m uk-width-1-1@s">
</div>
</div>
</li>
<li *ngIf="isEntityEnabled('dataset')"><results-comp [(results)]=researchDataResults [(total)]=researchDataTotal resultType="dataset" [community]=community [params]=params></results-comp></li>
<li *ngIf="isEntityEnabled('software')"><results-comp [(results)]=softwareResults [(total)]=softwareTotal resultType="software" [community]=community [params]=params></results-comp></li>
<li *ngIf="isEntityEnabled('orp')"><results-comp [(results)]=orpResults [(total)]=orpTotal resultType="other" [community]=community [params]=params></results-comp></li>
</ul>
</div>
<statistics-for-dashboard [currentMode]="'showInDashboard'"></statistics-for-dashboard>
</div>
</article>
</div>
<div *ngIf="showInvite()" class="uk-width-1-5@m uk-width-1-1@s uk-padding-small uk-margin-large-top">
<invite [longView]=false></invite>
</div>
</div>
</div>

View File

@ -20,7 +20,7 @@ import {SearchEntriesService} from '../searchEntries/searchEntries.servi
import {SearchZenodoCommunitiesService} from '../openaireLibrary/connect/zenodoCommunities/searchZenodoCommunities.service';
import {ZenodoCommunitiesService} from '../openaireLibrary/connect/zenodoCommunities/zenodo-communities.service';
import {Session} from '../openaireLibrary/login/utils/helper.class';
import {StatisticsForDashboardComponent} from '../statistics/statistics.component';
import {PiwikHelper} from '../utils/piwikHelper';
@Component({
@ -288,10 +288,10 @@ export class CommunityComponent {
}
}
IsEntityEnabled(entity: string) {
isEntityEnabled(entity: string) {
return this.communityInfo.entities.some(x => x['pid'] == entity && x['isEnabled']===true);
}
IsRouteEnabled(route: string) {
isRouteEnabled(route: string) {
return this.communityInfo.pages.some(x => x['route'] == route && x['isEnabled']===true);
}
showInvite(){
@ -308,4 +308,23 @@ export class CommunityComponent {
private handleError(message: string, error) {
console.error("Community (component): "+message, error);
}
getSearchPlaceHolder(){
var entities = [];
if(this.isEntityEnabled("publication")){
entities.push("publications");
}
if(this.isEntityEnabled("dataset")){
entities.push("research data");
}
if(this.isEntityEnabled("software")){
entities.push("software");
}
if(this.isEntityEnabled("orp")){
entities.push("other research products");
}
return "Search"+ ((entities.length > 0 )?(" for "+entities.join(', ')+"..."):"");
}
}

View File

@ -21,13 +21,14 @@ import {ManageModule} from '../openaireLibrary/utils/manage/manage.module';
import {StatisticsModule} from "../statistics/statistics.module";
import {SearchZenodoCommunitiesServiceModule} from '../openaireLibrary/connect/zenodoCommunities/searchZenodoCommunitiesService.module';
import {ZenodoCommunitiesServiceModule} from '../openaireLibrary/connect/zenodoCommunities/zenodo-communitiesService.module';
import {SearchFormModule} from '../openaireLibrary/searchPages/searchUtils/searchForm.module';
@NgModule({
imports: [
CommonModule, FormsModule, RouterModule,
// CommunityRoutingModule,
SubscribeModule, StatisticsModule, ManageModule, InviteModule,
SearchZenodoCommunitiesServiceModule, ZenodoCommunitiesServiceModule
SearchZenodoCommunitiesServiceModule, ZenodoCommunitiesServiceModule, SearchFormModule
],
declarations: [
CommunityComponent, ResultsComponent

View File

@ -150,18 +150,33 @@
</div>
</div>
<div *ngIf="!longView">
<div class="uk-width-large@m uk-width-1-1@s">
<div class="uk-card uk-card-default uk-card-body uk-padding-small">
<div class="uk-text-center uk-text-large" uk-toggle="target: #toggle-usage; animation: uk-animation-fade" style="cursor: pointer;">
<!-- <div *ngIf="!longView"> -->
<!-- <div class="uk-width-large@m uk-width-1-1@s">
<div class="uk-card uk-card-default uk-card-body uk-padding-small"> -->
<!-- <div class="uk-text-center uk-text-large" uk-toggle="target: #toggle-usage; animation: uk-animation-fade" style="cursor: pointer;">
<span class="uk-margin-small-right uk-icon" >
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="social" ratio="1">
<line fill="none" stroke="#000" stroke-width="1.1" x1="13.4" y1="14" x2="6.3" y2="10.7"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13.5" y1="5.5" x2="6.5" y2="8.8"></line><circle fill="none" stroke="#000" stroke-width="1.1" cx="15.5" cy="4.6" r="2.3"></circle><circle fill="none" stroke="#000" stroke-width="1.1" cx="15.5" cy="14.8" r="2.3"></circle><circle fill="none" stroke="#000" stroke-width="1.1" cx="4.5" cy="9.8" r="2.3"></circle></svg>
</span>
Invite users</div>
Invite users</div> -->
<!-- uk-toggle="target: #toggle-usage; animation: uk-animation-fade" -->
<button *ngIf="!longView" [class]=" ((buttonSizeSmall)?'uk-button-small':'') + ' uk-button uk-button-primary'">
Invite users
</button>
<!-- <div class="uk-text-center uk-text-large" uk-toggle="target: #toggle-usage; animation: uk-animation-fade" style="cursor: pointer;">
<span class="uk-margin-small-right uk-icon" >
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="social" ratio="1">
<line fill="none" stroke="#000" stroke-width="1.1" x1="13.4" y1="14" x2="6.3" y2="10.7"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13.5" y1="5.5" x2="6.5" y2="8.8"></line><circle fill="none" stroke="#000" stroke-width="1.1" cx="15.5" cy="4.6" r="2.3"></circle><circle fill="none" stroke="#000" stroke-width="1.1" cx="15.5" cy="14.8" r="2.3"></circle><circle fill="none" stroke="#000" stroke-width="1.1" cx="4.5" cy="9.8" r="2.3"></circle></svg>
</span>
<div class="uk-form uk-margin-small" id="toggle-usage" hidden="hidden">
Invite users</div> -->
<!-- <div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Click</button>
<div uk-dropdown="mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div> -->
<!-- hidden="hidden" -->
<div uk-dropdown="mode: click" class="uk-form uk-margin-small uk-alert uk-background-default" id="toggle-usage" >
<div class="uk-margin-top">
<errorMessages [status]="[status]" [type]="'community'"></errorMessages>
</div>
@ -188,6 +203,6 @@
</div>
</div>
</div>
</div>
</div>
<!-- </div>
</div> -->
<!-- </div> -->

View File

@ -26,6 +26,7 @@ export class InviteComponent implements OnInit {
@Input() longView: boolean = true;
@Input() communityId = null;
@Input() buttonSizeSmall = true;
private properties: EnvProperties = null;

View File

@ -23,12 +23,12 @@ declare var UIkit: any;
<a class="uk-alert-close" uk-close></a>
<p>Please login first to subscribe</p>
</div>
<a *ngIf="!subscribed" [class]="'uk-button portal-button uk-button-small' + (loading ? ' uk-disabled' : '')" (click)="subscribe()"> Subscribe</a>
<a *ngIf="subscribed" [class]="'uk-button uk-button-danger uk-button-small' + (loading ? ' uk-disabled' : '')" (click)="confirmOpen()"> Unsubscribe</a>
<a *ngIf="!subscribed" [class]="'uk-button portal-button' + (loading ? ' uk-disabled' : '')" (click)="subscribe()"> Subscribe</a>
<a *ngIf="subscribed" [class]="'uk-button uk-button-danger' + (loading ? ' uk-disabled' : '')" (click)="confirmOpen()"> Unsubscribe</a>
</span>
<span *ngIf="showNumbers && subscribers !=null && subscribers > 0" >
Members: {{subscribers}}
Members: <span class="uk-text-muted">{{subscribers}}</span>
</span>
<modal-alert (alertOutput)="confirmClose($event)">
</modal-alert>

View File

@ -52,7 +52,7 @@
"cacheUrl" :"http://scoobydoo.di.uoa.gr:3000/get?url=",
"adminToolsAPIURL" :"http://mpagasas.di.uoa.gr:8080/uoa-admin-tools",
"adminToolsAPIURL" :"http://scoobydoo.di.uoa.gr:8080/uoa-admin-tools",
"adminToolsCommunity" :"openaire",
"datasourcesAPI": "https://beta.services.openaire.eu/openaire/ds/search/",