MaDgIK
/
connect-admin
13
0
Fork 0
Code Issues Pull Requests Projects Releases 8 Wiki Activity

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
This commit is contained in:
konstantina.galouni 2018-01-04 15:56:22 +00:00
parent 612f5da8bf
commit 95a84a12ed
17 changed files with 429 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/app.module.ts
View File

@ -11,8 +11,8 @@ import { TopicsComponent } from "./pages/faq/topics.components";
import { QuestionsComponent } from "./pages/faq/questions.component"; import { QuestionsComponent } from "./pages/faq/questions.component";
import { FAQService } from "./services/faq.service"; import { FAQService } from "./services/faq.service";
import { ModalModule } from 'ngx-bootstrap'; import { ModalModule } from 'ngx-bootstrap';
import { CollapseModule } from 'ngx-bootstrap'; //import { CollapseModule } from 'ngx-bootstrap';
import { AccordionModule } from 'ngx-bootstrap'; //import { AccordionModule } from 'ngx-bootstrap';
import { TopicsFormComponent } from "./pages/faq/topics-form.component"; import { TopicsFormComponent } from "./pages/faq/topics-form.component";
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ModalFormComponent } from "./pages/modal-form.component"; import { ModalFormComponent } from "./pages/modal-form.component";
@ -40,8 +40,8 @@ import { EntityFormComponent } from "./pages/helpcontent/entity-form.component";
HttpModule, HttpModule,
JsonpModule, JsonpModule,
ModalModule.forRoot(), ModalModule.forRoot(),
CollapseModule.forRoot(), //CollapseModule.forRoot(),
AccordionModule.forRoot(), //AccordionModule.forRoot(),
FormsModule, FormsModule,
ReactiveFormsModule, ReactiveFormsModule,
JWBootstrapSwitchModule, JWBootstrapSwitchModule,

85
app/pages/community/communities.component.html
View File

@ -1,37 +1,33 @@
Communities<div id="communities"> <div id="communities" class="uk-container">
<div id="content">
<div class="menubar fixed">
<div class="sidebar-toggler visible-xs">
<i class="ion-navicon"></i>
</div>
<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"> <form target="BSFormPanel_Admin_1" class="search">
<input #inputstring (keyup.enter)="filterBySearch(inputstring.value)" placeholder="Search communities (name)..." type="text"/> <input #inputstring (keyup.enter)="filterBySearch(inputstring.value)" placeholder="Community name..." type="text" class="uk-input uk-width-medium"/>
<input class="btn" type="submit"> <button class="uk-button uk-button-default" type="submit">Search</button>
</form> </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>
<div class="content-wrapper" id="contentWrapper"> <div class="content-wrapper" id="contentWrapper">
<div> <div>
<div class="contentPanel"> <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> <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> <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="page-controls">
<div class="col-md-12 filters"> <div class=" filters ">
<div class="show-options"> <div class="show-options uk-float-right">
<div class="btn-group"><a href="javascript:;" class="btn dropdown-toggle" <button class="uk-button uk-button-default" type="button"> Bulk Actions</button>
data-toggle="dropdown"><i></i> Bulk Actions <span <div uk-dropdown="mode: click">
class="caret"></span></a> <ul class="uk-nav uk-dropdown-nav">
<ul class="dropdown-menu"> <li><a (click)="confirmDeleteSelectedCommunities()"><i></i> Delete </a></li>
<li><a (click)="confirmDeleteSelectedCommunities()"><i></i> Delete </a></li> </ul>
</ul> </div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -40,32 +36,34 @@ Communities<div id="communities">
<div class="gwt-HTML"> <div class="gwt-HTML">
<div class="row users-list"> <div class="row users-list">
<div class="col-md-12"> <div class="col-md-12">
<table class="uk-table uk-table-striped">
<div class="row headers"> <thead>
<div class="col-sm-1 header select-users"><input id="allCommunityCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"> <tr>
</div> <th><input id="allCommunityCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th>
<div class="col-sm-10 header hidden-xs"><label><a href="#">Name</a></label></div> <th>Name</th>
<div class="col-sm-1 header hidden-xs"><label><a href="#">Actions</a></label></div> <th>Actions</th>
</div> </tr>
</thead>
<template [ngIf]="communitiesCheckboxes && communitiesCheckboxes.length>0"> <tbody >
<div *ngFor="let check of communitiesCheckboxes; let i=index" class="row user"> <tr *ngFor="let check of checkboxes; let i=index">
<div class="col-sm-1 avatar"><input id="{{check.community._id}}" class="checkBox" type="checkbox" <td><input id="{{check.community._id}}" class="checkBox" type="checkbox"
name="communitiescb[]" value="{{check.community._id}}" [(ngModel)]="check.checked"> name="communitiescb[]" value="{{check.community._id}}" [(ngModel)]="check.checked">
</div> </td>
<div class="col-sm-10"> <td>
<div class="name" href="#">{{check.community.name}}</div> <div class="name" href="#">{{check.community.name}}</div>
</div> </td>
<div class="col-sm-1"> <td>
<div class="actions" href="#"> <div class="actions" href="#">
<input title="Edit" src="imgs/icn_edit.png" class="edit" type="image" (click)="editCommunity(i)"> <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)"> <input title="Delete" src="imgs/icn_trash.png" class="delete" type="image" (click)="confirmDeleteCommunity(check.community._id)">
</div> </div>
</div> </td>
</div> </tr>
</template> </tbody>
<div *ngIf="communitiesCheckboxes.length==0" class="col-md-12"> </table>
<div class="alert alert-warning">No communities found</div>
<div *ngIf="checkboxes.length==0" class="col-md-12">
<div class="uk-alert-warning" uk-alert>No communities found</div>
</div> </div>
</div> </div>
</div> </div>
@ -74,7 +72,6 @@ Communities<div id="communities">
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
<modal-form #saveModal [saveText]="'Save'" [titleText]="'Add a new Community'" [formGroup]="formGroup" [type]="'community'" <modal-form #saveModal [saveText]="'Save'" [titleText]="'Add a new Community'" [formGroup]="formGroup" [type]="'community'"
[isModalShown]="isModalShown" (emmitObject)="communitySavedSuccessfully($event)" (emmitError)="handleError($event)" [isModalShown]="isModalShown" (emmitObject)="communitySavedSuccessfully($event)" (emmitError)="handleError($event)"

28
app/pages/community/communities.component.ts
View File

@ -30,7 +30,7 @@ export class CommunitiesComponent implements OnInit {
@ViewChild(CommunityFormComponent) @ViewChild(CommunityFormComponent)
public formComponent : CommunityFormComponent; public formComponent : CommunityFormComponent;
public communitiesCheckboxes : CheckCommunity[] = []; public checkboxes : CheckCommunity[] = [];
public communities : Community[] = []; public communities : Community[] = [];
@ -58,7 +58,7 @@ export class CommunitiesComponent implements OnInit {
this._helpContentService.getCommunityFull(community_id).subscribe( this._helpContentService.getCommunityFull(community_id).subscribe(
community => { community => {
self.communities = [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)); error => this.handleError('System error retrieving communities', error));
} }
@ -70,7 +70,7 @@ export class CommunitiesComponent implements OnInit {
self.communities = communities; self.communities = communities;
communities.forEach(_ => { communities.forEach(_ => {
this.communitiesCheckboxes.push(<CheckCommunity>{community : _, checked : false}); this.checkboxes.push(<CheckCommunity>{community : _, checked : false});
}); });
}, },
error => this.handleError('System error retrieving communities', error)); error => this.handleError('System error retrieving communities', error));
@ -81,22 +81,22 @@ export class CommunitiesComponent implements OnInit {
} }
public toggleCheckBoxes(event) { public toggleCheckBoxes(event) {
this.communitiesCheckboxes.forEach(_ => _.checked = event.target.checked); this.checkboxes.forEach(_ => _.checked = event.target.checked);
} }
public applyCheck(flag : boolean) { public applyCheck(flag : boolean) {
console.info("applyCheck "+flag); console.info("applyCheck "+flag);
this.communitiesCheckboxes.forEach(_ => _.checked = flag); this.checkboxes.forEach(_ => _.checked = flag);
} }
public getSelectedCommunities() : string[] { 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 { private deleteCommunitiesFromArray(ids : string[]) : void {
for(let id of ids) { for(let id of ids) {
let i = this.communitiesCheckboxes.findIndex(_ => _.community._id == id); let i = this.checkboxes.findIndex(_ => _.community._id == id);
this.communitiesCheckboxes.splice(i, 1); this.checkboxes.splice(i, 1);
} }
} }
@ -118,19 +118,19 @@ export class CommunitiesComponent implements OnInit {
} }
public editCommunity(i : number) { public editCommunity(i : number) {
let community : Community = this.communitiesCheckboxes[i].community; let community : Community = this.checkboxes[i].community;
this.formGroup.patchValue(community); this.formGroup.patchValue(community);
this.updateModal.showModal(); this.updateModal.showModal();
} }
public communitySavedSuccessfully(community: Community) { public communitySavedSuccessfully(community: Community) {
this.communitiesCheckboxes.push(<CheckCommunity>{community : community, checked : false}); this.checkboxes.push(<CheckCommunity>{community : community, checked : false});
console.info("checkboxes length: "+this.communitiesCheckboxes.length); console.info("checkboxes length: "+this.checkboxes.length);
this.applyCheck(false); this.applyCheck(false);
} }
public communityUpdatedSuccessfully(community : Community) { 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); this.applyCheck(false);
} }
@ -140,9 +140,9 @@ export class CommunitiesComponent implements OnInit {
} }
public applyFilter() { public applyFilter() {
this.communitiesCheckboxes = []; this.checkboxes = [];
this.communities.filter(item => this.filterCommunities(item)).forEach( this.communities.filter(item => this.filterCommunities(item)).forEach(
_ => this.communitiesCheckboxes.push(<CheckCommunity>{community: _, checked: false}) _ => this.checkboxes.push(<CheckCommunity>{community: _, checked: false})
); );
} }

1
app/pages/faq/questions.component.html
View File

@ -151,4 +151,3 @@
<delete-confirmation-dialog #deleteConfirmationModal [isModalShown]="isModalShown" (emmitObject)="confirmedDeleteQuestions($event)"> <delete-confirmation-dialog #deleteConfirmationModal [isModalShown]="isModalShown" (emmitObject)="confirmedDeleteQuestions($event)">
Are you sure you want to delete the selected question(s)? Are you sure you want to delete the selected question(s)?
</delete-confirmation-dialog> </delete-confirmation-dialog>

2
app/pages/helpcontent/edit-page-help-content.component.html
View File

@ -11,7 +11,7 @@
<div class="content-wrapper"> <div class="content-wrapper">
<div> <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> <page-content-form [communityId]="communityId" [group]="formGroup"></page-content-form>
<a (click)="saveCustom()" class="btn btn-success"><i></i>Update page content</a> <a (click)="saveCustom()" class="btn btn-success"><i></i>Update page content</a>
</div> </div>

12
app/pages/helpcontent/entities.component.html
View File

@ -13,11 +13,11 @@
<div class="content-wrapper" id="contentWrapper"> <div class="content-wrapper" id="contentWrapper">
<div> <div>
<div class="contentPanel"> <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> <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> <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="page-controls">
<div class=" filters "> <div class=" filters ">
@ -63,7 +63,7 @@
</tr> </tr>
</thead> </thead>
<tbody > <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" <td><input id="{{check.entity._id}}" class="checkBox" type="checkbox"
name="entitiescb[]" value="{{check.entity._id}}" [(ngModel)]="check.checked"> name="entitiescb[]" value="{{check.entity._id}}" [(ngModel)]="check.checked">
</td> </td>
@ -88,8 +88,8 @@
</tbody> </tbody>
</table> </table>
<div *ngIf="entitiesCheckboxes.length==0" class="col-md-12"> <div *ngIf="checkboxes.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> </div>
</div> </div>

30
app/pages/helpcontent/entities.component.ts
View File

@ -27,7 +27,7 @@ export class EntitiesComponent implements OnInit {
@ViewChild(EntityFormComponent) @ViewChild(EntityFormComponent)
public formComponent : EntityFormComponent; public formComponent : EntityFormComponent;
public entitiesCheckboxes : CheckEntity[] = []; public checkboxes : CheckEntity[] = [];
public entities : Entity[] = []; public entities : Entity[] = [];
@ -65,10 +65,10 @@ export class EntitiesComponent implements OnInit {
this._helpContentService.getCommunityEntities(community_id).subscribe( this._helpContentService.getCommunityEntities(community_id).subscribe(
entities => { entities => {
self.entities = entities; self.entities = entities;
self.entitiesCheckboxes = []; self.checkboxes = [];
entities.forEach(_ => { entities.forEach(_ => {
self.entitiesCheckboxes.push(<CheckEntity>{entity : _, checked : false}); self.checkboxes.push(<CheckEntity>{entity : _, checked : false});
}); });
}, },
error => this.handleError('System error retrieving entities', error)); error => this.handleError('System error retrieving entities', error));
@ -79,22 +79,22 @@ export class EntitiesComponent implements OnInit {
} }
public toggleCheckBoxes(event) { public toggleCheckBoxes(event) {
this.entitiesCheckboxes.forEach(_ => _.checked = event.target.checked); this.checkboxes.forEach(_ => _.checked = event.target.checked);
} }
public applyCheck(flag : boolean) { public applyCheck(flag : boolean) {
console.info("applyCheck "+flag); console.info("applyCheck "+flag);
this.entitiesCheckboxes.forEach(_ => _.checked = flag); this.checkboxes.forEach(_ => _.checked = flag);
} }
public getSelectedEntities() : string[] { 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 { private deleteEntitiesFromArray(ids : string[]) : void {
for(let id of ids) { for(let id of ids) {
let i = this.entitiesCheckboxes.findIndex(_ => _.entity._id == id); let i = this.checkboxes.findIndex(_ => _.entity._id == id);
this.entitiesCheckboxes.splice(i, 1); this.checkboxes.splice(i, 1);
} }
} }
@ -116,18 +116,18 @@ export class EntitiesComponent implements OnInit {
} }
public editEntity(i : number) { public editEntity(i : number) {
let entity : Entity = this.entitiesCheckboxes[i].entity; let entity : Entity = this.checkboxes[i].entity;
this.formGroup.patchValue(entity); this.formGroup.patchValue(entity);
this.updateModal.showModal(); this.updateModal.showModal();
} }
public entitySavedSuccessfully(entity: Entity) { public entitySavedSuccessfully(entity: Entity) {
this.entitiesCheckboxes.push(<CheckEntity>{entity : entity, checked : false}); this.checkboxes.push(<CheckEntity>{entity : entity, checked : false});
this.applyCheck(false); this.applyCheck(false);
} }
public entityUpdatedSuccessfully(entity : Entity) { 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); this.applyCheck(false);
} }
@ -137,9 +137,9 @@ export class EntitiesComponent implements OnInit {
} }
public applyFilter() { public applyFilter() {
this.entitiesCheckboxes = []; this.checkboxes = [];
this.entities.filter(item => this.filterEntities(item)).forEach( 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) { public toggleEntity(status : boolean, id : string) {
this._helpContentService.toggleEntity(this.selectedCommunityId,id,status).subscribe( this._helpContentService.toggleEntity(this.selectedCommunityId,id,status).subscribe(
() => { () => {
let i = this.entitiesCheckboxes.findIndex(_ => _.entity._id == id); let i = this.checkboxes.findIndex(_ => _.entity._id == id);
this.entitiesCheckboxes[i].entity.isEnabled=status; this.checkboxes[i].entity.isEnabled=status;
this.applyCheck(false); this.applyCheck(false);
}, },
error => this.handleError('System error changing the status of the selected entity(-ies)', error) error => this.handleError('System error changing the status of the selected entity(-ies)', error)

2
app/pages/helpcontent/new-page-help-content.component.html
View File

@ -11,7 +11,7 @@
<div class="content-wrapper"> <div class="content-wrapper">
<div> <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> <page-content-form [communityId]="communityId" [group]="formGroup"></page-content-form>
<a (click)="saveCustom()" class="btn btn-success"><i></i>Save page content</a> <a (click)="saveCustom()" class="btn btn-success"><i></i>Save page content</a>
</div> </div>

115
app/pages/helpcontent/page-form.component.html
View File

@ -16,105 +16,28 @@
</select> </select>
</div> </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> <button type="button" (click)="toggle()">Add / Remove entities</button>
<span type="text" class="form-array" formArrayName="entities" id="pageEntitiesTag" placeholder="Entities"> <ng-container *ngIf="!myForm.value.isCollapsed" >
<input *ngFor="let entity of myForm.value.entities" type="text" class="form-control"> <div *ngFor="let entity of getKeys(allEntities)">
</span--> <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> </div>
<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"> <input type="hidden" formControlName="_id">
</form> </form>
<!--<pre>-->
<!--{{myForm.value | json}}-->
<!--</pre>-->

2
app/pages/helpcontent/page-form.component.ts
View File

@ -3,8 +3,6 @@
*/ */
import {Component, OnInit, Input} from '@angular/core'; import {Component, OnInit, Input} from '@angular/core';
import {FormGroup, FormArray, FormBuilder, Validators} from "@angular/forms"; 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 {Entity} from '../../domain/entity';
import { HelpContentService } from "../../services/help-content.service"; import { HelpContentService } from "../../services/help-content.service";

4
app/pages/helpcontent/page-help-content-form.component.html
View File

@ -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"> <form [formGroup]="myForm">
<div class="form-group" [ngClass]="{'has-error':!myForm.controls.page.valid && myForm.controls.page.dirty}"> <div class="form-group" [ngClass]="{'has-error':!myForm.controls.page.valid && myForm.controls.page.dirty}">
<label for="pageTag">Select Page</label> <label for="pageTag">Select Page</label>
@ -51,4 +51,4 @@
<!--<pre>--> <!--<pre>-->
<!--{{myForm.value | json}}--> <!--{{myForm.value | json}}-->
<!--{{myForm.valid}}--> <!--{{myForm.valid}}-->
<!--</pre>--> <!--</pre>-->

160
app/pages/helpcontent/page-help-contents.component.html
View File

@ -1,4 +1,4 @@
<div id="pageContents"> <!-- <div id="pageContents">
<div id="content"> <div id="content">
<div class="menubar fixed"> <div class="menubar fixed">
<div class="sidebar-toggler visible-xs"> <div class="sidebar-toggler visible-xs">
@ -7,11 +7,9 @@
<div class="page-title">Page Help Contents</div> <div class="page-title">Page Help Contents</div>
<form class="search"> <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 #inputstring (keyup.enter)="filterBySearch(inputstring.value)" placeholder="Search page content (content)..." type="text"/>
<input class="btn" type="submit"> <input class="btn" type="submit">
</form> </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}" 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> <a *ngIf="selectedPageId" [queryParams]="{communityId: selectedCommunityId, pageId: selectedPageId}" routerLink="/pageContents/new" class="btn btn-success pull-right"><i></i> New Page Content </a>
</div> </div>
@ -25,16 +23,10 @@
<span></span><span></span><span></span></div> <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="alert" style="display: none;" aria-hidden="true"><span></span><span></span><span></span></div>
<div class="row page-controls"> <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 *ngIf="!selectedPageId" class="col-md-12 filters marginBottom20">
<div class="links form-group form-inline"> <div class="links form-group form-inline">
<div class="gwt-Label filterLabel">Filter by community:</div> <div class="gwt-Label filterLabel">Filter by community:</div>
<select class="input-xxlarge form-control" (change)="filterByCommunity($event)"> <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> <option *ngFor="let community of communities" value="{{community._id}}">{{community.name}}</option>
</select> </select>
</div> </div>
@ -90,8 +82,8 @@
<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="#">Actions</a></label></div>
</div> </div>
<template [ngIf]="pageHelpContentsCheckboxes && pageHelpContentsCheckboxes.length>0"> <template [ngIf]="checkboxes && checkboxes.length>0">
<div *ngFor="let check of pageHelpContentsCheckboxes; let i=index" class="row user"> <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" <div class="col-sm-1 avatar"><input id="{{check.pageHelpContent._id}}" class="checkBox" type="checkbox"
name="pageHelpContentscb[]" value="{{check.pageHelpContent._id}}" [(ngModel)]="check.checked"> name="pageHelpContentscb[]" value="{{check.pageHelpContent._id}}" [(ngModel)]="check.checked">
</div> </div>
@ -128,7 +120,7 @@
</div> </div>
</div> </div>
</template> </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 class="alert alert-warning">No page contents found</div>
</div> </div>
</div> </div>
@ -142,6 +134,150 @@
</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> -->
<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)"> <delete-confirmation-dialog #deleteConfirmationModal [isModalShown]="isModalShown" (emmitObject)="confirmedDeletePageHelpContents($event)">
Are you sure you want to delete the selected page content(s)? Are you sure you want to delete the selected page content(s)?
</delete-confirmation-dialog> </delete-confirmation-dialog>

30
app/pages/helpcontent/page-help-contents.component.ts
View File

@ -31,7 +31,7 @@ export class PageHelpContentsComponent implements OnInit {
@ViewChild('deleteConfirmationModal') @ViewChild('deleteConfirmationModal')
public deleteConfirmationModal : DeleteConfirmationDialogComponent; public deleteConfirmationModal : DeleteConfirmationDialogComponent;
public pageHelpContentsCheckboxes : CheckPageHelpContent[] = []; public checkboxes : CheckPageHelpContent[] = [];
public pageHelpContents : PageHelpContent[] = []; public pageHelpContents : PageHelpContent[] = [];
@ -120,17 +120,17 @@ export class PageHelpContentsComponent implements OnInit {
pageHelpContents => { pageHelpContents => {
self.pageHelpContents = pageHelpContents as Array<PageHelpContent>; self.pageHelpContents = pageHelpContents as Array<PageHelpContent>;
self.counter.all = self.pageHelpContents.length; self.counter.all = self.pageHelpContents.length;
self.pageHelpContentsCheckboxes = []; self.checkboxes = [];
/*self.pageHelpContents.forEach(_ => { /*self.pageHelpContents.forEach(_ => {
let page: Page = _.page as Page; let page: Page = _.page as Page;
if(!self.selectedPageId || (page._id == self.selectedPageId)) { 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) { for (let i = self.pageHelpContents.length - 1; i >= 0; i -= 1) {
let page: Page = self.pageHelpContents[i].page as Page; let page: Page = self.pageHelpContents[i].page as Page;
if(!self.selectedPageId || (page._id == self.selectedPageId)) { 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 { } else {
self.pageHelpContents.splice(i, 1); self.pageHelpContents.splice(i, 1);
} }
@ -146,17 +146,17 @@ export class PageHelpContentsComponent implements OnInit {
// } // }
public toggleCheckBoxes(event) { public toggleCheckBoxes(event) {
this.pageHelpContentsCheckboxes.forEach(_ => _.checked = event.target.checked); this.checkboxes.forEach(_ => _.checked = event.target.checked);
this.checkboxAll = event.target.checked; this.checkboxAll = event.target.checked;
} }
public applyCheck(flag : boolean) { public applyCheck(flag : boolean) {
this.pageHelpContentsCheckboxes.forEach(_ => _.checked = flag); this.checkboxes.forEach(_ => _.checked = flag);
this.checkboxAll = false; this.checkboxAll = false;
} }
public getSelectedPageHelpContents() : string[] { 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); .map(checkedPageHelpContent => checkedPageHelpContent.pageHelpContent).map(res => res._id);
} }
@ -179,9 +179,9 @@ export class PageHelpContentsComponent implements OnInit {
private deletePageHelpContentsFromArray(ids : string[]) : void { private deletePageHelpContentsFromArray(ids : string[]) : void {
for(let id of ids) { 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); let iq = this.pageHelpContents.findIndex(_ => _._id == id);
this.pageHelpContentsCheckboxes.splice(iqc, 1); this.checkboxes.splice(iqc, 1);
this.pageHelpContents.splice(iqc, 1); this.pageHelpContents.splice(iqc, 1);
} }
} }
@ -199,9 +199,9 @@ export class PageHelpContentsComponent implements OnInit {
this._helpService.togglePageHelpContents(ids,status).subscribe( this._helpService.togglePageHelpContents(ids,status).subscribe(
() => { () => {
for(let id of ids) { for(let id of ids) {
let i = this.pageHelpContentsCheckboxes.findIndex(_ => _.pageHelpContent._id == id); let i = this.checkboxes.findIndex(_ => _.pageHelpContent._id == id);
console.info(i); console.info(i);
this.pageHelpContentsCheckboxes[i].pageHelpContent.isActive=status; this.checkboxes[i].pageHelpContent.isActive=status;
} }
this.countPageHelpContents(); this.countPageHelpContents();
this.applyCheck(false); this.applyCheck(false);
@ -219,14 +219,14 @@ export class PageHelpContentsComponent implements OnInit {
} }
public pageHelpContentSavedSuccessfully(pageHelpContent: PageHelpContent) { 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.pageHelpContents.push(pageHelpContent);
this.applyCheck(false); this.applyCheck(false);
this.countPageHelpContents(); this.countPageHelpContents();
} }
public pageHelpContentUpdatedSuccessfully(pageHelpContent : PageHelpContent) { 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); let index = this.pageHelpContents.findIndex(checkItem => checkItem._id==pageHelpContent._id);
this.pageHelpContents[index] = pageHelpContent; this.pageHelpContents[index] = pageHelpContent;
this.applyCheck(false); this.applyCheck(false);
@ -242,9 +242,9 @@ export class PageHelpContentsComponent implements OnInit {
} }
public applyFilter() { public applyFilter() {
this.pageHelpContentsCheckboxes = []; this.checkboxes = [];
this.pageHelpContents.filter(item => this.filterPageHelpContent(item,this.filters)).forEach( 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(); this.countPageHelpContents();
} }

142
app/pages/helpcontent/pages.component.html
View File

@ -1,4 +1,4 @@
<div id="pages"> <!-- <div id="pages">
<div id="content"> <div id="content">
<div class="menubar fixed"> <div class="menubar fixed">
<div class="sidebar-toggler visible-xs"> <div class="sidebar-toggler visible-xs">
@ -43,7 +43,6 @@
<div class="links form-group form-inline"> <div class="links form-group form-inline">
<div class="gwt-Label filterLabel">Filter by community:</div> <div class="gwt-Label filterLabel">Filter by community:</div>
<select class="input-xxlarge form-control" (change)="filterByCommunity($event)"> <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> <option *ngFor="let community of communities" value="{{community._id}}">{{community.name}}</option>
</select> </select>
</div> </div>
@ -73,7 +72,6 @@
<div class="name" href="#">{{check.page.name}}</div> <div class="name" href="#">{{check.page.name}}</div>
</div> </div>
<div class="col-sm-1"> <div class="col-sm-1">
<!-- <div class="state" href="#">{{(check.page.isEnabled) ? 'Enabled' : 'Disabled'}}</div> -->
<div *ngIf="check.page.isEnabled" class="activated" > <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"> <input (click)="togglePage(false,[check.page._id])" class="deactivate" src="imgs/check-icon.png" title="Disable" width="20" type="image" height="20">
</div> </div>
@ -124,6 +122,144 @@
<page-form [group]="formGroup" [selectedCommunityId]="selectedCommunityId" [type]="pagesType"></page-form> <page-form [group]="formGroup" [selectedCommunityId]="selectedCommunityId" [type]="pagesType"></page-form>
</modal-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)"> <delete-confirmation-dialog #deleteConfirmationModal [isModalShown]="isModalShown" (emmitObject)="confirmedDeletePages($event)">
Are you sure you want to delete the selected page(s)? Are you sure you want to delete the selected page(s)?
</delete-confirmation-dialog> </delete-confirmation-dialog>

38
app/pages/helpcontent/pages.component.ts
View File

@ -32,7 +32,7 @@ export class PagesComponent implements OnInit {
@ViewChild(PageFormComponent) @ViewChild(PageFormComponent)
public formComponent : PageFormComponent; public formComponent : PageFormComponent;
public pagesCheckboxes : CheckPage[] = []; public checkboxes : CheckPage[] = [];
public pages : Page[] = []; public pages : Page[] = [];
@ -83,10 +83,10 @@ export class PagesComponent implements OnInit {
pagesReturned(pages: Page[]) { pagesReturned(pages: Page[]) {
this.pages = pages; this.pages = pages;
this.pagesCheckboxes = []; this.checkboxes = [];
pages.forEach(_ => { 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) { public toggleCheckBoxes(event) {
this.pagesCheckboxes.forEach(_ => _.checked = event.target.checked); this.checkboxes.forEach(_ => _.checked = event.target.checked);
} }
public applyCheck(flag : boolean) { public applyCheck(flag : boolean) {
console.info("applyCheck "+flag); console.info("applyCheck "+flag);
this.pagesCheckboxes.forEach(_ => _.checked = flag); this.checkboxes.forEach(_ => _.checked = flag);
} }
public getSelectedPages() : string[] { 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 { private deletePagesFromArray(ids : string[]) : void {
for(let id of ids) { for(let id of ids) {
let i = this.pagesCheckboxes.findIndex(_ => _.page._id == id); let i = this.checkboxes.findIndex(_ => _.page._id == id);
this.pagesCheckboxes.splice(i, 1); this.checkboxes.splice(i, 1);
} }
} }
@ -143,7 +143,7 @@ export class PagesComponent implements OnInit {
} }
public editPage(i : number) { public editPage(i : number) {
let page : Page = this.pagesCheckboxes[i].page; let page : Page = this.checkboxes[i].page;
this.formGroup.patchValue(page); this.formGroup.patchValue(page);
const entityFGs = (page.entities as Entity[]).map(entity => this.formComponent._fb.group(entity)); const entityFGs = (page.entities as Entity[]).map(entity => this.formComponent._fb.group(entity));
const entityFormArray = this.formComponent._fb.array(entityFGs); const entityFormArray = this.formComponent._fb.array(entityFGs);
@ -153,16 +153,16 @@ export class PagesComponent implements OnInit {
} }
public pageSavedSuccessfully(page: Page) { public pageSavedSuccessfully(page: Page) {
this.pagesCheckboxes.push(<CheckPage>{page : page, checked : false}); this.checkboxes.push(<CheckPage>{page : page, checked : false});
console.info("checkboxes length: "+this.pagesCheckboxes.length); console.info("checkboxes length: "+this.checkboxes.length);
this.applyCheck(false); this.applyCheck(false);
} }
public pageUpdatedSuccessfully(page : Page) { public pageUpdatedSuccessfully(page : Page) {
console.info(page._id); 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); 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); this.applyCheck(false);
} }
@ -172,9 +172,9 @@ export class PagesComponent implements OnInit {
} }
public applyFilter() { public applyFilter() {
this.pagesCheckboxes = []; this.checkboxes = [];
this.pages.filter(item => this.filterPages(item)).forEach( 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( this._helpContentService.togglePage(this.selectedCommunityId,id,status).subscribe(
() => { () => {
// for(let id of ret) { // for(let id of ret) {
// let i = this.pagesCheckboxes.findIndex(_ => _.page._id == id); // let i = this.checkboxes.findIndex(_ => _.page._id == id);
// this.pagesCheckboxes[i].page.isEnabled=status; // this.checkboxes[i].page.isEnabled=status;
// } // }
//this.countPageHelpContents(); //this.countPageHelpContents();
let i = this.pagesCheckboxes.findIndex(_ => _.page._id == id); let i = this.checkboxes.findIndex(_ => _.page._id == id);
this.pagesCheckboxes[i].page.isEnabled=status; this.checkboxes[i].page.isEnabled=status;
this.applyCheck(false); this.applyCheck(false);
}, },
error => this.handleError('System error changing the status of the selected page(s)', error) error => this.handleError('System error changing the status of the selected page(s)', error)

8
app/pages/helpcontent/selectEntities.component.html
View File

@ -16,11 +16,11 @@
<div class="content-wrapper" id="contentWrapper"> <div class="content-wrapper" id="contentWrapper">
<div> <div>
<div class="contentPanel"> <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> <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> <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>
<div class="gwt-HTML"> <div class="gwt-HTML">
<div class="row users-list"> <div class="row users-list">
@ -69,7 +69,7 @@
</div> </div>
</template> </template>
<div *ngIf="entitiesCheckboxes.length==0" class="col-md-12"> <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> </div>
</div> </div>

2
app/pages/modal-form.component.html
View File

@ -8,7 +8,7 @@
<h4 class="modal-title"> {{titleText}} </h4> <h4 class="modal-title"> {{titleText}} </h4>
</div> </div>
<div class="modal-body"> <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> <ng-content></ng-content>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">