[Library | Trunk]

Dashboard - Admin tool pages:
- add tabs components
- add rout module (without guards)
- put tabs and page-content in pages, classes, entities pages


Stakeholder: 
initial try to add filters for country and organization fields (doesn't work properly)


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60202 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki 2021-01-11 09:21:42 +00:00
parent 509018d72c
commit 10778b3c85
36 changed files with 729 additions and 554 deletions

View File

@ -0,0 +1,13 @@
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {DivIdsComponent} from "./divIds.component";
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', component: DivIdsComponent}
])
]
})
export class ClassesRoutingModule { }

View File

@ -1,62 +1,66 @@
<div id="page_content"> <div page-content>
<div class="uk-padding-small md-bg-white" uk-grid> <admin-tabs tab = "class" header></admin-tabs>
<div inner class="admin-pages">
<div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right"> <div *ngIf="!errorMessage && !showLoading" class="filters" uk-sticky="offset:150">
<div class="uk-inline uk-width-medium"> <div class="show-options uk-float-right">
<span class="uk-position-center-right"><i class="material-icons">search</i></span> <button class="uk-button uk-button-primary " type="button">Bulk Actions</button>
<div dashboard-input [formInput]="filterForm" label="Find class"></div> <div uk-dropdown="mode: click">
<ul class="uk-nav uk-margin-left"
[attr.uk-tooltip]="getSelectedDivIds().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one class">
<li><a [class]="getSelectedDivIds().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedDivIds()"><i></i> Delete </a></li>
</ul>
</div> </div>
</div> </div>
<div class="uk-inline uk-width-medium uk-float-right uk-margin-right" >
<span class="uk-position-center-right"><i class="material-icons">search</i></span>
<div dashboard-input [formInput]="filterForm.controls.keyword"
placeholder="Search"></div>
</div>
<ul class="uk-subnav uk-subnav-pill subCategoriesTabs ignore admin " >
<li [class.uk-active]="filterForm.get('type').value === 'all'" class="uk-margin-small-bottom"><a
(click)="filterForm.get('type').setValue('all')"><span
class="title">All portals</span></a></li>
<li *ngFor="let type of portalUtils.portalTypes; let i=index"
[class.uk-active]="filterForm.get('type').value === type.value" class="uk-margin-small-bottom"><a
(click)="filterForm.get('type').setValue(type.value)"><span
class="title">{{type.label}}</span></a></li>
</ul>
</div> </div>
<div id="page_content_inner">
<div class="menubar ">
<h4 class="uk-text-bold">Predefined classes for contents</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="content-wrapper" id="contentWrapper">
<a *ngIf="!showLoading && !errorMessage" (click)="newDivId()"
class="uk-flex uk-flex-right uk-flex-middle uk-margin-small-bottom uk-width-1-1">
<div class="uk-button-default large uk-icon-button uk-margin-small-right" uk-icon="plus">
</div>
Add class
</a>
<div> <div>
<div class="contentPanel"> <div class="contentPanel">
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
<a class="uk-alert-close" uk-close></a>
{{updateErrorMessage}}
</div>
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top" <div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top"
role="alert">{{errorMessage}}</div> role="alert">{{errorMessage}}</div>
<div [style.display]="showLoading ? 'inline' : 'none'" <div [style.display]="showLoading ? 'inline' : 'none'"
class="uk-animation-fade uk-margin-large-top uk-width-1-1" role="alert"><img class="uk-animation-fade uk-margin-large-top uk-width-1-1" role="alert"><img
class="uk-align-center loading-gif"></div> class="uk-align-center loading-gif"></div>
<div *ngIf="!errorMessage && !showLoading" class="page-controls">
<div class=" filters ">
<div class="show-options uk-float-right">
<button class="uk-button" type="button">Bulk Actions</button>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-margin-left"
[attr.uk-tooltip]="getSelectedDivIds().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one class">
<li><a [class]="getSelectedDivIds().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedDivIds()"><i></i> Delete </a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading"> <div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading">
<div class="md-card-content"> <div class="md-card-content">
<div class="uk-overflow-container"> <div class="uk-overflow-container">
<table class="uk-table uk-table-striped"> <table class="uk-table uk-table-striped uk-table-large">
<thead> <thead class="form-header">
<tr> <tr>
<th><input id="allDivIdCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th> <th
class="uk-width-small"><input id="allDivIdCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th>
<th>Name</th> <th>Name</th>
<th *ngIf="!selectedCommunityPid">Portal Type</th>
<th>Page</th> <th>Page</th>
<th *ngIf="selectedCommunityPid">Portal Type</th>
<th>Actions</th> <th>Actions</th>
</tr> </tr>
</thead> </thead>
@ -104,8 +108,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<modal-alert #AlertModalSaveDivId (alertOutput)="divIdSaveConfirmed($event)" <modal-alert #AlertModalSaveDivId (alertOutput)="divIdSaveConfirmed($event)"
[okDisabled]="myForm && (myForm.invalid || !myForm.dirty)"> [okDisabled]="myForm && (myForm.invalid || !myForm.dirty)">
@ -124,7 +126,7 @@
[removable]="true"> [removable]="true">
{{page.name}} {{page.name}}
<span (click)="remove(page)" <span (click)="remove(page)"
class="mat-icon notranslate mat-chip-remove mat-chip-trailing-icon material-icons mat-icon-no-color ng-star-inserted">cancel</span> class=" notranslate mat-chip-remove mat-chip-trailing-icon " uk-icon="trash"></span>
</mat-chip> </mat-chip>
<input placeholder="Add in pages..." #PageInput <input placeholder="Add in pages..." #PageInput
[formControl]="pageSearchCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList"> [formControl]="pageSearchCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList">
@ -137,46 +139,17 @@
</mat-form-field> </mat-form-field>
<div [ngClass]="{'has-error':!myForm.controls.portalType.valid && myForm.controls.portalType.dirty}" class="form-group" uk-grid> <div [ngClass]="{'has-error':!myForm.controls.portalType.valid && myForm.controls.portalType.dirty}" class="form-group" uk-grid>
<label class="uk-width-1-1 uk-margin-small-bottom"> <div class="uk-width-1-1 uk-margin-small-bottom uk-text-bold uk-form-label">
Class exists in: Class exists in:
</label> </div>
<label class="uk-width-1-1 radio uk-margin-large-left"> <div class="uk-child-width-1-2 uk-grid">
<span class="uk-margin-small-right" style="font-weight: normal;">OpenAIRE portal</span> <span *ngFor="let option of portalUtils.portalTypes" class="radio ">
<input type="radio" value="explore" formControlName="portalType"> <span class="uk-margin-small-right" style="font-weight: normal;">{{option.label}}</span>
</label> <input type="radio" [value]="option.value" formControlName="portalType">
<label class="uk-width-1-1 radio uk-margin-large-left"> </span>
<span class="uk-margin-small-right" style="font-weight: normal;">OpenAIRE Connect portal</span> </div>
<input type="radio" value="connect" formControlName="portalType">
</label>
<label class="uk-width-1-1 radio uk-margin-large-left">
<span class="uk-margin-small-right" style="font-weight: normal;">Communities' Gateway</span>
<input type="radio" value="community" formControlName="portalType">
</label>
</div> </div>
<!-- <div class="form-group uk-margin-small-left">-->
<!-- <div class="uk-text-muted"> Select if this class 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>-->
<!--&lt;!&ndash; <mat-checkbox [formControl]="myForm.get('openaire')" >Explore Portal</mat-checkbox>&ndash;&gt;-->
<!--&lt;!&ndash; <input type="checkbox" id="openaire" formControlName="openaire"/> Explore Portal&ndash;&gt;-->
<!--&lt;!&ndash; <input type="checkbox" [formControl]="myForm.get('connect')" formControlName="connect"/> Connect Portal&ndash;&gt;-->
<!--&lt;!&ndash; <input type="checkbox" [formControl]="myForm.controls.communities"&ndash;&gt;-->
<!--&lt;!&ndash; formControlName="communities"/>Communities Dashboards&ndash;&gt;-->
<!-- </div>-->
<input type="hidden" formControlName="_id"> <input type="hidden" formControlName="_id">
</form> </form>

View File

