Add new my-stakeholders page. Create a browse-stakeholder component. Add property for after login redirect

This commit is contained in:
Konstantinos Triantafyllou 2022-02-16 18:19:35 +02:00
parent b49efdbe27
commit 02206c27c7
16 changed files with 479 additions and 47 deletions

View File

@ -17,6 +17,9 @@ const routes: Routes = [
path: 'contact-us',
loadChildren: () => import('./contact/contact.module').then(m => m.ContactModule)
},
{
path: 'my-dashboards',
loadChildren: () => import('./my-stakeholders/my-stakeholders.module').then(m => m.MyStakeholdersModule)},
{
path: 'reload',
loadChildren: () => import('./reload/libReload.module').then(m => m.LibReloadModule)

View File

@ -77,6 +77,7 @@ export class AppComponent {
}
ngOnInit() {
this.userManagementService.fixRedirectURL = properties.afterLoginRedirectLink;
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
this.user = user;
this.setUserMenu();

View File

@ -8,7 +8,6 @@ import {AppComponent} from './app.component';
import {OpenaireErrorPageComponent} from './error/errorPage.component';
import {AppRoutingModule} from './app-routing.module';
import {SharedModule} from './shared/shared.module';
import {CookieLawModule} from './openaireLibrary/sharedComponents/cookie-law/cookie-law.module';
import {BottomModule} from './openaireLibrary/sharedComponents/bottom.module';
import {ErrorModule} from './openaireLibrary/error/error.module';
@ -17,6 +16,7 @@ import {DEFAULT_TIMEOUT, TimeoutInterceptor} from "./openaireLibrary/timeout-int
import {Schema2jsonldModule} from "./openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
import {HttpInterceptorService} from "./openaireLibrary/http-interceptor.service";
import {ErrorInterceptorService} from "./openaireLibrary/error-interceptor.service";
import {SharedModule} from "./openaireLibrary/shared/shared.module";
@NgModule({

View File

@ -0,0 +1,42 @@
<a *ngIf="directLink && stakeholder" [href]="getStakeholderPageUrl()" target="_blank"
class="uk-height-1-1 uk-link-reset" [class.uk-disabled]="!hasPermission()">
<ng-container [ngTemplateOutlet]="card"></ng-container>
</a>
<a *ngIf="!directLink && stakeholder" (click)="confirmModalOpen()"
class="uk-height-1-1 uk-link-reset" [class.uk-disabled]="!hasPermission()">
<ng-container [ngTemplateOutlet]="card"></ng-container>
</a>
<ng-template #card>
<div class="uk-padding">
<div *ngIf="stakeholder.visibility && stakeholder.visibility !== 'PUBLIC'"
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-column uk-flex-middle">
<icon [name]="visibilityIcon.get(stakeholder.visibility)" ratio="1.5" [flex]="true"></icon>
<span class="uk-text-small uk-text-capitalize">{{stakeholder.visibility.toLowerCase()}}</span>
</div>
<div class="uk-card-media-top uk-flex uk-flex-center uk-flex-middle uk-height-xsmall uk-padding-small">
<div>
<img *ngIf="community.logoUrl != null && community.logoUrl != ''" src="{{community.logoUrl}}"
alt="{{(community.title)?community.title:community.shortTitle}} logo" class="uk-height-max-xsmall">
</div>
</div>
<div class="uk-card-body uk-padding-remove uk-margin-small-bottom">
<h3 class="uk-text-center uk-h6 uk-link" [ngClass]="(showDescription)?'uk-margin-small-bottom':''">
<span *ngIf="community.title">
{{community.title.slice(0, thresholdTitle)}}
<span *ngIf="community.title.length > thresholdTitle">...</span>
</span>
<span *ngIf="!community.title && community.shortTitle">
{{community.shortTitle.slice(0, thresholdTitle)}}
<span *ngIf="community.shortTitle.length > thresholdTitle">...</span>
</span>
<!-- </a>-->
</h3>
</div>
</div>
</ng-template>
<modal-alert #AlertModal (alertOutput)="goToPage($event)">
<div class="uk-text-left">
You will be navigated to a new tab. Are you sure that you want to proceed?
</div>
</modal-alert>

View File

@ -0,0 +1,88 @@
import {Component, Input, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Location} from '@angular/common';
import {Stakeholder, StakeholderInfo, Visibility} from "../openaireLibrary/monitor/entities/stakeholder";
import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
import {properties} from "../../environments/environment"
import {LocalStorageService} from "../openaireLibrary/services/localStorage.service";
import {Subscriber} from "rxjs";
@Component({
selector: 'browse-stakeholder',
templateUrl: 'browse-stakeholder.component.html'
})
export class BrowseStakeholderComponent {
@Input() public stakeholder: StakeholderInfo = null;
@Input() public showDescription: boolean = true;
@Input() public smallTitle: boolean = false;
@ViewChild('AlertModal', { static: true }) modal;
public thresholdTitle: number = 45;
public properties: EnvProperties = properties;
public directLink: boolean = true;
public visibilityIcon: Map<Visibility, string> = new Map<Visibility, string> ([
["PRIVATE", 'incognito'],
["RESTRICTED", 'group']
]);
private subscriptions: any[] = [];
constructor(private route: ActivatedRoute,
private router: Router,
private location: Location,
private localStorageService: LocalStorageService) {
}
public ngOnInit() {
this.properties = properties;
this.subscriptions.push(this.localStorageService.get().subscribe(value => {
this.directLink = value;
}));
}
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscriber) {
subscription.unsubscribe();
}
});
}
isProduction(): boolean {
return this.properties.environment != "development";
}
getProductionPrefix(id:string): string {
return (this.properties.environment == "production") ? "" : "beta.";
}
public confirmModalOpen() {
this.modal.cancelButton = true;
this.modal.okButton = true;
this.modal.alertTitle = 'You are going to visit ' + this.stakeholder.name + ' Monitor Dashboard';
this.modal.alertMessage = false;
this.modal.okButtonLeft = false;
this.modal.okButtonText = 'Yes';
this.modal.cancelButtonText = 'No';
this.modal.choice = true;
this.modal.open();
}
public getStakeholderPageUrl() {
return this.properties.domain + this.properties.baseLink + '/dashboard/' + this.stakeholder.alias;
}
hasPermission() {
return this.stakeholder.visibility === "PUBLIC" ||
(this.stakeholder.visibility === "RESTRICTED" && (this.stakeholder.isManager || this.stakeholder.isMember)) ||
(this.stakeholder.visibility === "PRIVATE" && this.stakeholder.isManager);
}
public goToPage(data: any) {
if (data.value == true) {
let url = this.getStakeholderPageUrl();
this.localStorageService.setCommunityDirectLink(data.choice);
window.open(url, '_blank');
}
}
}

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 {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module";
import {UrlPrefixModule} from "../openaireLibrary/utils/pipes/url-prefix.module";
import {ManageModule} from "../openaireLibrary/utils/manage/manage.module";
import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.module";
import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
import {BrowseStakeholderComponent} from "./browse-stakeholder.component";
@NgModule({
imports: [
CommonModule, FormsModule, RouterModule,
ManageModule, AlertModalModule, UrlPrefixModule, LogoUrlPipeModule, IconsModule
],
declarations: [
BrowseStakeholderComponent
],
providers:[
],
exports: [
BrowseStakeholderComponent
]
})
export class BrowseStakeholderModule { }

View File

@ -0,0 +1,16 @@
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
import {LoginGuard} from "../openaireLibrary/login/loginGuard.guard";
import {MyStakeholdersComponent} from "./my-stakeholders.component";
@NgModule({
imports: [
RouterModule.forChild([
{path: '', component: MyStakeholdersComponent, canActivate: [LoginGuard], canDeactivate: [PreviousRouteRecorder]}
])
]
})
export class MyStakeholdersRoutingModule {
}

View File

@ -0,0 +1,102 @@
<schema2jsonld [URL]="properties.domain + properties.baseLink"
[logoURL]="properties.domain + properties.baseLink+'/assets/common-assets/logo-small-monitor.png'"
type="home"
name="OpenAIRE Monitor">
</schema2jsonld>
<div>
<div class="uk-section uk-container uk-container-large">
<div class="uk-padding-small">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
<div class="uk-margin-large-top uk-margin-large-bottom">
<div *ngIf="loading" class="uk-height-large uk-flex uk-flex-column uk-flex-center">
<loading></loading>
</div>
<div *ngIf="!loading">
<div *ngIf="manager.length > 0 || member.length > 0">
<div *ngIf="manager.length > 0" [class.uk-margin-xlarge-bottom]="member.length > 0">
<h1 class="uk-h1">You are managing</h1>
<div class="uk-margin-large-top">
<div class="uk-grid-match uk-grid-medium uk-child-width-1-4@xl uk-child-width-1-3@m uk-child-width-1-1 uk-flex-center uk-text-center" uk-grid>
<div *ngFor="let stakeholder of manager.slice(0, 4); let i = index">
<div class="uk-card uk-card-default uk-card-hover">
{{stakeholder.name}}
</div>
</div>
</div>
<div *ngIf="manager.length > 4" class="uk-text-center uk-margin-medium-top">
<a class="uk-visible@xl uk-margin-large-top uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/browse"
[queryParams]="{role: quote('manager')}">
<span class="uk-flex uk-flex-middle">
<span>View All ({{manager.length}})</span>
</span>
</a>
</div>
<div *ngIf="manager.length > 3" class="uk-text-center uk-margin-medium-top">
<a class="uk-hidden@xl uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/browse"
[queryParams]="{role: quote('manager')}">
<span class="uk-flex uk-flex-middle">
<span>View All ({{manager.length}})</span>
</span>
</a>
</div>
</div>
</div>
<div *ngIf="member.length > 0">
<h1 class="uk-h1">You are member of</h1>
<div class="uk-margin-large-top">
<div class="uk-visible@xl">
<div class="uk-grid-match uk-grid-medium uk-child-width-1-4 uk-flex-center uk-text-center" uk-grid>
<div *ngFor="let stakeholder of member.slice(0, 4); let i = index">
<div class="uk-card uk-card-default uk-card-hover">
{{stakeholder.name}}
</div>
</div>
</div>
<div *ngIf="member.length > 4" class="uk-text-center uk-margin-medium-top">
<a class="uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/browse"
[queryParams]="{role: quote('member')}">
<span class="uk-flex uk-flex-middle">
<span>View All ({{member.length}})</span>
</span>
</a>
</div>
</div>
<div class="uk-hidden@xl">
<div class="uk-grid-match uk-grid-medium uk-child-width-1-3@m uk-child-width-1-1 uk-flex-center uk-text-center" uk-grid>
<div *ngFor="let stakeholder of member.slice(0, 3); let i = index">
<div class="uk-card uk-card-default uk-card-hover">
{{stakeholder.name}}
</div>
</div>
</div>
<div *ngIf="member.length > 3" class="uk-text-center uk-margin-medium-top">
<a class="uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/browse"
[queryParams]="{role: quote('member')}">
<span class="uk-flex uk-flex-middle">
<span>View All ({{member.length}})</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="manager.length === 0 && member.length === 0">
<div class="uk-flex uk-flex-center uk-margin-large-bottom">
<div class="uk-card uk-card-default">
<div class="uk-card-body uk-text-bold uk-text-center ">
You are not yet member in any Dashboards.<br>
Start by browsing and subscribing in those that you are interested in.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,158 @@
import {Component} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Meta, Title} from '@angular/platform-browser';
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
import {User} 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 {HelperService} from "../openaireLibrary/utils/helper/helper.service";
import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
import {UserManagementService} from "../openaireLibrary/services/user-management.service";
import {Breadcrumb} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
import {properties} from "../../environments/environment";
import {Subscriber} from "rxjs";
import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
import {StakeholderInfo} from "../openaireLibrary/monitor/entities/stakeholder";
@Component({
selector: 'my-stakeholders',
templateUrl: 'my-stakeholders.component.html',
})
export class MyStakeholdersComponent {
public pageTitle = "OpenAIRE | My Dashboards";
public description = "OpenAIRE - Monitor, A new era of monitoring research. Open data. Open methodologies | My managing and member of Dashboards";
public stakeholders: StakeholderInfo[] = [];
public pageContents = null;
public divContents = null;
// Message variables
public status: number;
public loading: boolean = true;
public subscriberErrorMessage: string = "";
public errorCodes: ErrorCodes;
private errorMessages: ErrorMessagesComponent;
public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'My Dashboards'}];
public properties: EnvProperties = properties;
private user: User;
private subscriptions = [];
constructor(
private route: ActivatedRoute,
private _router: Router,
private _meta: Meta,
private _title: Title,
private _piwikService: PiwikService,
private stakeholderService: StakeholderService,
private helper: HelperService,
private seoService: SEOService,
private userManagementService: UserManagementService) {
this._meta.updateTag({content: this.description}, "name='description'");
this._meta.updateTag({content: this.description}, "property='og:description'");
this._meta.updateTag({content: this.pageTitle}, "property='og:title'");
this._title.setTitle(this.pageTitle);
this.errorCodes = new ErrorCodes();
this.errorMessages = new ErrorMessagesComponent();
this.status = this.errorCodes.LOADING;
}
public ngOnInit() {
var url = this.properties.domain + this.properties.baseLink + this._router.url;
this.seoService.createLinkForCanonicalURL(url, false);
this._meta.updateTag({content: url}, "property='og:url'");
if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
this.subscriptions.push(this._piwikService.trackView(this.properties, "OpenAIRE Connect", this.properties.piwikSiteId).subscribe());
}
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
this.user = user;
if (this.user) {
this.getStakeholders();
}
//this.getDivContents();
//this.getPageContents();
}));
}
private getPageContents() {
this.subscriptions.push(this.helper.getPageHelpContents(this.properties, 'connect', this._router.url).subscribe(contents => {
this.pageContents = contents;
}));
}
private getDivContents() {
this.subscriptions.push(this.helper.getDivHelpContents(this.properties, 'connect', this._router.url).subscribe(contents => {
this.divContents = contents;
}));
}
get manager(): StakeholderInfo[] {
return (this.stakeholders)?this.stakeholders.filter(stakeholder => stakeholder.isManager):[];
}
get member(): StakeholderInfo[] {
return (this.stakeholders)?this.stakeholders.filter(stakeholder => stakeholder.isMember):[];
}
public getStakeholders() {
this.loading = true;
this.status = this.errorCodes.LOADING;
this.subscriberErrorMessage = "";
this.stakeholders = [];
this.subscriptions.push(this.stakeholderService.getMyStakeholders(properties.monitorServiceAPIURL).subscribe(
stakeholders => {
this.stakeholders = StakeholderInfo.toStakeholderInfo(stakeholders, this.user);
this.sort(this.stakeholders);
this.loading = false;
},
error => {
this.status = this.handleError("Error getting communities", error);
this.loading = false;
}
));
}
private sort(results: StakeholderInfo[]) {
results.sort((left, right): number => {
if (!right.updateDate || left.updateDate > right.updateDate) {
return -1;
} else if (!left.updateDate || left.updateDate < right.updateDate) {
return 1;
} else {
if (left.name > right.name) {
return 1;
} else if (left.name < right.name) {
return -1;
} else {
return 0;
}
}
})
}
public quote(param: string): string {
return StringUtils.quote(param);
}
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscriber) {
subscription.unsubscribe();
}
});
}
private handleError(message: string, error): number {
let code = "";
if (!error.status) {
code = error.code;
} else {
code = error.status;
}
console.error("Communities (component): " + message, error);
return this.errorMessages.getErrorCode(code);
}
}

