From 95a84a12ed45ef55168d93394ec70698f6d659ca Mon Sep 17 00:00:00 2001
From: "konstantina.galouni"
 <konstantina.galouni@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Thu, 4 Jan 2018 15:56:22 +0000
Subject: [PATCH] Apply UIKIT in communities, pages, pageHelpContents pages

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-admin-portal/trunk@50244 d315682c-612b-4755-9ff5-7f18f6832af3
---
 app/app.module.ts                             |   8 +-
 .../community/communities.component.html      |  85 +++++-----
 app/pages/community/communities.component.ts  |  28 +--
 app/pages/faq/questions.component.html        |   1 -
 .../edit-page-help-content.component.html     |   2 +-
 app/pages/helpcontent/entities.component.html |  12 +-
 app/pages/helpcontent/entities.component.ts   |  30 ++--
 .../new-page-help-content.component.html      |   2 +-
 .../helpcontent/page-form.component.html      | 115 +++----------
 app/pages/helpcontent/page-form.component.ts  |   2 -
 .../page-help-content-form.component.html     |   4 +-
 .../page-help-contents.component.html         | 160 ++++++++++++++++--
 .../page-help-contents.component.ts           |  30 ++--
 app/pages/helpcontent/pages.component.html    | 142 +++++++++++++++-
 app/pages/helpcontent/pages.component.ts      |  38 ++---
 .../helpcontent/selectEntities.component.html |   8 +-
 app/pages/modal-form.component.html           |   2 +-
 17 files changed, 429 insertions(+), 240 deletions(-)

diff --git a/app/app.module.ts b/app/app.module.ts
index d90dec6..5b2ee35 100644
--- a/app/app.module.ts
+++ b/app/app.module.ts
@@ -11,8 +11,8 @@ import { TopicsComponent } from "./pages/faq/topics.components";
 import { QuestionsComponent } from "./pages/faq/questions.component";
 import { FAQService } from "./services/faq.service";
 import { ModalModule } from 'ngx-bootstrap';
-import { CollapseModule } from 'ngx-bootstrap';
-import { AccordionModule } from 'ngx-bootstrap';
+//import { CollapseModule } from 'ngx-bootstrap';
+//import { AccordionModule } from 'ngx-bootstrap';
 import { TopicsFormComponent } from "./pages/faq/topics-form.component";
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ModalFormComponent } from "./pages/modal-form.component";
@@ -40,8 +40,8 @@ import { EntityFormComponent } from "./pages/helpcontent/entity-form.component";
         HttpModule,
         JsonpModule,
         ModalModule.forRoot(),
-        CollapseModule.forRoot(),
-        AccordionModule.forRoot(),
+        //CollapseModule.forRoot(),
+        //AccordionModule.forRoot(),
         FormsModule,
         ReactiveFormsModule,
         JWBootstrapSwitchModule,
diff --git a/app/pages/community/communities.component.html b/app/pages/community/communities.component.html
index e3214ac..19ef05f 100644
--- a/app/pages/community/communities.component.html
+++ b/app/pages/community/communities.component.html
@@ -1,37 +1,33 @@
-Communities<div id="communities">
-    <div id="content">
-        <div class="menubar fixed">
-            <div class="sidebar-toggler visible-xs">
-                <i class="ion-navicon"></i>
-            </div>
+<div id="communities" class="uk-container">
 
-            <div class="community-title">Communities</div>
+        <div class="menubar ">
+
+            <div class="community-title uk-article-title">Communities</div>
             <form target="BSFormPanel_Admin_1" class="search">
-                <input #inputstring (keyup.enter)="filterBySearch(inputstring.value)" placeholder="Search communities (name)..." type="text"/>
-                <input class="btn" type="submit">
+                <input #inputstring (keyup.enter)="filterBySearch(inputstring.value)" placeholder="Community name..." type="text" class="uk-input uk-width-medium"/>
+                <button class="uk-button uk-button-default" type="submit">Search</button>
             </form>
-            <a (click)="showModal()" class="btn btn-success pull-right"><i></i> New Community </a>
+            <a (click)="showModal()" class="uk-button uk-button-primary uk-float-right"><i></i> New Community </a>
         </div>
 
         <div class="content-wrapper" id="contentWrapper">
             <div>
                 <div class="contentPanel">
-                    <div class="alert alert-danger" style="display: none;" aria-hidden="true">
+                    <div class="uk-alert-danger" uk-alert style="display: none;" aria-hidden="true">
                         <span></span><span></span><span></span></div>
-                    <div class="alert alert-success" style="display: none;" aria-hidden="true">
+                    <div class="uk-alert-success" uk-alert 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="uk-alert" uk-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)="confirmDeleteSelectedCommunities()"><i></i> Delete </a></li>
-                                    </ul>
-                                </div>
+                    <div class="page-controls">
+                        <div class="  filters ">
+                            <div class="show-options uk-float-right">
+                              <button class="uk-button uk-button-default" type="button"> Bulk Actions</button>
+                              <div uk-dropdown="mode: click">
+                                <ul class="uk-nav uk-dropdown-nav">
+                                    <li><a (click)="confirmDeleteSelectedCommunities()"><i></i> Delete </a></li>
+                                </ul>
+                              </div>
                             </div>
                         </div>
                     </div>
@@ -40,32 +36,34 @@ Communities<div id="communities">
                         <div class="gwt-HTML">
                             <div class="row users-list">
                                 <div class="col-md-12">
