openaire-library/dashboard/page/pages.component.ts

547 lines
17 KiB
TypeScript

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {HelpContentService} from '../../services/help-content.service';
import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
import {CheckPage, Page} from '../../utils/entities/adminTool/page';
import {Community} from '../../utils/entities/adminTool/community';
import {Entity} from '../../utils/entities/adminTool/entity';
import {EnvProperties} from '../../utils/properties/env-properties';
import {Session} from '../../login/utils/helper.class';
import {LoginErrorCodes} from '../../login/utils/guardHelper.class';
import {HelperFunctions} from '../../utils/HelperFunctions.class';
import {UserManagementService} from '../../services/user-management.service';
import {Observable, Subscriber} from "rxjs";
import {map, startWith} from "rxjs/operators";
import {MatAutocompleteSelectedEvent} from "@angular/material";
@Component({
selector: 'pages',
templateUrl: './pages.component.html',
})
export class PagesComponent implements OnInit {
@ViewChild('AlertModalSavePage') alertModalSavePage;
@ViewChild('AlertModalDeletePages') alertModalDeletePages;
private selectedPages: string[] = [];
public checkboxes: CheckPage[] = [];
public pages: Page[] = [];
public pageWithDivIds: string[] = [];
//public errorMessage: string;
public myForm: FormGroup;
private searchText: RegExp = new RegExp('');
public keyword: string = '';
public communities: Community[] = [];
public selectedCommunityPid: string;
public pagesType: string;
public properties: EnvProperties = null;
public showLoading: boolean = true;
public errorMessage: string = '';
public updateErrorMessage: string = '';
public modalErrorMessage: string = '';
public isPortalAdministrator = null;
public filterForm: FormControl;
public typeOptions = [{label: 'Search', value: 'search'}, {label: 'Link', value: 'link'}, {
label: 'Share',
value: 'share'
}, {label: 'Landing', value: 'landing'}, {label: 'HTML', value: 'html'}, {
label: 'Link',
value: 'link'
}, {label: 'Other', value: 'other'}]
public entitiesCtrl: FormArray;
@ViewChild('PageInput') pageInput: ElementRef<HTMLInputElement>;
public entitiesSearchCtrl: FormControl;
filteredEntities: Observable<Entity[]>;
selectedEntities: Entity[] = [];
allEntities: Entity[] = [];
private subscriptions: any[] = [];
constructor(private element: ElementRef, private route: ActivatedRoute,
private _router: Router, private _helpContentService: HelpContentService,
private userManagementService: UserManagementService, private _fb: FormBuilder) {
}
ngOnInit() {
this.filterForm = this._fb.control('');
this.subscriptions.push(this.filterForm.valueChanges.subscribe(value => {
this.filterBySearch(value);
}));
this.entitiesSearchCtrl = this._fb.control('');
this.myForm = this._fb.group({
route: ['', Validators.required],
name: ['', Validators.required],
isEnabled: true,
openaire: true,
connect: false,
communities: true,
top: true,
bottom: true,
left: true,
right: true,
type: ['', Validators.required],
entities: this.entitiesCtrl,
_id: '',
});
this.route.data
.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
this.route.queryParams.subscribe(params => {
HelperFunctions.scroll();
this.pagesType = '';
if (params['type']) {
this.pagesType = params['type'];
}
this.keyword = '';
this.userManagementService.getUserInfo().subscribe(user => {
this.selectedCommunityPid = params['communityId'];
this.applyCommunityFilter(this.selectedCommunityPid);
this.isPortalAdministrator = Session.isPortalAdministrator(user) && !this.selectedCommunityPid;
});
//this.getCommunities();
});
this._helpContentService.getEntities(this.properties.adminToolsAPIURL).subscribe(
entities => {
this.allEntities = entities;
this.showLoading = false;
},
error => this.handleError('System error retrieving community entities', error));
});
}
ngOnDestroy(): void {
this.subscriptions.forEach(value => {
if (value instanceof Subscriber) {
value.unsubscribe();
} else if (value instanceof Function) {
value();
}
});
}
getPages(community_pid: string) {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: {
'errorCode': LoginErrorCodes.NOT_VALID,
'redirectUrl': this._router.url
}
});
} else {
this.showLoading = true;
this.updateErrorMessage = '';
this.errorMessage = '';
this.pageWithDivIds = [];
let parameters = '';
if (this.pagesType) {
parameters = '?page_type=' + this.pagesType;
}
if (community_pid) {
this._helpContentService.getCommunityPages(community_pid, parameters, this.properties.adminToolsAPIURL).subscribe(
pages => {
this.pagesReturned(pages);
//if(!this.pagesType || this.pagesType == "link") {
this.getPagesWithDivIds(community_pid);
//} else {
//this.showLoading = false;
//}
},
error => this.handleError('System error retrieving pages', error)
);
} else {
this._helpContentService.getPagesFull(this.properties.adminToolsAPIURL, null).subscribe(
pages => {
this.pagesReturned(pages);
this.showLoading = false;
},
error => this.handleError('System error retrieving pages', error)
);
}
}
}
getPagesWithDivIds(community_pid: string) {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: {
'errorCode': LoginErrorCodes.NOT_VALID,
'redirectUrl': this._router.url
}
});
} else {
this._helpContentService.getPagesWithDivIds(community_pid, this.properties.adminToolsAPIURL).subscribe(
pages => {
this.pageWithDivIds = pages;
this.showLoading = false;
},
error => this.handleError('System error retrieving information about pages\' classes', error));
}
}
pagesReturned(pages: Page[]) {
this.pages = pages;
this.checkboxes = [];
if (pages) {
pages.forEach(_ => {
this.checkboxes.push(<CheckPage>{page: _, checked: false});
});
}
}
/*
getCommunities() {
this._helpContentService.getCommunities(this.properties.adminToolsAPIURL).subscribe(
communities => {
this.communities = communities;
this.selectedCommunityPid = this.communities[0].pid;
this.getPages(this.selectedCommunityPid);
this.getPagesWithDivIds(this.selectedCommunityPid);
},
error => this.handleError('System error retrieving communities', error));
}
*/
public toggleCheckBoxes(event) {
this.checkboxes.forEach(_ => _.checked = event.target.checked);
}
public applyCheck(flag: boolean) {
this.checkboxes.forEach(_ => _.checked = flag);
}
public getSelectedPages(): string[] {
return this.checkboxes.filter(page => page.checked == true).map(checkedPage => checkedPage.page).map(res => res._id);
}
private deletePagesFromArray(ids: string[]): void {
for (let id of ids) {
let i = this.checkboxes.findIndex(_ => _.page._id == id);
this.checkboxes.splice(i, 1);
}
}
public confirmDeletePage(id: string) {
//this.deleteConfirmationModal.ids = [id];
//this.deleteConfirmationModal.showModal();
this.selectedPages = [id];
this.confirmModalOpen();
}
public confirmDeleteSelectedPages() {
//this.deleteConfirmationModal.ids = this.getSelectedPages();
//this.deleteConfirmationModal.showModal();
this.selectedPages = this.getSelectedPages();
this.confirmModalOpen();
}
private confirmModalOpen() {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: {
'errorCode': LoginErrorCodes.NOT_VALID,
'redirectUrl': this._router.url
}
});
} else {
this.alertModalDeletePages.cancelButton = true;
this.alertModalDeletePages.okButton = true;
this.alertModalDeletePages.alertTitle = 'Delete Confirmation';
this.alertModalDeletePages.message = 'Are you sure you want to delete the selected page(s)?';
this.alertModalDeletePages.okButtonText = 'Yes';
this.alertModalDeletePages.open();
}
}
public confirmedDeletePages(data: any) {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: {
'errorCode': LoginErrorCodes.NOT_VALID,
'redirectUrl': this._router.url
}
});
} else {
this.showLoading = true;
this.updateErrorMessage = '';
this._helpContentService.deletePages(this.selectedPages, this.properties.adminToolsAPIURL).subscribe(
_ => {
this.deletePagesFromArray(this.selectedPages);
this.showLoading = false;
},
error => this.handleUpdateError('System error deleting the selected pages', error)
);
}
}
public editPage(i: number) {
this.entitiesCtrl = this._fb.array([]);
let page: Page = this.checkboxes[i].page;
this.myForm = this._fb.group({
route: [page.route, Validators.required],
name: [page.name, Validators.required],
isEnabled: page.isEnabled,
openaire: page.openaire,
connect: page.connect,
communities: page.communities,
top: page.top,
bottom: page.bottom,
left: page.left,
right: page.right,
type: [page.type, Validators.required],
entities: this.entitiesCtrl,
_id: page._id,
});
for (let i = 0; i < page.entities.length; i++) {
this.entitiesCtrl.push(this._fb.control(page.entities[i]));
}
this.filteredEntities = this.entitiesSearchCtrl.valueChanges.pipe(startWith(''),
map(page => this._filter(page)));
this.selectedEntities = JSON.parse(JSON.stringify(page.entities));
this.modalErrorMessage = '';
this.pagesModalOpen(this.alertModalSavePage, '', 'Save changes');
}
private _filter(value: string): Entity[] {
if (!value || value.length == 0) {
return this.allEntities.slice();
}
const filterValue = value.toString().toLowerCase();
return this.allEntities.filter(page => page.name.toLowerCase().indexOf(filterValue) != -1);
}
public newPage() {
this.entitiesCtrl = this._fb.array([]);
this.myForm = this._fb.group({
route: ['', Validators.required],
name: ['', Validators.required],
isEnabled: true,
openaire: true,
connect: false,
communities: true,
top: true,
bottom: true,
left: true,
right: true,
type: [this.typeOptions[0].value, Validators.required],
entities: this._fb.array([]),
_id: '',
});
this.selectedEntities = [];
this.modalErrorMessage = '';
this.filteredEntities = this.entitiesSearchCtrl.valueChanges.pipe(startWith(''),
map(page => this._filter(page)));
this.pagesModalOpen(this.alertModalSavePage, '', 'Save');
}
private pagesModalOpen(modal: any, title: string, yesBtn: string) {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: {
'errorCode': LoginErrorCodes.NOT_VALID,
'redirectUrl': this._router.url
}
});
} else {
modal.cancelButton = true;
modal.okButton = true;
modal.alertTitle = title;
modal.okButtonText = yesBtn;
modal.open();
}
}
public pageSaveConfirmed(data: any) {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: {
'errorCode': LoginErrorCodes.NOT_VALID,
'redirectUrl': this._router.url
}
});
} else {
console.log(this.myForm.value)
if (this.myForm.value['_id'].length == 0) {
this.modalErrorMessage = '';
this._helpContentService.savePage(<Page>this.myForm.value, this.properties.adminToolsAPIURL).subscribe(
page => {
this.pageSavedSuccessfully(page, true);
},
error => this.handleUpdateError('System error creating page', error)
);
} else {
this._helpContentService.updatePage(<Page>this.myForm.value, this.properties.adminToolsAPIURL).subscribe(
page => {
this.pageSavedSuccessfully(page, false);
},
error => this.handleUpdateError('System error updating page', error)
);
}
}
}
/* public pageUpdateConfirmed(data: any) {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}});
} else {
if (!this.myForm.valid) {
this.pagesModalOpen(this.alertModalSavePage, 'Update', 'Update Page');
this.modalErrorMessage = 'Please fill in all required fields marked with *';
} else {
this._helpContentService.updatePage(<Page>this.myForm.value, this.properties.adminToolsAPIURL).subscribe(
page => {
this.pageUpdatedSuccessfully(page);
},
error => this.handleUpdateError('System error updating page', error)
);
}
}
}*/
public pageSavedSuccessfully(page: Page, isNew: boolean) {
if (isNew) {
this.checkboxes.push(<CheckPage>{page: page, checked: false});
} else {
this.checkboxes.find(checkItem => checkItem.page._id == page._id).page = page;
}
this.applyCheck(false);
}
public filterBySearch(text: string) {
this.searchText = new RegExp(text, 'i');
this.applyFilter();
}
public applyFilter() {
this.checkboxes = [];
this.pages.filter(item => this.filterPages(item)).forEach(
_ => this.checkboxes.push(<CheckPage>{page: _, checked: false})
);
}
public filterPages(page: Page): boolean {
let textFlag = this.searchText.toString() == '' || (page.route + ' ' + page.name).match(this.searchText) != null;
return textFlag;
}
handleError(message: string, error) {
// if(error == null) {
// this.formComponent.reset();
// } else {
this.errorMessage = message;// + ' (Server responded: ' + error + ')';
console.log('Server responded: ' + error);
//}
this.showLoading = false;
}
handleUpdateError(message: string, error) {
if (error == null) {
// this.formComponent.reset();
this.myForm = this._fb.group({
route: ['', Validators.required],
name: ['', Validators.required],
isEnabled: true,
openaire: true,
connect: false,
communities: true,
top: true,
bottom: true,
left: true,
right: true,
type: ['', Validators.required],
entities: this._fb.array([]),
_id: '',
});
} else {
this.updateErrorMessage = message;// + ' (Server responded: ' + error + ')';
console.log('Server responded: ' + error);
}
this.showLoading = false;
}
// public filterByCommunity(event: any) {
// this.selectedCommunityPid = event.target.value;
// this.applyCommunityFilter(this.selectedCommunityPid);
// }
public applyCommunityFilter(community_pid: string) {
this.getPages(community_pid);
}
public togglePages(status: boolean, ids: string[]) {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: {
'errorCode': LoginErrorCodes.NOT_VALID,
'redirectUrl': this._router.url
}
});
} else {
this.updateErrorMessage = '';
this._helpContentService.togglePages(this.selectedCommunityPid, ids, status, this.properties.adminToolsAPIURL).subscribe(
() => {
for (let id of ids) {
let i = this.checkboxes.findIndex(_ => _.page._id == id);
this.checkboxes[i].page.isEnabled = status;
}
this.applyCheck(false);
},
error => this.handleUpdateError('System error changing the status of the selected page(s)', error)
);
}
}
public capitalizeFirstLetter(str: string) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
remove(entity): void {
let index = this.selectedEntities.indexOf(entity);
console.log(entity);
console.log(this.selectedEntities);
console.log(index)
if (index >= 0) {
this.selectedEntities.splice(index, 1);
this.entitiesCtrl.value.splice(index, 1);
this.entitiesCtrl.markAsDirty();
}
}
selected(event: MatAutocompleteSelectedEvent): void {
let newEntity = event.option.value;
if (this.selectedEntities.indexOf(newEntity) == -1) {
this.selectedEntities.push(event.option.value);
this.entitiesCtrl.push(this._fb.control(newEntity));
this.entitiesCtrl.markAsDirty();
}
this.pageInput.nativeElement.value = '';
this.entitiesSearchCtrl.setValue('');
}
}