View File

@ -0,0 +1,37 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {ManageModule} from '../openaireLibrary/utils/manage/manage.module';
import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
import {ErrorMessagesModule} from '../openaireLibrary/utils/errorMessages.module';
import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module";
import {LoginGuard} from "../openaireLibrary/login/loginGuard.guard";
import {HelperModule} from "../openaireLibrary/utils/helper/helper.module";
import {IsRouteEnabled} from "../openaireLibrary/error/isRouteEnabled.guard";
import {BreadcrumbsModule} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.module";
import {MyStakeholdersRoutingModule} from "./my-stakeholders-routing.module";
import {MyStakeholdersComponent} from "./my-stakeholders.component";
import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
@NgModule({
imports: [
CommonModule, FormsModule, RouterModule, HelperModule,
ManageModule, ErrorMessagesModule, Schema2jsonldModule, SEOServiceModule,
MyStakeholdersRoutingModule, BreadcrumbsModule, LoadingModule
],
declarations: [
MyStakeholdersComponent
],
providers: [
LoginGuard, PreviousRouteRecorder, PiwikService
],
exports: [
MyStakeholdersComponent
]
})
export class MyStakeholdersModule {
}

@ -1 +1 @@
Subproject commit 4e9981f24f2f9bc7ac0f49897e987a26528b82f8
Subproject commit cf6ab4a03b4aea7a5c14f6c086e531642f5f1a27