@ -12,6 +12,9 @@ import {HelperFunctions} from "../../utils/HelperFunctions.class";
import {Observable, Subscriber} from "rxjs"; import {Observable, Subscriber} from "rxjs";
import {map, startWith} from "rxjs/operators"; import {map, startWith} from "rxjs/operators";
import {MatAutocompleteSelectedEvent, MatChipInputEvent} from "@angular/material"; import {MatAutocompleteSelectedEvent, MatChipInputEvent} from "@angular/material";
import {properties} from "../../../../environments/environment";
import {PortalUtils} from "../portal/portalHelper";
import {CheckPortal, Portal} from "../../utils/entities/adminTool/portal";
@Component({ @Component({
selector: 'divIds', selector: 'divIds',
@ -39,20 +42,25 @@ export class DivIdsComponent implements OnInit {
public errorMessage: string = ''; public errorMessage: string = '';
public updateErrorMessage: string = ''; public updateErrorMessage: string = '';
public modalErrorMessage: string = ''; public modalErrorMessage: string = '';
public filterForm: FormControl; public filterForm: FormGroup;
private subscriptions: any[] = []; private subscriptions: any[] = [];
public allPages: Page[] = []; public allPages: Page[] = [];
filteredPages: Observable<Page[]>; filteredPages: Observable<Page[]>;
@ViewChild('PageInput') pageInput: ElementRef<HTMLInputElement>; @ViewChild('PageInput') pageInput: ElementRef<HTMLInputElement>;
selectedPages: Page[] = []; selectedPages: Page[] = [];
selectedCommunityPid = null; selectedCommunityPid = null;
public portalUtils:PortalUtils = new PortalUtils();
ngOnInit() { ngOnInit() {
this.filterForm = this._fb.control(''); this.filterForm = this._fb.group({
this.pageSearchCtrl = this._fb.control(''); keyword: [''],
this.subscriptions.push(this.filterForm.valueChanges.subscribe(value => { type: ['all', Validators.required]});
this.subscriptions.push(this.filterForm.get('keyword').valueChanges.subscribe(value => {
this.filterBySearch(value); this.filterBySearch(value);
})); }));
this.subscriptions.push(this.filterForm.get('type').valueChanges.subscribe(value => {
this.applyTypeFilter();
}));
this.pageSearchCtrl = this._fb.control('');
this.pagesCtrl = this._fb.array([]); this.pagesCtrl = this._fb.array([]);
this.myForm = this._fb.group({ this.myForm = this._fb.group({
_id: '', _id: '',
@ -60,19 +68,14 @@ export class DivIdsComponent implements OnInit {
pages: this.pagesCtrl, pages: this.pagesCtrl,
portalType: ['', Validators.required] portalType: ['', Validators.required]
}); });
this.properties = properties;
this.getDivIds();
this.subscriptions.push(this.route.queryParams.subscribe(params => {
HelperFunctions.scroll();
this.selectedCommunityPid = params['communityId'];
this.getPages();
}));
this.route.data
.subscribe((data: { envSpecific: EnvProperties }) => {
HelperFunctions.scroll();
this.properties = data.envSpecific;
this.getDivIds();
this.route.queryParams.subscribe(params => {
this.selectedCommunityPid = params['communityId'];
this.getPages();
});
});
} }
constructor(private element: ElementRef, private route: ActivatedRoute, private _router: Router, private _helpContentService: HelpContentService, private _fb: FormBuilder) { constructor(private element: ElementRef, private route: ActivatedRoute, private _router: Router, private _helpContentService: HelpContentService, private _fb: FormBuilder) {
@ -101,7 +104,7 @@ export class DivIdsComponent implements OnInit {
this.updateErrorMessage = ""; this.updateErrorMessage = "";
this.errorMessage = ""; this.errorMessage = "";
this._helpContentService.getAllDivIdsFull( this.properties.adminToolsAPIURL).subscribe( this.subscriptions.push(this._helpContentService.getAllDivIdsFull( this.properties.adminToolsAPIURL).subscribe(
divIds => { divIds => {
this.divIds = divIds; this.divIds = divIds;
this.checkboxes = []; this.checkboxes = [];
@ -113,7 +116,7 @@ export class DivIdsComponent implements OnInit {
this.showLoading = false; this.showLoading = false;
}, },
error => this.handleError('System error retrieving classes', error)); error => this.handleError('System error retrieving classes', error)));
} }
} }
@ -179,13 +182,13 @@ export class DivIdsComponent implements OnInit {
} else { } else {
this.showLoading = true; this.showLoading = true;
this.updateErrorMessage = ""; this.updateErrorMessage = "";
this._helpContentService.deleteDivIds(this.selectedDivIds, this.properties.adminToolsAPIURL).subscribe( this.subscriptions.push(this._helpContentService.deleteDivIds(this.selectedDivIds, this.properties.adminToolsAPIURL).subscribe(
_ => { _ => {
this.deleteDivIdsFromArray(this.selectedDivIds); this.deleteDivIdsFromArray(this.selectedDivIds);
this.showLoading = false; this.showLoading = false;
}, },
error => this.handleUpdateError('System error deleting the selected classes', error) error => this.handleUpdateError('System error deleting the selected classes', error)
); ));
} }
} }
@ -260,19 +263,19 @@ export class DivIdsComponent implements OnInit {
this.modalErrorMessage = ""; this.modalErrorMessage = "";
this._helpContentService.saveDivId(<DivId>this.myForm.value, this.properties.adminToolsAPIURL).subscribe( this.subscriptions.push(this._helpContentService.saveDivId(<DivId>this.myForm.value, this.properties.adminToolsAPIURL).subscribe(
divId => { divId => {
this.divIdSavedSuccessfully(divId); this.divIdSavedSuccessfully(divId);
}, },
error => this.handleUpdateError("System error creating class", error) error => this.handleUpdateError("System error creating class", error)
); ));
} else { } else {
this._helpContentService.updateDivId(<DivId>this.myForm.value, this.properties.adminToolsAPIURL).subscribe( this.subscriptions.push(this._helpContentService.updateDivId(<DivId>this.myForm.value, this.properties.adminToolsAPIURL).subscribe(
divId => { divId => {
this.divIdUpdatedSuccessfully(divId); this.divIdUpdatedSuccessfully(divId);
}, },
error => this.handleUpdateError("System error updating class", error) error => this.handleUpdateError("System error updating class", error)
); ));
} }
} }
@ -299,7 +302,17 @@ export class DivIdsComponent implements OnInit {
_ => this.checkboxes.push(<CheckDivId>{divId: _, checked: false}) _ => this.checkboxes.push(<CheckDivId>{divId: _, checked: false})
); );
} }
public applyTypeFilter() {
this.checkboxes = [];
this.divIds.filter(item => this.filterByType(item)).forEach(
_ => this.checkboxes.push(<CheckDivId>{divId: _, checked: false})
);
}
public filterByType(divId: DivId): boolean {
let type = this.filterForm.get("type").value;
return type == "all" || (type == divId.portalType);
}
public filterDivIds(divId: DivId): boolean { public filterDivIds(divId: DivId): boolean {
let textFlag = this.searchText.toString() == '' || (divId.name + ' ' + divId.portalType).match(this.searchText) != null; let textFlag = this.searchText.toString() == '' || (divId.name + ' ' + divId.portalType).match(this.searchText) != null;
return textFlag; return textFlag;
@ -326,13 +339,13 @@ export class DivIdsComponent implements OnInit {
getPages() { getPages() {
this.showLoading = true; this.showLoading = true;
this.errorMessage = ""; this.errorMessage = "";
this._helpContentService.getAllPages(this.properties.adminToolsAPIURL).subscribe( this.subscriptions.push(this._helpContentService.getAllPages(this.properties.adminToolsAPIURL).subscribe(
pages => { pages => {
this.allPages = pages; this.allPages = pages;
this.showLoading = false; this.showLoading = false;
}, },
error => this.handleError('System error retrieving pages', error) error => this.handleError('System error retrieving pages', error)
); ));
} }

View File

@ -13,13 +13,16 @@ import {MatCheckboxModule, MatFormFieldModule} from "@angular/material";
import {MatChipsModule} from '@angular/material/chips'; import {MatChipsModule} from '@angular/material/chips';
import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module";
import {PageContentModule} from "../sharedComponents/page-content/page-content.module";
import {ClassesRoutingModule} from "./classes-routing.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, RouterModule, FormsModule, CommonModule, RouterModule, FormsModule,
AlertModalModule, ReactiveFormsModule, AdminToolServiceModule, InputModule, MatAutocompleteModule, MatFormFieldModule, MatChipsModule, AlertModalModule, ReactiveFormsModule, AdminToolServiceModule, InputModule, MatAutocompleteModule, MatFormFieldModule, MatChipsModule,
MatCheckboxModule MatCheckboxModule, AdminTabsModule, PageContentModule, ClassesRoutingModule
], ],
declarations: [DivIdsComponent], declarations: [DivIdsComponent],
exports: [DivIdsComponent] exports: [DivIdsComponent]
}) })

View File

@ -0,0 +1,12 @@
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import {DivHelpContentsComponent} from "./div-help-contents.component";
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', component: DivHelpContentsComponent}
])
]
})
export class DivHelpContentsRoutingModule { }

View File

@ -142,7 +142,7 @@
</div> </div>
<a *ngIf="selectedPageId && page" [queryParams]="{type: page.type, communityId: selectedCommunityPid}" <a *ngIf="selectedPageId && page" [queryParams]="{type: page.type, communityId: selectedCommunityPid}"
routerLink="/pages">Go back to {{page.type}} pages</a> routerLink="../../pages">Go back to {{page.type}} pages</a>
</div> </div>
</div> </div>

View File

