MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Library | Trunk]: Dashboard: Admin tools pages: Fix no rasults card and loading. Add notifications on actions and errors. 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60666 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2021-03-18 14:11:41 +00:00
parent 4e00cd1caa
commit 4ec2c7c124
14 changed files with 436 additions and 610 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
dashboard/divId/divIds.component.html
View File

@ -1,7 +1,7 @@
<div page-content class="admin-pages"> <div page-content class="admin-pages">
<div header> <div header>
<admin-tabs tab="class" header></admin-tabs> <admin-tabs tab="class" header></admin-tabs>
<div *ngIf="!errorMessage && !showLoading" class="uk-grid" uk-grid> <div *ngIf="!showLoading" class="uk-grid" uk-grid>
<div class="uk-width-1-1"> <div class="uk-width-1-1">
<ul class="uk-subnav uk-subnav-pill"> <ul class="uk-subnav uk-subnav-pill">
<li [class.uk-active]="filterForm.get('type').value === 'all'" class="uk-margin-small-bottom"><a <li [class.uk-active]="filterForm.get('type').value === 'all'" class="uk-margin-small-bottom"><a
@ -14,9 +14,11 @@
</ul> </ul>
</div> </div>
<div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid> <div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
<div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search class" <div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"
placeholder="Search class"
[selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()" [selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()"
[bordered]="true" colorClass="uk-text-secondary" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div> [bordered]="true" colorClass="uk-text-secondary"
class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
<div class="show-options"> <div class="show-options">
<button class="uk-button uk-button-secondary">Bulk Actions</button> <button class="uk-button uk-button-secondary">Bulk Actions</button>
<div uk-dropdown="mode: click"> <div uk-dropdown="mode: click">
@ -41,19 +43,11 @@
</div> </div>
</div> </div>
<div inner> <div inner>
<loading *ngIf="showLoading" class="uk-margin-large-top"></loading> <div *ngIf="showLoading" class="uk-position-center">
<div *ngIf="!showLoading"> <loading></loading>
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
<a class="uk-alert-close" uk-close></a>
{{updateErrorMessage}}
</div> </div>
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top" <div *ngIf="!showLoading">
role="alert">{{errorMessage}}</div> <table *ngIf="checkboxes.length > 0"class="uk-table uk-table-striped uk-table-large">
<div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage">
<div class="md-card-content">
<div class="uk-overflow-container">
<table class="uk-table uk-table-striped uk-table-large">
<thead class="uk-card-header"> <thead class="uk-card-header">
<tr> <tr>
<th <th
@ -93,18 +87,15 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div *ngIf="checkboxes.length==0" class="col-md-12"> <div *ngIf="checkboxes.length == 0"
<div class="uk-alert-warning uk-alert">No classes found</div> class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
</div> <div>No classes found</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<modal-alert #editModal (alertOutput)="divIdSaveConfirmed($event)" <modal-alert #editModal (alertOutput)="divIdSaveConfirmed($event)"
[okDisabled]="classForm && (classForm.invalid || !classForm.dirty)"> [okDisabled]="classForm && (classForm.invalid || !classForm.dirty)">
<div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>
<form *ngIf="classForm" [formGroup]="classForm" class="uk-grid uk-child-width-1-1" uk-grid> <form *ngIf="classForm" [formGroup]="classForm" class="uk-grid uk-child-width-1-1" uk-grid>
<div dashboard-input [formInput]="classForm.get('name')" <div dashboard-input [formInput]="classForm.get('name')"
type="text" label="Class Name" placeholder="Write a name"> type="text" label="Class Name" placeholder="Write a name">

24
dashboard/divId/divIds.component.ts
View File

@ -37,9 +37,6 @@ export class DivIdsComponent implements OnInit {
public properties: EnvProperties = properties; public properties: EnvProperties = properties;
public formPages: Page[] = []; public formPages: Page[] = [];
public showLoading: boolean = true; public showLoading: boolean = true;
public errorMessage: string = '';
public updateErrorMessage: string = '';
public modalErrorMessage: string = '';
public filterForm: FormGroup; public filterForm: FormGroup;
private subscriptions: any[] = []; private subscriptions: any[] = [];
public allPages: Option[] = []; public allPages: Option[] = [];
@ -93,9 +90,6 @@ export class DivIdsComponent implements OnInit {
}); });
} else { } else {
this.showLoading = true; this.showLoading = true;
this.updateErrorMessage = "";
this.errorMessage = "";
this.subscriptions.push(this._helpContentService.getAllDivIdsFull( this.properties.adminToolsAPIURL).subscribe( this.subscriptions.push(this._helpContentService.getAllDivIdsFull( this.properties.adminToolsAPIURL).subscribe(
divIds => { divIds => {
this.divIds = divIds; this.divIds = divIds;
@ -174,7 +168,6 @@ export class DivIdsComponent implements OnInit {
}); });
} else { } else {
this.showLoading = true; this.showLoading = true;
this.updateErrorMessage = "";
this.subscriptions.push(this._helpContentService.deleteDivIds(this.selectedDivIds, this.properties.adminToolsAPIURL).subscribe( this.subscriptions.push(this._helpContentService.deleteDivIds(this.selectedDivIds, this.properties.adminToolsAPIURL).subscribe(
_ => { _ => {
this.deleteDivIdsFromArray(this.selectedDivIds); this.deleteDivIdsFromArray(this.selectedDivIds);
@ -219,7 +212,6 @@ export class DivIdsComponent implements OnInit {
pages: this.pagesCtrl, pages: this.pagesCtrl,
portalType: this._fb.control('', Validators.required) portalType: this._fb.control('', Validators.required)
}); });
this.modalErrorMessage = "";
this.divIdsModalOpen("Create class", "Create"); this.divIdsModalOpen("Create class", "Create");
} }
@ -252,7 +244,6 @@ export class DivIdsComponent implements OnInit {
}); });
} else { } else {
if (!this.classForm.value._id) { if (!this.classForm.value._id) {
this.modalErrorMessage = "";
this.subscriptions.push(this._helpContentService.saveDivId(<DivId>this.classForm.value, this.properties.adminToolsAPIURL).subscribe( this.subscriptions.push(this._helpContentService.saveDivId(<DivId>this.classForm.value, this.properties.adminToolsAPIURL).subscribe(
divId => { divId => {
this.divIdSavedSuccessfully(divId); this.divIdSavedSuccessfully(divId);
@ -317,27 +308,28 @@ export class DivIdsComponent implements OnInit {
if (error == null) { if (error == null) {
// this.formComponent.reset(); // this.formComponent.reset();
} else { } else {
this.updateErrorMessage = message; UIkit.notification(message, {
console.log('Server responded: ' + error);
}
UIkit.notification('An error has occurred. Please try again later', {
status: 'danger', status: 'danger',
timeout: 6000, timeout: 6000,
pos: 'bottom-right' pos: 'bottom-right'
}); });
console.log('Server responded: ' + error);
}
this.showLoading = false; this.showLoading = false;
} }
handleError(message: string, error) { handleError(message: string, error) {
this.errorMessage = message; UIkit.notification(message, {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
console.log('Server responded: ' + error); console.log('Server responded: ' + error);
this.showLoading = false; this.showLoading = false;
} }
getPages() { getPages() {
this.showLoading = true; this.showLoading = true;
this.errorMessage = "";
this.subscriptions.push(this._helpContentService.getAllPages(this.properties.adminToolsAPIURL).subscribe( this.subscriptions.push(this._helpContentService.getAllPages(this.properties.adminToolsAPIURL).subscribe(
pages => { pages => {
this.allPages = []; this.allPages = [];

84
dashboard/entity/entities.component.html
View File

@ -1,7 +1,7 @@
<div page-content class="admin-pages"> <div page-content class="admin-pages">
<div header> <div header>
<admin-tabs tab="entity" [portal]="portal"></admin-tabs> <admin-tabs tab="entity" [portal]="portal"></admin-tabs>
<div *ngIf="!errorMessage && !showLoading" class="uk-grid" uk-grid> <div *ngIf="!showLoading" class="uk-grid" uk-grid>
<div class="uk-width-1-1"> <div class="uk-width-1-1">
<ul *ngIf="!isPortalAdministrator" class="uk-subnav uk-subnav-pill"> <ul *ngIf="!isPortalAdministrator" class="uk-subnav uk-subnav-pill">
<li [class.uk-active]="filterForm.get('status').value === 'all'"><a <li [class.uk-active]="filterForm.get('status').value === 'all'"><a
@ -15,29 +15,11 @@
</div> </div>
<div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid uk-margin-remove-top" <div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid uk-margin-remove-top"
uk-grid> uk-grid>
<div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search entity" <div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"
placeholder="Search entity"
[selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()" [selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()"
[bordered]="true" colorClass="uk-text-secondary" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div> [bordered]="true" colorClass="uk-text-secondary"
<!--<div class="show-options"> class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
<button class="uk-button uk-button-secondary">Bulk Actions</button>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav"
[attr.uk-tooltip]="getSelectedEntities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one entity">
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="toggleEntities(true, getSelectedEntities())"><i></i>
Activate
</a></li>
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="toggleEntities(false, getSelectedEntities())"><i></i>
Deactivate
</a></li>
<li *ngIf="isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedEntities()"><i></i> Delete </a></li>
</ul>
</div>
</div>-->
<div *ngIf="isPortalAdministrator"> <div *ngIf="isPortalAdministrator">
<a (click)="newEntity()" <a (click)="newEntity()"
class="uk-flex uk-flex-middle uk-text-uppercase"> class="uk-flex uk-flex-middle uk-text-uppercase">
@ -48,20 +30,6 @@
</a> </a>
</div> </div>
</div> </div>
<!--<div *ngIf="checkboxes.length > 0" class=" uk-margin-remove-top uk-margin-small-left"
[attr.uk-tooltip]="getSelectedEntities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one entity">
<input id="checkAll" type="checkbox" (click)="selectAll()"
[ngModel]="getSelectedEntities().length ==checkboxes.length"/>
<a *ngIf="!isPortalAdministrator" class="uk-margin-left" [class.uk-disabled]="getSelectedEntities().length
== 0"
(click)="toggleEntities(true, getSelectedEntities())"><i></i> Activate </a>
<a *ngIf="!isPortalAdministrator" class="uk-margin-left" [class.uk-disabled]="getSelectedEntities().length == 0"
(click)="toggleEntities(false, getSelectedEntities())"><i></i> Deactivate </a>
<a *ngIf="isPortalAdministrator" class="uk-margin-left" [class.uk-disabled]="getSelectedEntities().length == 0"
(click)="confirmDeleteSelectedEntities()"><i></i> Delete </a>
</div>-->
</div> </div>
<div *ngIf="!showLoading && checkboxes.length > 0" <div *ngIf="!showLoading && checkboxes.length > 0"
class="uk-margin-remove-top uk-margin-small-left uk-margin-small-bottom uk-display-inline" class="uk-margin-remove-top uk-margin-small-left uk-margin-small-bottom uk-display-inline"
@ -90,37 +58,13 @@
</div> </div>
<div inner> <div inner>
<div *ngIf="showLoading" class="uk-position-center"> <div *ngIf="showLoading" class="uk-position-center">
<loading *ngIf="showLoading"></loading> <loading></loading>
</div> </div>
<div *ngIf="!showLoading"> <div *ngIf="!showLoading">
<!--<div *ngIf="!isPortalAdministrator" class="uk-alert uk-alert-primary uk-margin-top-large"> <table *ngIf="checkboxes.length > 0 " class="uk-table uk-table-striped uk-table-hover uk-table-large">
<div>
<span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
Disable an entity to hide it from community dashboard portal.
</div>
<div
class="uk-text-small">If an entity is disabled, all related search and advanced search pages will be
hidden from the community dashborad and a message "Can't find that page" will appear in case the url of that
page is loaded. If the related page belongs to the menu the link will be removed from menu, too.
</div>
</div>-->
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
<a class="uk-alert-close" uk-close></a>
{{updateErrorMessage}}
</div>
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top"
role="alert">{{errorMessage}}</div>
<div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage">
<div class="md-card-content">
<div class="uk-overflow-container">
<table class="uk-table uk-table-striped uk-table-hover uk-table-large">
<thead class="uk-card-header"> <thead class="uk-card-header">
<tr> <tr>
<th class="uk-width-small"> <th class="uk-width-small"></th>
<!--<input id="allEntityCheckbox" type="checkbox"
(change)="toggleCheckBoxes($event)">-->
</th>
<th>Name</th> <th>Name</th>
<th *ngIf="!isPortalAdministrator">Status</th> <th *ngIf="!isPortalAdministrator">Status</th>
<th *ngIf="!isPortalAdministrator">Enable/Disable</th> <th *ngIf="!isPortalAdministrator">Enable/Disable</th>
@ -155,20 +99,15 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div *ngIf="checkboxes.length ==0 "> <div *ngIf="checkboxes.length == 0"
<div class="uk-alert-warning" uk-alert>No entities found</div> class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
</div> <div>No entities found</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<modal-alert #editModal (alertOutput)="entitySaveConfirmed($event)" <modal-alert #editModal (alertOutput)="entitySaveConfirmed($event)"
[okDisabled]="entityForm && (entityForm.invalid || !entityForm.dirty)"> [okDisabled]="entityForm && (entityForm.invalid || !entityForm.dirty)">
<div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>
<form *ngIf="entityForm" [formGroup]="entityForm" class="uk-grid uk-child-width-1-1" uk-grid> <form *ngIf="entityForm" [formGroup]="entityForm" class="uk-grid uk-child-width-1-1" uk-grid>
<div dashboard-input [formInput]="entityForm.get('name')" <div dashboard-input [formInput]="entityForm.get('name')"
type="text" placeholder="Write a name" type="text" placeholder="Write a name"
@ -180,7 +119,6 @@
</div> </div>
</form> </form>
</modal-alert> </modal-alert>
<modal-alert #relatedPages (alertOutput)="continueToggling($event)"></modal-alert> <modal-alert #relatedPages (alertOutput)="continueToggling($event)"></modal-alert>
<modal-alert #deleteModal (alertOutput)="confirmedDeleteEntities($event)"></modal-alert> <modal-alert #deleteModal (alertOutput)="confirmedDeleteEntities($event)"></modal-alert>

25
dashboard/entity/entities.component.ts
View File

@ -44,9 +44,6 @@ export class EntitiesComponent implements OnInit {
public properties: EnvProperties = properties; public properties: EnvProperties = properties;
public showLoading = true; public showLoading = true;
public errorMessage = '';
public updateErrorMessage = '';
public modalErrorMessage = '';
public isPortalAdministrator = null; public isPortalAdministrator = null;
public filterForm: FormGroup; public filterForm: FormGroup;
private subscriptions: any[] = []; private subscriptions: any[] = [];
@ -98,8 +95,6 @@ export class EntitiesComponent implements OnInit {
{queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}}); {queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}});
} else { } else {
this.showLoading = true; this.showLoading = true;
this.updateErrorMessage = '';
this.errorMessage = '';
if (portal) { if (portal) {
this._helpContentService.getCommunityEntities(portal, this.properties.adminToolsAPIURL).subscribe( this._helpContentService.getCommunityEntities(portal, this.properties.adminToolsAPIURL).subscribe(
entities => { entities => {
@ -185,8 +180,6 @@ export class EntitiesComponent implements OnInit {
{queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}}); {queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}});
} else { } else {
this.showLoading = true; this.showLoading = true;
this.updateErrorMessage = '';
this._helpContentService.deleteEntities(this.selectedEntities, this.properties.adminToolsAPIURL).subscribe( this._helpContentService.deleteEntities(this.selectedEntities, this.properties.adminToolsAPIURL).subscribe(
_ => { _ => {
this.deleteEntitiesFromArray(this.selectedEntities); this.deleteEntitiesFromArray(this.selectedEntities);
@ -210,7 +203,6 @@ export class EntitiesComponent implements OnInit {
_id: this._fb.control(entity._id), _id: this._fb.control(entity._id),
pid: this._fb.control(entity.pid, Validators.required) pid: this._fb.control(entity.pid, Validators.required)
}); });
this.modalErrorMessage = '';
this.entitiesModalOpen('Edit Entity', 'Save Changes'); this.entitiesModalOpen('Edit Entity', 'Save Changes');
} }
@ -220,7 +212,6 @@ export class EntitiesComponent implements OnInit {
name: this._fb.control('', Validators.required), name: this._fb.control('', Validators.required),
pid: this._fb.control('', Validators.required) pid: this._fb.control('', Validators.required)
}); });
this.modalErrorMessage = '';
this.entitiesModalOpen('Create Entity', 'Create'); this.entitiesModalOpen('Create Entity', 'Create');
} }
@ -244,7 +235,6 @@ export class EntitiesComponent implements OnInit {
this._router.navigate(['/user-info'], this._router.navigate(['/user-info'],
{queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}}); {queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}});
} else { } else {
this.modalErrorMessage = '';
if (this.entityForm.value._id) { if (this.entityForm.value._id) {
this._helpContentService.updateEntity( this._helpContentService.updateEntity(
<Entity>this.entityForm.value, this.properties.adminToolsAPIURL).subscribe( <Entity>this.entityForm.value, this.properties.adminToolsAPIURL).subscribe(
@ -308,9 +298,12 @@ export class EntitiesComponent implements OnInit {
} }
handleError(message: string, error) { handleError(message: string, error) {
this.errorMessage = message; UIkit.notification(message, {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
console.log('Server responded: ' + error); console.log('Server responded: ' + error);
this.showLoading = false; this.showLoading = false;
} }
@ -323,14 +316,13 @@ export class EntitiesComponent implements OnInit {
_id: '' _id: ''
}); });
} else { } else {
this.updateErrorMessage = message; UIkit.notification(message, {
console.log('Server responded: ' + error);
}
UIkit.notification('An error has occurred. Please try again later', {
status: 'danger', status: 'danger',
timeout: 6000, timeout: 6000,
pos: 'bottom-right' pos: 'bottom-right'
}); });
console.log('Server responded: ' + error);
}
this.showLoading = false; this.showLoading = false;
} }
@ -364,7 +356,6 @@ export class EntitiesComponent implements OnInit {
this._router.navigate(['/user-info'], this._router.navigate(['/user-info'],
{queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}}); {queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}});
} else { } else {
this.updateErrorMessage = '';
this._helpContentService.toggleEntities( this._helpContentService.toggleEntities(
this.portal, this.toggleIds, this.toggleStatus, this.properties.adminToolsAPIURL).subscribe( this.portal, this.toggleIds, this.toggleStatus, this.properties.adminToolsAPIURL).subscribe(
() => { () => {

14
dashboard/helpTexts/page-help-content-form.component.html
View File

@ -27,18 +27,14 @@
class="uk-button uk-button-secondary outlined uk-margin-small-right">Reset class="uk-button uk-button-secondary outlined uk-margin-small-right">Reset
</button> </button>
<button (click)="saveCustom()" class="uk-button uk-button-secondary uk-margin-small-right" <button (click)="saveCustom()" class="uk-button uk-button-secondary uk-margin-small-right"
[disabled]="showLoading || !myForm.dirty || !myForm.valid ">Save [disabled]="showLoading || !myForm.dirty || myForm.invalid ">Save
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div class="uk-card uk-card-default uk-position-relative " style="min-height: 60vh"> <div class="uk-card uk-card-default uk-position-relative " style="min-height: 60vh">
<div style="max-height: 60vh" class="uk-padding-large uk-overflow-auto"> <div style="max-height: 60vh" class="uk-padding-large uk-overflow-auto">
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
<div class="uk-animation-fade uk-width-1-1" role="alert"> <div class="uk-animation-fade uk-width-1-1" role="alert">
<div *ngIf="updateErrorMessage" class="uk-alert uk-alert-danger" role="alert">{{updateErrorMessage}}</div>
<div *ngIf="showLoading" class="uk-position-center"> <div *ngIf="showLoading" class="uk-position-center">
<loading *ngIf="showLoading"></loading> <loading *ngIf="showLoading"></loading>
</div> </div>
@ -57,17 +53,15 @@
</div> </div>
<div class="form-group uk-margin-top"> <div class="form-group uk-margin-top">
<span class="uk-text-bold uk-margin-small-right">Select Status (Enable/ disable)</span> <div class="uk-text-bold uk-margin-medium-bottom">Select Status (Enable/ disable)</div>
<mat-slide-toggle [checked]="myForm.get('isActive').value" <mat-slide-toggle [checked]="myForm.get('isActive').value"
(change)="changeStatus()" (change)="changeStatus()"
uk-tooltip="title:<div class='uk-padding-small uk-width-large'><div class='uk-text-bold '> Enable or disable help text to show or hide it from the dashboard</div></div>" uk-tooltip="title:<div class='uk-padding-small uk-width-large'><div class='uk-text-bold '> Enable or disable help text to show or hide it from the dashboard</div></div>"
></mat-slide-toggle> ></mat-slide-toggle>
</div> </div>
<div class="form-group uk-margin-large-top" <div class="form-group uk-margin-medium-top"
[ngClass]="{'has-error':!myForm.controls.content.valid && [ngClass]="{'has-error':!myForm.controls.content.valid &&
myForm.controls.content.dirty}" myForm.controls.content.dirty}">
>
<label class="uk-text-bold">Content</label> <label class="uk-text-bold">Content</label>
<div class="uk-margin-top"> <div class="uk-margin-top">
<ckeditor (change)="contentChanged()" <ckeditor (change)="contentChanged()"

31
dashboard/helpTexts/page-help-content-form.component.ts
View File

@ -13,6 +13,8 @@ import {HelperFunctions} from '../../utils/HelperFunctions.class';
import {PageHelpContent} from '../../utils/entities/adminTool/page-help-content'; import {PageHelpContent} from '../../utils/entities/adminTool/page-help-content';
import {ConnectHelper} from "../../connect/connectHelper"; import {ConnectHelper} from "../../connect/connectHelper";
declare var UIkit;
@Component({ @Component({
selector: 'page-content-form', selector: 'page-content-form',
templateUrl: './page-help-content-form.component.html', templateUrl: './page-help-content-form.component.html',
@ -28,14 +30,9 @@ export class PageContentFormComponent implements OnInit {
orderOptions = []; orderOptions = [];
private availablePages: Page[] = []; private availablePages: Page[] = [];
//private errorMessage: string;
private ckeditorContent: string; private ckeditorContent: string;
public properties: EnvProperties = null; public properties: EnvProperties = null;
public showLoading: boolean = true; public showLoading: boolean = true;
public errorMessage: string = '';
@Input() updateErrorMessage: string = '';
private subs: Subscription[] = []; private subs: Subscription[] = [];
public pageHelpContent: PageHelpContent; public pageHelpContent: PageHelpContent;
@ -157,8 +154,6 @@ export class PageContentFormComponent implements OnInit {
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} }); this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else { } else {
this.showLoading = true; this.showLoading = true;
this.errorMessage = "";
this.updateErrorMessage = "";
this.subs.push(this._helpContentService.getPageHelpContent(pageContentId as string, this.properties.adminToolsAPIURL, this.communityPid).subscribe( this.subs.push(this._helpContentService.getPageHelpContent(pageContentId as string, this.properties.adminToolsAPIURL, this.communityPid).subscribe(
pageHelpContent => { pageHelpContent => {
@ -244,7 +239,11 @@ export class PageContentFormComponent implements OnInit {
} }
handleError(message: string, error) { handleError(message: string, error) {
this.errorMessage = message; UIkit.notification(message, {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
console.error('Server responded: ' + error); console.error('Server responded: ' + error);
this.showLoading = false; this.showLoading = false;
@ -259,16 +258,18 @@ export class PageContentFormComponent implements OnInit {
} }
}); });
} else { } else {
//this.errorMessage = null;
if (this.myForm.valid) { if (this.myForm.valid) {
this.showLoading = true; this.showLoading = true;
this.updateErrorMessage = "";
this.myForm.get('order').enable(); this.myForm.get('order').enable();
this.myForm.get('placement').enable(); this.myForm.get('placement').enable();
let pageHelpContent: PageHelpContent = this.myForm.value; let pageHelpContent: PageHelpContent = this.myForm.value;
this.subs.push(this._helpContentService.savePageHelpContent(pageHelpContent, this.properties.adminToolsAPIURL, this.portal).subscribe( this.subs.push(this._helpContentService.savePageHelpContent(pageHelpContent, this.properties.adminToolsAPIURL, this.portal).subscribe(
_ => { _ => {
UIkit.notification('Page content has been <b>successfully ' + (this.pageContentId?'updated':'created') + '</b>', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
this._router.navigate(['../'], {queryParams: {"pageId": this.pageId}, relativeTo: this.route}); this._router.navigate(['../'], {queryParams: {"pageId": this.pageId}, relativeTo: this.route});
this.showLoading = false; this.showLoading = false;
}, },
@ -276,7 +277,6 @@ export class PageContentFormComponent implements OnInit {
)); ));
} else { } else {
this.showLoading = false; this.showLoading = false;
this.errorMessage = "Please fill all required fields";
} }
} }
} }
@ -292,8 +292,11 @@ export class PageContentFormComponent implements OnInit {
} }
handleUpdateError(message: string, error) { handleUpdateError(message: string, error) {
UIkit.notification(message, {
this.updateErrorMessage = message; status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
console.error('Server responded: ' + error); console.error('Server responded: ' + error);
this.showLoading = false; this.showLoading = false;

45
dashboard/helpTexts/page-help-contents.component.html
View File

@ -1,9 +1,5 @@
<div page-content> <div page-content>
<div header> <div header>
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
<a class="uk-alert-close" uk-close></a>
{{updateErrorMessage}}
</div>
<div class="uk-text-bold"> <div class="uk-text-bold">
<span *ngIf="selectedPageId && page">{{page.name}}</span> <span *ngIf="selectedPageId && page">{{page.name}}</span>
</div> </div>
@ -20,7 +16,8 @@
<div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid> <div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
<div #searchInputComponent search-input [control]="filterForm" [showSearch]="false" placeholder="Search helptext" <div #searchInputComponent search-input [control]="filterForm" [showSearch]="false" placeholder="Search helptext"
[selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()" [selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()"
[bordered]="true" colorClass="uk-text-secondary" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div> [bordered]="true" colorClass="uk-text-secondary"
class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
<div> <div>
<a (click)="newPageContent()" <a (click)="newPageContent()"
class="uk-flex uk-flex-middle uk-text-uppercase"> class="uk-flex uk-flex-middle uk-text-uppercase">
@ -56,25 +53,12 @@
</div> </div>
</div> </div>
</div> </div>
<div inner> <div inner>
<div class="content-wrapper" id="contentWrapper"> <div class="content-wrapper" id="contentWrapper">
<div> <div>
<div class="contentPanel"> <div class="contentPanel">
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top" <div *ngIf="!showLoading">
role="alert">{{errorMessage}}</div> <ul *ngIf="checkboxes.length > 0" class="uk-list pages">
<div *ngIf="showLoading" class="uk-position-center">
<loading *ngIf="showLoading"></loading>
</div>
<div *ngIf="!errorMessage && !showLoading">
<div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading">
<div class="md-card-content">
<div class="uk-overflow-container">
<div class="uk-overflow-container">
<ul class="uk-list pages">
<li *ngFor="let check of checkboxes; let i=index" class="uk-card uk-card-default uk-margin-bottom"> <li *ngFor="let check of checkboxes; let i=index" class="uk-card uk-card-default uk-margin-bottom">
<div class="uk-grid uk-grid-divider uk-padding" uk-grid> <div class="uk-grid uk-grid-divider uk-padding" uk-grid>
<div class="uk-width-4-5 uk-first-column "> <div class="uk-width-4-5 uk-first-column ">
@ -83,7 +67,7 @@
name="entitiescb[]" value="{{check.pageHelpContent._id}}" [(ngModel)]="check.checked"> name="entitiescb[]" value="{{check.pageHelpContent._id}}" [(ngModel)]="check.checked">
</div> </div>
<div class="uk-width-expand uk-margin-medium-bottom"> <div class="uk-width-expand uk-margin-medium-bottom">
<div *ngIf="!selectedPageId" > <div *ngIf="!selectedPageId">
<div class="page" href="#">{{check.pageHelpContent.page.name}}</div> <div class="page" href="#">{{check.pageHelpContent.page.name}}</div>
</div> </div>
<div class="content multi-line-ellipsis lines-2"> <div class="content multi-line-ellipsis lines-2">
@ -111,14 +95,16 @@
<div class=" uk-flex-center uk-flex"> <div class=" uk-flex-center uk-flex">
<div class="actions" href="#"> <div class="actions" href="#">
<div class="" (click)="editPageHelpContent(check.pageHelpContent._id)" class="uk-button action uk-margin-top uk-flex uk-flex-middle "> <div class="" (click)="editPageHelpContent(check.pageHelpContent._id)"
class="uk-button action uk-margin-top uk-flex uk-flex-middle ">
<i class="clickable" uk-icon="pencil" <i class="clickable" uk-icon="pencil"
></i> ></i>
<span class="uk-margin-small-left"> <span class="uk-margin-small-left">
Edit Edit
</span> </span>
</div> </div>
<div (click)="confirmDeletePageHelpContent(check.pageHelpContent._id)" class="uk-button action uk-margin-top uk-flex uk-flex-middle "> <div (click)="confirmDeletePageHelpContent(check.pageHelpContent._id)"
class="uk-button action uk-margin-top uk-flex uk-flex-middle ">
<i class="clickable " uk-icon="trash" <i class="clickable " uk-icon="trash"
></i> ></i>
<span class="uk-margin-small-left"> <span class="uk-margin-small-left">
@ -131,18 +117,13 @@
</div> </div>
</li> </li>
</ul> </ul>
</div> <div *ngIf="checkboxes.length == 0" class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
<div *ngIf="checkboxes.length==0" class="col-md-12"> <div>No page contents found</div>
<div class="uk-alert-warning" uk-alert>No page contents found</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <modal-alert #AlertModalDeletePageHelpContents (alertOutput)="confirmedDeletePageHelpContents($event)"></modal-alert>
</div>
<modal-alert #AlertModalDeletePageHelpContents (alertOutput)="confirmedDeletePageHelpContents($event)"></modal-alert>

84
dashboard/helpTexts/page-help-contents.component.ts
View File

@ -19,45 +19,30 @@ import {DomSanitizer} from '@angular/platform-browser';
import {SearchInputComponent} from '../../sharedComponents/search-input/search-input.component'; import {SearchInputComponent} from '../../sharedComponents/search-input/search-input.component';
import {ConnectHelper} from '../../connect/connectHelper'; import {ConnectHelper} from '../../connect/connectHelper';
declare var UIkit;
@Component({ @Component({
selector: 'page-help-contents', selector: 'page-help-contents',
templateUrl: './page-help-contents.component.html', templateUrl: './page-help-contents.component.html',
}) })
export class PageHelpContentsComponent implements OnInit { export class PageHelpContentsComponent implements OnInit {
@ViewChild('AlertModalDeletePageHelpContents') alertModalDeletePageHelpContents; @ViewChild('AlertModalDeletePageHelpContents') alertModalDeletePageHelpContents;
private selectedPageContents: string[] = []; private selectedPageContents: string[] = [];
public checkboxes: CheckPageHelpContent[] = []; public checkboxes: CheckPageHelpContent[] = [];
public pageHelpContents: PageHelpContent[] = []; public pageHelpContents: PageHelpContent[] = [];
public formGroup: FormGroup; public formGroup: FormGroup;
public pages: Page[]; public pages: Page[];
public checkboxAll: boolean = false; public checkboxAll: boolean = false;
public filters: PageHelpContentFilterOptions = {id: '', active: null, text: new RegExp('')}; public filters: PageHelpContentFilterOptions = {id: '', active: null, text: new RegExp('')};
public keyword: string = ""; public keyword: string = "";
public counter = {all: 0, active: 0, inactive: 0}; public counter = {all: 0, active: 0, inactive: 0};
public communities: Portal[] = []; public communities: Portal[] = [];
public portal: string; public portal: string;
public selectedPageId: string; public selectedPageId: string;
public community: Portal; public community: Portal;
public page: Page; public page: Page;
public properties: EnvProperties = null; public properties: EnvProperties = properties;
public showLoading: boolean = true; public showLoading: boolean = true;
public errorMessage: string = '';
public updateErrorMessage: string = '';
public filterForm: FormControl; public filterForm: FormControl;
public selectForm: FormControl; public selectForm: FormControl;
public selectOptions = []; public selectOptions = [];
@ -74,8 +59,6 @@ export class PageHelpContentsComponent implements OnInit {
this.subscriptions.push(this.selectForm.valueChanges.subscribe(value => { this.subscriptions.push(this.selectForm.valueChanges.subscribe(value => {
this.filterByPage(value); this.filterByPage(value);
})); }));
this.properties = properties;
this.subscriptions.push(this.route.params.subscribe(params => { this.subscriptions.push(this.route.params.subscribe(params => {
this.portal = (this.route.snapshot.data.portal) ? this.route.snapshot.data.portal : this.route.snapshot.params[this.route.snapshot.data.param]; this.portal = (this.route.snapshot.data.portal) ? this.route.snapshot.data.portal : this.route.snapshot.params[this.route.snapshot.data.param];
ConnectHelper.setPortalTypeFromPid(this.portal); ConnectHelper.setPortalTypeFromPid(this.portal);
@ -85,8 +68,8 @@ export class PageHelpContentsComponent implements OnInit {
if (this.portal && this.selectedPageId) { if (this.portal && this.selectedPageId) {
this.getPage(this.selectedPageId); this.getPage(this.selectedPageId);
} }
if(!this.selectedPageId) { if (!this.selectedPageId) {
this.router.navigate(['../pages'], {relativeTo: this.route }); this.router.navigate(['../pages'], {relativeTo: this.route});
} }
})); }));
})); }));
@ -94,6 +77,7 @@ export class PageHelpContentsComponent implements OnInit {
constructor(private element: ElementRef, private route: ActivatedRoute, private router: Router, private _helpService: HelpContentService, private _fb: FormBuilder, private sanitizer: DomSanitizer) { constructor(private element: ElementRef, private route: ActivatedRoute, private router: Router, private _helpService: HelpContentService, private _fb: FormBuilder, private sanitizer: DomSanitizer) {
} }
ngOnDestroy(): void { ngOnDestroy(): void {
this.subscriptions.forEach(value => { this.subscriptions.forEach(value => {
if (value instanceof Subscriber) { if (value instanceof Subscriber) {
@ -103,9 +87,7 @@ export class PageHelpContentsComponent implements OnInit {
} }
}); });
} }
init(){
}
getPage(pageId: string) { getPage(pageId: string) {
if (!Session.isLoggedIn()) { if (!Session.isLoggedIn()) {
this.router.navigate(['/user-info'], { this.router.navigate(['/user-info'], {
@ -116,12 +98,10 @@ export class PageHelpContentsComponent implements OnInit {
}); });
} else { } else {
this.showLoading = true; this.showLoading = true;
this.updateErrorMessage = "";
this.errorMessage = "";
this.subscriptions.push(this._helpService.getPageByPortal(pageId, this.properties.adminToolsAPIURL, this.portal).subscribe( this.subscriptions.push(this._helpService.getPageByPortal(pageId, this.properties.adminToolsAPIURL, this.portal).subscribe(
page => { page => {
if (this.properties.adminToolsPortalType != page.portalType) { if (this.properties.adminToolsPortalType != page.portalType) {
this.router.navigate(['./pageContents'], {queryParams: {"communityId": this.portal}}); this.router.navigate(['./pageContents']);
} else { } else {
this.page = page; this.page = page;
this.getPageHelpContents(this.portal); this.getPageHelpContents(this.portal);
@ -141,17 +121,14 @@ export class PageHelpContentsComponent implements OnInit {
}); });
} else { } else {
this.showLoading = true; this.showLoading = true;
this.updateErrorMessage = "";
this.errorMessage = "";
//this._helpService.getCommunityPages(community_pid, "", this.properties.adminToolsAPIURL).subscribe( //this._helpService.getCommunityPages(community_pid, "", this.properties.adminToolsAPIURL).subscribe(
this.subscriptions.push(this._helpService.getCommunityPagesWithPositions(community_pid,this.properties.adminToolsAPIURL).subscribe( this.subscriptions.push(this._helpService.getCommunityPagesWithPositions(community_pid, this.properties.adminToolsAPIURL).subscribe(
pages => { pages => {
this.pages = pages; this.pages = pages;
this.getPageHelpContents(this.portal); this.getPageHelpContents(this.portal);
this.selectOptions = [{label:'All pages', value: ''}]; this.selectOptions = [{label: 'All pages', value: ''}];
for (let page of this.pages) { for (let page of this.pages) {
this.selectOptions.push({label:page.name, value: page._id}) this.selectOptions.push({label: page.name, value: page._id})
} }
}, },
error => this.handleError('System error retrieving pages', error))); error => this.handleError('System error retrieving pages', error)));
@ -201,10 +178,6 @@ export class PageHelpContentsComponent implements OnInit {
} }
} }
// public showModal():void {
// this.modal.showModal();
// }
public toggleCheckBoxes(event) { public toggleCheckBoxes(event) {
this.checkboxes.forEach(_ => _.checked = event.target.checked); this.checkboxes.forEach(_ => _.checked = event.target.checked);
this.checkboxAll = event.target.checked; this.checkboxAll = event.target.checked;
@ -262,11 +235,14 @@ export class PageHelpContentsComponent implements OnInit {
}); });
} else { } else {
this.showLoading = true; this.showLoading = true;
this.updateErrorMessage = "";
this.subscriptions.push(this._helpService.deletePageHelpContents(this.selectedPageContents, this.properties.adminToolsAPIURL, this.portal).subscribe( this.subscriptions.push(this._helpService.deletePageHelpContents(this.selectedPageContents, this.properties.adminToolsAPIURL, this.portal).subscribe(
_ => { _ => {
this.deletePageHelpContentsFromArray(this.selectedPageContents); this.deletePageHelpContentsFromArray(this.selectedPageContents);
UIkit.notification('Page content(s) has been <b>successfully deleted</b>', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
this.showLoading = false; this.showLoading = false;
}, },
error => this.handleUpdateError('System error deleting the selected page content(s)', error) error => this.handleUpdateError('System error deleting the selected page content(s)', error)
@ -290,15 +266,13 @@ export class PageHelpContentsComponent implements OnInit {
this.router.navigate(['edit/'], { this.router.navigate(['edit/'], {
queryParams: { queryParams: {
"pageContentId": id, "pageContentId": id,
"communityId": this.portal,
"pageId": this.selectedPageId "pageId": this.selectedPageId
}, relativeTo: this.route }, relativeTo: this.route
}); });
} else { } else {
this.router.navigate(['edit/'], { this.router.navigate(['edit/'], {
queryParams: { queryParams: {
"pageContentId": id, "pageContentId": id``
"communityId": this.portal
}, relativeTo: this.route }, relativeTo: this.route
}); });
} }
@ -313,14 +287,17 @@ export class PageHelpContentsComponent implements OnInit {
} }
}); });
} else { } else {
this.updateErrorMessage = "";
this.subscriptions.push(this._helpService.togglePageHelpContents(ids, status, this.properties.adminToolsAPIURL, this.portal).subscribe( this.subscriptions.push(this._helpService.togglePageHelpContents(ids, status, this.properties.adminToolsAPIURL, this.portal).subscribe(
() => { () => {
for (let id of ids) { for (let id of ids) {
let i = this.checkboxes.findIndex(_ => _.pageHelpContent._id == id); let i = this.checkboxes.findIndex(_ => _.pageHelpContent._id == id);
this.checkboxes[i].pageHelpContent.isActive = status; this.checkboxes[i].pageHelpContent.isActive = status;
} }
UIkit.notification('Page content(s) has been <b>successfully updated</b>', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
this.countPageHelpContents(); this.countPageHelpContents();
this.applyCheck(false); this.applyCheck(false);
}, },
@ -365,7 +342,7 @@ export class PageHelpContentsComponent implements OnInit {
} }
public filterByPage(event: any) { public filterByPage(event: any) {
if(event.target && event.target.value) { if (event.target && event.target.value) {
this.filters.id = event.target.value; this.filters.id = event.target.value;
this.applyFilter(); this.applyFilter();
} }
@ -392,16 +369,22 @@ export class PageHelpContentsComponent implements OnInit {
} }
handleError(message: string, error) { handleError(message: string, error) {
this.errorMessage = message; UIkit.notification(message, {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
console.log('Server responded: ' + error); console.log('Server responded: ' + error);
this.showLoading = false; this.showLoading = false;
} }
handleUpdateError(message: string, error) { handleUpdateError(message: string, error) {
this.updateErrorMessage = message; UIkit.notification(message, {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
console.log('Server responded: ' + error); console.log('Server responded: ' + error);
this.showLoading = false; this.showLoading = false;
} }
@ -421,8 +404,9 @@ export class PageHelpContentsComponent implements OnInit {
this.selectedKeyword = null; this.selectedKeyword = null;
this.searchInputComponent.reset() this.searchInputComponent.reset()
} }
selectAll(){
let checked = !!(this.getSelectedPageHelpContents().length != this.checkboxes.length); selectAll() {
let checked = (this.getSelectedPageHelpContents().length != this.checkboxes.length);
for (let check of this.checkboxes) { for (let check of this.checkboxes) {
check.checked = checked; check.checked = checked;
} }

47
dashboard/page/pages.component.html
View File

@ -1,7 +1,7 @@
<div page-content> <div page-content>
<div header> <div header>
<admin-tabs tab="page" [portal]="portal"></admin-tabs> <admin-tabs tab="page" [portal]="portal"></admin-tabs>
<div *ngIf="!errorMessage && !showLoading" class="uk-grid" uk-grid> <div *ngIf="!showLoading" class="uk-grid" uk-grid>
<div class="uk-width-1-1"> <div class="uk-width-1-1">
<ul class="uk-subnav uk-subnav-pill"> <ul class="uk-subnav uk-subnav-pill">
<li [class.uk-active]="filterForm.get('type').value === 'all'"><a <li [class.uk-active]="filterForm.get('type').value === 'all'"><a
@ -11,11 +11,14 @@
(click)="filterForm.get('type').setValue(type.value)"><span>{{type.label}}</span></a></li> (click)="filterForm.get('type').setValue(type.value)"><span>{{type.label}}</span></a></li>
</ul> </ul>
</div> </div>
<div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid uk-margin-remove-top" <div
class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid uk-margin-remove-top"
uk-grid> uk-grid>
<div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search page" <div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"
placeholder="Search page"
[selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()" [selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()"
[bordered]="true" colorClass="uk-text-secondary" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div> [bordered]="true" colorClass="uk-text-secondary"
class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
<div *ngIf="isPortalAdministrator"> <div *ngIf="isPortalAdministrator">
<a (click)="newPage()" <a (click)="newPage()"
@ -55,20 +58,10 @@
</div> </div>
<div inner> <div inner>
<div *ngIf="showLoading" class="uk-position-center"> <div *ngIf="showLoading" class="uk-position-center">
<loading *ngIf="showLoading"></loading> <loading></loading>
</div> </div>
<div *ngIf="!showLoading"> <div *ngIf="!showLoading">
<ul *ngIf="checkboxes.length > 0" class="uk-list pages">
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
<a class="uk-alert-close" uk-close></a>
{{updateErrorMessage}}
</div>
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top"
role="alert">{{errorMessage}}</div>
<div class="uk-margin-medium-bottom" *ngIf="!errorMessage">
<div class="md-card-content">
<div class="uk-overflow-container">
<ul class="uk-list pages">
<li *ngFor="let check of checkboxes; let i=index" class="uk-card uk-card-default uk-margin-bottom"> <li *ngFor="let check of checkboxes; let i=index" class="uk-card uk-card-default uk-margin-bottom">
<div class="uk-grid uk-padding"> <div class="uk-grid uk-padding">
<div class=""><input id="{{check.page._id}}" class="checkBox" type="checkbox" <div class=""><input id="{{check.page._id}}" class="checkBox" type="checkbox"
@ -103,18 +96,14 @@
class="helpContents" class="helpContents"
[queryParams]="{pageId: check.page._id}" [queryParams]="{pageId: check.page._id}"
routerLink="../helptexts"> routerLink="../helptexts">
manage help texts Manage page contents
<span *ngIf="pageHelpContents[check.page._id]">({{pageHelpContents[check.page._id]}})</span> <span *ngIf="pageHelpContents[check.page._id]">({{pageHelpContents[check.page._id]}})</span>
</a> </a>
<span *ngIf="!(check.page.top || check.page.bottom || check.page.left || check.page.right)"
class="helpContents">
no helptexts available
</span>
</div> </div>
<div> <div>
<a *ngIf="pageWithDivIds.includes(check.page._id)" class="classHelpContents" <a *ngIf="pageWithDivIds.includes(check.page._id)"
[queryParams]="{ pageId: check.page._id}" [queryParams]="{ pageId: check.page._id}"
routerLink="../classContents">manage class contents</a> routerLink="../classContents">Manage class contents</a>
</div> </div>
</div> </div>
<div *ngIf="!isPortalAdministrator" class="uk-width-1-4"> <div *ngIf="!isPortalAdministrator" class="uk-width-1-4">
@ -128,19 +117,15 @@
</li> </li>
</ul> </ul>
<div *ngIf="checkboxes.length==0"> <div *ngIf="checkboxes.length == 0"
<div class="uk-alert-warning" uk-alert>No pages found</div> class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
</div> <div>No pages found</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<modal-alert #editModal (alertOutput)="pageSaveConfirmed($event)" <modal-alert #editModal (alertOutput)="pageSaveConfirmed($event)"
[okDisabled]="pageForm && (pageForm.invalid || !pageForm.dirty)"> [okDisabled]="pageForm && (pageForm.invalid || !pageForm.dirty)">
<div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>
<form *ngIf="pageForm" [formGroup]="pageForm" class="uk-grid uk-child-width-1-1" uk-grid> <form *ngIf="pageForm" [formGroup]="pageForm" class="uk-grid uk-child-width-1-1" uk-grid>
<div dashboard-input [formInput]="pageForm.get('route')" <div dashboard-input [formInput]="pageForm.get('route')"
type="text" label="Page route" placeholder="Write a route"> type="text" label="Page route" placeholder="Write a route">
@ -159,7 +144,7 @@
<div dashboard-input type="select" label="Portal Type" placeholder="Choose a type" <div dashboard-input type="select" label="Portal Type" placeholder="Choose a type"
[formInput]="pageForm.get('portalType')" [options]="portalUtils.portalTypes"></div> [formInput]="pageForm.get('portalType')" [options]="portalUtils.portalTypes"></div>
<div class="form-group"> <div class="form-group">
<div class="uk-form-label uk-text-bold uk-margin-small-bottom"> Select if this page have helptext at: </div> <div class="uk-form-label uk-text-bold uk-margin-small-bottom"> Select if this page have helptext at:</div>
<div class="uk-grid uk-grid-small uk-child-width-1-4" uk-grid> <div class="uk-grid uk-grid-small uk-child-width-1-4" uk-grid>
<div dashboard-input [formInput]="pageForm.get('top')" <div dashboard-input [formInput]="pageForm.get('top')"
type="checkbox" type="checkbox"

29
dashboard/page/pages.component.ts
View File

@ -47,9 +47,6 @@ export class PagesComponent implements OnInit {
public properties: EnvProperties = properties; public properties: EnvProperties = properties;
public showLoading: boolean = true; public showLoading: boolean = true;
public errorMessage: string = '';
public updateErrorMessage: string = '';
public modalErrorMessage: string = '';
public isPortalAdministrator = null; public isPortalAdministrator = null;
public filterForm: FormGroup; public filterForm: FormGroup;
public typeOptions = [{label: 'Search', value: 'search'}, { public typeOptions = [{label: 'Search', value: 'search'}, {
@ -135,8 +132,6 @@ export class PagesComponent implements OnInit {
}); });
} else { } else {
this.showLoading = true; this.showLoading = true;
this.updateErrorMessage = '';
this.errorMessage = '';
this.pageWithDivIds = []; this.pageWithDivIds = [];
let parameters = ''; let parameters = '';
if (this.pagesType) { if (this.pagesType) {
@ -270,8 +265,6 @@ export class PagesComponent implements OnInit {
}); });
} else { } else {
this.showLoading = true; this.showLoading = true;
this.updateErrorMessage = '';
this.subscriptions.push(this._helpContentService.deletePages(this.selectedPages, this.properties.adminToolsAPIURL).subscribe( this.subscriptions.push(this._helpContentService.deletePages(this.selectedPages, this.properties.adminToolsAPIURL).subscribe(
_ => { _ => {
this.deletePagesFromArray(this.selectedPages); this.deletePagesFromArray(this.selectedPages);
@ -308,7 +301,6 @@ export class PagesComponent implements OnInit {
for (let i = 0; i < page.entities.length; i++) { for (let i = 0; i < page.entities.length; i++) {
this.entitiesCtrl.push(this._fb.control(page.entities[i])); this.entitiesCtrl.push(this._fb.control(page.entities[i]));
} }
this.modalErrorMessage = '';
this.pagesModalOpen('Edit Page', 'Save changes'); this.pagesModalOpen('Edit Page', 'Save changes');
} }
@ -330,7 +322,6 @@ export class PagesComponent implements OnInit {
type: this._fb.control(this.typeOptions[0].value, Validators.required), type: this._fb.control(this.typeOptions[0].value, Validators.required),
entities: this.entitiesCtrl, entities: this.entitiesCtrl,
}); });
this.modalErrorMessage = '';
this.pagesModalOpen('Create Page', 'Create'); this.pagesModalOpen('Create Page', 'Create');
} }
@ -363,7 +354,6 @@ export class PagesComponent implements OnInit {
}); });
} else { } else {
if (!this.pageForm.value._id) { if (!this.pageForm.value._id) {
this.modalErrorMessage = '';
this.subscriptions.push(this._helpContentService.savePage(<Page>this.pageForm.value, this.properties.adminToolsAPIURL).subscribe( this.subscriptions.push(this._helpContentService.savePage(<Page>this.pageForm.value, this.properties.adminToolsAPIURL).subscribe(
page => { page => {
this.pageSavedSuccessfully(page, true); this.pageSavedSuccessfully(page, true);
@ -423,13 +413,12 @@ export class PagesComponent implements OnInit {
} }
handleError(message: string, error) { handleError(message: string, error) {
// if(error == null) { UIkit.notification(message, {
// this.formComponent.reset(); status: 'danger',
// } else { timeout: 6000,
this.errorMessage = message;// + ' (Server responded: ' + error + ')'; pos: 'bottom-right'
});
console.log('Server responded: ' + error); console.log('Server responded: ' + error);
//}
this.showLoading = false; this.showLoading = false;
} }
@ -450,14 +439,12 @@ export class PagesComponent implements OnInit {
_id: this._fb.control(''), _id: this._fb.control(''),
}); });
} else { } else {
this.updateErrorMessage = message;// + ' (Server responded: ' + error + ')'; UIkit.notification(message, {
console.log('Server responded: ' + error);
}
UIkit.notification('An error has occurred. Please try again later', {
status: 'danger', status: 'danger',
timeout: 6000, timeout: 6000,
pos: 'bottom-right' pos: 'bottom-right'
}); });
}
this.showLoading = false; this.showLoading = false;
} }
@ -486,8 +473,6 @@ export class PagesComponent implements OnInit {
} }
}); });
} else { } else {
this.updateErrorMessage = '';
this.subscriptions.push(this._helpContentService.togglePages(this.portal, ids, status, this.properties.adminToolsAPIURL).subscribe( this.subscriptions.push(this._helpContentService.togglePages(this.portal, ids, status, this.properties.adminToolsAPIURL).subscribe(
() => { () => {
for (let id of ids) { for (let id of ids) {

41
dashboard/portal/portals.component.html
View File

@ -1,7 +1,7 @@
<div page-content class="admin-pages"> <div page-content class="admin-pages">
<div header> <div header>
<admin-tabs tab="portal"></admin-tabs> <admin-tabs tab="portal"></admin-tabs>
<div *ngIf="!errorMessage && !showLoading" class="uk-grid" uk-grid> <div *ngIf="!showLoading" class="uk-grid" uk-grid>
<div class="uk-width-1-1"> <div class="uk-width-1-1">
<ul class="uk-subnav uk-subnav-pill"> <ul class="uk-subnav uk-subnav-pill">
<li [class.uk-active]="filterForm.get('type').value === 'all'" class="uk-margin-small-bottom"><a <li [class.uk-active]="filterForm.get('type').value === 'all'" class="uk-margin-small-bottom"><a
@ -14,9 +14,11 @@
</ul> </ul>
</div> </div>
<div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid> <div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
<div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search portal" <div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"
placeholder="Search portal"
[selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()" [selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()"
[bordered]="true" colorClass="uk-text-secondary" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div> [bordered]="true" colorClass="uk-text-secondary"
class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
<div class="show-options"> <div class="show-options">
<button class="uk-button uk-button-secondary">Bulk Actions</button> <button class="uk-button uk-button-secondary">Bulk Actions</button>
<div uk-dropdown="mode: click"> <div uk-dropdown="mode: click">
@ -41,17 +43,11 @@
</div> </div>
</div> </div>
<div inner> <div inner>
<loading *ngIf="showLoading" class="uk-margin-large-top"></loading> <div *ngIf="showLoading" class="uk-position-center">
<div *ngIf="!showLoading"> <loading></loading>
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
<a class="uk-alert-close" uk-close></a>
{{updateErrorMessage}}
</div> </div>
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top" <div *ngIf="!showLoading">
role="alert">{{errorMessage}}</div> <table *ngIf="checkboxes.length > 0" class="uk-table uk-table-striped uk-table-hover">
<div class=" uk-margin-medium-bottom" *ngIf="!errorMessage">
<div class="uk-overflow-container">
<table class="uk-table uk-table-striped uk-table-hover">
<thead class="uk-card-header"> <thead class="uk-card-header">
<tr> <tr>
<th><input id="allCommunityCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th> <th><input id="allCommunityCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th>
@ -83,15 +79,9 @@
</tbody> </tbody>
</table> </table>
<div *ngIf="checkboxes.length==0" class="col-md-12"> <div *ngIf="checkboxes.length == 0"
<div class="uk-alert-warning" uk-alert>No portals found</div> class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
</div> <div>No portals found</div>
<!--<div class="uk-width-1-1 uk-flex uk-flex-center ">
<div class="uk-width-small uk-button-default uk-button" (click)="newCommunity()">
<i class="" uk-icon="plus"></i>
</div>
</div>-->
</div>
</div> </div>
</div> </div>
</div> </div>
@ -99,11 +89,12 @@
<modal-alert #editModal (alertOutput)="portalSaveConfirmed($event)" <modal-alert #editModal (alertOutput)="portalSaveConfirmed($event)"
[okDisabled]="portalForm && (portalForm.invalid || !portalForm.dirty)"> [okDisabled]="portalForm && (portalForm.invalid || !portalForm.dirty)">
<div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>
<form *ngIf="portalForm" [formGroup]="portalForm" class="uk-grid uk-child-width-1-1" uk-grid> <form *ngIf="portalForm" [formGroup]="portalForm" class="uk-grid uk-child-width-1-1" uk-grid>
<div dashboard-input [formInput]="portalForm.get('name')" type="text" label="Portal Name" placeholder="Write a name"> <div dashboard-input [formInput]="portalForm.get('name')" type="text" label="Portal Name"
placeholder="Write a name">
</div> </div>
<div dashboard-input type="select" label="Portal Type" placeholder="Choose a type" [formInput]="portalForm.get('type')" [options]="portalUtils.portalTypes"></div> <div dashboard-input type="select" label="Portal Type" placeholder="Choose a type"
[formInput]="portalForm.get('type')" [options]="portalUtils.portalTypes"></div>
<div dashboard-input [formInput]="portalForm.get('pid')" <div dashboard-input [formInput]="portalForm.get('pid')"
type="text" placeholder="Write pid of portal" type="text" placeholder="Write pid of portal"
label="Portal persistent id for portal"> label="Portal persistent id for portal">

25
dashboard/portal/portals.component.ts
View File

@ -40,9 +40,6 @@ export class PortalsComponent implements OnInit {
public properties: EnvProperties = null; public properties: EnvProperties = null;
public showLoading = true; public showLoading = true;
public errorMessage = '';
public updateErrorMessage = '';
public modalErrorMessage = '';
public portalUtils: PortalUtils = new PortalUtils(); public portalUtils: PortalUtils = new PortalUtils();
private index: number; private index: number;
public selectedKeyword: string; public selectedKeyword: string;
@ -89,10 +86,6 @@ export class PortalsComponent implements OnInit {
}); });
} else { } else {
this.showLoading = true; this.showLoading = true;
this.updateErrorMessage = '';
this.errorMessage = '';
this.subscriptions.push(this._helpContentService.getPortalsFull(this.properties.adminToolsAPIURL).subscribe( this.subscriptions.push(this._helpContentService.getPortalsFull(this.properties.adminToolsAPIURL).subscribe(
portals => { portals => {
this.portals = portals; this.portals = portals;
@ -164,8 +157,6 @@ export class PortalsComponent implements OnInit {
}); });
} else { } else {
this.showLoading = true; this.showLoading = true;
this.updateErrorMessage = '';
this.subscriptions.push(this._helpContentService.deleteCommunities(this.selectedPortals, this.properties.adminToolsAPIURL).subscribe( this.subscriptions.push(this._helpContentService.deleteCommunities(this.selectedPortals, this.properties.adminToolsAPIURL).subscribe(
_ => { _ => {
this.deletePortalsFromArray(this.selectedPortals); this.deletePortalsFromArray(this.selectedPortals);
@ -192,7 +183,6 @@ export class PortalsComponent implements OnInit {
type: this._fb.control(portal.type, Validators.required), type: this._fb.control(portal.type, Validators.required),
}); });
this.portalForm.get('type').disable(); this.portalForm.get('type').disable();
this.modalErrorMessage = '';
this.portalModalOpen('Edit Portal', 'Save'); this.portalModalOpen('Edit Portal', 'Save');
} }
@ -207,7 +197,6 @@ export class PortalsComponent implements OnInit {
piwik: this._fb.control(''), piwik: this._fb.control(''),
type: this._fb.control('', Validators.required), type: this._fb.control('', Validators.required),
}); });
this.modalErrorMessage = '';
this.portalModalOpen('Create Portal', 'Create'); this.portalModalOpen('Create Portal', 'Create');
} }
@ -239,7 +228,6 @@ export class PortalsComponent implements OnInit {
} }
}); });
} else { } else {
this.modalErrorMessage = '';
if (this.portalForm.value._id) { if (this.portalForm.value._id) {
this.portalForm.get('type').enable(); this.portalForm.get('type').enable();
this.subscriptions.push(this._helpContentService.updateCommunity(<Portal>this.portalForm.value, this.subscriptions.push(this._helpContentService.updateCommunity(<Portal>this.portalForm.value,
@ -313,19 +301,22 @@ export class PortalsComponent implements OnInit {
type: '' type: ''
}); });
} else { } else {
this.updateErrorMessage = message; UIkit.notification(message, {
console.log('Server responded: ' + error);
}
UIkit.notification('An error has occurred. Please try again later', {
status: 'danger', status: 'danger',
timeout: 6000, timeout: 6000,
pos: 'bottom-right' pos: 'bottom-right'
}); });
console.log('Server responded: ' + error);
}
this.showLoading = false; this.showLoading = false;
} }
handleError(message: string, error) { handleError(message: string, error) {
this.errorMessage = message; UIkit.notification(message, {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
console.log('Server responded: ' + error); console.log('Server responded: ' + error);
this.showLoading = false; this.showLoading = false;
} }

6
dashboard/users/role-users/role-users.component.html
View File

@ -31,14 +31,14 @@
</div> </div>
</div> </div>
<div inner> <div inner>
<div *ngIf="loadActive || loadPending" class="uk-margin-large-top"> <div *ngIf="loadActive || loadPending" class="uk-position-center">
<loading></loading> <loading></loading>
</div> </div>
<div *ngIf="!loadActive && !loadPending"> <div *ngIf="!loadActive && !loadPending">
<div *ngIf="(showActive && active.length == 0) || (!showActive && pending.length == 0)" <div *ngIf="(showActive && active.length == 0) || (!showActive && pending.length == 0)"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold"> class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
<div *ngIf="showActive">No {{role}}s for {{name}}</div> <div *ngIf="showActive">No {{role}}s found</div>
<div *ngIf="!showActive">No pending {{role}} invitations for {{name}}</div> <div *ngIf="!showActive">No pending {{role}} invitations found</div>
</div> </div>
<div *ngIf="(showActive && active.length > 0) || (!showActive && pending.length > 0)"> <div *ngIf="(showActive && active.length > 0) || (!showActive && pending.length > 0)">
<div class="uk-card uk-card-default uk-card-body uk-text-small uk-margin-bottom" <div class="uk-card uk-card-default uk-card-body uk-text-small uk-margin-bottom"

4
dashboard/users/subscribers/subscribers.component.html
View File

@ -24,13 +24,13 @@
</div> </div>
</div> </div>
<div inner> <div inner>
<div *ngIf="loading" class="uk-margin-large-top"> <div *ngIf="loading" class="uk-position-center">
<loading></loading> <loading></loading>
</div> </div>
<div *ngIf="!loading"> <div *ngIf="!loading">
<div *ngIf="showSubscribers.length == 0" <div *ngIf="showSubscribers.length == 0"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold"> class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
<div>No subscribers for {{name}}</div> <div>No subscribers found</div>
</div> </div>
<div *ngIf="showSubscribers.length > 0"> <div *ngIf="showSubscribers.length > 0">
<no-load-paging [type]="(subscribers.length > 1)?'subscribers':'subscriber'" <no-load-paging [type]="(subscribers.length > 1)?'subscribers':'subscriber'"