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

Finish UI of subscribers, managers, notification settings and personal info. Change claims property to dl170 for development

This commit is contained in:
Konstantinos Triantafyllou 2022-06-28 21:15:05 +03:00
parent 27c85f102e
commit 82c8c7f5ea
15 changed files with 256 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -3,7 +3,7 @@
"version": "1.0.0", "version": "1.0.0",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
"start": "ng serve --host 0.0.0.0 --disable-host-check --port=5001", "start": "ng serve --host 0.0.0.0 --disable-host-check --port=5000",
"build": "ng build", "build": "ng build",
"build-dev": "ng build --configuration=development", "build-dev": "ng build --configuration=development",
"build-beta": "ng build --configuration=beta", "build-beta": "ng build --configuration=beta",

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 5e1fde78411e2913c3757534a073ace32a4eacf2 Subproject commit 9b5607fbd0204b44fb2c650df77fcb88f613fc2e

116
src/app/pages/usernotifications/manage-user-notifications.component.html
View File

@ -1,75 +1,73 @@
<div page-content> <div page-content (stickyEmitter)="stickyPageHeader = $event">
<div header> <div header>
<div class="uk-flex uk-flex-middle uk-margin-top info" [class.uk-active]="stickyPageHeader">
<div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Notification Settings</div>
<h1 class="uk-h4 uk-margin-remove">{{community.shortTitle}}</h1>
</div>
</div>
<users-tabs tab="notifications"></users-tabs> <users-tabs tab="notifications"></users-tabs>
</div> </div>
<div inner> <div inner>
<form> <div class="uk-margin-top">
<div class="uk-card-header"> <div class="uk-flex uk-flex-center uk-flex-right@m">
<div class=" uk-margin-small-top uk-margin-small-bottom"> <button class="uk-button uk-button-secondary" [class.uk-disabled]="!hasChanged || showLoading"
<button class="uk-float-right uk-button uk-margin-left uk-button-secondary " [disabled]="!hasChanged || showLoading" [disabled]="!hasChanged || showLoading"
(click)="updateUserNotifications()">Save (click)="resetForm()">Reset
</button> </button>
<button class=" uk-float-right uk-button uk-button-secondary outlined" [disabled]="!hasChanged || showLoading" <button class="uk-button uk-margin-left uk-button-primary"
(click)="resetForm()">Reset [disabled]="!hasChanged || showLoading" [class.uk-disabled]="!hasChanged || showLoading"
</button> (click)="updateUserNotifications()">Save
<div>Notifications settings</div> </button>
</div>
</div> </div>
<div class="uk-card uk-card-default uk-position-relative" style="min-height: 60vh"> </div>
<div *ngIf="communityId && userNotifications && notifications && !showLoading" style="max-height: 60vh" <div class="uk-section uk-section-small uk-container uk-container-small uk-position-relative">
class="uk-overflow-auto uk-padding uk-padding-remove-bottom"> <div *ngIf="!showLoading" class="uk-flex uk-flex-center">
<!--<div class="uk-alert uk-alert-primary uk-flex-center" role="alert">Notification settings are related to your <div class="uk-width-xlarge uk-margin-bottom">
personal <div class="uk-margin uk-grid" >
account. <div class="uk-width-expand" uk-tooltip="Get e-mail notification when there are changes in the managers list of your community">
</div>--> Notify me for any changes in the managers list</div>
<h5 class="uk-text-bold uk-margin-medium-bottom">Manage Notifications</h5> <mat-slide-toggle [checked]="userNotifications.notifyForNewManagers"
<div class="uk-width-large uk-margin-bottom"> (change)="($event.source.checked = userNotifications.notifyForNewManagers);changeValueForNewManagers(userNotifications.notifyForNewManagers)">
<div class="uk-margin uk-grid" > {{userNotifications.notifyForNewManagers?' Enabled':'Disabled'}}
<div class="uk-width-expand" title="Get e-mail notification when there are changes in the managers list of your community"> </mat-slide-toggle>
Notifications for manager list changes <span>{{userNotifications.notifyForNewManagers ? '(Enabled)' : '(Disabled)'}}</span></div> </div>
<mat-slide-toggle [checked]="userNotifications.notifyForNewManagers" <div class="uk-margin uk-grid">
(change)="($event.source.checked = userNotifications.notifyForNewManagers);changeValueForNewManagers(userNotifications.notifyForNewManagers)"> <div class="uk-width-expand" uk-tooltip="Get e-mail notification when a user subscribes in your community">
</mat-slide-toggle> Notify me for new members
</div> </div>
<mat-slide-toggle [checked]="userNotifications.notifyForNewSubscribers"
(change)="($event.source.checked = userNotifications.notifyForNewSubscribers);changeValueForNewSubscribers(userNotifications.notifyForNewSubscribers)">
{{userNotifications.notifyForNewSubscribers?' Enabled':'Disabled'}}
</mat-slide-toggle>
</div>
<hr class="uk-margin-medium">
<div *ngFor="let notification of notifications; let i=index">
<div class="uk-margin uk-grid"> <div class="uk-margin uk-grid">
<div class="uk-width-expand" title="Get e-mail notification when a user subscribes in your community">Notifications for new <div class="uk-width-expand"
subscribers <span>{{userNotifications.notifyForNewSubscribers ? '(Enabled)' : '(Disabled)'}}</span></div> title="Get e-mail notification when users create new links related your community">
<mat-slide-toggle [checked]="userNotifications.notifyForNewSubscribers" Notify me for any linking actions related to your community</div>
(change)="($event.source.checked = userNotifications.notifyForNewSubscribers);changeValueForNewSubscribers(userNotifications.notifyForNewSubscribers)"> <mat-slide-toggle [checked]="notification.notify"
(change)="($event.source.checked = notification.notify);changeNotify(notification, !notification.notify, i)">
{{notification.notify?' Enabled':'Disabled'}}
</mat-slide-toggle> </mat-slide-toggle>
</div> </div>
<hr class="uk-margin-medium"> <div *ngIf="notification.notify" class="uk-margin">
<div *ngFor="let notification of notifications; let i=index"> <div class="uk-text-emphasis uk-text-bold uk-margin-small-bottom">Set Notification Frequency</div>
<div class="uk-margin uk-grid"> <div class="uk-flex uk-flex-between">
<div class="uk-width-expand" <label *ngFor="let option of frequencyOptions">
title="Get e-mail notification when users create new links related your community">Notify for <input class="uk-radio" type="radio" [checked]="notification.frequency === option.value"
links (click)="notification.frequency = option.value">
<span>{{notification.notify ? '(Enabled)' : '(Disabled)'}}</span></div> <span class="uk-margin-small-left">{{option.label}}</span>
<mat-slide-toggle [checked]="notification.notify" </label>
(change)="($event.source.checked = notification.notify);changeNotify(notification, !notification.notify, i)">
</mat-slide-toggle>
</div>
<div *ngIf="notification.notify" [class]="notification.notify ? 'uk-margin' :
'uk-margin cursor-not-allowed'">
<div class="input-box">
<mat-form-field class="uk-width-1-1">
<mat-select #select class="" [(ngModel)]="notification.frequency"
(ngModelChange)="changeFrequency()"
name="select_frequency" [disableOptionCentering]="true">
<mat-option *ngFor=" let fr of frequencyOptions let i = index"
[value]="fr.value">{{fr.label}}</mat-option>
</mat-select>
</mat-form-field>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
</div> </div>
</form> <div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
</div>
</div> </div>
</div> </div>