@ -16,6 +16,7 @@ import {Session} from '../../login/utils/helper.class';
import {LoginErrorCodes} from '../../login/utils/guardHelper.class'; import {LoginErrorCodes} from '../../login/utils/guardHelper.class';
import {HelperFunctions} from "../../utils/HelperFunctions.class"; import {HelperFunctions} from "../../utils/HelperFunctions.class";
import {Subscriber} from "rxjs"; import {Subscriber} from "rxjs";
import {properties} from "../../../../environments/environment";
@Component({ @Component({
selector: 'div-help-contents', selector: 'div-help-contents',
@ -74,24 +75,22 @@ export class DivHelpContentsComponent implements OnInit {
this.filterByPage(value); this.filterByPage(value);
})); }));
this.route.data this.properties = properties;
.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
this.route.queryParams.subscribe(params => { this.subscriptions.push(this.route.queryParams.subscribe(params => {
HelperFunctions.scroll(); HelperFunctions.scroll();
this.selectedCommunityPid = params['communityId']; this.selectedCommunityPid = params['communityId'];
this.selectedPageId = params['pageId']; this.selectedPageId = params['pageId'];
if (this.selectedCommunityPid && this.selectedPageId) {
this.getPage(this.selectedPageId);
} else if (this.selectedCommunityPid) {
this.selectedPageId = "";
this.getPages(this.selectedCommunityPid);
}
}));
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) { constructor(private element: ElementRef, private route: ActivatedRoute, private _helpService: HelpContentService, private router: Router, private _fb: FormBuilder) {
@ -123,7 +122,7 @@ export class DivHelpContentsComponent implements OnInit {
this._helpService.getPageByPortal(pageId, this.properties.adminToolsAPIURL, this.selectedCommunityPid).subscribe( this._helpService.getPageByPortal(pageId, this.properties.adminToolsAPIURL, this.selectedCommunityPid).subscribe(
page => { page => {
if (this.properties.adminToolsPortalType != page.portalType) { if (this.properties.adminToolsPortalType != page.portalType) {
this.router.navigate(['/classContents'], {queryParams: {"communityId": this.selectedCommunityPid}}); this.router.navigate(['../../classContents'], {queryParams: {"communityId": this.selectedCommunityPid}});
} else { } else {
this.page = page; this.page = page;
this.getDivHelpContents(this.selectedCommunityPid); this.getDivHelpContents(this.selectedCommunityPid);
@ -292,7 +291,7 @@ export class DivHelpContentsComponent implements OnInit {
public editDivHelpContent(id: string) { public editDivHelpContent(id: string) {
//this.router.navigate(['/pageContents/edit/', _id]); //this.router.navigate(['/pageContents/edit/', _id]);
if (this.selectedPageId) { if (this.selectedPageId) {
this.router.navigate(['/classContents/edit/'], { this.router.navigate(['../../classContents/edit/'], {
queryParams: { queryParams: {
"classContentId": id, "classContentId": id,
"communityId": this.selectedCommunityPid, "communityId": this.selectedCommunityPid,
@ -300,7 +299,7 @@ export class DivHelpContentsComponent implements OnInit {
} }
}); });
} else { } else {
this.router.navigate(['/classContents/edit/'], { this.router.navigate(['../../classContents/edit/'], {
queryParams: { queryParams: {
"classContentId": id, "classContentId": id,
"communityId": this.selectedCommunityPid "communityId": this.selectedCommunityPid
@ -422,15 +421,16 @@ export class DivHelpContentsComponent implements OnInit {
} }
public newClassContent() { public newClassContent() {
console.log("AAA")
if (this.selectedPageId) { if (this.selectedPageId) {
this.router.navigate(['/classContents/new'], { this.router.navigate(['../../classContents/new'], {
queryParams: { queryParams: {
communityId: this.selectedCommunityPid, communityId: this.selectedCommunityPid,
pageId: this.selectedPageId pageId: this.selectedPageId
} }, relativeTo: this.route
}); });
} else { } else {
this.router.navigate(['/classContents/new'], {queryParams: {communityId: this.selectedCommunityPid}}); this.router.navigate(['../../classContents/new'], {queryParams: {communityId: this.selectedCommunityPid}, relativeTo: this.route});
} }
} }
} }

View File

@ -10,11 +10,12 @@ import {DivHelpContentsComponent} from './div-help-contents.component';
import {MatSlideToggleModule} from '@angular/material'; import {MatSlideToggleModule} from '@angular/material';
import {AdminToolServiceModule} from "../../services/adminToolService.module"; import {AdminToolServiceModule} from "../../services/adminToolService.module";
import {InputModule} from "../../sharedComponents/input/input.module"; import {InputModule} from "../../sharedComponents/input/input.module";
import {DivHelpContentsRoutingModule} from "./div-help-contents-routing.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, RouterModule, FormsModule, SafeHtmlPipeModule, CommonModule, RouterModule, FormsModule, SafeHtmlPipeModule,
AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, AdminToolServiceModule, InputModule AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, AdminToolServiceModule, InputModule, DivHelpContentsRoutingModule
], ],
declarations: [ declarations: [
DivHelpContentsComponent DivHelpContentsComponent

View File

@ -0,0 +1,13 @@
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import {EditDivHelpContentComponent} from "./edit-div-help-content.component";
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', component: EditDivHelpContentComponent}
])
]
})
export class EditDivHelpContentRoutingModule { }

View File

@ -54,7 +54,7 @@ export class EditDivHelpContentComponent implements OnInit, OnDestroy{
this.pageId = params['pageId']; this.pageId = params['pageId'];
if(!divContentId) { if(!divContentId) {
this.router.navigate(['/classContents'], { queryParams: { "communityId": this.communityPid} }); this.router.navigate(['../../'], { queryParams: { "communityId": this.communityPid} });
} }
this.getDivHelpContent(divContentId); this.getDivHelpContent(divContentId);
@ -81,7 +81,7 @@ export class EditDivHelpContentComponent implements OnInit, OnDestroy{
this._helpContentService.getPageByPortal(pageId,this.properties.adminToolsAPIURL, this.communityPid).subscribe( this._helpContentService.getPageByPortal(pageId,this.properties.adminToolsAPIURL, this.communityPid).subscribe(
page => { page => {
if(this.properties.adminToolsPortalType != page.portalType) { if(this.properties.adminToolsPortalType != page.portalType) {
this.router.navigate(['/classContents'], { queryParams: { "communityId": this.communityPid} }); this.router.navigate(['../../'], { queryParams: { "communityId": this.communityPid} });
} else { } else {
this.page = page; this.page = page;
this.showLoading = false; this.showLoading = false;
@ -153,9 +153,9 @@ export class EditDivHelpContentComponent implements OnInit, OnDestroy{
this._helpContentService.insertOrUpdateDivHelpContent(divHelpContent, this.properties.adminToolsAPIURL, this.communityPid).subscribe( this._helpContentService.insertOrUpdateDivHelpContent(divHelpContent, this.properties.adminToolsAPIURL, this.communityPid).subscribe(
_ => { _ => {
if(this.pageId) { if(this.pageId) {
this.router.navigate( ['/classContents/'], { queryParams: { "communityId": this.communityPid, "pageId": this.pageId } } ); this.router.navigate( ['../../'], { queryParams: { "communityId": this.communityPid, "pageId": this.pageId } } );
} else { } else {
this.router.navigate(['/classContents'], { queryParams: { "communityId": this.communityPid } } ); this.router.navigate(['../../'], { queryParams: { "communityId": this.communityPid } } );
} }
this.showLoading = false; this.showLoading = false;
}, },
@ -172,9 +172,9 @@ export class EditDivHelpContentComponent implements OnInit, OnDestroy{
this.updateErrorMessage = ""; this.updateErrorMessage = "";
if(this.pageId) { if(this.pageId) {
this.router.navigate( ['/classContents/'], { queryParams: { "communityId": this.communityPid, "pageId": this.pageId } } ); this.router.navigate( ['../../'], { queryParams: { "communityId": this.communityPid, "pageId": this.pageId } } );
} else { } else {
this.router.navigate(['/classContents'], { queryParams: { "communityId": this.communityPid } } ); this.router.navigate(['../../'], { queryParams: { "communityId": this.communityPid } } );
} }
} }
} }

View File

@ -4,11 +4,12 @@ import {CommonModule} from '@angular/common';
import {EditDivHelpContentComponent} from './edit-div-help-content.component'; import {EditDivHelpContentComponent} from './edit-div-help-content.component';
import {DivHelpContentFormModule} from './div-help-content-form.module'; import {DivHelpContentFormModule} from './div-help-content-form.module';
import {AdminToolServiceModule} from "../../services/adminToolService.module"; import {AdminToolServiceModule} from "../../services/adminToolService.module";
import {EditDivHelpContentRoutingModule} from "./edit-div-help-content-routing.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, RouterModule, CommonModule, RouterModule,
DivHelpContentFormModule, AdminToolServiceModule DivHelpContentFormModule, AdminToolServiceModule, EditDivHelpContentRoutingModule
], ],
declarations: [ declarations: [
EditDivHelpContentComponent EditDivHelpContentComponent

View File

@ -0,0 +1,12 @@
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import {NewDivHelpContentComponent} from "./new-div-help-content.component";
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', component: NewDivHelpContentComponent}
])
]
})
export class NewDivHelpContentRoutingModule { }

View File

@ -63,7 +63,7 @@ export class NewDivHelpContentComponent {
this._helpContentService.getPageByPortal(pageId,this.properties.adminToolsAPIURL, this.communityPid).subscribe( this._helpContentService.getPageByPortal(pageId,this.properties.adminToolsAPIURL, this.communityPid).subscribe(
page => { page => {
if(this.properties.adminToolsPortalType != page.portalType) { if(this.properties.adminToolsPortalType != page.portalType) {
this.router.navigate(['/classContents'], { queryParams: { "communityId": this.communityPid} }); this.router.navigate(['../../'], { queryParams: { "communityId": this.communityPid}, relativeTo: this.route });
} else { } else {
this.page = page; this.page = page;
this.showLoading = false; this.showLoading = false;
@ -87,9 +87,9 @@ export class NewDivHelpContentComponent {
this._helpContentService.insertOrUpdateDivHelpContent(divHelpContent, this.properties.adminToolsAPIURL, this.communityPid).subscribe( this._helpContentService.insertOrUpdateDivHelpContent(divHelpContent, this.properties.adminToolsAPIURL, this.communityPid).subscribe(
_ => { _ => {
if(this.pageId) { if(this.pageId) {
this.router.navigate( ['/classContents/'], { queryParams: { "communityId": this.communityPid, "pageId": this.pageId } } ); this.router.navigate( ['../../'], { queryParams: { "communityId": this.communityPid, "pageId": this.pageId } , relativeTo: this.route} );
} else { } else {
this.router.navigate(['/classContents'], { queryParams: { "communityId": this.communityPid } } ); this.router.navigate(['../../'], { queryParams: { "communityId": this.communityPid } , relativeTo: this.route} );
} }
this.showLoading = false; this.showLoading = false;
}, },
@ -103,9 +103,9 @@ export class NewDivHelpContentComponent {
public cancelCustom() { public cancelCustom() {
if(this.pageId) { if(this.pageId) {
this.router.navigate( ['/classContents/'], { queryParams: { "communityId": this.communityPid, "pageId": this.pageId } } ); this.router.navigate( ['../../'], { queryParams: { "communityId": this.communityPid, "pageId": this.pageId }, relativeTo: this.route } );
} else { } else {
this.router.navigate(['/classContents'], { queryParams: { "communityId": this.communityPid } } ); this.router.navigate(['../../'], { queryParams: { "communityId": this.communityPid }, relativeTo: this.route } );
} }
} }

View File

@ -4,11 +4,12 @@ import {CommonModule} from '@angular/common';
import {NewDivHelpContentComponent} from './new-div-help-content.component'; import {NewDivHelpContentComponent} from './new-div-help-content.component';
import {DivHelpContentFormModule} from './div-help-content-form.module'; import {DivHelpContentFormModule} from './div-help-content-form.module';
import {AdminToolServiceModule} from "../../services/adminToolService.module"; import {AdminToolServiceModule} from "../../services/adminToolService.module";
import {NewDivHelpContentRoutingModule} from "./new-div-help-content-routing.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, RouterModule, CommonModule, RouterModule,
DivHelpContentFormModule, AdminToolServiceModule DivHelpContentFormModule, AdminToolServiceModule, NewDivHelpContentRoutingModule
], ],
declarations: [ declarations: [
NewDivHelpContentComponent NewDivHelpContentComponent

View File

@ -0,0 +1,12 @@
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import {EntitiesComponent} from "./entities.component";
@NgModule({
imports: [
RouterModule.forChild([
{ path: '',component: EntitiesComponent}
])
]
})
export class EntitiesRoutingModule { }

View File

@ -1,50 +1,45 @@
<div id="page_content" click-outside-or-esc targetId="page_content"> <div page-content>
<!-- [escClose]="false"--> <admin-tabs tab = "entity" [portal]="selectedCommunityPid" header></admin-tabs>
<!-- (clickOutside)="toggleOpen($event)">--> <div inner class="admin-pages">
<div class="uk-padding-small md-bg-white" uk-grid> <div *ngIf="!errorMessage && !showLoading" class="filters" uk-sticky="offset:150">
<div class="show-options uk-float-right">
<div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right"> <button class="uk-button uk-button-primary " type="button">Bulk Actions</button>
<div class="uk-inline uk-width-medium"> <div uk-dropdown="mode: click">
<span class="uk-position-center-right"><i class="material-icons">search</i></span> <ul class="uk-nav uk-margin-left"
<div dashboard-input label="Locate indicator" [formInput]="filterForm" label="Locate entity"></div> [attr.uk-tooltip]="getSelectedEntities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
</div> title="Select at least one entity">
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
</div> (click)="toggleEntities(true, getSelectedEntities())"><i></i> Activate
</div> </a></li>
<div id="page_content_inner"> <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
<div class="menubar "> (click)="toggleEntities(false, getSelectedEntities())"><i></i> Deactivate
<div *ngIf="!errorMessage && !showLoading" class="page-controls"> </a></li>
<div class=" filters "> <li *ngIf="isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
<div class="show-options uk-float-right"> (click)="confirmDeleteSelectedEntities()"><i></i> Delete </a></li>
<button class="uk-button uk-button-primary" type="button">Bulk Actions</button> </ul>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-margin-left"
[attr.uk-tooltip]="getSelectedEntities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one entity">
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="toggleEntities(true, getSelectedEntities())"><i></i> Activate
</a></li>
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="toggleEntities(false, getSelectedEntities())"><i></i> Deactivate
</a></li>
<li *ngIf="isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedEntities()"><i></i> Delete </a></li>
</ul>
</div>
</div>
</div> </div>
</div> </div>
<h4 class="uk-text-bold">Entities</h4> <div class="uk-float-right uk-margin-right uk-width-medium">
<div dashboard-input [formInput]="filterForm.controls.keyword" placeholder="search entity"></div>
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
<a class="uk-alert-close" uk-close></a>
{{updateErrorMessage}}
</div> </div>
<ul *ngIf="!isPortalAdministrator" class="uk-subnav uk-subnav-pill subCategoriesTabs ignore admin " >
<li [class.uk-active]="filterForm.get('status').value === 'all'"><a
(click)="filterForm.get('status').setValue('all')"><span
class="title">All entities</span></a></li>
<li [class.uk-active]="filterForm.get('status').value === 'enabled'"><a (click)="filterForm.get('status').setValue('enabled')"><span class="title">Enabled</span></a></li>
<li [class.uk-active]="filterForm.get('status').value === 'disabled'"><a (click)="filterForm.get('status').setValue('disabled')"><span class="title">Disabled</span></a></li>
</ul>
</div> </div>
<div class="content-wrapper" id="contentWrapper"> <div class="content-wrapper" id="contentWrapper">
<div> <a *ngIf="!showLoading && isPortalAdministrator && !errorMessage" (click)="newEntity()"
<div class="contentPanel uk-margin-top"> class="uk-flex uk-flex-right uk-flex-middle uk-margin-small-bottom">
<div class="uk-button-default large uk-icon-button uk-margin-small-right" uk-icon="plus">
</div>
Add entity
</a>
<div class="contentPanel ">
<div *ngIf="!isPortalAdministrator" class="uk-alert uk-alert-primary uk-margin-top-large"> <div *ngIf="!isPortalAdministrator" class="uk-alert uk-alert-primary uk-margin-top-large">
<div> <div>
<span class="uk-margin-small-right uk-icon" uk-icon="warning"></span> <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
@ -55,6 +50,10 @@
</div> </div>
</div> </div>
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
<a class="uk-alert-close" uk-close></a>
{{updateErrorMessage}}
</div>
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top" <div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top"
role="alert">{{errorMessage}}</div> role="alert">{{errorMessage}}</div>
<div [style.display]="showLoading ? 'inline' : 'none'" <div [style.display]="showLoading ? 'inline' : 'none'"
@ -65,12 +64,15 @@
<div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading"> <div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading">
<div class="md-card-content"> <div class="md-card-content">
<div class="uk-overflow-container"> <div class="uk-overflow-container">
<table class="uk-table uk-table-striped uk-table-hover"> <table class="uk-table uk-table-striped uk-table-hover uk-table-large">
<thead> <thead class="form-header">
<tr> <tr>
<th><input id="allEntityCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th> <th
class="uk-width-small"><input id="allEntityCheckbox" type="checkbox"
(change)="toggleCheckBoxes($event)"></th>
<th>Name</th> <th>Name</th>
<th *ngIf="!isPortalAdministrator">Change status</th> <th *ngIf="!isPortalAdministrator">Status</th>
<th *ngIf="!isPortalAdministrator">Enable/Disable</th>
<th *ngIf="isPortalAdministrator">Actions</th> <th *ngIf="isPortalAdministrator">Actions</th>
</tr> </tr>
</thead> </thead>
@ -82,6 +84,9 @@
<td> <td>
<div class="name" href="#">{{check.entity.name}}</div> <div class="name" href="#">{{check.entity.name}}</div>
</td> </td>
<td *ngIf="!isPortalAdministrator">
<div class="name" href="#">{{check.entity.isEnabled?"Enabled":"Disabled"}}</div>
</td>
<td *ngIf="!isPortalAdministrator"> <td *ngIf="!isPortalAdministrator">
<mat-slide-toggle [checked]="check.entity.isEnabled" <mat-slide-toggle [checked]="check.entity.isEnabled"
(change)="($event.source.checked = check.entity.isEnabled);toggleEntities(!check.entity.isEnabled,[check.entity._id])"></mat-slide-toggle> (change)="($event.source.checked = check.entity.isEnabled);toggleEntities(!check.entity.isEnabled,[check.entity._id])"></mat-slide-toggle>
@ -110,12 +115,10 @@
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
</div> </div>
<modal-alert #AlertModalSaveEntity (alertOutput)="entitySaveConfirmed($event)" <modal-alert #AlertModalSaveEntity (alertOutput)="entitySaveConfirmed($event)"
[okDisabled]="myForm && (myForm.invalid || !myForm.dirty)"> [okDisabled]="myForm && (myForm.invalid || !myForm.dirty)">
<div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div> <div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>

View File

@ -10,6 +10,7 @@ import {LoginErrorCodes} from '../../login/utils/guardHelper.class';
import {HelperFunctions} from "../../utils/HelperFunctions.class"; import {HelperFunctions} from "../../utils/HelperFunctions.class";
import {UserManagementService} from '../../services/user-management.service'; import {UserManagementService} from '../../services/user-management.service';
import {Subscriber} from "rxjs"; import {Subscriber} from "rxjs";
import {properties} from "../../../../environments/environment";
@Component({ @Component({
selector: 'entities', selector: 'entities',
@ -45,7 +46,7 @@ export class EntitiesComponent implements OnInit {
public updateErrorMessage = ''; public updateErrorMessage = '';
public modalErrorMessage = ''; public modalErrorMessage = '';
public isPortalAdministrator = null; public isPortalAdministrator = null;
public filterForm: FormControl; public filterForm: FormGroup;
private subscriptions: any[] = []; private subscriptions: any[] = [];
constructor(private element: ElementRef, private route: ActivatedRoute, constructor(private element: ElementRef, private route: ActivatedRoute,
@ -55,29 +56,33 @@ export class EntitiesComponent implements OnInit {
} }
ngOnInit() { ngOnInit() {
this.filterForm = this._fb.control(''); this.filterForm = this._fb.group({
keyword: [''],
status: ['all', Validators.required]});
this.myForm = this._fb.group({ this.myForm = this._fb.group({
pid: ['', Validators.required], pid: ['', Validators.required],
name: ['', Validators.required], name: ['', Validators.required],
isEnabled: '', isEnabled: '',
_id: '' _id: ''
}); });
this.subscriptions.push(this.filterForm.valueChanges.subscribe(value => { this.subscriptions.push(this.filterForm.get('keyword').valueChanges.subscribe(value => {
this.filterBySearch(value); this.filterBySearch(value);
})); }));
this.route.data this.subscriptions.push(this.filterForm.get('status').valueChanges.subscribe(value => {
.subscribe((data: { envSpecific: EnvProperties }) => { this.applyStatusFilter();
this.properties = data.envSpecific; }));
this.route.queryParams.subscribe(params => { this.properties = properties;
HelperFunctions.scroll(); this.subscriptions.push(this.route.queryParams.subscribe(params => {
this.userManagementService.getUserInfo().subscribe(user => { HelperFunctions.scroll();
this.selectedCommunityPid = params['communityId']; this.userManagementService.getUserInfo().subscribe(user => {
this.applyCommunityFilter(this.selectedCommunityPid); this.selectedCommunityPid = params['communityId'];
this.isPortalAdministrator = Session.isPortalAdministrator(user) && !this.selectedCommunityPid; this.applyCommunityFilter(this.selectedCommunityPid);
}); this.isPortalAdministrator = Session.isPortalAdministrator(user) && !this.selectedCommunityPid;
}); });
}); }));
} }
ngOnDestroy(): void { ngOnDestroy(): void {
@ -123,7 +128,7 @@ export class EntitiesComponent implements OnInit {
}); });
this.showLoading = false; this.showLoading = false;
}, },
error => this.handleError('System error retrieving community entities', error)); error => this.handleError('System error retrieving entities', error));
} }
} }
} }
@ -281,6 +286,18 @@ export class EntitiesComponent implements OnInit {
return textFlag; return textFlag;
} }
public applyStatusFilter() {
this.checkboxes = [];
this.entities.filter(item => this.filterEntitiesByStatus(item)).forEach(
_ => this.checkboxes.push(<CheckEntity>{entity: _, checked: false})
);
}
public filterEntitiesByStatus(entity: Entity): boolean {
let status = this.filterForm.get("status").value;
return status == "all" || (status == "disabled" && !entity.isEnabled) || (status == "enabled" && entity.isEnabled);
}
handleError(message: string, error) { handleError(message: string, error) {
this.errorMessage = message; this.errorMessage = message;
console.log('Server responded: ' + error); console.log('Server responded: ' + error);

View File

@ -7,11 +7,14 @@ import {AlertModalModule} from '../../utils/modal/alertModal.module';
import {MatSlideToggleModule} from '@angular/material'; import {MatSlideToggleModule} from '@angular/material';
import {AdminToolServiceModule} from "../../services/adminToolService.module"; import {AdminToolServiceModule} from "../../services/adminToolService.module";
import {InputModule} from "../../sharedComponents/input/input.module"; import {InputModule} from "../../sharedComponents/input/input.module";
import {PageContentModule} from "../sharedComponents/page-content/page-content.module";
import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module";
import {EntitiesRoutingModule} from "./entities-routing.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, RouterModule, FormsModule, AdminToolServiceModule, CommonModule, RouterModule, FormsModule, AdminToolServiceModule,
AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, InputModule AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, InputModule, PageContentModule, AdminTabsModule, EntitiesRoutingModule
], ],
declarations: [EntitiesComponent], declarations: [EntitiesComponent],
exports: [EntitiesComponent] exports: [EntitiesComponent]

View File

@ -0,0 +1,13 @@
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {EditPageHelpContentComponent} from "./edit-page-help-content.component";
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', component: EditPageHelpContentComponent}
])
]
})
export class EditPageHelpContentRoutingModule { }

View File

@ -6,11 +6,12 @@ import {ConnectAdminLoginGuard} from '../../connect/communityGuard/connectAdminL
import {EditPageHelpContentComponent} from './edit-page-help-content.component'; import {EditPageHelpContentComponent} from './edit-page-help-content.component';
import {PageHelpContentFormModule} from './page-help-content-form.module'; import {PageHelpContentFormModule} from './page-help-content-form.module';
import {AdminToolServiceModule} from "../../services/adminToolService.module"; import {AdminToolServiceModule} from "../../services/adminToolService.module";
import {EditPageHelpContentRoutingModule} from "./edit-page-help-content-routing.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, RouterModule, CommonModule, RouterModule,
PageHelpContentFormModule, AdminToolServiceModule PageHelpContentFormModule, AdminToolServiceModule, EditPageHelpContentRoutingModule
], ],
declarations: [ declarations: [
EditPageHelpContentComponent EditPageHelpContentComponent

View File

@ -0,0 +1,13 @@
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {NewPageHelpContentComponent} from "./new-page-help-content.component";
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', component: NewPageHelpContentComponent}
])
]
})
export class NewPageHelpContentRoutingModule { }

View File

@ -6,11 +6,12 @@ import {ConnectAdminLoginGuard} from '../../connect/communityGuard/connectAdminL
import {NewPageHelpContentComponent} from './new-page-help-content.component'; import {NewPageHelpContentComponent} from './new-page-help-content.component';
import {PageHelpContentFormModule} from './page-help-content-form.module'; import {PageHelpContentFormModule} from './page-help-content-form.module';
import {AdminToolServiceModule} from "../../services/adminToolService.module"; import {AdminToolServiceModule} from "../../services/adminToolService.module";
import {NewPageHelpContentRoutingModule} from "./new-page-help-content-routing.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, RouterModule, CommonModule, RouterModule,
PageHelpContentFormModule, AdminToolServiceModule PageHelpContentFormModule, AdminToolServiceModule, NewPageHelpContentRoutingModule
], ],
declarations: [ declarations: [
NewPageHelpContentComponent NewPageHelpContentComponent

View File

@ -0,0 +1,12 @@
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import {PageHelpContentsComponent} from "./page-help-contents.component";
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', component: PageHelpContentsComponent}
])
]
})
export class PageHelpContentsRoutingModule { }

View File

@ -10,11 +10,12 @@ import {SafeHtmlPipeModule} from '../../utils/pipes/safeHTMLPipe.module';
import {MatSlideToggleModule} from '@angular/material'; import {MatSlideToggleModule} from '@angular/material';
import {AdminToolServiceModule} from "../../services/adminToolService.module"; import {AdminToolServiceModule} from "../../services/adminToolService.module";
import {InputModule} from "../../sharedComponents/input/input.module"; import {InputModule} from "../../sharedComponents/input/input.module";
import {PageHelpContentsRoutingModule} from "./page-help-contents-routing.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, RouterModule, FormsModule, SafeHtmlPipeModule, CommonModule, RouterModule, FormsModule, SafeHtmlPipeModule,
AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, AdminToolServiceModule, InputModule AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, AdminToolServiceModule, InputModule, PageHelpContentsRoutingModule
], ],
declarations: [ declarations: [
PageHelpContentsComponent PageHelpContentsComponent

View File

@ -0,0 +1,13 @@
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import {PagesComponent} from "./pages.component";
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', component: PagesComponent}
])
]
})
export class PagesRoutingModule { }

View File

@ -1,145 +1,127 @@
<div id="page_content" click-outside-or-esc targetId="page_content"> <div page-content>
<div class="uk-padding-small md-bg-white" uk-grid> <admin-tabs tab = "page" [portal]="selectedCommunityPid" header></admin-tabs>
<div inner class="admin-pages">
<div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right"> <div *ngIf="!errorMessage && !showLoading" class="filters" uk-sticky="offset:150">
<div class="uk-inline uk-width-medium"> <div class="show-options uk-float-right">
<span class="uk-position-center-right"><i class="material-icons">search</i></span> <button class="uk-button uk-button-primary " type="button">Bulk Actions</button>
<div dashboard-input [formInput]="filterForm" label="Find page"></div> <div uk-dropdown="mode: click">
</div> <ul class="uk-nav uk-margin-left"
[attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
</div> title="Select at least one page">
</div> <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
(click)="togglePages(true, getSelectedPages())"> Activate
<div id="page_content_inner"> </a></li>
<div *ngIf="!errorMessage && !showLoading" class="page-controls"> <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
<div class=" filters "> (click)="togglePages(false, getSelectedPages())"> Deactivate
<div class="show-options uk-float-right"> </a></li>
<button class="uk-button uk-button-primary" type="button">Bulk Actions</button> <li *ngIf="isPortalAdministrator"><a (click)="confirmDeleteSelectedPages()"> Delete </a></li>
<div uk-dropdown="mode: click"> </ul>
<ul class="uk-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())"> Activate
</a></li>
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
(click)="togglePages(false, getSelectedPages())"> Deactivate
</a></li>
<li *ngIf="isPortalAdministrator"><a (click)="confirmDeleteSelectedPages()"> Delete </a></li>
</ul>
</div>
</div> </div>
</div> </div>
</div> <div class="uk-inline uk-width-medium uk-float-right uk-margin-right">
<h4 class="uk-text-bold uk-text-upper">{{pagesType}} Pages</h4> <div dashboard-input [formInput]="filterForm.controls.keyword" placeholder="search page" ></div>
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert> </div>
<a class="uk-alert-close" uk-close></a> <ul class="uk-subnav uk-subnav-pill subCategoriesTabs ignore admin " >
{{updateErrorMessage}} <li [class.uk-active]="filterForm.get('type').value === 'all'"><a
(click)="filterForm.get('type').setValue('all')"><span
class="title">All pages</span></a></li>
<li *ngFor="let type of typeOptions; let i=index"
[class.uk-active]="filterForm.get('type').value === type.value"><a
(click)="filterForm.get('type').setValue(type.value)"><span
class="title">{{type.label}}</span></a></li>
</ul>
<!-- <input class="uk-width-1-1 "-->
<!-- placeholder="SEARCH FOR A COUNTRY" type="text" autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true">-->
</div> </div>
<div class="content-wrapper" id="contentWrapper"> <div class="content-wrapper uk-margin-top" id="contentWrapper">
<div> <a *ngIf="!showLoading && isPortalAdministrator && !errorMessage" (click)="newPage()"
<div class="contentPanel uk-margin-top"> class="uk-flex uk-flex-right uk-flex-middle uk-margin-small-bottom uk-width-1-1">
<div class="uk-button-default large uk-icon-button uk-margin-small-right" uk-icon="plus">
</div>
<div *ngIf="!isPortalAdministrator" class="uk-alert uk-alert-primary uk-margin-top-large"> Add page
<div> </a>
<span class="uk-margin-small-right uk-icon" uk-icon="warning"></span> <div class="contentPanel ">
Disable a page to hide it from community dashboard portal. <div *ngIf="!isPortalAdministrator" class="uk-alert uk-alert-primary uk-margin-top-large">
</div> <div>
<div <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
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. Disable a page to hide it from community dashboard portal.
</div> </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="!selectedCommunityPid">Portal Type</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="!selectedCommunityPid">
<div class="portalType" href="#">{{check.page.portalType}}</div>
</td>
<td *ngIf="isPortalAdministrator"> </div>
<div class="actions" href="#"> <div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
<i class="clickable " (click)="editPage(i)" uk-icon="pencil"></i> <a class="uk-alert-close" uk-close></a>
<i class="clickable uk-text-danger" {{updateErrorMessage}}
(click)="confirmDeletePage(check.page._id)" uk-icon="trash"></i> </div>
</div> <div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top"
</td> role="alert">{{errorMessage}}</div>
<td *ngIf="!isPortalAdministrator" class="uk-text-center"> <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">
<ul class="uk-list pages">
<li *ngFor="let check of checkboxes; let i=index" class="uk-card uk-card-default uk-margin-bottom">
<div class="uk-grid uk-padding">
<div class=""><input id="{{check.page._id}}" class="checkBox" type="checkbox"
name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked">
</div>
<div class="uk-width-expand">
<div class="title uk-margin-medium-bottom">Name</div>
<div class="name uk-margin-medium-bottom" href="#">{{check.page.name}}</div>
<div *ngIf="check.page.entities && check.page.entities.length > 0"><span
class="title">Entities: </span>
{{check.page.entities.join(", ")}}</div>
<div class=" uk-margin-small-bottom"><span class="title">Route: </span> {{check.page.route}}</div>
<div *ngIf="!pagesType" class=" uk-margin-small-bottom"><span class="title">Type: </span> {{check.page.type}}</div>
<div *ngIf="!selectedCommunityPid" class=" uk-margin-small-bottom">
<span class="title" >Portal type: </span>{{check.page.portalType}}
</div>
</div>
<div *ngIf="isPortalAdministrator" class="uk-width-1-4">
<div class="title uk-margin-medium-bottom">Actions</div>
<div class="actions" href="#">
<i class="clickable " (click)="editPage(i)" uk-icon="pencil"></i>
<i class="clickable uk-text-danger"
(click)="confirmDeletePage(check.page._id)" uk-icon="trash"></i>
</div>
</div>
<div *ngIf="!isPortalAdministrator" class="uk-width-1-4">
<div class="title uk-margin-medium-bottom">Helptexts</div>
<div class=" uk-margin-small-bottom">
<a *ngIf="check.page.top || check.page.bottom || check.page.left || check.page.right" <a *ngIf="check.page.top || check.page.bottom || check.page.left || check.page.right"
class="helpContents" class="helpContents"
[queryParams]="{communityId: selectedCommunityPid, pageId: check.page._id}" [queryParams]="{communityId: selectedCommunityPid, pageId: check.page._id}"
routerLink="../../helptexts"> routerLink="../../helptexts">
add help texts manage help texts
</a> </a>
<span </div>
*ngIf="!check.page.top && !check.page.bottom && !check.page.left && !check.page.right">-</span> <div>
</td>
<td *ngIf="!isPortalAdministrator && (pageWithDivIds && pageWithDivIds.length > 0)"
class="uk-text-center">
<a *ngIf="pageWithDivIds.includes(check.page._id)" class="classHelpContents" <a *ngIf="pageWithDivIds.includes(check.page._id)" class="classHelpContents"
[queryParams]="{communityId: selectedCommunityPid, pageId: check.page._id}" [queryParams]="{communityId: selectedCommunityPid, pageId: check.page._id}"
routerLink="../../classContents">add class contents</a> routerLink="../../classContents">manage class contents</a>
<span *ngIf="!pageWithDivIds.includes(check.page._id)">-</span> </div>
</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 *ngIf="isPortalAdministrator" class="uk-width-1-1 uk-flex uk-flex-center ">
<div class="uk-width-small uk-button uk-button-default" (click)="newPage()">
<i class="" uk-icon="plus"></i>
</div> </div>
<div *ngIf="!isPortalAdministrator" class="uk-width-1-4">
<div class="title uk-margin-medium-bottom">Enable/disable</div>
<mat-slide-toggle [checked]="check.page.isEnabled"
(change)="($event.source.checked = check.page.isEnabled);togglePages(!check.page.isEnabled,[check.page._id])"></mat-slide-toggle>
</div>
</div>
</li>
</ul>
<div *ngIf="checkboxes.length==0" class="col-md-12">
<div class="uk-alert-warning" uk-alert>No pages found</div>
</div>
<div *ngIf="isPortalAdministrator" class="uk-width-1-1 uk-flex uk-flex-center ">
<div class="uk-width-small uk-button uk-button-default" (click)="newPage()">
<i class="" uk-icon="plus"></i>
</div> </div>
</div> </div>
</div> </div>
@ -150,7 +132,6 @@
</div> </div>
</div> </div>
<modal-alert #AlertModalSavePage (alertOutput)="pageSaveConfirmed($event)" [okDisabled]="myForm && (myForm.invalid || !myForm.dirty)"> <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> <div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>
<form [formGroup]="myForm"> <form [formGroup]="myForm">
@ -177,7 +158,7 @@
[removable]="true"> [removable]="true">
{{entity.name}} {{entity.name}}
<span (click)="remove(entity)" <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> class=" notranslate mat-chip-remove mat-chip-trailing-icon " uk-icon="trash"></span>
</mat-chip> </mat-chip>
<input placeholder="Add in pages..." #PageInput <input placeholder="Add in pages..." #PageInput
[formControl]="entitiesSearchCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList"> [formControl]="entitiesSearchCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList">
@ -188,61 +169,12 @@
</mat-option> </mat-option>
</mat-autocomplete> </mat-autocomplete>
</mat-form-field> </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" > <div class="form-group" >
<label class="uk-text-danger uk-margin-small-bottom"> <label class="uk-text-danger uk-margin-small-bottom">
By disabling a position, all contents in this position will be deleted. By disabling a position, all contents in this position will be deleted.
</label> </label>
<div class="uk-text-muted"> Select if this page exists in:</div> <div class="title"> Select if this page exists in:</div>
<div class=" uk-grid"> <div class=" uk-grid">
<span dashboard-input class="" [formInput]="myForm.get('top')" <span dashboard-input class="" [formInput]="myForm.get('top')"
type="checkbox" type="checkbox"
@ -262,25 +194,8 @@
</span> </span>
</div> </div>
</div> </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>-->
<div [ngClass]="{'has-error':!myForm.controls.portalType.valid && myForm.controls.portalType.dirty}" class="form-group" > <div [ngClass]="{'has-error':!myForm.controls.portalType.valid && myForm.controls.portalType.dirty}" class="form-group" >
<div class="uk-width-1-1 uk-margin-small-bottom"> <div class="uk-width-1-1 uk-margin-small-bottom uk-text-bold uk-form-label">
Page exists in: Page exists in:
</div> </div>
<div class="uk-child-width-1-2 uk-grid"> <div class="uk-child-width-1-2 uk-grid">
@ -296,9 +211,4 @@
</modal-alert> </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> <modal-alert #AlertModalDeletePages (alertOutput)="confirmedDeletePages($event)"></modal-alert>

View File

@ -4,7 +4,7 @@ import {HelpContentService} from '../../services/help-content.service';
import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms'; import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
import {CheckPage, Page} from '../../utils/entities/adminTool/page'; import {CheckPage, Page} from '../../utils/entities/adminTool/page';
import {Portal} from '../../utils/entities/adminTool/portal'; import {Portal} from '../../utils/entities/adminTool/portal';
import {Entity} from '../../utils/entities/adminTool/entity'; import {CheckEntity, Entity} from '../../utils/entities/adminTool/entity';
import {EnvProperties} from '../../utils/properties/env-properties'; import {EnvProperties} from '../../utils/properties/env-properties';
import {Session} from '../../login/utils/helper.class'; import {Session} from '../../login/utils/helper.class';
import {LoginErrorCodes} from '../../login/utils/guardHelper.class'; import {LoginErrorCodes} from '../../login/utils/guardHelper.class';
@ -51,14 +51,14 @@ export class PagesComponent implements OnInit {
public updateErrorMessage: string = ''; public updateErrorMessage: string = '';
public modalErrorMessage: string = ''; public modalErrorMessage: string = '';
public isPortalAdministrator = null; public isPortalAdministrator = null;
public filterForm: FormControl; public filterForm: FormGroup;
public typeOptions = [{label: 'Search', value: 'search'}, {label: 'Link', value: 'link'}, { public typeOptions = [{label: 'Search', value: 'search'}, {
label: 'Share', label: 'Share',
value: 'share' value: 'share'
}, {label: 'Landing', value: 'landing'}, {label: 'HTML', value: 'html'}, { }, {label: 'Landing', value: 'landing'}, {label: 'HTML', value: 'html'}, {
label: 'Link', label: 'Link',
value: 'link' value: 'link'
}, {label: 'Other', value: 'other'}] }, {label: 'Other', value: 'other'}];
public entitiesCtrl: FormArray; public entitiesCtrl: FormArray;
@ViewChild('PageInput') pageInput: ElementRef<HTMLInputElement>; @ViewChild('PageInput') pageInput: ElementRef<HTMLInputElement>;
public entitiesSearchCtrl: FormControl; public entitiesSearchCtrl: FormControl;
@ -74,10 +74,15 @@ export class PagesComponent implements OnInit {
} }
ngOnInit() { ngOnInit() {
this.filterForm = this._fb.control(''); this.filterForm = this._fb.group({
this.subscriptions.push(this.filterForm.valueChanges.subscribe(value => { keyword: [''],
type: ['all', Validators.required]});
this.subscriptions.push(this.filterForm.get('keyword').valueChanges.subscribe(value => {
this.filterBySearch(value); this.filterBySearch(value);
})); }));
this.subscriptions.push(this.filterForm.get('type').valueChanges.subscribe(value => {
this.applyTypeFilter();
}));
this.entitiesSearchCtrl = this._fb.control(''); this.entitiesSearchCtrl = this._fb.control('');
this.myForm = this._fb.group({ this.myForm = this._fb.group({
route: ['', Validators.required], route: ['', Validators.required],
@ -99,12 +104,12 @@ export class PagesComponent implements OnInit {
this.pagesType = ''; this.pagesType = '';
if (params['type']) { if (params['type']) {
this.pagesType = params['type']; // this.pagesType = params['type'];
this.filterForm.get('type').setValue(params['type']);
} }
this.selectedCommunityPid = params['communityId'];
this.keyword = ''; this.keyword = '';
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => { this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
this.selectedCommunityPid = params['communityId'];
this.applyCommunityFilter(this.selectedCommunityPid); this.applyCommunityFilter(this.selectedCommunityPid);
this.isPortalAdministrator = Session.isPortalAdministrator(user) && !this.selectedCommunityPid; this.isPortalAdministrator = Session.isPortalAdministrator(user) && !this.selectedCommunityPid;
})); }));
@ -116,7 +121,7 @@ export class PagesComponent implements OnInit {
this.allEntities = entities; this.allEntities = entities;
this.showLoading = false; this.showLoading = false;
}, },
error => this.handleError('System error retrieving community entities', error))); error => this.handleError('System error retrieving pages', error)));
} }
@ -437,7 +442,17 @@ export class PagesComponent implements OnInit {
_ => this.checkboxes.push(<CheckPage>{page: _, checked: false}) _ => this.checkboxes.push(<CheckPage>{page: _, checked: false})
); );
} }
public applyTypeFilter() {
this.checkboxes = [];
this.pages.filter(item => this.filterByType(item)).forEach(
_ => this.checkboxes.push(<CheckPage>{page: _, checked: false})
);
}
public filterByType(page: Page): boolean {
let type = this.filterForm.get("type").value;
return type == "all" || (type == page.type);
}
public filterPages(page: Page): boolean { public filterPages(page: Page): boolean {
let textFlag = this.searchText.toString() == '' || (page.route + ' ' + page.name + ' ' + page.portalType).match(this.searchText) != null; let textFlag = this.searchText.toString() == '' || (page.route + ' ' + page.name + ' ' + page.portalType).match(this.searchText) != null;
return textFlag; return textFlag;

View File

@ -7,11 +7,14 @@ import {PagesComponent} from './pages.component';
import {MatAutocompleteModule, MatChipsModule, MatFormFieldModule, MatSlideToggleModule} from '@angular/material'; import {MatAutocompleteModule, MatChipsModule, MatFormFieldModule, MatSlideToggleModule} from '@angular/material';
import {AdminToolServiceModule} from "../../services/adminToolService.module"; import {AdminToolServiceModule} from "../../services/adminToolService.module";
import {InputModule} from "../../sharedComponents/input/input.module"; import {InputModule} from "../../sharedComponents/input/input.module";
import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module";
import {PageContentModule} from "../sharedComponents/page-content/page-content.module";
import {PagesRoutingModule} from "./pages-routing.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, RouterModule, FormsModule, AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, AdminToolServiceModule, InputModule, CommonModule, RouterModule, FormsModule, AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, AdminToolServiceModule, InputModule,
MatAutocompleteModule, MatFormFieldModule, MatChipsModule MatAutocompleteModule, MatFormFieldModule, MatChipsModule, AdminTabsModule, PageContentModule, PagesRoutingModule
], ],
declarations: [PagesComponent], declarations: [PagesComponent],
exports: [PagesComponent] exports: [PagesComponent]

