From 7d147b89e766fcea9d577ef932ddfd50fdc5d60c Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Thu, 21 Jan 2021 15:15:53 +0000 Subject: [PATCH] [Library | Trunk]: Create subscriber invite and subscribers components. git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60274 d315682c-612b-4755-9ff5-7f18f6832af3 --- connect/community/community.service.ts | 299 ++++++++++-------- .../role-users/role-users.component.html | 8 +- .../users/role-users/role-users.component.ts | 2 - .../users/role-users/role-users.module.ts | 4 +- .../subscribers/subscribers.component.html | 90 ++++++ .../subscribers/subscribers.component.ts | 184 +++++++++++ .../users/subscribers/subscribers.module.ts | 26 ++ sharedComponents/input/input.component.css | 9 + sharedComponents/input/input.component.ts | 11 +- .../search-input/search-input.component.ts | 6 +- .../subscriber-invite.component.css | 4 + .../subscriber-invite.component.ts | 156 +++++++++ .../subscriber-invite.module.ts | 17 + utils/email/composer.ts | 19 ++ utils/string-utils.class.ts | 8 +- 15 files changed, 699 insertions(+), 144 deletions(-) create mode 100644 dashboard/users/subscribers/subscribers.component.html create mode 100644 dashboard/users/subscribers/subscribers.component.ts create mode 100644 dashboard/users/subscribers/subscribers.module.ts create mode 100644 sharedComponents/subscriber-invite/subscriber-invite.component.css create mode 100644 sharedComponents/subscriber-invite/subscriber-invite.component.ts create mode 100644 sharedComponents/subscriber-invite/subscriber-invite.module.ts diff --git a/connect/community/community.service.ts b/connect/community/community.service.ts index e4b77a80..44a1b0f3 100644 --- a/connect/community/community.service.ts +++ b/connect/community/community.service.ts @@ -1,211 +1,252 @@ -import { Injectable } from '@angular/core'; +import {Injectable} from '@angular/core'; import {HttpClient, HttpHeaders} from "@angular/common/http"; -import { CommunityInfo } from './communityInfo'; +import {CommunityInfo} from './communityInfo'; import {EnvProperties} from '../../utils/properties/env-properties'; import {map} from "rxjs/operators"; import {BehaviorSubject, from, Subscriber} from "rxjs"; import {properties} from "../../../../environments/environment"; +import {HelperFunctions} from "../../utils/HelperFunctions.class"; -@Injectable({ providedIn: 'root' }) +@Injectable({providedIn: 'root'}) export class CommunityService { - + public community: BehaviorSubject = null; private promise: Promise = null; - + private sub; + constructor(private http: HttpClient) { this.community = new BehaviorSubject(null); } - sub; + ngOnDestroy() { this.clearSubscriptions(); } - clearSubscriptions(){ + + clearSubscriptions() { if (this.sub instanceof Subscriber) { this.sub.unsubscribe(); } } + + // TODO Remove these functions getCommunityByService(properties: EnvProperties, url: string) { this.promise = new Promise(resolve => { this.sub = this.getCommunity(properties, url).subscribe(res => { - this.community.next(res); - resolve(); - }, - error => { - this.community.error(error); - resolve(); - }) + this.community.next(res); + resolve(); + }, + error => { + this.community.error(error); + resolve(); + }) }); } - - async getCommunityByStateAsync(properties: EnvProperties, url: string) { - if(!this.promise) { + + async getCommunityByStateAsync(properties: EnvProperties, url: string) { + if (!this.promise) { this.getCommunityByService(properties, url); } - + await this.promise; this.clearSubscriptions(); return this.community.getValue(); } - + + public getCommunityAsObservable() { + return this.community.asObservable(); + } + + setCommunity(community: CommunityInfo) { + this.community.next(community); + } + + private formalize(element: any) { + return HelperFunctions.copy(element); + } + getCommunityByState(properties: EnvProperties, url: string) { return from(this.getCommunityByStateAsync(properties, url)); } - + getCommunity(properties: EnvProperties, url: string) { - return this.http.get((properties.useCache) ? (properties.cacheUrl + encodeURIComponent(url)) : url) - .pipe(map(res => this.parseCommunity(res))); + return this.http.get((properties.useCache) ? (properties.cacheUrl + encodeURIComponent(url)) : url) + .pipe(map(res => this.parseCommunity(res))); } - + + // TODO remove NEW from function names + getCommunityNew(communityId: string) { + if(!this.community.value || this.community.value.communityId !== communityId) { + this.promise = new Promise((resolve, reject) => { + this.sub = this.http.get(properties.communityAPI + communityId) + .pipe(map(community => this.formalize(this.parseCommunity(community)))).subscribe(community => { + this.community.next(community); + resolve(); + }, + error => { + this.community.next(null); + reject(); + }) + }); + } + return from(this.getCommunityAsync()); + } + + async getCommunityAsync() { + await this.promise; + this.clearSubscriptions(); + return this.community.getValue(); + } + updateCommunity(url: string, community: any) { - //const headers = new Headers({'Content-Type': 'application/json'}); - //const options = new RequestOptions({headers: headers}); - - const options = { - headers: new HttpHeaders({ - 'Content-Type': 'application/json', - }) - }; - - const body = JSON.stringify(community); - return this.http.post(url, body, options); - /*.map(res => res.json())*/ + //const headers = new Headers({'Content-Type': 'application/json'}); + //const options = new RequestOptions({headers: headers}); + + const options = { + headers: new HttpHeaders({ + 'Content-Type': 'application/json', + }) + }; + + const body = JSON.stringify(community); + return this.http.post(url, body, options); + /*.map(res => res.json())*/ } - + async isCommunityManagerByStateAsync(properties: EnvProperties, url: string, manager: string) { - if(!this.promise) { + if (!this.promise) { this.getCommunityByService(properties, url); } - + await this.promise; let community: CommunityInfo = this.community.getValue(); return (community.managers.indexOf(manager) !== -1); } - + isCommunityManagerByState(properties: EnvProperties, url: string, manager: string) { return from(this.isCommunityManagerByStateAsync(properties, url, manager)); } - + /** * @deprecated */ isCommunityManager(properties: EnvProperties, url: string, manager: string) { return this.http.get((properties.useCache) ? (properties.cacheUrl + encodeURIComponent(url)) : url) - //.map(res => res.json()) - .pipe(map(res => this.parseCommunity(res))) - .pipe(map(community => community.managers.indexOf(manager) !== -1)); + //.map(res => res.json()) + .pipe(map(res => this.parseCommunity(res))) + .pipe(map(community => community.managers.indexOf(manager) !== -1)); } - + async isTypeByStateAsync(properties: EnvProperties, url: string, type: string) { - if(!this.promise) { + if (!this.promise) { this.getCommunityByService(properties, url); } - + await this.promise; let community: CommunityInfo = this.community.getValue(); return (community && community.type && community.type === type); } - + isRITypeByState(properties: EnvProperties, url: string) { return from(this.isTypeByStateAsync(properties, url, "ri")); } - + isCommunityTypeByState(properties: EnvProperties, url: string) { return from(this.isTypeByStateAsync(properties, url, "community")); } - + /** * @deprecated */ isRIType(properties: EnvProperties, url: string) { return this.http.get((properties.useCache) ? (properties.cacheUrl + encodeURIComponent(url)) : url) - //.map(res => res.json()) - .pipe(map(res => this.parseCommunity(res))) - .pipe(map(community => (community && community.type && community.type === 'ri'))); + //.map(res => res.json()) + .pipe(map(res => this.parseCommunity(res))) + .pipe(map(community => (community && community.type && community.type === 'ri'))); } - + /** * @deprecated */ isCommunityType(properties: EnvProperties, url: string) { - return this.http.get((properties.useCache) ? (properties.cacheUrl + encodeURIComponent(url)) : url) - //.map(res => res.json()) - .pipe(map(res => this.parseCommunity(res))) - .pipe(map(community => (community && community.type && community.type === 'community'))); + return this.http.get((properties.useCache) ? (properties.cacheUrl + encodeURIComponent(url)) : url) + //.map(res => res.json()) + .pipe(map(res => this.parseCommunity(res))) + .pipe(map(community => (community && community.type && community.type === 'community'))); } - + /** - * @deprecated - */ + * @deprecated + */ isSubscribedToCommunity(pid: string, email: string, url: string) { - return this.http.get(url + '/'+ properties.adminToolsPortalType +'/' + pid + '/subscribers') - //.map(res => ((res === '') ? {} : res.json())) - .pipe(map(res => { - if (res['subscribers'] && res['subscribers'] != null) { - - for (let i = 0; i < res['subscribers'].length; i++ ) { - if (res['subscribers'][i] != null && res['subscribers'][i].email === email) { - return true; - } - } - } - return false; - - })); - } - - private parseCommunity(data: any): CommunityInfo { - - const resData = Array.isArray(data) ? data[0] : data; - - const community: CommunityInfo = new CommunityInfo(); - community['title'] = resData.name; - community['shortTitle'] = resData.shortName; - community['communityId'] = resData.id; - community['queryId'] = resData.queryId; - community['logoUrl'] = resData.logoUrl; - community['description'] = resData.description; - community['date'] = resData.creationDate; - community['zenodoCommunity'] = resData.zenodoCommunity; - community['status'] = 'all'; - if (resData.hasOwnProperty('status')) { - community['status'] = resData.status; - const status = ['all', 'hidden', 'manager']; - if (status.indexOf(community['status']) === -1) { - community['status'] = 'hidden'; + return this.http.get(url + '/' + properties.adminToolsPortalType + '/' + pid + '/subscribers') + //.map(res => ((res === '') ? {} : res.json())) + .pipe(map(res => { + if (res['subscribers'] && res['subscribers'] != null) { + + for (let i = 0; i < res['subscribers'].length; i++) { + if (res['subscribers'][i] != null && res['subscribers'][i].email === email) { + return true; + } + } } - } - if (resData.type != null) { - community['type'] = resData.type; - } - - if (resData.managers != null) { - if (community['managers'] === undefined) { - community['managers'] = new Array(); - } - - const managers = resData.managers; - const length = Array.isArray(managers) ? managers.length : 1; - - for (let i = 0; i < length; i++) { - const manager = Array.isArray(managers) ? managers[i] : managers; - community.managers[i] = manager; - } - } - - if (resData.subjects != null) { - if (community['subjects'] === undefined) { - community['subjects'] = new Array(); - } - - const subjects = resData.subjects; - const length = Array.isArray(subjects) ? subjects.length : 1; - - for (let i = 0; i < length; i++) { - const subject = Array.isArray(subjects) ? subjects[i] : subjects; - community.subjects[i] = subject; - } - } - return community; + return false; + + })); } - + + private parseCommunity(data: any): CommunityInfo { + + const resData = Array.isArray(data) ? data[0] : data; + + const community: CommunityInfo = new CommunityInfo(); + community['title'] = resData.name; + community['shortTitle'] = resData.shortName; + community['communityId'] = resData.id; + community['queryId'] = resData.queryId; + community['logoUrl'] = resData.logoUrl; + community['description'] = resData.description; + community['date'] = resData.creationDate; + community['zenodoCommunity'] = resData.zenodoCommunity; + community['status'] = 'all'; + if (resData.hasOwnProperty('status')) { + community['status'] = resData.status; + const status = ['all', 'hidden', 'manager']; + if (status.indexOf(community['status']) === -1) { + community['status'] = 'hidden'; + } + } + if (resData.type != null) { + community['type'] = resData.type; + } + + if (resData.managers != null) { + if (community['managers'] === undefined) { + community['managers'] = new Array(); + } + + const managers = resData.managers; + const length = Array.isArray(managers) ? managers.length : 1; + + for (let i = 0; i < length; i++) { + const manager = Array.isArray(managers) ? managers[i] : managers; + community.managers[i] = manager; + } + } + + if (resData.subjects != null) { + if (community['subjects'] === undefined) { + community['subjects'] = new Array(); + } + + const subjects = resData.subjects; + const length = Array.isArray(subjects) ? subjects.length : 1; + + for (let i = 0; i < length; i++) { + const subject = Array.isArray(subjects) ? subjects[i] : subjects; + community.subjects[i] = subject; + } + } + return community; + } + } diff --git a/dashboard/users/role-users/role-users.component.html b/dashboard/users/role-users/role-users.component.html index 22200979..b1632b95 100644 --- a/dashboard/users/role-users/role-users.component.html +++ b/dashboard/users/role-users/role-users.component.html @@ -12,14 +12,16 @@ -
+
- + @@ -32,7 +34,7 @@
-
+
No {{role}}s for {{name}}
diff --git a/dashboard/users/role-users/role-users.component.ts b/dashboard/users/role-users/role-users.component.ts index 396c6db3..58fa6389 100644 --- a/dashboard/users/role-users/role-users.component.ts +++ b/dashboard/users/role-users/role-users.component.ts @@ -8,8 +8,6 @@ import {properties} from "../../../../../environments/environment"; import {Session, User} from "../../../login/utils/helper.class"; import {UserManagementService} from "../../../services/user-management.service"; import {Router} from "@angular/router"; -import {LoginErrorCodes} from "../../../login/utils/guardHelper.class"; -import {Composer} from "../../../utils/email/composer"; import {StringUtils} from "../../../utils/string-utils.class"; declare var UIkit; diff --git a/dashboard/users/role-users/role-users.module.ts b/dashboard/users/role-users/role-users.module.ts index a3d7af81..2fcc8ff6 100644 --- a/dashboard/users/role-users/role-users.module.ts +++ b/dashboard/users/role-users/role-users.module.ts @@ -2,7 +2,6 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {RoleUsersComponent} from './role-users.component'; import {ReactiveFormsModule} from '@angular/forms'; -import {EmailService} from "../../../utils/email/email.service"; import {AlertModalModule} from "../../../utils/modal/alertModal.module"; import {LoadingModule} from "../../../utils/loading/loading.module"; import {IconsService} from "../../../utils/icons/icons.service"; @@ -15,8 +14,7 @@ import {SafeHtmlPipeModule} from "../../../utils/pipes/safeHTMLPipe.module"; @NgModule({ imports: [CommonModule, AlertModalModule, ReactiveFormsModule, LoadingModule, IconsModule, InputModule, PageContentModule, SafeHtmlPipeModule], declarations: [RoleUsersComponent], - exports: [RoleUsersComponent], - providers: [EmailService] + exports: [RoleUsersComponent] }) export class RoleUsersModule { constructor(private iconsService: IconsService) { diff --git a/dashboard/users/subscribers/subscribers.component.html b/dashboard/users/subscribers/subscribers.component.html new file mode 100644 index 00000000..6d2bcfd7 --- /dev/null +++ b/dashboard/users/subscribers/subscribers.component.html @@ -0,0 +1,90 @@ +
+ +
+
+ +
+
+
+
No subscribers for {{name}}
+
+
+ + +
+
+
+
+
+ Email: + {{item.email}} +
+
+
+
+ + + Remove subscriber + +
+
+
+
+
+ + +
+
+
+
+ +
+ +
+ + +
+ Are you sure you want to remove {{selectedUser}} from subscribers? +
+ + +
+
+
+
+
+
+ diff --git a/dashboard/users/subscribers/subscribers.component.ts b/dashboard/users/subscribers/subscribers.component.ts new file mode 100644 index 00000000..e79b2551 --- /dev/null +++ b/dashboard/users/subscribers/subscribers.component.ts @@ -0,0 +1,184 @@ +import {Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild} from '@angular/core'; +import {Subscription} from 'rxjs/Rx'; +import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms'; +import {AlertModal} from "../../../utils/modal/alert"; +import {UserRegistryService} from "../../../services/user-registry.service"; +import {EnvProperties} from "../../../utils/properties/env-properties"; +import {properties} from "../../../../../environments/environment"; +import {Session, User} from "../../../login/utils/helper.class"; +import {UserManagementService} from "../../../services/user-management.service"; +import {Router} from "@angular/router"; +import {Composer} from "../../../utils/email/composer"; +import {SubscriberInviteComponent} from "../../../sharedComponents/subscriber-invite/subscriber-invite.component"; + +declare var UIkit; + +@Component({ + selector: 'subscribers', + templateUrl: 'subscribers.component.html' +}) +export class SubscribersComponent implements OnInit, OnDestroy, OnChanges { + + @Input() + public id: string; + @Input() + public type: string; + @Input() + public name: string; + @Input() + public link: string; + @Input() + public message: string = null; + public user: User = null; + public subscribers: any[]; + public showSubscribers: any[]; + public subs: any[] = []; + public loading: boolean = true; + public selectedUser: string = null; + public properties: EnvProperties = properties; + public exists: boolean = true; + public roleFb: FormGroup; + /* Paging */ + page: number = 1; + pageSize: number = 10; + /* Search */ + filterForm: FormGroup; + @ViewChild('inviteModal') inviteModal: AlertModal; + @ViewChild('deleteModal') deleteModal: AlertModal; + @ViewChild('createRoleModal') createRoleModal: AlertModal; + @ViewChild('subscriberInvite') subscriberInvite: SubscriberInviteComponent; + + constructor(private userRegistryService: UserRegistryService, + private userManagementService: UserManagementService, + private router: Router, + private fb: FormBuilder) { + } + + ngOnInit() { + this.filterForm = this.fb.group({ + keyword: this.fb.control('') + }); + this.subs.push(this.filterForm.get('keyword').valueChanges.subscribe(value => { + this.filterBySearch(value); + })); + this.updateList(); + this.userManagementService.getUserInfo().subscribe(user => { + this.user = user; + }); + } + + ngOnChanges(changes: SimpleChanges) { + if (changes.role) { + this.updateList(); + } + } + + ngOnDestroy() { + this.subs.forEach(sub => { + if (sub instanceof Subscription) { + sub.unsubscribe(); + } + }); + } + + updateList() { + this.loading = true; + this.subs.push(this.userRegistryService.getActiveEmail(this.type, this.id, 'member').subscribe(users => { + this.subscribers = users; + this.filterBySearch(this.filterForm.value.keyword); + this.loading = false; + this.exists = true; + }, error => { + this.subscribers = []; + this.showSubscribers = []; + if (error.status === 404) { + this.exists = false; + } + this.loading = false; + })); + } + + openDeleteModal(item: any) { + this.selectedUser = item.email; + this.deleteModal.alertTitle = 'Delete subscriber'; + this.deleteModal.open(); + } + + openInviteModal() { + if(this.subscriberInvite && !this.subscriberInvite.loading) { + this.inviteModal.alertTitle = 'Invite users to subscribe'; + this.inviteModal.okButtonLeft = false; + this.inviteModal.okButtonText = 'Send'; + this.subscriberInvite.reset(); + this.inviteModal.open(); + } + } + + openCreateRoleModal() { + this.createRoleModal.alertTitle = 'Create group'; + this.createRoleModal.okButtonLeft = false; + this.createRoleModal.okButtonText = 'create'; + this.roleFb = this.fb.group({ + name: this.fb.control(Session.mapType(this.type) + '.' + this.id, Validators.required), + description: this.fb.control('', Validators.required) + }); + setTimeout(() => { + this.roleFb.get('name').disable(); + }, 0); + this.createRoleModal.open(); + } + + deleteSubscriber() { + this.loading = true; + this.userRegistryService.remove(this.type, this.id, this.selectedUser, 'member').subscribe(() => { + this.subscribers = this.subscribers.filter(user => user.email != this.selectedUser); + this.filterBySearch(this.filterForm.value.keyword); + this.userManagementService.updateUserInfo(); + UIkit.notification(this.selectedUser + ' is no longer subscribed to ' + this.name + ' Dashboard', { + status: 'success', + timeout: 6000, + pos: 'bottom-right' + }); + this.loading = false; + }, error => { + UIkit.notification('An error has occurred. Please try again later', { + status: 'danger', + timeout: 6000, + pos: 'bottom-right' + }); + this.loading = false; + }); + } + + createGroup() { + this.loading = true; + this.roleFb.get('name').enable(); + this.userRegistryService.createRole(this.type, this.id, this.roleFb.value).subscribe(() => { + UIkit.notification('Group has been successfully created', { + status: 'success', + timeout: 6000, + pos: 'bottom-right' + }); + this.updateList(); + }, error => { + UIkit.notification('An error has occurred. Please try again later', { + status: 'danger', + timeout: 6000, + pos: 'bottom-right' + }); + this.loading = false; + }); + } + + public get isPortalAdmin() { + return Session.isPortalAdministrator(this.user) || Session.isCurator(this.type, this.user); + } + + public updatePage($event) { + this.page = $event.value; + } + + private filterBySearch(value: any) { + this.showSubscribers = this.subscribers.filter(subscriber => !value || subscriber.email.includes(value)); + } +} diff --git a/dashboard/users/subscribers/subscribers.module.ts b/dashboard/users/subscribers/subscribers.module.ts new file mode 100644 index 00000000..3b5941c4 --- /dev/null +++ b/dashboard/users/subscribers/subscribers.module.ts @@ -0,0 +1,26 @@ +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {SubscribersComponent} from './subscribers.component'; +import {ReactiveFormsModule} from '@angular/forms'; +import {AlertModalModule} from "../../../utils/modal/alertModal.module"; +import {LoadingModule} from "../../../utils/loading/loading.module"; +import {IconsService} from "../../../utils/icons/icons.service"; +import {person_add, remove_circle_outline} from "../../../utils/icons/icons"; +import {IconsModule} from "../../../utils/icons/icons.module"; +import {InputModule} from "../../../sharedComponents/input/input.module"; +import {PageContentModule} from "../../sharedComponents/page-content/page-content.module"; +import {SafeHtmlPipeModule} from "../../../utils/pipes/safeHTMLPipe.module"; +import {NoLoadPaging} from "../../../searchPages/searchUtils/no-load-paging.module"; +import {SearchInputModule} from "../../../sharedComponents/search-input/search-input.module"; +import {SubscriberInviteModule} from "../../../sharedComponents/subscriber-invite/subscriber-invite.module"; + +@NgModule({ + imports: [CommonModule, AlertModalModule, ReactiveFormsModule, LoadingModule, IconsModule, InputModule, PageContentModule, SafeHtmlPipeModule, NoLoadPaging, SearchInputModule, SubscriberInviteModule], + declarations: [SubscribersComponent], + exports: [SubscribersComponent] +}) +export class SubscribersModule { + constructor(private iconsService: IconsService) { + this.iconsService.registerIcons([remove_circle_outline, person_add]); + } +} diff --git a/sharedComponents/input/input.component.css b/sharedComponents/input/input.component.css index a8e9fca0..b6f78eaf 100644 --- a/sharedComponents/input/input.component.css +++ b/sharedComponents/input/input.component.css @@ -9,6 +9,10 @@ transform: translateY(-50%); } +.uk-grid-small .left { + left: 20px; +} + .left + .input-box { padding-left: 41px; } @@ -23,3 +27,8 @@ .right + .input-box { padding-right: 41px; } + +.input-message { + font-family: "Roboto", sans-serif; + font-size: 14px; +} diff --git a/sharedComponents/input/input.component.ts b/sharedComponents/input/input.component.ts index 7a6fee74..069e110d 100644 --- a/sharedComponents/input/input.component.ts +++ b/sharedComponents/input/input.component.ts @@ -17,9 +17,9 @@ export interface Option { template: `
{{label + (required ? ' *' : '')}}
{{hint}}
-
+
-
+
@@ -52,8 +52,9 @@ export interface Option {
- {{formControl.errors.error}} - {{warning}} + {{formControl.errors.error}} + {{warning}} + {{note}}
{{label}} @@ -70,10 +71,12 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges { @Input('placeholder') placeholder = ''; @ViewChild('select') select: MatSelect; @Input() extraLeft: boolean = true; + @Input() gridSmall: boolean = false; @Input() hideControl: boolean = false; @Input() icon: string = null; @Input() iconLeft: boolean = false; @Input() warning: string = null; + @Input() note: string = null; public required: boolean = false; private initValue: any; private subscriptions: any[] = []; diff --git a/sharedComponents/search-input/search-input.component.ts b/sharedComponents/search-input/search-input.component.ts index be953d32..79f36c30 100644 --- a/sharedComponents/search-input/search-input.component.ts +++ b/sharedComponents/search-input/search-input.component.ts @@ -40,14 +40,14 @@ import {MatAutocompleteTrigger} from '@angular/material/autocomplete'; - search + {{toggleTitle}}
` }) @@ -68,6 +68,8 @@ export class SearchInputComponent { colorClass: string = 'portal-color'; @Input() bordered: boolean = false; + @Input() + toggleTitle: string = 'search'; @ViewChild('input') input: ElementRef; @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger; @Output() diff --git a/sharedComponents/subscriber-invite/subscriber-invite.component.css b/sharedComponents/subscriber-invite/subscriber-invite.component.css new file mode 100644 index 00000000..a19d7045 --- /dev/null +++ b/sharedComponents/subscriber-invite/subscriber-invite.component.css @@ -0,0 +1,4 @@ +.field-label { + width: 100px; + text-align: right; +} diff --git a/sharedComponents/subscriber-invite/subscriber-invite.component.ts b/sharedComponents/subscriber-invite/subscriber-invite.component.ts new file mode 100644 index 00000000..9df34b70 --- /dev/null +++ b/sharedComponents/subscriber-invite/subscriber-invite.component.ts @@ -0,0 +1,156 @@ +import {Component, Input, OnDestroy, OnInit} from "@angular/core"; +import {AbstractControl, FormBuilder, FormGroup, ValidationErrors, Validators} from "@angular/forms"; +import {Subscriber} from "rxjs"; +import {StringUtils} from "../../utils/string-utils.class"; +import {Email} from "../../utils/email/email"; +import {Body} from "../../utils/email/body"; +import {CommunityService} from "../../connect/community/community.service"; +import {Composer} from "../../utils/email/composer"; +import {User} from "../../login/utils/helper.class"; +import {EmailService} from "../../utils/email/email.service"; +import {properties} from "../../../../environments/environment"; + +declare var UIkit; + +@Component({ + selector: 'subscriber-invite', + template: ` +
+
+
+ From *: +
+
+
+
+ To *: +
+
+
+
+ Message *: +
+
+ +
+ {{body.signature}} + + {{body.fromMessage}}... + + + {{body.fromMessage}} + {{body.fromName}} +
+ www.openaire.eu +
+
+
+
+ `, + styleUrls: ['subscriber-invite.component.css'] +}) +export class SubscriberInviteComponent implements OnInit, OnDestroy { + @Input() + public user: User; + public inviteForm: FormGroup; + public email: Email; + public body: Body; + public loading: boolean = false; + private subscriptions: any[] = []; + + constructor(private fb: FormBuilder, + private emailService: EmailService, + private communityService: CommunityService) { + } + + ngOnInit() { + this.reset(); + } + + ngOnDestroy() { + this.unsubscribe(); + } + + unsubscribe() { + this.subscriptions.forEach(subscription => { + if(subscription instanceof Subscriber) { + subscription.unsubscribe(); + } + }); + } + + reset() { + this.unsubscribe(); + this.inviteForm = this.fb.group({ + name: this.fb.control('', Validators.required), + recipients: this.fb.control('', [Validators.required, this.emailsValidator]), + message: this.fb.control('', Validators.required) + }); + this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(community => { + this.inviteForm.get('name').enable(); + this.inviteForm.get('name').setValue(this.user.fullname); + this.inviteForm.get('name').disable(); + this.body = Composer.initializeInvitationsBody(community.communityId, community.title, this.user.fullname); + this.email = Composer.initializeInvitationsEmail(community.title); + this.inviteForm.get('message').setValue(this.body.paragraphs); + })); + } + + emailsValidator(control: AbstractControl): ValidationErrors | null { + if (control.value === '' || !control.value || StringUtils.validateEmails(control.value)) { + return null; + } + return { emails: true }; + } + + invite() { + this.loading = true; + this.parseRecipients(); + this.body.paragraphs = this.inviteForm.value.message; + this.email.body = Composer.formatEmailBodyForInvitation(this.body); + this.subscriptions.push(this.emailService.sendEmail(properties, this.email).subscribe(res => { + if(res['success']) { + UIkit.notification('Invitation to subscribe has been sent', { + status: 'success', + timeout: 6000, + pos: 'bottom-right' + }); + } else { + UIkit.notification('An error has occurred. Please try again later', { + status: 'danger', + timeout: 6000, + pos: 'bottom-right' + }); + } + this.loading = false; + },error => { + UIkit.notification('An error has occurred. Please try again later', { + status: 'danger', + timeout: 6000, + pos: 'bottom-right' + }); + this.loading = false; + })); + } + + public parseRecipients() { + // remove spaces + let emails = this.inviteForm.get('recipients').value.replace(/\s/g, ''); + // remove commas + emails = emails.split(","); + + // remove empty fields + for (let i = 0; i < emails.length; i++) { + if (!(emails[i] == "")) { + this.email.recipients.push(emails[i]); + } + } + } + + get valid() { + return this.inviteForm && this.inviteForm.valid; + } +} diff --git a/sharedComponents/subscriber-invite/subscriber-invite.module.ts b/sharedComponents/subscriber-invite/subscriber-invite.module.ts new file mode 100644 index 00000000..b224b604 --- /dev/null +++ b/sharedComponents/subscriber-invite/subscriber-invite.module.ts @@ -0,0 +1,17 @@ +import {NgModule} from "@angular/core"; +import {CommonModule} from "@angular/common"; +import {SubscriberInviteComponent} from "./subscriber-invite.component"; +import {InputModule} from "../input/input.module"; +import {CKEditorModule} from "ng2-ckeditor"; +import {ReactiveFormsModule} from "@angular/forms"; +import {EmailService} from "../../utils/email/email.service"; + +@NgModule({ + imports: [CommonModule, InputModule, CKEditorModule, ReactiveFormsModule], + declarations: [SubscriberInviteComponent], + exports: [SubscriberInviteComponent], + providers: [EmailService] +}) +export class SubscriberInviteModule { + +} diff --git a/utils/email/composer.ts b/utils/email/composer.ts index 061d2ba7..2e719529 100644 --- a/utils/email/composer.ts +++ b/utils/email/composer.ts @@ -242,4 +242,23 @@ export class Composer { email.recipient = recipient; return email; } + + public static composeEmailForCommunityDashboard(name: string, recipient: string, role: "manager" | "member") { + let email: Email = new Email(); + email.subject = 'OpenAIRE Monitor Dashboard | ' + name; + email.body = '

Dear ((__user__)),

' + + '

You have been invited to be a ' + role +' of the OpenAIRE Monitor Dashboard for the ' + name + '.

' + + '

Click this URL and use the verification code below to accept the invitation.

' + + '

The verification code is ((__code__)).

' + + (role === "manager"? + '

As a manager of the OpenAIRE Monitor Dashboard, you will have access to the administration part of the dashboard, ' + + 'where you will be able to customize and manage the profile of the ' + name + '.

': + '

As a member of the OpenAIRE Monitor Dashboard, you will have access to the restricted access areas of the profile for the ' + name + '.') + + '

Please contact us at ' + properties.helpdeskEmail + + ' if you have any questions or concerns.

' + + '

Kind Regards
The OpenAIRE Team

' + + '

OpenAIRE Monitor

' + email.recipient = recipient; + return email; + } } diff --git a/utils/string-utils.class.ts b/utils/string-utils.class.ts index e4796a69..77490d30 100644 --- a/utils/string-utils.class.ts +++ b/utils/string-utils.class.ts @@ -1,5 +1,5 @@ import {UrlSegment} from '@angular/router'; -import {ValidatorFn, Validators} from "@angular/forms"; +import {AbstractControl, ValidatorFn, Validators} from "@angular/forms"; export class Dates { public static yearMin = 1800; @@ -214,6 +214,12 @@ export class StringUtils { return decodeURIComponent(params); } + public static validateEmails(emails: string): boolean { + return (emails.split(',') + .map(email => Validators.email({ value: email.trim() })) + .find(_ => _ !== null) === undefined); + } + public static b64DecodeUnicode(str) { return decodeURIComponent(Array.prototype.map.call(atob(str), function (c) { return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);