View File

@ -177,6 +177,7 @@ export class SearchStakeholdersComponent {
this.sort();
this.searchUtils.totalResults = this.results.length;
this.filters = this.searchPage.prepareFiltersToShow(this.filters, this.searchUtils.totalResults);
console.log(this.filters);
this.results = this.results.slice((this.searchUtils.page - 1) * this.searchUtils.size, (this.searchUtils.page * this.searchUtils.size));
this.searchUtils.status = this.errorCodes.DONE;
if (this.searchUtils.totalResults == 0) {

View File

@ -1,45 +0,0 @@
import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
const MODULES = [
// Do NOT include UniversalModule, HttpModule, or JsonpModule here
CommonModule,
RouterModule,
FormsModule,
ReactiveFormsModule
];
const PIPES = [
// put pipes here
];
const COMPONENTS = [
// put shared components here
];
@NgModule({
imports: [
...MODULES
],
declarations: [
...PIPES,
...COMPONENTS
],
exports: [
...MODULES,
...PIPES,
...COMPONENTS
]
})
export class SharedModule {
static forRoot(): ModuleWithProviders<SharedModule> {
return {
ngModule: SharedModule,
};
}
}

View File

@ -59,6 +59,7 @@ export let properties: EnvProperties = {
resultsPerPage: 10,
baseLink : "",
domain : "https://beta.monitor.openaire.eu",
afterLoginRedirectLink: '/my-dashboards',
searchLinkToResult: "/search/result?id=",
searchLinkToPublication: "/search/publication?articleId=",
searchLinkToProject: "/search/project?projectId=",

View File

@ -59,6 +59,7 @@ export let properties: EnvProperties = {
resultsPerPage: 10,
baseLink : "",
domain : "https://monitor.openaire.eu",
afterLoginRedirectLink: '/my-dashboards',
searchLinkToResult: "/search/result?id=",
searchLinkToPublication: "/search/publication?articleId=",
searchLinkToProject: "/search/project?projectId=",

View File

@ -59,6 +59,7 @@ export let properties: EnvProperties = {
resultsPerPage: 10,
baseLink : "",
domain : "http://dl170.madgik.di.uoa.gr/monitor",
afterLoginRedirectLink: '/my-dashboards',
searchLinkToResult: "/search/result?id=",
searchLinkToPublication: "/search/publication?articleId=",
searchLinkToProject: "/search/project?projectId=",