working on sending menu save/update/delete on the backend - dev only

dashboard/menu/menu.component.html

@@ -6,18 +6,18 @@
 				<ul *ngIf="!isPortalAdministrator" class="uk-subnav uk-subnav-pill uk-flex uk-flex-middle">
 					<li *ngFor="let item of rootMenuItems; let i=index" [class.uk-active]="activeRootMenu==item['_id']" class="uk-visible-toggle uk-position-relative uk-padding-remove-horizontal">
 						<span>
-							<a (click)="filterForm.get('status').setValue('resources'); activeRootMenu=item['_id']">
+							<a (click)="activeRootMenu=item['_id']">
 								<span class="title">{{item.title}}</span>
 							</a>
 							<span class="uk-invisible-hover uk-position-center-right color">
 								<span class="clickable" uk-icon="more-vertical"></span>
 								<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 10; delay-hide: 0; flip: false">
 									<ul class="uk-nav uk-dropdown-nav">
-										<li (click)="editRootMenu()">
+										<li (click)="editMenuItem(item, false)">
 											<a>Edit</a>
 										</li>
 										<hr class="uk-nav-divider">
-										<li (click)="deleteRootMenu()">
+										<li (click)="confirmDeleteMenuItem(item._id, false)">
 											<a>Delete</a>
 										</li>
 									</ul>
@@ -25,7 +25,7 @@
 							</span>
 						</span>
 					</li>
-					<li (click)="newRootMenu()" class="uk-visible-toggle">
+					<li (click)="newMenuItem(false)" class="uk-visible-toggle">
 						<span class="clickable">
 							<span class="uk-icon-button small portal-icon-button">
 								<icon name="add"></icon>
@@ -44,7 +44,7 @@
 					[bordered]="true" colorClass="uk-text-secondary"
 					class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
 			<div>
-				<a (click)="newMenuItem()" class="uk-flex uk-flex-middle uk-text-uppercase">
+				<a (click)="newMenuItem(true)" class="uk-flex uk-flex-middle uk-text-uppercase">
 					<button class="large uk-icon-button uk-button-secondary">
 						<icon name="add"></icon>
 					</button>
@@ -54,30 +54,6 @@
 				</a>
 			</div>
 		</div>
-		<!-- Not currently working -->
-		<div *ngIf="!showLoading && checkboxes.length > 0" class="uk-padding 
-				uk-padding-remove-bottom uk-padding-remove-top uk-margin-remove-top uk-margin-small-bottom uk-display-inline" 
-				[attr.uk-tooltip]="getSelectedMenuItems().length == 0 ? 'pos:left; cls: uk-active' : null" 
-				title="Select at least one menu item">
-			<input id="checkAll" type="checkbox" (click)="selectAll()" [ngModel]="getSelectedMenuItems().length == checkboxes.length"/>
-			<span *ngIf="getSelectedMenuItems().length > 0" class="uk-margin-left uk-text-muted"> {{getSelectedMenuItems().length}} menu items selected </span>
-			<a class="uk-margin-left">Actions</a>
-			<div uk-dropdown="mode: click">
-        <ul class="uk-nav uk-dropdown-nav"
-            [attr.uk-tooltip]="getSelectedMenuItems().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
-            title="Select at least one page">
-          <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedMenuItems().length == 0 ? 'uk-disabled' : ''"
-                                                (click)="toggleMenuItems(true,getSelectedMenuItems())"><i></i> Enable
-          </a></li>
-          <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedMenuItems().length == 0 ? 'uk-disabled' : ''"
-                                                (click)="toggleMenuItems(false,getSelectedMenuItems())"><i></i> Disable
-          </a>
-          </li>
-          <li *ngIf="isPortalAdministrator"><a [class]="getSelectedMenuItems().length == 0 ? 'uk-disabled' : ''"
-                                               	(click)="confirmDeleteSelectedMenuItems()"><i></i> Delete </a></li>
-        </ul>
-      </div>
-		</div>
 	</div>
 	<div inner>
 		<div *ngIf="showLoading" class="uk-position-center">
@@ -89,25 +65,25 @@
 					<div class="uk-grid uk-grid-divider uk-padding" uk-grid>
 						<div class="uk-width-4-5">
 							<div class="uk-grid uk-flex uk-flex-middle">
