D-Net

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

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

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

import {FABComponent} from './fab.component';

@NgModule({

    imports: [

      CommonModule,

      FormsModule

    ],

    declarations: [

        FABComponent

    ],

    exports: [

      FABComponent

    ]

})

export class FABModule { }

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

@Component({

    selector: 'fab',

    template: `

      <div (click)="onClick()" class="   uk-float-right  " style="z-index: 100; bottom: 45px; position: fixed; right: 45px;">

        <a style="padding: 14px;" class="   uk-button uk-button-danger  ">

          <!--span class="uk-icon" uk-icon="icon: plus; ratio: 1.5">

          </span-->

          <span class="uk-icon">

            <svg width="30" height="30" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor" icon="plus" ratio="1.5">

            <rect x="9" y="1" width="1" height="17" fill="currentColor"></rect>

            <rect x="1" y="9" width="17" height="1" fill="currentColor"></rect></svg>

          </span>

        </a>

      </div>

    `

})

export class FABComponent {

  @Output() public clicked:EventEmitter<any> = new EventEmitter();

  constructor () {}

  public ngOnInit() {}

  public onClick() {

    this.clicked.emit(true);

  }

}

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

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

import { FormGroup } from "@angular/forms";

import { HelpContentService } from "../../services/help-content.service";

import { DivHelpContent, CheckDivHelpContent, DivHelpContentFilterOptions } from "../../domain/div-help-content";

import { Page } from "../../domain/page";

import { Portal } from "../../domain/portal";

import { DivId } from "../../domain/divId";

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

import {SafeHtmlPipe} from '../../openaireLibrary/utils/pipes/safeHTML.pipe';

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

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

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

import {PageHelpContent} from "../../domain/page-help-content";

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

import {ClearCacheService} from "../../openaireLibrary/services/clear-cache.service";

@Component({

    selector: 'div-help-contents',

    templateUrl: './div-help-contents.component.html',

})

export class DivHelpContentsComponent implements OnInit {

    // @ViewChild('deleteConfirmationModal')

    // public deleteConfirmationModal : DeleteConfirmationDialogComponent;

    @ViewChild('AlertModalDeleteDivHelpContents') alertModalDeleteDivHelpContents;

    private selectedDivContents: string[] = [];

    public checkboxes : CheckDivHelpContent[] = [];

    public divHelpContents : DivHelpContent[] = [];

    //public errorMessage: string;

    public formGroup : FormGroup;

    public pages: Page[];

    public checkboxAll : boolean = false;

    public filters : DivHelpContentFilterOptions = {id : '', active : null, text : new RegExp('')};

    public keyword: string = "";

    public counter = {all : 0, active : 0, inactive : 0};

    public communities: Portal[] = [];

    public selectedCommunityPid: string;

    public selectedPageId: string;

    public community: Portal;

    public page: Page;

    public properties:EnvProperties = null;

    public showLoading: boolean = true;

    public errorMessage: string = '';

    public updateErrorMessage: string = '';