91
src/app/pages/usernotifications/manage-user-notifications.component.ts
View File

@ -11,10 +11,13 @@ import {UserManagementService} from '../../openaireLibrary/services/user-managem
import {Title} from '@angular/platform-browser'; import {Title} from '@angular/platform-browser';
import {CommunityService} from '../../openaireLibrary/connect/community/community.service'; import {CommunityService} from '../../openaireLibrary/connect/community/community.service';
import {properties} from '../../../environments/environment'; import {properties} from '../../../environments/environment';
import { Subscriber} from 'rxjs'; import {Subscriber} from 'rxjs';
import {MailPrefsService} from '../../openaireLibrary/connect/userEmailPreferences/mailPrefs.service'; import {MailPrefsService} from '../../openaireLibrary/connect/userEmailPreferences/mailPrefs.service';
import {CommunityInfo} from "../../openaireLibrary/connect/community/communityInfo";
import {Option} from "../../openaireLibrary/sharedComponents/input/input.component";
declare var UIkit; declare var UIkit;
@Component({ @Component({
selector: 'manage-user-notifications', selector: 'manage-user-notifications',
templateUrl: './manage-user-notifications.component.html', templateUrl: './manage-user-notifications.component.html',
@ -26,23 +29,26 @@ export class ManageUserNotificationsComponent implements OnInit {
myForm: FormGroup; myForm: FormGroup;
public properties: EnvProperties = null; public properties: EnvProperties = null;
public communityId; public community: CommunityInfo;
public userNotifications:UserNotificationsRights = null; public userNotifications: UserNotificationsRights = null;
public initialUserNotifications:UserNotificationsRights = null; public initialUserNotifications: UserNotificationsRights = null;
public notifications = null; public notifications = null;
public initialNotifications = []; public initialNotifications = [];
public userEmail = null; public userEmail = null;
public stickyPageHeader: boolean = false;
public showLoading = true; public showLoading = true;
public hasChanged = false; public hasChanged = false;
public user: User; public user: User;
private subscriptions = []; private subscriptions = [];
frequencyOptions = [{label:"Daily", value: 24}, {label:"Every two days", value: 48}, {label:"Weekly", value: 168}] frequencyOptions: Option[] = [{label: "Daily", value: 24}, {label: "Every two days", value: 48}, {label: "Weekly", value: 168}]
constructor(private route: ActivatedRoute, private _router: Router, public _fb: FormBuilder, constructor(private route: ActivatedRoute, private _router: Router, public _fb: FormBuilder,
private title: Title, private title: Title,
private _manageUserNotificationsService: ManageUserNotificationsService, private manageUserNotificationsService: ManageUserNotificationsService,
private element: ElementRef, private userManagementService: UserManagementService, private communityService: CommunityService, private _mailPrefsService: MailPrefsService,) { private element: ElementRef, private userManagementService: UserManagementService,
private communityService: CommunityService,
private mailPrefsService: MailPrefsService) {
} }
ngOnInit() { ngOnInit() {
@ -50,22 +56,22 @@ export class ManageUserNotificationsComponent implements OnInit {
this.properties = properties; this.properties = properties;
HelperFunctions.scroll(); HelperFunctions.scroll();
this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(community => { this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(community => {
if(community) { if (community) {
this.communityId =community.communityId; this.community = community;
this.title.setTitle( this.communityId.toUpperCase() + ' | User Notifications'); this.title.setTitle(this.community.shortTitle.toUpperCase() + ' | User Notifications');
this.showLoading = true; this.showLoading = true;
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => { this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
this.user = user; this.user = user;
if (this.user) { if (this.user) {
this.userEmail = this.user.email; this.userEmail = this.user.email;
this.subscriptions.push(this._manageUserNotificationsService.getUserNotifications(this.properties, this.communityId).subscribe( this.subscriptions.push(this.manageUserNotificationsService.getUserNotifications(this.properties, this.community.communityId).subscribe(
userNotifications => { userNotifications => {
this.initialUserNotifications = userNotifications; this.initialUserNotifications = userNotifications;
if (this.initialUserNotifications['notifyForNewManagers'] == null || if (this.initialUserNotifications['notifyForNewManagers'] == null ||
this.initialUserNotifications['notifyForNewSubscribers'] == null) { this.initialUserNotifications['notifyForNewSubscribers'] == null) {
if(Session.isManager("community",this.communityId, this.user)) { if (Session.isManager("community", this.community.communityId, this.user)) {
this.initialUserNotifications = new UserNotificationsRights(true, true, ""); this.initialUserNotifications = new UserNotificationsRights(true, true, "");
}else{ } else {
this.initialUserNotifications = new UserNotificationsRights(false, false, ""); this.initialUserNotifications = new UserNotificationsRights(false, false, "");
} }
} }
@ -75,9 +81,9 @@ export class ManageUserNotificationsComponent implements OnInit {
}, },
error => { error => {
if (error.status === 404) { if (error.status === 404) {
if(Session.isManager("community",this.communityId, this.user)) { if (Session.isManager("community", this.community.communityId, this.user)) {
this.initialUserNotifications = new UserNotificationsRights(true, true, ""); this.initialUserNotifications = new UserNotificationsRights(true, true, "");
}else{ } else {
this.initialUserNotifications = new UserNotificationsRights(false, false, ""); this.initialUserNotifications = new UserNotificationsRights(false, false, "");
} }
this.userNotifications = JSON.parse(JSON.stringify(this.initialUserNotifications)); this.userNotifications = JSON.parse(JSON.stringify(this.initialUserNotifications));
@ -92,28 +98,38 @@ export class ManageUserNotificationsComponent implements OnInit {
} }
})); }));
} }
getClaimsNotifications(){
this.subscriptions.push(this._mailPrefsService.getUserEmailPreferencesForCommunity(this.communityId, this.properties.claimsAPIURL).subscribe( getClaimsNotifications() {
this.subscriptions.push(this.mailPrefsService.getUserEmailPreferencesForCommunity(this.community.communityId, this.properties.claimsAPIURL).subscribe(
data => { data => {
this.initialNotifications = data.data; if (data.code != 204) {
this.notifications = JSON.parse(JSON.stringify( this.initialNotifications )); this.initialNotifications = data.data;
} else {
if (Session.isManager("community", this.community.communityId, this.user)) {
this.initialNotifications = [{notify: true, frequency: 24, openaireId: this.community.communityId}];
} else {
this.initialNotifications = [{notify: false, frequency: 24, openaireId: this.community.communityId}];
}
}
this.notifications = JSON.parse(JSON.stringify(this.initialNotifications));
this.showLoading = false; this.showLoading = false;
}, },
err => { err => {
if(err.status === 404) { if (err.status === 404) {
if(Session.isManager("community",this.communityId, this.user)) { if (Session.isManager("community", this.community.communityId, this.user)) {
this.initialNotifications = [{notify: true, frequency:24, openaireId: this.communityId}]; this.initialNotifications = [{notify: true, frequency: 24, openaireId: this.community.communityId}];
}else{ } else {
this.initialNotifications = [{notify: false, frequency:24, openaireId: this.communityId}]; this.initialNotifications = [{notify: false, frequency: 24, openaireId: this.community.communityId}];
} }
this.notifications = JSON.parse(JSON.stringify( this.initialNotifications )); this.notifications = JSON.parse(JSON.stringify(this.initialNotifications));
}else{ } else {
this.handleError("Error getting user email preferences for community with id: "+this.communityId, err); this.handleError("Error getting user email preferences for community with id: " + this.community.communityId, err);
} }
this.showLoading = false; this.showLoading = false;
} }
)); ));
} }
ngOnDestroy() { ngOnDestroy() {
this.subscriptions.forEach(value => { this.subscriptions.forEach(value => {
if (value instanceof Subscriber) { if (value instanceof Subscriber) {
@ -128,27 +144,24 @@ export class ManageUserNotificationsComponent implements OnInit {
this._router.navigate(['/user-info'], this._router.navigate(['/user-info'],
{queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}}); {queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}});
} else { } else {
if (this.communityId != null && this.communityId !== '') { if (this.community.communityId != null && this.community.communityId !== '') {
// this.mailPrefs.saveNotification(0);
// this.successfulSaveMessage = '';
this.showLoading = true; this.showLoading = true;
const userNotifications = this.parseUpdatedUserNotifications(); const userNotifications = this.parseUpdatedUserNotifications();
this.subscriptions.push(this._manageUserNotificationsService.updateUserNotifications(this.properties, this.communityId, userNotifications).subscribe( this.subscriptions.push(this.manageUserNotificationsService.updateUserNotifications(this.properties, this.community.communityId, userNotifications).subscribe(
userNotifications => { userNotifications => {
this.initialUserNotifications = JSON.parse(JSON.stringify(this.userNotifications)); this.initialUserNotifications = JSON.parse(JSON.stringify(this.userNotifications));
this.handleSuccessfulSave('Notification settings saved!'); this.handleSuccessfulSave('Notification settings saved!');
}, },
error => this.handleUpdateError('System error updating user notifications', error) error => this.handleUpdateError('System error updating user notifications', error)
)); ));
this.subscriptions.push(this._mailPrefsService.saveUserEmailPreferences(this.notifications[0], this.properties.claimsAPIURL).subscribe( this.subscriptions.push(this.mailPrefsService.saveUserEmailPreferences(this.notifications[0], this.properties.claimsAPIURL).subscribe(
data => { data => {
this.initialNotifications[0] = JSON.parse(JSON.stringify( this.notifications[0] )); this.initialNotifications[0] = JSON.parse(JSON.stringify(this.notifications[0]));
this.handleSuccessfulSave('Claims notification settings saved!'); this.handleSuccessfulSave('Claims notification settings saved!');
}, },
err => { err => {
//console.log(err); //console.log(err);
this.handleError("Error saving user email preferences: "+JSON.stringify(this.notifications[0]), err); this.handleError("Error saving user email preferences: " + JSON.stringify(this.notifications[0]), err);
} }
)); ));
} }
@ -180,7 +193,7 @@ export class ManageUserNotificationsComponent implements OnInit {
}); });
} else { } else {
// this.mailPrefs.restoreNotification(0); // this.mailPrefs.restoreNotification(0);
this.notifications[0] = JSON.parse(JSON.stringify( this.initialNotifications[0] )); this.notifications[0] = JSON.parse(JSON.stringify(this.initialNotifications[0]));
if (this.userNotifications && this.initialUserNotifications) { if (this.userNotifications && this.initialUserNotifications) {
// this.successfulSaveMessage = ''; // this.successfulSaveMessage = '';
@ -253,8 +266,8 @@ export class ManageUserNotificationsComponent implements OnInit {
} }
changeNotify(notification: any, checked: boolean, index: number) { changeNotify(notification: any, checked: boolean, index: number) {
notification.notify = checked; notification.notify = checked;
this.change(); this.change();
} }
changeFrequency() { changeFrequency() {

7
src/app/pages/usernotifications/manage-user-notifications.module.ts
View File

@ -5,7 +5,6 @@ import {FormsModule} from '@angular/forms';
import {ManageUserNotificationsComponent} from './manage-user-notifications.component'; import {ManageUserNotificationsComponent} from './manage-user-notifications.component';
import {ManageUserNotificationsService} from './manage-user-notifications.service'; import {ManageUserNotificationsService} from './manage-user-notifications.service';
import {MailPrefsModule} from '../../openaireLibrary/connect/userEmailPreferences/mailsPrefs.module';
import {ManageUserNotificationsRoutingModule} from './manage-user-notifications-routing.module'; import {ManageUserNotificationsRoutingModule} from './manage-user-notifications-routing.module';
import {UsersTabsModule} from '../users/users-tabs.module'; import {UsersTabsModule} from '../users/users-tabs.module';
import {PageContentModule} from '../../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module'; import {PageContentModule} from '../../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module';
@ -13,16 +12,18 @@ import { MatSelectModule } from '@angular/material/select';
import { MatSlideToggleModule } from '@angular/material/slide-toggle'; import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import {LoadingModule} from '../../openaireLibrary/utils/loading/loading.module'; import {LoadingModule} from '../../openaireLibrary/utils/loading/loading.module';
import {SharedModule} from '../../openaireLibrary/shared/shared.module'; import {SharedModule} from '../../openaireLibrary/shared/shared.module';
import {MailPrefsService} from "../../openaireLibrary/connect/userEmailPreferences/mailPrefs.service";
import {InputModule} from "../../openaireLibrary/sharedComponents/input/input.module";
@NgModule({ @NgModule({
imports: [ imports: [
ManageUserNotificationsRoutingModule, RouterModule, CommonModule, FormsModule, MailPrefsModule, UsersTabsModule, PageContentModule, MatSlideToggleModule, LoadingModule, SharedModule, MatSelectModule ManageUserNotificationsRoutingModule, RouterModule, CommonModule, FormsModule, UsersTabsModule, PageContentModule, MatSlideToggleModule, LoadingModule, SharedModule, MatSelectModule, InputModule
], ],
declarations: [ declarations: [
ManageUserNotificationsComponent ManageUserNotificationsComponent
], ],
providers: [ providers: [
ManageUserNotificationsService ManageUserNotificationsService, MailPrefsService
], ],
exports: [ exports: [
ManageUserNotificationsComponent ManageUserNotificationsComponent

11
src/app/pages/users/personal-info/personal-info.component.css → src/app/pages/users/personal-info/personal-info.component.less
View File

@ -1,10 +1,4 @@
form { @import (reference) "~src/assets/openaire-theme/less/_import-variables";
font-family: "Roboto", sans-serif;
}
form .connected {
color: rgba(var(--text-color-rgb), 0.5);
}
form .image { form .image {
position: relative; position: relative;
@ -20,9 +14,8 @@ form .image icon {
} }
form .image img { form .image img {
box-shadow: 0 3px 6px #00000029; box-shadow: @global-medium-box-shadow;
border-radius: 50%; border-radius: 50%;
margin-bottom: 10px;
width: 120px; width: 120px;
height: 120px; height: 120px;
object-fit: cover; object-fit: cover;

173
src/app/pages/users/personal-info/personal-info.component.ts
View File

@ -15,39 +15,40 @@ import {HelpContentService} from "../../../services/help-content.service";
import {Page} from "../../../domain/page"; import {Page} from "../../../domain/page";
import {CommunityService} from "../../../openaireLibrary/connect/community/community.service"; import {CommunityService} from "../../../openaireLibrary/connect/community/community.service";
import {StringUtils} from "../../../openaireLibrary/utils/string-utils.class"; import {StringUtils} from "../../../openaireLibrary/utils/string-utils.class";
import {CommunityInfo} from "../../../openaireLibrary/connect/community/communityInfo";
declare var UIkit; declare var UIkit;
@Component({ @Component({
selector: 'personal-info', selector: 'personal-info',
template: ` template: `
<div page-content> <div page-content (stickyEmitter)="stickyPageHeader = $event">
<div header> <div header>
<div class="uk-flex uk-flex-middle uk-margin-top info" [class.uk-active]="stickyPageHeader">
<div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Personal Info &
Affiliations
</div>
<h1 class="uk-h4 uk-margin-remove">{{community.shortTitle}}</h1>
</div>
</div>
<users-tabs tab="personal"></users-tabs> <users-tabs tab="personal"></users-tabs>
</div> </div>
<div inner> <div inner>
<div class="uk-card-header"> <div class="uk-margin-top">
<div class="uk-flex uk-child-width-1-1 uk-child-width-1-2@m uk-grid" uk-grid> <div class="uk-flex uk-flex-center uk-flex-right@m">
<div> <button class="uk-button uk-button-secondary" [class.uk-disabled]="!hasChanged || loading"
<div class="uk-text-small title"> [disabled]="!hasChanged || loading"
Personal Info & Affiliations (click)="reset()">Reset
<span *ngIf="!loading && (curatorFb && curatorFb.dirty && !newCurator)"> (unsaved changes)</span> </button>
</div> <button class="uk-button uk-margin-left uk-button-primary"
</div> [disabled]="!hasChanged || loading" [class.uk-disabled]="!hasChanged || loading"
<div class="uk-text-right@m uk-text-center"> (click)="updateCurator()">Save
<button class="uk-button uk-button-secondary outlined uk-margin-right" </button>
(click)="reset()"
[disabled]="loading || !hasChanged">Reset
</button>
<button class="uk-button uk-button-secondary"
(click)="updateCurator()"
[disabled]="loading || !hasChanged || curatorFb.invalid">Save
</button>
</div>
</div> </div>
</div> </div>
<div class="uk-card uk-card-default uk-position-relative" style="min-height: 60vh"> <div class="uk-section uk-section-small">
<div [class.hidden]="loading" style="max-height: 60vh" class="uk-overflow-auto uk-padding-remove-bottom uk-padding-large"> <div *ngIf="!loading" class="uk-container">
<form *ngIf="curatorFb" [formGroup]="curatorFb"> <form *ngIf="curatorFb" [formGroup]="curatorFb">
<div class="uk-grid uk-margin-large-bottom" uk-grid> <div class="uk-grid uk-margin-large-bottom" uk-grid>
<div class="uk-grid uk-width-1-1 uk-flex-middle" uk-grid> <div class="uk-grid uk-width-1-1 uk-flex-middle" uk-grid>
@ -67,57 +68,61 @@ declare var UIkit;
</div> </div>
</div> </div>
<div class="uk-width-expand"> <div class="uk-width-expand">
<h5 class="uk-text-secondary uk-text-bold">{{user.firstname + ' ' + user.lastname}}</h5> <div dashboard-input class="uk-width-large@m uk-width-1-1" placeholder="Name"
<!--<div> [formInput]="curatorFb.get('name')" inputClass="border-bottom normal-font-size"></div>
<span class="connected">Connected with: </span>
<span class="uk-text-secondary uk-text-bold">{{user.email}}</span>
</div>-->
</div> </div>
</div> </div>
<div dashboard-input class="uk-width-1-1" label="Display Name" placeholder="Write your name" <div dashboard-input class="uk-width-1-1" placeholder="Biography"
[formInput]="curatorFb.get('name')"></div> [formInput]="curatorFb.get('bio')" type="textarea" rows="8"></div>
<div dashboard-input class="uk-width-1-1" label="Biography" placeholder="Write biography..."
[formInput]="curatorFb.get('bio')" type="textarea" rows="4"></div>
<div class="uk-width-1-1"> <div class="uk-width-1-1">
<h5 class="uk-margin-large uk-text-bold">My Affiliations</h5> <h5 class="uk-margin-large uk-text-bold">My Affiliations</h5>
<div class="uk-flex uk-flex-center"> <div class="uk-flex uk-flex-center">
<a (click)="editAffiliationOpen()" class="uk-flex uk-flex-middle uk-text-uppercase"> <button (click)="editAffiliationOpen()" class="uk-button uk-button-link uk-flex uk-flex-middle">
<button class="large uk-icon-button uk-button-secondary"> <icon [flex]="true" name="add"></icon>
<icon name="add"></icon> <span class="uk-margin-small-left">Add New Affiliation</span>
</button> </button>
<button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">
Add New Affiliation
</button>
</a>
</div> </div>
<div class="uk-margin-medium"> <div class="uk-margin-medium uk-grid uk-child-width-1-2@m uk-child-width-1-1" uk-grid>
<div *ngFor="let affiliation of affiliations.controls; let i=index" <div *ngFor="let affiliation of affiliations.controls; let i=index">
class="uk-card uk-card-default uk-card-body uk-text-small uk-margin-bottom"> <div class="uk-card uk-card-default uk-margin-bottom">
<div class="uk-grid uk-grid-divider uk-flex-middle" uk-grid> <div class="uk-card-body">
<div class="uk-width-expand@m uk-width-1-1 uk-grid uk-flex-middle" uk-grid> <div class="uk-grid uk-flex-middle" uk-grid>
<div class="uk-width-small"> <div class="uk-width-small">
<img [src]="affiliation.value.logo_url | urlPrefix"> <img [src]="affiliation.value.logo_url | urlPrefix">
</div> </div>
<div class="uk-width-auto"> <div class="uk-width-expand">
<h6>{{affiliation.value.name}}</h6> <h6>{{affiliation.value.name}}</h6>
URL: <a [href]="affiliation.value.website_url | urlPrefix" target="_blank">{{affiliation.value.website_url}}</a> <div class="uk-text-truncate">
</div> <span class="uk-text-meta uk-margin-xsmall-right">URL:</span>
</div> <a [href]="affiliation.value.website_url | urlPrefix" class="uk-link"
<div class="uk-width-auto@m uk-width-1-1"> target="_blank">{{affiliation.value.website_url}}</a>
<div class="uk-width-1-1 uk-flex uk-flex-center">
<div class="uk-padding-small uk-padding-remove-horizontal">
<a (click)="editAffiliationOpen(i)" class="uk-button action uk-flex uk-flex-middle">
<icon name="edit" ratio="0.7"></icon>
<span class="uk-margin-small-left">Edit Affiliation</span>
</a>
<a (click)="deleteAffiliationOpen(i)" class="uk-button action uk-flex uk-flex-middle uk-margin-small-top">
<icon name="remove" ratio="0.7"></icon>
<span class="uk-margin-small-left">Delete Affiliation</span>
</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="uk-card-footer uk-padding-remove-vertical">
<div class="uk-grid uk-grid-small uk-flex-nowrap uk-grid-divider uk-flex-right" uk-grid>
<div>
<div class="uk-padding-small uk-padding-remove-horizontal">
<a (click)="editAffiliationOpen(i)"
class="uk-button uk-button-link uk-flex uk-flex-middle">
<icon name="edit" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Edit</span>
</a>
</div>
</div>
<div>
<div class="uk-padding-small uk-padding-remove-horizontal">
<button class="uk-button uk-button-link uk-flex uk-flex-middle"
(click)="deleteAffiliationOpen(i)">
<icon name="delete" [flex]="true"></icon>
<span class="uk-margin-xsmall-left"> Delete</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -134,7 +139,7 @@ declare var UIkit;
</div> </div>
</div> </div>
</div> </div>
<modal-alert #privacyStatement (alertOutput)="privacyStatement.cancel()"> <modal-alert #privacyStatement [overflowBody]="false" (alertOutput)="privacyStatement.cancel()">
<div class="uk-text-small"> <div class="uk-text-small">
Your personal data and photo are processed by OpenAIRE in conformity with personal data protection legal Your personal data and photo are processed by OpenAIRE in conformity with personal data protection legal
framework. framework.
@ -145,26 +150,29 @@ declare var UIkit;
if you have any inquiries. if you have any inquiries.
</div> </div>
</modal-alert> </modal-alert>
<modal-alert #affiliationModal [okDisabled]="affiliationFb && affiliationFb.invalid" (alertOutput)="editAffiliation()"> <modal-alert #affiliationModal [okDisabled]="affiliationFb && affiliationFb.invalid"
(alertOutput)="editAffiliation()">
<form *ngIf="affiliationFb" [formGroup]="affiliationFb"> <form *ngIf="affiliationFb" [formGroup]="affiliationFb">
<div class="uk-grid uk-padding uk-padding-remove-horizontal uk-child-width-1-1" uk-grid> <div class="uk-grid uk-child-width-1-1" uk-grid>
<div dashboard-input label="Name" placeholder="Write affiliation's name" [formInput]="affiliationFb.get('name')"></div> <div input placeholder="Name"
<div dashboard-input label="Logo URL" type="logoURL" placeholder="Write your affiliation's logo URL" [formInput]="affiliationFb.get('logo_url')"></div> [formInput]="affiliationFb.get('name')"></div>
<div dashboard-input label="Website URL" type="URL" placeholder="Write your affiliation's website URL" [formInput]="affiliationFb.get('website_url')"></div> <div input type="logoURL" placeholder="Logo URL"
[formInput]="affiliationFb.get('logo_url')"></div>
<div input type="URL" placeholder="Website URL"
[formInput]="affiliationFb.get('website_url')"></div>
</div> </div>
</form> </form>
</modal-alert> </modal-alert>
<modal-alert #removeAffiliationModal (alertOutput)="removeAffiliation()"> <modal-alert #removeAffiliationModal [overflowBody]="false" (alertOutput)="removeAffiliation()">
</modal-alert> </modal-alert>
<modal-alert #enableCuratorsModal (alertOutput)="enableCurators()"> <modal-alert #enableCuratorsModal [overflowBody]="false" (alertOutput)="enableCurators()">
<div class="uk-padding uk-padding-remove-horizontal"> Your personal information has been successfully saved.<br><br>
Your personal information has been successfully saved.<br><br> This information will be visible in <span class="uk-text-bold">Curators page</span> of Research Community
This information will be visible in <span class="uk-text-bold">Curators page</span> of Research Community Dashboard, which is <span class="uk-text-bold">disabled</span>. Dashboard, which is <span class="uk-text-bold">disabled</span>.
Do you want to <span class="uk-text-bold">enable</span> it now? Do you want to <span class="uk-text-bold">enable</span> it now?
</div>
</modal-alert> </modal-alert>
`, `,
styleUrls: ['personal-info.component.css'] styleUrls: ['personal-info.component.less']
}) })
export class PersonalInfoComponent implements OnInit, OnDestroy { export class PersonalInfoComponent implements OnInit, OnDestroy {
/** Curator information */ /** Curator information */
@ -175,7 +183,8 @@ export class PersonalInfoComponent implements OnInit, OnDestroy {
public properties: EnvProperties = properties; public properties: EnvProperties = properties;
public curatorsPage: Page; public curatorsPage: Page;
public newCurator = false; public newCurator = false;
public communityId: string; public community: CommunityInfo;
public stickyPageHeader: boolean = false;
/** Photo */ /** Photo */
public photo: any = null; public photo: any = null;
private photoChanged: boolean = false; private photoChanged: boolean = false;
@ -205,11 +214,11 @@ export class PersonalInfoComponent implements OnInit, OnDestroy {
ngOnInit() { ngOnInit() {
this.subs.push(this.communityService.getCommunityAsObservable().subscribe(community => { this.subs.push(this.communityService.getCommunityAsObservable().subscribe(community => {
this.communityId = community.communityId; this.community = community;
this.subs.push(this.userManagementService.getUserInfo().subscribe(user => { this.subs.push(this.userManagementService.getUserInfo().subscribe(user => {
this.user = user; this.user = user;
if (this.user) { if (this.user) {
this.title.setTitle(community.communityId.toUpperCase() + " | Personal Info"); this.title.setTitle(community.shortTitle.toUpperCase() + " | Personal Info");
this.loading = true; this.loading = true;
this.subs.push(this.curatorService.getCurator(properties).subscribe(curator => { this.subs.push(this.curatorService.getCurator(properties).subscribe(curator => {
this.initCurator(curator); this.initCurator(curator);
@ -304,7 +313,7 @@ export class PersonalInfoComponent implements OnInit, OnDestroy {
this.deletePhoto = false; this.deletePhoto = false;
this.initCurator(curator); this.initCurator(curator);
this.reset(); this.reset();
if(!this.curatorsEnabled) { if (!this.curatorsEnabled) {
this.curatorsEnabledOpen(); this.curatorsEnabledOpen();
} }
this.loading = false; this.loading = false;
@ -342,7 +351,7 @@ export class PersonalInfoComponent implements OnInit, OnDestroy {
} }
private curatorsPageStatus() { private curatorsPageStatus() {
this.helpContentService.getCommunityPagesByRoute(this.communityId, '/curators', this.properties.adminToolsAPIURL).subscribe((page) => { this.helpContentService.getCommunityPagesByRoute(this.community.communityId, '/curators', this.properties.adminToolsAPIURL).subscribe((page) => {
this.curatorsPage = page; this.curatorsPage = page;
}); });
} }
@ -412,7 +421,7 @@ export class PersonalInfoComponent implements OnInit, OnDestroy {
editAffiliationOpen(index = -1) { editAffiliationOpen(index = -1) {
this.index = index; this.index = index;
let affiliation: Affiliation = new Affiliation(); let affiliation: Affiliation = new Affiliation();
if(index === -1) { if (index === -1) {
this.affiliationModal.alertTitle = 'Add Affiliation'; this.affiliationModal.alertTitle = 'Add Affiliation';
this.affiliationModal.okButtonText = 'Add'; this.affiliationModal.okButtonText = 'Add';
} else { } else {
@ -436,14 +445,14 @@ export class PersonalInfoComponent implements OnInit, OnDestroy {
let affiliation: Affiliation = this.affiliations.at(index).value; let affiliation: Affiliation = this.affiliations.at(index).value;
this.removeAffiliationModal.alertTitle = 'Delete Affiliation'; this.removeAffiliationModal.alertTitle = 'Delete Affiliation';
this.removeAffiliationModal.message = 'Do you want to remove <b>' + this.removeAffiliationModal.message = 'Do you want to remove <b>' +
affiliation.name + '</b> from your Affiliations?'; affiliation.name + '</b> from your Affiliations?';
this.removeAffiliationModal.okButtonText = 'Yes'; this.removeAffiliationModal.okButtonText = 'Yes';
this.removeAffiliationModal.cancelButtonText = 'No'; this.removeAffiliationModal.cancelButtonText = 'No';
this.removeAffiliationModal.open(); this.removeAffiliationModal.open();
} }
editAffiliation() { editAffiliation() {
if(this.index === -1) { if (this.index === -1) {
this.affiliations.push(this.affiliationFb); this.affiliations.push(this.affiliationFb);
} else { } else {
this.affiliations.at(this.index).setValue(this.affiliationFb.value); this.affiliations.at(this.index).setValue(this.affiliationFb.value);
@ -465,14 +474,14 @@ export class PersonalInfoComponent implements OnInit, OnDestroy {
} }
enableCurators() { enableCurators() {
this.helpContentService.togglePages(this.communityId, [this.curatorsPage._id], true, this.properties.adminToolsAPIURL).subscribe(() => { this.helpContentService.togglePages(this.community.communityId, [this.curatorsPage._id], true, this.properties.adminToolsAPIURL).subscribe(() => {
this.curatorsPage.isEnabled = true; this.curatorsPage.isEnabled = true;
UIkit.notification('Curators Page has been <b>enabled successfully</b>', { UIkit.notification('Curators Page has been <b>enabled successfully</b>', {
status: 'success', status: 'success',
timeout: 6000, timeout: 6000,
pos: 'bottom-right' pos: 'bottom-right'
}); });
},error => { }, error => {
this.handleUpdateError('An error has occurred. Try again later!'); this.handleUpdateError('An error has occurred. Try again later!');
}); });
} }

2
src/app/pages/users/users-managers/users-managers.component.ts
View File

@ -15,7 +15,7 @@ import {CommunityInfo} from "../../../openaireLibrary/connect/community/communit
[link]="link" [role]="'manager'" [message]="message" [emailComposer]="emailComposer" (stickyEmitter)="stickyPageHeader = $event"> [link]="link" [role]="'manager'" [message]="message" [emailComposer]="emailComposer" (stickyEmitter)="stickyPageHeader = $event">
<div class="uk-flex uk-flex-middle uk-margin-top info" [class.uk-active]="stickyPageHeader"> <div class="uk-flex uk-flex-middle uk-margin-top info" [class.uk-active]="stickyPageHeader">
<div> <div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Users</div> <div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Managers</div>
<h1 class="uk-h4 uk-margin-remove">{{community.shortTitle}}</h1> <h1 class="uk-h4 uk-margin-remove">{{community.shortTitle}}</h1>
</div> </div>
</div> </div>

2
src/app/pages/users/users-routing.module.ts
View File

@ -6,7 +6,7 @@ import {RouterModule} from '@angular/router';
RouterModule.forChild([ RouterModule.forChild([
{path: '', redirectTo: 'manager', pathMatch: 'full'}, {path: '', redirectTo: 'manager', pathMatch: 'full'},
{path: 'manager', loadChildren: () => import('./users-managers/users-managers.module').then(m => m.UsersManagersModule)}, {path: 'manager', loadChildren: () => import('./users-managers/users-managers.module').then(m => m.UsersManagersModule)},
{path: 'subscriber', loadChildren: () => import('./users-subscribers/users-subscribers.module').then(m => m.UsersSubscribersModule)}, {path: 'member', loadChildren: () => import('./users-subscribers/users-subscribers.module').then(m => m.UsersSubscribersModule)},
{ {
path: 'notifications', path: 'notifications',
loadChildren: () => import('../usernotifications/manage-user-notifications.module').then(m => m.ManageUserNotificationsModule) loadChildren: () => import('../usernotifications/manage-user-notifications.module').then(m => m.ManageUserNotificationsModule)

23
src/app/pages/users/users-subscribers/users-subscribers.component.ts
View File

@ -3,21 +3,28 @@ import {Title} from "@angular/platform-browser";
import {ActivatedRoute} from "@angular/router"; import {ActivatedRoute} from "@angular/router";
import {CommunityService} from "../../../openaireLibrary/connect/community/community.service"; import {CommunityService} from "../../../openaireLibrary/connect/community/community.service";
import {Subscriber} from "rxjs"; import {Subscriber} from "rxjs";
import {CommunityInfo} from "../../../openaireLibrary/connect/community/communityInfo";
@Component({ @Component({
selector: 'users-subscribers', selector: 'users-subscribers',
template: ` template: `
<subscribers [id]="communityId" [type]="type" [name]="name" [inviteDisableMessage]="inviteDisableMessage"> <subscribers [id]="community.communityId" [type]="'community'" [name]="community.shortTitle"
<users-tabs tab="subscriber"></users-tabs> [inviteDisableMessage]="inviteDisableMessage" (stickyEmitter)="stickyPageHeader = $event">
<div class="uk-flex uk-flex-middle uk-margin-top info" [class.uk-active]="stickyPageHeader">
<div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Members</div>
<h1 class="uk-h4 uk-margin-remove">{{community.shortTitle}}</h1>
</div>
</div>
<users-tabs tab="member"></users-tabs>
</subscribers> </subscribers>
` `
}) })
export class UsersSubscribersComponent implements OnInit { export class UsersSubscribersComponent implements OnInit {
public communityId: string; public community: CommunityInfo;
public name: string;
public type: string;
public loading: boolean; public loading: boolean;
public inviteDisableMessage: string; public inviteDisableMessage: string;
public stickyPageHeader: boolean = false;
private subscriptions: any[] = []; private subscriptions: any[] = [];
constructor(private communityService: CommunityService, constructor(private communityService: CommunityService,
@ -29,10 +36,8 @@ export class UsersSubscribersComponent implements OnInit {
this.loading = true; this.loading = true;
this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(community => { this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(community => {
if(community) { if(community) {
this.communityId = community.communityId; this.community = community;
this.name = community.shortTitle; this.title.setTitle(this.community.shortTitle.toUpperCase() + " | Subscribers");
this.title.setTitle(this.communityId.toUpperCase() + " | Subscribers");
this.type = 'community';
if(community.status !== "all") { if(community.status !== "all") {
this.inviteDisableMessage = "<div class='uk-padding-small'>Community's status is " + (community.status === 'manager'?'Visible to managers':'Hidden') + " and invitation to subscribe to the Research community dashboard is disabled. Update the community status to enable invitations.</div>" this.inviteDisableMessage = "<div class='uk-padding-small'>Community's status is " + (community.status === 'manager'?'Visible to managers':'Hidden') + " and invitation to subscribe to the Research community dashboard is disabled. Update the community status to enable invitations.</div>"
} }

6
src/app/pages/users/users-tabs.component.ts
View File

@ -9,11 +9,11 @@ import {ActivatedRoute} from '@angular/router';
template: ` template: `
<ul class="uk-tab uk-flex uk-flex-center uk-flex-left@m" uk-tab> <ul class="uk-tab uk-flex uk-flex-center uk-flex-left@m" uk-tab>
<li [class.uk-active]="tab === 'manager'"><a routerLink="../manager">Managers</a></li> <li [class.uk-active]="tab === 'manager'"><a routerLink="../manager">Managers</a></li>
<li [class.uk-active]="tab === 'subscriber'"><a routerLink="../subscriber">Subscribers</a></li> <li [class.uk-active]="tab === 'member'"><a routerLink="../member">Members</a></li>
<li *ngIf="canManageNotifications" [class.uk-active]="tab === 'notifications'"><a routerLink="../notifications">Notification <li *ngIf="canManageNotifications" [class.uk-active]="tab === 'notifications'"><a routerLink="../notifications">Notification
settings</a></li> settings</a></li>
<li [class.uk-active]="tab === 'claims'"><a routerLink="../claims">Links</a></li> <li [class.uk-active]="tab === 'claims'"><a routerLink="../claims">Links</a></li>
<li *ngIf="isAManager" [class.uk-active]="tab === 'personal'"><a routerLink="../personal">>Personal info</a></li> <li *ngIf="isAManager" [class.uk-active]="tab === 'personal'"><a routerLink="../personal">Personal info</a></li>
</ul> </ul>
` `
}) })
@ -21,7 +21,7 @@ export class UsersTabsComponent implements OnInit {
@Input() @Input()
public type: string; public type: string;
@Input() @Input()
public tab: "manager"| "subscriber" | "notifications" | "claims" | "personal" = 'manager'; public tab: "manager"| "member" | "notifications" | "claims" | "personal" = 'manager';
private subscriptions = []; private subscriptions = [];
isAManager: boolean = false; isAManager: boolean = false;
canManageNotifications: boolean = false; canManageNotifications: boolean = false;

2
src/assets/common-assets

@ -1 +1 @@
Subproject commit 752859b10d3e110fdc9a4360bb7cb005ef6225ed Subproject commit 65cbf342bc890aff15a8831711f69d9b35e6f85d

2
src/assets/dashboard-theme

@ -1 +1 @@
Subproject commit cd1a176ceb3aaa3493e16fc4d7ef67749655f351 Subproject commit f79a0c8ddbbe2e0cb266034073513356fd801095

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit ec73c67c591eca9fe68f7a6c6f65ce4332852b2f Subproject commit 8c4585873a56165631bee6b9d33d11fe83fc897c

2
src/environments/environment.ts
View File

@ -12,7 +12,7 @@ export let properties: EnvProperties = {
enablePiwikTrack: false, enablePiwikTrack: false,
useCache: false, useCache: false,
framesAPIURL: 'https://beta.openaire.eu/stats3/', framesAPIURL: 'https://beta.openaire.eu/stats3/',
claimsAPIURL: 'http://scoobydoo.di.uoa.gr:8080/dnet-claims-service-2.0.0-SNAPSHOT/rest/claimsService/', claimsAPIURL: 'http://dl170.madgik.di.uoa.gr:8180/dnet-claims-service-2.0.0-SNAPSHOT/rest/claimsService/',
statisticsAPIURL: 'https://beta.services.openaire.eu/stats-api/', statisticsAPIURL: 'https://beta.services.openaire.eu/stats-api/',
statisticsFrameAPIURL: 'https://beta.openaire.eu/stats/', statisticsFrameAPIURL: 'https://beta.openaire.eu/stats/',
statisticsFrameNewAPIURL: "https://stats.madgik.di.uoa.gr/stats-api/", statisticsFrameNewAPIURL: "https://stats.madgik.di.uoa.gr/stats-api/",