-
-                                    <div class="row headers">
-                                        <div class="col-sm-1 header select-users"><input id="allCommunityCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)">
-                                        </div>
-                                        <div class="col-sm-10 header hidden-xs"><label><a href="#">Name</a></label></div>
-                                        <div class="col-sm-1 header hidden-xs"><label><a href="#">Actions</a></label></div>
-                                    </div>
-
-                                    <template [ngIf]="communitiesCheckboxes && communitiesCheckboxes.length>0">
-                                        <div *ngFor="let check of communitiesCheckboxes; let i=index" class="row user">
-                                            <div class="col-sm-1 avatar"><input id="{{check.community._id}}" class="checkBox" type="checkbox"
+                                  <table class="uk-table uk-table-striped">
+                                    <thead>
+                                        <tr>
+                                            <th><input id="allCommunityCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th>
+                                            <th>Name</th>
+                                            <th>Actions</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody >
+                                        <tr *ngFor="let check of checkboxes; let i=index">
+                                            <td><input id="{{check.community._id}}" class="checkBox" type="checkbox"
                                                                                 name="communitiescb[]" value="{{check.community._id}}" [(ngModel)]="check.checked">
-                                            </div>
-                                            <div class="col-sm-10">
+                                            </td>
+                                            <td>
                                                 <div class="name" href="#">{{check.community.name}}</div>
-                                            </div>
-                                            <div class="col-sm-1">
+                                            </td>
+                                            <td>
                                                 <div class="actions" href="#">
                                                     <input title="Edit" src="imgs/icn_edit.png" class="edit" type="image" (click)="editCommunity(i)">
                                                     <input title="Delete" src="imgs/icn_trash.png" class="delete" type="image" (click)="confirmDeleteCommunity(check.community._id)">
                                                 </div>
-                                            </div>
-                                        </div>
-                                    </template>
-                                    <div *ngIf="communitiesCheckboxes.length==0" class="col-md-12">
-                                        <div class="alert alert-warning">No communities found</div>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+
+                                    <div *ngIf="checkboxes.length==0" class="col-md-12">
+                                        <div class="uk-alert-warning" uk-alert>No communities found</div>
                                     </div>
                                 </div>
                             </div>
@@ -74,7 +72,6 @@ Communities<div id="communities">
                 </div>
             </div>
         </div>
-    </div>
 </div>
 <modal-form #saveModal [saveText]="'Save'" [titleText]="'Add a new Community'" [formGroup]="formGroup" [type]="'community'"
             [isModalShown]="isModalShown" (emmitObject)="communitySavedSuccessfully($event)" (emmitError)="handleError($event)"
diff --git a/app/pages/community/communities.component.ts b/app/pages/community/communities.component.ts
index d8057ca..d6269a7 100644
--- a/app/pages/community/communities.component.ts
+++ b/app/pages/community/communities.component.ts
@@ -30,7 +30,7 @@ export class CommunitiesComponent implements OnInit {
     @ViewChild(CommunityFormComponent)
     public formComponent : CommunityFormComponent;
 
-    public communitiesCheckboxes : CheckCommunity[] = [];
+    public checkboxes : CheckCommunity[] = [];
 
     public communities : Community[] = [];
 
@@ -58,7 +58,7 @@ export class CommunitiesComponent implements OnInit {
         this._helpContentService.getCommunityFull(community_id).subscribe(
             community => {
                 self.communities = [community];
-                this.communitiesCheckboxes.push(<CheckCommunity>{community : community, checked : false});
+                this.checkboxes.push(<CheckCommunity>{community : community, checked : false});
         },
         error => this.handleError('System error retrieving communities', error));
     }
@@ -70,7 +70,7 @@ export class CommunitiesComponent implements OnInit {
                 self.communities = communities;
 
                 communities.forEach(_ => {
-                    this.communitiesCheckboxes.push(<CheckCommunity>{community : _, checked : false});
+                    this.checkboxes.push(<CheckCommunity>{community : _, checked : false});
                 });
         },
         error => this.handleError('System error retrieving communities', error));
@@ -81,22 +81,22 @@ export class CommunitiesComponent implements OnInit {
     }
 
     public toggleCheckBoxes(event) {
-        this.communitiesCheckboxes.forEach(_ => _.checked = event.target.checked);
+        this.checkboxes.forEach(_ => _.checked = event.target.checked);
     }
 
     public applyCheck(flag : boolean) {
       console.info("applyCheck "+flag);
-        this.communitiesCheckboxes.forEach(_ => _.checked = flag);
+        this.checkboxes.forEach(_ => _.checked = flag);
     }
 
     public getSelectedCommunities() : string[] {
-        return this.communitiesCheckboxes.filter(community => community.checked == true).map(checkedCommunity => checkedCommunity.community).map(res => res._id);
+        return this.checkboxes.filter(community => community.checked == true).map(checkedCommunity => checkedCommunity.community).map(res => res._id);
     }
 
     private deleteCommunitiesFromArray(ids : string[]) : void {
         for(let id of ids) {
-            let i = this.communitiesCheckboxes.findIndex(_ => _.community._id == id);
-            this.communitiesCheckboxes.splice(i, 1);
+            let i = this.checkboxes.findIndex(_ => _.community._id == id);
+            this.checkboxes.splice(i, 1);
         }
     }
 
@@ -118,19 +118,19 @@ export class CommunitiesComponent implements OnInit {
     }
 
     public editCommunity(i : number) {
-        let community : Community = this.communitiesCheckboxes[i].community;
+        let community : Community = this.checkboxes[i].community;
         this.formGroup.patchValue(community);
         this.updateModal.showModal();
     }
 
     public communitySavedSuccessfully(community: Community) {
-        this.communitiesCheckboxes.push(<CheckCommunity>{community : community, checked : false});
-        console.info("checkboxes length: "+this.communitiesCheckboxes.length);
+        this.checkboxes.push(<CheckCommunity>{community : community, checked : false});
+        console.info("checkboxes length: "+this.checkboxes.length);
         this.applyCheck(false);
     }
 
     public communityUpdatedSuccessfully(community : Community) {
-        this.communitiesCheckboxes.find(checkItem => checkItem.community._id==community._id).community = community;
+        this.checkboxes.find(checkItem => checkItem.community._id==community._id).community = community;
         this.applyCheck(false);
     }
 
@@ -140,9 +140,9 @@ export class CommunitiesComponent implements OnInit {
     }
 
     public applyFilter() {
-        this.communitiesCheckboxes = [];
+        this.checkboxes = [];
         this.communities.filter(item => this.filterCommunities(item)).forEach(
-            _ => this.communitiesCheckboxes.push(<CheckCommunity>{community: _, checked: false})
+            _ => this.checkboxes.push(<CheckCommunity>{community: _, checked: false})
         );
     }
 
diff --git a/app/pages/faq/questions.component.html b/app/pages/faq/questions.component.html
index a214066..5096752 100644
--- a/app/pages/faq/questions.component.html
+++ b/app/pages/faq/questions.component.html
@@ -151,4 +151,3 @@
 <delete-confirmation-dialog #deleteConfirmationModal [isModalShown]="isModalShown" (emmitObject)="confirmedDeleteQuestions($event)">
     Are you sure you want to delete the selected question(s)?
 </delete-confirmation-dialog>
-
diff --git a/app/pages/helpcontent/edit-page-help-content.component.html b/app/pages/helpcontent/edit-page-help-content.component.html
index 9cd9eb5..e5e8a0c 100644
--- a/app/pages/helpcontent/edit-page-help-content.component.html
+++ b/app/pages/helpcontent/edit-page-help-content.component.html
@@ -11,7 +11,7 @@
         <div class="content-wrapper">
 
             <div>
-                <div *ngIf="errorMessage" class="alert alert-danger">{{errorMessage}}</div>
+                <div *ngIf="errorMessage" class="uk-alert-danger" uk-alert>{{errorMessage}}</div>
                 <page-content-form [communityId]="communityId" [group]="formGroup"></page-content-form>
                 <a (click)="saveCustom()" class="btn btn-success"><i></i>Update page content</a>
             </div>
diff --git a/app/pages/helpcontent/entities.component.html b/app/pages/helpcontent/entities.component.html
index 97d01cb..a1d8b53 100644
--- a/app/pages/helpcontent/entities.component.html
+++ b/app/pages/helpcontent/entities.component.html
@@ -13,11 +13,11 @@
         <div class="content-wrapper" id="contentWrapper">
             <div>
                 <div class="contentPanel">
-                    <div class="alert alert-danger" style="display: none;" aria-hidden="true">
+                    <div class="uk-alert-danger" uk-alert style="display: none;" aria-hidden="true">
                         <span></span><span></span><span></span></div>
-                    <div class="alert alert-success" style="display: none;" aria-hidden="true">
+                    <div class="uk-alert-success" uk-alert 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="uk-alert" uk-alert style="display: none;" aria-hidden="true"><span></span><span></span><span></span></div>
 
                     <div class="page-controls">
                         <div class="  filters ">
@@ -63,7 +63,7 @@
                                         </tr>
                                     </thead>
                                     <tbody >
-                                        <tr *ngFor="let check of entitiesCheckboxes; let i=index">
+                                        <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>
@@ -88,8 +88,8 @@
                                     </tbody>
                                 </table>
 
-                                    <div *ngIf="entitiesCheckboxes.length==0" class="col-md-12">
-                                        <div class="alert alert-warning">No entities found</div>
+                                    <div *ngIf="checkboxes.length==0" class="col-md-12">
+                                        <div class="uk-alert-warning" uk-alert>No entities found</div>
                                     </div>
                                 </div>
                             </div>