    ngOnInit() {

      this.route.data

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

           this.properties = data.envSpecific;

           this.route.queryParams.subscribe(params => {

             HelperFunctions.scroll();

             this.title.setTitle('Administration Dashboard | Class Help Texts');

             this.selectedCommunityPid = params['communityId'];

             this.selectedPageId = params['pageId'];

             if(this.selectedCommunityPid && this.selectedPageId) {

               this.getPage(this.selectedPageId);

             } else if(this.selectedCommunityPid){

               this.selectedPageId = "";

               this.getPages(this.selectedCommunityPid);

             }

           });

        });

    }

    constructor(private element: ElementRef, private route: ActivatedRoute,

                private title: Title,

                private _helpService: HelpContentService, private router : Router,

                private _clearCacheService: ClearCacheService) {}

    getPage(pageId: string) {

      if(!Session.isLoggedIn()){

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

      } else {

        this.showLoading = true;

        this.updateErrorMessage = "";

        this.errorMessage = "";

        this._helpService.getPageByPortal(pageId, this.properties.adminToolsAPIURL, this.selectedCommunityPid).subscribe(

            page => {

              // if( (this.selectedCommunityPid == 'openaire' && !page.openaire)

              //   || (this.selectedCommunityPid == 'connect' && !page.connect)

              //   || (this.selectedCommunityPid != 'openaire' && this.selectedCommunityPid != 'connect' && !page.communities)) {

              if(this.properties.adminToolsPortalType != page.portalType) {

                this.router.navigate(['/classContents'], { queryParams: { "communityId": this.selectedCommunityPid} });

              } else {

                this.page = page;

                this.getDivHelpContents(this.selectedCommunityPid);

              }

            },

            error => this.handleError('System error retrieving page', error));

      }

    }

    getPages(community_pid: string) {

      if(!Session.isLoggedIn()){

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

      } else {

        this.showLoading = true;

        this.updateErrorMessage = "";

        this.errorMessage = "";

        this._helpService.getCommunityPagesWithDivId(community_pid, this.properties.adminToolsAPIURL).subscribe(

        //this._helpService.getPagesWithDivIds(community_pid, this.properties.adminToolsAPIURL).subscribe(

            pages => {

              this.pages = pages;

              this.getDivHelpContents(this.selectedCommunityPid);

            },

            error => this.handleError('System error retrieving pages', error));

      }

    }

    public countDivHelpContents() {

        this.counter = {all : 0, active : 0, inactive : 0};

        let filter = Object.assign({},this.filters);

        filter.active = null;

        this.divHelpContents.forEach(_ => {

            if(this.filterDivHelpContent(_,filter)){

                if (_.isActive==true) this.counter.active++;

                else this.counter.inactive++

            }

        });

        this.counter.all = this.counter.active + this.counter.inactive;

    }

    getDivHelpContents(community_pid: string) {

      if(!Session.isLoggedIn()){

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

      } else {

        this._helpService.getCommunityDivHelpContents(community_pid, this.properties.adminToolsAPIURL).subscribe(

            divHelpContents => {

                this.divHelpContents = divHelpContents as Array<DivHelpContent>;

                this.counter.all = this.divHelpContents.length;

                this.checkboxes = [];

                for (let i = this.divHelpContents.length - 1; i >= 0; i -= 1) {

                //for (let i = 0; i < this.divHelpContents.length; i++) {

                  let divId: DivId = this.divHelpContents[i].divId as DivId;

                  let pages: Page[] =  divId.pages as Page[];

                  const pageIds = pages.map(x => x._id);

                  if(!this.selectedPageId || pageIds.includes(this.selectedPageId)) {

                    this.cutContent(this.divHelpContents[i]);

                    this.checkboxes.unshift(<CheckDivHelpContent>{divHelpContent : this.divHelpContents[i], checked : false});

                  } else {

                    this.divHelpContents.splice(i, 1);

                  }

                }

                this.countDivHelpContents();

                this.showLoading = false;

            },

            error => this.handleError('System error retrieving page contents', error));

      }

    }

    public toggleCheckBoxes(event) {

        this.checkboxes.forEach(_ => _.checked = event.target.checked);

        this.checkboxAll = event.target.checked;

    }

    public applyCheck(flag : boolean) {

        this.checkboxes.forEach(_ => _.checked = flag);

        this.checkboxAll = false;

    }

    public getSelectedDivHelpContents() : string[] {

        return this.checkboxes.filter(divHelpContent => divHelpContent.checked == true)

            .map(checkedDivHelpContent => checkedDivHelpContent.divHelpContent).map(res => res._id);

    }

    public confirmDeleteDivHelpContent(id : string) {

        //this.deleteConfirmationModal.ids = [id];

        //this.deleteConfirmationModal.showModal();

        this.selectedDivContents = [id];

        this.confirmModalOpen();

    }

    public confirmDeleteSelectedDivHelpContents() {

        //this.deleteConfirmationModal.ids = this.getSelectedDivHelpContents();

        //this.deleteConfirmationModal.showModal();

        this.selectedDivContents = this.getSelectedDivHelpContents();

        this.confirmModalOpen();

    }

    private confirmModalOpen() {

      if(!Session.isLoggedIn()){

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

      } else {

        this.alertModalDeleteDivHelpContents.cancelButton = true;

        this.alertModalDeleteDivHelpContents.okButton = true;

        this.alertModalDeleteDivHelpContents.alertTitle = "Delete Confirmation";

        this.alertModalDeleteDivHelpContents.message = "Are you sure you want to delete the help text(s)?";

        this.alertModalDeleteDivHelpContents.okButtonText = "Yes";

        this.alertModalDeleteDivHelpContents.open();

      }

    }

    public confirmedDeleteDivHelpContents(data: any) {

      if(!Session.isLoggedIn()){

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

      } else {

        this.showLoading = true;

        this.updateErrorMessage = "";

        this._helpService.deleteDivHelpContents(this.selectedDivContents, this.properties.adminToolsAPIURL, this.selectedCommunityPid).subscribe(

            _ => {

              this.deleteDivHelpContentsFromArray(this.selectedDivContents);

              this.showLoading = false;

              this._clearCacheService.clearCache("class help contents deleted");

            },

            error => this.handleUpdateError('System error deleting the selected class content(s)', error)

        );

      }

    }

    private deleteDivHelpContentsFromArray(ids : string[]) : void {

        for(let id of ids) {

            let iqc = this.checkboxes.findIndex(_ => _.divHelpContent._id == id);

            let iq = this.divHelpContents.findIndex(_ => _._id == id);

            this.checkboxes.splice(iqc, 1);

            this.divHelpContents.splice(iqc, 1);

        }

        this.countDivHelpContents();

    }

    public editDivHelpContent(id : string) {

        //this.router.navigate(['/pageContents/edit/', _id]);

        if(this.selectedPageId) {

          this.router.navigate( ['/classContents/edit/'], { queryParams: { "classContentId": id, "communityId": this.selectedCommunityPid, "pageId": this.selectedPageId  } } );

        } else {

          this.router.navigate( ['/classContents/edit/'], { queryParams: { "classContentId": id, "communityId": this.selectedCommunityPid } } );

        }

    }

    public toggleDivHelpContents(status : boolean, ids : string[]) {

      if(!Session.isLoggedIn()){

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

      } else {

        this.updateErrorMessage = "";

        this._helpService.toggleDivHelpContents(ids,status, this.properties.adminToolsAPIURL, this.selectedCommunityPid).subscribe(

            () => {

                for(let id of ids) {

                    let i = this.checkboxes.findIndex(_ => _.divHelpContent._id == id);

                    this.checkboxes[i].divHelpContent.isActive=status;

                }

                this.countDivHelpContents();

                this.applyCheck(false);

                this._clearCacheService.clearCache("class help contents toggled (status: "+status+")");

            },

            error => this.handleUpdateError('System error changing the status of the selected page content(s)', error)

        );

      }

    }

    public divHelpContentSavedSuccessfully(divHelpContent: DivHelpContent) {

        this.cutContent(divHelpContent);

        this.checkboxes.push(<CheckDivHelpContent>{divHelpContent : divHelpContent, checked : false});

        this.divHelpContents.push(divHelpContent);

        this.applyCheck(false);

        this.countDivHelpContents();

    }

    public divHelpContentUpdatedSuccessfully(divHelpContent : DivHelpContent) {

        this.checkboxes.find(checkItem => checkItem.divHelpContent._id==divHelpContent._id).divHelpContent = divHelpContent;

        let index = this.divHelpContents.findIndex(checkItem => checkItem._id==divHelpContent._id);

        this.divHelpContents[index] = divHelpContent;

        this.applyCheck(false);

        this.countDivHelpContents();

    }

    public filterDivHelpContent(divHelpContent : DivHelpContent, filters : DivHelpContentFilterOptions) : boolean {

        let divId: DivId = divHelpContent.divId as DivId;

        let pages: Page[] = <Page[]>divId.pages;

        let pageIds: string[] = pages.map(x => x._id);

        let idFlag = filters.id == '' || /*(<Page[]>divId.pages)._id == filters.id*/ pageIds.includes(filters.id);

        let activeFlag = filters.active == null || divHelpContent.isActive == filters.active;

        let textFlag = filters.text.toString() == '' || (divHelpContent.content).match(filters.text) != null

          || ((<DivId>divHelpContent.divId).name).match(filters.text) != null;

        return idFlag && activeFlag && textFlag;

    }

    public cutContent(divHelpContent: DivHelpContent) {

      divHelpContent.content = divHelpContent.content.replace(/<[^>]*>/g, '');

      divHelpContent.content = divHelpContent.content.replace(/(\r\n|\n|\r| +(?= ))|\s\s+/gm," ");

      if(divHelpContent.content.length > 200) {

        divHelpContent.content = divHelpContent.content.substr(0, 200) + "...";

      }

    }

    public applyFilter() {

        this.checkboxes = [];

        this.divHelpContents.filter(item => this.filterDivHelpContent(item,this.filters)).forEach(

            _ => {

              this.cutContent(_);

              this.checkboxes.push(<CheckDivHelpContent>{divHelpContent: _, checked: false})

            }

        );

        this.countDivHelpContents();

    }

    public filterByPage(event: any) {

        this.filters.id = event.target.value;

        this.applyFilter();

    }

    public displayAllDivHelpContents() {

        this.filters.active = null;

        this.applyFilter();

    }

    public displayActiveDivHelpContents() {

        this.filters.active = true;

        this.applyFilter();

    }

    public filterBySearch(text : string) {

        this.filters.text = new RegExp(text, "i");

        this.applyFilter();

    }

    public displayInactiveDivHelpContents() {

        this.filters.active = false;

        this.applyFilter();

    }

    handleError(message: string, error) {

        this.errorMessage = message;

        console.log('Server responded: ' + error);

        this.showLoading = false;

    }

    handleUpdateError(message: string, error) {

        this.updateErrorMessage = message;

        console.log('Server responded: ' +error);

        this.showLoading = false;

    }

    public newClassContent() {

      if(this.selectedPageId) {

        this.router.navigate( ['/classContents/new'], { queryParams: {communityId: this.selectedCommunityPid, pageId: this.selectedPageId} } );

      } else {

        this.router.navigate( ['/classContents/new'], { queryParams: {communityId: this.selectedCommunityPid} } );

      }

    }

}

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

