Work in progress for new dymanic menu - dev only

dashboard/menu/menu.component.html

@@ -31,13 +31,53 @@
 								<icon name="add"></icon>
 							</span>
 							<span class="space uk-hidden-hover">
-								Create new menu item
+								Create new root menu
 							</span>
 						</span>
 					</li>
 				</ul>
 			</div>
 		</div>
+		<div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid uk-margin-remove-top" uk-grid>
+			<div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search menu item"
+					[selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()"
+					[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">
+					<button class="large uk-icon-button uk-button-secondary">
+						<icon name="add"></icon>
+					</button>
+					<button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">
+						Add new menu item
+					</button>
+				</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">
@@ -45,11 +85,6 @@
 		</div>
 		<div *ngIf="!showLoading">
 			<ul class="uk-list submenu-items">
-				<!-- <li class="uk-card uk-card-default uk-margin-bottom">
-					<div class="uk-grid uk-grid-divider uk-padding" uk-grid>
-						Submenu item 1
-					</div>
-				</li> -->
 				<li class="uk-card uk-card-default uk-margin-bottom">
 					<div class="uk-grid uk-grid-divider uk-padding" uk-grid>
 						<div class="uk-width-4-5">
@@ -85,8 +120,11 @@
 		</div>
 	</div>
 </div>
-<modal-alert #editModal>
+<modal-alert #editModal [okDisabled]="menuItemForm && (menuItemForm.invalid || menuItemForm.dirty)">
-	<form>
+	<form *ngIf="menuItemForm" [formGroup]="menuItemForm" class="uk grid uk-child-width-1-1" uk-grid>
-		
+		<div dashboard-input [formInput]="menuItemForm.get('name')"  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>
+		<div dashboard-input [formInput]="menuItemForm.get('route')" type="text" label="Route" placeholder="Write a route"></div>
+		<div dashboard-input [formInput]="menuItemForm.get('url')" type="text" label="URL" placeholder="Write a URL"></div>
 	</form>
 </modal-alert>

dashboard/menu/menu.component.ts

@@ -11,6 +11,8 @@ import {properties} from "../../../../environments/environment";
 import {StringUtils} from "../../utils/string-utils.class";
 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';
 
 
 @Component({
@@ -19,8 +21,17 @@ import {AlertModal} from '../../utils/modal/alert';
 })
 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 menuItemForm: FormGroup;
 
 	public keyword = '';
   
@@ -32,6 +43,11 @@ export class MenuComponent implements OnInit {
   public showLoading = true;
   public isPortalAdministrator = null;
   public filterForm: FormGroup;
+	public typeOptions = [
+		{label: 'Internal Link', value: 'internal'},
+		{label: 'External Link', value: 'external'}
+	]
+	public selectedKeyword: string;
   private subscriptions: any[] = [];
   
   constructor(private element: ElementRef, private route: ActivatedRoute,
@@ -68,10 +84,57 @@ export class MenuComponent implements OnInit {
       }
     });
   }
+
+	// public newRootMenu() {
+	// 	this.rootMenuForm = this._fb.group({
+	// 		id: this._fb.control(null),
+	// 		title: this._fb.control("",Validators.required),
+  //     route: this._fb.control(""),
+  //     isEnabled: this._fb.control("",Validators.required),
+	// 	});
+	// 	this.menuItemsModalOpen('Create Root Menu', 'Save Changes');
+	// }
+
+	public getSelectedMenuItems(): string[] {
+		return this.checkboxes.filter(menuItem => menuItem.checked == true).map(checkedMenuItem => checkedMenuItem.menuItem).map(res => res.id);
+	}
+
+	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.okButtonText = 'Yes';
+    this.deleteModal.open();
+  }
+
+	public newMenuItem() {
+		this.menuItemForm = this._fb.group({
+			id: this._fb.control(""),
+			title: this._fb.control("",Validators.required),
+			type: this._fb.control("",Validators.required),
+      route: this._fb.control(""),
+			url: this._fb.control(""),
+      isEnabled: this._fb.control("",Validators.required),
+		});
+		this.menuItemsModalOpen('Create Menu Item', 'Save Changes');
+	}
   
 	public editMenuItem() {
-		console.log('Edit menu item');
+		this.menuItemForm = this._fb.group({
-		this.menuItemsModalOpen('Edit Menu Item', 'Save Changers');
+			id: this._fb.control("id"),
+      title: this._fb.control("HardcodedName",Validators.required),
+			type: this._fb.control("internal",Validators.required),
+      route: this._fb.control("routeAlex"),
+			url: this._fb.control("urlAlex"),
+      isEnabled: this._fb.control("enabled",Validators.required),
+		});
+		this.menuItemsModalOpen('Edit Menu Item', 'Save Changes');
 	}
 
 	public deleteMenuItem() {
@@ -86,4 +149,24 @@ export class MenuComponent implements OnInit {
 		this.editModal.okButtonText = yesBtn;
 		this.editModal.open();
 	}
+
+	public toggleMenuItems(status: boolean, ids: string[]) {
+
+	}
+
+	public onSearchClose() {
+    this.selectedKeyword = this.filterForm.value;
+  }
+  
+  public reset() {
+    this.selectedKeyword = null;
+    this.searchInputComponent.reset();
+  }
+
+	selectAll() {
+		let checked = this.getSelectedMenuItems().length != this.checkboxes.length;
+    for (let check of this.checkboxes) {
+      check.checked = checked;
+    }
+	}
 }

sharedComponents/menu.ts

@@ -82,3 +82,8 @@ export class SideMenuItem {
   items: RootMenuItem[] = [];
   ukIcon: string = '';
 }
+
+export interface CheckMenuItem {
+	menuItem: MenuItem;
+	checked: boolean;
+}