MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

reordering of children menu items (for admin users)

This commit is contained in:
Alex Martzios 2022-07-15 15:24:23 +03:00
parent 13a3590559
commit facb821605
2 changed files with 26 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
dashboard/menu/menu.component.html
View File

@ -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>

25
dashboard/menu/menu.component.ts
View File

@ -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);