import { DivContentFormComponent } from "./div-help-content-form.component";

import { Subscription } from "rxjs";

import { HelpContentService } from "../../services/help-content.service";

import { DivHelpContent } from "../../domain/div-help-content";

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

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

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

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

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

import {Page} from "../../domain/page";

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

import {ClearCacheService} from "../../openaireLibrary/services/clear-cache.service";

@Component({

    selector: 'edit-div-help-content',

    templateUrl: 'edit-div-help-content.component.html',

})

export class EditDivHelpContentComponent implements OnInit, OnDestroy{

    @ViewChild(DivContentFormComponent)

    public formComponent : DivContentFormComponent;

    public communityPid: string;

    public pageId: string;

    public page: Page;

    private sub: Subscription;

    private divHelpContent: DivHelpContent;

    public properties:EnvProperties = null;

    public showLoading: boolean = true;

    public errorMessage: string = '';

    public updateErrorMessage: string = '';

    constructor(

        private element: ElementRef,

        private route: ActivatedRoute,

        private router: Router,

        private title: Title,

        private _helpContentService: HelpContentService,

        private _clearCacheService: ClearCacheService) {}

    ngOnInit() {

      this.route.data

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

           this.properties = data.envSpecific;

           this.sub = this.route.queryParams.subscribe(params => {

             HelperFunctions.scroll();

            //let id = params['id'];

            let divContentId = params['classContentId'];

            this.communityPid = params['communityId'];

            this.pageId = params['pageId'];

            this.title.setTitle('Administration Dashboard | Edit Class Help Text');

             if(!divContentId) {

               this.router.navigate(['/classContents'], { queryParams: { "communityId": this.communityPid} });

             }

            this.getDivHelpContent(divContentId);

          });

        });

    }

    ngOnDestroy() {

        this.sub.unsubscribe();

    }

    handleError(message: string, error) {

        this.errorMessage = message;

        console.log('Server responded: ' + error);

        this.showLoading = false;

    }

    handleUpdateError(message: string, error) {

        this.updateErrorMessage = message;

        console.log('Server responded: ' + error);

        this.showLoading = false;

    }

    private getPage(pageId: string) {

      this._helpContentService.getPageByPortal(pageId,this.properties.adminToolsAPIURL, this.communityPid).subscribe(

        page => {

          // if( (this.communityPid == 'openaire' && !page.openaire)

          //   || (this.communityPid == 'connect' && !page.connect)

          //   || (this.communityPid != 'openaire' && this.communityPid != 'connect' && !page.communities)) {

          if(this.properties.adminToolsPortalType != page.portalType) {

            this.router.navigate(['/classContents'], { queryParams: { "communityId": this.communityPid} });

          } else {

            this.page = page;

            this.showLoading = false;

          }

        },

        error => this.handleError('System error retrieving page with id: '+pageId, error)

      );

    }

    private getDivHelpContent(divContentId: string) {

      if(!Session.isLoggedIn()){

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

      } else {

        this.showLoading = true;

        this.errorMessage = "";

        this.updateErrorMessage = "";

        this._helpContentService.getDivHelpContent(divContentId, this.properties.adminToolsAPIURL, this.communityPid).subscribe(

            divHelpContent => {

              if(this.pageId) {

                this.getPage(this.pageId);

              }

              this.updateForm(divHelpContent);

              this.showLoading = false;

            },

            error => this.handleError('System error retrieving class help content', error));

      }

    }

    getDivId(divId: string) {

      if(!Session.isLoggedIn()){

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

      } else {

        this.showLoading = true;

        this._helpContentService.getDivIdFull(divId, this.properties.adminToolsAPIURL, this.communityPid).subscribe(

          div => {

            this.formComponent.selectedDiv = div;

            if(!this.pageId) {

              this.formComponent.getDivs("");

            }

            this.showLoading = false;

          },

          error => this.handleError('System error retrieving class', error)

       );

      }

    }

    private updateForm(divHelpContent : DivHelpContent) {

        this.divHelpContent = divHelpContent;

        this.getDivId(divHelpContent.divId as string);

        this.formComponent.myForm.patchValue((divHelpContent));

    }

    public saveCustom() {

      if(!Session.isLoggedIn()){

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

      } else {

        if(this.formComponent.myForm.valid) {

            this.showLoading = true;

            this.updateErrorMessage = "";

            let divHelpContent : DivHelpContent = this.formComponent.myForm.value;

            this._helpContentService.updateDivHelpContent(divHelpContent, this.properties.adminToolsAPIURL, this.communityPid).subscribe(

                _ => {

                  if(this.pageId) {

                    this.router.navigate( ['/classContents/'], { queryParams: { "communityId": this.communityPid, "pageId": this.pageId  } } );

                  } else {

                    this.router.navigate(['/classContents'], { queryParams: { "communityId": this.communityPid } } );

                  }

                  this.showLoading = false;

                  this._clearCacheService.clearCache("class help content updated");

                },

                err => this.handleUpdateError('System error updating class content', err)

            );

        } else {

            this.errorMessage = "Please fill all required fields";

        }

      }

    }

    public cancelCustom() {

      this.errorMessage = "";

      this.updateErrorMessage = "";

      if(this.pageId) {

        this.router.navigate( ['/classContents/'], { queryParams: { "communityId": this.communityPid, "pageId": this.pageId  } } );

      } else {

        this.router.navigate(['/classContents'], { queryParams: { "communityId": this.communityPid } } );

      }

    }

}

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

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

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

