reordering of children menu items (for admin users)

dashboard/menu/menu.component.html

@@ -18,7 +18,7 @@
 			<div class="uk-flex uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid
 				[class]="isPortalAdministrator ? 'uk-flex-between@m':'uk-flex-right@m'">
 				<div>
-					<div input inputClass="border-bottom" type="select" [options]="menuTypes" [(value)]="selectedMenuType"
+					<div input inputClass="border-bottom" type="select" [options]="menuTypes" [(value)]="selectedMenuType" (valueChange)="valueChange()"
 						*ngIf="isPortalAdministrator"></div>
 				</div>
 				<div>
@@ -83,7 +83,7 @@
 										Move:
 									</span>
 									<a *ngIf="i != 0" class="uk-link uk-link-text uk-margin-right"
-										(click)="moveElement(i)">
+										(click)="moveElement(i, i - 1)">
 										<div class="uk-flex uk-flex-middle">
 											<icon name="north" [flex]="true"></icon>
 											<span class="uk-margin-xsmall-left">Up</span>
@@ -99,7 +99,7 @@
 								</div>
 							</ng-container>
 						</div>
-						<div *ngIf="item.type == 'noAction' && item.items && item.items.length"  transition-group>
+						<div *ngIf="item.items && item.items.length"  #subElements transition-group>
 							<div *ngFor="let subItem of item.items; let j = index" transition-group-item>
 								<div class="uk-margin-medium-left uk-width-1-2@m uk-margin-bottom uk-padding-small menu-item">
 									<div class="uk-flex uk-flex-middle uk-flex-between">
@@ -138,13 +138,15 @@
 											<span class="uk-text-meta uk-margin-small-right">
 												Move:
 											</span>
-											<a *ngIf="j != 0" class="uk-link uk-link-text uk-margin-right">
+											<a *ngIf="j != 0" class="uk-link uk-link-text uk-margin-right"
+												(click)="moveElement(j, j - 1, item.items)">
 												<div class="uk-flex uk-flex-middle">
 													<icon name="north" [flex]="true"></icon>
 													<span class="uk-margin-xsmall-left">Up</span>
 												</div>
 											</a>
-											<a *ngIf="j != (item.items.length - 1)" class="uk-link uk-link-text">
+											<a *ngIf="j != (item.items.length - 1)" class="uk-link uk-link-text"
+												(click)="moveElement(j, j + 1, item.items)">
 												<div class="uk-flex uk-flex-middle">
 													<icon name="south" [flex]="true"></icon>
 													<span class="uk-margin-xsmall-left">Down</span>

dashboard/menu/menu.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {HelpContentService} from '../../services/help-content.service';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@@ -11,7 +11,7 @@ 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 {MenuItem} from '../../sharedComponents/menu';
+import {MenuItem, MenuItemExtended} from '../../sharedComponents/menu';
 import {SearchInputComponent} from '../../sharedComponents/search-input/search-input.component';
 import {Option} from '../../sharedComponents/input/input.component';
 import {CommunityInfo} from '../../connect/community/communityInfo';
@@ -34,6 +34,7 @@ export class MenuComponent implements OnInit {
 	@ViewChild('editModal') editModal: AlertModal;
 	@ViewChild('deleteModal') deleteModal: AlertModal;
 	@ViewChild("elements") elements: TransitionGroupComponent;
+	@ViewChild("subElements") subElements: TransitionGroupComponent;
 
 	private index: number;
 
@@ -83,7 +84,8 @@ export class MenuComponent implements OnInit {
               private userManagementService: UserManagementService, private _fb: FormBuilder,
 							private stakeholderService: StakeholderService,
 							private communityService: CommunityService,
-							private _clearCacheService: ClearCacheService) {
+							private _clearCacheService: ClearCacheService,
+							private cdr: ChangeDetectorRef) {
   }
   
   ngOnInit() {
@@ -116,7 +118,7 @@ export class MenuComponent implements OnInit {
       } else {
         this.title.setTitle('Administrator Dashboard | Menu');
       }
-      this.isPortalAdministrator = !Session.isPortalAdministrator(user);
+      this.isPortalAdministrator = Session.isPortalAdministrator(user);
 			this.selectedMenuType = this.isPortalAdministrator ? this.menuTypes[0].value : this.menuTypes[1].value;
     });
   }
@@ -345,12 +347,20 @@ export class MenuComponent implements OnInit {
 		menuItem.isOpen = !menuItem.isOpen;
 	}
 
+	public valueChange() {
+		this.elements.disable();
+		this.cdr.detectChanges();
+		this.elements.init();
+		this.elements.enable();
+	}
+
 	public get displayMenuItems() {
 		return this.selectedMenuType == 'customMenu' ? this.featuredMenuItems : this.normalMenuItems;
 	}
 
-	public moveElement(index: number, newIndex: number = index -1) {
+	public moveElement(index: number, newIndex: number, children: MenuItemExtended[] = []) {
 		this.elements.init();
+		this.subElements.init();
 		if(this.selectedMenuType == 'customMenu') {
 			let temp = HelperFunctions.copy(this.featuredMenuItems);
 			HelperFunctions.swap(temp, index, newIndex);
@@ -362,9 +372,12 @@ export class MenuComponent implements OnInit {
 			});
 		} else {
 			let temp = HelperFunctions.copy(this.normalMenuItems);
+			if(children && children.length) {
+				temp = HelperFunctions.copy(children);
+			}
 			HelperFunctions.swap(temp, index, newIndex);
 			this._helpContentService.reorderMenuItems(temp, this.portal).subscribe(() => {
-				HelperFunctions.swap(this.normalMenuItems, index, newIndex);
+				HelperFunctions.swap(children && children.length ? children : this.normalMenuItems, index, newIndex);
 				this._clearCacheService.clearCache("Menu items reordered");
 			}, error => {
 				this.handleError("System error reordering menu items", error);