import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'; import {AbstractControl, FormBuilder, 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 {Role, Session, User} from "../../../login/utils/helper.class"; import {UserManagementService} from "../../../services/user-management.service"; import {Router} from "@angular/router"; import {SubscriberInviteComponent} from "../../../sharedComponents/subscriber-invite/subscriber-invite.component"; import {Subscription, zip} from "rxjs"; 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; @Input() public inviteDisableMessage: string; 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 cdr: ChangeDetectorRef, private fb: FormBuilder) { } ngOnInit() { this.filterForm = this.fb.group({ keyword: this.fb.control('') }); this.subs.push(this.filterForm.get('keyword').valueChanges.subscribe(value => { if(this.subscribers) { this.filterBySearch(value); } })); this.updateList(); this.userManagementService.getUserInfo().subscribe(user => { this.user = user; this.cdr.detectChanges(); }); } ngOnChanges(changes: SimpleChanges) { if (changes.role) { this.updateList(); } } ngOnDestroy() { this.subs.forEach(sub => { if (sub instanceof Subscription) { sub.unsubscribe(); } }); } get currentPage(): any[] { if (this.showSubscribers) { return this.showSubscribers.slice((this.page - 1) * this.pageSize, this.page * this.pageSize); } else { return []; } } updateList() { this.loading = true; this.subs.push( this.userRegistryService.getActive(this.type, this.id, 'member', true).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 member'; this.deleteModal.open(); } openInviteModal() { if(this.subscriberInvite && !this.subscriberInvite.loading) { this.inviteModal.alertTitle = 'Invite users to join ' + this.name; 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(Role.roleName(this.type, this.id), Validators.required), description: this.fb.control(Role.roleName(this.type, this.id), Validators.required) }); setTimeout(() => { this.roleFb.get('name').disable(); this.roleFb.get('description').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); if(this.currentPage.length === 0) { this.page = 1; } this.userManagementService.updateUserInfo(); UIkit.notification(this.selectedUser + ' is no longer a member of ' + 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.userRegistryService.createRole(this.type, this.id).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)); this.page = 1; } }