From 24fd2b385662a16b9edacc95ee1f84132dfdb4f9 Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Fri, 17 Dec 2021 15:36:30 +0200
Subject: [PATCH] Progress on dynamic menu - dev only

---
 dashboard/menu/menu.component.html | 23 +++++++++++------
 dashboard/menu/menu.component.ts   | 40 ++++++++++++++++++++++--------
 2 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/dashboard/menu/menu.component.html b/dashboard/menu/menu.component.html
index 28005498..3587fd8d 100644
--- a/dashboard/menu/menu.component.html
+++ b/dashboard/menu/menu.component.html
@@ -13,11 +13,11 @@
 								<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>
+										<li (click)="editRootMenu()">
 											<a>Edit</a>
 										</li>
 										<hr class="uk-nav-divider">
-										<li>
+										<li (click)="deleteRootMenu()">
 											<a>Delete</a>
 										</li>
 									</ul>
@@ -25,7 +25,7 @@
 							</span>
 						</span>
 					</li>
-					<li class="uk-visible-toggle">
+					<li (click)="newRootMenu()" class="uk-visible-toggle">
 						<span class="clickable">
 							<span class="uk-icon-button small portal-icon-button">
 								<icon name="add"></icon>
@@ -74,7 +74,7 @@
           </a>
           </li>
           <li *ngIf="isPortalAdministrator"><a [class]="getSelectedMenuItems().length == 0 ? 'uk-disabled' : ''"
-                                               (click)="confirmDeleteSelectedMenuItems()"><i></i> Delete </a></li>
+                                               	(click)="confirmDeleteSelectedMenuItems()"><i></i> Delete </a></li>
         </ul>
       </div>
 		</div>
@@ -120,11 +120,18 @@
 		</div>
 	</div>
 </div>
-<modal-alert #editModal [okDisabled]="menuItemForm && (menuItemForm.invalid || menuItemForm.dirty)">
+<modal-alert #editModal [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('name')"  type="text" label="Name" placeholder="Write a name"></div>
+		<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>
-		<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>
+		<!-- Workflow for EXTERNAL -->
+		<div dashboard-input *ngIf="menuItemForm.get('type').value === 'external'" [formInput]="menuItemForm.get('url')" type="URL" label="URL" placeholder="Write a URL"></div>
+		<!-- Workflow for INTERNAL -->
+		<div *ngIf="menuItemForm.get('type').value === 'internal'">
+			<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>
 	</form>
 </modal-alert>
\ No newline at end of file
diff --git a/dashboard/menu/menu.component.ts b/dashboard/menu/menu.component.ts
index 5b0455b4..6be41581 100644
--- a/dashboard/menu/menu.component.ts
+++ b/dashboard/menu/menu.component.ts
@@ -13,6 +13,7 @@ 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({
@@ -32,6 +33,7 @@ export class MenuComponent implements OnInit {
 
 	// public rootMenuForm: FormGroup;
 	public menuItemForm: FormGroup;
+	public allPages = [];
 
 	public keyword = '';
   
@@ -85,15 +87,33 @@ 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 newRootMenu() {
+		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 Root Menu', 'Save Changes');
+	}
+
+	public editRootMenu() {
+		this.menuItemForm = this._fb.group({
+			id: this._fb.control("id"),
+			title: this._fb.control("Resources",Validators.required),
+			type: this._fb.control("",Validators.required),
+      route: this._fb.control("noNeed"),
+			url: this._fb.control("noNeed"),
+      isEnabled: this._fb.control("enabled",Validators.required),
+		});
+		this.menuItemsModalOpen('Edit Root Menu', 'Save Changes');
+	}
+
+	public deleteRootMenu() {
+		console.log('Delete root menu');
+	}
 
 	public getSelectedMenuItems(): string[] {
 		return this.checkboxes.filter(menuItem => menuItem.checked == true).map(checkedMenuItem => checkedMenuItem.menuItem).map(res => res.id);
@@ -155,7 +175,7 @@ export class MenuComponent implements OnInit {
 	}
 
 	public onSearchClose() {
-    this.selectedKeyword = this.filterForm.value;
+    this.selectedKeyword = this.filterForm.get('keyword').value;
   }
   
   public reset() {