-								<div>
-									<input type="checkbox" id="" class="checkBox" name="" value="">
-								</div>
 								<div class="uk-width-expand uk-margin-medium-bottom">
 									{{child.title}}
 								</div>
-								<div class="uk-grid uk-width-1-1 uk-margin-left">
+								<div *ngIf="child.url" class="uk-grid uk-width-1-1 uk-margin-left">
-									Additional info
+									<span class="title uk-padding-remove">URL: </span><a href="{{child.url}}" target="_blank" class="uk-padding-remove uk-margin-left">{{child.url}}</a>
+								</div>
+								<div *ngIf="child.route" class="uk-grid uk-width-1-1 uk-margin-left">
+									<span class="title uk-padding-remove">Route: </span><span class="uk-padding-remove uk-margin-left">{{child.route}}</span>
 								</div>
 							</div>
 						</div>
 						<div class="uk-width-1-5">
 							<div class="uk-flex uk-flex-center">
 								<div href="#" class="actions">
-									<div class="uk-button action uk-margin-top uk-flex uk-flex-middle" (click)="editMenuItem()">
+									<div class="uk-button action uk-margin-top uk-flex uk-flex-middle" (click)="editMenuItem(child, true)">
 										<i uk-icon="pencil" class="clickable uk-icon"></i>
 										<span class="uk-margin-small-left"> Edit</span>
 									</div>
-									<div class="uk-button action uk-margin-top uk-flex uk-flex-middle" (click)="deleteMenuItem()">
+									<div class="uk-button action uk-margin-top uk-flex uk-flex-middle" (click)="confirmDeleteMenuItem(child._id, true)">
 										<i uk-icon="trash" class="clickable uk-icon"></i>
 										<span class="uk-margin-small-left"> Delete</span>
 									</div>
@@ -117,10 +93,15 @@
 					</div>
 				</li>
 			</ul>
+			<div *ngIf="!getActiveRootItem(activeRootMenu) || !getActiveRootItem(activeRootMenu).items || getActiveRootItem(activeRootMenu).items.length == 0"
+          class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
+        <div>No menu items found</div>
+      </div>
 		</div>
 	</div>
 </div>
-<modal-alert #editModal [okDisabled]="menuItemForm && (menuItemForm.invalid || !menuItemForm.dirty)">
+<modal-alert #editModal (alertOutput)="menuItemSaveConfirmed($event)" 
+						[okDisabled]="menuItemForm && (menuItemForm.invalid || !menuItemForm.dirty)">
 	<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('type')" type="select" label="Type" placeholder="Choose a type" [options]="typeOptions"></div>
@@ -154,3 +135,5 @@
 		</div>
 	</form>
 </modal-alert>
+
+<modal-alert #deleteModal (alertOutput)="confirmedDeleteMenuItem($event)"></modal-alert>

dashboard/menu/menu.component.ts

@@ -14,6 +14,8 @@ import {AlertModal} from '../../utils/modal/alert';
 import {CheckMenuItem, MenuItem} from '../../sharedComponents/menu';
 import {SearchInputComponent} from '../../sharedComponents/search-input/search-input.component';
 