import {FABModule} from '../../utils/fabModule.module';

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

import {SafeHtmlPipeModule} from '../../openaireLibrary/utils/pipes/safeHTMLPipe.module';

import {DivContentFormComponent} from './div-help-content-form.component';

import {CKEditorModule} from 'ng2-ckeditor';

@NgModule({

    imports: [

        CommonModule, FormsModule,

        FABModule, SafeHtmlPipeModule, CKEditorModule,

        AlertModalModule, ReactiveFormsModule

    ],

    declarations: [

        DivContentFormComponent

    ],

    exports: [DivContentFormComponent]

})

export class DivHelpContentFormModule { }

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

    <div id="content">

        <div class="menubar fixed">

            <div class="sidebar-toggler visible-xs">

                <i class="ion-navicon"></i>

            </div>

            <div class="uk-text-large">New Class help text <span *ngIf="page && page.name">of page "{{page.name}}"</span></div>

        </div>

        <div class="content-wrapper">

            <div>

                <div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>

                <div [style.display]="showLoading ? 'inline' : 'none'" class="uk-animation-fade uk-width-1-1" role="alert"><img class="uk-align-center loading-gif"></div>

                <div-content-form [communityPid]="communityPid" [pageId]="pageId" [updateErrorMessage]="updateErrorMessage"></div-content-form>

                <button (click)="saveCustom()" class="uk-button uk-button-primary">Save class help text</button>

                <button (click)="cancelCustom()" class="uk-button">Cancel</button>

            </div>

        </div>

    </div>

</div>

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

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

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

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

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

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

import {FABModule} from '../../utils/fabModule.module';

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

import {DivHelpContentsRoutingModule} from './div-help-contents-routing.module';

import {SafeHtmlPipeModule} from '../../openaireLibrary/utils/pipes/safeHTMLPipe.module';

import {DivHelpContentsComponent} from './div-help-contents.component';

import {MatSlideToggleModule} from '@angular/material';

@NgModule({

  imports: [

    CommonModule, RouterModule, FormsModule, FABModule, SafeHtmlPipeModule,

    AlertModalModule, ReactiveFormsModule, DivHelpContentsRoutingModule, MatSlideToggleModule

  ],

    declarations: [

        DivHelpContentsComponent

    ],

    providers: [IsCommunity, ConnectAdminLoginGuard],

    exports: [DivHelpContentsComponent]

})

export class DivHelpContentsModule { }

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

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

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

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

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

import {EditDivHelpContentRoutingModule} from './edit-div-help-content-routing.module';

import {EditDivHelpContentComponent} from './edit-div-help-content.component';

import {DivHelpContentFormModule} from './div-help-content-form.module';

@NgModule({

    imports: [

        CommonModule,  RouterModule,

        DivHelpContentFormModule, EditDivHelpContentRoutingModule

    ],

    declarations: [

        EditDivHelpContentComponent

    ],

    providers: [IsCommunity, ConnectAdminLoginGuard],

    exports: [EditDivHelpContentComponent]

})

export class EditDivHelpContentModule { }

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

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

import { DivContentFormComponent } from "./div-help-content-form.component";

import { DivHelpContent } from "../../domain/div-help-content";

import { HelpContentService } from "../../services/help-content.service";

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

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

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

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

import {Page} from "../../domain/page";

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

import {ClearCacheService} from "../../openaireLibrary/services/clear-cache.service";

@Component({

    selector: 'new-div-help-content',

    templateUrl: 'new-div-help-content.component.html',

})

export class NewDivHelpContentComponent {

    @ViewChild(DivContentFormComponent)

    public formComponent : DivContentFormComponent;

    //private errorMessage : string = null;

    public communityPid: string;

    public pageId: string;

    public page: Page;

    public properties:EnvProperties = null;

    public showLoading: boolean = true;

    public errorMessage: string = '';

    public updateErrorMessage: string = '';

    constructor(

        private element: ElementRef,

        private route: ActivatedRoute,

        private router: Router,

        private title: Title,

        private _helpContentService: HelpContentService,

        private _clearCacheService: ClearCacheService) {}

    ngOnInit() {

      this.route.data

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

           this.properties = data.envSpecific;

           this.route.queryParams.subscribe(params => {

             HelperFunctions.scroll();

             this.title.setTitle('Administration Dashboard | New Class Help Text');

             this.communityPid = params['communityId'];

             this.pageId = params['pageId'];

             if(this.pageId) {

               this.getPage(this.pageId);

             } else {

               this.showLoading = false;

             }

           });

        });

    }

    private getPage(pageId: string) {

      this._helpContentService.getPageByPortal(pageId,this.properties.adminToolsAPIURL, this.communityPid).subscribe(

        page => {

          // if( (this.communityPid == 'openaire' && !page.openaire)

          //   || (this.communityPid == 'connect' && !page.connect)

          //   || (this.communityPid != 'openaire' && this.communityPid != 'connect' && !page.communities)) {

          if(this.properties.adminToolsPortalType != page.portalType) {

            this.router.navigate(['/classContents'], { queryParams: { "communityId": this.communityPid} });

          } else {

            this.page = page;

            this.showLoading = false;

            console.info(this.page);

          }

        },

        error => this.handleError('System error retrieving page with id: '+pageId, error)

      );

    }

    public saveCustom() {

      if(!Session.isLoggedIn()){

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

      } else {

        if(this.formComponent.myForm.valid) {

            this.showLoading = true;

            this.updateErrorMessage = "";

            let divHelpContent : DivHelpContent = this.formComponent.myForm.value;

            this._helpContentService.saveDivHelpContent(divHelpContent, this.properties.adminToolsAPIURL, this.communityPid).subscribe(

                _ => {

                  if(this.pageId) {

                    this.router.navigate( ['/classContents/'], { queryParams: { "communityId": this.communityPid, "pageId": this.pageId  } } );

                  } else {

                    this.router.navigate(['/classContents'], { queryParams: { "communityId": this.communityPid } } );

                  }

                  this.showLoading = false;

                  this._clearCacheService.clearCache("class help content saved");

                },

                err => this.handleUpdateError('System error saving page content', err)

            );

        } else {

            this.errorMessage = "Please fill all required fields";

        }

      }

    }

    public cancelCustom() {

      if(this.pageId) {

        this.router.navigate( ['/classContents/'], { queryParams: { "communityId": this.communityPid, "pageId": this.pageId  } } );

      } else {

        this.router.navigate(['/classContents'], { queryParams: { "communityId": this.communityPid } } );

      }

    }

    handleUpdateError(message: string, error) {

        this.errorMessage = message;

        console.log('Server responded: ' + error);

        this.showLoading = false;

    }

    handleError(message: string, error) {

      this.errorMessage = message;

      console.log('Server responded: ' + error);

      this.showLoading = false;

    }

}

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

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

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

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

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

import {NewDivHelpContentRoutingModule} from './new-div-help-content-routing.module';

import {NewDivHelpContentComponent} from './new-div-help-content.component';

import {DivHelpContentFormModule} from './div-help-content-form.module';

@NgModule({

    imports: [

        CommonModule,  RouterModule,

        DivHelpContentFormModule, NewDivHelpContentRoutingModule

    ],

    declarations: [

        NewDivHelpContentComponent

    ],

    providers: [IsCommunity, ConnectAdminLoginGuard],

    exports: [NewDivHelpContentComponent]

})

export class NewDivHelpContentModule { }

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

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

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

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

import {DivHelpContentsComponent} from './div-help-contents.component';

@NgModule({

    imports: [

        RouterModule.forChild([

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

        ])

    ]

})

export class DivHelpContentsRoutingModule { }

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

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

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

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

import {EditDivHelpContentComponent} from './edit-div-help-content.component';

@NgModule({

    imports: [

        RouterModule.forChild([

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

        ])

    ]

})

export class EditDivHelpContentRoutingModule { }

<div *ngIf="updateErrorMessage" class="uk-alert uk-alert-danger" role="alert">{{updateErrorMessage}}</div>

<div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>

<div [style.display]="showLoading ? 'inline' : 'none'" class="uk-animation-fade uk-width-1-1" role="alert"><img class="uk-align-center loading-gif"></div>

<div class="uk-alert uk-alert-primary uk-margin-top-large">

     <span class="uk-margin-small-right uk-icon" uk-icon="info"></span>

    Create or edit help text

    <div class="uk-text-small">

      Select the class to be displayed, add the content and click active to make it visible to dashboard

    </div>

  </div>

<form *ngIf="!errorMessage && !showLoading" [formGroup]="myForm">

    <div class="form-group">

        <div class="uk-margin-bottom" *ngIf="selectedDiv">Class content displayed in page(s): <span *ngFor="let page of selectedDiv.pages let i=index">{{page.name}}<span *ngIf="i<(selectedDiv.pages.length-1)">, </span></span></div>

      <div *ngIf="showPageSelect && !editMode" class="form-group">

        <label for="pageTag">Select Page</label>

          <select id="pageTag" (change)="pageSelected($event)" [value]="pageId ? pageId : ''">

              <option *ngIf="!pageId"></option>

              <option *ngFor="let page of availablePages" [value]="page._id">{{page.name}}</option>

          </select>

      </div>

      <div *ngIf="pageId || selectedDiv" class="form-group">

        <label for="divTag">Select Class</label>

        <select formControlName="divId" id="divTag" class="form-control">

            <!-- <option *ngIf="selectedDiv" [value]="selectedDiv._id">{{selectedDiv.name}}</option> -->

            <option *ngFor="let div of availableDivs" [value]="div._id" (click)="divIdSelected(div)">{{div.name}}</option>

        </select>

      </div>

    </div>

    <div class="form-group" [ngClass]="{'has-error':!myForm.controls.content.valid && myForm.controls.content.dirty}">

        <label>Content</label>

        <div>

            <!-- [config]="{allowedContent: true,extraAllowedContent : '*(*)'}"> -->

            <ckeditor

                    [readonly]="false"

                    debounce="500"

                    formControlName="content"

                    [config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]', removeButtons: 'Save,NewPage,DocProps,Preview,Print',

                                extraPlugins: 'divarea'}">

            </ckeditor>

        </div>

    </div>

    <div class="form-group">

        <label>Select Status</label>

        <label class="checkbox">

            <span style="font-weight: normal;">Active</span>

            <input tabindex="0" type="checkbox" formControlName="isActive">

        </label>

    </div>

    <input type="hidden" formControlName="_id">

