From 97fc6f033a5e0da2206d810591a50b48a716aedd Mon Sep 17 00:00:00 2001 From: Alex Martzios Date: Tue, 11 Jan 2022 12:05:40 +0200 Subject: [PATCH] add changes for pages and dynamic menus - dev only --- dashboard/menu/menu.component.html | 36 ++++---- dashboard/menu/menu.component.ts | 126 ++++++++++++++++++++++++---- dashboard/page/pages.component.html | 71 ++++++++-------- dashboard/page/pages.component.ts | 2 + sharedComponents/menu.ts | 6 +- utils/entities/adminTool/page.ts | 1 + 6 files changed, 168 insertions(+), 74 deletions(-) diff --git a/dashboard/menu/menu.component.html b/dashboard/menu/menu.component.html index 807e0906..1d96a974 100644 --- a/dashboard/menu/menu.component.html +++ b/dashboard/menu/menu.component.html @@ -4,12 +4,12 @@
    -
  • +
  • - + {{item.title}} - +
      @@ -30,7 +30,7 @@ - + Create new root menu @@ -60,18 +60,18 @@
    -
      -
    • +
        +
      • {{child.title}}
        -
        +
        URL: {{child.url}}
        -
        +
        Route: {{child.route}}
        @@ -93,7 +93,7 @@
      -
      No menu items found
      @@ -104,9 +104,9 @@ [okDisabled]="menuItemForm && (menuItemForm.invalid || !menuItemForm.dirty)">
      -
      +
      -
      +
      Select one of the pages
      @@ -118,17 +118,17 @@
      Create New Page
      - -
      -
      -
      + +
      +
      +
      - +
      diff --git a/dashboard/menu/menu.component.ts b/dashboard/menu/menu.component.ts index bcdb8df8..fd7d76a8 100644 --- a/dashboard/menu/menu.component.ts +++ b/dashboard/menu/menu.component.ts @@ -6,19 +6,26 @@ 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 {Subscriber, Subscription} 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 {MenuItem} from '../../sharedComponents/menu'; import {SearchInputComponent} from '../../sharedComponents/search-input/search-input.component'; +import {Page} from '../../utils/entities/adminTool/page'; +import {Option} from '../../sharedComponents/input/input.component'; declare var UIkit; @Component({ selector: 'menuSelector', templateUrl: './menu.component.html', + styles: [` + .z-index-2 { + z-index: 2; + } + `] }) export class MenuComponent implements OnInit { @@ -26,10 +33,13 @@ export class MenuComponent implements OnInit { @ViewChild('editModal') editModal: AlertModal; @ViewChild('deleteModal') deleteModal: AlertModal; - public activeRootMenu: string; + public activeRootMenuId: string; + public activeRootMenu: MenuItem; + public childrenMenuItems: MenuItem[] = []; private index: number; public menuItemForm: FormGroup; + public pageForm: FormGroup; public rootMenuItems = []; public menuItems = []; public allPages = []; @@ -44,9 +54,12 @@ export class MenuComponent implements OnInit { public showLoading = true; public isPortalAdministrator = null; public filterForm: FormGroup; - public typeOptions = [ + public typeOptions: Option[] = [ {label: 'Internal Link', value: 'internal'}, - {label: 'External Link', value: 'external'} + {label: 'External Link', value: 'external'}, + ] + public rootOnlyTypeOptions: Option[] = [ + {label: 'No Action', value: 'noAction'} ] public keyword: string = ''; @@ -55,6 +68,7 @@ export class MenuComponent implements OnInit { public properties: EnvProperties = properties; private subscriptions: any[] = []; + private typeSub: Subscription = null; constructor(private element: ElementRef, private route: ActivatedRoute, private _router: Router, private title: Title, @@ -94,15 +108,23 @@ export class MenuComponent implements OnInit { value(); } }); + this.destroyTypeSubscription(); } + destroyTypeSubscription() { + if(this.typeSub instanceof Subscriber) { + this.typeSub.unsubscribe(); + } + } + getMenuItems() { this.subscriptions.push( this._helpContentService.getMenuItems(this.portal).subscribe( data => { this.rootMenuItems = data; if(data && data.length > 0) { - this.activeRootMenu = data[0]['_id']; + // this.activeRootMenuId = data[0]['_id']; + this.changeActiveRootMenuItem(data[0]); } }, err => console.error("Server error fetching menu items: ", err) @@ -110,10 +132,25 @@ export class MenuComponent implements OnInit { ); } + getTypeOptions() { + if(this.isChild) { + return this.typeOptions; + } else { + return this.typeOptions.concat(this.rootOnlyTypeOptions); + } + } + getActiveRootItem(id: string): MenuItem { return this.rootMenuItems.find(element => element['_id'] == id); } + changeActiveRootMenuItem(item: MenuItem) { + this.activeRootMenuId = item['_id'] + this.activeRootMenu = item; + this.childrenMenuItems = item.items; + this.applyFilters(); + } + getPages() { this.subscriptions.push( this._helpContentService.getAllPages(this.properties.adminToolsAPIURL,this.portal).subscribe( @@ -133,19 +170,71 @@ export class MenuComponent implements OnInit { public newPageWindow() { this.newPageWindowOpen = !this.newPageWindowOpen; + this.pageForm = this._fb.group({ + _id: this._fb.control(null), + route: this._fb.control('', Validators.required), + name: this._fb.control('', Validators.required), + isEnabled: this._fb.control(true), + portalType: this._fb.control(this.properties.adminToolsPortalType, Validators.required), + portalPid: this._fb.control(this.portal), + top: this._fb.control(true), + bottom: this._fb.control(false), + left: this._fb.control(false), + right: this._fb.control(false), + type: this._fb.control('html', Validators.required), + entities: this._fb.control(['']) + }); + } + + public createPage() { + if(!this.pageForm.value.route.startsWith('/')) { + this.pageForm.value.route = '/'.concat(this.pageForm.value.route); + } + this.showLoading = true; + this.subscriptions.push( + this._helpContentService.savePage(this.pageForm.value, this.properties.adminToolsAPIURL).subscribe( + page => { + this.allPages.push({value: page.route, label: page.name}); + UIkit.notification('Page ' + page.name + ' has been successfully created', { + status: 'success', + timeout: 6000, + pos: 'bottom-right' + }); + this.newPageWindowOpen = !this.newPageWindowOpen; + this.menuItemForm.get('route').setValue(page.route); + } + ) + ); + } + + addValidatorForUrlOrRoute() { + this.destroyTypeSubscription(); + this.typeSub = this.menuItemForm.get('type').valueChanges.subscribe(value => { + setTimeout(() => { + // console.log(value); + if(value === "internal") { + this.menuItemForm.controls['route'].setValidators([Validators.required]); + this.menuItemForm.controls['route'].updateValueAndValidity(); + } else if(value === "external") { + this.menuItemForm.controls['url'].setValidators([Validators.required]); + this.menuItemForm.controls['url'].updateValueAndValidity(); + } + }, 0); + }); } public newMenuItem(isChild: boolean = false) { this.menuItemForm = this._fb.group({ _id: this._fb.control(""), title: this._fb.control("",Validators.required), - type: this._fb.control(""), + type: this._fb.control("",Validators.required), route: this._fb.control(""), url: this._fb.control(""), isEnabled: this._fb.control(""), - parentItemId: this._fb.control(isChild ? this.activeRootMenu : null) + parentItemId: this._fb.control(isChild ? this.activeRootMenuId : null) }); this.isChild = isChild; + this.addValidatorForUrlOrRoute(); this.menuItemsModalOpen('Create Menu Item', 'Create'); } @@ -153,21 +242,21 @@ export class MenuComponent implements OnInit { this.menuItemForm = this._fb.group({ _id: this._fb.control(menuItem['_id']), title: this._fb.control(menuItem.title,Validators.required), - type: this._fb.control(menuItem['type']), + type: this._fb.control(menuItem['type'],Validators.required), route: this._fb.control(menuItem.route), url: this._fb.control(menuItem.url), parentItemId: this._fb.control(menuItem['parentItemId']) }); this.isChild = isChild; if(this.isChild) { - this.index = this.getActiveRootItem(this.activeRootMenu).items.findIndex(value => value._id === menuItem['_id']); + this.index = this.getActiveRootItem(this.activeRootMenuId).items.findIndex(value => value._id === menuItem['_id']); } else { this.index = this.rootMenuItems.findIndex(value => value._id === menuItem['_id']); } + this.addValidatorForUrlOrRoute(); this.menuItemsModalOpen('Edit Menu Item', 'Save Changes'); } - public confirmDeleteMenuItem(id: string, isChild: boolean = false) { this.selectedMenuItem = id; this.isChild = isChild; @@ -202,12 +291,14 @@ export class MenuComponent implements OnInit { 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); + let i = this.getActiveRootItem(this.activeRootMenuId).items.findIndex(_ => _._id == id); + this.getActiveRootItem(this.activeRootMenuId).items.splice(i, 1); } else { let i = this.rootMenuItems.findIndex(_ => _._id == id); this.rootMenuItems.splice(i, 1); + this.changeActiveRootMenuItem(this.rootMenuItems[0]); } + this.applyFilters(); } private menuItemsModalOpen(title: string, yesBtn: string) { @@ -220,6 +311,7 @@ export class MenuComponent implements OnInit { } public menuItemSaveConfirmed(data: any) { + this.destroyTypeSubscription(); this.showLoading = true; if(!this.menuItemForm.value._id) { this.subscriptions.push( @@ -253,23 +345,23 @@ export class MenuComponent implements OnInit { public menuItemSavedSuccessfully(menuItem: MenuItem, isNew: boolean) { if(isNew) { if(this.isChild) { - this.getActiveRootItem(this.activeRootMenu).items.push(menuItem); + this.getActiveRootItem(this.activeRootMenuId).items.push(menuItem); } else { this.rootMenuItems.push(menuItem); } } else { if(this.isChild) { - this.getActiveRootItem(this.activeRootMenu).items[this.index] = menuItem; + this.getActiveRootItem(this.activeRootMenuId).items[this.index] = menuItem; } else { this.rootMenuItems[this.index] = menuItem; } } + this.applyFilters(); 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)); + this.childrenMenuItems = this.activeRootMenu.items.filter(item => item.title.toLowerCase().includes(this.searchText)); } public onSearchClose() { diff --git a/dashboard/page/pages.component.html b/dashboard/page/pages.component.html index f29a0f7a..9fb4796c 100644 --- a/dashboard/page/pages.component.html +++ b/dashboard/page/pages.component.html @@ -80,7 +80,7 @@ Portal type: {{check.page.portalType}}
-
+
Actions
@@ -136,39 +136,42 @@ type="text" placeholder="Write a name" label="Page Name">
-
-
-
-
-
-
-
Select if this page have helptext at:
-
-
-
-
-
-
-
-
-
-
- -
+ +
+
+
+
+
+
+
+
Select if this page have helptext at:
+
+
+
+
+
+
+
+
+
+
+ +
+ diff --git a/dashboard/page/pages.component.ts b/dashboard/page/pages.component.ts index f4c55b06..af631036 100644 --- a/dashboard/page/pages.component.ts +++ b/dashboard/page/pages.component.ts @@ -246,6 +246,7 @@ export class PagesComponent implements OnInit { name: this._fb.control(page.name, Validators.required), isEnabled: this._fb.control(page.isEnabled), portalType: this._fb.control(page.portalType, Validators.required), + portalPid: this._fb.control(page.portalPid), top: this._fb.control(page.top), bottom: this._fb.control(page.bottom), left: this._fb.control(page.left), @@ -271,6 +272,7 @@ export class PagesComponent implements OnInit { name: this._fb.control('', Validators.required), isEnabled: this._fb.control(true), portalType: this._fb.control('', Validators.required), + portalPid: this._fb.control(null), top: this._fb.control(true), bottom: this._fb.control(true), left: this._fb.control(true), diff --git a/sharedComponents/menu.ts b/sharedComponents/menu.ts index 82662f30..6e646186 100644 --- a/sharedComponents/menu.ts +++ b/sharedComponents/menu.ts @@ -1,6 +1,7 @@ export class MenuItem { _id: string = ""; // for root menu in order to close the dropdown when clicked title: string = ""; + type: string = "internal"; url: string = ""; // external url route: string = ""; // internal url - using angular routing and components routeActive: string = ""; // route to check if it is active @@ -82,8 +83,3 @@ export class SideMenuItem { items: RootMenuItem[] = []; ukIcon: string = ''; } - -export interface CheckMenuItem { - menuItem: MenuItem; - checked: boolean; -} diff --git a/utils/entities/adminTool/page.ts b/utils/entities/adminTool/page.ts index e9676e8c..faa666ed 100644 --- a/utils/entities/adminTool/page.ts +++ b/utils/entities/adminTool/page.ts @@ -7,6 +7,7 @@ export interface Page { type: string; isEnabled: boolean; portalType: string; + portalPid: string; entities: Entity[] | string[]; top: boolean; bottom: boolean;