Make some page alignments in all dashboard pages

This commit is contained in:
Konstantinos Triantafyllou 2022-06-30 18:22:35 +03:00
parent 7ebf4f7f90
commit 936c870abc
14 changed files with 302 additions and 297 deletions

View File

@ -1,6 +1,6 @@
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld> <schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
<div class="uk-grid"> <div class="uk-grid">
<div class="uk-width-expand uk-position-relative" style="min-height: 60vh"> <div class="uk-width-expand uk-position-relative">
<div *ngIf="!loading"> <div *ngIf="!loading">
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper> [texts]="pageContents['top']"></helper>
@ -43,8 +43,11 @@
</div> </div>
</div> </div>
</div> </div>
<loading *ngIf="loading" class="uk-position-center"></loading> <div class="uk-section uk-section-small uk-position-relative" style="min-height: 60vh">
<div *ngIf="!loading" class="uk-section uk-section-small"> <div *ngIf="loading" class="uk-position-center">
<loading></loading>
</div>
<div *ngIf="!loading">
<div *ngIf="claims && claims.length == 0" class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold"> <div *ngIf="claims && claims.length == 0" class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
<div>No links found</div> <div>No links found</div>
</div> </div>
@ -91,6 +94,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<helper *ngIf="pageContents && pageContents['right'] && pageContents['right'].length > 0" <helper *ngIf="pageContents && pageContents['right'] && pageContents['right'].length > 0"
[texts]="pageContents['right']" class="uk-width-1-5"></helper> [texts]="pageContents['right']" class="uk-width-1-5"></helper>
</div> </div>

View File

@ -12,10 +12,6 @@
</div> </div>
</div> </div>
<div inner> <div inner>
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
<ng-container *ngIf="!showLoading">
<div class="uk-grid uk-flex-middle uk-margin-top" uk-grid> <div class="uk-grid uk-flex-middle uk-margin-top" 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">
@ -29,17 +25,26 @@
</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 search-input [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" placeholder="Search class" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div> <div search-input [disabled]="showLoading" [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" placeholder="Search class" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
<div> <div>
<button class="uk-button uk-button-default uk-flex uk-flex-middle" (click)="newDivId()"> <button class="uk-button uk-button-default uk-flex uk-flex-middle" (click)="newDivId()"
[disabled]="showLoading" [class.uk-disabled]="showLoading">
<icon name="add" [flex]="true"></icon> <icon name="add" [flex]="true"></icon>
<span class="uk-margin-small-left uk-text-bold uk-text-uppercase">Add class</span> <span class="uk-margin-small-left uk-text-bold uk-text-uppercase">Add class</span>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div class="uk-section"> <div class="uk-section uk-section-small uk-position-relative" style="min-height: 60vh">
<table *ngIf="checkboxes.length > 0"class="uk-table uk-table-striped uk-table-large"> <div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
<ng-container *ngIf="!showLoading">
<div *ngIf="checkboxes.length == 0"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
<div>No classes found</div>
</div>
<table *ngIf="checkboxes.length > 0" class="uk-table uk-table-striped uk-table-large">
<thead> <thead>
<tr class="uk-child-width-1-5"> <tr class="uk-child-width-1-5">
<th> <th>
@ -86,19 +91,17 @@
</div> </div>
</td> </td>
<td> <td>
<icon class="clickable" name="edit" [customClass]="'uk-text-primary'" (click)="editDivId(i)"></icon> <div class="uk-flex uk-flex-middle">
<icon class="clickable uk-margin-small-left" [customClass]="'uk-text-danger'" name="delete" (click)="confirmDeleteDivId(check.divId._id)"></icon> <icon class="clickable" [flex]="true" name="edit" [customClass]="'uk-text-primary'" (click)="editDivId(i)"></icon>
<icon class="clickable uk-margin-small-left" [flex]="true" [customClass]="'uk-text-danger'" name="delete" (click)="confirmDeleteDivId(check.divId._id)"></icon>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div *ngIf="checkboxes.length == 0"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
<div>No classes found</div>
</div>
</div>
</ng-container> </ng-container>
</div> </div>
</div>
</div> </div>
<modal-alert #editModal (alertOutput)="divIdSaveConfirmed($event)" <modal-alert #editModal (alertOutput)="divIdSaveConfirmed($event)"
[okDisabled]="classForm && (classForm.invalid || !classForm.dirty)" classTitle="uk-background-primary uk-light"> [okDisabled]="classForm && (classForm.invalid || !classForm.dirty)" classTitle="uk-background-primary uk-light">

View File

@ -1,6 +1,6 @@
<div page-content (stickyEmitter)="stickyPageHeader = $event"> <div page-content (stickyEmitter)="stickyPageHeader = $event">
<div header> <div header>
<div *ngIf="!showLoading" class="uk-flex uk-flex-middle uk-grid" uk-grid> <div class="uk-flex uk-flex-middle uk-grid" uk-grid>
<div class="uk-width-expand uk-flex uk-flex-middle uk-margin-top uk-margin-bottom info" <div class="uk-width-expand uk-flex uk-flex-middle uk-margin-top uk-margin-bottom info"
[class.uk-active]="stickyPageHeader"> [class.uk-active]="stickyPageHeader">
<a routerLink="../" [queryParams]=" { 'pageId': pageId }" class="uk-button uk-button-link uk-margin-right"> <a routerLink="../" [queryParams]=" { 'pageId': pageId }" class="uk-button uk-button-link uk-margin-right">
@ -10,28 +10,27 @@
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6"> <div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">
Admin Dashboard - {{pageHelpContent ? 'Update ' : 'Add new '}} class help text Admin Dashboard - {{pageHelpContent ? 'Update ' : 'Add new '}} class help text
</div> </div>
<h1 class="uk-h4 uk-margin-remove">{{page.name}}<span *ngIf="myForm.dirty" class="uk-text-large"> (unsaved changes)</span></h1> <h1 *ngIf="page" class="uk-h4 uk-margin-remove">{{page.name}}<span *ngIf="myForm.dirty" class="uk-text-large"> (unsaved changes)</span></h1>
</div> </div>
</div> </div>
<div class="uk-width-auto uk-text-right@m uk-text-center"> <div class="uk-width-auto uk-text-right@m uk-text-center">
<button class="uk-button uk-button-default uk-margin-right" <button class="uk-button uk-button-default uk-margin-right"
(click)="resetCustom()" [class.uk-disabled]="!myForm.dirty" (click)="resetCustom()" [class.uk-disabled]="!myForm.dirty"
[disabled]="!myForm.dirty">Reset [disabled]="!myForm.dirty || showLoading">Reset
</button> </button>
<button class="uk-button uk-button-primary" [class.uk-disabled]="!myForm.dirty || myForm.disabled" <button class="uk-button uk-button-primary" [class.uk-disabled]="!myForm.dirty || myForm.disabled"
(click)="saveCustom()" [disabled]="!myForm.dirty || myForm.disabled">Save (click)="saveCustom()" [disabled]="!myForm.dirty || myForm.disabled || showLoading">Save
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div inner> <div inner>
<div *ngIf="myForm" class="uk-section uk-container uk-container-small"> <div *ngIf="myForm" style="min-height: 60vh"
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div> class="uk-section uk-section-small uk-position-relative">
<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>
<form [formGroup]="myForm" [class.hidden]="showLoading"> <form *ngIf="!showLoading" [formGroup]="myForm" class="uk-container uk-container-small">
<div class="uk-width-1-2" *ngIf="classOptions.length > 0" input [formInput]="myForm.get('divId')" placeholder="Select Class" [options]="classOptions" type="select"></div> <div class="uk-width-1-2" *ngIf="classOptions.length > 0" input [formInput]="myForm.get('divId')" placeholder="Select Class" [options]="classOptions" type="select"></div>
<div class="form-group uk-margin-medium-top"> <div class="form-group uk-margin-medium-top">
<span class="uk-text-bold uk-margin-small-right">Select Status (Enable/ disable)</span> <span class="uk-text-bold uk-margin-small-right">Select Status (Enable/ disable)</span>
@ -57,7 +56,6 @@
extraPlugins: 'divarea'}"> extraPlugins: 'divarea'}">
</ckeditor> </ckeditor>
</div> </div>
</div> </div>
<input type="hidden" formControlName="_id"> <input type="hidden" formControlName="_id">
</form> </form>

View File

@ -11,6 +11,7 @@ import {properties} from '../../../../environments/environment';
import {Subscriber, Subscription, zip} from 'rxjs'; import {Subscriber, Subscription, zip} from 'rxjs';
import {HelperFunctions} from '../../utils/HelperFunctions.class'; import {HelperFunctions} from '../../utils/HelperFunctions.class';
import {DivHelpContent} from '../../utils/entities/adminTool/div-help-content'; import {DivHelpContent} from '../../utils/entities/adminTool/div-help-content';
import {NotificationHandler} from "../../utils/notification-handler";
declare var UIkit; declare var UIkit;
@ -28,8 +29,6 @@ export class ClassContentFormComponent implements OnInit {
classOptions = []; classOptions = [];
public properties: EnvProperties = properties; public properties: EnvProperties = properties;
public showLoading: boolean = true; public showLoading: boolean = true;
public errorMessage: string = '';
@Input() updateErrorMessage: string = '';
private subs: Subscription[] = []; private subs: Subscription[] = [];
public pageHelpContent: DivHelpContent; public pageHelpContent: DivHelpContent;
public stickyPageHeader: boolean = false; public stickyPageHeader: boolean = false;
@ -133,26 +132,17 @@ export class ClassContentFormComponent implements OnInit {
this.myForm.markAsPristine(); this.myForm.markAsPristine();
} }
handleError(message: string, error) { handleError(message: string, error = null) {
this.errorMessage = message; if(error) {
console.error('Server responded: ' + error); console.error('Server responded: ' + error);
}
NotificationHandler.rise(message, 'danger');
this.showLoading = false; this.showLoading = false;
} }
public saveCustom() { public saveCustom() {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: {
"errorCode": LoginErrorCodes.NOT_VALID,
"redirectUrl": this._router.url
}
});
} else {
if (this.myForm.valid) { if (this.myForm.valid) {
this.showLoading = true; this.showLoading = true;
this.updateErrorMessage = "";
this.myForm.get('divId').enable(); this.myForm.get('divId').enable();
let pageHelpContent: DivHelpContent = this.myForm.value; let pageHelpContent: DivHelpContent = this.myForm.value;
this.subs.push(this._helpContentService.insertOrUpdateDivHelpContent(pageHelpContent, this.properties.adminToolsAPIURL, this.portal).subscribe( this.subs.push(this._helpContentService.insertOrUpdateDivHelpContent(pageHelpContent, this.properties.adminToolsAPIURL, this.portal).subscribe(
@ -169,8 +159,7 @@ export class ClassContentFormComponent implements OnInit {
)); ));
} else { } else {
this.showLoading = false; this.showLoading = false;
this.errorMessage = "Please fill all required fields"; this.handleError('Please fill all required fields');
}
} }
} }
@ -181,10 +170,8 @@ export class ClassContentFormComponent implements OnInit {
} }
handleUpdateError(message: string, error) { handleUpdateError(message: string, error) {
this.updateErrorMessage = message;
console.error('Server responded: ' + error); console.error('Server responded: ' + error);
NotificationHandler.rise(message, 'danger');
this.showLoading = false; this.showLoading = false;
} }

View File

@ -1,35 +1,39 @@
<div page-content (stickyEmitter)="stickyPageHeader = $event"> <div page-content (stickyEmitter)="stickyPageHeader = $event">
<div header> <div header>
<div *ngIf="!showLoading" class="uk-flex uk-flex-middle uk-margin-top info" <div class="uk-flex uk-flex-middle uk-margin-top info"
[class.uk-active]="stickyPageHeader"> [class.uk-active]="stickyPageHeader">
<a routerLink="../pages" class="uk-button uk-button-link uk-margin-right"> <a routerLink="../pages" class="uk-button uk-button-link uk-margin-right">
<icon name="west" ratio="2" [flex]="true"></icon> <icon name="west" ratio="2" [flex]="true"></icon>
</a> </a>
<div> <div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6"> <div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">
Admin Dashboard <span *ngIf="selectedPageId && page"> - Manage class help texts</span> Admin Dashboard - Manage class help texts
</div> </div>
<h1 class="uk-h4 uk-margin-remove">{{page.name}}</h1> <h1 *ngIf="page" class="uk-h4 uk-margin-remove">{{page.name}}</h1>
</div> </div>
</div> </div>
</div> </div>
<div inner> <div inner>
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
<div *ngIf="!showLoading">
<div class="uk-margin-top uk-margin-medium-bottom uk-flex-right@m uk-flex-center uk-flex-middle uk-grid" uk-grid> <div class="uk-margin-top uk-margin-medium-bottom uk-flex-right@m uk-flex-center uk-flex-middle uk-grid" uk-grid>
<div search-input [expandable]="true" [searchControl]="filterForm" searchInputClass="outer" placeholder="Search helptext" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"> <div search-input [disabled]="showLoading" [expandable]="true" [searchControl]="filterForm" searchInputClass="outer" placeholder="Search helptext" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1">
</div> </div>
<div> <div>
<a (click)="newPageContent()" <button (click)="newPageContent()" [disabled]="showLoading" [class.uk-disabled]="showLoading"
class="uk-flex uk-flex-middle uk-button uk-button-default"> class="uk-flex uk-flex-middle uk-button uk-button-default">
<icon [flex]="true" name="add"></icon> <icon [flex]="true" name="add"></icon>
<span class="uk-margin-small-left">Add class help text</span> <span class="uk-margin-small-left">Add class help text</span>
</a> </button>
</div> </div>
</div> </div>
<div class="uk-section"> <div class="uk-section uk-section-small uk-position-relative" style="min-height: 60vh">
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
<ng-container *ngIf="!showLoading">
<div *ngIf="checkboxes.length == 0"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-text-bold">
<div>No class help texts found</div>
</div>
<div *ngIf="checkboxes.length > 0"> <div *ngIf="checkboxes.length > 0">
<div class="uk-grid uk-child-width-1-2@l uk-child-width-1-1" uk-height-match=".uk-card-body" uk-grid> <div class="uk-grid uk-child-width-1-2@l uk-child-width-1-1" uk-height-match=".uk-card-body" uk-grid>
<div *ngFor="let check of checkboxes; let i=index"> <div *ngFor="let check of checkboxes; let i=index">
@ -77,11 +81,7 @@
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="checkboxes.length == 0" </ng-container>
class="uk-card uk-card-default uk-padding-large uk-text-center uk-text-bold">
<div>No class help texts found</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -14,10 +14,6 @@
</div> </div>
</div> </div>
<div inner> <div inner>
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
<div *ngIf="!showLoading">
<div class="uk-grid uk-flex-middle uk-margin-top" uk-grid> <div class="uk-grid uk-flex-middle uk-margin-top" 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">
@ -32,16 +28,25 @@
</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 search-input [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" placeholder="Search entity" <div search-input [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" placeholder="Search entity"
class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div> [disabled]="showLoading" 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">
<button class="uk-button uk-button-default uk-flex uk-flex-middle" (click)="newEntity()"> <button class="uk-button uk-button-default uk-flex uk-flex-middle" (click)="newEntity()"
[disabled]="showLoading" [class.uk-disabled]="showLoading">
<icon name="add" [flex]="true"></icon> <icon name="add" [flex]="true"></icon>
<span class="uk-margin-small-left uk-text-bold uk-text-uppercase">Add entity</span> <span class="uk-margin-small-left uk-text-bold uk-text-uppercase">Add entity</span>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div class="uk-section"> <div class="uk-section uk-section-small uk-position-relative" style="min-height: 60vh">
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
<ng-container *ngIf="!showLoading">
<div *ngIf="checkboxes.length == 0"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-top uk-margin-bottom uk-text-bold">
<div>No entities found</div>
</div>
<table *ngIf="checkboxes.length > 0 " class="uk-table uk-table-striped uk-table-large"> <table *ngIf="checkboxes.length > 0 " class="uk-table uk-table-striped uk-table-large">
<thead> <thead>
<tr class="uk-child-width-1-3"> <tr class="uk-child-width-1-3">
@ -86,17 +91,15 @@
></mat-slide-toggle> ></mat-slide-toggle>
</td> </td>
<td *ngIf="isPortalAdministrator"> <td *ngIf="isPortalAdministrator">
<icon class="clickable" name="edit" [customClass]="'uk-text-primary'" (click)="editEntity(i)"></icon> <div class="uk-flex uk-flex-middle">
<icon class="clickable uk-margin-small-left" [customClass]="'uk-text-danger'" name="delete" (click)="confirmDeleteEntity(check.entity._id)"></icon> <icon class="clickable" [flex]="true" name="edit" [customClass]="'uk-text-primary'" (click)="editEntity(i)"></icon>
<icon class="clickable uk-margin-small-left" [flex]="true" [customClass]="'uk-text-danger'" name="delete" (click)="confirmDeleteEntity(check.entity._id)"></icon>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div *ngIf="checkboxes.length == 0" </ng-container>
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-top uk-margin-bottom uk-text-bold">
<div>No entities found</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,6 +1,6 @@
<div page-content (stickyEmitter)="stickyPageHeader = $event"> <div page-content (stickyEmitter)="stickyPageHeader = $event">
<div header> <div header>
<div *ngIf="!showLoading" class="uk-flex uk-flex-middle uk-grid" uk-grid> <div class="uk-flex uk-flex-middle uk-grid" uk-grid>
<div class="uk-width-expand uk-flex uk-flex-middle uk-margin-top uk-margin-bottom info" <div class="uk-width-expand uk-flex uk-flex-middle uk-margin-top uk-margin-bottom info"
[class.uk-active]="stickyPageHeader"> [class.uk-active]="stickyPageHeader">
<a routerLink="../" [queryParams]=" { 'pageId': pageId }" class="uk-button uk-button-link uk-margin-right"> <a routerLink="../" [queryParams]=" { 'pageId': pageId }" class="uk-button uk-button-link uk-margin-right">
@ -10,26 +10,27 @@
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6"> <div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">
Admin Dashboard - {{pageHelpContent ? 'Update ' : 'Add new '}} page help text Admin Dashboard - {{pageHelpContent ? 'Update ' : 'Add new '}} page help text
</div> </div>
<h1 class="uk-h4 uk-margin-remove">{{page.name}}<span *ngIf="myForm.dirty" class="uk-text-large"> (unsaved changes)</span></h1> <h1 *ngIf="page" class="uk-h4 uk-margin-remove">{{page.name}}<span *ngIf="myForm.dirty" class="uk-text-large"> (unsaved changes)</span></h1>
</div> </div>
</div> </div>
<div class="uk-width-auto uk-text-right@m uk-text-center"> <div class="uk-width-auto uk-text-right@m uk-text-center">
<button class="uk-button uk-button-default uk-margin-right" <button class="uk-button uk-button-default uk-margin-right"
(click)="resetCustom()" [class.uk-disabled]="!myForm.dirty" (click)="resetCustom()" [class.uk-disabled]="!myForm.dirty"
[disabled]="!myForm.dirty">Reset [disabled]="!myForm.dirty || showLoading">Reset
</button> </button>
<button class="uk-button uk-button-primary" [class.uk-disabled]="!myForm.dirty || myForm.disabled" <button class="uk-button uk-button-primary" [class.uk-disabled]="!myForm.dirty || myForm.disabled"
(click)="saveCustom()" [disabled]="!myForm.dirty || myForm.disabled">Save (click)="saveCustom()" [disabled]="!myForm.dirty || myForm.disabled || showLoading">Save
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div inner> <div inner>
<div *ngIf="myForm" class="uk-section uk-container uk-container-small"> <div *ngIf="myForm" style="min-height: 60vh"
class="uk-section uk-section-small uk-position-relative">
<div *ngIf="showLoading" class="uk-position-center"> <div *ngIf="showLoading" class="uk-position-center">
<loading *ngIf="showLoading"></loading> <loading *ngIf="showLoading"></loading>
</div> </div>
<form [formGroup]="myForm" [class.hidden]="showLoading"> <form *ngIf="!showLoading" [formGroup]="myForm" class="uk-container uk-container-small">
<div class="uk-grid uk-child-width-1-2"> <div class="uk-grid uk-child-width-1-2">
<div *ngIf="placementsOptions.length > 0" input [formInput]="myForm.get('placement')" <div *ngIf="placementsOptions.length > 0" input [formInput]="myForm.get('placement')"
placeholder="Select placement" [options]="placementsOptions" type="select"></div> placeholder="Select placement" [options]="placementsOptions" type="select"></div>

View File

@ -67,16 +67,10 @@ export class PageContentFormComponent implements OnInit {
this._router.navigate(['../'], {relativeTo: this.route}); this._router.navigate(['../'], {relativeTo: this.route});
} }
let countPageContents = results[1] ? results[1].length : 0; let countPageContents = results[1] ? results[1].length : 0;
console.log(results[1]);
for (let content of (results[1] as Array<PageHelpContent>)) { for (let content of (results[1] as Array<PageHelpContent>)) {
// if(content.page['_id'] == pageId){
// countPageContents++;
if (this.pageContentId && this.pageContentId == content._id) { if (this.pageContentId && this.pageContentId == content._id) {
this.pageHelpContent = content; this.pageHelpContent = content;
// this.pageHelpContent.page = pageId;
// this.pageHelpContent.portal = this.communityPid;
} }
// }
} }
this.setOptions(this.page, countPageContents + (this.pageHelpContent ? 0 : 1)); this.setOptions(this.page, countPageContents + (this.pageHelpContent ? 0 : 1));
if (!this.pageContentId) { if (!this.pageContentId) {

View File

@ -1,35 +1,39 @@
<div page-content (stickyEmitter)="stickyPageHeader = $event"> <div page-content (stickyEmitter)="stickyPageHeader = $event">
<div header> <div header>
<div *ngIf="!showLoading" class="uk-flex uk-flex-middle uk-margin-top info" <div class="uk-flex uk-flex-middle uk-margin-top info"
[class.uk-active]="stickyPageHeader"> [class.uk-active]="stickyPageHeader">
<a routerLink="../pages" class="uk-button uk-button-link uk-margin-right"> <a routerLink="../pages" class="uk-button uk-button-link uk-margin-right">
<icon name="west" ratio="2" [flex]="true"></icon> <icon name="west" ratio="2" [flex]="true"></icon>
</a> </a>
<div> <div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6"> <div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">
Admin Dashboard <span *ngIf="selectedPageId && page"> - Manage page help texts</span> Admin Dashboard - Manage page help texts
</div> </div>
<h1 class="uk-h4 uk-margin-remove">{{page.name}}</h1> <h1 *ngIf="page" class="uk-h4 uk-margin-remove">{{page.name}}</h1>
</div> </div>
</div> </div>
</div> </div>
<div inner> <div inner>
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
<div *ngIf="!showLoading">
<div class="uk-margin-top uk-margin-medium-bottom uk-flex-right@m uk-flex-center uk-flex-middle uk-grid" uk-grid> <div class="uk-margin-top uk-margin-medium-bottom uk-flex-right@m uk-flex-center uk-flex-middle uk-grid" uk-grid>
<div search-input [expandable]="true" [searchControl]="filterForm" searchInputClass="outer" placeholder="Search helptext" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"> <div search-input [disabled]="showLoading" [expandable]="true" [searchControl]="filterForm" searchInputClass="outer" placeholder="Search helptext" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1">
</div> </div>
<div> <div>
<a (click)="newPageContent()" <button (click)="newPageContent()" [disabled]="showLoading" [class.uk-disabled]="showLoading"
class="uk-flex uk-flex-middle uk-button uk-button-default"> class="uk-flex uk-flex-middle uk-button uk-button-default">
<icon [flex]="true" name="add"></icon> <icon [flex]="true" name="add"></icon>
<span class="uk-margin-small-left">Add page help text</span> <span class="uk-margin-small-left">Add page help text</span>
</a> </button>
</div> </div>
</div> </div>
<div class="uk-section"> <div class="uk-section uk-section-small uk-position-relative" style="min-height: 60vh">
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
<ng-container *ngIf="!showLoading">
<div *ngIf="checkboxes.length == 0"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
<div>No page help texts found</div>
</div>
<div *ngIf="checkboxes.length > 0"> <div *ngIf="checkboxes.length > 0">
<div class="uk-grid uk-child-width-1-2@l uk-child-width-1-1" uk-height-match=".uk-card-body" uk-grid> <div class="uk-grid uk-child-width-1-2@l uk-child-width-1-1" uk-height-match=".uk-card-body" uk-grid>
<div *ngFor="let check of checkboxes; let i=index"> <div *ngFor="let check of checkboxes; let i=index">
@ -80,11 +84,7 @@
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="checkboxes.length == 0" </ng-container>
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
<div>No page help texts found</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -14,10 +14,6 @@
</div> </div>
</div> </div>
<div inner> <div inner>
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
<div *ngIf="!showLoading">
<div class="uk-grid uk-flex-middle uk-margin-top" uk-grid> <div class="uk-grid uk-flex-middle uk-margin-top" 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">
@ -30,18 +26,23 @@
</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 search-input [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" <div search-input [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer"
placeholder="Search page" placeholder="Search page" [disabled]="showLoading"
class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div> 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">
<button class="uk-button uk-button-default uk-flex uk-flex-middle" (click)="newPage()"> <button class="uk-button uk-button-default uk-flex uk-flex-middle" (click)="newPage()"
[disabled]="showLoading" [class.uk-disabled]="showLoading">
<icon name="add" [flex]="true"></icon> <icon name="add" [flex]="true"></icon>
<span class="uk-margin-small-left uk-text-bold uk-text-uppercase">Add page</span> <span class="uk-margin-small-left uk-text-bold uk-text-uppercase">Add page</span>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div class="uk-section"> <div class="uk-section uk-section-small uk-position-relative" style="min-height: 60vh">
<div *ngIf="checkboxes.length > 0 && !portal" class="uk-padding uk-padding-remove-top uk-flex uk-flex-middle"> <div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
<ng-container *ngIf="!showLoading">
<div *ngIf="checkboxes.length > 0 && !portal" class="uk-flex uk-flex-middle uk-padding uk-padding-remove-top">
<label> <label>
<input id="checkAll" type="checkbox" (click)="selectAll()" class="uk-checkbox" <input id="checkAll" type="checkbox" (click)="selectAll()" class="uk-checkbox"
[ngModel]="getSelectedPages().length ==checkboxes.length"/> [ngModel]="getSelectedPages().length ==checkboxes.length"/>
@ -64,6 +65,10 @@
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="checkboxes.length == 0"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-top uk-margin-bottom uk-text-bold">
<div>No pages found</div>
</div>
<div *ngIf="checkboxes.length > 0" class="uk-grid uk-child-width-1-1" uk-height-match=".uk-card-body" uk-grid> <div *ngIf="checkboxes.length > 0" class="uk-grid uk-child-width-1-1" uk-height-match=".uk-card-body" uk-grid>
<div *ngFor="let check of checkboxes; let i=index"> <div *ngFor="let check of checkboxes; let i=index">
<div class="uk-card uk-card-default"> <div class="uk-card uk-card-default">
@ -153,11 +158,7 @@
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="checkboxes.length == 0" </ng-container>
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-top uk-margin-bottom uk-text-bold">
<div>No pages found</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -175,7 +176,7 @@
<div input placeholder="Choose a type" [formInput]="pageForm.get('portalType')" <div input placeholder="Choose a type" [formInput]="pageForm.get('portalType')"
type="select" [options]="portalUtils.portalTypes"></div> type="select" [options]="portalUtils.portalTypes"></div>
<div> <div>
<div class="uk-form-label uk-text-bold uk-margin-bottom">Select if this page have helptext at:</div> <div class="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> <div>
<label> <label>

View File

@ -12,10 +12,6 @@
</div> </div>
</div> </div>
<div inner> <div inner>
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
<ng-container *ngIf="!showLoading">
<div class="uk-grid uk-flex-middle uk-margin-top" uk-grid> <div class="uk-grid uk-flex-middle uk-margin-top" 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">
@ -30,16 +26,25 @@
</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 search-input [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" placeholder="Search portal" <div search-input [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" placeholder="Search portal"
[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> [disabled]="showLoading" 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>
<button class="uk-button uk-button-default uk-flex uk-flex-middle" (click)="newPortal()"> <button class="uk-button uk-button-default uk-flex uk-flex-middle" (click)="newPortal()"
[disabled]="showLoading" [class.uk-disabled]="showLoading">
<icon name="add" [flex]="true"></icon> <icon name="add" [flex]="true"></icon>
<span class="uk-margin-small-left uk-text-bold uk-text-uppercase">Add portal</span> <span class="uk-margin-small-left uk-text-bold uk-text-uppercase">Add portal</span>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div class="uk-section"> <div class="uk-section uk-section-small uk-position-relative" style="min-height: 60vh">
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
<ng-container *ngIf="!showLoading">
<div *ngIf="checkboxes.length == 0"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
<div>No portals found</div>
</div>
<table *ngIf="checkboxes.length > 0" class="uk-table uk-table-striped"> <table *ngIf="checkboxes.length > 0" class="uk-table uk-table-striped">
<thead> <thead>
<tr class="uk-child-width-1-4"> <tr class="uk-child-width-1-4">
@ -80,22 +85,18 @@
<div class="type" href="#">{{check.portal.type}}</div> <div class="type" href="#">{{check.portal.type}}</div>
</td> </td>
<td> <td>
<div class="actions" href="#"> <div class="uk-flex uk-flex-middle">
<icon class="clickable" name="edit" [customClass]="'uk-text-primary'" (click)="editPortal(i)"></icon> <icon class="clickable" [flex]="true" name="edit" [customClass]="'uk-text-primary'" (click)="editPortal(i)"></icon>
<icon class="clickable uk-margin-small-left" [customClass]="'uk-text-danger'" name="delete" (click)="confirmDeletePortal(check.portal._id)"></icon> <icon class="clickable uk-margin-small-left" [flex]="true" [customClass]="'uk-text-danger'" name="delete" (click)="confirmDeletePortal(check.portal._id)"></icon>
</div> </div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div *ngIf="checkboxes.length == 0"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
<div>No portals found</div>
</div>
</div>
</ng-container> </ng-container>
</div> </div>
</div>
</div> </div>
<modal-alert #editModal (alertOutput)="portalSaveConfirmed($event)" <modal-alert #editModal (alertOutput)="portalSaveConfirmed($event)"
[okDisabled]="portalForm && (portalForm.invalid || !portalForm.dirty)" classTitle="uk-background-primary uk-light"> [okDisabled]="portalForm && (portalForm.invalid || !portalForm.dirty)" classTitle="uk-background-primary uk-light">

View File

@ -36,7 +36,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="uk-section uk-section-small"> <div class="uk-section uk-section-small uk-position-relative" style="min-height: 60vh">
<div *ngIf="loadActive || loadPending" class="uk-position-center"> <div *ngIf="loadActive || loadPending" class="uk-position-center">
<loading></loading> <loading></loading>
</div> </div>
@ -73,6 +73,16 @@
</div> </div>
</div> </div>
</div> </div>
<div class="uk-margin-small-top">
<paging-no-load *ngIf="showCurrent" [currentPage]="activePage"
[totalResults]="showActive.length" [size]="pageSize"
(pageChange)="updateActivePage($event)" customClasses="uk-flex-right@m uk-flex-center">
</paging-no-load>
<paging-no-load *ngIf="!showCurrent" [currentPage]="pendingPage"
[totalResults]="showPending.length" [size]="pageSize"
(pageChange)="updatePendingPage($event)" customClasses="uk-flex-right@m uk-flex-center">
</paging-no-load>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -11,9 +11,10 @@ import {SafeHtmlPipeModule} from "../../../utils/pipes/safeHTMLPipe.module";
import {NotifyFormModule} from "../../../notifications/notify-form/notify-form.module"; import {NotifyFormModule} from "../../../notifications/notify-form/notify-form.module";
import {NoLoadPaging} from "../../../searchPages/searchUtils/no-load-paging.module"; import {NoLoadPaging} from "../../../searchPages/searchUtils/no-load-paging.module";
import {SearchInputModule} from "../../../sharedComponents/search-input/search-input.module"; import {SearchInputModule} from "../../../sharedComponents/search-input/search-input.module";
import {PagingModule} from "../../../utils/paging.module";
@NgModule({ @NgModule({
imports: [CommonModule, AlertModalModule, ReactiveFormsModule, LoadingModule, IconsModule, InputModule, PageContentModule, SafeHtmlPipeModule, NotifyFormModule, NoLoadPaging, SearchInputModule], imports: [CommonModule, AlertModalModule, ReactiveFormsModule, LoadingModule, IconsModule, InputModule, PageContentModule, SafeHtmlPipeModule, NotifyFormModule, NoLoadPaging, SearchInputModule, PagingModule],
declarations: [RoleUsersComponent], declarations: [RoleUsersComponent],
exports: [RoleUsersComponent] exports: [RoleUsersComponent]
}) })

View File

@ -22,10 +22,11 @@
</button> </button>
</div> </div>
</div> </div>
<div class="uk-section uk-section-small uk-position-relative" style="min-height: 60vh">
<div *ngIf="loading" class="uk-position-center"> <div *ngIf="loading" class="uk-position-center">
<loading></loading> <loading></loading>
</div> </div>
<div *ngIf="!loading" class="uk-section uk-section-small"> <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 members found</div> <div>No members found</div>
@ -52,8 +53,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="uk-flex uk-flex-right uk-margin-small-top"> <div class="uk-margin-small-top">
<paging-no-load [currentPage]="page" <paging-no-load [currentPage]="page" customClasses="uk-flex-right@m uk-flex-center"
[totalResults]="subscribers.length" [size]="pageSize" [totalResults]="subscribers.length" [size]="pageSize"
(pageChange)="updatePage($event)"> (pageChange)="updatePage($event)">
</paging-no-load> </paging-no-load>
@ -61,6 +62,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
<modal-alert *ngIf="user" #inviteModal (alertOutput)="subscriberInvite.invite()" [okDisabled]="!subscriberInvite.valid" <modal-alert *ngIf="user" #inviteModal (alertOutput)="subscriberInvite.invite()" [okDisabled]="!subscriberInvite.valid"
[large]="true" classTitle="uk-background-primary uk-light"> [large]="true" classTitle="uk-background-primary uk-light">