View File

@ -0,0 +1,12 @@
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {PortalsComponent} from "./portals.component";
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', component: PortalsComponent}
])
]
})
export class PortalsRoutingModule { }

View File

@ -1,107 +1,104 @@
<div id="page_content" click-outside-or-esc targetId="page_content"> <div page-content>
<!-- [escClose]="false"--> <admin-tabs tab = "portal" header></admin-tabs>
<!-- (clickOutside)="toggleOpen($event)">--> <div inner class="admin-pages">
<div class="uk-padding-small md-bg-white" uk-grid> <div *ngIf="!errorMessage && !showLoading" class="filters" uk-sticky="offset:150">
<div class="show-options uk-float-right">
<div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right"> <button class="uk-button uk-button-primary " type="button">Bulk Actions</button>
<div class="uk-inline uk-width-medium"> <div uk-dropdown="mode: click">
<span class="uk-position-center-right"><i class="material-icons">search</i></span> <ul class="uk-nav uk-margin-left"
<div dashboard-input label="Locate indicator" [formInput]="formControl" label="Locate portal"></div> [attr.uk-tooltip]="getSelectedCommunities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one portal">
<li><a [class]="getSelectedCommunities().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedCommunities()"><i></i> Delete </a></li>
</ul>
</div>
</div> </div>
<div class="uk-inline uk-width-medium uk-float-right uk-margin-right" >
<span class="uk-position-center-right"><i class="material-icons">search</i></span>
<div dashboard-input [formInput]="filterForm.controls.keyword"
placeholder="Search"></div>
</div>
<ul class="uk-subnav uk-subnav-pill subCategoriesTabs ignore admin " >
<li [class.uk-active]="filterForm.get('type').value === 'all'" class="uk-margin-small-bottom"><a
(click)="filterForm.get('type').setValue('all')"><span
class="title">All portals</span></a></li>
<li *ngFor="let type of portalUtils.portalTypes; let i=index"
[class.uk-active]="filterForm.get('type').value === type.value" class="uk-margin-small-bottom"><a
(click)="filterForm.get('type').setValue(type.value)"><span
class="title">{{type.label}}</span></a></li>
</ul>
</div> </div>
</div>
<div id="page_content_inner">
<div class="menubar "> <div class="uk-margin-top">
<h4 class="uk-text-bold">Portals</h4> <a *ngIf="!showLoading && !errorMessage" (click)="newCommunity()"
class="uk-flex uk-flex-right uk-flex-middle uk-margin-small-bottom">
<div class="uk-button-default large uk-icon-button uk-margin-small-right" uk-icon="plus">
</div>
Add portal
</a>
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert> <div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
<a class="uk-alert-close" uk-close></a> <a class="uk-alert-close" uk-close></a>
{{updateErrorMessage}} {{updateErrorMessage}}
</div> </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="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" class="page-controls"> <div class=" uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading">
<div class=" filters ">
<div class="show-options uk-float-right"> <div class="">
<button class="uk-button" type="button">Bulk Actions</button> <div class="uk-overflow-container">
<div uk-dropdown="mode: click"> <table class="uk-table uk-table-striped uk-table-hover">
<ul class="uk-nav uk-margin-left" <thead class="form-header">
[attr.uk-tooltip]="getSelectedCommunities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'" <tr>
title="Select at least one portal"> <th><input id="allCommunityCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th>
<li><a [class]="getSelectedCommunities().length == 0 ? 'uk-disabled' : ''" <th>Name</th>
(click)="confirmDeleteSelectedCommunities()"><i></i> Delete </a></li> <th>Type</th>
</ul> <th>Actions</th>
</div> </tr>
</thead>
<tbody>
<tr *ngFor="let check of checkboxes; let i=index">
<td><input id="{{check.community._id}}" class="checkBox" type="checkbox"
name="communitiescb[]" value="{{check.community._id}}" [(ngModel)]="check.checked">
</td>
<td>
<div class="name" href="#">{{check.community.name}}</div>
</td>
<td>
<div class="type" href="#">{{check.community.type}}</div>
</td>
<td>
<div class="actions" href="#">
<i class="clickable" uk-icon="pencil" (click)="editCommunity(i)"></i>
<i class="clickable uk-text-danger" uk-icon="trash"
(click)="confirmDeleteCommunity(check.community._id)"></i>
</div>
</td>
</tr>
</tbody>
</table>
<div *ngIf="checkboxes.length==0" class="col-md-12">
<div class="uk-alert-warning" uk-alert>No portals found</div>
</div> </div>
<!--<div class="uk-width-1-1 uk-flex uk-flex-center ">
<div class="uk-width-small uk-button-default uk-button" (click)="newCommunity()">
<i class="" uk-icon="plus"></i>
</div>
</div>-->
</div> </div>
</div> </div>
<div 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 uk-table-hover">
<thead>
<tr>
<th><input id="allCommunityCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th>
<th>Name</th>
<th>Type</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let check of checkboxes; let i=index">
<td><input id="{{check.community._id}}" class="checkBox" type="checkbox"
name="communitiescb[]" value="{{check.community._id}}" [(ngModel)]="check.checked">
</td>
<td>
<div class="name" href="#">{{check.community.name}}</div>
</td>
<td>
<div class="type" href="#">{{check.community.type}}</div>
</td>
<td>
<div class="actions" href="#">
<i class="clickable" uk-icon="pencil" (click)="editCommunity(i)"></i>
<i class="clickable uk-text-danger" uk-icon="trash"
(click)="confirmDeleteCommunity(check.community._id)"></i>
</div>
</td>
</tr>
</tbody>
</table>
<div class="uk-width-1-1 uk-flex uk-flex-center ">
<div class="uk-width-small uk-button-default uk-button" (click)="newCommunity()">
<i class="" uk-icon="plus"></i>
</div>
</div>
<div *ngIf="checkboxes.length==0" class="col-md-12">
<div class="uk-alert-warning" uk-alert>No portals found</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<modal-alert #AlertModalSaveCommunity (alertOutput)="communitySaveConfirmed($event)" <modal-alert #AlertModalSaveCommunity (alertOutput)="communitySaveConfirmed($event)"
[okDisabled]="portalFG && (portalFG.invalid || !portalFG.dirty)"> [okDisabled]="portalFG && (portalFG.invalid || !portalFG.dirty)">
@ -129,7 +126,4 @@
</form> </form>
</modal-alert> </modal-alert>
<modal-alert #AlertModalDeleteCommunities (alertOutput)="confirmedDeleteCommunities($event)"></modal-alert> <modal-alert #AlertModalDeleteCommunities (alertOutput)="confirmedDeleteCommunities($event)"></modal-alert>
</div>