</form>

<!-- <div *ngIf="selectedDiv"><span *ngFor="let page of selectedDiv.pages">{{page.name}} </span></div> -->

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

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

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

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

import {NewDivHelpContentComponent} from './new-div-help-content.component';

@NgModule({

    imports: [

        RouterModule.forChild([

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

        ])

    ]

})

export class NewDivHelpContentRoutingModule { }

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

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

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

import { Page } from "../../domain/page";

import { DivId } from "../../domain/divId";

import { HelpContentService } from "../../services/help-content.service";

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

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

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

@Component({

    selector: 'div-content-form',

    templateUrl: './div-help-content-form.component.html',

})

export class DivContentFormComponent implements OnInit{

    @Input('group')

    myForm: FormGroup;

    @Input('communityPid')

    communityPid: string;

    @Input('pageId')

    pageId: string;

    @Input('editMode')

    editMode: boolean = false;

    //public divIdName: string = '';

    private communityId: string = '';

    showPageSelect: boolean = true;

    selectedDiv: DivId;

    private availablePages : Page[] = [];

    private availableDivs : DivId[] = [];

    private ckeditorContent : string;

    public properties:EnvProperties = null;

    public showLoading: boolean = true;

    public errorMessage: string = '';

    @Input() updateErrorMessage: string = '';

    constructor(private route: ActivatedRoute, private _router: Router, private _fb: FormBuilder, private _helpContentService: HelpContentService){}

    ngOnInit() {

      this.myForm = this.form;

      this.route.data

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

           this.properties = data.envSpecific;

           this.route.queryParams.subscribe(params => {

             if(!Session.isLoggedIn()){

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

             } else {

               if(this.pageId) {

                 this.showPageSelect = false;

                 this.getDivs(this.pageId);

               } else {

                 if(!this.editMode) {

                   this._helpContentService.getCommunityPagesWithDivId(this.communityPid, this.properties.adminToolsAPIURL).subscribe(

                     pages => {

                       this.availablePages = pages;

                       this.showLoading = false;

                     },

                     error => this.handleError('System error retrieving pages', error));

                   }

              }

              this.getCommunity(this.communityPid);

            }

           });

        });

    }

    public pageSelected(event) {

      if(!Session.isLoggedIn()){

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

      } else {

        this.getDivs(event.target.value);

      }

    }

    public divIdSelected(div: DivId) {

      this.selectedDiv = div;

    }

    public getCommunity(communityPid: string) {

      if(!Session.isLoggedIn()){

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

      } else {

        this.showLoading = true;

        this.errorMessage = '';

        this._helpContentService.getCommunity(this.communityPid, this.properties.adminToolsAPIURL).subscribe(

          community => {

            this.communityId = community._id;

            this.myForm.patchValue({

              community: this.communityId

            });

            this.showLoading = false;

          },

          error => this.handleError('System error retrieving community', error)

        );

      }

    }

    public getDivs(pageId: string) {

      if(!Session.isLoggedIn()){

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

      } else {

        //this.showLoading = true;

        this.errorMessage = '';

        this._helpContentService.getDivIdsFullByPortal(pageId, this.properties.adminToolsAPIURL, this.communityPid).subscribe(

            divs => {

              this.availableDivs = divs;

              this.pageId = pageId;

              this.showLoading = false;

            },

            error => this.handleError('System error retrieving pages', error));

      }

    }

    // public selectedDiv(event) {

    //   console.info(event.target.value);

    // }

    public get form() {

        return this._fb.group({

            divId: ['', Validators.required],

            content: ['', Validators.required],

            isActive: true,

            portal: this.communityPid,

            _id : '',

        });

    }

    public reset() {

        this.myForm.patchValue({

          divId: '',

          content: '',

          isActive: true,

          portal: this.communityPid,

          _id : ''

        });

        this.myForm.markAsPristine();

    }

    handleError(message: string, error) {

        this.errorMessage = message;

        console.log('Server responded: ' + error);

        this.showLoading = false;

    }

}

