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

progress on adding/removing parent option

This commit is contained in:
Alex Martzios 2022-07-18 16:25:19 +03:00
parent 019429e021
commit 8254edb477
2 changed files with 120 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,140 +38,142 @@
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
<div *ngIf="!showLoading" class="uk-grid" uk-grid>
<div #elements transition-group class="uk-width-3-4@m">
<div *ngFor="let item of displayMenuItems; let i = index;" transition-group-item>
<div class="uk-width-2-3@m uk-margin-bottom uk-padding-small menu-item">
<div class="uk-flex uk-flex-middle uk-flex-between">
<div>
{{item.title}}
</div>
<div class="uk-flex uk-flex-middle uk-flex-center">
<span *ngIf="item.type == 'external'" class="uk-text-meta uk-text-small uk-margin-small-right">External URL</span>
<span *ngIf="item.type == 'internal'" class="uk-text-meta uk-text-small uk-margin-small-right">Internal page</span>
<span *ngIf="item.type == 'noAction'" class="uk-text-meta uk-text-small uk-margin-small-right"></span>
<a class="uk-link-reset" (click)="toggleMenuItem(item)">
<icon *ngIf="!item.isOpen" name="arrow_drop_down" [flex]="true"></icon>
<icon *ngIf="item.isOpen" name="arrow_drop_up" [flex]="true"></icon>
</a>
</div>
</div>
<ng-container *ngIf="item.isOpen">
<div *ngIf="item.type != 'noAction'" class="uk-margin-medium-top uk-margin-medium-bottom">
<div class="uk-text-meta uk-text-small uk-margin-xsmall-bottom">
Target {{item.type == 'external' ? 'URL' : 'Route'}}
</div>
<div *ngIf="!showLoading">
<div class="uk-grid" uk-grid>
<div #elements transition-group class="uk-width-3-4@m">
<div *ngFor="let item of displayMenuItems; let i = index;" transition-group-item>
<div class="uk-width-2-3@m uk-margin-bottom uk-padding-small menu-item">
<div class="uk-flex uk-flex-middle uk-flex-between">
<div>
{{item.type == 'external' ? item.url : item.route}}
{{item.title}}
</div>
<div *ngIf="item.type == 'internal' && item.route && pageStatus != null && !pageStatus.get(item.route)" class="uk-text-small uk-text-warning uk-margin-small-top">
This menu item is not visible because the page is disabled
<div class="uk-flex uk-flex-middle uk-flex-center">
<span *ngIf="item.type == 'external'" class="uk-text-meta uk-text-small uk-margin-small-right">External URL</span>
<span *ngIf="item.type == 'internal'" class="uk-text-meta uk-text-small uk-margin-small-right">Internal page</span>
<span *ngIf="item.type == 'noAction'" class="uk-text-meta uk-text-small uk-margin-small-right"></span>
<a class="uk-link-reset" (click)="toggleMenuItem(item)">
<icon *ngIf="!item.isOpen" name="arrow_drop_down" [flex]="true"></icon>
<icon *ngIf="item.isOpen" name="arrow_drop_up" [flex]="true"></icon>
</a>
</div>
</div>
<div class="uk-flex uk-flex-middle uk-flex-center">
<button class="uk-button uk-button-link uk-flex uk-flex-middle uk-margin-medium-right" (click)="editMenuItem(i, item, false)">
<icon name="edit" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Edit</span>
</button>
<button class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="confirmDeleteMenuItem(item._id, false)">
<icon name="delete" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Delete</span>
</button>
</div>
<div *ngIf="displayMenuItems.length > 1" class="uk-margin-medium-top uk-flex uk-flex-middle uk-text-small">
<span class="uk-text-meta uk-margin-small-right">
Move:
</span>
<a *ngIf="i != 0" class="uk-link uk-link-text uk-margin-right"
(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>
<ng-container *ngIf="item.isOpen">
<div *ngIf="item.type != 'noAction'" class="uk-margin-medium-top uk-margin-medium-bottom">
<div class="uk-text-meta uk-text-small uk-margin-xsmall-bottom">
Target {{item.type == 'external' ? 'URL' : 'Route'}}
</div>
</a>
<a *ngIf="i != (displayMenuItems.length - 1)" class="uk-link uk-link-text"
(click)="moveElement(i, i + 1)">
<div class="uk-flex uk-flex-middle">
<icon name="south" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Down</span>
</div>
</a>
</div>
</ng-container>
</div>
<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-2-3@m uk-margin-bottom uk-padding-small menu-item">
<div class="uk-flex uk-flex-middle uk-flex-between">
<div>
{{subItem.title}}
{{item.type == 'external' ? item.url : item.route}}
</div>
<div class="uk-flex uk-flex-middle uk-flex-center">
<span *ngIf="subItem.type == 'external'" class="uk-text-meta uk-text-small uk-margin-small-right">External URL</span>
<span *ngIf="subItem.type == 'internal'" class="uk-text-meta uk-text-small uk-margin-small-right">Internal page</span>
<a class="uk-link-reset" (click)="toggleMenuItem(subItem)">
<icon *ngIf="!subItem.isOpen" name="arrow_drop_down" [flex]="true"></icon>
<icon *ngIf="subItem.isOpen" name="arrow_drop_up" [flex]="true"></icon>
</a>
<div *ngIf="item.type == 'internal' && item.route && pageStatus != null && !pageStatus.get(item.route)" class="uk-text-small uk-text-warning uk-margin-small-top">
This menu item is not visible because the page is disabled
</div>
</div>
<ng-container *ngIf="subItem.isOpen">
<div class="uk-margin-medium-top uk-margin-medium-bottom">
<div class="uk-text-meta uk-text-small uk-margin-xsmall-bottom">
Target {{subItem.type == 'external' ? 'URL' : 'Route'}}
<div class="uk-flex uk-flex-middle uk-flex-center">
<button class="uk-button uk-button-link uk-flex uk-flex-middle uk-margin-medium-right" (click)="editMenuItem(i, item, false)">
<icon name="edit" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Edit</span>
</button>
<button class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="confirmDeleteMenuItem(item._id, false)">
<icon name="delete" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Delete</span>
</button>
</div>
<div *ngIf="displayMenuItems.length > 1" class="uk-margin-medium-top uk-flex uk-flex-middle uk-text-small">
<span class="uk-text-meta uk-margin-small-right">
Move:
</span>
<a *ngIf="i != 0" class="uk-link uk-link-text uk-margin-right"
(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>
</div>
</a>
<a *ngIf="i != (displayMenuItems.length - 1)" class="uk-link uk-link-text"
(click)="moveElement(i, i + 1)">
<div class="uk-flex uk-flex-middle">
<icon name="south" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Down</span>
</div>
</a>
</div>
</ng-container>
</div>
<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-2-3@m uk-margin-bottom uk-padding-small menu-item">
<div class="uk-flex uk-flex-middle uk-flex-between">
<div>
{{subItem.type == 'external' ? subItem.url : subItem.route}}
{{subItem.title}}
</div>
<div class="uk-flex uk-flex-middle uk-flex-center">
<span *ngIf="subItem.type == 'external'" class="uk-text-meta uk-text-small uk-margin-small-right">External URL</span>
<span *ngIf="subItem.type == 'internal'" class="uk-text-meta uk-text-small uk-margin-small-right">Internal page</span>
<a class="uk-link-reset" (click)="toggleMenuItem(subItem)">
<icon *ngIf="!subItem.isOpen" name="arrow_drop_down" [flex]="true"></icon>
<icon *ngIf="subItem.isOpen" name="arrow_drop_up" [flex]="true"></icon>
</a>
</div>
</div>
<div class="uk-flex uk-flex-middle uk-flex-center">
<button class="uk-button uk-button-link uk-flex uk-flex-middle uk-margin-medium-right" (click)="editMenuItem(j, subItem, true)">
<icon name="edit" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Edit</span>
</button>
<button class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="confirmDeleteMenuItem(subItem._id, true, subItem.parentItemId)">
<icon name="delete" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Delete</span>
</button>
</div>
<div *ngIf="item.items.length > 1" class="uk-margin-medium-top uk-flex uk-flex-middle uk-text-small">
<span class="uk-text-meta uk-margin-small-right">
Move:
</span>
<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>
<ng-container *ngIf="subItem.isOpen">
<div class="uk-margin-medium-top uk-margin-medium-bottom">
<div class="uk-text-meta uk-text-small uk-margin-xsmall-bottom">
Target {{subItem.type == 'external' ? 'URL' : 'Route'}}
</div>
</a>
<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>
<div>
{{subItem.type == 'external' ? subItem.url : subItem.route}}
</div>
</a>
</div>
</ng-container>
</div>
<div class="uk-flex uk-flex-middle uk-flex-center">
<button class="uk-button uk-button-link uk-flex uk-flex-middle uk-margin-medium-right" (click)="editMenuItem(j, subItem, true)">
<icon name="edit" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Edit</span>
</button>
<button class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="confirmDeleteMenuItem(subItem._id, true, subItem.parentItemId)">
<icon name="delete" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Delete</span>
</button>
</div>
<div *ngIf="item.items.length > 1" class="uk-margin-medium-top uk-flex uk-flex-middle uk-text-small">
<span class="uk-text-meta uk-margin-small-right">
Move:
</span>
<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"
(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>
</div>
</a>
</div>
</ng-container>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-width-1-4@m">
<h6>Menu settings</h6>
<div class="uk-margin-small-bottom">
<label (click)="toggleMenu(true, selectedMenuType == 'normalMenu'? false : true )">
<input class="uk-radio" type="radio" name="menu" [checked]="(selectedMenuType == 'normalMenu' && showNormalMenu) || (selectedMenuType == 'customMenu' && showFeaturedMenu)">
<span class="uk-margin-small-left">Show menu</span>
</label>
</div>
<div>
<label (click)="toggleMenu(false, selectedMenuType == 'normalMenu'? false : true )">
<input class="uk-radio" type="radio" name="menu" [checked]="(selectedMenuType == 'normalMenu' && !showNormalMenu) || (selectedMenuType == 'customMenu' && !showFeaturedMenu)">
<span class="uk-margin-small-left">Hide menu</span>
</label>
<div *ngIf="displayMenuItems && displayMenuItems.length > 0" class="uk-width-1-4@m">
<h6>Menu settings</h6>
<div class="uk-margin-small-bottom">
<label (click)="toggleMenu(true, selectedMenuType == 'normalMenu'? false : true )">
<input class="uk-radio" type="radio" name="menu" [checked]="(selectedMenuType == 'normalMenu' && showNormalMenu) || (selectedMenuType == 'customMenu' && showFeaturedMenu)">
<span class="uk-margin-small-left">Show menu</span>
</label>
</div>
<div>
<label (click)="toggleMenu(false, selectedMenuType == 'normalMenu'? false : true )">
<input class="uk-radio" type="radio" name="menu" [checked]="(selectedMenuType == 'normalMenu' && !showNormalMenu) || (selectedMenuType == 'customMenu' && !showFeaturedMenu)">
<span class="uk-margin-small-left">Hide menu</span>
</label>
</div>
</div>
</div>
<div *ngIf="displayMenuItems && displayMenuItems.length == 0"

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

@ -287,6 +287,8 @@ export class MenuComponent implements OnInit {
} else {
let i = this.normalMenuItems.findIndex(_ => _._id == id);
this.normalMenuItems.splice(i, 1);
let j = this.parentOptions.findIndex(_ => _._id == id);
this.parentOptions.splice(j, 1);
}
}
}
@ -334,16 +336,15 @@ export class MenuComponent implements OnInit {
let i = this.normalMenuItems.findIndex(_ => _._id == menuItem['parentItemId']);
this.normalMenuItems[i].items.push(menuItem);
} else {
console.log('creating parent');
if(menuItem.isFeatured) {
this.featuredMenuItems.push(menuItem);
} else {
this.normalMenuItems.push(menuItem);
this.parentOptions.push({label: menuItem.title, value: menuItem._id});
}
}
} else {
if(menuItem['parentItemId']) {
// TODO: update
} else {
if(menuItem.isFeatured) {
this.featuredMenuItems[this.index] = menuItem;