D-Net

<div id="manage-subscribers" class=" uk-card uk-card-default uk-padding">

  <div class="uk-text-large uk-text-center uk-width-5-6@l uk-width">Manage subscribers</div>

    <form class="uk-text-center uk-animation uk-card uk-card-default uk-padding">

      <div>

        <input type="text" class="uk-input  uk-width-1-2" placeholder="Search subscribers..." aria-describedby="sizing-addon2"  [(ngModel)]="subscribersSearchUtils.keyword" name="keyword" >

        <button (click)="goTo(1)"  type="submit" class=" uk-button">

           <span class="uk-icon">

           <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg>

           </span>Search

        </button>

      </div>

    </form>

    <div *ngIf="subscribersSearchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">

      <div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">

        <span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">

          {{subscribersSearchUtils.totalResults | number}} subscribers, page {{subscribersSearchUtils.page | number}} of {{(totalPages()) | number}}

        </span>

        <span class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m">

          <paging-no-load [currentPage]="subscribersSearchUtils.page" [totalResults]="subscribersSearchUtils.totalResults" [size]="10" (pageChange)="goTo($event.value, false)"></paging-no-load>

        </span>

      </div>

    </div>

    <div class="custom-dataTable-content">

        <div class="uk-overflow-container">

            <table datatable class="uk-table uk-table-striped divider-table" id="dpTable" [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" dtInstance="dtInstanceCallback">

              <thead>

                <tr>

                  <th class="uk-text-center">Email</th>

                  <th class="uk-text-center">Action</th>

                </tr>

              </thead>

              <tbody *ngIf="communitySubscribers">

                <tr class="uk-table-middle" *ngFor="let item of communitySubscribers.subscribers;">

                  <td class="uk-text-center uk-width-1-2">

                    {{item.email}}

                  </td>

                  <td class="uk-text-center uk-width-1-2">

<!--                    red_background_color red_color-->

                      <a (click)="removeSubscriber(item.email)" class="uk-icon-button remove uk-button-danger" uk-icon="icon: close; ratio: 1" title="Remove"></a>

                  </td>

                </tr>

              </tbody>

            </table>

        </div>

    </div>

    <div *ngIf="subscribersSearchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">

      <div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">

        <span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">

          {{subscribersSearchUtils.totalResults | number}} subscribers, page {{subscribersSearchUtils.page | number}} of {{(totalPages()) | number}}

        </span>

        <span class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m">

          <paging-no-load [currentPage]="subscribersSearchUtils.page" [totalResults]="subscribersSearchUtils.totalResults" [size]="10" (pageChange)="goTo($event.value, false)"></paging-no-load>

        </span>

      </div>

    </div>

</div>

<modal-alert #AlertModalDeleteSubscriber (alertOutput)="confirmedDeleteSubscriber()"></modal-alert>

import {Component, ViewChild, OnInit, Input, Output, ElementRef}     from '@angular/core';

import {ViewEncapsulation, EventEmitter}                 from '@angular/core';

import {SimpleChanges, OnChanges}                        from '@angular/core';

import {FormGroup, FormArray, FormBuilder, Validators}   from '@angular/forms';

import {ActivatedRoute, Router}                          from '@angular/router';

import {Subject}                                         from 'rxjs';

import {DataTableDirective}                              from 'angular-datatables';

import {EnvProperties}                                   from '../../openaireLibrary/utils/properties/env-properties';

import {SubscribeService}                                from '../../openaireLibrary/utils/subscribe/subscribe.service';

import {RouterHelper}                                    from '../../openaireLibrary/utils/routerHelper.class';

import {ErrorCodes}                                      from '../../openaireLibrary/utils/properties/errorCodes';

import {SearchUtilsClass}                                from '../../openaireLibrary/searchPages/searchUtils/searchUtils.class';

import {Session} from '../../openaireLibrary/login/utils/helper.class';

import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';

import {HelperFunctions} from "../../openaireLibrary/utils/HelperFunctions.class";

import {Title} from '@angular/platform-browser';

@Component({

    selector: 'manage-subscribers',

    templateUrl: './manage-subscribers.component.html',

    styles: [`

      #dpTable_info, #dpTable_paginate,  #dpTable_length,  #dpTable_filter{

        display: none;

      }

    `],

    encapsulation: ViewEncapsulation.None // this used in order styles to work

})

export class ManageSubscribersComponent implements OnInit {

    public routerHelper:RouterHelper = new RouterHelper();

    private errorCodes: ErrorCodes;

    @Output() commmunitySubscribersChanged = new EventEmitter();

    public communitySubscribers = [];

    public subscribersSearchUtils: SearchUtilsClass = new SearchUtilsClass();

    public sub: any; public subResults: any; subRemove: any;

    public properties: EnvProperties;

    public disableForms: boolean = false;

    dtOptions: DataTables.Settings = {};

    showTable = false; filteringAdded = false;

    @ViewChild(DataTableDirective) datatableElement: DataTableDirective;

    dtTrigger: Subject<any> = new Subject(); //necessary

    public rowsOnPage:number = 10;

    public queryParameters: string = "";

    public query = '';

    public selectedSubscribersEmail=[];

    public elementRef;

    public subscribers:string[];

    private triggered: boolean = false;

    private selectedSubscriberEmail: any;

    public communityId = null;

    @ViewChild('AlertModalDeleteSubscriber') alertModalDeleteSubscriber;

    constructor (private element: ElementRef,

                 private route: ActivatedRoute,

                 private title: Title,

                 private _router: Router,

                 public _fb: FormBuilder,

                 private _subscribeService: SubscribeService) {

        this.errorCodes = new ErrorCodes();

        this.subscribersSearchUtils.status = this.errorCodes.LOADING;

    }

    ngOnInit() {

        this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {

        this.properties = data.envSpecific;

        this.route.queryParams.subscribe(

            communityId => {

                HelperFunctions.scroll();

                this.communityId = communityId['communityId'];

                this.title.setTitle('Administration Dashboard | Subscribers');

                if (this.communityId != null && this.communityId != '') {

                    this._getCommunitySubscribers();

                }

            });

    });

        this.dtOptions = {

            "pageLength": this.rowsOnPage,

            "language": {

                "search": "",

                "searchPlaceholder": "Search subscribers..."

            }

        };

        this.subscribersSearchUtils.keyword = "";

    }

    public ngOnDestroy() {

        if(this.sub){

          this.sub.unsubscribe();

        }

        if(this.subResults) {

          this.subResults.unsubscribe();

        }

        if(this.subRemove) {

          this.subRemove.unsubscribe();

        }

        $.fn['dataTable'].ext.search.pop();

    }

    rerender(): void {

        this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {

            // Destroy the table first

            dtInstance.destroy();

            // Call the dtTrigger to rerender again

            this.dtTrigger.next();

        });

    }

    ngAfterViewInit(): void {

        $.fn['dataTable'].ext.search.push((settings, data, dataIndex) => {

            if (this.filterData(data, this.subscribersSearchUtils.keyword)) {

                return true;

            }

                return false;

        });

        //console.info("ngAfterViewInit");

    }

    filterData(row: any, query: string) {

      if(!Session.isLoggedIn()){

        this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });

      } else {

        let returnValue: boolean = false;

        if(query) {

            for(var i = 0; i < 2; i++) {

                var r= this.filterQuery(row[i], query);

                if(r) {

                    returnValue = true;

                    break;

                }

            }

            if(!returnValue) {

                return false;

            }

        }

        return true;

      }

    }

    filterQuery(data, query){

        if(data.toLowerCase().indexOf(query.toLowerCase()) > -1) {

            return true;

        } else {

            return false;

        }

    }

    /*

    Trigger a table draw in order to get the initial filtering

    */

    triggerInitialLoad(){

        this.triggered = true;

        //console.info("triggerInitialLoad");

        setTimeout(function() {

            var table = (<any>$('#dpTable')).DataTable();

            table.page( 0  ).draw( false );

        }, 500);

        this.dtTrigger.next();

    }

    public goTo(page:number = 1) {

      if(!Session.isLoggedIn()){

        this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });

      } else {

        this.subscribersSearchUtils.page=page;

        var table = $('#dpTable').DataTable();

        table.page( page - 1  ).draw( false );

        var info = table.page.info();

        this.subscribersSearchUtils.totalResults = info.recordsDisplay;

      }

    }

    totalPages(): number {

        let totalPages:any = this.subscribersSearchUtils.totalResults/(this.rowsOnPage);

        if(!(Number.isInteger(totalPages))) {

            totalPages = (parseInt(totalPages, 10) + 1);

        }

        return totalPages;

    }

    public removeSubscriber(email:string) {

      if(!Session.isLoggedIn()){

        this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });

      } else {

        this.selectedSubscriberEmail = email;

        this.alertModalDeleteSubscriber.cancelButton = true;

        this.alertModalDeleteSubscriber.okButton = true;

        this.alertModalDeleteSubscriber.alertTitle = "Remove subscriber?";

        this.alertModalDeleteSubscriber.message = "Subscriber with email ";

            if (email) {

                this.alertModalDeleteSubscriber.message += " '"+email+"' ";

            }

        this.alertModalDeleteSubscriber.message += "will be removed from your community. Are you sure?";

        this.alertModalDeleteSubscriber.okButtonText = "Yes";

        this.alertModalDeleteSubscriber.open();

      }

    }

    public confirmedDeleteSubscriber() {

      if(!Session.isLoggedIn()){

        this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });

      } else {

        this.subRemove = this._subscribeService.unSubscribeToCommunityByEmail(this.properties, this.communityId, this.selectedSubscriberEmail).subscribe(

            result => {

                this.communitySubscribers = result;

            },

            err => {

                console.log(err);

            },

            () => {

                this.subscribersSearchUtils.totalResults--;

                this.subscribersSearchUtils.page=1;

                this.rerender();

            }

        )

      }

    }

    public _getCommunitySubscribers(){

      if(!Session.isLoggedIn()){

        this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });

      } else {

        this.subscribersSearchUtils.status = this.errorCodes.LOADING;

        this.disableForms = true;

        this.communitySubscribers = [];

        this.subscribersSearchUtils.totalResults = 0;

        this.subscribersSearchUtils.page=1;

        this.subscribersSearchUtils.keyword = "";

        this.subResults = this._subscribeService.getCommunitySubscribers(this.properties, this.communityId).subscribe(

            res => {

                //console.info("search Subscribers [total communitySubscribers:"+res.subscribers.length+"]");

                this.communitySubscribers = res;

                this.subscribersSearchUtils.totalResults = res.subscribers.length;

                this.subscribersSearchUtils.status = this.errorCodes.DONE;

                this.disableForms = false;

                if(!this.triggered) {

                    this.triggerInitialLoad();

                } else {

                    var table = $('#dpTable').DataTable();

                    table.clear();

                this.rerender();

                }

                this.commmunitySubscribersChanged.emit({

                    value: this.communitySubscribers,

                });

            },

            err => {

                console.log(err);

                //TODO check erros (service not available, bad request)

                if(err.status == '404') {

                    this.subscribersSearchUtils.status = this.errorCodes.NOT_FOUND;

                } else if(err.status == '500') {

                    this.subscribersSearchUtils.status = this.errorCodes.ERROR;

                } else {

                    this.subscribersSearchUtils.status = this.errorCodes.NOT_AVAILABLE;

                }

                this.disableForms = false;

                if(!this.triggered) {

                    this.triggerInitialLoad();

                } else {

                    var table = $('#dpTable').DataTable();

                    table.clear();

                    this.rerender();

                }

            }

        );

      }

    }

}