+declare var UIkit;
+
 @Component({
   selector: 'menuSelector',
   templateUrl: './menu.component.html',
@@ -23,28 +25,21 @@ export class MenuComponent implements OnInit {
 	@ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
 	@ViewChild('editModal') editModal: AlertModal;
 	@ViewChild('deleteModal') deleteModal: AlertModal;
-	private selectedMenuItems: string[] = [];
-
-	public checkboxes: CheckMenuItem[] = [];
-
-	// public menuItems: MenuItem[] = [];
-
-	// public rootMenuForm: FormGroup;
 
 	public activeRootMenu: string;
+	private index: number;
 
 	public menuItemForm: FormGroup;
 	public rootMenuItems = [];
 	public menuItems = [];
 	public allPages = [];
 
-	public keyword = '';
+	public selectedMenuItem: string;
+	public isChild: boolean = false;
   
   public communities: Portal[] = [];
   public portal: string;
   
-  public properties: EnvProperties = properties;
-  
 	public newPageWindowOpen: boolean = false;
   public showLoading = true;
   public isPortalAdministrator = null;
@@ -53,7 +48,12 @@ export class MenuComponent implements OnInit {
 		{label: 'Internal Link', value: 'internal'},
 		{label: 'External Link', value: 'external'}
 	]
-	public selectedKeyword: string;
+
+	public keyword: string = '';
+	public selectedKeyword: string = '';
+	private searchText: string = '';
+
+	public properties: EnvProperties = properties;
   private subscriptions: any[] = [];
   
   constructor(private element: ElementRef, private route: ActivatedRoute,
@@ -65,8 +65,11 @@ export class MenuComponent implements OnInit {
   ngOnInit() {
 		this.filterForm = this._fb.group({
 			keyword: [''],
-			status: ['resources', Validators.required]
 		});
+		this.subscriptions.push(this.filterForm.get('keyword').valueChanges.subscribe(value => {
+			this.searchText = value.toLowerCase();
+			this.applyFilters();
+		}));
     this.userManagementService.getUserInfo().subscribe(user => {
       this.portal = (this.route.snapshot.data.portal) ? this.route.snapshot.data.portal : this.route.snapshot.params[this.route.snapshot.data.param];
       if (this.route.snapshot.data.portal) {
@@ -97,11 +100,9 @@ export class MenuComponent implements OnInit {
 		this.subscriptions.push(
 			this._helpContentService.getMenuItems(this.portal).subscribe(
 				data => {
-					console.log(data);
 					this.rootMenuItems = data;
 					if(data && data.length > 0) {
 						this.activeRootMenu = data[0]['_id'];
-						console.log(this.activeRootMenu);
 					}
 				},
 				err => console.error("Server error fetching menu items: ", err)
@@ -130,82 +131,83 @@ export class MenuComponent implements OnInit {
 		);
 	}
 
-	public newRootMenu() {
+	public newPageWindow() {
+		this.newPageWindowOpen = !this.newPageWindowOpen;
+	}
+
+	public newMenuItem(isChild: boolean = false) {
 		this.menuItemForm = this._fb.group({
-			id: this._fb.control(""),
+			_id: this._fb.control(""),
 			title: this._fb.control("",Validators.required),
 			type: this._fb.control(""),
       route: this._fb.control(""),
 			url: this._fb.control(""),
       isEnabled: this._fb.control(""),
+			parentItemId: this._fb.control(isChild ? this.activeRootMenu : null)
 		});
-		this.menuItemsModalOpen('Create Root Menu', 'Save Changes');
+		this.isChild = isChild;
+		this.menuItemsModalOpen('Create Menu Item', 'Create');
 	}
 
-	public editRootMenu() {
+	public editMenuItem(menuItem: MenuItem, isChild: boolean = false) {
 		this.menuItemForm = this._fb.group({
-			id: this._fb.control("id"),
+			_id: this._fb.control(menuItem['_id']),
-			title: this._fb.control("Resources",Validators.required),
+			title: this._fb.control(menuItem.title,Validators.required),
-			type: this._fb.control("",Validators.required),
+			type: this._fb.control(menuItem['type']),
-      route: this._fb.control("noNeed"),
+      route: this._fb.control(menuItem.route),
-			url: this._fb.control("noNeed"),
+			url: this._fb.control(menuItem.url),
-      isEnabled: this._fb.control("enabled",Validators.required),
+			parentItemId: this._fb.control(menuItem['parentItemId'])
 		});
-		this.menuItemsModalOpen('Edit Root Menu', 'Save Changes');
+		this.isChild = isChild;
+		if(this.isChild) {
+			this.index = this.getActiveRootItem(this.activeRootMenu).items.findIndex(value => value._id === menuItem['_id']);
+		} else {
+			this.index = this.rootMenuItems.findIndex(value => value._id === menuItem['_id']);
+		}
+		this.menuItemsModalOpen('Edit Menu Item', 'Save Changes');
 	}
 
-	public deleteRootMenu() {
-		console.log('Delete root menu');
-	}
 
-	public getSelectedMenuItems(): string[] {
+	public confirmDeleteMenuItem(id: string, isChild: boolean = false) {
-		return this.checkboxes.filter(menuItem => menuItem.checked == true).map(checkedMenuItem => checkedMenuItem.menuItem).map(res => res.id);
+		this.selectedMenuItem = id;
+		this.isChild = isChild;
+		this.confirmModalOpen();
 	}
 
-	public confirmDeleteSelectedMenuItems() {
-    this.selectedMenuItems = this.getSelectedMenuItems();
-    this.confirmModalOpen();
-  }
-
 	private confirmModalOpen() {
     this.deleteModal.cancelButton = true;
     this.deleteModal.okButton = true;
     this.deleteModal.alertTitle = 'Delete Confirmation';
-    this.deleteModal.message = 'Are you sure you want to delete the selected menu item(s)?';
+    this.deleteModal.message = 'Are you sure you want to delete this menu item?';
     this.deleteModal.okButtonText = 'Yes';
     this.deleteModal.open();
   }
 
-	public newMenuItem() {
+	public confirmedDeleteMenuItem(data: any, isChild: boolean = false) {
-		this.menuItemForm = this._fb.group({
+		this.showLoading = true;
-			id: this._fb.control(""),
+		this.subscriptions.push(
-			title: this._fb.control("",Validators.required),
+			this._helpContentService.deleteMenuItem(this.selectedMenuItem, this.portal).subscribe(
-			type: this._fb.control("",Validators.required),
+				_ => {
-      route: this._fb.control(""),
+					this.deleteMenuItemFromArray(this.selectedMenuItem, this.isChild);
-			url: this._fb.control(""),
+					UIkit.notification('Menu item have been <b>successfully deleted</b>', {
-      isEnabled: this._fb.control("",Validators.required),
+						status: 'success',
-		});
+						timeout: 6000,
-		this.menuItemsModalOpen('Create Menu Item', 'Save Changes');
+						pos: 'bottom-right'
+					});
+					this.showLoading = false;
+				}
+			)
+		)
 	}
 
-	public editMenuItem() {
+	private deleteMenuItemFromArray(id: string, isChild: boolean = false) {
-		this.menuItemForm = this._fb.group({
+		if(isChild) {
-			id: this._fb.control("id"),
+			let i = this.getActiveRootItem(this.activeRootMenu).items.findIndex(_ => _._id == id);
-      title: this._fb.control("HardcodedName",Validators.required),
+			this.getActiveRootItem(this.activeRootMenu).items.splice(i, 1);
-			type: this._fb.control("internal",Validators.required),
+		} else {
-      route: this._fb.control("routeAlex"),
+			let i = this.rootMenuItems.findIndex(_ => _._id == id);
-			url: this._fb.control("urlAlex"),
+			this.rootMenuItems.splice(i, 1);
-      isEnabled: this._fb.control("enabled",Validators.required),
+		}
-		});
-		this.menuItemsModalOpen('Edit Menu Item', 'Save Changes');
-	}
-
-	public deleteMenuItem() {
-		console.log('Delete menu item');
-	}
-
-	public newPageWindow() {
-		this.newPageWindowOpen = !this.newPageWindowOpen;
 	}
 
 	private menuItemsModalOpen(title: string, yesBtn: string) {
@@ -217,8 +219,57 @@ export class MenuComponent implements OnInit {
 		this.editModal.open();
 	}
 
-	public toggleMenuItems(status: boolean, ids: string[]) {
+	public menuItemSaveConfirmed(data: any) {
+		this.showLoading = true;
+		if(!this.menuItemForm.value._id) {
+			this.subscriptions.push(
+				this._helpContentService.saveMenuItem(<MenuItem>this.menuItemForm.value, this.portal).subscribe(
+					menuItem => {
+						this.menuItemSavedSuccessfully(menuItem, true);
+          	UIkit.notification('Menu item <b>' + menuItem.title + '</b> has been <b>successfully created</b>', {
+            status: 'success',
+            timeout: 6000,
+            pos: 'bottom-right'
+          });
+					}
+				)
+			)
+		} else {
+			this.subscriptions.push(
+				this._helpContentService.updateMenuItem(<MenuItem>this.menuItemForm.value, this.portal).subscribe(
+					menuItem => {
+						this.menuItemSavedSuccessfully(menuItem, false);
+          	UIkit.notification('Menu item <b>' + menuItem.title + '</b> has been <b>successfully updated</b>', {
+            status: 'success',
+            timeout: 6000,
+            pos: 'bottom-right'
+          });
+					}
+				)
+			)
+		}
+	}
 
+	public menuItemSavedSuccessfully(menuItem: MenuItem, isNew: boolean) {
+		if(isNew) {
+			if(this.isChild) {
+				this.getActiveRootItem(this.activeRootMenu).items.push(menuItem);
+			} else {
+				this.rootMenuItems.push(menuItem);
+			}
+		} else {
+			if(this.isChild) {
+				this.getActiveRootItem(this.activeRootMenu).items[this.index] = menuItem;
+			} else {
+				this.rootMenuItems[this.index] = menuItem;
+			}
+		}
+		this.showLoading = false;
+	}
+
+	public applyFilters() {
+		console.log(this.searchText);
+		this.getActiveRootItem(this.activeRootMenu).items = this.getActiveRootItem(this.activeRootMenu).items.filter(item => item.title.toLowerCase().includes(this.searchText));
 	}
 
 	public onSearchClose() {
@@ -229,11 +280,4 @@ export class MenuComponent implements OnInit {
     this.selectedKeyword = null;
     this.searchInputComponent.reset();
   }
-
-	selectAll() {
-		let checked = this.getSelectedMenuItems().length != this.checkboxes.length;
-    for (let check of this.checkboxes) {
-      check.checked = checked;
-    }
-	}
 }

dashboard/sharedComponents/sidebar/sideBar.component.ts

@@ -34,8 +34,8 @@ export class SideBarComponent implements OnInit {
   
   isTheActiveMenuItem(item: MenuItem, subItem: MenuItem = null): boolean {
     if (this.activeItem || this.activeSubItem) {
-      return (!subItem && this.activeItem === item.id) ||
+      return (!subItem && this.activeItem === item._id) ||
-        (subItem && this.activeItem === item.id && this.activeSubItem === subItem.id);
+        (subItem && this.activeItem === item._id && this.activeSubItem === subItem._id);
     } else {
       if (subItem) {
         return MenuItem.isTheActiveMenu(subItem, this.router.url.split('?')[0]) || MenuItem.isTheActiveMenu(subItem, this.router.url.split('#')[0]);

services/help-content.service.ts

@@ -315,11 +315,32 @@ export class HelpContentService {
       .pipe(catchError(this.handleError));
   }
 
+	// Menu Items
+
 	getMenuItems(portalPid: string) {
 		return this.http.get<Array<MenuItem>>(properties.adminToolsAPIURL + properties.adminToolsPortalType + "/" + portalPid + "/menu/root/full")
 			.pipe(catchError(this.handleError));
 	}
 
+	saveMenuItem(menuItem: MenuItem, portalPid: string) {
+		HelpContentService.removeNulls(menuItem);
+
+		return this.http.post<MenuItem>(properties.adminToolsAPIURL + properties.adminToolsPortalType + "/" + portalPid + "/menu/save", JSON.stringify(menuItem), CustomOptions.getAuthOptionsWithBody())
+			.pipe(catchError(this.handleError));
+	}
+
+	updateMenuItem(menuItem: MenuItem, portalPid: string) {
+		HelpContentService.removeNulls(menuItem);
+
+		return this.http.post<MenuItem>(properties.adminToolsAPIURL + properties.adminToolsPortalType + "/" + portalPid + "/menu/update", JSON.stringify(menuItem), CustomOptions.getAuthOptionsWithBody())
+			.pipe(catchError(this.handleError));
+	}
+
+	deleteMenuItem(menuItemId: string, portalPid: string) {
+		return this.http.post<MenuItem>(properties.adminToolsAPIURL + properties.adminToolsPortalType + "/" + portalPid + "/menu/delete", menuItemId, CustomOptions.getAuthOptionsWithBody())
+			.pipe(catchError(this.handleError));
+	}
+
   // unused
   getCommunities( helpContentUrl:string) {
     return this.http.get<Array<Portal>>(helpContentUrl + properties.adminToolsPortalType)

sharedComponents/menu.ts

@@ -1,5 +1,5 @@
 export class MenuItem {
-  id: string = ""; // for root menu in order to close the dropdown when clicked
+  _id: string = ""; // for root menu in order to close the dropdown when clicked
   title: string = "";
   url: string = ""; // external url
   route: string = ""; // internal  url - using angular routing and components
@@ -16,7 +16,7 @@ export class MenuItem {
   customClass: string = null;
 
   constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[], routeRequired: string[], params, icon=null, fragment = null, customClass = null, routeActive = null) {
-    this.id = id;
+    this._id = id;
     this.title = title;
     this.url = url;
     this.route = route;