View File

@ -1,7 +1,7 @@
import {Component, ViewChild, OnInit, ElementRef} from '@angular/core'; import {Component, ViewChild, OnInit, ElementRef} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import {HelpContentService} from '../../services/help-content.service'; import {HelpContentService} from '../../services/help-content.service';
import {FormBuilder, FormControl, FormGroup} from '@angular/forms'; import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
import {EnvProperties} from '../../utils/properties/env-properties'; import {EnvProperties} from '../../utils/properties/env-properties';
import {Session} from '../../login/utils/helper.class'; import {Session} from '../../login/utils/helper.class';
@ -11,6 +11,7 @@ import {Subscriber} from "rxjs";
import {CheckPortal, Portal} from "../../utils/entities/adminTool/portal"; import {CheckPortal, Portal} from "../../utils/entities/adminTool/portal";
import {PortalUtils} from "./portalHelper"; import {PortalUtils} from "./portalHelper";
import {properties} from "../../../../environments/environment"; import {properties} from "../../../../environments/environment";
import {CheckPage, Page} from "../../utils/entities/adminTool/page";
@Component({ @Component({
selector: 'portals', selector: 'portals',
@ -27,7 +28,7 @@ export class PortalsComponent implements OnInit {
public communities: Portal[] = []; public communities: Portal[] = [];
public portalFG: FormGroup; public portalFG: FormGroup;
public formControl: FormControl; public filterForm: FormGroup;
private subscriptions: any[] = []; private subscriptions: any[] = [];
private searchText: RegExp = new RegExp(''); private searchText: RegExp = new RegExp('');
@ -48,10 +49,15 @@ export class PortalsComponent implements OnInit {
piwik:'', piwik:'',
type: '' type: ''
}); });
this.formControl = this._fb.control(''); this.filterForm = this._fb.group({
this.subscriptions.push(this.formControl.valueChanges.subscribe(value => { keyword: [''],
type: ['all', Validators.required]});
this.subscriptions.push(this.filterForm.get('keyword').valueChanges.subscribe(value => {
this.filterBySearch(value); this.filterBySearch(value);
})); }));
this.subscriptions.push(this.filterForm.get('type').valueChanges.subscribe(value => {
this.applyTypeFilter();
}));
HelperFunctions.scroll(); HelperFunctions.scroll();
this.properties = properties; this.properties = properties;
@ -95,7 +101,7 @@ export class PortalsComponent implements OnInit {
} }
this.showLoading = false; this.showLoading = false;
}, },
error => this.handleError('System error retrieving communities', error))); error => this.handleError('System error retrieving portals', error)));
} }
} }
@ -273,7 +279,17 @@ export class PortalsComponent implements OnInit {
_ => this.checkboxes.push(<CheckPortal>{community: _, checked: false}) _ => this.checkboxes.push(<CheckPortal>{community: _, checked: false})
); );
} }
public applyTypeFilter() {
this.checkboxes = [];
this.communities.filter(item => this.filterByType(item)).forEach(
_ => this.checkboxes.push(<CheckPortal>{community: _, checked: false})
);
}
public filterByType(community: Portal): boolean {
let type = this.filterForm.get("type").value;
return type == "all" || (type == community.type);
}
public filterCommunities(community: Portal): boolean { public filterCommunities(community: Portal): boolean {
const textFlag = this.searchText.toString() === '' || (community.name || community.type).match(this.searchText) != null; const textFlag = this.searchText.toString() === '' || (community.name || community.type).match(this.searchText) != null;
return textFlag; return textFlag;

View File

@ -6,14 +6,17 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {AlertModalModule} from '../../utils/modal/alertModal.module'; import {AlertModalModule} from '../../utils/modal/alertModal.module';
import {AdminToolServiceModule} from "../../services/adminToolService.module"; import {AdminToolServiceModule} from "../../services/adminToolService.module";
import {InputModule} from "../../sharedComponents/input/input.module"; import {InputModule} from "../../sharedComponents/input/input.module";
import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module";
import {PageContentModule} from "../sharedComponents/page-content/page-content.module";
import {PortalsRoutingModule} from "./portals-routing.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, FormsModule, AlertModalModule, CommonModule, FormsModule, AlertModalModule,
ReactiveFormsModule, ReactiveFormsModule,
RouterModule, AdminToolServiceModule, InputModule RouterModule, AdminToolServiceModule, InputModule, AdminTabsModule, PageContentModule, PortalsRoutingModule
], ],
declarations: [PortalsComponent], declarations: [PortalsComponent],
exports: [PortalsComponent] exports: [PortalsComponent]
}) })
export class PortalModule { } export class PortalsModule { }

