D-Net

<form [formGroup]="myForm">

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

        <label for="pageRouteTag">Page Route</label>

        <input type="text" class="form-control" formControlName="route" id="pageRouteTag" placeholder="Page Route">

    </div>

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

        <label for="pageNameTag">Page Name</label>

        <input type="text" class="form-control" formControlName="name" id="pageNameTag" placeholder="Page Name">

    </div>

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

        <label for="typeTag">Select Type</label>

        <select formControlName="type" id="typeTag" class="form-control">

            <option [value]="'search'">search</option>

            <option [value]="'link'">link</option>

            <option [value]="'share'">share</option>

        </select>

    </div>

    <div formArrayName="entities" class="form-group">

        <label for="entityNameTag">Entity Name</label>

        <div id="entityNameTag">

          <pre class="card card-block card-header"><span *ngFor="let entity of myForm.value.entities; let i=index">{{entity.name}}<span *ngIf="i<(myForm.value.entities.length-1)">, </span></span></pre>

          <button type="button" (click)="toggle()">Add / Remove entities</button>

          <ng-container *ngIf="!myForm.value.isCollapsed" >

          <div *ngFor="let entity of getKeys(allEntities)">

            <span>

              <span *ngIf="allEntities.get(entity)" class="activated" >

                  <input (click)="toggleEntity(false,[entity._id], entity)" class="deactivate" src="imgs/delete-icon.png" title="Disable" width="20" type="image" height="20">

              </span>

              <span *ngIf="!allEntities.get(entity)" class="deactivated" >

                  <input (click)="toggleEntity(true,[entity._id], entity)" class="deactivate" src="imgs/add-icon.png" title="Enable" width="20" type="image" height="20">

              </span>

              {{entity.name}}

            </span>

          </div>

        </ng-container>

        </div>

    </div>

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

</form>

<form [formGroup]="myForm">

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

        <label for="entityNameTag">Entity Name</label>

        <input type="text" class="uk-input uk-width-medium" formControlName="name" id="entityNameTag" placeholder="Entity Name">

    </div>

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

        <label for="entityPidTag">Entity persistent id for portal</label>

        <input type="text" class="uk-input uk-width-medium" formControlName="pid" id="entityPidTag" placeholder="Entity Pid">

    </div>

<!--

    <div ngModelGroup="phoneNumbers">

      <h3>Phone numbers</h3>

      <div *ngFor="let phoneId of phoneNumberIds; let i=index;">

        <label>Phone number {{i + 1}}</label>

        <input type="text" name="phoneNumber[{{phoneId}}]" #phoneNumber="ngModel" ngModel/>

        <button type="button" (click)="remove(i); myForm.control.markAsTouched()">remove</button>

      </div>

      <button type="button" (click)="add(); myForm.control.markAsTouched()">Add phone number</button>

    </div>

-->

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

  <div *ngFor="let entity of entities; let i=index;">

    <label>Entity {{i + 1}}</label>

    <input type="text" name="entities[{{entity}}]" class="form-control" formControlName="entity"/>

  </div>

</div> -->

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

</form>

<!--<pre>-->

<!--{{myForm.value | json}}-->

<!--</pre>-->

/**

 * Created by stefania on 7/13/17.

 */

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

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

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

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

import { ModalFormComponent } from "../modal-form.component";

import { DeleteConfirmationDialogComponent } from "../delete-confirmation-dialog.component";

import { PageFormComponent } from "./page-form.component";

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

import { Community } from "../../domain/community";

import { Entity } from "../../domain/entity";

@Component({

    selector: 'pages',

    templateUrl: './pages.component.html',

})

export class PagesComponent implements OnInit {

    // @ViewChild(ModalFormComponent)

    @ViewChild('saveModal')

    public modal:ModalFormComponent;

    @ViewChild('updateModal')

    public updateModal:ModalFormComponent;

    @ViewChild('deleteConfirmationModal')

    public deleteConfirmationModal : DeleteConfirmationDialogComponent;

    @ViewChild(PageFormComponent)

    public formComponent : PageFormComponent;

