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
parent
612f5da8bf
commit
95a84a12ed
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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)"
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>-->
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
||||
|
|
|
|||
|
|
@ -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>-->
|
||||
<!--</pre>-->
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue