Work on dynamic menus with actual data - dev only

dashboard/menu/menu.component.html

@@ -131,7 +131,26 @@
 			<div class="uk-text-center">Select one of the pages</div>
 			<div dashboard-input [formInput]="menuItemForm.get('route')" type="autocomplete" label="Page" placeholder="Search all pages" [options]="allPages" [showOptionsOnEmpty]="false">
       </div>
-			<div class="uk-text-center uk-margin-top">Or <a>create a new one</a></div>
+			<div class="uk-text-center uk-margin-top">Or <a (click)="newPageWindow()">create a new one</a></div>
+			<div *ngIf="newPageWindowOpen" class="uk-card uk-card-default uk-card-body uk-margin-top">
+				<div>
+					<button (click)="newPageWindow()" class="uk-close uk-icon uk-float-right" uk-close></button>
+					<h6 class="uk-text-bold uk-margin-remove-top">Create New Page</h6>
+				</div>
+				<form *ngIf="menuItemForm" [formGroup]="menuItemForm" class="uk grid uk-child-width-1-1" uk-grid>
+					<div dashboard-input [formInput]="menuItemForm.get('title')"  type="text" label="Name" placeholder="Write a name"></div>
+					<div dashboard-input [formInput]="menuItemForm.get('title')"  type="text" label="Route" placeholder="Write a route"></div>
+					<div>
+						<div class="uk-text-bold uk-form-label uk-margin-small-bottom">Enable/disable</div>
+						<mat-slide-toggle
+															uk-tooltip="title:<div class='uk-padding-small uk-width-large'><div class='uk-text-bold '>Disable a page to hide it from community dashboard portal.</div><div class=' uk-margin-top'>If the page is disabled, a message 'Can't find that page' will appear in case the url of that page is loaded. If the disabled page belongs to the menu, the link will be removed from menu, too.</div></div>">
+						</mat-slide-toggle>
+					</div>
+					<div class="uk-flex uk-flex-right">
+						<button class="uk-button uk-button-default">Create Page</button>
+					</div>
+				</form>
+			</div>
 		</div>
 	</form>
 </modal-alert>

dashboard/menu/menu.component.ts

@@ -13,8 +13,6 @@ import {Title} from "@angular/platform-browser";
 import {AlertModal} from '../../utils/modal/alert';
 import {CheckMenuItem, MenuItem} from '../../sharedComponents/menu';
 import {SearchInputComponent} from '../../sharedComponents/search-input/search-input.component';
-import {Option} from '../../sharedComponents/input/input.component';
-
 
 @Component({
   selector: 'menuSelector',
@@ -42,6 +40,7 @@ export class MenuComponent implements OnInit {
   
   public properties: EnvProperties = properties;
   
+	public newPageWindowOpen: boolean = false;
   public showLoading = true;
   public isPortalAdministrator = null;
   public filterForm: FormGroup;
@@ -75,6 +74,8 @@ export class MenuComponent implements OnInit {
       this.isPortalAdministrator = Session.isPortalAdministrator(user) && !this.portal;
     });
     this.showLoading = false;
+		this.getMenuItems();
+		this.getPages();
   }
   
   ngOnDestroy(): void {
@@ -87,6 +88,34 @@ export class MenuComponent implements OnInit {
     });
   }
 
+	getMenuItems() {
+		this.subscriptions.push(
+			this._helpContentService.getMenuItems(this.portal).subscribe(
+				data => {
+					console.log(data);
+				},
+				err => console.error("Server error fetching menu items: ", err)
+			)
+		);
+	}
+
+	getPages() {
+		this.subscriptions.push(
+			this._helpContentService.getAllPages(this.properties.adminToolsAPIURL,this.portal).subscribe(
+				data => {
+					let pages = data;
+					this.allPages = [];
+					for(let i = 0; i < pages.length; i++) {
+						if(pages[i] && pages[i].name && pages[i].route) {
+							this.allPages.push({value: pages[i].route, label: pages[i].name});
+						}
+					}
+				},
+				err => console.error("Server error fetching pages: ", err)
+			)
+		);
+	}
+
 	public newRootMenu() {
 		this.menuItemForm = this._fb.group({
 			id: this._fb.control(""),
@@ -161,6 +190,10 @@ export class MenuComponent implements OnInit {
 		console.log('Delete menu item');
 	}
 
+	public newPageWindow() {
+		this.newPageWindowOpen = !this.newPageWindowOpen;
+	}
+
 	private menuItemsModalOpen(title: string, yesBtn: string) {
 		this.editModal.cancelButton = true;
 		this.editModal.okButton = true;

services/help-content.service.ts

@@ -14,6 +14,7 @@ import {StatisticsDisplay, StatisticsSummary} from '../connect/statistics/statis
 import {CustomOptions} from './servicesUtils/customOptions.class';
 import {catchError, map} from "rxjs/operators";
 import {properties} from "../../../environments/environment";
+import { MenuItem } from '../sharedComponents/menu';
 
 @Injectable()
 export class HelpContentService {
@@ -264,7 +265,7 @@ export class HelpContentService {
     //     parameters += "&with_positions="+with_positions;
     //   }
     // }
-    return this.http.get<Array<Page>>(helpContentUrl + 'page' + (pid?"pid="+pid:""))
+    return this.http.get<Array<Page>>(helpContentUrl + 'page?' + (pid?"pid="+pid:""))
     //.map(res => <Array<Page>> res.json())
       .pipe(catchError(this.handleError));
   }
@@ -314,6 +315,11 @@ export class HelpContentService {
       .pipe(catchError(this.handleError));
   }
 
+	getMenuItems(portalPid: string) {
+		return this.http.get<Array<MenuItem>>(properties.adminToolsAPIURL + properties.adminToolsPortalType + "/" + portalPid + "/menu/root/full")
+			.pipe(catchError(this.handleError));
+	}
+
   // unused
   getCommunities( helpContentUrl:string) {
     return this.http.get<Array<Portal>>(helpContentUrl + properties.adminToolsPortalType)