View File

@ -0,0 +1,61 @@
import {Component, Input, OnInit} from '@angular/core';
import {Session, User} from "../../../login/utils/helper.class";
import {UserManagementService} from "../../../services/user-management.service";
import {Subscriber} from "rxjs";
import {ActivatedRoute} from "@angular/router";
import {HelperFunctions} from "../../../utils/HelperFunctions.class";
@Component({
selector: 'admin-tabs',
template: `
<ul class="uk-tab customTabs admin uk-flex uk-flex-center uk-flex-left@m">
<li *ngIf="isPortalAdmin && (!portal )" class="uk-disabled" > <span class = "uk-margin-small-right" uk-icon="cog"></span></li>
<li *ngIf="isPortalAdmin && !portal" [class.uk-active]="tab === 'portal'"><a routerLink="../../portals"><span class="title">Portals</span></a></li>
<li [class.uk-active]="tab === 'page'"><a routerLink="../../pages" [queryParams]="(portal? {communityId:portal}:{})" ><span class="title">Pages</span></a></li>
<li [class.uk-active]="tab === 'entity'"><a routerLink="../../entities" [queryParams]="(portal? {communityId:portal}:{})"><span class="title">Entities</span></a></li>
<li *ngIf="isPortalAdmin && !portal" [class.uk-active]="tab === 'class'"><a routerLink="../../classes"><span class="title">Class Ids</span></a></li>
</ul>
`
})
export class AdminTabsComponent implements OnInit {
@Input()
public type: string;
@Input()
portal = null;
@Input()
public user: User;
@Input()
public tab: "portal"| "page" | "entity" | "class" = 'page';
private subscriptions: any[] = [];
constructor(private route: ActivatedRoute, private userManagementService: UserManagementService) {
}
ngOnInit() {
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
this.user = user;
}));
this.subscriptions.push(this.route.queryParams.subscribe(params => {
HelperFunctions.scroll();
this.portal = params['communityId'];
}));
}
ngOnDestroy(): void {
this.subscriptions.forEach(value => {
if (value instanceof Subscriber) {
value.unsubscribe();
} else if (value instanceof Function) {
value();
}
});
}
public get isPortalAdmin() {
return Session.isPortalAdministrator(this.user) || Session.isCurator(this.type, this.user);
}
}