    public checkboxes : CheckPage[] = [];

    public pages : Page[] = [];

    public pageWithDivIds: string[] = [];

    public errorMessage: string;

    public formGroup : FormGroup;

    private searchText : RegExp = new RegExp('');

    public communities: Community[] = [];

    public selectedCommunityPid: string;

    public pagesType: string;

    ngOnInit() {

        this.formGroup = this.formComponent.form;

//        this.getCommunities();

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

          this.pagesType = "";

          if(params['type']) {

            this.pagesType = params['type'];

          }

          this.getCommunities();

        });

    }

    constructor(private route: ActivatedRoute, private _helpContentService: HelpContentService) {}

    getPages(community_pid: string) {

        let self = this;

        if(this.pagesType) {

          this._helpContentService.getCommunityPagesByType(community_pid, "?page_type="+this.pagesType).subscribe(

              pages => {

                self.pagesReturned(pages);

              },

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

        } else {

          this._helpContentService.getCommunityPages(community_pid).subscribe(

              pages => {

                self.pagesReturned(pages);

              },

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

        }

    }

    getPagesWithDivIds(community_pid: string) {

      let self = this;

      this._helpContentService.getPagesWithDivIds(community_pid).subscribe(

          pages => {

            self.pageWithDivIds = pages[community_pid];

          },

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

    }

    pagesReturned(pages: Page[]) {

      this.pages = pages;

      this.checkboxes = [];

      pages.forEach(_ => {

          this.checkboxes.push(<CheckPage>{page : _, checked : false});

      });

    }

    getCommunities() {

        let self = this;

        this._helpContentService.getCommunities().subscribe(

            communities => {

                self.communities = communities;

                self.selectedCommunityPid = self.communities[0].pid;

                self.getPages(self.selectedCommunityPid);

                self.getPagesWithDivIds(self.selectedCommunityPid);

        },

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

    }

    public showModal():void {

        this.modal.showModal();

    }

    public toggleCheckBoxes(event) {

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

    }

    public applyCheck(flag : boolean) {

      console.info("applyCheck "+flag);

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

    }

    public getSelectedPages() : string[] {

        return this.checkboxes.filter(page => page.checked == true).map(checkedPage => checkedPage.page).map(res => res._id);

    }

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

        for(let id of ids) {

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

            this.checkboxes.splice(i, 1);

        }

    }

    public confirmDeletePage(id : string) {

        this.deleteConfirmationModal.ids = [id];

        this.deleteConfirmationModal.showModal();

    }

    public confirmDeleteSelectedPages() {

        this.deleteConfirmationModal.ids = this.getSelectedPages();

        this.deleteConfirmationModal.showModal();

    }

    public confirmedDeletePages(ids : string[]) {

        this._helpContentService.deletePages(ids).subscribe(

            _ => this.deletePagesFromArray(ids),

            error => this.handleError('System error deleting the selected pages', error)

        );

    }

    public editPage(i : number) {

        let page : Page = this.checkboxes[i].page;

        this.formGroup.patchValue(page);

        const entityFGs = (page.entities as Entity[]).map(entity => this.formComponent._fb.group(entity));

        const entityFormArray = this.formComponent._fb.array(entityFGs);

        this.formGroup.setControl('entities', entityFormArray);

        console.info(this.formGroup.value);

        this.updateModal.showModal();

    }

    public pageSavedSuccessfully(page: Page) {

        this.checkboxes.push(<CheckPage>{page : page, checked : false});

        console.info("checkboxes length: "+this.checkboxes.length);

        this.applyCheck(false);

    }

    public pageUpdatedSuccessfully(page : Page) {

      console.info(page._id);

      console.info(this.checkboxes.find(checkItem => (checkItem.page._id == page._id)));

      console.info(page.entities);

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

        this.applyCheck(false);

    }

    public filterBySearch(text : string) {

        this.searchText = new RegExp(text,'i');

        this.applyFilter();

    }

    public applyFilter() {

        this.checkboxes = [];

        this.pages.filter(item => this.filterPages(item)).forEach(

            _ => this.checkboxes.push(<CheckPage>{page: _, checked: false})

        );

    }

    public filterPages(page : Page) : boolean {

        let textFlag = this.searchText.toString() == '' || (page.route + ' ' +page.name).match(this.searchText) != null;

        return textFlag;

    }

    handleError(message: string, error) {

        if(error == null) {

            this.formComponent.reset();

        }

        this.errorMessage = message + ' (Server responded: ' + error + ')';

    }

    public filterByCommunity(event: any) {

        this.selectedCommunityPid = event.target.value;

        this.applyCommunityFilter(this.selectedCommunityPid);

    }

    public applyCommunityFilter(community_pid: string) {

        this.getPages(community_pid);

        this.getPagesWithDivIds(community_pid);

    }

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

        this._helpContentService.togglePages(this.selectedCommunityPid,ids,status).subscribe(

            () => {

                for(let id of ids) {

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

                //     this.checkboxes[i].page.isEnabled=status;

                // }

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

                  this.checkboxes[i].page.isEnabled=status;

                }

                this.applyCheck(false);

            },

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

        );

    }

}

<div id="entities" class="uk-container">

        <div class="menubar ">

            <div class="entity-title uk-article-title  ">Entities</div>

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

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

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

            </form>

            <a (click)="showModal()" class="uk-button uk-button-primary uk-float-right"><i></i> New Entity </a>

        </div>

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

            <div>

                <div class="contentPanel">

                    <div class="uk-alert-danger" uk-alert style="display: none;" aria-hidden="true">

                        <span></span><span></span><span></span></div>

                    <div class="uk-alert-success" uk-alert style="display: none;" aria-hidden="true">

                        <span></span><span></span><span></span></div>

                    <div class="uk-alert" uk-alert style="display: none;" aria-hidden="true"><span></span><span></span><span></span></div>

                    <div 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-dropdown-nav">

                                    <li><a (click)="toggleEntities(true, getSelectedEntities())"><i></i> Activate </a></li>

                                    <li><a (click)="toggleEntities(false, getSelectedEntities())"><i></i> Deactivate </a></li>

                                    <li><a (click)="confirmDeleteSelectedEntities()"><i></i> Delete </a></li>

                                </ul>

                              </div>

                                <!--div class="btn-group"><a href="javascript:;" class="btn dropdown-toggle"

                                                          data-toggle="dropdown"><i></i> Bulk Actions <span

                                        class="caret"></span></a>

                                    <ul class="dropdown-menu">

                                        <li><a (click)="confirmDeleteSelectedEntities()"><i></i> Delete </a></li>

                                    </ul>

                                </div-->

                            </div>

                        </div>

                    </div>

                    <div>

                        <div class="gwt-HTML">

                            <div class="row users-list">

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

                                  <div 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 value="">-- none selected --</option-->

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

                                          </select>

                                      </div>

                                  </div>

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

                                    <thead>

                                        <tr>

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

                                            <th>Name</th>

                                            <th>State</th>

                                            <th>Actions</th>

                                        </tr>

                                    </thead>

                                    <tbody >

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

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

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

                                            </td>

                                            <td>

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

                                            </td>

                                            <td>

                                              <div *ngIf="check.entity.isEnabled" class="activated" >

                                                  <input (click)="toggleEntities(false,[check.entity._id])" class="deactivate" src="imgs/check-icon.png" title="Disable" width="20" type="image" height="20">

                                              </div>

                                              <div *ngIf="!check.entity.isEnabled" class="deactivated" >

                                                  <input (click)="toggleEntities(true,[check.entity._id])" class="deactivate" src="imgs/x-icon.png" title="Enable" width="20" type="image" height="20">

                                              </div>

                                            </td>

                                            <td>

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

                                                    <input title="Edit" src="imgs/icn_edit.png" class="edit" type="image" (click)="editEntity(i)">

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

                                                </div>

                                            </td>

                                        </tr>

                                    </tbody>

                                </table>

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

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

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

</div>

<modal-form #saveModal [saveText]="'Save'" [titleText]="'Add a new Entity'" [formGroup]="formGroup" [type]="'entity'"

            [isModalShown]="isModalShown" (emmitObject)="entitySavedSuccessfully($event)" (emmitError)="handleError($event)">

    <entity-form [group]="formGroup"></entity-form>

</modal-form>

<modal-form #updateModal [saveText]="'Update'" [titleText]="'Update Entity'" [formGroup]="formGroup" [type]="'entity'"

            [isModalShown]="isModalShown" (emmitObject)="entityUpdatedSuccessfully($event)" (emmitError)="handleError($event)">

    <entity-form [group]="formGroup"></entity-form>

</modal-form>

<modal-form #okModal [saveText]="'OK'" [titleText]="'Warning'" [type]="'none'"

            [isModalShown]="isModalShown" (emmitObject)="continueToggling($event)" (emmitError)="handleError($event)">

            This action will affect all search pages related to this entity!

            Pages' status will change to entity's status!

            Do you want to continue?

<modal-form>

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

    Are you sure you want to delete the selected entity(-ies)?

</delete-confirmation-dialog>

<!-- <div id="pages">

    <div id="content">

        <div class="menubar fixed">

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

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

            </div>

            <div class="page-title">Pages</div>

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

                <input #inputstring (keyup.enter)="filterBySearch(inputstring.value)" placeholder="Search pages (route, name)..." type="text"/>

                <input class="btn" type="submit">

            </form>

            <a (click)="showModal()" class="btn btn-success pull-right"><i></i> New Page </a>

        </div>

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

            <div>

                <div class="contentPanel">

                    <div class="alert alert-danger" style="display: none;" aria-hidden="true">

                        <span></span><span></span><span></span></div>

                    <div class="alert alert-success" style="display: none;" aria-hidden="true">

                        <span></span><span></span><span></span></div>

                    <div class="alert" style="display: none;" aria-hidden="true"><span></span><span></span><span></span></div>

                    <div class="row page-controls">

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

                            <div class="show-options">

                                <div class="btn-group"><a href="javascript:;" class="btn dropdown-toggle"

                                                          data-toggle="dropdown"><i></i> Bulk Actions <span

                                        class="caret"></span></a>

                                    <ul class="dropdown-menu">

                                        <li><a (click)="confirmDeleteSelectedPages()"><i></i> Delete </a></li>

                                    </ul>

                                </div>

                            </div>

                        </div>

                    </div>

                    <div>

                        <div class="gwt-HTML">

                            <div class="row users-list">

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

                                  <div class="filters marginBottom20">

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

                                          <div class="gwt-Label filterLabel">Filter by community:</div>

                                          <select class="input-xxlarge form-control" (change)="filterByCommunity($event)">

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

                                          </select>

                                      </div>

                                  </div>

                                    <div class="row headers">

                                        <div class="col-sm-1 header select-users"><input id="allPageCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)">

                                        </div>

                                        <div class="col-sm-2 header hidden-xs"><label><a href="#">Route</a></label></div>

                                        <div class="col-sm-2 header hidden-xs"><label><a href="#">Name</a></label></div>

                                        <div class="col-sm-1 header hidden-xs"><label><a href="#">State</a></label></div>

                                        <div class="col-sm-1 header hidden-xs"><label><a href="#">Type</a></label></div>

                                        <div class="col-sm-3 header hidden-xs"><label><a href="#">Related Entities</a></label></div>

                                        <div class="col-sm-1 header hidden-xs"><label><a href="#">Actions</a></label></div>

                                        <div class="col-sm-1 header hidden-xs"><label><a href="#">Help Contents</a></label></div>

                                    </div>

                                    <ng-template [ngIf]="pagesCheckboxes && pagesCheckboxes.length>0">

                                        <div *ngFor="let check of pagesCheckboxes; let i=index" class="row user">

                                            <div class="col-sm-1 avatar"><input id="{{check.page._id}}" class="checkBox" type="checkbox"

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

                                            </div>

                                            <div class="col-sm-2">

                                                <div class="route" href="#">{{check.page.route}}</div>

                                            </div>

                                            <div class="col-sm-2">

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

                                            </div>

                                            <div class="col-sm-1">

                                                <div *ngIf="check.page.isEnabled" class="activated" >

                                                    <input (click)="togglePage(false,[check.page._id])" class="deactivate" src="imgs/check-icon.png" title="Disable" width="20" type="image" height="20">

                                                </div>

                                                <div *ngIf="!check.page.isEnabled" class="deactivated" >

                                                    <input (click)="togglePage(true,[check.page._id])" class="deactivate" src="imgs/x-icon.png" title="Enable" width="20" type="image" height="20">

                                                </div>

                                            </div>

                                            <div class="col-sm-1">

                                                <div class="type" href="#">{{check.page.type}}</div>

                                            </div>

                                            <div class="col-sm-3">

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

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

                                                </div>

                                            </div>

                                            <div class="col-sm-1">

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

                                                    <input title="Edit" src="imgs/icn_edit.png" class="edit" type="image" (click)="editPage(i)">

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

                                                </div>

                                            </div>

                                            <div class=col-sm-1>

                                              <a class="helpContents" [queryParams]="{community: selectedCommunityId, page: check.page._id}" routerLink="/pageContents">edit</a>

                                            </div>

                                        </div>

                                    </ng-template>

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

                                        <div class="alert alert-warning">No pages found</div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<modal-form #saveModal [saveText]="'Save'" [titleText]="'Add a new Page'" [formGroup]="formGroup" [type]="'page'"

            [isModalShown]="isModalShown" (emmitObject)="pageSavedSuccessfully($event)" (emmitError)="handleError($event)"

            [selectedCommunityId]="selectedCommunityId">

    <page-form [group]="formGroup" [selectedCommunityId]="selectedCommunityId" [type]="pagesType"></page-form>

</modal-form>

<modal-form #updateModal [saveText]="'Update'" [titleText]="'Update Page'" [formGroup]="formGroup" [type]="'page'"

            [isModalShown]="isModalShown" (emmitObject)="pageUpdatedSuccessfully($event)" (emmitError)="handleError($event)"

            [selectedCommunityId]="selectedCommunityId">

    <page-form [group]="formGroup" [selectedCommunityId]="selectedCommunityId" [type]="pagesType"></page-form>

</modal-form>

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

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

</delete-confirmation-dialog> -->

<div id="pages" class="uk-container">

        <div class="menubar ">

            <div class="page-title uk-article-title  ">Pages</div>

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

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

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

            </form>

            <a (click)="showModal()" class="uk-button uk-button-primary uk-float-right"><i></i> New Page </a>

        </div>

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

            <div>

                <div class="contentPanel">

                    <div class="uk-alert-danger" uk-alert style="display: none;" aria-hidden="true">

                        <span></span><span></span><span></span></div>

                    <div class="uk-alert-success" uk-alert style="display: none;" aria-hidden="true">

                        <span></span><span></span><span></span></div>

                    <div class="uk-alert" uk-alert style="display: none;" aria-hidden="true"><span></span><span></span><span></span></div>

                    <div 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-dropdown-nav">

                                    <li><a (click)="togglePages(true, getSelectedPages())"><i></i> Activate </a></li>

                                    <li><a (click)="togglePages(false, getSelectedPages())"><i></i> Deactivate </a></li>

                                    <li><a (click)="confirmDeleteSelectedPages()"><i></i> Delete </a></li>

                                </ul>

                              </div>

                            </div>

                        </div>

                    </div>

                    <div>

                        <div class="gwt-HTML">

                            <div class="row users-list">

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

                                  <div 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 value="">-- none selected --</option-->

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

                                          </select>

                                      </div>

                                  </div>

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

                                    <thead>

                                        <tr>

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

                                            <th>Name</th>

                                            <th>State</th>

                                            <th *ngIf="!pagesType">Type</th>

                                            <th>Related Entities</th>

                                            <th>Route</th>

                                            <th>Actions</th>

                                            <th>Page Help Contents</th>

                                            <th *ngIf="pageWithDivIds && pageWithDivIds.length > 0">Class Help Contents</th>

                                        </tr>

                                    </thead>

                                    <tbody >

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

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

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

                                            </td>

                                            <td>

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

                                            </td>

                                            <td>

                                              <div *ngIf="check.page.isEnabled" class="activated" >

                                                  <input (click)="togglePages(false,[check.page._id])" class="deactivate" src="imgs/check-icon.png" title="Disable" width="20" type="image" height="20">

                                              </div>

                                              <div *ngIf="!check.page.isEnabled" class="deactivated" >

                                                  <input (click)="togglePages(true,[check.page._id])" class="deactivate" src="imgs/x-icon.png" title="Enable" width="20" type="image" height="20">

                                              </div>

                                            </td>

                                            <td *ngIf="!pagesType">

                                                <div class="type" href="#">{{check.page.type}}</div>

                                            </td>

                                            <td>

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

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

                                                </div>

                                            </td>

                                            <td>

                                                <div class="route" href="#">{{check.page.route}}</div>

                                            </td>

                                            <td>

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

                                                    <input title="Edit" src="imgs/icn_edit.png" class="edit" type="image" (click)="editPage(i)">

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

                                                </div>

                                            </td>

                                            <td>

                                              <a class="helpContents" [queryParams]="{community: selectedCommunityPid, page: check.page._id}" routerLink="/pageContents">add page contents</a>

                                            </td>

                                            <td *ngIf="pageWithDivIds && pageWithDivIds.length > 0" class="uk-text-center">

                                              <a *ngIf="pageWithDivIds.includes(check.page._id)" class="classHelpContents" [queryParams]="{community: selectedCommunityPid, page: check.page._id}" routerLink="/classContents">add class contents</a>

                                              <span *ngIf="!pageWithDivIds.includes(check.page._id)">-</span>

                                            </td>

                                        </tr>

                                    </tbody>

                                </table>

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

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

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

</div>

<modal-form #saveModal [saveText]="'Save'" [titleText]="'Add a new Page'" [formGroup]="formGroup" [type]="'page'"

            [isModalShown]="isModalShown" (emmitObject)="pageSavedSuccessfully($event)" (emmitError)="handleError($event)">

    <page-form [group]="formGroup"></page-form>

</modal-form>

<modal-form #updateModal [saveText]="'Update'" [titleText]="'Update Page'" [formGroup]="formGroup" [type]="'page'"

            [isModalShown]="isModalShown" (emmitObject)="pageUpdatedSuccessfully($event)" (emmitError)="handleError($event)">

    <page-form [group]="formGroup"></page-form>

</modal-form>

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

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

</delete-confirmation-dialog>

/**

 * Created by stefania on 7/13/17.

 */

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

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

import {Entity} from '../../domain/entity';

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

@Component({

    selector: 'page-form',

    templateUrl: './page-form.component.html',

})

export class PageFormComponent implements OnInit{

    @Input('group')

    myForm: FormGroup;

    @Input('type')

    public type: string;

    public errorMessage: string;

    public allEntities: Map<Entity, boolean> = new Map<Entity, boolean>();

    private gotEntities: boolean = false;

    constructor(public _fb: FormBuilder, private _helpContentService: HelpContentService){}

    ngOnInit(): void {}

    public toggle() {

      this.myForm.value.isCollapsed = !this.myForm.value.isCollapsed;

      if(!this.myForm.value.isCollapsed) {

        let includedEntities: Set<String> = new Set<String>();

        for(let entityName of this.myForm.value.entities) {

          includedEntities.add(entityName._id);

        }

        let allEntities = this.allEntities;

        let self = this;

        allEntities.forEach(function (status, entity, map) {

          if(includedEntities.has(entity._id)) {

            self.allEntities.set(entity, true);

          } else {

            self.allEntities.set(entity, false);

          }

        });

        if(!this.gotEntities) {

          this.gotEntities = true;

          this.getEntities(includedEntities);

        }

      }

    }

    public getEntities(includedEntities: Set<String>) {

      let self = this;

      this._helpContentService.getEntities().subscribe(

        entities => {

            for(let entity of entities) {

              if(includedEntities.has(entity._id)) {

                self.allEntities.set(entity, true);

              } else {

                self.allEntities.set(entity, false);

              }

            }

      },

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

    }

    public getKeys( map) {

      return Array.from(map.keys());

    }

    public get form() {

        return this._fb.group({

            route : ['', Validators.required],

            name : ['', Validators.required],

            isEnabled: '',

            type: ['', Validators.required],

            entities: this._fb.array([]),

            _id : '',

            isCollapsed: [true]

        });

    }

    public reset() {

        this.myForm.patchValue({

            route : '',

            name : '',

            type: '',

            isEnabled: '',

            //entities: this._fb.array([]),

            _id : '',

            isCollapsed: [true]

        });

        this.setEntities([]);

    }

    public get entities(): FormArray {

      return this.myForm.get('entities') as FormArray;

    };

    setEntities(entities: Entity[]) {

      const entityFGs = entities.map(entity => this._fb.group(entity));

      const entityFormArray = this._fb.array(entityFGs);

      this.myForm.setControl('entities', entityFormArray);

    }

    addEntity() {

      this.myForm.value.entities.push(this._fb.group(new Entity()));

    }

    public toggleEntity(status : boolean, id : string, entity: Entity) {

      let index: number = -1;

      for(let i=0; i<this.myForm.get('entities').value.length; i++) {

        if(this.myForm.get('entities').value[i]._id == entity._id) {

          index = i;

          break;

        }

      }

      console.info("status: "+status + "   index: "+index);

      this.allEntities.set(entity, status);

      if(status && index<0) {

        this.myForm.value.entities.push(entity);

        console.info("push :   "+this.myForm.value.entities.length);

      } else  if(!status){

        if(index >= 0) {

          this.myForm.value.entities.splice(index, 1);

          console.info("delete :   "+this.myForm.value.entities.length);

        }

      }

/*

      this._helpContentService.toggleEntityOfPage(this.myForm.value._id,id,status).subscribe(

          () => {

          },

          error => this.handleError('System error changing the status of the enity of page', error)

      );

*/

    }

    handleError(message: string, error) {

        if(error == null) {

            this.reset();

        }

        this.errorMessage = message + ' (Server responded: ' + error + ')';

    }

}

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

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

@Component({

    selector: 'entity-form',

    templateUrl: './entity-form.component.html',

})

export class EntityFormComponent implements OnInit{

    @Input('group')

    myForm: FormGroup;

    constructor(private _fb: FormBuilder){}

    ngOnInit(): void {

    }

    public get form() {

        return this._fb.group({

            pid: ['', Validators.required],

            name : ['', Validators.required],

            isEnabled: '',

            _id : ''

        });

    }

    public reset() {

        this.myForm.patchValue({

            pid: '',

            name : '',

            isEnabled: '',

            _id : ''

        });

    }

}

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

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

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

import { ModalFormComponent } from "../modal-form.component";

import { DeleteConfirmationDialogComponent } from "../delete-confirmation-dialog.component";

import { EntityFormComponent } from "./entity-form.component";

import { CheckEntity, Entity } from "../../domain/entity";

import { Community } from "../../domain/community";

@Component({

    selector: 'entities',

    templateUrl: './entities.component.html',

})

export class EntitiesComponent implements OnInit {

    // @ViewChild(ModalFormComponent)

    @ViewChild('saveModal')

    public modal:ModalFormComponent;

    @ViewChild('updateModal')

    public updateModal:ModalFormComponent;

    @ViewChild('deleteConfirmationModal')

    public deleteConfirmationModal : DeleteConfirmationDialogComponent;

    @ViewChild(EntityFormComponent)

    public formComponent : EntityFormComponent;

    public checkboxes : CheckEntity[] = [];

    public entities : Entity[] = [];

    public errorMessage: string;

    public formGroup : FormGroup;

    private searchText : RegExp = new RegExp('');

    public communities: Community[] = [];

    public selectedCommunityPid: string;

    @ViewChild('okModal')

    public okModal:ModalFormComponent;

public toggleIds: string[];

public toggleStatus: boolean;

    ngOnInit() {

        this.getCommunities();

        this.formGroup = this.formComponent.form;

    }

    constructor(private _helpContentService: HelpContentService) {}

    getCommunities() {

        let self = this;

        this._helpContentService.getCommunities().subscribe(

            communities => {

                self.communities = communities;

                self.selectedCommunityPid = self.communities[0].pid;

                self.getEntities(self.selectedCommunityPid);

        },

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

    }

    getEntities(community_pid: string) {

        let self = this;

        this._helpContentService.getCommunityEntities(community_pid).subscribe(

            entities => {

                self.entities = entities;

                self.checkboxes = [];

                entities.forEach(_ => {

                    self.checkboxes.push(<CheckEntity>{entity : _, checked : false});

                });

        },

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

    }

    public showModal():void {

        this.modal.showModal();

    }

    public toggleCheckBoxes(event) {

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

    }

    public applyCheck(flag : boolean) {

      console.info("applyCheck "+flag);

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

    }

    public getSelectedEntities() : string[] {

        return this.checkboxes.filter(entity => entity.checked == true).map(checkedEntity => checkedEntity.entity).map(res => res._id);

    }

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

        for(let id of ids) {

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

            this.checkboxes.splice(i, 1);

        }

    }

    public confirmDeleteEntity(id : string) {

        this.deleteConfirmationModal.ids = [id];

        this.deleteConfirmationModal.showModal();

    }

    public confirmDeleteSelectedEntities() {

        this.deleteConfirmationModal.ids = this.getSelectedEntities();

        this.deleteConfirmationModal.showModal();

    }

    public confirmedDeleteEntities(ids : string[]) {

        this._helpContentService.deleteEntities(ids).subscribe(

            _ => this.deleteEntitiesFromArray(ids),

            error => this.handleError('System error deleting the selected entities', error)

        );

    }

    public editEntity(i : number) {

        let entity : Entity = this.checkboxes[i].entity;

        this.formGroup.patchValue(entity);

        this.updateModal.showModal();

    }

    public entitySavedSuccessfully(entity: Entity) {

        this.checkboxes.push(<CheckEntity>{entity : entity, checked : false});

        this.applyCheck(false);

    }

    public entityUpdatedSuccessfully(entity : Entity) {

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

        this.applyCheck(false);

    }

    public filterBySearch(text : string) {

        this.searchText = new RegExp(text,'i');

        this.applyFilter();

    }

    public applyFilter() {

        this.checkboxes = [];

        this.entities.filter(item => this.filterEntities(item)).forEach(

            _ => this.checkboxes.push(<CheckEntity>{entity: _, checked: false})

        );

    }

    public filterEntities(entity : Entity) : boolean {

        let textFlag = this.searchText.toString() == '' || (entity.name).match(this.searchText) != null;

        return textFlag;

    }

    handleError(message: string, error) {

        if(error == null) {

            this.formComponent.reset();

        }

        this.errorMessage = message + ' (Server responded: ' + error + ')';

    }

    public filterByCommunity(event: any) {

        this.selectedCommunityPid = event.target.value;

        this.applyCommunityFilter(this.selectedCommunityPid);

    }

    public applyCommunityFilter(community_pid: string) {

        this.getEntities(community_pid);

    }

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

        this.okModal.showModal();

        this.toggleIds = ids;

        this.toggleStatus = status;

    }

    public continueToggling(event: any) {

      this._helpContentService.toggleEntities(this.selectedCommunityPid,this.toggleIds,this.toggleStatus).subscribe(

          () => {

            for(let id of this.toggleIds) {

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

              this.checkboxes[i].entity.isEnabled=this.toggleStatus;

            }

            this.applyCheck(false);

          },

          error => this.handleError('System error changing the status of the selected entity(-ies)', error)

      );

    }

  }