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

finish menu & featured menu items

This commit is contained in:
Alex Martzios 2022-07-18 13:07:03 +03:00
parent f38c56fa7d
commit 0f80797035
2 changed files with 32 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -57,7 +57,7 @@
</div>
</div>
<ng-container *ngIf="item.isOpen">
<div *ngIf="item.type != 'noAction '" class="uk-margin-medium-top uk-margin-medium-bottom">
<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>
@ -129,7 +129,7 @@
<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)">
<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>
@ -173,11 +173,11 @@
<div input [formInput]="menuItemForm.get('title')" type="text"
placeholder="Name"></div>
<!-- Selecting parent of menu item -->
<!-- <div input [formInput]="menuItemForm.get('title')" type="autocomplete" *ngIf="isPortalAdministrator"
placeholder="Parent"></div> -->
<div input *ngIf="selectedMenuType == 'normalMenu' && isPortalAdministrator" [formInput]="menuItemForm.get('parentItemId')" type="select"
placeholder="Parent" [options]="parentOptions" [tooltip]="false"></div>
<!-- Selecting type of menu item -->
<div input [formInput]="menuItemForm.get('type')" type="select" placeholder="Type"
[options]="getTypeOptions(menuItemForm.get('isFeatured').value)" [tooltip]="false"></div>
[options]="getTypeOptions(menuItemForm.get('isFeatured').value, menuItemForm.get('parentItemId').value)" [tooltip]="false"></div>
<!-- Workflow for EXTERNAL -->
<div input *ngIf="menuItemForm.get('type').value === 'external'" [formInput]="menuItemForm.get('url')"
[validators]="menuItemForm.get('url').validator" type="URL" placeholder="URL"></div>
@ -192,12 +192,12 @@
<span class="uk-text-warning">The item is not used because the required page is disabled</span>
</div>
</div>
<div class="uk-flex" *ngIf="isPortalAdministrator">
<!-- <div class="uk-flex" *ngIf="isPortalAdministrator">
<div class="uk-form-label uk-margin-small-right">Featured</div>
<mat-slide-toggle [formControl]="menuItemForm.get('isFeatured')"
uk-tooltip="title:<div class='uk-width-large'><div class='uk-text-bold '>Enable this to show your custom menu item in the community-specific navigation bar.</div><div class=' uk-margin-top'>If disabled, your custom menu item will appear in the default navigation bar.</div><div class=' uk-margin-top'>*Note that featured menu items can't have any children menu items(as a dropdown).</div></div>">
</mat-slide-toggle>
</div>
</div> -->
</form>
</modal-alert>
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeleteMenuItem($event)" classTitle="uk-background-primary uk-light"></modal-alert>

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

@ -38,8 +38,6 @@ export class MenuComponent implements OnInit {
private index: number;
public activeRootMenuId: string;
public menuItemForm: FormGroup;
public pageForm: FormGroup;
public menuTypes = [
@ -47,13 +45,14 @@ export class MenuComponent implements OnInit {
{label: 'Custom Menu', value: 'customMenu'}
];
public selectedMenuType = this.menuTypes[0].value;
public rootMenuItems = [];
public normalMenuItems = [];
public featuredMenuItems = [];
public allPages = [];
public parentOptions = [];
public pageStatus: Map<string,boolean> = null;
public selectedMenuItem: string;
public selectedMenuItemParent: string;
public isChild: boolean = false;
public communities: Portal[] = [];
@ -147,6 +146,7 @@ export class MenuComponent implements OnInit {
this.featuredMenuItems = data.featuredMenuItems;
this.normalMenuItems = data.menuItems;
this.getPages();
this.getParentOptions();
this.showLoading = false;
},
error => this.handleError("Server error fetching menu items", error)
@ -154,8 +154,8 @@ export class MenuComponent implements OnInit {
);
}
getTypeOptions(isFeatured: boolean = false) {
if(this.isChild) {
getTypeOptions(isFeatured: boolean = false, parentItem) {
if(this.isChild || parentItem != '') {
return this.typeOptions;
} else {
if(isFeatured || !this.isPortalAdministrator) {
@ -184,6 +184,15 @@ export class MenuComponent implements OnInit {
);
}
getParentOptions() {
this.normalMenuItems.forEach(item => {
if(item.items?.length || item.parentItemId != null || item.parentItemId != '') {
this.parentOptions.push({label: item.title, value: item._id});
}
});
this.parentOptions.unshift({label: 'No parent', value: ''});
}
addValidatorForUrlOrRoute() {
this.destroyTypeSubscription();
this.typeSub = this.menuItemForm.get('type').valueChanges.subscribe(value => {
@ -201,7 +210,7 @@ export class MenuComponent implements OnInit {
});
}
public newMenuItem(isChild: boolean = false) {
public newMenuItem() {
this.menuItemForm = this._fb.group({
_id: this._fb.control(""),
title: this._fb.control("",Validators.required),
@ -210,9 +219,8 @@ export class MenuComponent implements OnInit {
url: this._fb.control(""),
isEnabled: this._fb.control(""),
isFeatured: this._fb.control(this.selectedMenuType == 'customMenu' ? true : false),
parentItemId: this._fb.control(isChild ? this.activeRootMenuId : null)
parentItemId: this._fb.control("")
});
this.isChild = isChild;
this.addValidatorForUrlOrRoute();
this.menuItemsModalOpen('Add Menu Item', 'Create');
}
@ -233,7 +241,8 @@ export class MenuComponent implements OnInit {
this.menuItemsModalOpen('Edit Menu Item', 'Save Changes');
}
public confirmDeleteMenuItem(id: string, isChild: boolean = false) {
public confirmDeleteMenuItem(id: string, isChild: boolean = false, parentId: string) {
this.selectedMenuItemParent = parentId;
this.selectedMenuItem = id;
this.isChild = isChild;
this.confirmModalOpen();
@ -263,8 +272,9 @@ export class MenuComponent implements OnInit {
private deleteMenuItemFromArray(id: string, isChild: boolean = false) {
if(isChild) {
// let i = this.getActiveRootItem(this.activeRootMenuId).items.findIndex(_ => _._id == id);
// this.getActiveRootItem(this.activeRootMenuId).items.splice(i, 1);
let i = this.normalMenuItems.findIndex(_ => _._id == this.selectedMenuItemParent);
let j = this.normalMenuItems[i].items.findIndex(_ => _._id == id);
this.normalMenuItems[i].items.splice(j, 1);
} else {
if(this.selectedMenuType == 'customMenu') {
let i = this.featuredMenuItems.findIndex(_ => _._id == id);
@ -315,8 +325,11 @@ export class MenuComponent implements OnInit {
public menuItemSavedSuccessfully(menuItem: MenuItem, isNew: boolean) {
if(isNew) {
if(menuItem['parentItemId']) {
// this.getActiveRootItem(this.activeRootMenuId).items.push(menuItem);
console.log('creating child');
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 {
@ -325,7 +338,6 @@ export class MenuComponent implements OnInit {
}
} else {
if(menuItem['parentItemId']) {
// this.getActiveRootItem(this.activeRootMenuId).items[this.index] = menuItem;
} else {
if(menuItem.isFeatured) {
this.featuredMenuItems[this.index] = menuItem;