From 259ca4b5b17746c781b08dc1d0ee7b2a62d0faea Mon Sep 17 00:00:00 2001 From: Alex Martzios Date: Wed, 5 Jan 2022 16:41:49 +0200 Subject: [PATCH] working on sending menu save/update/delete on the backend - dev only --- dashboard/menu/menu.component.html | 59 ++---- dashboard/menu/menu.component.ts | 188 +++++++++++------- .../sidebar/sideBar.component.ts | 4 +- services/help-content.service.ts | 21 ++ sharedComponents/menu.ts | 4 +- 5 files changed, 162 insertions(+), 114 deletions(-) diff --git a/dashboard/menu/menu.component.html b/dashboard/menu/menu.component.html index 41805951..807e0906 100644 --- a/dashboard/menu/menu.component.html +++ b/dashboard/menu/menu.component.html @@ -6,18 +6,18 @@ +
+
No menu items found
+
- +
@@ -153,4 +134,6 @@
- \ No newline at end of file + + + \ No newline at end of file diff --git a/dashboard/menu/menu.component.ts b/dashboard/menu/menu.component.ts index 61f88613..bcdb8df8 100644 --- a/dashboard/menu/menu.component.ts +++ b/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"), - 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), + _id: this._fb.control(menuItem['_id']), + title: this._fb.control(menuItem.title,Validators.required), + type: this._fb.control(menuItem['type']), + route: this._fb.control(menuItem.route), + url: this._fb.control(menuItem.url), + 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[] { - return this.checkboxes.filter(menuItem => menuItem.checked == true).map(checkedMenuItem => checkedMenuItem.menuItem).map(res => res.id); + public confirmDeleteMenuItem(id: string, isChild: boolean = false) { + 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() { - 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() { - 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 confirmedDeleteMenuItem(data: any, isChild: boolean = false) { + this.showLoading = true; + this.subscriptions.push( + this._helpContentService.deleteMenuItem(this.selectedMenuItem, this.portal).subscribe( + _ => { + this.deleteMenuItemFromArray(this.selectedMenuItem, this.isChild); + UIkit.notification('Menu item have been successfully deleted', { + status: 'success', + timeout: 6000, + pos: 'bottom-right' + }); + this.showLoading = false; + } + ) + ) } - public deleteMenuItem() { - console.log('Delete menu item'); - } - - public newPageWindow() { - this.newPageWindowOpen = !this.newPageWindowOpen; + private deleteMenuItemFromArray(id: string, isChild: boolean = false) { + if(isChild) { + let i = this.getActiveRootItem(this.activeRootMenu).items.findIndex(_ => _._id == id); + this.getActiveRootItem(this.activeRootMenu).items.splice(i, 1); + } else { + let i = this.rootMenuItems.findIndex(_ => _._id == id); + this.rootMenuItems.splice(i, 1); + } } 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(this.menuItemForm.value, this.portal).subscribe( + menuItem => { + this.menuItemSavedSuccessfully(menuItem, true); + UIkit.notification('Menu item ' + menuItem.title + ' has been successfully created', { + status: 'success', + timeout: 6000, + pos: 'bottom-right' + }); + } + ) + ) + } else { + this.subscriptions.push( + this._helpContentService.updateMenuItem(this.menuItemForm.value, this.portal).subscribe( + menuItem => { + this.menuItemSavedSuccessfully(menuItem, false); + UIkit.notification('Menu item ' + menuItem.title + ' has been successfully updated', { + 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; - } - } } diff --git a/dashboard/sharedComponents/sidebar/sideBar.component.ts b/dashboard/sharedComponents/sidebar/sideBar.component.ts index 5fc26903..2d9f46f3 100644 --- a/dashboard/sharedComponents/sidebar/sideBar.component.ts +++ b/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) || - (subItem && this.activeItem === item.id && this.activeSubItem === subItem.id); + return (!subItem && this.activeItem === item._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]); diff --git a/services/help-content.service.ts b/services/help-content.service.ts index bd36763f..0b36f8d2 100644 --- a/services/help-content.service.ts +++ b/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>(properties.adminToolsAPIURL + properties.adminToolsPortalType + "/" + portalPid + "/menu/root/full") .pipe(catchError(this.handleError)); } + saveMenuItem(menuItem: MenuItem, portalPid: string) { + HelpContentService.removeNulls(menuItem); + + return this.http.post(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(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(properties.adminToolsAPIURL + properties.adminToolsPortalType + "/" + portalPid + "/menu/delete", menuItemId, CustomOptions.getAuthOptionsWithBody()) + .pipe(catchError(this.handleError)); + } + // unused getCommunities( helpContentUrl:string) { return this.http.get>(helpContentUrl + properties.adminToolsPortalType) diff --git a/sharedComponents/menu.ts b/sharedComponents/menu.ts index e95dbd2f..82662f30 100644 --- a/sharedComponents/menu.ts +++ b/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;