[Library| Trunk]
Transfer admin tool components in library & update the theme
- divHelpContent
- helpTexts
- pages
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@57928 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki
parent
00fc8806c8
commit
80a5c6e489
|
|
@ -4,7 +4,7 @@
|
|||
<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 label="Locate indicator" [formInput]="filterForm" label="Find class"></div>
|
||||
<div dashboard-input [formInput]="filterForm" label="Find class"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -85,14 +85,15 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div *ngIf="checkboxes.length==0" class="col-md-12">
|
||||
<div class="uk-alert-warning uk-alert" >No classes found</div>
|
||||
</div>
|
||||
<div class="uk-width-1-1 uk-flex uk-flex-center ">
|
||||
<div class="uk-width-small uk-flex uk-flex-center uk-button" (click)="newDivId()">
|
||||
<i class="material-icons md-48">add</i>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="checkboxes.length==0" class="col-md-12">
|
||||
<div class="uk-alert-warning uk-alert" >No classes found</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -197,7 +197,7 @@ export class DivIdsComponent implements OnInit {
|
|||
this.pagesCtrl = this._fb.array([]);
|
||||
this.myForm = this._fb.group({
|
||||
_id: divId._id,
|
||||
name: divId.name,
|
||||
name: [divId.name,Validators.required],
|
||||
pages: this.pagesCtrl,
|
||||
openaire: divId.openaire,
|
||||
connect: divId.connect,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
<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 class to be displayed, add the content and click active to make it visible to dashboard
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<form *ngIf="!errorMessage && !showLoading" [formGroup]="myForm">
|
||||
<div class="form-group">
|
||||
<div class="uk-margin-bottom" *ngIf="selectedDiv">Class content displayed in page(s): <span *ngFor="let page of selectedDiv.pages let i=index">{{page.name}}<span *ngIf="i<(selectedDiv.pages.length-1)">, </span></span></div>
|
||||
|
||||
<div *ngIf="showPageSelect && !editMode" class="form-group">
|
||||
<label for="pageTag">Select Page</label>
|
||||
<select id="pageTag" (change)="pageSelected($event)" [value]="pageId ? pageId : ''">
|
||||
<!-- <option *ngIf="!pageId">No page selected</option>-->
|
||||
<option *ngFor="let page of availablePages" [value]="page._id">{{page.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div *ngIf="pageId || selectedDiv" class="form-group">
|
||||
<label for="divTag">Select Class</label>
|
||||
<select formControlName="divId" id="divTag" class="form-control">
|
||||
<!-- <option *ngIf="selectedDiv" [value]="selectedDiv._id">{{selectedDiv.name}}</option> -->
|
||||
<option *ngFor="let div of availableDivs" [value]="div._id" (click)="divIdSelected(div)">{{div.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="form-group" [ngClass]="{'has-error':!myForm.controls.content.valid && myForm.controls.content.dirty}">
|
||||
<label>Content</label>
|
||||
<div>
|
||||
<!-- [config]="{allowedContent: true,extraAllowedContent : '*(*)'}"> -->
|
||||
<ckeditor
|
||||
[readonly]="false"
|
||||
debounce="500"
|
||||
formControlName="content"
|
||||
[config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]', removeButtons: 'Save,NewPage,DocProps,Preview,Print',
|
||||
extraPlugins: 'divarea'}">
|
||||
</ckeditor>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Select Status</label>
|
||||
<label class="checkbox">
|
||||
<span style="font-weight: normal;">Active</span>
|
||||
<input tabindex="0" type="checkbox" formControlName="isActive">
|
||||
|
||||
</label>
|
||||
</div>
|
||||
<input type="hidden" formControlName="_id">
|
||||
</form>
|
||||
<!-- <div *ngIf="selectedDiv"><span *ngFor="let page of selectedDiv.pages">{{page.name}} </span></div> -->
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
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 { DivId } from "../../utils/entities/adminTool/divId";
|
||||
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';
|
||||
|
||||
@Component({
|
||||
selector: 'div-content-form',
|
||||
templateUrl: './div-help-content-form.component.html',
|
||||
})
|
||||
|
||||
export class DivContentFormComponent implements OnInit{
|
||||
|
||||
@Input('group')
|
||||
myForm: FormGroup;
|
||||
@Input('communityPid')
|
||||
communityPid: string;
|
||||
@Input('pageId')
|
||||
pageId: string;
|
||||
@Input('editMode')
|
||||
editMode: boolean = false;
|
||||
|
||||
//public divIdName: string = '';
|
||||
|
||||
private communityId: string = '';
|
||||
|
||||
showPageSelect: boolean = true;
|
||||
selectedDiv: DivId;
|
||||
|
||||
private availablePages : Page[] = [];
|
||||
private availableDivs : DivId[] = [];
|
||||
|
||||
private ckeditorContent : string;
|
||||
|
||||
public properties:EnvProperties = null;
|
||||
|
||||
public showLoading: boolean = true;
|
||||
public errorMessage: string = '';
|
||||
@Input() updateErrorMessage: string = '';
|
||||
|
||||
constructor(private route: ActivatedRoute, private _router: Router, private _fb: FormBuilder, private _helpContentService: HelpContentService){}
|
||||
|
||||
ngOnInit() {
|
||||
this.myForm = this.form;
|
||||
this.route.data
|
||||
.subscribe((data: { envSpecific: EnvProperties }) => {
|
||||
this.properties = data.envSpecific;
|
||||
this.route.queryParams.subscribe(params => {
|
||||
|
||||
if(!Session.isLoggedIn()){
|
||||
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
|
||||
} else {
|
||||
if(this.pageId) {
|
||||
this.showPageSelect = false;
|
||||
this.getDivs(this.pageId);
|
||||
} else {
|
||||
if(!this.editMode) {
|
||||
this._helpContentService.getCommunityPagesWithDivId(this.communityPid, this.properties.adminToolsAPIURL).subscribe(
|
||||
pages => {
|
||||
this.availablePages = pages;
|
||||
this.showLoading = false;
|
||||
},
|
||||
error => this.handleError('System error retrieving pages', error));
|
||||
}
|
||||
}
|
||||
|
||||
this.getCommunity(this.communityPid);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
public pageSelected(event) {
|
||||
if(!Session.isLoggedIn()){
|
||||
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
|
||||
} else {
|
||||
this.getDivs(event.target.value);
|
||||
}
|
||||
}
|
||||
|
||||
public divIdSelected(div: DivId) {
|
||||
this.selectedDiv = div;
|
||||
}
|
||||
|
||||
public getCommunity(communityPid: 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._helpContentService.getCommunity(this.communityPid, this.properties.adminToolsAPIURL).subscribe(
|
||||
community => {
|
||||
this.communityId = community._id;
|
||||
|
||||
this.myForm.patchValue({
|
||||
community: this.communityId
|
||||
});
|
||||
this.showLoading = false;
|
||||
},
|
||||
error => this.handleError('System error retrieving community', error)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
public getDivs(pageId: 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._helpContentService.getDivIdsFull(pageId, this.properties.adminToolsAPIURL, this.communityPid).subscribe(
|
||||
divs => {
|
||||
this.availableDivs = divs;
|
||||
this.pageId = pageId;
|
||||
|
||||
this.showLoading = false;
|
||||
},
|
||||
error => this.handleError('System error retrieving pages', error));
|
||||
}
|
||||
}
|
||||
|
||||
// public selectedDiv(event) {
|
||||
// console.info(event.target.value);
|
||||
// }
|
||||
|
||||
public get form() {
|
||||
return this._fb.group({
|
||||
divId: ['', Validators.required],
|
||||
content: ['', Validators.required],
|
||||
isActive: true,
|
||||
community: '',
|
||||
_id : '',
|
||||
});
|
||||
}
|
||||
|
||||
public reset() {
|
||||
this.myForm.patchValue({
|
||||
divId: '',
|
||||
content: '',
|
||||
isActive: true,
|
||||
community: '',
|
||||
_id : ''
|
||||
});
|
||||
this.myForm.markAsPristine();
|
||||
}
|
||||
|
||||
handleError(message: string, error) {
|
||||
this.errorMessage = message;
|
||||
console.log('Server responded: ' + error);
|
||||
|
||||
this.showLoading = false;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
|
||||
import {AlertModalModule} from '../../utils/modal/alertModal.module';
|
||||
import {SafeHtmlPipeModule} from '../../utils/pipes/safeHTMLPipe.module';
|
||||
import {DivContentFormComponent} from './div-help-content-form.component';
|
||||
import {CKEditorModule} from 'ng2-ckeditor';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule,
|
||||
SafeHtmlPipeModule, CKEditorModule,
|
||||
AlertModalModule, ReactiveFormsModule
|
||||
],
|
||||
declarations: [
|
||||
DivContentFormComponent
|
||||
],
|
||||
exports: [DivContentFormComponent]
|
||||
})
|
||||
export class DivHelpContentFormModule { }
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {IsCommunity} from '../../connect/communityGuard/isCommunity.guard';
|
||||
import {ConnectAdminLoginGuard} from '../../connect/communityGuard/connectAdminLoginGuard.guard';
|
||||
import {DivHelpContentsComponent} from './div-help-contents.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild([
|
||||
{ path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: DivHelpContentsComponent}
|
||||
])
|
||||
]
|
||||
})
|
||||
export class DivHelpContentsRoutingModule { }
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
<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>
|
||||
<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 class"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="page_content_inner">
|
||||
|
||||
<div class="menubar ">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div *ngIf="!errorMessage && !showLoading" class="page-controls">
|
||||
<div class=" filters ">
|
||||
<div class="show-options uk-float-right">
|
||||
<button class="uk-button uk-button-primary" type="button">Bulk Actions</button>
|
||||
<div uk-dropdown="mode: click">
|
||||
<ul class="uk-nav uk-navbar-dropdown-nav uk-margin-left"
|
||||
[attr.uk-tooltip]="getSelectedDivHelpContents().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
|
||||
title="Select at least one help text">
|
||||
<li><a [class]="getSelectedDivHelpContents().length == 0 ? 'uk-disabled' : ''"
|
||||
(click)="toggleDivHelpContents(true,getSelectedDivHelpContents())"><i></i> Activate </a></li>
|
||||
<li><a [class]="getSelectedDivHelpContents().length == 0 ? 'uk-disabled' : ''"
|
||||
(click)="toggleDivHelpContents(false,getSelectedDivHelpContents())"><i></i> Deactivate </a></li>
|
||||
<li><a [class]="getSelectedDivHelpContents().length == 0 ? 'uk-disabled' : ''"
|
||||
(click)="confirmDeleteSelectedDivHelpContents()"><i></i> Delete </a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="uk-text-bold">
|
||||
<span *ngIf="!selectedPageId" >Class help texts</span>
|
||||
<span *ngIf="selectedPageId && page">Class help texts of page '{{page.name}}'
|
||||
</span>
|
||||
</h4>
|
||||
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
|
||||
<a class="uk-alert-close" uk-close></a>
|
||||
{{updateErrorMessage}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrapper" id="contentWrapper">
|
||||
|
||||
<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="!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)="displayAllDivHelpContents()">
|
||||
<a>All class help texts <span class="uk-badge">{{counter.all | number}}</span></a>
|
||||
</li>
|
||||
<li [ngClass]="{'uk-active' : filters.active==true}" (click)="displayActiveDivHelpContents()">
|
||||
<a>Active <span class="uk-badge">{{counter.active | number}}</span></a>
|
||||
</li>
|
||||
<li [ngClass]="{'uk-active' : filters.active==false}" (click)="displayInactiveDivHelpContents()">
|
||||
<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="allDivHelpContentsCheckbox" type="checkbox"
|
||||
(change)="toggleCheckBoxes($event)"></th>
|
||||
<th *ngIf="!selectedPageId">Page</th>
|
||||
<!--th *ngIf="!selectedPageId">Community</th-->
|
||||
<th>Class</th>
|
||||
<th>Content</th>
|
||||
<th>Change status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let check of checkboxes; let i=index">
|
||||
<td><input id="{{check.divHelpContent._id}}" class="checkBox" type="checkbox"
|
||||
name="entitiescb[]" value="{{check.divHelpContent._id}}"
|
||||
[(ngModel)]="check.checked">
|
||||
</td>
|
||||
<td *ngIf="!selectedPageId">
|
||||
<!-- <div class="page" href="#">{{check.divHelpContent.divId.page.name}}</div> -->
|
||||
<div class="pages" href="#">
|
||||
<span *ngFor="let page of check.divHelpContent.divId.pages let i=index">{{page.name}}<span
|
||||
*ngIf="i<(check.divHelpContent.divId.pages.length-1)">, </span></span>
|
||||
</div>
|
||||
</td>
|
||||
<!--td *ngIf="!selectedPageId">
|
||||
<div class="community" href="#">{{check.divHelpContent.community.name}}</div>
|
||||
</td-->
|
||||
<td>
|
||||
<div class="divId" href="#">{{check.divHelpContent.divId.name}}</div>
|
||||
</td>
|
||||
<td>
|
||||
<!-- <div class="content" [innerHTML]="check.divHelpContent.content | safeHtml"></div>-->
|
||||
<div class="content">{{check.divHelpContent.content}}</div>
|
||||
</td>
|
||||
<td>
|
||||
<mat-slide-toggle [checked]="check.divHelpContent.isActive"
|
||||
(change)="($event.source.checked = check.divHelpContent.isActive);toggleDivHelpContents(!check.divHelpContent.isActive,[check.divHelpContent._id])"></mat-slide-toggle>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div class="actions" href="#">
|
||||
<i class="md-icon material-icons"
|
||||
(click)="editDivHelpContent(check.divHelpContent._id)"></i>
|
||||
<i class="material-icons md-icon"
|
||||
(click)="confirmDeleteDivHelpContent(check.divHelpContent._id)">delete</i>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="uk-width-1-1 uk-flex uk-flex-center ">
|
||||
<div class="uk-width-small uk-flex uk-flex-center uk-button" (click)="newClassContent()">
|
||||
<i class="material-icons md-48">add</i>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="checkboxes.length==0" class="col-md-12">
|
||||
<div class="uk-alert-warning" uk-alert>No class help texts found</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>
|
||||
</div>
|
||||
<modal-alert #AlertModalDeleteDivHelpContents (alertOutput)="confirmedDeleteDivHelpContents($event)"></modal-alert>
|
||||
|
|
@ -0,0 +1,438 @@
|
|||
import {Component, ViewChild, OnInit, ElementRef} from '@angular/core';
|
||||
import {Router, ActivatedRoute} from "@angular/router";
|
||||
import {FormBuilder, FormControl, FormGroup} from "@angular/forms";
|
||||
import {HelpContentService} from "../../services/help-content.service";
|
||||
import {
|
||||
DivHelpContent,
|
||||
CheckDivHelpContent,
|
||||
DivHelpContentFilterOptions
|
||||
} from "../../utils/entities/adminTool/div-help-content";
|
||||
import {Page} from "../../utils/entities/adminTool/page";
|
||||
import {Community} from "../../utils/entities/adminTool/community";
|
||||
import {DivId} from "../../utils/entities/adminTool/divId";
|
||||
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 {Subscriber} from "rxjs";
|
||||
|
||||
@Component({
|
||||
selector: 'div-help-contents',
|
||||
templateUrl: './div-help-contents.component.html',
|
||||
})
|
||||
|
||||
export class DivHelpContentsComponent implements OnInit {
|
||||
// @ViewChild('deleteConfirmationModal')
|
||||
// public deleteConfirmationModal : DeleteConfirmationDialogComponent;
|
||||
@ViewChild('AlertModalDeleteDivHelpContents') alertModalDeleteDivHelpContents;
|
||||
private selectedDivContents: string[] = [];
|
||||
|
||||
public checkboxes: CheckDivHelpContent[] = [];
|
||||
|
||||
public divHelpContents: DivHelpContent[] = [];
|
||||
|
||||
//public errorMessage: string;
|
||||
|
||||
public formGroup: FormGroup;
|
||||
|
||||
public pages: Page[];
|
||||
|
||||
public checkboxAll: boolean = false;
|
||||
|
||||
public filters: DivHelpContentFilterOptions = {id: '', active: null, text: new RegExp('')};
|
||||
public keyword: string = "";
|
||||
|
||||
public counter = {all: 0, active: 0, inactive: 0};
|
||||
|
||||
public communities: Community[] = [];
|
||||
|
||||
public selectedCommunityPid: string;
|
||||
|
||||
public selectedPageId: string;
|
||||
|
||||
public community: Community;
|
||||
|
||||
public page: Page;
|
||||
public properties: EnvProperties = null;
|
||||
|
||||
public showLoading: boolean = true;
|
||||
public errorMessage: string = '';
|
||||
public updateErrorMessage: string = '';
|
||||
public filterForm: FormControl;
|
||||
public selectForm: FormControl;
|
||||
public selectOptions = [];
|
||||
private subscriptions: any[] = [];
|
||||
|
||||
ngOnInit() {
|
||||
this.filterForm = this._fb.control('');
|
||||
this.selectForm = this._fb.control('');
|
||||
this.subscriptions.push(this.filterForm.valueChanges.subscribe(value => {
|
||||
this.filterBySearch(value);
|
||||
}));
|
||||
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'];
|
||||
|
||||
if (this.selectedCommunityPid && this.selectedPageId) {
|
||||
this.getPage(this.selectedPageId);
|
||||
} else if (this.selectedCommunityPid) {
|
||||
this.selectedPageId = "";
|
||||
this.getPages(this.selectedCommunityPid);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
constructor(private element: ElementRef, private route: ActivatedRoute, private _helpService: HelpContentService, private router: Router, private _fb: FormBuilder) {
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.subscriptions.forEach(value => {
|
||||
if (value instanceof Subscriber) {
|
||||
value.unsubscribe();
|
||||
} else if (value instanceof Function) {
|
||||
value();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getPage(pageId: string) {
|
||||
if (!Session.isLoggedIn()) {
|
||||
this.router.navigate(['/user-info'], {
|
||||
queryParams: {
|
||||
"errorCode": LoginErrorCodes.NOT_VALID,
|
||||
"redirectUrl": this.router.url
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.showLoading = true;
|
||||
this.updateErrorMessage = "";
|
||||
this.errorMessage = "";
|
||||
|
||||
this._helpService.getPage(pageId, this.properties.adminToolsAPIURL).subscribe(
|
||||
page => {
|
||||
if ((this.selectedCommunityPid == 'openaire' && !page.openaire)
|
||||
|| (this.selectedCommunityPid == 'connect' && !page.connect)
|
||||
|| (this.selectedCommunityPid != 'openaire' && this.selectedCommunityPid != 'connect' && !page.communities)) {
|
||||
this.router.navigate(['/classContents'], {queryParams: {"communityId": this.selectedCommunityPid}});
|
||||
} else {
|
||||
this.page = page;
|
||||
this.getDivHelpContents(this.selectedCommunityPid);
|
||||
}
|
||||
},
|
||||
error => this.handleError('System error retrieving page', error));
|
||||
}
|
||||
}
|
||||
|
||||
getPages(community_pid: string) {
|
||||
if (!Session.isLoggedIn()) {
|
||||
this.router.navigate(['/user-info'], {
|
||||
queryParams: {
|
||||
"errorCode": LoginErrorCodes.NOT_VALID,
|
||||
"redirectUrl": this.router.url
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.showLoading = true;
|
||||
this.updateErrorMessage = "";
|
||||
this.errorMessage = "";
|
||||
|
||||
this._helpService.getCommunityPagesWithDivId(community_pid, this.properties.adminToolsAPIURL).subscribe(
|
||||
//this._helpService.getPagesWithDivIds(community_pid, this.properties.adminToolsAPIURL).subscribe(
|
||||
pages => {
|
||||
this.pages = pages;
|
||||
this.getDivHelpContents(this.selectedCommunityPid);
|
||||
this.selectOptions = [{label:'All pages', value: ''}];
|
||||
for (let page of this.pages) {
|
||||
this.selectOptions.push({label:page.name, value: page._id})
|
||||
}
|
||||
},
|
||||
error => this.handleError('System error retrieving pages', error));
|
||||
}
|
||||
}
|
||||
|
||||
public countDivHelpContents() {
|
||||
this.counter = {all: 0, active: 0, inactive: 0};
|
||||
let filter = Object.assign({}, this.filters);
|
||||
filter.active = null;
|
||||
this.divHelpContents.forEach(_ => {
|
||||
if (this.filterDivHelpContent(_, filter)) {
|
||||
if (_.isActive == true) this.counter.active++;
|
||||
else this.counter.inactive++
|
||||
}
|
||||
});
|
||||
this.counter.all = this.counter.active + this.counter.inactive;
|
||||
}
|
||||
|
||||
getDivHelpContents(community_pid: string) {
|
||||
if (!Session.isLoggedIn()) {
|
||||
this.router.navigate(['/user-info'], {
|
||||
queryParams: {
|
||||
"errorCode": LoginErrorCodes.NOT_VALID,
|
||||
"redirectUrl": this.router.url
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this._helpService.getCommunityDivHelpContents(community_pid, this.properties.adminToolsAPIURL).subscribe(
|
||||
divHelpContents => {
|
||||
this.divHelpContents = divHelpContents as Array<DivHelpContent>;
|
||||
this.counter.all = this.divHelpContents.length;
|
||||
this.checkboxes = [];
|
||||
|
||||
for (let i = this.divHelpContents.length - 1; i >= 0; i -= 1) {
|
||||
//for (let i = 0; i < this.divHelpContents.length; i++) {
|
||||
let divId: DivId = this.divHelpContents[i].divId as DivId;
|
||||
let pages: Page[] = divId.pages as Page[];
|
||||
const pageIds = pages.map(x => x._id);
|
||||
|
||||
if (!this.selectedPageId || pageIds.includes(this.selectedPageId)) {
|
||||
this.cutContent(this.divHelpContents[i]);
|
||||
this.checkboxes.unshift(<CheckDivHelpContent>{divHelpContent: this.divHelpContents[i], checked: false});
|
||||
} else {
|
||||
this.divHelpContents.splice(i, 1);
|
||||
}
|
||||
}
|
||||
|
||||
this.countDivHelpContents();
|
||||
|
||||
this.showLoading = false;
|
||||
},
|
||||
error => this.handleError('System error retrieving page contents', error));
|
||||
}
|
||||
}
|
||||
|
||||
public toggleCheckBoxes(event) {
|
||||
this.checkboxes.forEach(_ => _.checked = event.target.checked);
|
||||
this.checkboxAll = event.target.checked;
|
||||
}
|
||||
|
||||
public applyCheck(flag: boolean) {
|
||||
this.checkboxes.forEach(_ => _.checked = flag);
|
||||
this.checkboxAll = false;
|
||||
}
|
||||
|
||||
public getSelectedDivHelpContents(): string[] {
|
||||
return this.checkboxes.filter(divHelpContent => divHelpContent.checked == true)
|
||||
.map(checkedDivHelpContent => checkedDivHelpContent.divHelpContent).map(res => res._id);
|
||||
}
|
||||
|
||||
public confirmDeleteDivHelpContent(id: string) {
|
||||
//this.deleteConfirmationModal.ids = [id];
|
||||
//this.deleteConfirmationModal.showModal();
|
||||
this.selectedDivContents = [id];
|
||||
this.confirmModalOpen();
|
||||
}
|
||||
|
||||
public confirmDeleteSelectedDivHelpContents() {
|
||||
//this.deleteConfirmationModal.ids = this.getSelectedDivHelpContents();
|
||||
//this.deleteConfirmationModal.showModal();
|
||||
this.selectedDivContents = this.getSelectedDivHelpContents();
|
||||
this.confirmModalOpen();
|
||||
}
|
||||
|
||||
private confirmModalOpen() {
|
||||
if (!Session.isLoggedIn()) {
|
||||
this.router.navigate(['/user-info'], {
|
||||
queryParams: {
|
||||
"errorCode": LoginErrorCodes.NOT_VALID,
|
||||
"redirectUrl": this.router.url
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.alertModalDeleteDivHelpContents.cancelButton = true;
|
||||
this.alertModalDeleteDivHelpContents.okButton = true;
|
||||
this.alertModalDeleteDivHelpContents.alertTitle = "Delete Confirmation";
|
||||
this.alertModalDeleteDivHelpContents.message = "Are you sure you want to delete the help text(s)?";
|
||||
this.alertModalDeleteDivHelpContents.okButtonText = "Yes";
|
||||
this.alertModalDeleteDivHelpContents.open();
|
||||
}
|
||||
}
|
||||
|
||||
public confirmedDeleteDivHelpContents(data: any) {
|
||||
if (!Session.isLoggedIn()) {
|
||||
this.router.navigate(['/user-info'], {
|
||||
queryParams: {
|
||||
"errorCode": LoginErrorCodes.NOT_VALID,
|
||||
"redirectUrl": this.router.url
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.showLoading = true;
|
||||
this.updateErrorMessage = "";
|
||||
|
||||
this._helpService.deleteDivHelpContents(this.selectedDivContents, this.properties.adminToolsAPIURL).subscribe(
|
||||
_ => {
|
||||
this.deleteDivHelpContentsFromArray(this.selectedDivContents);
|
||||
this.showLoading = false;
|
||||
},
|
||||
error => this.handleUpdateError('System error deleting the selected class content(s)', error)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
private deleteDivHelpContentsFromArray(ids: string[]): void {
|
||||
for (let id of ids) {
|
||||
let iqc = this.checkboxes.findIndex(_ => _.divHelpContent._id == id);
|
||||
let iq = this.divHelpContents.findIndex(_ => _._id == id);
|
||||
this.checkboxes.splice(iqc, 1);
|
||||
this.divHelpContents.splice(iqc, 1);
|
||||
}
|
||||
this.countDivHelpContents();
|
||||
}
|
||||
|
||||
public editDivHelpContent(id: string) {
|
||||
//this.router.navigate(['/pageContents/edit/', _id]);
|
||||
if (this.selectedPageId) {
|
||||
this.router.navigate(['/classContents/edit/'], {
|
||||
queryParams: {
|
||||
"classContentId": id,
|
||||
"communityId": this.selectedCommunityPid,
|
||||
"pageId": this.selectedPageId
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.router.navigate(['/classContents/edit/'], {
|
||||
queryParams: {
|
||||
"classContentId": id,
|
||||
"communityId": this.selectedCommunityPid
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
public toggleDivHelpContents(status: boolean, ids: string[]) {
|
||||
if (!Session.isLoggedIn()) {
|
||||
this.router.navigate(['/user-info'], {
|
||||
queryParams: {
|
||||
"errorCode": LoginErrorCodes.NOT_VALID,
|
||||
"redirectUrl": this.router.url
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.updateErrorMessage = "";
|
||||
|
||||
this._helpService.toggleDivHelpContents(ids, status, this.properties.adminToolsAPIURL).subscribe(
|
||||
() => {
|
||||
for (let id of ids) {
|
||||
let i = this.checkboxes.findIndex(_ => _.divHelpContent._id == id);
|
||||
this.checkboxes[i].divHelpContent.isActive = status;
|
||||
}
|
||||
this.countDivHelpContents();
|
||||
this.applyCheck(false);
|
||||
},
|
||||
error => this.handleUpdateError('System error changing the status of the selected page content(s)', error)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
public divHelpContentSavedSuccessfully(divHelpContent: DivHelpContent) {
|
||||
this.cutContent(divHelpContent);
|
||||
this.checkboxes.push(<CheckDivHelpContent>{divHelpContent: divHelpContent, checked: false});
|
||||
this.divHelpContents.push(divHelpContent);
|
||||
this.applyCheck(false);
|
||||
this.countDivHelpContents();
|
||||
}
|
||||
|
||||
public divHelpContentUpdatedSuccessfully(divHelpContent: DivHelpContent) {
|
||||
this.checkboxes.find(checkItem => checkItem.divHelpContent._id == divHelpContent._id).divHelpContent = divHelpContent;
|
||||
let index = this.divHelpContents.findIndex(checkItem => checkItem._id == divHelpContent._id);
|
||||
this.divHelpContents[index] = divHelpContent;
|
||||
this.applyCheck(false);
|
||||
this.countDivHelpContents();
|
||||
}
|
||||
|
||||
|
||||
public filterDivHelpContent(divHelpContent: DivHelpContent, filters: DivHelpContentFilterOptions): boolean {
|
||||
let divId: DivId = divHelpContent.divId as DivId;
|
||||
let pages: Page[] = <Page[]>divId.pages;
|
||||
let pageIds: string[] = pages.map(x => x._id);
|
||||
|
||||
let idFlag = filters.id == '' || /*(<Page[]>divId.pages)._id == filters.id*/ pageIds.includes(filters.id);
|
||||
let activeFlag = filters.active == null || divHelpContent.isActive == filters.active;
|
||||
let textFlag = filters.text.toString() == '' || (divHelpContent.content).match(filters.text) != null
|
||||
|| ((<DivId>divHelpContent.divId).name).match(filters.text) != null;
|
||||
return idFlag && activeFlag && textFlag;
|
||||
}
|
||||
|
||||
public cutContent(divHelpContent: DivHelpContent) {
|
||||
divHelpContent.content = divHelpContent.content.replace(/<[^>]*>/g, '');
|
||||
divHelpContent.content = divHelpContent.content.replace(/(\r\n|\n|\r| +(?= ))|\s\s+/gm, " ");
|
||||
if (divHelpContent.content.length > 200) {
|
||||
divHelpContent.content = divHelpContent.content.substr(0, 200) + "...";
|
||||
}
|
||||
}
|
||||
|
||||
public applyFilter() {
|
||||
this.checkboxes = [];
|
||||
this.divHelpContents.filter(item => this.filterDivHelpContent(item, this.filters)).forEach(
|
||||
_ => {
|
||||
this.cutContent(_);
|
||||
this.checkboxes.push(<CheckDivHelpContent>{divHelpContent: _, checked: false})
|
||||
}
|
||||
);
|
||||
this.countDivHelpContents();
|
||||
}
|
||||
|
||||
public filterByPage(value: any) {
|
||||
this.filters.id = value;
|
||||
this.applyFilter();
|
||||
}
|
||||
|
||||
public displayAllDivHelpContents() {
|
||||
this.filters.active = null;
|
||||
this.applyFilter();
|
||||
}
|
||||
|
||||
public displayActiveDivHelpContents() {
|
||||
this.filters.active = true;
|
||||
this.applyFilter();
|
||||
}
|
||||
|
||||
public filterBySearch(text: string) {
|
||||
this.filters.text = new RegExp(text, "i");
|
||||
this.applyFilter();
|
||||
}
|
||||
|
||||
public displayInactiveDivHelpContents() {
|
||||
this.filters.active = false;
|
||||
this.applyFilter();
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
public newClassContent() {
|
||||
if (this.selectedPageId) {
|
||||
this.router.navigate(['/classContents/new'], {
|
||||
queryParams: {
|
||||
communityId: this.selectedCommunityPid,
|
||||
pageId: this.selectedPageId
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.router.navigate(['/classContents/new'], {queryParams: {communityId: this.selectedCommunityPid}});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
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 {FormsModule, ReactiveFormsModule} from '@angular/forms';
|
||||
import {AlertModalModule} from '../../utils/modal/alertModal.module';
|
||||
import {DivHelpContentsRoutingModule} from './div-help-contents-routing.module';
|
||||
import {SafeHtmlPipeModule} from '../../utils/pipes/safeHTMLPipe.module';
|
||||
import {DivHelpContentsComponent} from './div-help-contents.component';
|
||||
import {MatSlideToggleModule} from '@angular/material';
|
||||
import {AdminToolServiceModule} from "../../services/adminToolService.module";
|
||||
import {InputModule} from "../../../library/sharedComponents/input/input.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, RouterModule, FormsModule, SafeHtmlPipeModule,
|
||||
AlertModalModule, ReactiveFormsModule, DivHelpContentsRoutingModule, MatSlideToggleModule, AdminToolServiceModule, InputModule
|
||||
],
|
||||
declarations: [
|
||||
DivHelpContentsComponent
|
||||
],
|
||||
providers: [IsCommunity, ConnectAdminLoginGuard],
|
||||
exports: [DivHelpContentsComponent]
|
||||
})
|
||||
export class DivHelpContentsModule { }
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {IsCommunity} from '../../connect/communityGuard/isCommunity.guard';
|
||||
import {ConnectAdminLoginGuard} from '../../connect/communityGuard/connectAdminLoginGuard.guard';
|
||||
import {EditDivHelpContentComponent} from './edit-div-help-content.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild([
|
||||
{ path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: EditDivHelpContentComponent}
|
||||
])
|
||||
]
|
||||
})
|
||||
export class EditDivHelpContentRoutingModule { }
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<div id="page_content_inner">
|
||||
<div id="editDivHelpContent" class="uk-card uk-card-default uk-padding">
|
||||
<div class="menubar fixed">
|
||||
<div class="sidebar-toggler visible-xs">
|
||||
<i class="ion-navicon"></i>
|
||||
</div>
|
||||
<h4 class="uk-text-bold">
|
||||
<span>Edit Class 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>
|
||||
|
||||
<div-content-form [communityPid]="communityPid" [pageId]="pageId" [editMode]="true"
|
||||
[updateErrorMessage]="updateErrorMessage"></div-content-form>
|
||||
<button (click)="saveCustom()" class="uk-button uk-button-primary">Update class help text</button>
|
||||
<button (click)="cancelCustom()" class="uk-button">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
import { Component, ViewChild, OnInit, OnDestroy, ElementRef } from '@angular/core';
|
||||
import { DivContentFormComponent } from "./div-help-content-form.component";
|
||||
import { Subscription } from "rxjs";
|
||||
import { HelpContentService } from "../../services/help-content.service";
|
||||
import { DivHelpContent } from "../../utils/entities/adminTool/div-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";
|
||||
|
||||
@Component({
|
||||
selector: 'edit-div-help-content',
|
||||
templateUrl: 'edit-div-help-content.component.html',
|
||||
})
|
||||
|
||||
export class EditDivHelpContentComponent implements OnInit, OnDestroy{
|
||||
|
||||
@ViewChild(DivContentFormComponent)
|
||||
public formComponent : DivContentFormComponent;
|
||||
|
||||
public communityPid: string;
|
||||
public pageId: string;
|
||||
public page: Page;
|
||||
|
||||
private sub: Subscription;
|
||||
|
||||
private divHelpContent: DivHelpContent;
|
||||
|
||||
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.route.data
|
||||
.subscribe((data: { envSpecific: EnvProperties }) => {
|
||||
this.properties = data.envSpecific;
|
||||
this.sub = this.route.queryParams.subscribe(params => {
|
||||
HelperFunctions.scroll();
|
||||
|
||||
//let id = params['id'];
|
||||
let divContentId = params['classContentId'];
|
||||
this.communityPid = params['communityId'];
|
||||
this.pageId = params['pageId'];
|
||||
|
||||
if(!divContentId) {
|
||||
this.router.navigate(['/classContents'], { queryParams: { "communityId": this.communityPid} });
|
||||
}
|
||||
|
||||
this.getDivHelpContent(divContentId);
|
||||
});
|
||||
});
|
||||
}
|
||||
ngOnDestroy() {
|
||||
this.sub.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._helpContentService.getPage(pageId,this.properties.adminToolsAPIURL).subscribe(
|
||||
page => {
|
||||
if( (this.communityPid == 'openaire' && !page.openaire)
|
||||
|| (this.communityPid == 'connect' && !page.connect)
|
||||
|| (this.communityPid != 'openaire' && this.communityPid != 'connect' && !page.communities)) {
|
||||
this.router.navigate(['/classContents'], { queryParams: { "communityId": this.communityPid} });
|
||||
} else {
|
||||
this.page = page;
|
||||
this.showLoading = false;
|
||||
}
|
||||
},
|
||||
error => this.handleError('System error retrieving page with id: '+pageId, error)
|
||||
);
|
||||
}
|
||||
|
||||
private getDivHelpContent(divContentId: 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._helpContentService.getDivHelpContent(divContentId, this.properties.adminToolsAPIURL).subscribe(
|
||||
divHelpContent => {
|
||||
if(this.pageId) {
|
||||
this.getPage(this.pageId);
|
||||
}
|
||||
this.updateForm(divHelpContent);
|
||||
this.showLoading = false;
|
||||
},
|
||||
error => this.handleError('System error retrieving class help content', error));
|
||||
}
|
||||
}
|
||||
|
||||
getDivId(divId: string) {
|
||||
if(!Session.isLoggedIn()){
|
||||
this.router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this.router.url} });
|
||||
} else {
|
||||
this.showLoading = true;
|
||||
|
||||
this._helpContentService.getDivIdFull(divId, this.properties.adminToolsAPIURL).subscribe(
|
||||
div => {
|
||||
this.formComponent.selectedDiv = div;
|
||||
|
||||
if(!this.pageId) {
|
||||
this.formComponent.getDivs("");
|
||||
}
|
||||
|
||||
this.showLoading = false;
|
||||
},
|
||||
error => this.handleError('System error retrieving class', error)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
private updateForm(divHelpContent : DivHelpContent) {
|
||||
this.divHelpContent = divHelpContent;
|
||||
|
||||
this.getDivId(divHelpContent.divId as string);
|
||||
|
||||
this.formComponent.myForm.patchValue((divHelpContent));
|
||||
}
|
||||
|
||||
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 divHelpContent : DivHelpContent = this.formComponent.myForm.value;
|
||||
|
||||
this._helpContentService.insertOrUpdateDivHelpContent(divHelpContent, this.properties.adminToolsAPIURL).subscribe(
|
||||
_ => {
|
||||
if(this.pageId) {
|
||||
this.router.navigate( ['/classContents/'], { queryParams: { "communityId": this.communityPid, "pageId": this.pageId } } );
|
||||
} else {
|
||||
this.router.navigate(['/classContents'], { queryParams: { "communityId": this.communityPid } } );
|
||||
}
|
||||
this.showLoading = false;
|
||||
},
|
||||
err => this.handleUpdateError('System error updating class content', err)
|
||||
);
|
||||
} else {
|
||||
this.errorMessage = "Please fill all required fields";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public cancelCustom() {
|
||||
this.errorMessage = "";
|
||||
this.updateErrorMessage = "";
|
||||
|
||||
if(this.pageId) {
|
||||
this.router.navigate( ['/classContents/'], { queryParams: { "communityId": this.communityPid, "pageId": this.pageId } } );
|
||||
} else {
|
||||
this.router.navigate(['/classContents'], { queryParams: { "communityId": this.communityPid } } );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
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 {EditDivHelpContentRoutingModule} from './edit-div-help-content-routing.module';
|
||||
import {EditDivHelpContentComponent} from './edit-div-help-content.component';
|
||||
import {DivHelpContentFormModule} from './div-help-content-form.module';
|
||||
import {AdminToolServiceModule} from "../../services/adminToolService.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, RouterModule,
|
||||
DivHelpContentFormModule, EditDivHelpContentRoutingModule, AdminToolServiceModule
|
||||
],
|
||||
declarations: [
|
||||
EditDivHelpContentComponent
|
||||
],
|
||||
providers: [IsCommunity, ConnectAdminLoginGuard],
|
||||
exports: [EditDivHelpContentComponent]
|
||||
})
|
||||
export class EditDivHelpContentModule { }
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {IsCommunity} from '../../connect/communityGuard/isCommunity.guard';
|
||||
import {ConnectAdminLoginGuard} from '../../connect/communityGuard/connectAdminLoginGuard.guard';
|
||||
import {NewDivHelpContentComponent} from './new-div-help-content.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild([
|
||||
{ path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: NewDivHelpContentComponent}
|
||||
])
|
||||
]
|
||||
})
|
||||
export class NewDivHelpContentRoutingModule { }
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<div id="page_content_inner">
|
||||
<div class="content-wrapper" id="contentWrapper">
|
||||
|
||||
<div id="newDivHelpContent" 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 class="uk-text-large">New Class 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>
|
||||
|
||||
<div-content-form [communityPid]="communityPid" [pageId]="pageId"
|
||||
[updateErrorMessage]="updateErrorMessage"></div-content-form>
|
||||
<button (click)="saveCustom()" class="uk-button uk-button-primary">Save class help text</button>
|
||||
<button (click)="cancelCustom()" class="uk-button">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
import { Component, ViewChild, ElementRef } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from "@angular/router";
|
||||
import { DivContentFormComponent } from "./div-help-content-form.component";
|
||||
import { DivHelpContent } from "../../utils/entities/adminTool/div-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";
|
||||
|
||||
@Component({
|
||||
selector: 'new-div-help-content',
|
||||
templateUrl: 'new-div-help-content.component.html',
|
||||
})
|
||||
|
||||
export class NewDivHelpContentComponent {
|
||||
|
||||
@ViewChild(DivContentFormComponent)
|
||||
public formComponent : DivContentFormComponent;
|
||||
|
||||
//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 = '';
|
||||
|
||||
constructor(
|
||||
private element: ElementRef,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private _helpContentService: HelpContentService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.route.data
|
||||
.subscribe((data: { envSpecific: EnvProperties }) => {
|
||||
this.properties = data.envSpecific;
|
||||
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;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private getPage(pageId: string) {
|
||||
this._helpContentService.getPage(pageId,this.properties.adminToolsAPIURL).subscribe(
|
||||
page => {
|
||||
if( (this.communityPid == 'openaire' && !page.openaire)
|
||||
|| (this.communityPid == 'connect' && !page.connect)
|
||||
|| (this.communityPid != 'openaire' && this.communityPid != 'connect' && !page.communities)) {
|
||||
this.router.navigate(['/classContents'], { queryParams: { "communityId": this.communityPid} });
|
||||
} else {
|
||||
this.page = 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 {
|
||||
if(this.formComponent.myForm.valid) {
|
||||
this.showLoading = true;
|
||||
this.updateErrorMessage = "";
|
||||
|
||||
let divHelpContent : DivHelpContent = this.formComponent.myForm.value;
|
||||
|
||||
this._helpContentService.insertOrUpdateDivHelpContent(divHelpContent, this.properties.adminToolsAPIURL).subscribe(
|
||||
_ => {
|
||||
if(this.pageId) {
|
||||
this.router.navigate( ['/classContents/'], { queryParams: { "communityId": this.communityPid, "pageId": this.pageId } } );
|
||||
} else {
|
||||
this.router.navigate(['/classContents'], { queryParams: { "communityId": this.communityPid } } );
|
||||
}
|
||||
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( ['/classContents/'], { queryParams: { "communityId": this.communityPid, "pageId": this.pageId } } );
|
||||
} else {
|
||||
this.router.navigate(['/classContents'], { queryParams: { "communityId": this.communityPid } } );
|
||||
}
|
||||
}
|
||||
|
||||
handleUpdateError(message: string, error) {
|
||||
this.errorMessage = message;
|
||||
console.log('Server responded: ' + error);
|
||||
this.showLoading = false;
|
||||
}
|
||||
|
||||
handleError(message: string, error) {
|
||||
this.errorMessage = message;
|
||||
console.log('Server responded: ' + error);
|
||||
this.showLoading = false;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
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 {NewDivHelpContentRoutingModule} from './new-div-help-content-routing.module';
|
||||
import {NewDivHelpContentComponent} from './new-div-help-content.component';
|
||||
import {DivHelpContentFormModule} from './div-help-content-form.module';
|
||||
import {AdminToolServiceModule} from "../../services/adminToolService.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, RouterModule,
|
||||
DivHelpContentFormModule, NewDivHelpContentRoutingModule, AdminToolServiceModule
|
||||
],
|
||||
declarations: [
|
||||
NewDivHelpContentComponent
|
||||
],
|
||||
providers: [IsCommunity, ConnectAdminLoginGuard],
|
||||
exports: [NewDivHelpContentComponent]
|
||||
})
|
||||
export class NewDivHelpContentModule { }
|
||||
|
|
@ -196,9 +196,9 @@ export class EntitiesComponent implements OnInit {
|
|||
public editEntity(i: number) {
|
||||
const entity: Entity = this.checkboxes[i].entity;
|
||||
this.myForm = this._fb.group({
|
||||
name: entity.name,
|
||||
name: [entity.name, Validators.required],
|
||||
_id: entity._id,
|
||||
pid: entity.pid
|
||||
pid: [entity.pid, Validators.required],
|
||||
});
|
||||
this.modalErrorMessage = '';
|
||||
this.entitiesModalOpen(this.alertModalSaveEntity, '', 'Save Changes');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {IsCommunity} from '../../connect/communityGuard/isCommunity.guard';
|
||||
import {ConnectAdminLoginGuard} from '../../connect/communityGuard/connectAdminLoginGuard.guard';
|
||||
import {EditPageHelpContentComponent} from './edit-page-help-content.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild([
|
||||
{ path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: EditPageHelpContentComponent}
|
||||
])
|
||||
]
|
||||
})
|
||||
export class EditPageHelpContentRoutingModule { }
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
import { Component, ViewChild, OnInit, OnDestroy, ElementRef } from '@angular/core';
|
||||
import { PageContentFormComponent } from "./page-help-content-form.component";
|
||||
import { 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";
|
||||
|
||||
@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 sub: 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.route.data
|
||||
.subscribe((data: { envSpecific: EnvProperties }) => {
|
||||
this.properties = data.envSpecific;
|
||||
this.sub = this.route.queryParams.subscribe(params => {
|
||||
HelperFunctions.scroll();
|
||||
|
||||
let pageContentId = params['pageContentId'];
|
||||
this.communityPid = params['communityId'];
|
||||
this.pageId = params['pageId'];
|
||||
|
||||
if(!pageContentId) {
|
||||
this.router.navigate(['/pageContents'], { queryParams: { "communityId": this.communityPid} });
|
||||
}
|
||||
|
||||
this.getPageHelpContent(pageContentId);
|
||||
});
|
||||
});
|
||||
}
|
||||
ngOnDestroy() {
|
||||
this.sub.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._helpContentService.getPage(pageId,this.properties.adminToolsAPIURL).subscribe(
|
||||
page => {
|
||||
if( (this.communityPid == 'openaire' && !page.openaire)
|
||||
|| (this.communityPid == 'connect' && !page.connect)
|
||||
|| (this.communityPid != 'openaire' && this.communityPid != 'connect' && !page.communities)) {
|
||||
this.router.navigate(['/pageContents'], { queryParams: { "communityId": this.communityPid} });
|
||||
} 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._helpContentService.getPageHelpContent(pageContentId as string, this.properties.adminToolsAPIURL).subscribe(
|
||||
pageHelpContent => {
|
||||
if(this.pageId && this.pageId != pageHelpContent.page) {
|
||||
this.router.navigate(['/pageContents'], { queryParams: { "communityId": this.communityPid} });
|
||||
} 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._helpContentService.updatePageHelpContent(pageHelpContent, this.properties.adminToolsAPIURL).subscribe(
|
||||
_ => {
|
||||
if(this.pageId) {
|
||||
this.router.navigate( ['/pageContents/'], { queryParams: { "communityId": this.communityPid, "pageId": this.pageId } } );
|
||||
} else {
|
||||
this.router.navigate(['/pageContents'], { queryParams: { "communityId": this.communityPid} } );
|
||||
}
|
||||
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( ['/helptexts/'], { queryParams: { "communityId": this.communityPid, "pageId": this.pageId } } );
|
||||
} else {
|
||||
this.router.navigate(['/helptexts'], { queryParams: { "communityId": this.communityPid} } );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
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 {EditPageHelpContentRoutingModule} from './edit-page-help-content-routing.module';
|
||||
import {EditPageHelpContentComponent} from './edit-page-help-content.component';
|
||||
import {PageHelpContentFormModule} from './page-help-content-form.module';
|
||||
import {AdminToolServiceModule} from "../../services/adminToolService.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, RouterModule,
|
||||
PageHelpContentFormModule, EditPageHelpContentRoutingModule, AdminToolServiceModule
|
||||
],
|
||||
declarations: [
|
||||
EditPageHelpContentComponent
|
||||
],
|
||||
providers: [IsCommunity, ConnectAdminLoginGuard],
|
||||
exports: [EditPageHelpContentComponent]
|
||||
})
|
||||
export class EditPageHelpContentModule { }
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {IsCommunity} from '../../connect/communityGuard/isCommunity.guard';
|
||||
import {ConnectAdminLoginGuard} from '../../connect/communityGuard/connectAdminLoginGuard.guard';
|
||||
import {NewPageHelpContentComponent} from './new-page-help-content.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild([
|
||||
{ path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: NewPageHelpContentComponent}
|
||||
])
|
||||
]
|
||||
})
|
||||
export class NewPageHelpContentRoutingModule { }
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
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";
|
||||
|
||||
@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 = '';
|
||||
|
||||
constructor(
|
||||
private element: ElementRef,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private _helpContentService: HelpContentService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.route.data
|
||||
.subscribe((data: { envSpecific: EnvProperties }) => {
|
||||
this.properties = data.envSpecific;
|
||||
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;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private getPage(pageId: string) {
|
||||
this._helpContentService.getPage(pageId,this.properties.adminToolsAPIURL).subscribe(
|
||||
page => {
|
||||
if( (this.communityPid == 'openaire' && !page.openaire)
|
||||
|| (this.communityPid == 'connect' && !page.connect)
|
||||
|| (this.communityPid != 'openaire' && this.communityPid != 'connect' && !page.communities)) {
|
||||
this.router.navigate(['/pageContents'], { 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._helpContentService.savePageHelpContent(pageHelpContent, this.properties.adminToolsAPIURL).subscribe(
|
||||
_ => {
|
||||
if(this.pageId) {
|
||||
this.router.navigate( ['/helptexts/'], { queryParams: { "communityId": this.communityPid, "pageId": this.pageId } } );
|
||||
} else {
|
||||
this.router.navigate(['/helptexts'], { queryParams: { "communityId": this.communityPid} });
|
||||
}
|
||||
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( ['/helptexts/'], { queryParams: { "communityId": this.communityPid, "pageId": this.pageId } } );
|
||||
} else {
|
||||
this.router.navigate(['/helptexts'], { queryParams: { "communityId": this.communityPid} } );
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
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 {NewPageHelpContentRoutingModule} from './new-page-help-content-routing.module';
|
||||
import {PageHelpContentFormModule} from './page-help-content-form.module';
|
||||
import {AdminToolServiceModule} from "../../services/adminToolService.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, RouterModule,
|
||||
PageHelpContentFormModule, NewPageHelpContentRoutingModule, AdminToolServiceModule
|
||||
],
|
||||
declarations: [
|
||||
NewPageHelpContentComponent
|
||||
],
|
||||
providers: [IsCommunity, ConnectAdminLoginGuard],
|
||||
exports: [NewPageHelpContentComponent]
|
||||
})
|
||||
export class NewPageHelpContentModule { }
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<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>-->
|
||||
<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>
|
||||
<input type="hidden" formControlName="_id">
|
||||
</form>
|
||||
<!--<pre>-->
|
||||
<!--{{myForm.value | json}}-->
|
||||
<!--{{myForm.valid}}-->
|
||||
<!--</pre>-->
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
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 {Session} from '../../login/utils/helper.class';
|
||||
import {LoginErrorCodes} from '../../login/utils/guardHelper.class';
|
||||
|
||||
@Component({
|
||||
selector: 'page-content-form',
|
||||
templateUrl: './page-help-content-form.component.html',
|
||||
})
|
||||
|
||||
export class PageContentFormComponent implements OnInit{
|
||||
|
||||
@Input('group')
|
||||
myForm: FormGroup;
|
||||
@Input('communityPid')
|
||||
communityPid: string;
|
||||
@Input('pageId')
|
||||
pageId: string;
|
||||
@Input('page')
|
||||
page: Page;
|
||||
placements = {"top": false, "bottom": false, "left": false, "right": false}
|
||||
|
||||
private availablePages : Page[] = [];
|
||||
//private errorMessage: string;
|
||||
|
||||
private ckeditorContent : string;
|
||||
public properties:EnvProperties = null;
|
||||
|
||||
public showLoading: boolean = true;
|
||||
public errorMessage: string = '';
|
||||
@Input() updateErrorMessage: string = '';
|
||||
|
||||
constructor(private route: ActivatedRoute, private _router: Router, private _fb: FormBuilder, private _helpContentService: HelpContentService){}
|
||||
|
||||
ngOnInit() {
|
||||
this.myForm = this.form;
|
||||
this.route.data
|
||||
.subscribe((data: { envSpecific: EnvProperties }) => {
|
||||
this.properties = data.envSpecific;
|
||||
|
||||
if(!Session.isLoggedIn()){
|
||||
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
|
||||
} else {
|
||||
if(!this.pageId) {
|
||||
this.myForm.valueChanges.subscribe(value => {
|
||||
let pageId = value.page;
|
||||
this._helpContentService.getPage(pageId, this.properties.adminToolsAPIURL).subscribe(page => {
|
||||
this.setPlacements(page);
|
||||
});
|
||||
});
|
||||
}
|
||||
this._helpContentService.getPages(this.properties.adminToolsAPIURL, this.communityPid, true).subscribe(
|
||||
pages => {
|
||||
this.availablePages = pages;
|
||||
this.showLoading = false;
|
||||
},
|
||||
error => this.handleError('System error retrieving pages', error));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public setPlacements(page: Page) {
|
||||
this.placements.top = page.top;
|
||||
this.placements.bottom = page.bottom;
|
||||
this.placements.left = page.left;
|
||||
this.placements.right = page.right;
|
||||
}
|
||||
|
||||
public get form() {
|
||||
return this._fb.group({
|
||||
page : [this.pageId, Validators.required],
|
||||
community : this.communityPid,
|
||||
placement : ['', Validators.required],
|
||||
content : ['', Validators.required],
|
||||
order : [1, Validators.required],
|
||||
isActive : true,
|
||||
//isPriorTo : false,
|
||||
_id : '',
|
||||
});
|
||||
}
|
||||
|
||||
public reset() {
|
||||
this.myForm.patchValue({
|
||||
page : '',
|
||||
community : this.communityPid,
|
||||
placement : '',
|
||||
content : [''],
|
||||
order : 1,
|
||||
isActive : true,
|
||||
//isPriorTo : false,
|
||||
_id : ''
|
||||
});
|
||||
this.myForm.markAsPristine();
|
||||
}
|
||||
|
||||
handleError(message: string, error) {
|
||||
this.errorMessage = message;
|
||||
console.log('Server responded: ' + error);
|
||||
|
||||
this.showLoading = false;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
|
||||
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';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule,
|
||||
SafeHtmlPipeModule, CKEditorModule,
|
||||
AlertModalModule, ReactiveFormsModule
|
||||
],
|
||||
declarations: [
|
||||
PageContentFormComponent
|
||||
],
|
||||
exports: [PageContentFormComponent]
|
||||
})
|
||||
export class PageHelpContentFormModule { }
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {IsCommunity} from '../../connect/communityGuard/isCommunity.guard';
|
||||
import {ConnectAdminLoginGuard} from '../../connect/communityGuard/connectAdminLoginGuard.guard';
|
||||
import {PageHelpContentsComponent} from './page-help-contents.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild([
|
||||
{ path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: PageHelpContentsComponent}
|
||||
])
|
||||
]
|
||||
})
|
||||
export class PageHelpContentsRoutingModule { }
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<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>
|
||||
<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>
|
||||
</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-navbar-dropdown-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 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="!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.community.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>
|
||||
</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="md-icon material-icons"
|
||||
(click)="editPageHelpContent(check.pageHelpContent._id)"></i>
|
||||
<i class="material-icons md-icon"
|
||||
(click)="confirmDeletePageHelpContent(check.pageHelpContent._id)">delete</i>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div *ngIf="checkboxes.length==0" class="col-md-12">
|
||||
<div class="uk-alert-warning" uk-alert>No page contents found</div>
|
||||
</div>
|
||||
<div class="uk-width-1-1 uk-flex uk-flex-center ">
|
||||
<div class="uk-width-small uk-flex uk-flex-center uk-button" (click)="newPageContent()">
|
||||
<i class="material-icons md-48">add</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>
|
||||
|
||||
<!-- <delete-confirmation-dialog #deleteConfirmationModal [isModalShown]="isModalShown" (emmitObject)="confirmedDeletePageHelpContents($event)">
|
||||
Are you sure you want to delete the selected page content(s)?
|
||||
</delete-confirmation-dialog> -->
|
||||
<modal-alert #AlertModalDeletePageHelpContents (alertOutput)="confirmedDeletePageHelpContents($event)"></modal-alert>
|
||||
|
|
@ -0,0 +1,431 @@
|
|||
import {Component, ViewChild, OnInit, ElementRef} from '@angular/core';
|
||||
import {FormBuilder, FormControl, FormGroup} from "@angular/forms";
|
||||
import {ActivatedRoute, Router} from "@angular/router";
|
||||
import {HelpContentService} from "../../services/help-content.service";
|
||||
import {
|
||||
PageHelpContent,
|
||||
CheckPageHelpContent,
|
||||
PageHelpContentFilterOptions
|
||||
} from "../../utils/entities/adminTool/page-help-content";
|
||||
import {Page} from "../../utils/entities/adminTool/page";
|
||||
import {Community} from "../../utils/entities/adminTool/community";
|
||||
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 {Subscriber} from "rxjs";
|
||||
|
||||
@Component({
|
||||
selector: 'page-help-contents',
|
||||
templateUrl: './page-help-contents.component.html',
|
||||
})
|
||||
|
||||
export class PageHelpContentsComponent implements OnInit {
|
||||
|
||||
@ViewChild('AlertModalDeletePageHelpContents') alertModalDeletePageHelpContents;
|
||||
private selectedPageContents: string[] = [];
|
||||
|
||||
public checkboxes: CheckPageHelpContent[] = [];
|
||||
|
||||
public pageHelpContents: PageHelpContent[] = [];
|
||||
|
||||
public formGroup: FormGroup;
|
||||
|
||||
public pages: Page[];
|
||||
|
||||
public checkboxAll: boolean = false;
|
||||
|
||||
public filters: PageHelpContentFilterOptions = {id: '', active: null, text: new RegExp('')};
|
||||
public keyword: string = "";
|
||||
|
||||
public counter = {all: 0, active: 0, inactive: 0};
|
||||
|
||||
public communities: Community[] = [];
|
||||
|
||||
public selectedCommunityPid: string;
|
||||
|
||||
public selectedPageId: string;
|
||||
|
||||
public community: Community;
|
||||
|
||||
public page: Page;
|
||||
public properties: EnvProperties = null;
|
||||
|
||||
public showLoading: boolean = true;
|
||||
public errorMessage: string = '';
|
||||
public updateErrorMessage: string = '';
|
||||
public filterForm: FormControl;
|
||||
public selectForm: FormControl;
|
||||
public selectOptions = [];
|
||||
private subscriptions: any[] = [];
|
||||
|
||||
ngOnInit() {
|
||||
this.filterForm = this._fb.control('');
|
||||
this.selectForm = this._fb.control('');
|
||||
this.subscriptions.push(this.filterForm.valueChanges.subscribe(value => {
|
||||
this.filterBySearch(value);
|
||||
}));
|
||||
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'];
|
||||
|
||||
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) {
|
||||
}
|
||||
ngOnDestroy(): void {
|
||||
this.subscriptions.forEach(value => {
|
||||
if (value instanceof Subscriber) {
|
||||
value.unsubscribe();
|
||||
} else if (value instanceof Function) {
|
||||
value();
|
||||
}
|
||||
});
|
||||
}
|
||||
getPage(pageId: string) {
|
||||
if (!Session.isLoggedIn()) {
|
||||
this.router.navigate(['/user-info'], {
|
||||
queryParams: {
|
||||
"errorCode": LoginErrorCodes.NOT_VALID,
|
||||
"redirectUrl": this.router.url
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.showLoading = true;
|
||||
this.updateErrorMessage = "";
|
||||
this.errorMessage = "";
|
||||
|
||||
this._helpService.getPage(pageId, this.properties.adminToolsAPIURL).subscribe(
|
||||
page => {
|
||||
if ((this.selectedCommunityPid == 'openaire' && !page.openaire)
|
||||
|| (this.selectedCommunityPid == 'connect' && !page.connect)
|
||||
|| (this.selectedCommunityPid != 'openaire' && this.selectedCommunityPid != 'connect' && !page.communities)) {
|
||||
this.router.navigate(['/pageContents'], {queryParams: {"communityId": this.selectedCommunityPid}});
|
||||
} else {
|
||||
this.page = page;
|
||||
this.getPageHelpContents(this.selectedCommunityPid);
|
||||
}
|
||||
},
|
||||
error => this.handleError('System error retrieving page', error));
|
||||
}
|
||||
}
|
||||
|
||||
getPages(community_pid: string) {
|
||||
if (!Session.isLoggedIn()) {
|
||||
this.router.navigate(['/user-info'], {
|
||||
queryParams: {
|
||||
"errorCode": LoginErrorCodes.NOT_VALID,
|
||||
"redirectUrl": this.router.url
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.showLoading = true;
|
||||
this.updateErrorMessage = "";
|
||||
this.errorMessage = "";
|
||||
|
||||
//this._helpService.getCommunityPages(community_pid, "", this.properties.adminToolsAPIURL).subscribe(
|
||||
this._helpService.getPages(this.properties.adminToolsAPIURL, community_pid, true).subscribe(
|
||||
pages => {
|
||||
this.pages = pages;
|
||||
this.getPageHelpContents(this.selectedCommunityPid);
|
||||
this.selectOptions = [{label:'All pages', value: ''}];
|
||||
for (let page of this.pages) {
|
||||
this.selectOptions.push({label:page.name, value: page._id})
|
||||
}
|
||||
},
|
||||
error => this.handleError('System error retrieving pages', error));
|
||||
}
|
||||
}
|
||||
|
||||
public countPageHelpContents() {
|
||||
this.counter = {all: 0, active: 0, inactive: 0};
|
||||
let filter = Object.assign({}, this.filters);
|
||||
filter.active = null;
|
||||
this.pageHelpContents.forEach(_ => {
|
||||
if (this.filterPageHelpContent(_, filter)) {
|
||||
if (_.isActive == true) this.counter.active++;
|
||||
else this.counter.inactive++
|
||||
}
|
||||
});
|
||||
this.counter.all = this.counter.active + this.counter.inactive;
|
||||
}
|
||||
|
||||
getPageHelpContents(community_pid: string) {
|
||||
if (!Session.isLoggedIn()) {
|
||||
this.router.navigate(['/user-info'], {
|
||||
queryParams: {
|
||||
"errorCode": LoginErrorCodes.NOT_VALID,
|
||||
"redirectUrl": this.router.url
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this._helpService.getCommunityPageHelpContents(community_pid, this.properties.adminToolsAPIURL).subscribe(
|
||||
pageHelpContents => {
|
||||
this.pageHelpContents = pageHelpContents as Array<PageHelpContent>;
|
||||
this.counter.all = this.pageHelpContents.length;
|
||||
this.checkboxes = [];
|
||||
|
||||
for (let i = this.pageHelpContents.length - 1; i >= 0; i -= 1) {
|
||||
//for (let i = 0; i < this.pageHelpContents.length; i++) {
|
||||
let page: Page = this.pageHelpContents[i].page as Page;
|
||||
if (!this.selectedPageId || (page._id == this.selectedPageId)) {
|
||||
this.cutContent(this.pageHelpContents[i]);
|
||||
this.checkboxes.unshift(<CheckPageHelpContent>{
|
||||
pageHelpContent: this.pageHelpContents[i],
|
||||
checked: false
|
||||
});
|
||||
} else {
|
||||
this.pageHelpContents.splice(i, 1);
|
||||
}
|
||||
}
|
||||
|
||||
this.countPageHelpContents();
|
||||
|
||||
this.showLoading = false;
|
||||
},
|
||||
error => this.handleError('System error retrieving page contents', error));
|
||||
}
|
||||
}
|
||||
|
||||
// public showModal():void {
|
||||
// this.modal.showModal();
|
||||
// }
|
||||
|
||||
public toggleCheckBoxes(event) {
|
||||
this.checkboxes.forEach(_ => _.checked = event.target.checked);
|
||||
this.checkboxAll = event.target.checked;
|
||||
}
|
||||
|
||||
public applyCheck(flag: boolean) {
|
||||
this.checkboxes.forEach(_ => _.checked = flag);
|
||||
this.checkboxAll = false;
|
||||
}
|
||||
|
||||
public getSelectedPageHelpContents(): string[] {
|
||||
return this.checkboxes.filter(pageHelpContent => pageHelpContent.checked == true)
|
||||
.map(checkedPageHelpContent => checkedPageHelpContent.pageHelpContent).map(res => res._id);
|
||||
}
|
||||
|
||||
public confirmDeletePageHelpContent(id: string) {
|
||||
//this.deleteConfirmationModal.ids = [id];
|
||||
//this.deleteConfirmationModal.showModal();
|
||||
this.selectedPageContents = [id];
|
||||
this.confirmModalOpen();
|
||||
}
|
||||
|
||||
public confirmDeleteSelectedPageHelpContents() {
|
||||
//this.deleteConfirmationModal.ids = this.getSelectedPageHelpContents();
|
||||
//this.deleteConfirmationModal.showModal();
|
||||
this.selectedPageContents = this.getSelectedPageHelpContents();
|
||||
this.confirmModalOpen();
|
||||
}
|
||||
|
||||
private confirmModalOpen() {
|
||||
if (!Session.isLoggedIn()) {
|
||||
this.router.navigate(['/user-info'], {
|
||||
queryParams: {
|
||||
"errorCode": LoginErrorCodes.NOT_VALID,
|
||||
"redirectUrl": this.router.url
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.alertModalDeletePageHelpContents.cancelButton = true;
|
||||
this.alertModalDeletePageHelpContents.okButton = true;
|
||||
this.alertModalDeletePageHelpContents.alertTitle = "Delete Confirmation";
|
||||
this.alertModalDeletePageHelpContents.message = "Are you sure you want to delete the selected page content(s)?";
|
||||
this.alertModalDeletePageHelpContents.okButtonText = "Yes";
|
||||
this.alertModalDeletePageHelpContents.open();
|
||||
}
|
||||
}
|
||||
|
||||
public confirmedDeletePageHelpContents(data: any) {
|
||||
if (!Session.isLoggedIn()) {
|
||||
this.router.navigate(['/user-info'], {
|
||||
queryParams: {
|
||||
"errorCode": LoginErrorCodes.NOT_VALID,
|
||||
"redirectUrl": this.router.url
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.showLoading = true;
|
||||
this.updateErrorMessage = "";
|
||||
|
||||
this._helpService.deletePageHelpContents(this.selectedPageContents, this.properties.adminToolsAPIURL).subscribe(
|
||||
_ => {
|
||||
this.deletePageHelpContentsFromArray(this.selectedPageContents);
|
||||
this.showLoading = false;
|
||||
},
|
||||
error => this.handleUpdateError('System error deleting the selected page content(s)', error)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
private deletePageHelpContentsFromArray(ids: string[]): void {
|
||||
for (let id of ids) {
|
||||
let iqc = this.checkboxes.findIndex(_ => _.pageHelpContent._id == id);
|
||||
let iq = this.pageHelpContents.findIndex(_ => _._id == id);
|
||||
this.checkboxes.splice(iqc, 1);
|
||||
this.pageHelpContents.splice(iqc, 1);
|
||||
}
|
||||
this.countPageHelpContents();
|
||||
}
|
||||
|
||||
public editPageHelpContent(id: string) {
|
||||
//this.router.navigate(['/pageContents/edit/', _id]);
|
||||
if (this.selectedPageId) {
|
||||
this.router.navigate(['/helptexts/edit/'], {
|
||||
queryParams: {
|
||||
"pageContentId": id,
|
||||
"communityId": this.selectedCommunityPid,
|
||||
"pageId": this.selectedPageId
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.router.navigate(['/helptexts/edit/'], {
|
||||
queryParams: {
|
||||
"pageContentId": id,
|
||||
"communityId": this.selectedCommunityPid
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
public togglePageHelpContents(status: boolean, ids: string[]) {
|
||||
if (!Session.isLoggedIn()) {
|
||||
this.router.navigate(['/user-info'], {
|
||||
queryParams: {
|
||||
"errorCode": LoginErrorCodes.NOT_VALID,
|
||||
"redirectUrl": this.router.url
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.updateErrorMessage = "";
|
||||
|
||||
this._helpService.togglePageHelpContents(ids, status, this.properties.adminToolsAPIURL).subscribe(
|
||||
() => {
|
||||
for (let id of ids) {
|
||||
let i = this.checkboxes.findIndex(_ => _.pageHelpContent._id == id);
|
||||
this.checkboxes[i].pageHelpContent.isActive = status;
|
||||
}
|
||||
this.countPageHelpContents();
|
||||
this.applyCheck(false);
|
||||
},
|
||||
error => this.handleUpdateError('System error changing the status of the selected page content(s)', error)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
public pageHelpContentSavedSuccessfully(pageHelpContent: PageHelpContent) {
|
||||
this.cutContent(pageHelpContent);
|
||||
this.checkboxes.push(<CheckPageHelpContent>{pageHelpContent: pageHelpContent, checked: false});
|
||||
this.pageHelpContents.push(pageHelpContent);
|
||||
this.applyCheck(false);
|
||||
this.countPageHelpContents();
|
||||
}
|
||||
|
||||
public pageHelpContentUpdatedSuccessfully(pageHelpContent: PageHelpContent) {
|
||||
this.checkboxes.find(checkItem => checkItem.pageHelpContent._id == pageHelpContent._id).pageHelpContent = pageHelpContent;
|
||||
let index = this.pageHelpContents.findIndex(checkItem => checkItem._id == pageHelpContent._id);
|
||||
this.pageHelpContents[index] = pageHelpContent;
|
||||
this.applyCheck(false);
|
||||
this.countPageHelpContents();
|
||||
}
|
||||
|
||||
|
||||
public filterPageHelpContent(pageHelpContent: PageHelpContent, filters: PageHelpContentFilterOptions): boolean {
|
||||
let idFlag = filters.id == '' || (<Page>pageHelpContent.page)._id == filters.id;
|
||||
let activeFlag = filters.active == null || pageHelpContent.isActive == filters.active;
|
||||
let textFlag = filters.text.toString() == '' || (pageHelpContent.content).match(filters.text) != null
|
||||
|| ((<Page>pageHelpContent.page).name).match(filters.text) != null;
|
||||
return idFlag && activeFlag && textFlag;
|
||||
}
|
||||
|
||||
public cutContent(pageHelpContent: PageHelpContent) {
|
||||
pageHelpContent.content = pageHelpContent.content.replace(/<[^>]*>/g, '');
|
||||
pageHelpContent.content = pageHelpContent.content.replace(/(\r\n|\n|\r| +(?= ))|\s\s+/gm, " ");
|
||||
|
||||
if (pageHelpContent.content.length > 200) {
|
||||
pageHelpContent.content = pageHelpContent.content.substr(0, 200) + "...";
|
||||
}
|
||||
}
|
||||
|
||||
public applyFilter() {
|
||||
this.checkboxes = [];
|
||||
this.pageHelpContents.filter(item => this.filterPageHelpContent(item, this.filters)).forEach(
|
||||
_ => {
|
||||
this.cutContent(_);
|
||||
this.checkboxes.push(<CheckPageHelpContent>{pageHelpContent: _, checked: false})
|
||||
}
|
||||
);
|
||||
this.countPageHelpContents();
|
||||
}
|
||||
|
||||
public filterByPage(event: any) {
|
||||
this.filters.id = event.target.value;
|
||||
this.applyFilter();
|
||||
}
|
||||
|
||||
public displayAllPageHelpContents() {
|
||||
this.filters.active = null;
|
||||
this.applyFilter();
|
||||
}
|
||||
|
||||
public displayActivePageHelpContents() {
|
||||
this.filters.active = true;
|
||||
this.applyFilter();
|
||||
}
|
||||
|
||||
public filterBySearch(text: string) {
|
||||
this.filters.text = new RegExp(text, "i");
|
||||
this.applyFilter();
|
||||
}
|
||||
|
||||
public displayInactivePageHelpContents() {
|
||||
this.filters.active = false;
|
||||
this.applyFilter();
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
public newPageContent() {
|
||||
if (this.selectedPageId) {
|
||||
this.router.navigate(['/helptexts/new'], {
|
||||
queryParams: {
|
||||
communityId: this.selectedCommunityPid,
|
||||
pageId: this.selectedPageId
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.router.navigate(['/helptexts/new'], {queryParams: {communityId: this.selectedCommunityPid}});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
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 {FormsModule, ReactiveFormsModule} from '@angular/forms';
|
||||
import {AlertModalModule} from '../../utils/modal/alertModal.module';
|
||||
import {PageHelpContentsRoutingModule} from './page-help-contents-routing.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 "../../../library/sharedComponents/input/input.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, RouterModule, FormsModule, SafeHtmlPipeModule,
|
||||
AlertModalModule, ReactiveFormsModule, PageHelpContentsRoutingModule, MatSlideToggleModule, AdminToolServiceModule, InputModule
|
||||
],
|
||||
declarations: [
|
||||
PageHelpContentsComponent
|
||||
],
|
||||
providers: [IsCommunity, ConnectAdminLoginGuard],
|
||||
exports: [PageHelpContentsComponent]
|
||||
})
|
||||
export class PageHelpContentsModule { }
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {ConnectAdminLoginGuard} from '../../connect/communityGuard/connectAdminLoginGuard.guard';
|
||||
import {PagesComponent} from './pages.component';
|
||||
import {IsCommunityOrAdmin} from '../../connect/communityGuard/isCommunityOrAdmin';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild([
|
||||
{ path: '', canActivate: [IsCommunityOrAdmin, ConnectAdminLoginGuard], component: PagesComponent}
|
||||
])
|
||||
]
|
||||
})
|
||||
export class PagesRoutingModule { }
|
||||
|
|
@ -0,0 +1,287 @@
|
|||
<div id="page_content" click-outside-or-esc targetId="page_content">
|
||||
<div class="uk-padding-small md-bg-white" uk-grid>
|
||||
|
||||
<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 page"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="page_content_inner">
|
||||
<div *ngIf="!errorMessage && !showLoading" class="page-controls">
|
||||
<div class=" filters ">
|
||||
<div class="show-options uk-float-right">
|
||||
<button class="uk-button uk-button-primary" type="button">Bulk Actions</button>
|
||||
<div uk-dropdown="mode: click">
|
||||
<ul class="uk-nav uk-navbar-dropdown-nav uk-margin-left"
|
||||
[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())"><i></i> Activate
|
||||
</a></li>
|
||||
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
|
||||
(click)="togglePages(false, getSelectedPages())"><i></i> Deactivate
|
||||
</a></li>
|
||||
<li *ngIf="isPortalAdministrator"><a (click)="confirmDeleteSelectedPages()"><i></i> Delete </a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="uk-text-bold uk-text-upper">{{pagesType}} Pages</h4>
|
||||
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
|
||||
<a class="uk-alert-close" uk-close></a>
|
||||
{{updateErrorMessage}}
|
||||
</div>
|
||||
|
||||
<div class="content-wrapper" id="contentWrapper">
|
||||
<div>
|
||||
<div class="contentPanel uk-margin-top">
|
||||
|
||||
|
||||
<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="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 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="allPageCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th>
|
||||
<th>Name</th>
|
||||
<th *ngIf="!isPortalAdministrator">Change status</th>
|
||||
<th *ngIf="!pagesType">Type</th>
|
||||
<th *ngIf="!isPortalAdministrator">Related Entities</th>
|
||||
<th>Route</th>
|
||||
<th *ngIf="isPortalAdministrator">Actions</th>
|
||||
<th *ngIf="!isPortalAdministrator" class="uk-text-center">Page help texts</th>
|
||||
<th *ngIf="!isPortalAdministrator && (pageWithDivIds && pageWithDivIds.length > 0)"
|
||||
class="uk-text-center">Class help texts
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let check of checkboxes; let i=index">
|
||||
<td><input id="{{check.page._id}}" class="checkBox" type="checkbox"
|
||||
name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked">
|
||||
</td>
|
||||
<td>
|
||||
<div class="name" href="#">{{check.page.name}}</div>
|
||||
</td>
|
||||
<td *ngIf="!isPortalAdministrator">
|
||||
<mat-slide-toggle [checked]="check.page.isEnabled"
|
||||
(change)="($event.source.checked = check.page.isEnabled);togglePages(!check.page.isEnabled,[check.page._id])"></mat-slide-toggle>
|
||||
</td>
|
||||
<td *ngIf="!pagesType">
|
||||
<div class="type" href="#">{{check.page.type}}</div>
|
||||
</td>
|
||||
<td *ngIf="!isPortalAdministrator">
|
||||
<div class="entities" href="#">
|
||||
<span *ngFor="let entity of check.page.entities let i=index">{{entity.name}}<span
|
||||
*ngIf="i<(check.page.entities.length-1)">, </span></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="route" href="#">{{check.page.route}}</div>
|
||||
</td>
|
||||
|
||||
<td *ngIf="isPortalAdministrator">
|
||||
<div class="actions" href="#">
|
||||
<i class="md-icon material-icons" (click)="editPage(i)"></i>
|
||||
<i class="material-icons md-icon"
|
||||
(click)="confirmDeletePage(check.page._id)">delete</i>
|
||||
</div>
|
||||
</td>
|
||||
<td *ngIf="!isPortalAdministrator" class="uk-text-center">
|
||||
<a *ngIf="check.page.top || check.page.bottom || check.page.left || check.page.right"
|
||||
class="helpContents"
|
||||
[queryParams]="{communityId: selectedCommunityPid, pageId: check.page._id}"
|
||||
routerLink="/helptexts">
|
||||
add help texts
|
||||
</a>
|
||||
<span
|
||||
*ngIf="!check.page.top && !check.page.bottom && !check.page.left && !check.page.right">-</span>
|
||||
</td>
|
||||
<td *ngIf="!isPortalAdministrator && (pageWithDivIds && pageWithDivIds.length > 0)"
|
||||
class="uk-text-center">
|
||||
<a *ngIf="pageWithDivIds.includes(check.page._id)" class="classHelpContents"
|
||||
[queryParams]="{communityId: selectedCommunityPid, pageId: check.page._id}"
|
||||
routerLink="/classContents">add class contents</a>
|
||||
<span *ngIf="!pageWithDivIds.includes(check.page._id)">-</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div *ngIf="checkboxes.length==0" class="col-md-12">
|
||||
<div class="uk-alert-warning" uk-alert>No pages found</div>
|
||||
</div>
|
||||
<div class="uk-width-1-1 uk-flex uk-flex-center ">
|
||||
<div class="uk-width-small uk-flex uk-flex-center uk-button" (click)="newPage()">
|
||||
<i class="material-icons md-48">add</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<modal-alert #AlertModalSavePage (alertOutput)="pageSaveConfirmed($event)" [okDisabled]="myForm && (myForm.invalid || !myForm.dirty)">
|
||||
<div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>
|
||||
<form [formGroup]="myForm">
|
||||
|
||||
<div dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('route')"
|
||||
type="text"
|
||||
label="Page route">
|
||||
</div>
|
||||
|
||||
<div dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('name')"
|
||||
type="text"
|
||||
label="Page Name">
|
||||
</div>
|
||||
|
||||
<div dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('type')"
|
||||
type="select"
|
||||
label="Type" [options]="typeOptions">
|
||||
</div>
|
||||
<mat-form-field class="example-chip-list uk-width-1-1 uk-margin-small-left">
|
||||
<mat-chip-list #chipList aria-label="Page selection">
|
||||
<mat-chip
|
||||
*ngFor="let entity of selectedEntities"
|
||||
[selectable]="true"
|
||||
[removable]="true">
|
||||
{{entity.name}}
|
||||
<span (click)="remove(entity)"
|
||||
class="mat-icon notranslate mat-chip-remove mat-chip-trailing-icon material-icons mat-icon-no-color ng-star-inserted">cancel</span>
|
||||
</mat-chip>
|
||||
<input placeholder="Add in pages..." #PageInput
|
||||
[formControl]="entitiesSearchCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList">
|
||||
</mat-chip-list>
|
||||
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
|
||||
<mat-option *ngFor="let entity of filteredEntities| async" [value]="entity">
|
||||
{{entity.name}}
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<!--<div formArrayName="entities" class="form-group">
|
||||
<label for="entityNameTag">Entity Name</label>
|
||||
<div id="entityNameTag">
|
||||
<pre class="card card-block card-header"><span *ngFor="let entity of myForm.value.entities; let i=index">{{entity.name}}<span *ngIf="i<(myForm.value.entities.length-1)">, </span></span></pre>
|
||||
|
||||
<button type="button" (click)="toggle()">Add / Remove entities</button>
|
||||
|
||||
<ng-container *ngIf="!myForm.value.isCollapsed">
|
||||
<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 *ngFor="let entity of getKeys(allEntities)">
|
||||
<span>
|
||||
<span *ngIf="allEntities.get(entity)" class="activated" >
|
||||
<input (click)="toggleEntity(false,[entity._id], entity)" class="deactivate" src="assets/imgs/delete-icon.png" title="Disable" width="20" type="image" height="20">
|
||||
</span>
|
||||
<span *ngIf="!allEntities.get(entity)" class="deactivated" >
|
||||
<input (click)="toggleEntity(true,[entity._id], entity)" class="deactivate" src="assets/imgs/add-icon.png" title="Enable" width="20" type="image" height="20">
|
||||
</span>
|
||||
{{entity.name}}
|
||||
</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<!-- <div class="form-group" uk-grid>-->
|
||||
<!-- <label class="uk-width-1-1 uk-margin-small-bottom">-->
|
||||
<!-- Select positions of help contents for this page.-->
|
||||
<!-- </label>-->
|
||||
<!-- <label class="uk-text-danger uk-margin-small-bottom">-->
|
||||
<!-- By disabling a position, all contents in this position will be deleted.-->
|
||||
<!-- </label>-->
|
||||
<!-- <label class="uk-width-1-4 checkbox">-->
|
||||
<!-- <span class="uk-margin-small-right" style="font-weight: normal;">Top</span>-->
|
||||
<!-- <input tabindex="0" type="checkbox" formControlName="top">-->
|
||||
<!-- </label>-->
|
||||
<!-- <label class="uk-width-1-4 checkbox">-->
|
||||
<!-- <span class="uk-margin-small-right" style="font-weight: normal;">Bottom</span>-->
|
||||
<!-- <input tabindex="0" type="checkbox" formControlName="bottom">-->
|
||||
<!-- </label>-->
|
||||
<!-- <label class="uk-width-1-4 checkbox">-->
|
||||
<!-- <span class="uk-margin-small-right" style="font-weight: normal;">Left</span>-->
|
||||
<!-- <input tabindex="0" type="checkbox" formControlName="left">-->
|
||||
<!-- </label>-->
|
||||
<!-- <label class="uk-width-1-4 checkbox">-->
|
||||
<!-- <span class="uk-margin-small-right" style="font-weight: normal;">Right</span>-->
|
||||
<!-- <input tabindex="0" type="checkbox" formControlName="right">-->
|
||||
<!-- </label>-->
|
||||
<!-- </div>-->
|
||||
<div class="form-group" >
|
||||
<label class="uk-text-danger uk-margin-small-bottom">
|
||||
By disabling a position, all contents in this position will be deleted.
|
||||
</label>
|
||||
<div class="uk-text-muted"> Select if this page exists in:</div>
|
||||
<span dashboard-input class="" [formInput]="myForm.get('top')"
|
||||
type="checkbox"
|
||||
label="Top">
|
||||
</span>
|
||||
<span dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('right')"
|
||||
type="checkbox"
|
||||
label="Right">
|
||||
</span>
|
||||
<span dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('bottom')"
|
||||
type="checkbox"
|
||||
label="Bottom">
|
||||
</span>
|
||||
<span dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('left')"
|
||||
type="checkbox"
|
||||
label="Left">
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
||||
<div class="uk-text-muted"> Select if this page exists in:</div>
|
||||
<span dashboard-input class="" [formInput]="myForm.get('openaire')"
|
||||
type="checkbox"
|
||||
label="Explore Portal">
|
||||
</span>
|
||||
<span dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('connect')"
|
||||
type="checkbox"
|
||||
label="Connect Portal">
|
||||
</span>
|
||||
<span dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('communities')"
|
||||
type="checkbox"
|
||||
label="Communities Dashboards">
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<input type="hidden" formControlName="_id">
|
||||
</form>
|
||||
|
||||
</modal-alert>
|
||||
|
||||
<!--<modal-alert #AlertModalUpdatePage (alertOutput)="pageUpdateConfirmed($event)">-->
|
||||
<!-- <div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>-->
|
||||
<!-- <page-form [group]="myForm"></page-form>-->
|
||||
<!--</modal-alert>-->
|
||||
|
||||
<modal-alert #AlertModalDeletePages (alertOutput)="confirmedDeletePages($event)"></modal-alert>
|
||||
|
|
@ -0,0 +1,546 @@
|
|||
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
|
||||
import {ActivatedRoute, Router} from '@angular/router';
|
||||
import {HelpContentService} from '../../services/help-content.service';
|
||||
import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
|
||||
import {CheckPage, Page} from '../../utils/entities/adminTool/page';
|
||||
import {Community} from '../../utils/entities/adminTool/community';
|
||||
import {Entity} from '../../utils/entities/adminTool/entity';
|
||||
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 {UserManagementService} from '../../services/user-management.service';
|
||||
import {Observable, Subscriber} from "rxjs";
|
||||
import {map, startWith} from "rxjs/operators";
|
||||
import {MatAutocompleteSelectedEvent} from "@angular/material";
|
||||
|
||||
@Component({
|
||||
selector: 'pages',
|
||||
templateUrl: './pages.component.html',
|
||||
})
|
||||
|
||||
export class PagesComponent implements OnInit {
|
||||
|
||||
@ViewChild('AlertModalSavePage') alertModalSavePage;
|
||||
@ViewChild('AlertModalDeletePages') alertModalDeletePages;
|
||||
private selectedPages: string[] = [];
|
||||
|
||||
public checkboxes: CheckPage[] = [];
|
||||
|
||||
public pages: Page[] = [];
|
||||
public pageWithDivIds: string[] = [];
|
||||
|
||||
//public errorMessage: string;
|
||||
|
||||
public myForm: FormGroup;
|
||||
|
||||
private searchText: RegExp = new RegExp('');
|
||||
public keyword: string = '';
|
||||
|
||||
public communities: Community[] = [];
|
||||
|
||||
public selectedCommunityPid: string;
|
||||
|
||||
public pagesType: string;
|
||||
public properties: EnvProperties = null;
|
||||
|
||||
public showLoading: boolean = true;
|
||||
public errorMessage: string = '';
|
||||
public updateErrorMessage: string = '';
|
||||
public modalErrorMessage: string = '';
|
||||
public isPortalAdministrator = null;
|
||||
public filterForm: FormControl;
|
||||
public typeOptions = [{label: 'Search', value: 'search'}, {label: 'Link', value: 'link'}, {
|
||||
label: 'Share',
|
||||
value: 'share'
|
||||
}, {label: 'Landing', value: 'landing'}, {label: 'HTML', value: 'html'}, {
|
||||
label: 'Link',
|
||||
value: 'link'
|
||||
}, {label: 'Other', value: 'other'}]
|
||||
public entitiesCtrl: FormArray;
|
||||
@ViewChild('PageInput') pageInput: ElementRef<HTMLInputElement>;
|
||||
public entitiesSearchCtrl: FormControl;
|
||||
filteredEntities: Observable<Entity[]>;
|
||||
selectedEntities: Entity[] = [];
|
||||
allEntities: Entity[] = [];
|
||||
|
||||
private subscriptions: any[] = [];
|
||||
|
||||
constructor(private element: ElementRef, private route: ActivatedRoute,
|
||||
private _router: Router, private _helpContentService: HelpContentService,
|
||||
private userManagementService: UserManagementService, private _fb: FormBuilder) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.filterForm = this._fb.control('');
|
||||
this.subscriptions.push(this.filterForm.valueChanges.subscribe(value => {
|
||||
this.filterBySearch(value);
|
||||
}));
|
||||
this.entitiesSearchCtrl = this._fb.control('');
|
||||
this.myForm = this._fb.group({
|
||||
route: ['', Validators.required],
|
||||
name: ['', Validators.required],
|
||||
isEnabled: true,
|
||||
openaire: true,
|
||||
connect: false,
|
||||
communities: true,
|
||||
top: true,
|
||||
bottom: true,
|
||||
left: true,
|
||||
right: true,
|
||||
type: ['', Validators.required],
|
||||
entities: this.entitiesCtrl,
|
||||
_id: '',
|
||||
});
|
||||
this.route.data
|
||||
.subscribe((data: { envSpecific: EnvProperties }) => {
|
||||
this.properties = data.envSpecific;
|
||||
|
||||
this.route.queryParams.subscribe(params => {
|
||||
HelperFunctions.scroll();
|
||||
|
||||
this.pagesType = '';
|
||||
if (params['type']) {
|
||||
this.pagesType = params['type'];
|
||||
}
|
||||
|
||||
this.keyword = '';
|
||||
this.userManagementService.getUserInfo(this.properties.userInfoUrl).subscribe(user => {
|
||||
this.selectedCommunityPid = params['communityId'];
|
||||
this.applyCommunityFilter(this.selectedCommunityPid);
|
||||
this.isPortalAdministrator = Session.isPortalAdministrator(user) && !this.selectedCommunityPid;
|
||||
});
|
||||
//this.getCommunities();
|
||||
});
|
||||
|
||||
this._helpContentService.getEntities(this.properties.adminToolsAPIURL).subscribe(
|
||||
entities => {
|
||||
this.allEntities = entities;
|
||||
this.showLoading = false;
|
||||
},
|
||||
error => this.handleError('System error retrieving community entities', error));
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.subscriptions.forEach(value => {
|
||||
if (value instanceof Subscriber) {
|
||||
value.unsubscribe();
|
||||
} else if (value instanceof Function) {
|
||||
value();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getPages(community_pid: string) {
|
||||
if (!Session.isLoggedIn()) {
|
||||
this._router.navigate(['/user-info'], {
|
||||
queryParams: {
|
||||
'errorCode': LoginErrorCodes.NOT_VALID,
|
||||
'redirectUrl': this._router.url
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.showLoading = true;
|
||||
this.updateErrorMessage = '';
|
||||
this.errorMessage = '';
|
||||
|
||||
this.pageWithDivIds = [];
|
||||
|
||||
let parameters = '';
|
||||
if (this.pagesType) {
|
||||
parameters = '?page_type=' + this.pagesType;
|
||||
}
|
||||
if (community_pid) {
|
||||
this._helpContentService.getCommunityPages(community_pid, parameters, this.properties.adminToolsAPIURL).subscribe(
|
||||
pages => {
|
||||
this.pagesReturned(pages);
|
||||
//if(!this.pagesType || this.pagesType == "link") {
|
||||
this.getPagesWithDivIds(community_pid);
|
||||
//} else {
|
||||
//this.showLoading = false;
|
||||
//}
|
||||
},
|
||||
error => this.handleError('System error retrieving pages', error)
|
||||
);
|
||||
} else {
|
||||
this._helpContentService.getPagesFull(this.properties.adminToolsAPIURL, null).subscribe(
|
||||
pages => {
|
||||
this.pagesReturned(pages);
|
||||
this.showLoading = false;
|
||||
},
|
||||
error => this.handleError('System error retrieving pages', error)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getPagesWithDivIds(community_pid: string) {
|
||||
if (!Session.isLoggedIn()) {
|
||||
this._router.navigate(['/user-info'], {
|
||||
queryParams: {
|
||||
'errorCode': LoginErrorCodes.NOT_VALID,
|
||||
'redirectUrl': this._router.url
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this._helpContentService.getPagesWithDivIds(community_pid, this.properties.adminToolsAPIURL).subscribe(
|
||||
pages => {
|
||||
this.pageWithDivIds = pages;
|
||||
this.showLoading = false;
|
||||
},
|
||||
error => this.handleError('System error retrieving information about pages\' classes', error));
|
||||
}
|
||||
}
|
||||
|
||||
pagesReturned(pages: Page[]) {
|
||||
this.pages = pages;
|
||||
this.checkboxes = [];
|
||||
|
||||
if (pages) {
|
||||
pages.forEach(_ => {
|
||||
this.checkboxes.push(<CheckPage>{page: _, checked: false});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
getCommunities() {
|
||||
this._helpContentService.getCommunities(this.properties.adminToolsAPIURL).subscribe(
|
||||
communities => {
|
||||
this.communities = communities;
|
||||
this.selectedCommunityPid = this.communities[0].pid;
|
||||
this.getPages(this.selectedCommunityPid);
|
||||
this.getPagesWithDivIds(this.selectedCommunityPid);
|
||||
},
|
||||
error => this.handleError('System error retrieving communities', error));
|
||||
}
|
||||
*/
|
||||
|
||||
public toggleCheckBoxes(event) {
|
||||
this.checkboxes.forEach(_ => _.checked = event.target.checked);
|
||||
}
|
||||
|
||||
public applyCheck(flag: boolean) {
|
||||
this.checkboxes.forEach(_ => _.checked = flag);
|
||||
}
|
||||
|
||||
public getSelectedPages(): string[] {
|
||||
return this.checkboxes.filter(page => page.checked == true).map(checkedPage => checkedPage.page).map(res => res._id);
|
||||
}
|
||||
|
||||
private deletePagesFromArray(ids: string[]): void {
|
||||
for (let id of ids) {
|
||||
let i = this.checkboxes.findIndex(_ => _.page._id == id);
|
||||
this.checkboxes.splice(i, 1);
|
||||
}
|
||||
}
|
||||
|
||||
public confirmDeletePage(id: string) {
|
||||
//this.deleteConfirmationModal.ids = [id];
|
||||
//this.deleteConfirmationModal.showModal();
|
||||
this.selectedPages = [id];
|
||||
this.confirmModalOpen();
|
||||
}
|
||||
|
||||
public confirmDeleteSelectedPages() {
|
||||
//this.deleteConfirmationModal.ids = this.getSelectedPages();
|
||||
//this.deleteConfirmationModal.showModal();
|
||||
this.selectedPages = this.getSelectedPages();
|
||||
this.confirmModalOpen();
|
||||
}
|
||||
|
||||
private confirmModalOpen() {
|
||||
if (!Session.isLoggedIn()) {
|
||||
this._router.navigate(['/user-info'], {
|
||||
queryParams: {
|
||||
'errorCode': LoginErrorCodes.NOT_VALID,
|
||||
'redirectUrl': this._router.url
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.alertModalDeletePages.cancelButton = true;
|
||||
this.alertModalDeletePages.okButton = true;
|
||||
this.alertModalDeletePages.alertTitle = 'Delete Confirmation';
|
||||
this.alertModalDeletePages.message = 'Are you sure you want to delete the selected page(s)?';
|
||||
this.alertModalDeletePages.okButtonText = 'Yes';
|
||||
this.alertModalDeletePages.open();
|
||||
}
|
||||
}
|
||||
|
||||
public confirmedDeletePages(data: any) {
|
||||
if (!Session.isLoggedIn()) {
|
||||
this._router.navigate(['/user-info'], {
|
||||
queryParams: {
|
||||
'errorCode': LoginErrorCodes.NOT_VALID,
|
||||
'redirectUrl': this._router.url
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.showLoading = true;
|
||||
this.updateErrorMessage = '';
|
||||
|
||||
this._helpContentService.deletePages(this.selectedPages, this.properties.adminToolsAPIURL).subscribe(
|
||||
_ => {
|
||||
this.deletePagesFromArray(this.selectedPages);
|
||||
this.showLoading = false;
|
||||
},
|
||||
error => this.handleUpdateError('System error deleting the selected pages', error)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
public editPage(i: number) {
|
||||
this.entitiesCtrl = this._fb.array([]);
|
||||
let page: Page = this.checkboxes[i].page;
|
||||
this.myForm = this._fb.group({
|
||||
route: [page.route, Validators.required],
|
||||
name: [page.name, Validators.required],
|
||||
isEnabled: page.isEnabled,
|
||||
openaire: page.openaire,
|
||||
connect: page.connect,
|
||||
communities: page.communities,
|
||||
top: page.top,
|
||||
bottom: page.bottom,
|
||||
left: page.left,
|
||||
right: page.right,
|
||||
type: [page.type, Validators.required],
|
||||
entities: this.entitiesCtrl,
|
||||
_id: page._id,
|
||||
});
|
||||
|
||||
for (let i = 0; i < page.entities.length; i++) {
|
||||
this.entitiesCtrl.push(this._fb.control(page.entities[i]));
|
||||
}
|
||||
this.filteredEntities = this.entitiesSearchCtrl.valueChanges.pipe(startWith(''),
|
||||
map(page => this._filter(page)));
|
||||
this.selectedEntities = JSON.parse(JSON.stringify(page.entities));
|
||||
this.modalErrorMessage = '';
|
||||
this.pagesModalOpen(this.alertModalSavePage, '', 'Save changes');
|
||||
}
|
||||
|
||||
private _filter(value: string): Entity[] {
|
||||
if (!value || value.length == 0) {
|
||||
return this.allEntities.slice();
|
||||
}
|
||||
const filterValue = value.toString().toLowerCase();
|
||||
return this.allEntities.filter(page => page.name.toLowerCase().indexOf(filterValue) != -1);
|
||||
}
|
||||
|
||||
public newPage() {
|
||||
this.entitiesCtrl = this._fb.array([]);
|
||||
this.myForm = this._fb.group({
|
||||
route: ['', Validators.required],
|
||||
name: ['', Validators.required],
|
||||
isEnabled: true,
|
||||
openaire: true,
|
||||
connect: false,
|
||||
communities: true,
|
||||
top: true,
|
||||
bottom: true,
|
||||
left: true,
|
||||
right: true,
|
||||
type: [this.typeOptions[0].value, Validators.required],
|
||||
entities: this._fb.array([]),
|
||||
_id: '',
|
||||
});
|
||||
this.selectedEntities = [];
|
||||
this.modalErrorMessage = '';
|
||||
this.filteredEntities = this.entitiesSearchCtrl.valueChanges.pipe(startWith(''),
|
||||
map(page => this._filter(page)));
|
||||
this.pagesModalOpen(this.alertModalSavePage, '', 'Save');
|
||||
}
|
||||
|
||||
private pagesModalOpen(modal: any, title: string, yesBtn: string) {
|
||||
if (!Session.isLoggedIn()) {
|
||||
this._router.navigate(['/user-info'], {
|
||||
queryParams: {
|
||||
'errorCode': LoginErrorCodes.NOT_VALID,
|
||||
'redirectUrl': this._router.url
|
||||
}
|
||||
});
|
||||
} else {
|
||||
modal.cancelButton = true;
|
||||
modal.okButton = true;
|
||||
modal.alertTitle = title;
|
||||
modal.okButtonText = yesBtn;
|
||||
modal.open();
|
||||
}
|
||||
}
|
||||
|
||||
public pageSaveConfirmed(data: any) {
|
||||
if (!Session.isLoggedIn()) {
|
||||
this._router.navigate(['/user-info'], {
|
||||
queryParams: {
|
||||
'errorCode': LoginErrorCodes.NOT_VALID,
|
||||
'redirectUrl': this._router.url
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log(this.myForm.value)
|
||||
if (this.myForm.value['_id'].length == 0) {
|
||||
this.modalErrorMessage = '';
|
||||
this._helpContentService.savePage(<Page>this.myForm.value, this.properties.adminToolsAPIURL).subscribe(
|
||||
page => {
|
||||
this.pageSavedSuccessfully(page, true);
|
||||
},
|
||||
error => this.handleUpdateError('System error creating page', error)
|
||||
);
|
||||
} else {
|
||||
this._helpContentService.updatePage(<Page>this.myForm.value, this.properties.adminToolsAPIURL).subscribe(
|
||||
page => {
|
||||
this.pageSavedSuccessfully(page, false);
|
||||
},
|
||||
error => this.handleUpdateError('System error updating page', error)
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* public pageUpdateConfirmed(data: any) {
|
||||
if (!Session.isLoggedIn()) {
|
||||
this._router.navigate(['/user-info'], {queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}});
|
||||
} else {
|
||||
if (!this.myForm.valid) {
|
||||
this.pagesModalOpen(this.alertModalSavePage, 'Update', 'Update Page');
|
||||
this.modalErrorMessage = 'Please fill in all required fields marked with *';
|
||||
} else {
|
||||
this._helpContentService.updatePage(<Page>this.myForm.value, this.properties.adminToolsAPIURL).subscribe(
|
||||
page => {
|
||||
this.pageUpdatedSuccessfully(page);
|
||||
},
|
||||
error => this.handleUpdateError('System error updating page', error)
|
||||
);
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
public pageSavedSuccessfully(page: Page, isNew: boolean) {
|
||||
if (isNew) {
|
||||
this.checkboxes.push(<CheckPage>{page: page, checked: false});
|
||||
} else {
|
||||
this.checkboxes.find(checkItem => checkItem.page._id == page._id).page = page;
|
||||
}
|
||||
this.applyCheck(false);
|
||||
}
|
||||
|
||||
|
||||
public filterBySearch(text: string) {
|
||||
this.searchText = new RegExp(text, 'i');
|
||||
this.applyFilter();
|
||||
}
|
||||
|
||||
public applyFilter() {
|
||||
this.checkboxes = [];
|
||||
this.pages.filter(item => this.filterPages(item)).forEach(
|
||||
_ => this.checkboxes.push(<CheckPage>{page: _, checked: false})
|
||||
);
|
||||
}
|
||||
|
||||
public filterPages(page: Page): boolean {
|
||||
let textFlag = this.searchText.toString() == '' || (page.route + ' ' + page.name).match(this.searchText) != null;
|
||||
return textFlag;
|
||||
}
|
||||
|
||||
handleError(message: string, error) {
|
||||
// if(error == null) {
|
||||
// this.formComponent.reset();
|
||||
// } else {
|
||||
this.errorMessage = message;// + ' (Server responded: ' + error + ')';
|
||||
console.log('Server responded: ' + error);
|
||||
//}
|
||||
|
||||
this.showLoading = false;
|
||||
}
|
||||
|
||||
handleUpdateError(message: string, error) {
|
||||
if (error == null) {
|
||||
// this.formComponent.reset();
|
||||
this.myForm = this._fb.group({
|
||||
route: ['', Validators.required],
|
||||
name: ['', Validators.required],
|
||||
isEnabled: true,
|
||||
openaire: true,
|
||||
connect: false,
|
||||
communities: true,
|
||||
top: true,
|
||||
bottom: true,
|
||||
left: true,
|
||||
right: true,
|
||||
type: ['', Validators.required],
|
||||
entities: this._fb.array([]),
|
||||
_id: '',
|
||||
});
|
||||
} else {
|
||||
this.updateErrorMessage = message;// + ' (Server responded: ' + error + ')';
|
||||
console.log('Server responded: ' + error);
|
||||
}
|
||||
|
||||
this.showLoading = false;
|
||||
}
|
||||
|
||||
// public filterByCommunity(event: any) {
|
||||
// this.selectedCommunityPid = event.target.value;
|
||||
// this.applyCommunityFilter(this.selectedCommunityPid);
|
||||
// }
|
||||
|
||||
public applyCommunityFilter(community_pid: string) {
|
||||
this.getPages(community_pid);
|
||||
}
|
||||
|
||||
public togglePages(status: boolean, ids: string[]) {
|
||||
if (!Session.isLoggedIn()) {
|
||||
this._router.navigate(['/user-info'], {
|
||||
queryParams: {
|
||||
'errorCode': LoginErrorCodes.NOT_VALID,
|
||||
'redirectUrl': this._router.url
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.updateErrorMessage = '';
|
||||
|
||||
this._helpContentService.togglePages(this.selectedCommunityPid, ids, status, this.properties.adminToolsAPIURL).subscribe(
|
||||
() => {
|
||||
for (let id of ids) {
|
||||
let i = this.checkboxes.findIndex(_ => _.page._id == id);
|
||||
this.checkboxes[i].page.isEnabled = status;
|
||||
}
|
||||
this.applyCheck(false);
|
||||
},
|
||||
error => this.handleUpdateError('System error changing the status of the selected page(s)', error)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
public capitalizeFirstLetter(str: string) {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1);
|
||||
}
|
||||
|
||||
remove(entity): void {
|
||||
let index = this.selectedEntities.indexOf(entity);
|
||||
console.log(entity);
|
||||
console.log(this.selectedEntities);
|
||||
console.log(index)
|
||||
if (index >= 0) {
|
||||
this.selectedEntities.splice(index, 1);
|
||||
this.entitiesCtrl.value.splice(index, 1);
|
||||
this.entitiesCtrl.markAsDirty();
|
||||
}
|
||||
}
|
||||
|
||||
selected(event: MatAutocompleteSelectedEvent): void {
|
||||
|
||||
let newEntity = event.option.value;
|
||||
|
||||
if (this.selectedEntities.indexOf(newEntity) == -1) {
|
||||
this.selectedEntities.push(event.option.value);
|
||||
this.entitiesCtrl.push(this._fb.control(newEntity));
|
||||
this.entitiesCtrl.markAsDirty();
|
||||
}
|
||||
this.pageInput.nativeElement.value = '';
|
||||
this.entitiesSearchCtrl.setValue('');
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {ConnectAdminLoginGuard} from '../../connect/communityGuard/connectAdminLoginGuard.guard';
|
||||
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
|
||||
import {AlertModalModule} from '../../utils/modal/alertModal.module';
|
||||
import {PagesComponent} from './pages.component';
|
||||
import {PagesRoutingModule} from './pages-routing.module';
|
||||
import {MatAutocompleteModule, MatChipsModule, MatFormFieldModule, MatSlideToggleModule} from '@angular/material';
|
||||
import {IsCommunityOrAdmin} from '../../connect/communityGuard/isCommunityOrAdmin';
|
||||
import {AdminToolServiceModule} from "../../services/adminToolService.module";
|
||||
import {InputModule} from "../../../library/sharedComponents/input/input.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, RouterModule, FormsModule, AlertModalModule, ReactiveFormsModule, PagesRoutingModule, MatSlideToggleModule, AdminToolServiceModule, InputModule,
|
||||
MatAutocompleteModule, MatFormFieldModule, MatChipsModule
|
||||
],
|
||||
declarations: [PagesComponent],
|
||||
providers: [IsCommunityOrAdmin, ConnectAdminLoginGuard],
|
||||
exports: [PagesComponent]
|
||||
})
|
||||
export class PagesModule { }
|
||||
Loading…
Reference in New Issue