diff --git a/dashboard/menu/menu-routing.module.ts b/dashboard/menu/menu-routing.module.ts new file mode 100644 index 00000000..616f6358 --- /dev/null +++ b/dashboard/menu/menu-routing.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; +import {RouterModule} from '@angular/router'; +import {MenuComponent} from "./menu.component"; + +@NgModule({ + imports: [ + RouterModule.forChild([ + { path: '',component: MenuComponent} + ]) + ] +}) +export class MenuRoutingModule { } diff --git a/dashboard/menu/menu.component.html b/dashboard/menu/menu.component.html new file mode 100644 index 00000000..3587fd8d --- /dev/null +++ b/dashboard/menu/menu.component.html @@ -0,0 +1,137 @@ +
+
+ +
+
+ +
+
+
+
+
+ + + + +
+
+ +
+ + {{getSelectedMenuItems().length}} menu items selected + Actions +
+ +
+
+
+
+
+ +
+
+
    +
  • +
    +
    +
    +
    + +
    +
    + Name and info +
    +
    + Additional info +
    +
    +
    +
    +
    +
    +
    + + Edit +
    +
    + + Delete +
    +
    +
    +
    +
    +
    • +
+
+
+
+ +
+
+
+ +
+ +
+
Select one of the pages
+
+
+
Or create a new one
+
+
+ \ No newline at end of file diff --git a/dashboard/menu/menu.component.ts b/dashboard/menu/menu.component.ts new file mode 100644 index 00000000..6be41581 --- /dev/null +++ b/dashboard/menu/menu.component.ts @@ -0,0 +1,192 @@ +import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; +import {ActivatedRoute, Router} from '@angular/router'; +import {HelpContentService} from '../../services/help-content.service'; +import {FormBuilder, FormGroup, Validators} from '@angular/forms'; +import {Portal} from '../../utils/entities/adminTool/portal'; +import {EnvProperties} from '../../utils/properties/env-properties'; +import {Session} from '../../login/utils/helper.class'; +import {UserManagementService} from '../../services/user-management.service'; +import {Subscriber} from "rxjs"; +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'; +import {Option} from '../../sharedComponents/input/input.component'; + + +@Component({ + selector: 'menuSelector', + templateUrl: './menu.component.html', +}) +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 allPages = []; + + public keyword = ''; + + public communities: Portal[] = []; + public portal: string; + + public properties: EnvProperties = properties; + + 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, + private _router: Router, private title: Title, + private _helpContentService: HelpContentService, + private userManagementService: UserManagementService, private _fb: FormBuilder) { + } + + ngOnInit() { + this.filterForm = this._fb.group({ + keyword: [''], + status: ['resources', Validators.required] + }); + 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) { + this.title.setTitle(StringUtils.capitalize(this.portal) + ' | Menu'); + } else if (this.route.snapshot.params[this.route.snapshot.data.param]) { + this.title.setTitle(this.portal.toUpperCase() + ' | Menu'); + } else { + this.title.setTitle('Administrator Dashboard | Menu'); + } + this.isPortalAdministrator = Session.isPortalAdministrator(user) && !this.portal; + }); + this.showLoading = false; + } + + ngOnDestroy(): void { + this.subscriptions.forEach(value => { + if (value instanceof Subscriber) { + value.unsubscribe(); + } else if (value instanceof Function) { + value(); + } + }); + } + + 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); + } + + 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() { + 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() { + console.log('Delete menu item'); + } + + private menuItemsModalOpen(title: string, yesBtn: string) { + this.editModal.cancelButton = true; + this.editModal.okButton = true; + this.editModal.okButtonLeft = false; + this.editModal.alertTitle = title; + this.editModal.okButtonText = yesBtn; + this.editModal.open(); + } + + public toggleMenuItems(status: boolean, ids: string[]) { + + } + + public onSearchClose() { + this.selectedKeyword = this.filterForm.get('keyword').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/dashboard/menu/menu.module.ts b/dashboard/menu/menu.module.ts new file mode 100644 index 00000000..450812d8 --- /dev/null +++ b/dashboard/menu/menu.module.ts @@ -0,0 +1,31 @@ +import {NgModule} from '@angular/core'; +import {RouterModule} from '@angular/router'; +import {CommonModule} from '@angular/common'; +import {MenuComponent} from './menu.component'; +import {FormsModule, ReactiveFormsModule} from '@angular/forms'; +import {AlertModalModule} from '../../utils/modal/alertModal.module'; +import {MatSlideToggleModule} from '@angular/material/slide-toggle'; +import {AdminToolServiceModule} from "../../services/adminToolService.module"; +import {InputModule} from "../../sharedComponents/input/input.module"; +import {PageContentModule} from "../sharedComponents/page-content/page-content.module"; +import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module"; +import {MenuRoutingModule} from "./menu-routing.module"; +import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module"; +import {IconsModule} from "../../utils/icons/icons.module"; +import {IconsService} from "../../utils/icons/icons.service"; +import {add} from "../../utils/icons/icons"; +import {LoadingModule} from "../../utils/loading/loading.module"; + +@NgModule({ + imports: [ + CommonModule, RouterModule, FormsModule, AdminToolServiceModule, + AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, InputModule, PageContentModule, AdminTabsModule, MenuRoutingModule, SearchInputModule, IconsModule, LoadingModule + ], + declarations: [MenuComponent], + exports: [MenuComponent] +}) +export class MenuModule { + constructor(private iconsService: IconsService) { + this.iconsService.registerIcons([add]); + } +} diff --git a/dashboard/sharedComponents/admin-tabs/admin-tabs.component.ts b/dashboard/sharedComponents/admin-tabs/admin-tabs.component.ts index dd439154..2fc24a99 100644 --- a/dashboard/sharedComponents/admin-tabs/admin-tabs.component.ts +++ b/dashboard/sharedComponents/admin-tabs/admin-tabs.component.ts @@ -3,7 +3,7 @@ import {Session, User} from "../../../login/utils/helper.class"; import {UserManagementService} from "../../../services/user-management.service"; import {Subscriber} from "rxjs"; import {ActivatedRoute} from "@angular/router"; -import {HelperFunctions} from "../../../utils/HelperFunctions.class"; +import { properties } from 'src/environments/environment'; @Component({ selector: 'admin-tabs', @@ -12,6 +12,7 @@ import {HelperFunctions} from "../../../utils/HelperFunctions.class";
  • Portals
  • Pages
  • Entities
    • +
  • Menu
  • Classes
    • ` @@ -25,7 +26,9 @@ export class AdminTabsComponent implements OnInit { @Input() public user: User; @Input() - public tab: "portal"| "page" | "entity" | "class" = 'page'; + public tab: "portal" | "page" | "entity" | "menu" | "class" = 'page'; + + public env = properties.environment; private subscriptions: any[] = []; constructor(private route: ActivatedRoute, private userManagementService: UserManagementService) { diff --git a/services/help-content.service.ts b/services/help-content.service.ts index 7f0635a7..4fd3d156 100644 --- a/services/help-content.service.ts +++ b/services/help-content.service.ts @@ -252,8 +252,8 @@ export class HelpContentService { .pipe(catchError(this.handleError)); } // End of replacing part of getPages (now getAllPages) - - getAllPages(helpContentUrl:string) {//,pid:string,with_positions:boolean=null) { +//TODO double check with konstantina - there is no param that we are asking the community pages. without pid we get all portalTypes + getAllPages(helpContentUrl:string, pid:string = null) {//with_positions:boolean=null) { // let parameters: string = ""; // if(pid || with_positions == true || with_positions == false) { // parameters = "?"; @@ -264,7 +264,7 @@ export class HelpContentService { // parameters += "&with_positions="+with_positions; // } // } - return this.http.get>(helpContentUrl + 'page') + return this.http.get>(helpContentUrl + 'page' + (pid?"pid="+pid:"")) //.map(res => > res.json()) .pipe(catchError(this.handleError)); } 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; +}