Work in progress for new dymanic menu - dev only

This commit is contained in:
Alex Martzios 2021-12-17 09:22:07 +02:00
parent edad40ad0b
commit 0cddbdf857
3 changed files with 137 additions and 11 deletions

View File

@ -31,13 +31,53 @@
<icon name="add"></icon> <icon name="add"></icon>
</span> </span>
<span class="space uk-hidden-hover"> <span class="space uk-hidden-hover">
Create new menu item Create new root menu
</span> </span>
</span> </span>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid uk-margin-remove-top" uk-grid>
<div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search menu item"
[selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()"
[bordered]="true" colorClass="uk-text-secondary"
class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
<div>
<a (click)="newMenuItem()" class="uk-flex uk-flex-middle uk-text-uppercase">
<button class="large uk-icon-button uk-button-secondary">
<icon name="add"></icon>
</button>
<button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">
Add new menu item
</button>
</a>
</div>
</div>
<!-- Not currently working -->
<div *ngIf="!showLoading && checkboxes.length > 0" class="uk-padding
uk-padding-remove-bottom uk-padding-remove-top uk-margin-remove-top uk-margin-small-bottom uk-display-inline"
[attr.uk-tooltip]="getSelectedMenuItems().length == 0 ? 'pos:left; cls: uk-active' : null"
title="Select at least one menu item">
<input id="checkAll" type="checkbox" (click)="selectAll()" [ngModel]="getSelectedMenuItems().length == checkboxes.length"/>
<span *ngIf="getSelectedMenuItems().length > 0" class="uk-margin-left uk-text-muted"> {{getSelectedMenuItems().length}} menu items selected </span>
<a class="uk-margin-left">Actions</a>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav"
[attr.uk-tooltip]="getSelectedMenuItems().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one page">
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedMenuItems().length == 0 ? 'uk-disabled' : ''"
(click)="toggleMenuItems(true,getSelectedMenuItems())"><i></i> Enable
</a></li>
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedMenuItems().length == 0 ? 'uk-disabled' : ''"
(click)="toggleMenuItems(false,getSelectedMenuItems())"><i></i> Disable
</a>
</li>
<li *ngIf="isPortalAdministrator"><a [class]="getSelectedMenuItems().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedMenuItems()"><i></i> Delete </a></li>
</ul>
</div>
</div>
</div> </div>
<div inner> <div inner>
<div *ngIf="showLoading" class="uk-position-center"> <div *ngIf="showLoading" class="uk-position-center">
@ -45,11 +85,6 @@
</div> </div>
<div *ngIf="!showLoading"> <div *ngIf="!showLoading">
<ul class="uk-list submenu-items"> <ul class="uk-list submenu-items">
<!-- <li class="uk-card uk-card-default uk-margin-bottom">
<div class="uk-grid uk-grid-divider uk-padding" uk-grid>
Submenu item 1
</div>
</li> -->
<li class="uk-card uk-card-default uk-margin-bottom"> <li class="uk-card uk-card-default uk-margin-bottom">
<div class="uk-grid uk-grid-divider uk-padding" uk-grid> <div class="uk-grid uk-grid-divider uk-padding" uk-grid>
<div class="uk-width-4-5"> <div class="uk-width-4-5">
@ -85,8 +120,11 @@
</div> </div>
</div> </div>
</div> </div>
<modal-alert #editModal> <modal-alert #editModal [okDisabled]="menuItemForm && (menuItemForm.invalid || menuItemForm.dirty)">
<form> <form *ngIf="menuItemForm" [formGroup]="menuItemForm" class="uk grid uk-child-width-1-1" uk-grid>
<div dashboard-input [formInput]="menuItemForm.get('name')" type="text" label="Name" placeholder="Write a name"></div>
<div dashboard-input [formInput]="menuItemForm.get('type')" type="select" label="Type" placeholder="Choose a type" [options]="typeOptions"></div>
<div dashboard-input [formInput]="menuItemForm.get('route')" type="text" label="Route" placeholder="Write a route"></div>
<div dashboard-input [formInput]="menuItemForm.get('url')" type="text" label="URL" placeholder="Write a URL"></div>
</form> </form>
</modal-alert> </modal-alert>

View File

@ -11,6 +11,8 @@ import {properties} from "../../../../environments/environment";
import {StringUtils} from "../../utils/string-utils.class"; import {StringUtils} from "../../utils/string-utils.class";
import {Title} from "@angular/platform-browser"; import {Title} from "@angular/platform-browser";
import {AlertModal} from '../../utils/modal/alert'; import {AlertModal} from '../../utils/modal/alert';
import {CheckMenuItem, MenuItem} from '../../sharedComponents/menu';
import {SearchInputComponent} from '../../sharedComponents/search-input/search-input.component';
@Component({ @Component({
@ -19,8 +21,17 @@ import {AlertModal} from '../../utils/modal/alert';
}) })
export class MenuComponent implements OnInit { export class MenuComponent implements OnInit {
@ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
@ViewChild('editModal') editModal: AlertModal; @ViewChild('editModal') editModal: AlertModal;
@ViewChild('deleteModal') deleteModal: AlertModal; @ViewChild('deleteModal') deleteModal: AlertModal;
private selectedMenuItems: string[] = [];
public checkboxes: CheckMenuItem[] = [];
public menuItems: MenuItem[] = [];
// public rootMenuForm: FormGroup;
public menuItemForm: FormGroup;
public keyword = ''; public keyword = '';
@ -32,6 +43,11 @@ export class MenuComponent implements OnInit {
public showLoading = true; public showLoading = true;
public isPortalAdministrator = null; public isPortalAdministrator = null;
public filterForm: FormGroup; public filterForm: FormGroup;
public typeOptions = [
{label: 'Internal Link', value: 'internal'},
{label: 'External Link', value: 'external'}
]
public selectedKeyword: string;
private subscriptions: any[] = []; private subscriptions: any[] = [];
constructor(private element: ElementRef, private route: ActivatedRoute, constructor(private element: ElementRef, private route: ActivatedRoute,
@ -68,10 +84,57 @@ export class MenuComponent implements OnInit {
} }
}); });
} }
// public newRootMenu() {
// this.rootMenuForm = this._fb.group({
// id: this._fb.control(null),
// title: this._fb.control("",Validators.required),
// route: this._fb.control(""),
// isEnabled: this._fb.control("",Validators.required),
// });
// this.menuItemsModalOpen('Create Root Menu', 'Save Changes');
// }
public getSelectedMenuItems(): string[] {
return this.checkboxes.filter(menuItem => menuItem.checked == true).map(checkedMenuItem => checkedMenuItem.menuItem).map(res => res.id);
}
public confirmDeleteSelectedMenuItems() {
this.selectedMenuItems = this.getSelectedMenuItems();
this.confirmModalOpen();
}
private confirmModalOpen() {
this.deleteModal.cancelButton = true;
this.deleteModal.okButton = true;
this.deleteModal.alertTitle = 'Delete Confirmation';
this.deleteModal.message = 'Are you sure you want to delete the selected menu item(s)?';
this.deleteModal.okButtonText = 'Yes';
this.deleteModal.open();
}
public newMenuItem() {
this.menuItemForm = this._fb.group({
id: this._fb.control(""),
title: this._fb.control("",Validators.required),
type: this._fb.control("",Validators.required),
route: this._fb.control(""),
url: this._fb.control(""),
isEnabled: this._fb.control("",Validators.required),
});
this.menuItemsModalOpen('Create Menu Item', 'Save Changes');
}
public editMenuItem() { public editMenuItem() {
console.log('Edit menu item'); this.menuItemForm = this._fb.group({
this.menuItemsModalOpen('Edit Menu Item', 'Save Changers'); id: this._fb.control("id"),
title: this._fb.control("HardcodedName",Validators.required),
type: this._fb.control("internal",Validators.required),
route: this._fb.control("routeAlex"),
url: this._fb.control("urlAlex"),
isEnabled: this._fb.control("enabled",Validators.required),
});
this.menuItemsModalOpen('Edit Menu Item', 'Save Changes');
} }
public deleteMenuItem() { public deleteMenuItem() {
@ -86,4 +149,24 @@ export class MenuComponent implements OnInit {
this.editModal.okButtonText = yesBtn; this.editModal.okButtonText = yesBtn;
this.editModal.open(); this.editModal.open();
} }
public toggleMenuItems(status: boolean, ids: string[]) {
}
public onSearchClose() {
this.selectedKeyword = this.filterForm.value;
}
public reset() {
this.selectedKeyword = null;
this.searchInputComponent.reset();
}
selectAll() {
let checked = this.getSelectedMenuItems().length != this.checkboxes.length;
for (let check of this.checkboxes) {
check.checked = checked;
}
}
} }

View File

@ -82,3 +82,8 @@ export class SideMenuItem {
items: RootMenuItem[] = []; items: RootMenuItem[] = [];
ukIcon: string = ''; ukIcon: string = '';
} }
export interface CheckMenuItem {
menuItem: MenuItem;
checked: boolean;
}