import {NgModule} from '@angular/core';

import {CommonModule} from '@angular/common';

import {FormsModule} from '@angular/forms';

import {RouterModule} from '@angular/router';

import {DataTablesModule} from 'angular-datatables';

import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';

import {PagingModule} from '../../openaireLibrary/utils/paging.module';

import {ManageSubscribersComponent} from './manage-subscribers.component';

import {ManageSubscribersRoutingModule} from './manage-subscribers-routing.module';

import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';

import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';

@NgModule({

  imports: [

    ManageSubscribersRoutingModule, CommonModule, FormsModule, RouterModule,

    PagingModule, DataTablesModule, AlertModalModule

  ],

  declarations: [

    ManageSubscribersComponent

  ],

  providers: [

      IsCommunity, ConnectAdminLoginGuard

  ],

  exports: [

    ManageSubscribersComponent

   ]

})

export class ManageSubscribersModule { }

import { NgModule } from '@angular/core';

import {RouterModule} from '@angular/router';

import {ManageSubscribersComponent} from './manage-subscribers.component';

import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';

import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';

@NgModule({

    imports: [

        RouterModule.forChild([

            { path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: ManageSubscribersComponent}

        ])

    ]

})

export class ManageSubscribersRoutingModule { }

      canActivate: [/*ConnectRIGuard*/]

        this.userMenuItems.push(new MenuItem("connectOptions", "Connect portal options", "", "/admin-tools/pages", false, [], [], {communityId: 'connect'}));

      this.sideBarItems.push(new MenuItem("admin-tools", "Pages & Entities", "", "/" + this.community.communityId + "/pages", false, [], [], {}));

import {HttpInterceptorService} from "./openaireLibrary/http-interceptor.service";

    ConnectAdminLoginGuard,

        onSameUrlNavigation: "reload"