diff --git a/dashboard/menu/menu.component.html b/dashboard/menu/menu.component.html index eac633b1..28005498 100644 --- a/dashboard/menu/menu.component.html +++ b/dashboard/menu/menu.component.html @@ -31,13 +31,53 @@ - Create new menu item + Create new root menu +
+
+
+ + + + +
+
+ +
+ + {{getSelectedMenuItems().length}} menu items selected + Actions +
+ +
+
@@ -45,11 +85,6 @@
- -
- + + +
+
+
+
\ No newline at end of file diff --git a/dashboard/menu/menu.component.ts b/dashboard/menu/menu.component.ts index 037bf05d..5b0455b4 100644 --- a/dashboard/menu/menu.component.ts +++ b/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.menuItemsModalOpen('Edit Menu Item', 'Save Changers'); + this.menuItemForm = this._fb.group({ + 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; + } + } } diff --git a/sharedComponents/menu.ts b/sharedComponents/menu.ts index 748c7820..e95dbd2f 100644 --- a/sharedComponents/menu.ts +++ b/sharedComponents/menu.ts @@ -82,3 +82,8 @@ export class SideMenuItem { items: RootMenuItem[] = []; ukIcon: string = ''; } + +export interface CheckMenuItem { + menuItem: MenuItem; + checked: boolean; +}