diff --git a/app/pages/helpcontent/entities.component.ts b/app/pages/helpcontent/entities.component.ts
index ece2fd3..5f1a189 100644
--- a/app/pages/helpcontent/entities.component.ts
+++ b/app/pages/helpcontent/entities.component.ts
@@ -27,7 +27,7 @@ export class EntitiesComponent implements OnInit {
     @ViewChild(EntityFormComponent)
     public formComponent : EntityFormComponent;
 
-    public entitiesCheckboxes : CheckEntity[] = [];
+    public checkboxes : CheckEntity[] = [];
 
     public entities : Entity[] = [];
 
@@ -65,10 +65,10 @@ export class EntitiesComponent implements OnInit {
         this._helpContentService.getCommunityEntities(community_id).subscribe(
             entities => {
                 self.entities = entities;
-                self.entitiesCheckboxes = [];
+                self.checkboxes = [];
 
                 entities.forEach(_ => {
-                    self.entitiesCheckboxes.push(<CheckEntity>{entity : _, checked : false});
+                    self.checkboxes.push(<CheckEntity>{entity : _, checked : false});
                 });
         },
         error => this.handleError('System error retrieving entities', error));
@@ -79,22 +79,22 @@ export class EntitiesComponent implements OnInit {
     }
 
     public toggleCheckBoxes(event) {
-        this.entitiesCheckboxes.forEach(_ => _.checked = event.target.checked);
+        this.checkboxes.forEach(_ => _.checked = event.target.checked);
     }
 
     public applyCheck(flag : boolean) {
       console.info("applyCheck "+flag);
-        this.entitiesCheckboxes.forEach(_ => _.checked = flag);
+        this.checkboxes.forEach(_ => _.checked = flag);
     }
 
     public getSelectedEntities() : string[] {
-        return this.entitiesCheckboxes.filter(entity => entity.checked == true).map(checkedEntity => checkedEntity.entity).map(res => res._id);
+        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.entitiesCheckboxes.findIndex(_ => _.entity._id == id);
-            this.entitiesCheckboxes.splice(i, 1);
+            let i = this.checkboxes.findIndex(_ => _.entity._id == id);
+            this.checkboxes.splice(i, 1);
         }
     }
 
@@ -116,18 +116,18 @@ export class EntitiesComponent implements OnInit {
     }
 
     public editEntity(i : number) {
-        let entity : Entity = this.entitiesCheckboxes[i].entity;
+        let entity : Entity = this.checkboxes[i].entity;
         this.formGroup.patchValue(entity);
         this.updateModal.showModal();
     }
 
     public entitySavedSuccessfully(entity: Entity) {
-        this.entitiesCheckboxes.push(<CheckEntity>{entity : entity, checked : false});
+        this.checkboxes.push(<CheckEntity>{entity : entity, checked : false});
         this.applyCheck(false);
     }
 
     public entityUpdatedSuccessfully(entity : Entity) {
-        this.entitiesCheckboxes.find(checkItem => checkItem.entity._id==entity._id).entity = entity;
+        this.checkboxes.find(checkItem => checkItem.entity._id==entity._id).entity = entity;
         this.applyCheck(false);
     }
 
@@ -137,9 +137,9 @@ export class EntitiesComponent implements OnInit {
     }
 
     public applyFilter() {
-        this.entitiesCheckboxes = [];
+        this.checkboxes = [];
         this.entities.filter(item => this.filterEntities(item)).forEach(
-            _ => this.entitiesCheckboxes.push(<CheckEntity>{entity: _, checked: false})
+            _ => this.checkboxes.push(<CheckEntity>{entity: _, checked: false})
         );
     }
 
@@ -169,8 +169,8 @@ export class EntitiesComponent implements OnInit {
     public toggleEntity(status : boolean, id : string) {
         this._helpContentService.toggleEntity(this.selectedCommunityId,id,status).subscribe(
             () => {
-                let i = this.entitiesCheckboxes.findIndex(_ => _.entity._id == id);
-                this.entitiesCheckboxes[i].entity.isEnabled=status;
+                let i = this.checkboxes.findIndex(_ => _.entity._id == id);
+                this.checkboxes[i].entity.isEnabled=status;
                 this.applyCheck(false);
             },
             error => this.handleError('System error changing the status of the selected entity(-ies)', error)
diff --git a/app/pages/helpcontent/new-page-help-content.component.html b/app/pages/helpcontent/new-page-help-content.component.html
index d1487eb..c32b667 100644
--- a/app/pages/helpcontent/new-page-help-content.component.html
+++ b/app/pages/helpcontent/new-page-help-content.component.html
@@ -11,7 +11,7 @@
         <div class="content-wrapper">
 
             <div>
-                <div *ngIf="errorMessage" class="alert alert-danger">{{errorMessage}}</div>
+                <div *ngIf="errorMessage" class="uk-alert-danger" uk-alert>{{errorMessage}}</div>
                 <page-content-form [communityId]="communityId" [group]="formGroup"></page-content-form>
                 <a (click)="saveCustom()" class="btn btn-success"><i></i>Save page content</a>
             </div>
diff --git a/app/pages/helpcontent/page-form.component.html b/app/pages/helpcontent/page-form.component.html
index 6435757..35a37d4 100644
--- a/app/pages/helpcontent/page-form.component.html
+++ b/app/pages/helpcontent/page-form.component.html
@@ -16,105 +16,28 @@
         </select>
     </div>
 
-    <!--div class="form-group" [ngClass]="{'has-error':!myForm.controls.name.valid && myForm.controls.entities.dirty}"-->
+    <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>
 
-        <!--label for="pageEntitiesTag">Entities</label>
-        <span type="text" class="form-array" formArrayName="entities" id="pageEntitiesTag" placeholder="Entities">
-          <input *ngFor="let entity of myForm.value.entities" type="text" class="form-control">
-        </span-->
+          <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>
 
-        <!--select>
-            <option [value]="">--add entities--</option>
-            <option *ngFor="let entity of myForm.value.entities" [value]="entity._id">{{entity.name}}</option>
-        </select-->
-
-
-            <!--button type="button" (click)="isCollapsed = !isCollapsed">Toggle collapse</button>
-            <div [collapse]="isCollapsed" class="card card-block card-header">
-              <div class="well well-lg">
-                <div *ngFor="let entity of myForm.value.entities" class="row user form-control" formControlName="entities" id="pageEntitiesTag" >
-
-                  <button value="{{entity._id}}" type="button">ADD</button>{{entity.name}}
-                </div>
-              </div>
-            </div-->
-
-
-            <!--span class="col-sm-1 avatar">
-              <input id="{{entity._id}}" class="checkBox" type="checkbox" name="" value="{{entity._id}}">
-            </span-->
-
-            <!--div formArrayName="entities">
-                  <div *ngFor="let entity of entities.controls; let i=index" [formGroupName]="i" >
-                      <div class="form-group">
-                        <label class="center-block">Name:</label>
-                          <input class="form-control" formControlName="name"
-                        <span><button class="col-sm-2" value="{{entity.value._id}}" type="button">ADD</button><label class="form-control col-sm-10">{{entity.value.name}}</label></span>
-                      </div>
-                    <br>
-                  </div>
-                  <button (click)="addEntity()" type="button">Add an Entity</button>
-                </div-->
-
-                <!-- <div formArrayName="entities">
-                  <div *ngFor="let entity of entities.controls; let i=index" [formGroupName]="i" >
-                    <div class="form-group">
-                      <label class="center-block">Name:</label>
-                      <span><button class="col-sm-2" value="{{entity.value._id}}" type="button">ADD</button><label class="form-control col-sm-10">{{entity.value.name}}</label></span>
-                    </div>
-                  </div>
-                </div> -->
-
-                <div formArrayName="entities" class="form-group">
-                    <label for="entityNameTag">Entity Name</label>
-                    <div id="entityNameTag">
-                      <!-- <label class="form-control">
-                        <span *ngFor="let entity of entities.controls; let i=index">{{entity.value.name}}<span *ngIf="i<(entities.controls.length-1)">, </span></span>
-                      </label> -->
-                      <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>
-                      <div [collapse]="myForm.value.isCollapsed" *ngFor="let entity of getKeys(allEntities)">
-                        <span><!--button type="button">ADD</button-->
-                          <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>
-                    </div>
-                </div>
-                <!-- <p>myForm value: {{ myForm.value | json}}</p> -->
-
-    <!--/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>
--->
-
-<!-- <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>-->
diff --git a/app/pages/helpcontent/page-form.component.ts b/app/pages/helpcontent/page-form.component.ts
index a50cfc5..b43b75c 100644
--- a/app/pages/helpcontent/page-form.component.ts
+++ b/app/pages/helpcontent/page-form.component.ts
@@ -3,8 +3,6 @@
  */
 import {Component, OnInit, Input} from '@angular/core';
 import {FormGroup, FormArray, FormBuilder, Validators} from "@angular/forms";
-import { CollapseDirective } from 'ngx-bootstrap/collapse';
-//import { AccordionDirective } from 'ngx-bootstrap/accordion';
 import {Entity} from '../../domain/entity';
 import { HelpContentService } from "../../services/help-content.service";
 
diff --git a/app/pages/helpcontent/page-help-content-form.component.html b/app/pages/helpcontent/page-help-content-form.component.html
index 688cb3f..cd1cb88 100644
--- a/app/pages/helpcontent/page-help-content-form.component.html
+++ b/app/pages/helpcontent/page-help-content-form.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="errorMessage" class="alert alert-danger">{{errorMessage}}</div>
+<div *ngIf="errorMessage" class="uk-alert-danger" uk-alert>{{errorMessage}}</div>
 <form [formGroup]="myForm">
     <div class="form-group" [ngClass]="{'has-error':!myForm.controls.page.valid && myForm.controls.page.dirty}">
         <label for="pageTag">Select Page</label>
@@ -51,4 +51,4 @@
 <!--<pre>-->
 <!--{{myForm.value | json}}-->
     <!--{{myForm.valid}}-->
-<!--</pre>-->
\ No newline at end of file
+<!--</pre>-->
diff --git a/app/pages/helpcontent/page-help-contents.component.html b/app/pages/helpcontent/page-help-contents.component.html
index a870137..ad87465 100644
--- a/app/pages/helpcontent/page-help-contents.component.html
+++ b/app/pages/helpcontent/page-help-contents.component.html
@@ -1,4 +1,4 @@
-<div id="pageContents">
+<!-- <div id="pageContents">
     <div id="content">
         <div class="menubar fixed">
             <div class="sidebar-toggler visible-xs">
@@ -7,11 +7,9 @@
 
             <div class="page-title">Page Help Contents</div>
             <form class="search">
-                <!--<input class="gwt-TextBox" placeholder="Search questions (question, answer)..." type="text">-->
                 <input #inputstring (keyup.enter)="filterBySearch(inputstring.value)" placeholder="Search page content (content)..." type="text"/>
                 <input class="btn" type="submit">
             </form>
-            <!--[queryParams]="{organizationId: organization.id}" routerLinkActive="router-link-active" routerLink="/search/organization"-->
             <a *ngIf="!selectedPageId" [queryParams]="{communityId: selectedCommunityId}" routerLink="/pageContents/new" class="btn btn-success pull-right"><i></i> New Page Content </a>
             <a *ngIf="selectedPageId" [queryParams]="{communityId: selectedCommunityId, pageId: selectedPageId}" routerLink="/pageContents/new" class="btn btn-success pull-right"><i></i> New Page Content </a>
         </div>
@@ -25,16 +23,10 @@
                         <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="filters marginBottom20">
-                          <div class="links form-group form-inline">
-
-                          </div>
-                      </div> -->
                         <div *ngIf="!selectedPageId" class="col-md-12 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 value=""> none selected </option-->
                                   <option *ngFor="let community of communities" value="{{community._id}}">{{community.name}}</option>
                               </select>
                             </div>
@@ -90,8 +82,8 @@
                                         <div class="col-sm-1 header hidden-xs"><label><a href="#">Actions</a></label></div>
                                     </div>
 
-                                    <template [ngIf]="pageHelpContentsCheckboxes && pageHelpContentsCheckboxes.length>0">
-                                        <div *ngFor="let check of pageHelpContentsCheckboxes; let i=index" class="row user">
+                                    <template [ngIf]="checkboxes && checkboxes.length>0">
+                                        <div *ngFor="let check of checkboxes; let i=index" class="row user">
                                             <div class="col-sm-1 avatar"><input id="{{check.pageHelpContent._id}}" class="checkBox" type="checkbox"
                                                                                 name="pageHelpContentscb[]" value="{{check.pageHelpContent._id}}" [(ngModel)]="check.checked">
                                             </div>
@@ -128,7 +120,7 @@
                                             </div>
                                         </div>
                                     </template>
-                                    <div *ngIf="pageHelpContentsCheckboxes.length==0" class="col-md-12">
+                                    <div *ngIf="checkboxes.length==0" class="col-md-12">
                                         <div class="alert alert-warning">No page contents found</div>
                                     </div>
                                 </div>
@@ -142,6 +134,150 @@
     </div>
 </div>
 
+<delete-confirmation-dialog #deleteConfirmationModal [isModalShown]="isModalShown" (emmitObject)="confirmedDeletePageHelpContents($event)">
+    Are you sure you want to delete the selected page content(s)?
+</delete-confirmation-dialog> -->
+
+
+<div id="pageHelpContents" class="uk-container">
+
+        <div class="menubar ">
+
+            <div class="pageHelpContent-title uk-article-title">Page Help Contents</div>
+
+            <form target="BSFormPanel_Admin_1" class="search">
+                <input #inputstring (keyup.enter)="filterBySearch(inputstring.value)" placeholder="Page Help Content..." type="text" class="uk-input uk-width-medium"/>
+                <button class="uk-button uk-button-default" type="submit">Search</button>
+            </form>
+            <a *ngIf="!selectedPageId" [queryParams]="{communityId: selectedCommunityId}" routerLink="/pageContents/new" class="uk-button uk-button-primary uk-float-right"><i></i> New Page Content </a>
+            <a *ngIf="selectedPageId" [queryParams]="{communityId: selectedCommunityId, pageId: selectedPageId}" routerLink="/pageContents/new" class="uk-button uk-button-primary uk-float-right"><i></i> New Page Content </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 uk-button-default" type="button"> Bulk Actions</button>
+                              <div uk-dropdown="mode: click">
+                                <ul class="uk-nav uk-dropdown-nav">
+                                    <li><a (click)="togglePageHelpContents(true,getSelectedPageHelpContents())"><i></i> Activate </a></li>
+                                    <li><a (click)="togglePageHelpContents(false,getSelectedPageHelpContents())"><i></i> Deactivate </a></li>
+                                    <li><a (click)="confirmDeleteSelectedPageHelpContents()"><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 *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._id}}">{{community.name}}</option>
+                                          </select>
+                                      </div>
+                                  </div>
+                                  <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>
+
+                                  <span class="gwt-Label filterLabel">Filter page contents:</span>
+                                  <ul uk-tab class="links">
+                                      <li [ngClass]="{'uk-active' : filters.active==null}" (click)="displayAllPageHelpContents()">
+                                          <a>All Page Contents <span class="uk-badge">{{counter.all}}</span></a>
+                                      </li>
+                                      <li [ngClass]="{'uk-active' : filters.active==true}" (click)="displayActivePageHelpContents()">
+                                          <a>Active <span class="uk-badge">{{counter.active}}</span></a>
+                                      </li>
+                                      <li [ngClass]="{'uk-active' : filters.active==false}" (click)="displayInactivePageHelpContents()">
+                                          <a>Inactive <span class="uk-badge">{{counter.inactive}}</span></a>
+                                      </li>
+                                  </ul>
+
+                                  <table class="uk-table uk-table-striped">
+                                    <thead>
+                                        <tr>
+                                            <th><input id="allPageHelpContentsCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th>
+                                            <th>Page</th>
+                                            <th>Community</th>
+                                            <th>Content</th>
+                                            <th>Placement</th>
+                                            <th>Order</th>
+                                            <th>Active</th>
+                                            <th>Actions</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody >
+                                        <tr *ngFor="let check of checkboxes; let i=index">
+                                            <td><input id="{{check.pageHelpContent._id}}" class="checkBox" type="checkbox"
+                                                                                name="entitiescb[]" value="{{check.pageHelpContent._id}}" [(ngModel)]="check.checked">
+                                            </td>
+                                            <td>
+                                                <div class="page" href="#">{{check.pageHelpContent.page.name}}</div>
+                                            </td>
+                                            <td>
+                                                <div class="community" href="#">{{check.pageHelpContent.community.name}}</div>
+                                            </td>
+                                            <td>
+                                                <div class="content" href="#">{{check.pageHelpContent.content}}</div>
+                                            </td>
+                                            <td>
+                                                <div class="placement" href="#">{{check.pageHelpContent.placement}}</div>
+                                            </td>
+                                            <td>
+                                                <div class="order" href="#">{{check.pageHelpContent.order}}
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div *ngIf="check.pageHelpContent.isActive" class="activated" >
+                                                    <input (click)="togglePageHelpContents(false,[check.pageHelpContent._id])" class="deactivate" src="imgs/check-icon.png" title="Deactivate" width="20" type="image" height="20">
+                                                </div>
+                                                <div *ngIf="!check.pageHelpContent.isActive" class="deactivated" >
+                                                    <input (click)="togglePageHelpContents(true,[check.pageHelpContent._id])" class="activate" src="imgs/x-icon.png" title="Activate" 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)="editPageHelpContent(check.pageHelpContent._id)">
+                                                    <input title="Delete" src="imgs/icn_trash.png" class="delete" type="image" (click)="confirmDeletePageHelpContent(check.pageHelpContent._id)">
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+
+                                    <div *ngIf="checkboxes.length==0" class="col-md-12">
+                                        <div class="uk-alert-warning" uk-alert>No page contents found</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <a *ngIf="selectedPageId" [queryParams]="{type: pageType}" routerLink="/pages">Go back to {{pageType}} pages</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+</div>
+
 <delete-confirmation-dialog #deleteConfirmationModal [isModalShown]="isModalShown" (emmitObject)="confirmedDeletePageHelpContents($event)">
     Are you sure you want to delete the selected page content(s)?
 </delete-confirmation-dialog>
diff --git a/app/pages/helpcontent/page-help-contents.component.ts b/app/pages/helpcontent/page-help-contents.component.ts
index 13d44df..bfad1b6 100644
--- a/app/pages/helpcontent/page-help-contents.component.ts
+++ b/app/pages/helpcontent/page-help-contents.component.ts
@@ -31,7 +31,7 @@ export class PageHelpContentsComponent implements OnInit {
     @ViewChild('deleteConfirmationModal')
     public deleteConfirmationModal : DeleteConfirmationDialogComponent;
 
-    public pageHelpContentsCheckboxes : CheckPageHelpContent[] = [];
+    public checkboxes : CheckPageHelpContent[] = [];
 
     public pageHelpContents : PageHelpContent[] = [];
 
@@ -120,17 +120,17 @@ export class PageHelpContentsComponent implements OnInit {
             pageHelpContents => {
                 self.pageHelpContents = pageHelpContents as Array<PageHelpContent>;
                 self.counter.all = self.pageHelpContents.length;
-                self.pageHelpContentsCheckboxes = [];
+                self.checkboxes = [];
                 /*self.pageHelpContents.forEach(_ => {
                   let page: Page = _.page as Page;
                   if(!self.selectedPageId || (page._id == self.selectedPageId)) {
-                    self.pageHelpContentsCheckboxes.push(<CheckPageHelpContent>{pageHelpContent : _, checked : false});
+                    self.checkboxes.push(<CheckPageHelpContent>{pageHelpContent : _, checked : false});
                   }
                 });*/
                 for (let i = self.pageHelpContents.length - 1; i >= 0; i -= 1) {
                   let page: Page =  self.pageHelpContents[i].page as Page;
                   if(!self.selectedPageId || (page._id == self.selectedPageId)) {
-                    self.pageHelpContentsCheckboxes.push(<CheckPageHelpContent>{pageHelpContent : self.pageHelpContents[i], checked : false});
+                    self.checkboxes.push(<CheckPageHelpContent>{pageHelpContent : self.pageHelpContents[i], checked : false});
                   } else {
                     self.pageHelpContents.splice(i, 1);
                   }
@@ -146,17 +146,17 @@ export class PageHelpContentsComponent implements OnInit {
     // }
 
     public toggleCheckBoxes(event) {
-        this.pageHelpContentsCheckboxes.forEach(_ => _.checked = event.target.checked);
+        this.checkboxes.forEach(_ => _.checked = event.target.checked);
         this.checkboxAll = event.target.checked;
     }
 
     public applyCheck(flag : boolean) {
-        this.pageHelpContentsCheckboxes.forEach(_ => _.checked = flag);
+        this.checkboxes.forEach(_ => _.checked = flag);
         this.checkboxAll = false;
     }
 
     public getSelectedPageHelpContents() : string[] {
-        return this.pageHelpContentsCheckboxes.filter(pageHelpContent => pageHelpContent.checked == true)
+        return this.checkboxes.filter(pageHelpContent => pageHelpContent.checked == true)
             .map(checkedPageHelpContent => checkedPageHelpContent.pageHelpContent).map(res => res._id);
     }
 
@@ -179,9 +179,9 @@ export class PageHelpContentsComponent implements OnInit {
 
     private deletePageHelpContentsFromArray(ids : string[]) : void {
         for(let id of ids) {
-            let iqc = this.pageHelpContentsCheckboxes.findIndex(_ => _.pageHelpContent._id == id);
+            let iqc = this.checkboxes.findIndex(_ => _.pageHelpContent._id == id);
             let iq = this.pageHelpContents.findIndex(_ => _._id == id);
-            this.pageHelpContentsCheckboxes.splice(iqc, 1);
+            this.checkboxes.splice(iqc, 1);
             this.pageHelpContents.splice(iqc, 1);
         }
     }
@@ -199,9 +199,9 @@ export class PageHelpContentsComponent implements OnInit {
         this._helpService.togglePageHelpContents(ids,status).subscribe(
             () => {
                 for(let id of ids) {
-                    let i = this.pageHelpContentsCheckboxes.findIndex(_ => _.pageHelpContent._id == id);
+                    let i = this.checkboxes.findIndex(_ => _.pageHelpContent._id == id);
                     console.info(i);
-                    this.pageHelpContentsCheckboxes[i].pageHelpContent.isActive=status;
+                    this.checkboxes[i].pageHelpContent.isActive=status;
                 }
                 this.countPageHelpContents();
                 this.applyCheck(false);
@@ -219,14 +219,14 @@ export class PageHelpContentsComponent implements OnInit {
     }
 
     public pageHelpContentSavedSuccessfully(pageHelpContent: PageHelpContent) {
-        this.pageHelpContentsCheckboxes.push(<CheckPageHelpContent>{pageHelpContent : pageHelpContent, checked : false});
+        this.checkboxes.push(<CheckPageHelpContent>{pageHelpContent : pageHelpContent, checked : false});
         this.pageHelpContents.push(pageHelpContent);
         this.applyCheck(false);
         this.countPageHelpContents();
     }
 
     public pageHelpContentUpdatedSuccessfully(pageHelpContent : PageHelpContent) {
-        this.pageHelpContentsCheckboxes.find(checkItem => checkItem.pageHelpContent._id==pageHelpContent._id).pageHelpContent = pageHelpContent;
+        this.checkboxes.find(checkItem => checkItem.pageHelpContent._id==pageHelpContent._id).pageHelpContent = pageHelpContent;
         let index = this.pageHelpContents.findIndex(checkItem => checkItem._id==pageHelpContent._id);
         this.pageHelpContents[index] = pageHelpContent;
         this.applyCheck(false);
@@ -242,9 +242,9 @@ export class PageHelpContentsComponent implements OnInit {
     }
 
     public applyFilter() {
-        this.pageHelpContentsCheckboxes = [];
+        this.checkboxes = [];
         this.pageHelpContents.filter(item => this.filterPageHelpContent(item,this.filters)).forEach(
-            _ => this.pageHelpContentsCheckboxes.push(<CheckPageHelpContent>{pageHelpContent: _, checked: false})
+            _ => this.checkboxes.push(<CheckPageHelpContent>{pageHelpContent: _, checked: false})
         );
         this.countPageHelpContents();
     }
diff --git a/app/pages/helpcontent/pages.component.html b/app/pages/helpcontent/pages.component.html
index b42c140..f0e67a5 100644
--- a/app/pages/helpcontent/pages.component.html
+++ b/app/pages/helpcontent/pages.component.html
@@ -1,4 +1,4 @@
-<div id="pages">
+<!-- <div id="pages">
     <div id="content">
         <div class="menubar fixed">
             <div class="sidebar-toggler visible-xs">
@@ -43,7 +43,6 @@
                                       <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 value=""> none selected </option-->
                                               <option *ngFor="let community of communities" value="{{community._id}}">{{community.name}}</option>
                                           </select>
                                       </div>
@@ -73,7 +72,6 @@
                                                 <div class="name" href="#">{{check.page.name}}</div>
                                             </div>
                                             <div class="col-sm-1">
-                                                <!-- <div class="state" href="#">{{(check.page.isEnabled) ? 'Enabled' : 'Disabled'}}</div> -->
                                                 <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>
@@ -124,6 +122,144 @@
     <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 uk-button-default" 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 uk-button-default" type="button"> Bulk Actions</button>
+                              <div uk-dropdown="mode: click">
+                                <ul class="uk-nav uk-dropdown-nav">
+                                    <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._id}}">{{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>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)="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>
+                                            </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: selectedCommunityId, page: check.page._id}" routerLink="/pageContents">edit</a>
+                                            </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)"
+            [selectedCommunityId]="selectedCommunityId">
+    <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)"
+            [selectedCommunityId]="selectedCommunityId">
+    <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>
diff --git a/app/pages/helpcontent/pages.component.ts b/app/pages/helpcontent/pages.component.ts
index 7c32a2b..be06b3d 100644
--- a/app/pages/helpcontent/pages.component.ts
+++ b/app/pages/helpcontent/pages.component.ts
@@ -32,7 +32,7 @@ export class PagesComponent implements OnInit {
     @ViewChild(PageFormComponent)
     public formComponent : PageFormComponent;
 
-    public pagesCheckboxes : CheckPage[] = [];
+    public checkboxes : CheckPage[] = [];
 
     public pages : Page[] = [];
 
@@ -83,10 +83,10 @@ export class PagesComponent implements OnInit {
 
     pagesReturned(pages: Page[]) {
       this.pages = pages;
-      this.pagesCheckboxes = [];
+      this.checkboxes = [];
 
       pages.forEach(_ => {
-          this.pagesCheckboxes.push(<CheckPage>{page : _, checked : false});
+          this.checkboxes.push(<CheckPage>{page : _, checked : false});
       });
     }
 
@@ -106,22 +106,22 @@ export class PagesComponent implements OnInit {
     }
 
     public toggleCheckBoxes(event) {
-        this.pagesCheckboxes.forEach(_ => _.checked = event.target.checked);
+        this.checkboxes.forEach(_ => _.checked = event.target.checked);
     }
 
     public applyCheck(flag : boolean) {
       console.info("applyCheck "+flag);
-        this.pagesCheckboxes.forEach(_ => _.checked = flag);
+        this.checkboxes.forEach(_ => _.checked = flag);
     }
 
     public getSelectedPages() : string[] {
-        return this.pagesCheckboxes.filter(page => page.checked == true).map(checkedPage => checkedPage.page).map(res => res._id);
+        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.pagesCheckboxes.findIndex(_ => _.page._id == id);
-            this.pagesCheckboxes.splice(i, 1);
+            let i = this.checkboxes.findIndex(_ => _.page._id == id);
+            this.checkboxes.splice(i, 1);
         }
     }
 
@@ -143,7 +143,7 @@ export class PagesComponent implements OnInit {
     }
 
     public editPage(i : number) {
-        let page : Page = this.pagesCheckboxes[i].page;
+        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);
@@ -153,16 +153,16 @@ export class PagesComponent implements OnInit {
     }
 
     public pageSavedSuccessfully(page: Page) {
-        this.pagesCheckboxes.push(<CheckPage>{page : page, checked : false});
-        console.info("checkboxes length: "+this.pagesCheckboxes.length);
+        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.pagesCheckboxes.find(checkItem => (checkItem.page._id == page._id)));
+      console.info(this.checkboxes.find(checkItem => (checkItem.page._id == page._id)));
       console.info(page.entities);
-        this.pagesCheckboxes.find(checkItem => checkItem.page._id==page._id).page = page;
+        this.checkboxes.find(checkItem => checkItem.page._id==page._id).page = page;
         this.applyCheck(false);
     }
 
@@ -172,9 +172,9 @@ export class PagesComponent implements OnInit {
     }
 
     public applyFilter() {
-        this.pagesCheckboxes = [];
+        this.checkboxes = [];
         this.pages.filter(item => this.filterPages(item)).forEach(
-            _ => this.pagesCheckboxes.push(<CheckPage>{page: _, checked: false})
+            _ => this.checkboxes.push(<CheckPage>{page: _, checked: false})
         );
     }
 
@@ -205,12 +205,12 @@ export class PagesComponent implements OnInit {
         this._helpContentService.togglePage(this.selectedCommunityId,id,status).subscribe(
             () => {
                 // for(let id of ret) {
-                //     let i = this.pagesCheckboxes.findIndex(_ => _.page._id == id);
-                //     this.pagesCheckboxes[i].page.isEnabled=status;
+                //     let i = this.checkboxes.findIndex(_ => _.page._id == id);
+                //     this.checkboxes[i].page.isEnabled=status;
                 // }
                 //this.countPageHelpContents();
-                let i = this.pagesCheckboxes.findIndex(_ => _.page._id == id);
-                this.pagesCheckboxes[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)
diff --git a/app/pages/helpcontent/selectEntities.component.html b/app/pages/helpcontent/selectEntities.component.html
index 9d1fa3e..bf41291 100644
--- a/app/pages/helpcontent/selectEntities.component.html
+++ b/app/pages/helpcontent/selectEntities.component.html
@@ -16,11 +16,11 @@
         <div class="content-wrapper" id="contentWrapper">
             <div>
                 <div class="contentPanel">
-                    <div class="alert alert-danger" style="display: none;" aria-hidden="true">
+                    <div class="uk-alert-danger" uk-alert style="display: none;" aria-hidden="true">
                         <span></span><span></span><span></span></div>
-                    <div class="alert alert-success" style="display: none;" aria-hidden="true">
+                    <div class="uk-alert-success" uk-alert 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="uk-alert" uk-alert style="display: none;" aria-hidden="true"><span></span><span></span><span></span></div>
                     <div>
                         <div class="gwt-HTML">
                             <div class="row users-list">
@@ -69,7 +69,7 @@
                                         </div>
                                     </template>
                                     <div *ngIf="entitiesCheckboxes.length==0" class="col-md-12">
-                                        <div class="alert alert-warning">No entities found</div>
+                                        <div class="uk-alert-warning" uk-alert>No entities found</div>
                                     </div>
                                 </div>
                             </div>
diff --git a/app/pages/modal-form.component.html b/app/pages/modal-form.component.html
index 9b12991..fc81662 100644
--- a/app/pages/modal-form.component.html
+++ b/app/pages/modal-form.component.html
@@ -8,7 +8,7 @@
                 <h4 class="modal-title"> {{titleText}} </h4>
             </div>
             <div class="modal-body">
-                <div *ngIf="errorMessage" class="alert alert-danger" aria-hidden="true">{{ errorMessage }}</div>
+                <div *ngIf="errorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ errorMessage }}</div>
                 <ng-content></ng-content>
             </div>
             <div class="modal-footer">