Work in progress for new dymanic menu - dev only
This commit is contained in:
parent
edad40ad0b
commit
0cddbdf857
|
|
@ -31,13 +31,53 @@
|
|||
<icon name="add"></icon>
|
||||
</span>
|
||||
<span class="space uk-hidden-hover">
|
||||
Create new menu item
|
||||
Create new root menu
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</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 inner>
|
||||
<div *ngIf="showLoading" class="uk-position-center">
|
||||
|
|
@ -45,11 +85,6 @@
|
|||
</div>
|
||||
<div *ngIf="!showLoading">
|
||||
<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">
|
||||
<div class="uk-grid uk-grid-divider uk-padding" uk-grid>
|
||||
<div class="uk-width-4-5">
|
||||
|
|
@ -85,8 +120,11 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<modal-alert #editModal>
|
||||
<form>
|
||||
|
||||
<modal-alert #editModal [okDisabled]="menuItemForm && (menuItemForm.invalid || menuItemForm.dirty)">
|
||||
<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>
|
||||
</modal-alert>
|
||||
|
|
@ -11,6 +11,8 @@ 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 {CheckMenuItem, MenuItem} from '../../sharedComponents/menu';
|
||||
import {SearchInputComponent} from '../../sharedComponents/search-input/search-input.component';
|
||||
|
||||
|
||||
@Component({
|
||||
|
|
@ -19,8 +21,17 @@ import {AlertModal} from '../../utils/modal/alert';
|
|||
})
|
||||
export class MenuComponent implements OnInit {
|
||||
|
||||
@ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
|
||||
@ViewChild('editModal') editModal: AlertModal;
|
||||
@ViewChild('deleteModal') deleteModal: AlertModal;
|
||||
private selectedMenuItems: string[] = [];
|
||||
|
||||
public checkboxes: CheckMenuItem[] = [];
|
||||
|
||||
public menuItems: MenuItem[] = [];
|
||||
|
||||
// public rootMenuForm: FormGroup;
|
||||
public menuItemForm: FormGroup;
|
||||
|
||||
public keyword = '';
|
||||
|
||||
|
|
@ -32,6 +43,11 @@ export class MenuComponent implements OnInit {
|
|||
public showLoading = true;
|
||||
public isPortalAdministrator = null;
|
||||
public filterForm: FormGroup;
|
||||
public typeOptions = [
|
||||
{label: 'Internal Link', value: 'internal'},
|
||||
{label: 'External Link', value: 'external'}
|
||||
]
|
||||
public selectedKeyword: string;
|
||||
private subscriptions: any[] = [];
|
||||
|
||||
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() {
|
||||
console.log('Edit menu item');
|
||||
this.menuItemsModalOpen('Edit Menu Item', 'Save Changers');
|
||||
this.menuItemForm = this._fb.group({
|
||||
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() {
|
||||
|
|
@ -86,4 +149,24 @@ export class MenuComponent implements OnInit {
|
|||
this.editModal.okButtonText = yesBtn;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -82,3 +82,8 @@ export class SideMenuItem {
|
|||
items: RootMenuItem[] = [];
|
||||
ukIcon: string = '';
|
||||
}
|
||||
|
||||
export interface CheckMenuItem {
|
||||
menuItem: MenuItem;
|
||||
checked: boolean;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue