[Library|Trunk]
update UI for pages, entities, helptexts - new mocks git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60507 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki
parent
9737b45f07
commit
6335da03c5
|
|
@ -161,7 +161,6 @@ export class DisplayClaimsComponent {
|
|||
this.changekeyword();
|
||||
}));
|
||||
this.subscriptions.push(this.filterForm.get('sort').valueChanges.subscribe(value => {
|
||||
console.log(value);
|
||||
this.goTo();
|
||||
}));
|
||||
}));
|
||||
|
|
@ -192,7 +191,6 @@ export class DisplayClaimsComponent {
|
|||
for (let type of this.entitiesCtrl.getRawValue()) {
|
||||
types += (this.entitiesCtrl.getRawValue().length > 0 ? '&' : '') + "types=" + type.id;
|
||||
}
|
||||
console.log( this.fetchBy, this.fetchId)
|
||||
this.pageLoading = true;
|
||||
if (this.fetchBy == "Project") {
|
||||
this.subscriptions.push(this._claimService.getClaimsByProject(this.size, this.page, this.fetchId, this.keyword, this.filterForm.get("sort").value.sort, this.filterForm.get("sort").value.descending, types, this.properties.claimsAPIURL).subscribe(
|
||||
|
|
|
|||
|
|
@ -13,11 +13,12 @@
|
|||
(click)="filterForm.get('status').setValue('disabled')"><span class="title">Disabled</span></a></li>
|
||||
</ul>
|
||||
</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-margin-remove-top"
|
||||
uk-grid>
|
||||
<div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search entity"
|
||||
[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>
|
||||
<div class="show-options">
|
||||
<!--<div class="show-options">
|
||||
<button class="uk-button uk-button-secondary">Bulk Actions</button>
|
||||
<div uk-dropdown="mode: click">
|
||||
<ul class="uk-nav uk-dropdown-nav"
|
||||
|
|
@ -35,7 +36,8 @@
|
|||
(click)="confirmDeleteSelectedEntities()"><i></i> Delete </a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<div *ngIf="isPortalAdministrator">
|
||||
<a (click)="newEntity()"
|
||||
class="uk-flex uk-flex-middle uk-text-uppercase">
|
||||
|
|
@ -46,12 +48,52 @@
|
|||
</a>
|
||||
</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 help text">
|
||||
<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 *ngIf="checkboxes.length > 0"
|
||||
class="uk-margin-remove-top uk-margin-small-left uk-margin-small-bottom"
|
||||
[attr.uk-tooltip]="getSelectedEntities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="Select at least one help text"><input id="checkAll" type="checkbox" (click)="selectAll()"
|
||||
[ngModel]="getSelectedEntities().length ==checkboxes.length"/>
|
||||
<span *ngIf="getSelectedEntities().length > 0" class="uk-margin-left uk-text-muted">
|
||||
{{getSelectedEntities().length}} entities selected </span>
|
||||
<a class="uk-margin-left ">Actions </a>
|
||||
<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 help text">
|
||||
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
|
||||
(click)="toggleEntities(true,getSelectedEntities())"><i></i> Enable
|
||||
</a></li>
|
||||
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
|
||||
(click)="toggleEntities(false,getSelectedEntities())"><i></i> Disable
|
||||
</a>
|
||||
</li>
|
||||
<li *ngIf="isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
|
||||
(click)="confirmDeleteSelectedEntities()"><i></i> Delete </a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div inner>
|
||||
<loading *ngIf="showLoading" class="uk-margin-large-top"></loading>
|
||||
<div *ngIf="showLoading" class="uk-position-center">
|
||||
<loading *ngIf="showLoading"></loading>
|
||||
</div>
|
||||
<div *ngIf="!showLoading">
|
||||
<div *ngIf="!isPortalAdministrator" class="uk-alert uk-alert-primary uk-margin-top-large">
|
||||
<!--<div *ngIf="!isPortalAdministrator" class="uk-alert uk-alert-primary uk-margin-top-large">
|
||||
<div>
|
||||
<span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
|
||||
Disable an entity to hide it from community dashboard portal.
|
||||
|
|
@ -62,7 +104,7 @@
|
|||
page is loaded. If the related page belongs to the menu the link will be removed from menu, too.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>-->
|
||||
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
|
||||
<a class="uk-alert-close" uk-close></a>
|
||||
{{updateErrorMessage}}
|
||||
|
|
@ -75,9 +117,10 @@
|
|||
<table class="uk-table uk-table-striped uk-table-hover uk-table-large">
|
||||
<thead class="uk-card-header">
|
||||
<tr>
|
||||
<th
|
||||
class="uk-width-small"><input id="allEntityCheckbox" type="checkbox"
|
||||
(change)="toggleCheckBoxes($event)"></th>
|
||||
<th class="uk-width-small">
|
||||
<!--<input id="allEntityCheckbox" type="checkbox"
|
||||
(change)="toggleCheckBoxes($event)">-->
|
||||
</th>
|
||||
<th>Name</th>
|
||||
<th *ngIf="!isPortalAdministrator">Status</th>
|
||||
<th *ngIf="!isPortalAdministrator">Enable/Disable</th>
|
||||
|
|
@ -97,7 +140,9 @@
|
|||
</td>
|
||||
<td *ngIf="!isPortalAdministrator">
|
||||
<mat-slide-toggle [checked]="check.entity.isEnabled"
|
||||
(change)="($event.source.checked = check.entity.isEnabled);toggleEntities(!check.entity.isEnabled,[check.entity._id])"></mat-slide-toggle>
|
||||
(change)="($event.source.checked = check.entity.isEnabled);toggleEntities(!check.entity.isEnabled,[check.entity._id])"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'><div class='uk-text-bold '>Disable an entity to hide it from community dashboard portal.</div><div class=' uk-margin-top'>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>"
|
||||
></mat-slide-toggle>
|
||||
</td>
|
||||
|
||||
<td *ngIf="isPortalAdministrator">
|
||||
|
|
|
|||
|
|
@ -389,4 +389,11 @@ export class EntitiesComponent implements OnInit {
|
|||
this.selectedKeyword = null;
|
||||
this.searchInputComponent.reset()
|
||||
}
|
||||
|
||||
selectAll(){
|
||||
let checked = !!(this.getSelectedEntities().length != this.checkboxes.length);
|
||||
for (let check of this.checkboxes) {
|
||||
check.checked = checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {EditPageHelpContentComponent} from "./edit-page-help-content.component";
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild([
|
||||
{ path: '', component: EditPageHelpContentComponent}
|
||||
])
|
||||
]
|
||||
})
|
||||
export class EditPageHelpContentRoutingModule { }
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<div id="page_content">
|
||||
<div id="page_content_inner">
|
||||
|
||||
<div id="editPageHelpContent" class="uk-card uk-card-default uk-padding">
|
||||
<div id="content">
|
||||
<div class="menubar fixed">
|
||||
<div class="sidebar-toggler visible-xs">
|
||||
<i class="ion-navicon"></i>
|
||||
</div>
|
||||
<h4 class="uk-text-bold">
|
||||
<span>Edit help text <span
|
||||
*ngIf="page && page.name">of page "{{page.name}}"</span></span>
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div class="content-wrapper">
|
||||
|
||||
<div>
|
||||
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
|
||||
<div [style.display]="showLoading ? 'inline' : 'none'" class="uk-animation-fade uk-width-1-1" role="alert">
|
||||
<img class="uk-align-center loading-gif"></div>
|
||||
|
||||
<page-content-form [communityPid]="communityPid" [pageId]="pageId" [page]="page"
|
||||
[updateErrorMessage]="updateErrorMessage"></page-content-form>
|
||||
<button (click)="saveCustom()" class="uk-button uk-button-primary">Update help text</button>
|
||||
<button (click)="cancelCustom()" class="uk-button">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,165 +0,0 @@
|
|||
import { Component, ViewChild, OnInit, OnDestroy, ElementRef } from '@angular/core';
|
||||
import { PageContentFormComponent } from "./page-help-content-form.component";
|
||||
import {Subscriber, Subscription} from "rxjs";
|
||||
import { HelpContentService } from "../../services/help-content.service";
|
||||
import { PageHelpContent } from "../../utils/entities/adminTool/page-help-content";
|
||||
import { ActivatedRoute, Router } from "@angular/router";
|
||||
import { EnvProperties } from '../../utils/properties/env-properties';
|
||||
|
||||
import {Session} from '../../login/utils/helper.class';
|
||||
import {LoginErrorCodes} from '../../login/utils/guardHelper.class';
|
||||
import {HelperFunctions} from "../../utils/HelperFunctions.class";
|
||||
import {Page} from "../../utils/entities/adminTool/page";
|
||||
import {properties} from "../../../../environments/environment";
|
||||
|
||||
@Component({
|
||||
selector: 'edit-page-help-content',
|
||||
templateUrl: 'edit-page-help-content.component.html',
|
||||
})
|
||||
|
||||
export class EditPageHelpContentComponent implements OnInit, OnDestroy{
|
||||
|
||||
@ViewChild(PageContentFormComponent)
|
||||
public formComponent : PageContentFormComponent;
|
||||
|
||||
public communityPid: string;
|
||||
|
||||
public pageId: string;
|
||||
public page: Page;
|
||||
|
||||
private subs: Subscription[]=[];
|
||||
|
||||
private pageHelpContent: PageHelpContent;
|
||||
|
||||
//private errorMessage : string = null;
|
||||
public properties:EnvProperties = null;
|
||||
|
||||
public showLoading: boolean = true;
|
||||
public errorMessage: string = '';
|
||||
public updateErrorMessage: string = '';
|
||||
|
||||
constructor(
|
||||
private element: ElementRef,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private _helpContentService: HelpContentService) {}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
this.properties = properties;
|
||||
this.subs.push(this.route.queryParams.subscribe(params => {
|
||||
HelperFunctions.scroll();
|
||||
|
||||
let pageContentId = params['pageContentId'];
|
||||
this.communityPid = params['communityId'];
|
||||
this.pageId = params['pageId'];
|
||||
|
||||
if(!pageContentId) {
|
||||
this.router.navigate(['../../'], { queryParams: { "communityId": this.communityPid}, relativeTo: this.route});
|
||||
}
|
||||
|
||||
this.getPageHelpContent(pageContentId);
|
||||
}));
|
||||
}
|
||||
ngOnDestroy() {
|
||||
this.subs.forEach(value => {
|
||||
if (value instanceof Subscriber) {
|
||||
value.unsubscribe();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleError(message: string, error) {
|
||||
this.errorMessage = message;
|
||||
console.log('Server responded: ' + error);
|
||||
this.showLoading = false;
|
||||
}
|
||||
|
||||
handleUpdateError(message: string, error) {
|
||||
this.updateErrorMessage = message;
|
||||
console.log('Server responded: ' + error);
|
||||
this.showLoading = false;
|
||||
}
|
||||
|
||||
private getPage(pageId: string) {
|
||||
this.subs.push(this._helpContentService.getPageByPortal(pageId,this.properties.adminToolsAPIURL, this.communityPid).subscribe(
|
||||
page => {
|
||||
if(this.properties.adminToolsPortalType != page.portalType) {
|
||||
this.router.navigate(['../../'], { queryParams: { "communityId": this.communityPid} , relativeTo: this.route});
|
||||
} else {
|
||||
this.page = page;
|
||||
this.formComponent.setPlacements(this.page);
|
||||
this.showLoading = false;
|
||||
}
|
||||
},
|
||||
error => this.handleError('System error retrieving page with id: '+pageId, error)
|
||||
));
|
||||
}
|
||||
|
||||
private getPageHelpContent(pageContentId: string) {
|
||||
if(!Session.isLoggedIn()){
|
||||
this.router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this.router.url} });
|
||||
} else {
|
||||
this.showLoading = true;
|
||||
this.errorMessage = "";
|
||||
this.updateErrorMessage = "";
|
||||
|
||||
this.subs.push(this._helpContentService.getPageHelpContent(pageContentId as string, this.properties.adminToolsAPIURL, this.communityPid).subscribe(
|
||||
pageHelpContent => {
|
||||
if(this.pageId && this.pageId != pageHelpContent.page) {
|
||||
this.router.navigate(['../../'], { queryParams: { "communityId": this.communityPid} , relativeTo: this.route});
|
||||
} else if(this.pageId) {
|
||||
this.getPage(this.pageId);
|
||||
} else {
|
||||
this.getPage(<string>pageHelpContent.page);
|
||||
}
|
||||
this.updateForm(pageHelpContent);
|
||||
//this.showLoading = false;
|
||||
},
|
||||
error => this.handleError('System error retrieving page help content', error)));
|
||||
}
|
||||
}
|
||||
|
||||
private updateForm(pageHelpContent : PageHelpContent) {
|
||||
this.pageHelpContent = pageHelpContent;
|
||||
this.formComponent.myForm.patchValue((pageHelpContent));
|
||||
// console.log("patching",pageHelpContent);
|
||||
}
|
||||
|
||||
public saveCustom() {
|
||||
if(!Session.isLoggedIn()){
|
||||
this.router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this.router.url} });
|
||||
} else {
|
||||
if(this.formComponent.myForm.valid) {
|
||||
this.showLoading = true;
|
||||
this.updateErrorMessage = "";
|
||||
|
||||
let pageHelpContent : PageHelpContent = this.formComponent.myForm.value;
|
||||
this.subs.push(this._helpContentService.updatePageHelpContent(pageHelpContent, this.properties.adminToolsAPIURL, this.communityPid).subscribe(
|
||||
_ => {
|
||||
if(this.pageId) {
|
||||
this.router.navigate( ['../../'], { queryParams: { "communityId": this.communityPid, "pageId": this.pageId }, relativeTo: this.route } );
|
||||
} else {
|
||||
this.router.navigate(['../../'], { queryParams: { "communityId": this.communityPid}, relativeTo: this.route } );
|
||||
}
|
||||
this.showLoading = false;
|
||||
},
|
||||
err => this.handleUpdateError('System error updating page content', err)
|
||||
));
|
||||
} else {
|
||||
this.errorMessage = "Please fill all required fields";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public cancelCustom() {
|
||||
this.errorMessage = "";
|
||||
this.updateErrorMessage = "";
|
||||
|
||||
if(this.pageId) {
|
||||
this.router.navigate( ['../../'], { queryParams: { "communityId": this.communityPid, "pageId": this.pageId }, relativeTo: this.route } );
|
||||
} else {
|
||||
this.router.navigate(['../../'], { queryParams: { "communityId": this.communityPid}, relativeTo: this.route } );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {IsCommunity} from '../../connect/communityGuard/isCommunity.guard';
|
||||
import {ConnectAdminLoginGuard} from '../../connect/communityGuard/connectAdminLoginGuard.guard';
|
||||
import {EditPageHelpContentComponent} from './edit-page-help-content.component';
|
||||
import {PageHelpContentFormModule} from './page-help-content-form.module';
|
||||
import {AdminToolServiceModule} from "../../services/adminToolService.module";
|
||||
import {EditPageHelpContentRoutingModule} from "./edit-page-help-content-routing.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, RouterModule,
|
||||
PageHelpContentFormModule, AdminToolServiceModule, EditPageHelpContentRoutingModule
|
||||
],
|
||||
declarations: [
|
||||
EditPageHelpContentComponent
|
||||
],
|
||||
providers: [IsCommunity, ConnectAdminLoginGuard],
|
||||
exports: [EditPageHelpContentComponent]
|
||||
})
|
||||
export class EditPageHelpContentModule { }
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {NewPageHelpContentComponent} from "./new-page-help-content.component";
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild([
|
||||
{ path: '', component: NewPageHelpContentComponent}
|
||||
])
|
||||
]
|
||||
})
|
||||
export class NewPageHelpContentRoutingModule { }
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<div id="page_content">
|
||||
<div id="page_content_inner">
|
||||
|
||||
<div id="newPageHelpContent" class="uk-card uk-card-default uk-padding">
|
||||
<div id="content">
|
||||
<div class="menubar fixed">
|
||||
<div class="sidebar-toggler visible-xs">
|
||||
<i class="ion-navicon"></i>
|
||||
</div>
|
||||
<h4 class="uk-text-bold">
|
||||
<span >New help text <span *ngIf="page && page.name">of page "{{page.name}}"</span></span>
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div class="content-wrapper">
|
||||
|
||||
<div>
|
||||
<!-- <div *ngIf="errorMessage" class="uk-alert-danger" uk-alert>{{errorMessage}}</div> -->
|
||||
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
|
||||
<div [style.display]="showLoading ? 'inline' : 'none'" class="uk-animation-fade uk-width-1-1" role="alert">
|
||||
<img class="uk-align-center loading-gif"></div>
|
||||
|
||||
<page-content-form [communityPid]="communityPid" [pageId]="pageId" [page]="page"
|
||||
[updateErrorMessage]="updateErrorMessage"></page-content-form>
|
||||
<button (click)="saveCustom()" class="uk-button uk-button-primary uk-margin-small-right">Save help text
|
||||
</button>
|
||||
<button (click)="cancelCustom()" class="uk-button">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,132 +0,0 @@
|
|||
import { Component, ViewChild, ElementRef } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from "@angular/router";
|
||||
import { PageContentFormComponent } from "./page-help-content-form.component";
|
||||
import { PageHelpContent } from "../../utils/entities/adminTool/page-help-content";
|
||||
import { HelpContentService } from "../../services/help-content.service";
|
||||
import { EnvProperties } from '../../utils/properties/env-properties';
|
||||
|
||||
import {Session} from '../../login/utils/helper.class';
|
||||
import {LoginErrorCodes} from '../../login/utils/guardHelper.class';
|
||||
import {HelperFunctions} from "../../utils/HelperFunctions.class";
|
||||
import {Page} from "../../utils/entities/adminTool/page";
|
||||
import {properties} from "../../../../environments/environment";
|
||||
import {Subscriber, Subscription} from "rxjs";
|
||||
|
||||
@Component({
|
||||
selector: 'new-page-help-content',
|
||||
templateUrl: 'new-page-help-content.component.html',
|
||||
})
|
||||
|
||||
export class NewPageHelpContentComponent {
|
||||
|
||||
@ViewChild(PageContentFormComponent)
|
||||
public formComponent : PageContentFormComponent;
|
||||
|
||||
//private errorMessage : string = null;
|
||||
|
||||
public communityPid: string;
|
||||
|
||||
public pageId: string;
|
||||
public page: Page;
|
||||
|
||||
public properties:EnvProperties = null;
|
||||
|
||||
public showLoading: boolean = true;
|
||||
public errorMessage: string = '';
|
||||
public updateErrorMessage: string = '';
|
||||
private subs: Subscription[]=[];
|
||||
constructor(
|
||||
private element: ElementRef,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private _helpContentService: HelpContentService) {}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
this.properties = properties;
|
||||
this.subs.push(this.route.queryParams.subscribe(params => {
|
||||
HelperFunctions.scroll();
|
||||
|
||||
this.communityPid = params['communityId'];
|
||||
this.pageId = params['pageId'];
|
||||
|
||||
if(this.pageId) {
|
||||
this.getPage(this.pageId);
|
||||
} else {
|
||||
this.showLoading = false;
|
||||
}
|
||||
}));
|
||||
}
|
||||
ngOnDestroy() {
|
||||
this.subs.forEach(value => {
|
||||
if (value instanceof Subscriber) {
|
||||
value.unsubscribe();
|
||||
}
|
||||
});
|
||||
}
|
||||
private getPage(pageId: string) {
|
||||
this.subs.push(this._helpContentService.getPageByPortal(pageId,this.properties.adminToolsAPIURL, this.communityPid).subscribe(
|
||||
page => {
|
||||
if(this.properties.adminToolsPortalType != page.portalType) {
|
||||
this.router.navigate(['../../'], { queryParams: { "communityId": this.communityPid} });
|
||||
} else {
|
||||
this.page = page;
|
||||
this.formComponent.setPlacements(this.page);
|
||||
this.showLoading = false;
|
||||
console.info(this.page);
|
||||
}
|
||||
},
|
||||
error => this.handleError('System error retrieving page with id: '+pageId, error)
|
||||
));
|
||||
}
|
||||
|
||||
public saveCustom() {
|
||||
if(!Session.isLoggedIn()){
|
||||
this.router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this.router.url} });
|
||||
} else {
|
||||
//this.errorMessage = null;
|
||||
|
||||
if(this.formComponent.myForm.valid) {
|
||||
this.showLoading = true;
|
||||
this.updateErrorMessage = "";
|
||||
|
||||
let pageHelpContent : PageHelpContent = this.formComponent.myForm.value;
|
||||
|
||||
this.subs.push(this._helpContentService.savePageHelpContent(pageHelpContent, this.properties.adminToolsAPIURL, this.communityPid).subscribe(
|
||||
_ => {
|
||||
if(this.pageId) {
|
||||
this.router.navigate( ['../../'], { queryParams: { "communityId": this.communityPid, "pageId": this.pageId }, relativeTo: this.route } );
|
||||
} else {
|
||||
this.router.navigate(['../../'], { queryParams: { "communityId": this.communityPid}, relativeTo: this.route });
|
||||
}
|
||||
this.showLoading = false;
|
||||
},
|
||||
err => this.handleUpdateError('System error saving page content', err)
|
||||
));
|
||||
} else {
|
||||
this.errorMessage = "Please fill all required fields";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public cancelCustom() {
|
||||
if(this.pageId) {
|
||||
this.router.navigate( ['../../'], { queryParams: { "communityId": this.communityPid, "pageId": this.pageId }, relativeTo: this.route } );
|
||||
} else {
|
||||
this.router.navigate(['../../'], { queryParams: { "communityId": this.communityPid}, relativeTo: this.route } );
|
||||
}
|
||||
}
|
||||
|
||||
handleUpdateError(message: string, error) {
|
||||
this.updateErrorMessage = message;
|
||||
console.log('Server responded: ' + error);
|
||||
|
||||
this.showLoading = false;
|
||||
}
|
||||
|
||||
handleError(message: string, error) {
|
||||
this.errorMessage = message;
|
||||
console.log('Server responded: ' + error);
|
||||
this.showLoading = false;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {IsCommunity} from '../../connect/communityGuard/isCommunity.guard';
|
||||
import {ConnectAdminLoginGuard} from '../../connect/communityGuard/connectAdminLoginGuard.guard';
|
||||
import {NewPageHelpContentComponent} from './new-page-help-content.component';
|
||||
import {PageHelpContentFormModule} from './page-help-content-form.module';
|
||||
import {AdminToolServiceModule} from "../../services/adminToolService.module";
|
||||
import {NewPageHelpContentRoutingModule} from "./new-page-help-content-routing.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, RouterModule,
|
||||
PageHelpContentFormModule, AdminToolServiceModule, NewPageHelpContentRoutingModule
|
||||
],
|
||||
declarations: [
|
||||
NewPageHelpContentComponent
|
||||
],
|
||||
providers: [IsCommunity, ConnectAdminLoginGuard],
|
||||
exports: [NewPageHelpContentComponent]
|
||||
})
|
||||
export class NewPageHelpContentModule { }
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {PageContentFormComponent} from './page-help-content-form.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild([
|
||||
{ path: '', component: PageContentFormComponent}
|
||||
])
|
||||
]
|
||||
})
|
||||
export class PageHelpContentFormRoutingModule { }
|
||||
|
|
@ -1,82 +1,87 @@
|
|||
<div *ngIf="updateErrorMessage" class="uk-alert uk-alert-danger" role="alert">{{updateErrorMessage}}</div>
|
||||
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
|
||||
<div [style.display]="showLoading ? 'inline' : 'none'" class="uk-animation-fade uk-width-1-1" role="alert"><img class="uk-align-center loading-gif"></div>
|
||||
<div class="uk-alert uk-alert-primary uk-margin-top-large">
|
||||
<span class="uk-margin-small-right uk-icon" uk-icon="info"></span>
|
||||
Create or edit help text
|
||||
<div class="uk-text-small">
|
||||
Select the page to be displayed, select position of the page
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<form *ngIf="!errorMessage && !showLoading" [formGroup]="myForm">
|
||||
<div *ngIf="!pageId" class="form-group" [ngClass]="{'has-error':!myForm.controls.page.valid && myForm.controls.page.dirty}">
|
||||
<label for="pageTag">Select Page</label>
|
||||
<select formControlName="page" id="pageTag" class="form-control">
|
||||
<option *ngFor="let page of availablePages" [value]="page._id">{{page.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div *ngIf="myForm.controls.page.value" class="form-group" [ngClass]="{'has-error':!myForm.controls.placement.valid && myForm.controls.placement.dirty}">
|
||||
<label for="placementTag">Select Placement</label>
|
||||
<select formControlName="placement" id="placementTag" class="form-control">
|
||||
<option *ngIf="placements.top" [value]="'top'">Top</option>
|
||||
<option *ngIf="placements.left" [value]="'left'">Left</option>
|
||||
<option *ngIf="placements.right" [value]="'right'">Right</option>
|
||||
<option *ngIf="placements.bottom" [value]="'bottom'">Bottom</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" [ngClass]="{'has-error':!myForm.controls.content.valid && myForm.controls.content.dirty}">
|
||||
<label>Content</label>
|
||||
<div>
|
||||
<!-- [config]="{allowedContent: 'p(*); h; div; span'}"-->
|
||||
<!-- [config]="{allowedContent: true,extraAllowedContent : '*(*)'}" -->
|
||||
<!-- [config]="{allowedContent: true, disallowedContent:'script; *[on*]'}" -->
|
||||
<!-- [config]="{ allowedContent: '{
|
||||
elements: dtd,
|
||||
attributes: true,
|
||||
styles: true,
|
||||
classes: true
|
||||
}',
|
||||
disallowedContent:'script; *[on*]'}" -->
|
||||
<ckeditor
|
||||
[readonly]="false"
|
||||
debounce="500"
|
||||
formControlName="content"
|
||||
[config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]', removeButtons: 'Save,NewPage,DocProps,Preview,Print',
|
||||
extraPlugins: 'divarea'}">
|
||||
<!--id="contentTag"-->
|
||||
<!--(ready)="onReady($event)"-->
|
||||
<!--(focus)="onFocus($event)"-->
|
||||
<!--[config]="{uiColor: '#99000'}"-->
|
||||
<!--(blur)="onBlur($event)"-->
|
||||
<!--(change)="onChange($event)"-->
|
||||
</ckeditor>
|
||||
</div>
|
||||
|
||||
<!--<textarea class="form-control" formControlName="content" id="contentTag" placeholder="Content" rows="3"></textarea>-->
|
||||
</div>
|
||||
<div class="form-group" [ngClass]="{'has-error':!myForm.controls.order.valid && myForm.controls.order.dirty}">
|
||||
<label for="orderTag">Order</label>
|
||||
<input type="number" step="1" class="form-control" formControlName="order" id="orderTag" placeholder="Order (e.g. 2)">
|
||||
</div>
|
||||
<!--<div class="form-group">
|
||||
<label>Help text before existing content</label>
|
||||
<label class="checkbox">
|
||||
<span class="uk-margin-small-right" style="font-weight: normal;">Before</span>
|
||||
<input tabindex="0" type="checkbox" formControlName="isPriorTo">
|
||||
</label>
|
||||
<div page-content>
|
||||
<div header>
|
||||
<!-- <div class="uk-text-bold">
|
||||
<span *ngIf="pageId && page">{{page.name}}</span>
|
||||
</div>-->
|
||||
<div class="form-group">
|
||||
<label>Select Status</label>
|
||||
<label class="checkbox">
|
||||
<span class="uk-margin-small-right" style="font-weight: normal;">Active</span>
|
||||
<input tabindex="0" type="checkbox" formControlName="isActive">
|
||||
|
||||
</label>
|
||||
<div class="uk-margin-top">
|
||||
<a
|
||||
routerLink="../" [queryParams]=" { 'pageId': pageId }" class="uk-text-secondary">
|
||||
<span class="uk-icon-button small uk-icon uk-button-secondary">
|
||||
<icon name="arrow_left"></icon></span>
|
||||
Go back to helptexts list</a>
|
||||
</div>
|
||||
<input type="hidden" formControlName="_id">
|
||||
</form>
|
||||
<!--<pre>-->
|
||||
<!--{{myForm.value | json}}-->
|
||||
<!--{{myForm.valid}}-->
|
||||
<!--</pre>-->
|
||||
</div>
|
||||
<div inner>
|
||||
<div class="uk-card-header">
|
||||
<div class="uk-flex uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m uk-grid" uk-grid>
|
||||
<div>
|
||||
<div class="uk-text-small uk-text-muted"> {{pageHelpContent?'Update ':'Add new '}} help text</div>
|
||||
<div >
|
||||
<span *ngIf="page" class="uk-text-bold">{{page.name}}</span>
|
||||
<span *ngIf="myForm.dirty"> (unsaved changes)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" uk-flex uk-flex-right">
|
||||
<button (click)="resetCustom()" [disabled]="showLoading || !myForm.dirty"
|
||||
class="uk-button uk-button-secondary outlined uk-margin-small-right">Reset
|
||||
</button>
|
||||
<button (click)="saveCustom()" class="uk-button uk-button-secondary uk-margin-small-right"
|
||||
[disabled]="showLoading || !myForm.dirty || !myForm.valid ">Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-position-relative uk-padding-large " style="min-height: 60vh">
|
||||
<div style="max-height: 60vh">
|
||||
<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 *ngIf="updateErrorMessage" class="uk-alert uk-alert-danger" role="alert">{{updateErrorMessage}}</div>
|
||||
|
||||
<div *ngIf="showLoading" class="uk-position-center">
|
||||
<loading *ngIf="showLoading"></loading>
|
||||
</div>
|
||||
<form [formGroup]="myForm" [class.hidden]="showLoading">
|
||||
<div class="uk-grid uk-child-width-1-2 ">
|
||||
<div *ngIf="placementsOptions.length > 0" dashboard-input
|
||||
[formInput]="myForm.get('placement')"
|
||||
type="select" placeholder="Select placement"
|
||||
label="Select placement" [options]="placementsOptions"
|
||||
>
|
||||
</div>
|
||||
<div dashboard-input [formInput]="myForm.get('order')"
|
||||
type="select" placeholder="Select order"
|
||||
label="Select order" [options]="orderOptions">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group uk-margin-top">
|
||||
<span class="uk-text-bold uk-margin-small-right">Select Status (Enable/ disable)</span>
|
||||
|
||||
<mat-slide-toggle [checked]="myForm.get('isActive').value"
|
||||
(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>"
|
||||
></mat-slide-toggle>
|
||||
</div>
|
||||
<div class="form-group uk-margin-large-top"
|
||||
[ngClass]="{'has-error':!myForm.controls.content.valid &&
|
||||
myForm.controls.content.dirty}"
|
||||
>
|
||||
<label class="uk-text-bold">Content</label>
|
||||
<div class="uk-margin-top">
|
||||
<ckeditor (change)="contentChanged()"
|
||||
[readonly]="false"
|
||||
debounce="500"
|
||||
[formControl]="myForm.get('content')"
|
||||
[config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]', removeButtons: 'Save,NewPage,DocProps,Preview,Print',
|
||||
extraPlugins: 'divarea'}">
|
||||
</ckeditor>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<input type="hidden" formControlName="_id">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
import { Component, OnInit, Input } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from "@angular/router";
|
||||
import { FormGroup, FormBuilder, Validators } from "@angular/forms";
|
||||
import { Page } from "../../utils/entities/adminTool/page";
|
||||
import { HelpContentService } from "../../services/help-content.service";
|
||||
import { EnvProperties } from '../../utils/properties/env-properties';
|
||||
import {Component, Input, OnInit} from '@angular/core';
|
||||
import {ActivatedRoute, Router} from '@angular/router';
|
||||
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
|
||||
import {Page} from '../../utils/entities/adminTool/page';
|
||||
import {HelpContentService} from '../../services/help-content.service';
|
||||
import {EnvProperties} from '../../utils/properties/env-properties';
|
||||
|
||||
import {Session} from '../../login/utils/helper.class';
|
||||
import {LoginErrorCodes} from '../../login/utils/guardHelper.class';
|
||||
import {properties} from "../../../../environments/environment";
|
||||
import {Subscriber, Subscription} from "rxjs";
|
||||
import {properties} from '../../../../environments/environment';
|
||||
import {Subscriber, Subscription} from 'rxjs';
|
||||
import {HelperFunctions} from '../../utils/HelperFunctions.class';
|
||||
import {PageHelpContent} from '../../utils/entities/adminTool/page-help-content';
|
||||
|
||||
@Component({
|
||||
selector: 'page-content-form',
|
||||
|
|
@ -17,15 +19,13 @@ import {Subscriber, Subscription} from "rxjs";
|
|||
|
||||
export class PageContentFormComponent implements OnInit{
|
||||
|
||||
@Input('group')
|
||||
myForm: FormGroup;
|
||||
@Input('communityPid')
|
||||
communityPid: string;
|
||||
@Input('pageId')
|
||||
pageId: string;
|
||||
@Input('page')
|
||||
pageContentId: string;
|
||||
page: Page;
|
||||
placements = {"top": false, "bottom": false, "left": false, "right": false}
|
||||
placementsOptions = [];
|
||||
orderOptions = [];
|
||||
|
||||
private availablePages : Page[] = [];
|
||||
//private errorMessage: string;
|
||||
|
|
@ -37,30 +37,41 @@ export class PageContentFormComponent implements OnInit{
|
|||
public errorMessage: string = '';
|
||||
@Input() updateErrorMessage: string = '';
|
||||
private subs: Subscription[] = [];
|
||||
private pageHelpContent: PageHelpContent;
|
||||
constructor(private route: ActivatedRoute, private _router: Router, private _fb: FormBuilder, private _helpContentService: HelpContentService){}
|
||||
|
||||
ngOnInit() {
|
||||
this.myForm = this.form;
|
||||
this.properties = properties;
|
||||
if(!Session.isLoggedIn()){
|
||||
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
|
||||
} else {
|
||||
if(!this.pageId) {
|
||||
this.subs.push(this.myForm.valueChanges.subscribe(value => {
|
||||
let pageId = value.page;
|
||||
this.subs.push(this._helpContentService.getPageByPortal(pageId, this.properties.adminToolsAPIURL, this.communityPid).subscribe(page => {
|
||||
this.setPlacements(page);
|
||||
}));
|
||||
}));
|
||||
}
|
||||
this.subs.push(this._helpContentService.getCommunityPagesWithPositions(this.communityPid, this.properties.adminToolsAPIURL).subscribe(
|
||||
pages => {
|
||||
this.availablePages = pages;
|
||||
this.showLoading = false;
|
||||
},
|
||||
error => this.handleError('System error retrieving pages', error)));
|
||||
}
|
||||
|
||||
this.properties = properties;
|
||||
this.subs.push(this.route.params.subscribe(params => {
|
||||
this.communityPid = params['community'];
|
||||
this.subs.push(this.route.queryParams.subscribe(params => {
|
||||
HelperFunctions.scroll();
|
||||
this.pageId = params['pageId'];
|
||||
this.myForm = this.form;
|
||||
this.pageContentId = params['pageContentId'];
|
||||
if (!this.pageId) {
|
||||
this._router.navigate(['../'], {relativeTo: this.route});
|
||||
}
|
||||
this.getPage(this.pageId);
|
||||
if (this.pageContentId) {
|
||||
this.getPageHelpContent(this.pageContentId);
|
||||
}else{
|
||||
this.myForm = this.form;
|
||||
|
||||
}
|
||||
|
||||
if (!Session.isLoggedIn()) {
|
||||
this._router.navigate(['/user-info'], {
|
||||
queryParams: {
|
||||
"errorCode": LoginErrorCodes.NOT_VALID,
|
||||
"redirectUrl": this._router.url
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}));
|
||||
}));
|
||||
}
|
||||
ngOnDestroy() {
|
||||
this.subs.forEach(value => {
|
||||
|
|
@ -69,11 +80,97 @@ export class PageContentFormComponent implements OnInit{
|
|||
}
|
||||
});
|
||||
}
|
||||
public setPlacements(page: Page) {
|
||||
this.placements.top = page.top;
|
||||
this.placements.bottom = page.bottom;
|
||||
this.placements.left = page.left;
|
||||
this.placements.right = page.right;
|
||||
private getPage(pageId: string) {
|
||||
this.subs.push(this._helpContentService.getPageByPortal(pageId,this.properties.adminToolsAPIURL, this.communityPid).subscribe(
|
||||
page => {
|
||||
if(this.properties.adminToolsPortalType != page.portalType) {
|
||||
this._router.navigate(['../'], {relativeTo: this.route});
|
||||
} else {
|
||||
this.page = page;
|
||||
this.getPageContents(pageId);
|
||||
}
|
||||
},
|
||||
error => this.handleError('System error retrieving page with id: '+pageId, error)
|
||||
));
|
||||
}
|
||||
private getPageContents(pageId: string) {
|
||||
this.subs.push(this._helpContentService.getCommunityPageHelpContents(this.communityPid, this.properties.adminToolsAPIURL).subscribe(
|
||||
pageHelpContents => {
|
||||
let countPageContents = 1;
|
||||
for (let content of (pageHelpContents as Array<PageHelpContent>)) {
|
||||
if(content.page['_id'] == pageId){
|
||||
countPageContents++;
|
||||
}
|
||||
}
|
||||
this.setOptions(this.page, countPageContents);
|
||||
if(!this.pageContentId) {
|
||||
this.showLoading = false;
|
||||
this.initFormWithSelectOptions();
|
||||
}
|
||||
},
|
||||
error => this.handleError('System error retrieving page contents with id: ', error)
|
||||
));
|
||||
}
|
||||
private getPageHelpContent(pageContentId: string) {
|
||||
if(!Session.isLoggedIn()){
|
||||
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
|
||||
} else {
|
||||
this.showLoading = true;
|
||||
this.errorMessage = "";
|
||||
this.updateErrorMessage = "";
|
||||
|
||||
this.subs.push(this._helpContentService.getPageHelpContent(pageContentId as string, this.properties.adminToolsAPIURL, this.communityPid).subscribe(
|
||||
pageHelpContent => {
|
||||
this.updateForm(pageHelpContent);
|
||||
this.showLoading = false;
|
||||
},
|
||||
error => this.handleError('System error retrieving page help content', error)));
|
||||
}
|
||||
}
|
||||
private updateForm(pageHelpContent : PageHelpContent) {
|
||||
this.pageHelpContent = pageHelpContent;
|
||||
this.myForm = this.form;
|
||||
if(this.pageHelpContent) {
|
||||
this.myForm.patchValue((pageHelpContent));
|
||||
}else{
|
||||
this.initFormWithSelectOptions();
|
||||
}
|
||||
if(this.orderOptions.length ==1){
|
||||
this.myForm.get('order').disable()
|
||||
}
|
||||
if(this.placementsOptions.length ==1){
|
||||
this.myForm.get('placement').disable()
|
||||
}
|
||||
this.myForm.markAsPristine();
|
||||
|
||||
}
|
||||
initFormWithSelectOptions(){
|
||||
if (this.placementsOptions.length == 1) {
|
||||
this.myForm.get("placement").setValue(this.placementsOptions[0].value);
|
||||
}
|
||||
this.myForm.get("order").setValue(this.orderOptions[this.orderOptions.length - 1].value);
|
||||
if(this.orderOptions.length ==1){
|
||||
this.myForm.get('order').disable()
|
||||
}
|
||||
if(this.placementsOptions.length ==1){
|
||||
this.myForm.get('placement').disable()
|
||||
}
|
||||
}
|
||||
public setOptions(page: Page, countContents:number) {
|
||||
this.placementsOptions = [];
|
||||
if(page.top){
|
||||
this.placementsOptions.push({label: "top", value: "top"});
|
||||
}
|
||||
if(page.bottom){
|
||||
this.placementsOptions.push({label: "bottom", value: "bottom"});
|
||||
}
|
||||
if(page.left){
|
||||
this.placementsOptions.push({label: "left", value: "left"});
|
||||
}
|
||||
this.orderOptions = [];
|
||||
for(let i=1; i<countContents+1; i++){
|
||||
this.orderOptions.push({label: ""+i, value: i});
|
||||
}
|
||||
}
|
||||
|
||||
public get form() {
|
||||
|
|
@ -105,8 +202,67 @@ export class PageContentFormComponent implements OnInit{
|
|||
|
||||
handleError(message: string, error) {
|
||||
this.errorMessage = message;
|
||||
console.log('Server responded: ' + error);
|
||||
console.error('Server responded: ' + error);
|
||||
|
||||
this.showLoading = false;
|
||||
}
|
||||
|
||||
public saveCustom() {
|
||||
if(!Session.isLoggedIn()){
|
||||
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
|
||||
} else {
|
||||
//this.errorMessage = null;
|
||||
|
||||
if(this.myForm.valid) {
|
||||
this.showLoading = true;
|
||||
this.updateErrorMessage = "";
|
||||
this.myForm.get('order').enable();
|
||||
this.myForm.get('placement').enable();
|
||||
let pageHelpContent : PageHelpContent = this.myForm.value;
|
||||
this.subs.push(this._helpContentService.savePageHelpContent(pageHelpContent, this.properties.adminToolsAPIURL, this.communityPid).subscribe(
|
||||
_ => {
|
||||
this._router.navigate( ['../'], { queryParams: { "pageId": this.pageId }, relativeTo: this.route } );
|
||||
this.showLoading = false;
|
||||
},
|
||||
err => this.handleUpdateError('System error saving page content', err)
|
||||
));
|
||||
} else {
|
||||
this.showLoading = false;
|
||||
this.errorMessage = "Please fill all required fields";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public cancelCustom() {
|
||||
this._router.navigate( ['../'], { queryParams: { "pageId": this.pageId }, relativeTo: this.route } );
|
||||
}
|
||||
|
||||
public resetCustom() {
|
||||
this.showLoading = true;
|
||||
this.updateForm(this.pageHelpContent);
|
||||
this.showLoading = false;
|
||||
}
|
||||
|
||||
handleUpdateError(message: string, error) {
|
||||
|
||||
this.updateErrorMessage = message;
|
||||
console.error('Server responded: ' + error);
|
||||
|
||||
this.showLoading = false;
|
||||
}
|
||||
changeStatus(){
|
||||
this.myForm.get('isActive').setValue(!this.myForm.get('isActive').value);
|
||||
if(this.pageHelpContent && this.myForm.get('isActive').value != this.pageHelpContent.isActive || !this.pageHelpContent && !this.myForm.get('isActive').value ){
|
||||
this.myForm.get('isActive').markAsDirty();
|
||||
}else{
|
||||
this.myForm.get('isActive').markAsPristine()
|
||||
}
|
||||
}
|
||||
contentChanged(){
|
||||
if(this.pageHelpContent && this.myForm.get('content').value != this.pageHelpContent.content || !this.pageHelpContent && this.myForm.get('content').value != '' ){
|
||||
this.myForm.get('content').markAsDirty();
|
||||
}else{
|
||||
this.myForm.get('content').markAsPristine()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,16 +5,30 @@ import {AlertModalModule} from '../../utils/modal/alertModal.module';
|
|||
import {SafeHtmlPipeModule} from '../../utils/pipes/safeHTMLPipe.module';
|
||||
import {CKEditorModule} from 'ng2-ckeditor';
|
||||
import {PageContentFormComponent} from './page-help-content-form.component';
|
||||
import {PageHelpContentFormRoutingModule} from './page-help-content-form-routing.module';
|
||||
import {AdminToolServiceModule} from '../../services/adminToolService.module';
|
||||
import {InputModule} from '../../sharedComponents/input/input.module';
|
||||
import {MatSlideToggleModule} from '@angular/material';
|
||||
import {IconsModule} from '../../utils/icons/icons.module';
|
||||
import {PageContentModule} from '../sharedComponents/page-content/page-content.module';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {LoadingModule} from '../../utils/loading/loading.module';
|
||||
import {IconsService} from '../../utils/icons/icons.service';
|
||||
import {arrow_left} from '../../utils/icons/icons';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule,
|
||||
SafeHtmlPipeModule, CKEditorModule,
|
||||
AlertModalModule, ReactiveFormsModule
|
||||
],
|
||||
imports: [
|
||||
CommonModule, FormsModule, RouterModule,
|
||||
SafeHtmlPipeModule, CKEditorModule,
|
||||
AlertModalModule, ReactiveFormsModule, PageHelpContentFormRoutingModule, AdminToolServiceModule, InputModule, MatSlideToggleModule, IconsModule, PageContentModule, LoadingModule
|
||||
],
|
||||
declarations: [
|
||||
PageContentFormComponent
|
||||
],
|
||||
exports: [PageContentFormComponent]
|
||||
})
|
||||
export class PageHelpContentFormModule { }
|
||||
export class PageHelpContentFormModule {
|
||||
constructor(private iconsService: IconsService) {
|
||||
this.iconsService.registerIcons([arrow_left]);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,167 +1,144 @@
|
|||
<div id="page_content" click-outside-or-esc targetId="page_content">
|
||||
<div class="uk-padding-small md-bg-white" uk-grid>
|
||||
<div *ngIf="!selectedPageId" class="filters marginBottom20">
|
||||
<div dashboard-input label="Filter by page" [formInput]="selectForm" type="select"
|
||||
[options]="selectOptions"></div>
|
||||
<div page-content>
|
||||
<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">
|
||||
<span *ngIf="selectedPageId && page">{{page.name}}</span>
|
||||
</div>
|
||||
<div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right">
|
||||
<div class="uk-inline uk-width-medium">
|
||||
<span class="uk-position-center-right"><i class="material-icons">search</i></span>
|
||||
<div dashboard-input [formInput]="filterForm" label="Find help text"></div>
|
||||
<div class="uk-margin-top">
|
||||
<a
|
||||
routerLink="../pages/" class="uk-text-secondary">
|
||||
<span class="uk-icon-button small uk-icon uk-button-secondary">
|
||||
<icon name="arrow_left"></icon></span>
|
||||
Go back to pages list</a>
|
||||
</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 #searchInputComponent search-input [control]="filterForm" [showSearch]="false" placeholder="Search helptext"
|
||||
[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>
|
||||
<div>
|
||||
<a (click)="newPageContent()"
|
||||
class="uk-flex uk-flex-middle uk-text-uppercase">
|
||||
<button class="large uk-icon-button uk-button-secondary">
|
||||
<icon name="add"></icon>
|
||||
</button>
|
||||
<button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">Add new help text</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="checkboxes.length > 0"
|
||||
class="uk-padding uk-padding-remove-bottom uk-padding-remove-top uk-margin-remove-top uk-margin-small-bottom"
|
||||
[attr.uk-tooltip]="getSelectedPageHelpContents().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="Select at least one help text"><input id="checkAll" type="checkbox" (click)="selectAll()"
|
||||
[ngModel]="getSelectedPageHelpContents().length ==checkboxes.length"/>
|
||||
<span *ngIf="getSelectedPageHelpContents().length > 0" class="uk-margin-left uk-text-muted">
|
||||
{{getSelectedPageHelpContents().length}} pages selected </span>
|
||||
<a class="uk-margin-left ">Actions </a>
|
||||
<div uk-dropdown="mode: click">
|
||||
<ul class="uk-nav uk-dropdown-nav"
|
||||
[attr.uk-tooltip]="getSelectedPageHelpContents().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="Select at least one help text">
|
||||
<li><a [class]="getSelectedPageHelpContents().length == 0 ? 'uk-disabled' : ''"
|
||||
(click)="togglePageHelpContents(true,getSelectedPageHelpContents())"><i></i> Enable
|
||||
</a></li>
|
||||
<li><a [class]="getSelectedPageHelpContents().length == 0 ? 'uk-disabled' : ''"
|
||||
(click)="togglePageHelpContents(false,getSelectedPageHelpContents())"><i></i> Disable
|
||||
</a>
|
||||
</li>
|
||||
<li><a [class]="getSelectedPageHelpContents().length == 0 ? 'uk-disabled' : ''"
|
||||
(click)="confirmDeleteSelectedPageHelpContents()"><i></i> Delete </a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="page_content_inner">
|
||||
<div>
|
||||
|
||||
<div *ngIf="!errorMessage && !showLoading" class="page-controls">
|
||||
|
||||
|
||||
<button class="uk-button uk-button-primary uk-float-right" type="button">Bulk Actions</button>
|
||||
<div uk-dropdown="mode: click">
|
||||
<ul class="uk-nav uk-margin-left"
|
||||
[attr.uk-tooltip]="getSelectedPageHelpContents().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="Select at least one help text">
|
||||
<li><a [class]="getSelectedPageHelpContents().length == 0 ? 'uk-disabled' : ''"
|
||||
(click)="togglePageHelpContents(true,getSelectedPageHelpContents())"><i></i> Activate </a></li>
|
||||
<li><a [class]="getSelectedPageHelpContents().length == 0 ? 'uk-disabled' : ''"
|
||||
(click)="togglePageHelpContents(false,getSelectedPageHelpContents())"><i></i> Deactivate </a>
|
||||
</li>
|
||||
<li><a [class]="getSelectedPageHelpContents().length == 0 ? 'uk-disabled' : ''"
|
||||
(click)="confirmDeleteSelectedPageHelpContents()"><i></i> Delete </a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<h4 class="uk-text-bold">
|
||||
<span *ngIf="!selectedPageId">Page help texts</span>
|
||||
<span *ngIf="selectedPageId && page">Page help texts of page '{{page.name}}' </span>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
|
||||
<a class="uk-alert-close" uk-close></a>
|
||||
{{updateErrorMessage}}
|
||||
</div>
|
||||
|
||||
<div inner>
|
||||
|
||||
<div class="content-wrapper" id="contentWrapper">
|
||||
<div>
|
||||
<div class="contentPanel">
|
||||
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top"
|
||||
role="alert">{{errorMessage}}</div>
|
||||
<div [style.display]="showLoading ? 'inline' : 'none'"
|
||||
class="uk-animation-fade uk-margin-large-top uk-width-1-1" role="alert"><img
|
||||
class="uk-align-center loading-gif"></div>
|
||||
<div *ngIf="showLoading" class="uk-position-center">
|
||||
<loading *ngIf="showLoading"></loading>
|
||||
</div>
|
||||
|
||||
|
||||
<div *ngIf="!errorMessage && !showLoading">
|
||||
<div class="uk-alert uk-alert-primary uk-margin-top-large">
|
||||
<span class="uk-margin-small-right uk-icon" uk-icon="info"></span>
|
||||
Enable or disable help text to show or hide it from the dashboard
|
||||
|
||||
</div>
|
||||
<ul uk-tab class="links">
|
||||
<li [ngClass]="{'uk-active' : filters.active==null}" (click)="displayAllPageHelpContents()">
|
||||
<a>All help texts <span class="uk-badge">{{counter.all | number}}</span></a>
|
||||
</li>
|
||||
<li [ngClass]="{'uk-active' : filters.active==true}" (click)="displayActivePageHelpContents()">
|
||||
<a>Active <span class="uk-badge">{{counter.active | number}}</span></a>
|
||||
</li>
|
||||
<li [ngClass]="{'uk-active' : filters.active==false}" (click)="displayInactivePageHelpContents()">
|
||||
<a>Inactive <span class="uk-badge">{{counter.inactive | number}}</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading">
|
||||
<div class="md-card-content">
|
||||
<div class="uk-overflow-container">
|
||||
<table class="uk-table uk-table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input id="allPageHelpContentsCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)">
|
||||
</th>
|
||||
<th *ngIf="!selectedPageId">Page</th>
|
||||
<th *ngIf="!selectedPageId">Community</th>
|
||||
<th>Content</th>
|
||||
<th>Placement</th>
|
||||
<th>Order</th>
|
||||
<!--<th>Before</th>-->
|
||||
<th>Change status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let check of checkboxes; let i=index">
|
||||
<td><input id="{{check.pageHelpContent._id}}" class="checkBox" type="checkbox"
|
||||
name="entitiescb[]" value="{{check.pageHelpContent._id}}" [(ngModel)]="check.checked">
|
||||
</td>
|
||||
<td *ngIf="!selectedPageId">
|
||||
<div class="page" href="#">{{check.pageHelpContent.page.name}}</div>
|
||||
</td>
|
||||
<td *ngIf="!selectedPageId">
|
||||
<div class="community" href="#">{{check.pageHelpContent.portal.name}}</div>
|
||||
</td>
|
||||
<td>
|
||||
<!-- <div class="content" [innerHtml]="check.pageHelpContent.content | safeHtml"></div>-->
|
||||
<div class="content">{{check.pageHelpContent.content}}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="placement" href="#">{{check.pageHelpContent.placement}}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="order" href="#">{{check.pageHelpContent.order}}
|
||||
</div>
|
||||
</td>
|
||||
<!--<td>
|
||||
<div class="isPriorTo" href="#">{{check.pageHelpContent.isPriorTo}}
|
||||
<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">
|
||||
<div class="uk-grid uk-grid-divider uk-padding" uk-grid>
|
||||
<div class="uk-width-4-5 uk-first-column ">
|
||||
<div class="uk-grid uk-flex uk-flex-middle">
|
||||
<div><input id="{{check.pageHelpContent._id}}" class="checkBox" type="checkbox"
|
||||
name="entitiescb[]" value="{{check.pageHelpContent._id}}" [(ngModel)]="check.checked">
|
||||
</div>
|
||||
<div class="uk-width-expand uk-margin-medium-bottom">
|
||||
<div *ngIf="!selectedPageId" >
|
||||
<div class="page" href="#">{{check.pageHelpContent.page.name}}</div>
|
||||
</div>
|
||||
<div class="content">{{check.pageHelpContent.content}}</div>
|
||||
</div>
|
||||
<div class="uk-grid uk-width-1-1 uk-margin-left">
|
||||
<div class=" ">
|
||||
<span class="title">Placement: </span>{{check.pageHelpContent.placement}}
|
||||
</div>
|
||||
<div class=" ">
|
||||
<span class="title">Order: </span>{{check.pageHelpContent.order}}
|
||||
</div>
|
||||
<div class=" ">
|
||||
<span class="title uk-margin-small-right">Enable/disable: </span>
|
||||
<mat-slide-toggle [checked]="check.pageHelpContent.isActive"
|
||||
(change)="($event.source.checked = check.pageHelpContent.isActive);togglePageHelpContents(!check.pageHelpContent.isActive,[check.pageHelpContent._id])"
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>-->
|
||||
<td>
|
||||
<mat-slide-toggle [checked]="check.pageHelpContent.isActive"
|
||||
(change)="($event.source.checked = check.pageHelpContent.isActive);togglePageHelpContents(!check.pageHelpContent.isActive,[check.pageHelpContent._id])"></mat-slide-toggle>
|
||||
</td>
|
||||
<td>
|
||||
<!-- <div class="actions" href="#">-->
|
||||
<!-- <input title="Edit" src="assets/imgs/icn_edit.png" class="edit uk-margin-small-right" type="image" (click)="editPageHelpContent(check.pageHelpContent._id)">-->
|
||||
<!-- <input title="Delete" src="assets/imgs/icn_trash.png" class="delete" type="image" (click)="confirmDeletePageHelpContent(check.pageHelpContent._id)">-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="actions" href="#">
|
||||
<i class="clickable" uk-icon="pencil"
|
||||
(click)="editPageHelpContent(check.pageHelpContent._id)"></i>
|
||||
<i class="clickable uk-text-danger" uk-icon="trash"
|
||||
(click)="confirmDeletePageHelpContent(check.pageHelpContent._id)"></i>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="uk-width-1-5 uk-first-column">
|
||||
|
||||
<div class=" uk-flex-center uk-flex">
|
||||
<div class="actions" href="#">
|
||||
<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>
|
||||
<span class="uk-margin-small-left">
|
||||
Edit
|
||||
</span>
|
||||
</div>
|
||||
<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>
|
||||
<span class="uk-margin-small-left">
|
||||
Delete
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div *ngIf="checkboxes.length==0" class="col-md-12">
|
||||
<div class="uk-alert-warning" uk-alert>No page contents found</div>
|
||||
</div>
|
||||
<div class="uk-width-1-1 uk-flex uk-flex-center ">
|
||||
<div class="uk-width-small uk-button-default uk-button" (click)="newPageContent()">
|
||||
<i class="" uk-icon="plus"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<a *ngIf="selectedPageId && page" [queryParams]="{type: page.type, communityId: selectedCommunityPid}"
|
||||
routerLink="../../pages/">Go back to {{page.type}} pages</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <fab (clicked)="newPageContent()"></fab>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <delete-confirmation-dialog #deleteConfirmationModal [isModalShown]="isModalShown" (emmitObject)="confirmedDeletePageHelpContents($event)">
|
||||
Are you sure you want to delete the selected page content(s)?
|
||||
</delete-confirmation-dialog> -->
|
||||
</div>
|
||||
<modal-alert #AlertModalDeletePageHelpContents (alertOutput)="confirmedDeletePageHelpContents($event)"></modal-alert>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,9 @@ import {LoginErrorCodes} from '../../login/utils/guardHelper.class';
|
|||
import {HelperFunctions} from "../../utils/HelperFunctions.class";
|
||||
import {Subscriber} from "rxjs";
|
||||
import {properties} from "../../../../environments/environment";
|
||||
import {DomSanitizer} from '@angular/platform-browser';
|
||||
import {SearchInputComponent} from '../../sharedComponents/search-input/search-input.component';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'page-help-contents',
|
||||
|
|
@ -59,6 +62,8 @@ export class PageHelpContentsComponent implements OnInit {
|
|||
public selectForm: FormControl;
|
||||
public selectOptions = [];
|
||||
private subscriptions: any[] = [];
|
||||
public selectedKeyword: string;
|
||||
@ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
|
||||
|
||||
ngOnInit() {
|
||||
this.filterForm = this._fb.control('');
|
||||
|
|
@ -69,27 +74,26 @@ export class PageHelpContentsComponent implements OnInit {
|
|||
this.subscriptions.push(this.selectForm.valueChanges.subscribe(value => {
|
||||
this.filterByPage(value);
|
||||
}));
|
||||
this.route.data
|
||||
.subscribe((data: { envSpecific: EnvProperties }) => {
|
||||
this.properties = data.envSpecific;
|
||||
this.route.queryParams.subscribe(params => {
|
||||
HelperFunctions.scroll();
|
||||
|
||||
this.selectedCommunityPid = params['communityId'];
|
||||
this.selectedPageId = params['pageId'];
|
||||
this.properties = properties;
|
||||
this.subscriptions.push(this.route.params.subscribe(params => {
|
||||
this.selectedCommunityPid = params['community'];
|
||||
this.subscriptions.push(this.route.queryParams.subscribe(params => {
|
||||
HelperFunctions.scroll();
|
||||
this.selectedPageId = params['pageId'];
|
||||
if (this.selectedCommunityPid && this.selectedPageId) {
|
||||
this.getPage(this.selectedPageId);
|
||||
}
|
||||
if(!this.selectedPageId) {
|
||||
this.router.navigate(['../pages'], {relativeTo: this.route });
|
||||
}
|
||||
}));
|
||||
}));
|
||||
|
||||
if (this.selectedCommunityPid && this.selectedPageId) {
|
||||
this.getPage(this.selectedPageId);
|
||||
} else if (this.selectedCommunityPid) {
|
||||
this.selectedPageId = "";
|
||||
this.getPages(this.selectedCommunityPid);
|
||||
}
|
||||
});
|
||||
});
|
||||
// this.myForm = this.formComponent.form;
|
||||
}
|
||||
|
||||
constructor(private element: ElementRef, private route: ActivatedRoute, private router: Router, private _helpService: HelpContentService, private _fb: FormBuilder) {
|
||||
constructor(private element: ElementRef, private route: ActivatedRoute, private router: Router, private _helpService: HelpContentService, private _fb: FormBuilder, private sanitizer: DomSanitizer) {
|
||||
}
|
||||
ngOnDestroy(): void {
|
||||
this.subscriptions.forEach(value => {
|
||||
|
|
@ -115,8 +119,7 @@ export class PageHelpContentsComponent implements OnInit {
|
|||
this.showLoading = true;
|
||||
this.updateErrorMessage = "";
|
||||
this.errorMessage = "";
|
||||
|
||||
this._helpService.getPageByPortal(pageId, this.properties.adminToolsAPIURL, this.selectedCommunityPid).subscribe(
|
||||
this.subscriptions.push(this._helpService.getPageByPortal(pageId, this.properties.adminToolsAPIURL, this.selectedCommunityPid).subscribe(
|
||||
page => {
|
||||
if (this.properties.adminToolsPortalType != page.portalType) {
|
||||
this.router.navigate(['./pageContents'], {queryParams: {"communityId": this.selectedCommunityPid}});
|
||||
|
|
@ -125,7 +128,7 @@ export class PageHelpContentsComponent implements OnInit {
|
|||
this.getPageHelpContents(this.selectedCommunityPid);
|
||||
}
|
||||
},
|
||||
error => this.handleError('System error retrieving page', error));
|
||||
error => this.handleError('System error retrieving page', error)));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -143,7 +146,7 @@ export class PageHelpContentsComponent implements OnInit {
|
|||
this.errorMessage = "";
|
||||
|
||||
//this._helpService.getCommunityPages(community_pid, "", this.properties.adminToolsAPIURL).subscribe(
|
||||
this._helpService.getCommunityPagesWithPositions(community_pid,this.properties.adminToolsAPIURL).subscribe(
|
||||
this.subscriptions.push(this._helpService.getCommunityPagesWithPositions(community_pid,this.properties.adminToolsAPIURL).subscribe(
|
||||
pages => {
|
||||
this.pages = pages;
|
||||
this.getPageHelpContents(this.selectedCommunityPid);
|
||||
|
|
@ -152,7 +155,7 @@ export class PageHelpContentsComponent implements OnInit {
|
|||
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)));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -178,7 +181,7 @@ export class PageHelpContentsComponent implements OnInit {
|
|||
}
|
||||
});
|
||||
} else {
|
||||
this._helpService.getCommunityPageHelpContents(community_pid, this.properties.adminToolsAPIURL).subscribe(
|
||||
this.subscriptions.push(this._helpService.getCommunityPageHelpContents(community_pid, this.properties.adminToolsAPIURL).subscribe(
|
||||
pageHelpContents => {
|
||||
this.pageHelpContents = pageHelpContents as Array<PageHelpContent>;
|
||||
this.counter.all = this.pageHelpContents.length;
|
||||
|
|
@ -202,7 +205,7 @@ export class PageHelpContentsComponent implements OnInit {
|
|||
|
||||
this.showLoading = false;
|
||||
},
|
||||
error => this.handleError('System error retrieving page contents', error));
|
||||
error => this.handleError('System error retrieving page contents', error)));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -269,13 +272,13 @@ export class PageHelpContentsComponent implements OnInit {
|
|||
this.showLoading = true;
|
||||
this.updateErrorMessage = "";
|
||||
|
||||
this._helpService.deletePageHelpContents(this.selectedPageContents, this.properties.adminToolsAPIURL, this.selectedCommunityPid).subscribe(
|
||||
this.subscriptions.push(this._helpService.deletePageHelpContents(this.selectedPageContents, this.properties.adminToolsAPIURL, this.selectedCommunityPid).subscribe(
|
||||
_ => {
|
||||
this.deletePageHelpContentsFromArray(this.selectedPageContents);
|
||||
this.showLoading = false;
|
||||
},
|
||||
error => this.handleUpdateError('System error deleting the selected page content(s)', error)
|
||||
);
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -320,7 +323,7 @@ export class PageHelpContentsComponent implements OnInit {
|
|||
} else {
|
||||
this.updateErrorMessage = "";
|
||||
|
||||
this._helpService.togglePageHelpContents(ids, status, this.properties.adminToolsAPIURL, this.selectedCommunityPid).subscribe(
|
||||
this.subscriptions.push(this._helpService.togglePageHelpContents(ids, status, this.properties.adminToolsAPIURL, this.selectedCommunityPid).subscribe(
|
||||
() => {
|
||||
for (let id of ids) {
|
||||
let i = this.checkboxes.findIndex(_ => _.pageHelpContent._id == id);
|
||||
|
|
@ -330,7 +333,7 @@ export class PageHelpContentsComponent implements OnInit {
|
|||
this.applyCheck(false);
|
||||
},
|
||||
error => this.handleUpdateError('System error changing the status of the selected page content(s)', error)
|
||||
);
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -421,15 +424,25 @@ export class PageHelpContentsComponent implements OnInit {
|
|||
}
|
||||
|
||||
public newPageContent() {
|
||||
if (this.selectedPageId) {
|
||||
this.router.navigate(['new'], {
|
||||
this.router.navigate(['edit'], {
|
||||
queryParams: {
|
||||
communityId: this.selectedCommunityPid,
|
||||
pageId: this.selectedPageId
|
||||
}, relativeTo: this.route
|
||||
});
|
||||
} else {
|
||||
this.router.navigate(['new'], {queryParams: {communityId: this.selectedCommunityPid}, relativeTo: this.route});
|
||||
}
|
||||
}
|
||||
|
||||
public onSearchClose() {
|
||||
this.selectedKeyword = this.filterForm.value;
|
||||
}
|
||||
|
||||
public reset() {
|
||||
this.selectedKeyword = null;
|
||||
this.searchInputComponent.reset()
|
||||
}
|
||||
selectAll(){
|
||||
let checked = !!(this.getSelectedPageHelpContents().length != this.checkboxes.length);
|
||||
for (let check of this.checkboxes) {
|
||||
check.checked = checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,14 +8,21 @@ import {AlertModalModule} from '../../utils/modal/alertModal.module';
|
|||
import {PageHelpContentsComponent} from './page-help-contents.component';
|
||||
import {SafeHtmlPipeModule} from '../../utils/pipes/safeHTMLPipe.module';
|
||||
import {MatSlideToggleModule} from '@angular/material';
|
||||
import {AdminToolServiceModule} from "../../services/adminToolService.module";
|
||||
import {InputModule} from "../../sharedComponents/input/input.module";
|
||||
import {PageHelpContentsRoutingModule} from "./page-help-contents-routing.module";
|
||||
import {AdminToolServiceModule} from '../../services/adminToolService.module';
|
||||
import {InputModule} from '../../sharedComponents/input/input.module';
|
||||
import {PageHelpContentsRoutingModule} from './page-help-contents-routing.module';
|
||||
import {PageContentModule} from '../sharedComponents/page-content/page-content.module';
|
||||
import {SearchInputModule} from '../../sharedComponents/search-input/search-input.module';
|
||||
import {IconsModule} from '../../utils/icons/icons.module';
|
||||
import {IconsService} from '../../utils/icons/icons.service';
|
||||
import {add, arrow_left} from '../../utils/icons/icons';
|
||||
import {LoadingModule} from '../../utils/loading/loading.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, RouterModule, FormsModule, SafeHtmlPipeModule,
|
||||
AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, AdminToolServiceModule, InputModule, PageHelpContentsRoutingModule
|
||||
AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, AdminToolServiceModule, InputModule, PageHelpContentsRoutingModule, PageContentModule,
|
||||
SearchInputModule, IconsModule, LoadingModule
|
||||
],
|
||||
declarations: [
|
||||
PageHelpContentsComponent
|
||||
|
|
@ -23,4 +30,8 @@ import {PageHelpContentsRoutingModule} from "./page-help-contents-routing.module
|
|||
providers: [IsCommunity, ConnectAdminLoginGuard],
|
||||
exports: [PageHelpContentsComponent]
|
||||
})
|
||||
export class PageHelpContentsModule { }
|
||||
export class PageHelpContentsModule {
|
||||
constructor(private iconsService: IconsService) {
|
||||
this.iconsService.registerIcons([add, arrow_left])
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,26 +11,12 @@
|
|||
(click)="filterForm.get('type').setValue(type.value)"><span>{{type.label}}</span></a></li>
|
||||
</ul>
|
||||
</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-margin-remove-top"
|
||||
uk-grid>
|
||||
<div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search page"
|
||||
[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>
|
||||
<div class="show-options">
|
||||
<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]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="Select at least one page">
|
||||
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
|
||||
(click)="togglePages(true, getSelectedPages())"> Activate
|
||||
</a></li>
|
||||
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
|
||||
(click)="togglePages(false, getSelectedPages())"> Deactivate
|
||||
</a></li>
|
||||
<li *ngIf="isPortalAdministrator"><a (click)="confirmDeleteSelectedPages()"> Delete </a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="isPortalAdministrator">
|
||||
<a (click)="newPage()"
|
||||
class="uk-flex uk-flex-middle uk-text-uppercase">
|
||||
|
|
@ -42,21 +28,38 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="checkboxes.length > 0"
|
||||
class="uk-padding uk-padding-remove-bottom uk-padding-remove-top uk-margin-remove-top uk-margin-small-bottom"
|
||||
[attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="Select at least one help text"><input id="checkAll" type="checkbox" (click)="selectAll()"
|
||||
[ngModel]="getSelectedPages().length ==checkboxes.length"/>
|
||||
<span *ngIf="getSelectedPages().length > 0" class="uk-margin-left uk-text-muted">
|
||||
{{getSelectedPages().length}} pages selected </span>
|
||||
<a class="uk-margin-left ">Actions </a>
|
||||
<div uk-dropdown="mode: click">
|
||||
<ul class="uk-nav uk-dropdown-nav"
|
||||
[attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="Select at least one help text">
|
||||
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
|
||||
(click)="togglePages(true,getSelectedPages())"><i></i> Enable
|
||||
</a></li>
|
||||
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
|
||||
(click)="togglePages(false,getSelectedPages())"><i></i> Disable
|
||||
</a>
|
||||
</li>
|
||||
<li *ngIf="isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
|
||||
(click)="confirmDeleteSelectedPages()"><i></i> Delete </a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div inner>
|
||||
<loading *ngIf="showLoading" class="uk-margin-large-top"></loading>
|
||||
<div *ngIf="showLoading" class="uk-position-center">
|
||||
<loading *ngIf="showLoading"></loading>
|
||||
</div>
|
||||
<div *ngIf="!showLoading">
|
||||
<div *ngIf="!isPortalAdministrator" class="uk-alert uk-alert-primary uk-margin-top-large">
|
||||
<div>
|
||||
<span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
|
||||
Disable a page to hide it from community dashboard portal.
|
||||
</div>
|
||||
<div
|
||||
class="uk-text-small">If the page is disabled, a message "Can't find that page" will appear in case the url
|
||||
of that page is loaded. If the disabled 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}}
|
||||
|
|
@ -93,26 +96,34 @@
|
|||
(click)="confirmDeletePage(check.page._id)" uk-icon="trash"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="!isPortalAdministrator" class="uk-width-1-4">
|
||||
<div *ngIf="!isPortalAdministrator && ((check.page.top || check.page.bottom || check.page.left ||
|
||||
check.page.right) || pageWithDivIds.includes(check.page._id) )" class="uk-width-1-4">
|
||||
<div class="title uk-margin-medium-bottom">Helptexts</div>
|
||||
<div class=" uk-margin-small-bottom">
|
||||
<a *ngIf="check.page.top || check.page.bottom || check.page.left || check.page.right"
|
||||
class="helpContents"
|
||||
[queryParams]="{communityId: portal, pageId: check.page._id}"
|
||||
routerLink="../../helptexts">
|
||||
[queryParams]="{pageId: check.page._id}"
|
||||
routerLink="../helptexts">
|
||||
manage help texts
|
||||
<span *ngIf="pageHelpContents[check.page._id]">({{pageHelpContents[check.page._id]}})</span>
|
||||
</a>
|
||||
<span *ngIf="!(check.page.top || check.page.bottom || check.page.left || check.page.right)"
|
||||
class="helpContents">
|
||||
no helptexts available
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<a *ngIf="pageWithDivIds.includes(check.page._id)" class="classHelpContents"
|
||||
[queryParams]="{communityId: portal, pageId: check.page._id}"
|
||||
routerLink="../../classContents">manage class contents</a>
|
||||
[queryParams]="{ pageId: check.page._id}"
|
||||
routerLink="../classContents">manage class contents</a>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="!isPortalAdministrator" class="uk-width-1-4">
|
||||
<div class="title uk-margin-medium-bottom">Enable/disable</div>
|
||||
<mat-slide-toggle [checked]="check.page.isEnabled"
|
||||
(change)="($event.source.checked = check.page.isEnabled);togglePages(!check.page.isEnabled,[check.page._id])"></mat-slide-toggle>
|
||||
(change)="($event.source.checked = check.page.isEnabled);togglePages(!check.page.isEnabled,[check.page._id])"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'><div class='uk-text-bold '>Disable a page to hide it from community dashboard portal.</div><div class=' uk-margin-top'>If the page is disabled, a message 'Can't find that page' will appear in case the url of that page is loaded. If the disabled page belongs to the menu, the link will be removed from menu, too.</div></div>">
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import {ConnectHelper} from "../../connect/connectHelper";
|
|||
import {Option} from "../../sharedComponents/input/input.component";
|
||||
import {AlertModal} from "../../utils/modal/alert";
|
||||
import {SearchInputComponent} from "../../sharedComponents/search-input/search-input.component";
|
||||
import {CheckPageHelpContent, PageHelpContent} from '../../utils/entities/adminTool/page-help-content';
|
||||
|
||||
declare var UIkit;
|
||||
|
||||
|
|
@ -59,14 +60,13 @@ export class PagesComponent implements OnInit {
|
|||
value: 'link'
|
||||
}, {label: 'Other', value: 'other'}];
|
||||
public entitiesCtrl: FormArray;
|
||||
@ViewChild('PageInput') pageInput: ElementRef<HTMLInputElement>;
|
||||
allEntities: Option[] = [];
|
||||
private subscriptions: any[] = [];
|
||||
public portalUtils: PortalUtils = new PortalUtils();
|
||||
private index: number;
|
||||
public selectedKeyword: string;
|
||||
@ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
|
||||
|
||||
pageHelpContents = {};
|
||||
constructor(private element: ElementRef, private route: ActivatedRoute,
|
||||
private _router: Router, private _helpContentService: HelpContentService,
|
||||
private userManagementService: UserManagementService, private _fb: FormBuilder) {
|
||||
|
|
@ -111,7 +111,7 @@ export class PagesComponent implements OnInit {
|
|||
});
|
||||
},
|
||||
error => this.handleError('System error retrieving pages', error)));
|
||||
|
||||
this.getPageHelpContents(this.portal);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -513,4 +513,19 @@ export class PagesComponent implements OnInit {
|
|||
this.selectedKeyword = null;
|
||||
this.searchInputComponent.reset()
|
||||
}
|
||||
selectAll(){
|
||||
let checked = !!(this.getSelectedPages().length != this.checkboxes.length);
|
||||
for (let check of this.checkboxes) {
|
||||
check.checked = checked;
|
||||
}
|
||||
}
|
||||
getPageHelpContents(community_pid: string) {
|
||||
this.subscriptions.push(this._helpContentService.getCommunityPageHelpContents(community_pid, this.properties.adminToolsAPIURL).subscribe(
|
||||
pageHelpContents => {
|
||||
for (let content of (pageHelpContents as Array<PageHelpContent>)) {
|
||||
this.pageHelpContents[content.page['_id']] = this.pageHelpContents[content.page['_id']]?this.pageHelpContents[content.page['_id']]+1:1;
|
||||
}
|
||||
},
|
||||
error => this.handleError('System error retrieving page contents', error)));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -240,7 +240,7 @@ export class HelpContentService {
|
|||
savePageHelpContent(pageHelpContent: PageHelpContent, helpContentUrl:string, pid: string) {
|
||||
HelpContentService.removeNulls(pageHelpContent);
|
||||
|
||||
return this.http.post<PageHelpContent>(helpContentUrl + properties.adminToolsPortalType + '/' + pid + '/pagehelpcontent/save',
|
||||
return this.http.post<PageHelpContent>(helpContentUrl + properties.adminToolsPortalType + '/' + pid + '/pagehelpcontent/' + (pageHelpContent._id ? 'update' : 'save'),
|
||||
JSON.stringify(pageHelpContent), CustomOptions.getAuthOptionsWithBody())
|
||||
//.map(res => <PageHelpContent> res.json())
|
||||
.pipe(catchError(this.handleError));
|
||||
|
|
|
|||
Loading…
Reference in New Issue