<div id="divHelpContents">

        <div class="menubar ">

            <div *ngIf="!selectedPageId" class="divHelpContent-title uk-text-large">Class help texts</div>

            <div *ngIf="selectedPageId && page" class="divHelpContent-title uk-text-large">Class help texts of page '{{page.name}}'</div>

            <div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>

              <a class="uk-alert-close" uk-close></a>

              {{updateErrorMessage}}

            </div>

            <div *ngIf="!errorMessage && !showLoading" class="page-controls">

                <div class="  filters ">

                    <div class="show-options uk-float-right">

                      <button class="uk-button" type="button">Bulk Actions</button>

                      <div uk-dropdown="mode: click">

                        <ul class="uk-nav uk-navbar-dropdown-nav"

                            [attr.uk-tooltip]="getSelectedDivHelpContents().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"

                            title="Select at least one help text">

                          <li><a [class]="getSelectedDivHelpContents().length == 0 ? 'uk-disabled' : ''" (click)="toggleDivHelpContents(true,getSelectedDivHelpContents())"><i></i> Activate </a></li>

                          <li><a [class]="getSelectedDivHelpContents().length == 0 ? 'uk-disabled' : ''" (click)="toggleDivHelpContents(false,getSelectedDivHelpContents())"><i></i> Deactivate </a></li>

                          <li><a [class]="getSelectedDivHelpContents().length == 0 ? 'uk-disabled' : ''" (click)="confirmDeleteSelectedDivHelpContents()"><i></i> Delete </a></li>

                        </ul>

                      </div>

                    </div>

                </div>

            </div>

            <!-- <a *ngIf="!selectedPageId" [queryParams]="{communityId: selectedCommunityPid}" routerLink="/classContents/new" class="uk-button uk-button-primary uk-float-right"><i></i> New help text </a> -->

            <!-- <a *ngIf="selectedPageId" [queryParams]="{communityId: selectedCommunityPid, pageId: selectedPageId}" routerLink="/classContents/new" class="uk-button uk-button-primary uk-float-right"><i></i> New class help text </a> -->

            <div class="uk-grid uk-margin-bottom">

            <form target="BSFormPanel_Admin_1" class="search">

                <!-- <input #inputstring (keyup.enter)="filterBySearch(inputstring.value)" placeholder="Class Help text..." type="text" class="uk-input uk-width-medium"/>

                <button class="uk-button" type="submit">Search</button> -->

                <input type="text" class="uk-input uk-width-medium" placeholder="Class name, content..." aria-describedby="sizing-addon2"  [(ngModel)]="keyword"  name="keyword" >

                <button (click)="filterBySearch(keyword)"  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>

            </form>

            <div *ngIf="!selectedPageId" class="filters marginBottom20">

                <div class="links form-group form-inline">

                    <span>Filter by page:</span>

                    <select class="uk-select uk-width-medium" (change)="filterByPage($event)">

                        <option value="">-- none selected --</option>

                        <option *ngFor="let page of pages" value="{{page._id}}">{{page.name}}</option>

                    </select>

                </div>

            </div>

          </div>

        </div>

        <div class="content-wrapper" id="contentWrapper">

            <div>

                <div class="contentPanel">

                    <div *ngIf="errorMessage" class="uk-alert uk-alert-danger  uk-margin-large-top" role="alert">{{errorMessage}}</div>

                    <div [style.display]="showLoading ? 'inline' : 'none'" class="uk-animation-fade uk-margin-large-top  uk-width-1-1" role="alert"><img class="uk-align-center loading-gif"></div>

                    <div *ngIf="!errorMessage && !showLoading">

                        <div class="gwt-HTML">

                            <div class="users-list"> <!--"row" class removed"-->

                                <div class="col-md-12">

                                  <!-- <div *ngIf="!selectedPageId" class="filters marginBottom20">

                                      <div class="links form-group form-inline">

                                          <span>Filter by community:</span>

                                          <select class="uk-select uk-width-medium" (change)="filterByCommunity($event)">

                                              <option *ngFor="let community of communities" value="{{community.pid}}">{{community.name}}</option>

                                          </select>

                                      </div>

                                  </div> -->

                                  <div class="uk-alert uk-alert-primary uk-margin-top-large">

                                       <span class="uk-margin-small-right uk-icon" uk-icon="info"></span>

                                      Enable or disable help text to show or hide it from the dashboard

                                    </div>

                                  <ul uk-tab class="links">

                                      <li [ngClass]="{'uk-active' : filters.active==null}" (click)="displayAllDivHelpContents()">

                                          <a>All class help texts <span class="uk-badge">{{counter.all | number}}</span></a>

                                      </li>

                                      <li [ngClass]="{'uk-active' : filters.active==true}" (click)="displayActiveDivHelpContents()">

                                          <a>Active <span class="uk-badge">{{counter.active | number}}</span></a>

                                      </li>

                                      <li [ngClass]="{'uk-active' : filters.active==false}" (click)="displayInactiveDivHelpContents()">

                                          <a>Inactive <span class="uk-badge">{{counter.inactive | number}}</span></a>

                                      </li>

                                  </ul>

                                  <table class="uk-table uk-table-striped">

                                    <thead>

                                        <tr>

                                            <th><input id="allDivHelpContentsCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th>

                                            <th *ngIf="!selectedPageId">Page</th>

                                            <!--th *ngIf="!selectedPageId">Community</th-->

                                            <th>Class</th>

                                            <th>Content</th>

                                            <th>Change status</th>

                                            <th>Actions</th>

                                        </tr>

                                    </thead>

                                    <tbody >

                                        <tr *ngFor="let check of checkboxes; let i=index">

                                            <td><input id="{{check.divHelpContent._id}}" class="checkBox" type="checkbox"

                                                                                name="entitiescb[]" value="{{check.divHelpContent._id}}" [(ngModel)]="check.checked">

                                            </td>

                                            <td *ngIf="!selectedPageId">

                                                <!-- <div class="page" href="#">{{check.divHelpContent.divId.page.name}}</div> -->

                                                <div class="pages" href="#">

                                                  <span *ngFor="let page of check.divHelpContent.divId.pages let i=index">{{page.name}}<span *ngIf="i<(check.divHelpContent.divId.pages.length-1)">, </span></span>

                                                </div>

                                            </td>

                                            <!--td *ngIf="!selectedPageId">

                                                <div class="community" href="#">{{check.divHelpContent.community.name}}</div>

                                            </td-->

                                            <td>

                                                <div class="divId" href="#">{{check.divHelpContent.divId.name}}</div>

                                            </td>

                                            <td>

<!--                                              <div class="content" [innerHTML]="check.divHelpContent.content | safeHtml"></div>-->

                                              <div class="content">{{check.divHelpContent.content}}</div>

                                            </td>

                                            <td>

                                              <mat-slide-toggle [checked]="check.divHelpContent.isActive"

                                                                (change)="($event.source.checked = check.divHelpContent.isActive);toggleDivHelpContents(!check.divHelpContent.isActive,[check.divHelpContent._id])"></mat-slide-toggle>

                                            </td>

                                            <td>

                                                <div class="actions" href="#">

                                                    <input title="Edit" src="assets/imgs/icn_edit.png" class="edit uk-margin-small-right" type="image" (click)="editDivHelpContent(check.divHelpContent._id)">

                                                    <input title="Delete" src="assets/imgs/icn_trash.png" class="delete" type="image" (click)="confirmDeleteDivHelpContent(check.divHelpContent._id)">

                                                </div>

                                            </td>

                                        </tr>

                                    </tbody>

                                </table>

                                    <div *ngIf="checkboxes.length==0" class="col-md-12">

                                        <div class="uk-alert-warning" uk-alert>No class help texts found</div>

                                    </div>

                                </div>

                            </div>

                        </div>

                        <a *ngIf="selectedPageId && page" [queryParams]="{type: page.type, communityId: selectedCommunityPid}" routerLink="/pages">Go back to {{page.type}} pages</a>

                    </div>

                </div>

            </div>

        </div>

        <fab (clicked)="newClassContent()"></fab>

</div>

<!-- <delete-confirmation-dialog #deleteConfirmationModal [isModalShown]="isModalShown" (emmitObject)="confirmedDeleteDivHelpContents($event)">

    Are you sure you want to delete the selected help text(s)?

</delete-confirmation-dialog> -->

<modal-alert #AlertModalDeleteDivHelpContents (alertOutput)="confirmedDeleteDivHelpContents($event)"></modal-alert>

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

    <div id="content">

        <div class="menubar fixed">

            <div class="sidebar-toggler visible-xs">

                <i class="ion-navicon"></i>

            </div>

            <div class="uk-text-large">Edit Class help text <span *ngIf="page && page.name">of page "{{page.name}}"</span></div>

        </div>

        <div class="content-wrapper">

            <div>

                <div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>

                <div [style.display]="showLoading ? 'inline' : 'none'" class="uk-animation-fade uk-width-1-1" role="alert"><img class="uk-align-center loading-gif"></div>

                <div-content-form [communityPid]="communityPid" [pageId]="pageId" [editMode]="true"

                                  [updateErrorMessage]="updateErrorMessage"></div-content-form>

                <button (click)="saveCustom()" class="uk-button uk-button-primary">Update class help text</button>

                <button (click)="cancelCustom()" class="uk-button">Cancel</button>

            </div>

        </div>

    </div>

</div>

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

import {HttpClientModule} from '@angular/common/http';

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

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

import {ErrorMessagesModule} from '../../openaireLibrary/utils/errorMessages.module';

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

import {SafeHtmlPipeModule} from '../../openaireLibrary/utils/pipes/safeHTMLPipe.module';

import {HtmlPageContentFormComponent} from './html-page-content-form.component';

import {EditHtmlPageContentComponent} from './edit-htmlpage-content.component';

import {HtmlPageContentService} from './html-page-content.service';

import {EditHtmlPageContentRoutingModule} from './edit-html-page-content-routing.module';

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

import {CKEditorModule} from 'ng2-ckeditor';

@NgModule({

    imports: [

        CommonModule,

        HttpClientModule,

        FormsModule,

        ReactiveFormsModule,

        RouterModule,

        CKEditorModule,

        ErrorMessagesModule,

        AlertModalModule,

        SafeHtmlPipeModule,

        EditHtmlPageContentRoutingModule

    ],

    declarations: [

        HtmlPageContentFormComponent,

        EditHtmlPageContentComponent,

    ],

    providers: [

        HtmlPageContentService

    ],

    exports: [EditHtmlPageContentComponent]

})

export class EditHtmlPageContentModule { }

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

import { FormGroup } from "@angular/forms";

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

//import { Location } from "@angular/common";

import { HelpContentService } from "../../services/help-content.service";

import { HtmlPageContentService } from "./html-page-content.service";

import { HtmlPageContent, CheckHtmlPageContent } from "../../domain/html-page-content";

import { HtmlPageContentFormComponent } from "./html-page-content-form.component";

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

import { Subscription } from "rxjs";

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';

declare var UIkit: any;

@Component({

    selector: 'edit-htmlpage-content',

    templateUrl: './edit-htmlpage-content.component.html',

})

export class EditHtmlPageContentComponent implements OnInit {

    @ViewChild(HtmlPageContentFormComponent)

    public formComponent : HtmlPageContentFormComponent;

    communityPid: string;

    pageId: string;

    pageName: string = "";

    //public mode: string = "edit";

    private sub: Subscription;

    private htmlPageContent: HtmlPageContent;

    public properties:EnvProperties = null;

    public showLoading: boolean = true;

    public errorMessage: string = '';

    public updateErrorMessage: string = '';

    constructor(

        private element: ElementRef,

        private route: ActivatedRoute,

        private router: Router,

        private title: Title,

        private _helpContentService: HelpContentService,

        private _htmlContentService: HtmlPageContentService) {

          this.router.routeReuseStrategy.shouldReuseRoute = function(){

            return false;

          }

    }

    ngOnInit() {

      this.route.data

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

           this.properties = data.envSpecific;

           this.sub = this.route.queryParams.subscribe(params => {

             HelperFunctions.scroll();

             this.title.setTitle('Administration Dashboard | Edit HTML page');

             this.communityPid = params['communityId'];

             this.pageId = params['pageId'];

             this.getPage(this.communityPid, this.pageId);

           });

      });

    }

    ngOnDestroy() {

        this.sub.unsubscribe();

    }

    handleError(message: string, error) {

        this.errorMessage = message;

        console.log('Server responded: ' + error);

        this.showLoading = false;

    }

    handleUpdateError(message: string, error) {