View File

@ -0,0 +1,14 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {AdminTabsComponent} from "./admin-tabs.component";
import {RouterModule} from "@angular/router";
@NgModule({
declarations: [AdminTabsComponent],
imports: [
CommonModule, RouterModule
],
exports:[AdminTabsComponent]
})
export class AdminTabsModule {
}

View File

@ -42,28 +42,30 @@ export class PageContentComponent implements OnDestroy, AfterViewInit{
} }
setupHeightMutationObserver() { setupHeightMutationObserver() {
const observable = new Observable<number>(observer => { if (typeof document !== 'undefined') {
const callback = (mutationsList, observer2)=> { const observable = new Observable<number>(observer => {
observer.next(this.getHeight()); const callback = (mutationsList, observer2) => {
}; observer.next(this.getHeight());
};
// Create an observer instance linked to the callback function
const elementObserver = new MutationObserver(callback); // Create an observer instance linked to the callback function
const elementObserver = new MutationObserver(callback);
// Options for the observer (which mutations to observe)
const config = { attributes: true, attributeFilter: ['class'], childList: true, subtree: true }; // Options for the observer (which mutations to observe)
// Start observing the target node for configured mutations const config = {attributes: true, attributeFilter: ['class'], childList: true, subtree: true};
elementObserver.observe(this.header.nativeElement, config); // Start observing the target node for configured mutations
}); elementObserver.observe(this.header.nativeElement, config);
this.subscription = observable
.pipe(
distinctUntilChanged()//if the value hasn't changed, don't continue
)
.subscribe(newHeight => {
this.height = this.getHeight();
this.cdr.detectChanges();
}); });
this.subscription = observable
.pipe(
distinctUntilChanged()//if the value hasn't changed, don't continue
)
.subscribe(newHeight => {
this.height = this.getHeight();
this.cdr.detectChanges();
});
}
} }
ngAfterViewInit() { ngAfterViewInit() {

View File

@ -209,7 +209,12 @@ export class IndicatorFilterUtils{
}else if (field == "project"){ }else if (field == "project"){
return this.getProjectFilter(filterType); return this.getProjectFilter(filterType);
} }
//TODO add other options //TODO uncomment to add other options --> following doesn't work
/* else if (field == "country"){
return this.getCountryFilter(filterType);
}else if (field == "organization"){
return this.getOrganizationFilter(filterType);
}*/
} }
static getResultFilter(dbType: string = null, filterType:FilterType) { static getResultFilter(dbType: string = null, filterType:FilterType) {
@ -233,13 +238,22 @@ export class IndicatorFilterUtils{
} }
} }
static getOrganizationFilter( filterType:FilterType) { static getOrganizationFilter( filterType:FilterType) {
if (filterType == "fundingL0") { if (filterType == "fundingL0") {
return ''; return '{"groupFilters":[{"field":"organization.project.funding level 0","type":"=","values":["' + ChartHelper.prefix + 'fundingL0' + ChartHelper.suffix + '"]}],"op":"AND"}';
} else if (filterType == "start_year") { } else if (filterType == "start_year") {
return ''; return '{"groupFilters":[{"field":"organization.project.start year","type":">=","values":["' + ChartHelper.prefix + 'start_year' + ChartHelper.suffix + '"]}],"op":"AND"}';
} else if (filterType == "end_year") { } else if (filterType == "end_year") {
return ''; return '{"groupFilters":[{"field":"organization.project.start year","type":"<=","values":["' + ChartHelper.prefix + 'end_year' + ChartHelper.suffix + '"]}],"op":"AND"}';
} }
}
static getCountryFilter( filterType:FilterType) {
if (filterType == "fundingL0") {
return '{"groupFilters":[{"field":"country.organization.project.funding level 0","type":"=","values":["' + ChartHelper.prefix + 'fundingL0' + ChartHelper.suffix + '"]}],"op":"AND"}';
} else if (filterType == "start_year") {
return '{"groupFilters":[{"field":"country.organization.project.start year","type":">=","values":["' + ChartHelper.prefix + 'start_year' + ChartHelper.suffix + '"]}],"op":"AND"}';
} else if (filterType == "end_year") {
return '{"groupFilters":[{"field":"country.organization.project.start year","type":"<=","values":["' + ChartHelper.prefix + 'end_year' + ChartHelper.suffix + '"]}],"op":"AND"}';
}
} }
static filterIndexOf(filterToAdd, currentFilters):any{ static filterIndexOf(filterToAdd, currentFilters):any{