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

Progress on dynamic menu - dev only

This commit is contained in:
Alex Martzios 2021-12-17 15:36:30 +02:00
parent 9459e944c5
commit 24fd2b3856
2 changed files with 45 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,11 +13,11 @@
<span class="clickable" uk-icon="more-vertical"></span>
<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 10; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav">
<li>
<li (click)="editRootMenu()">
<a>Edit</a>
</li>
<hr class="uk-nav-divider">
<li>
<li (click)="deleteRootMenu()">
<a>Delete</a>
</li>
</ul>
@ -25,7 +25,7 @@
</span>
</span>
</li>
<li class="uk-visible-toggle">
<li (click)="newRootMenu()" class="uk-visible-toggle">
<span class="clickable">
<span class="uk-icon-button small portal-icon-button">
<icon name="add"></icon>
@ -74,7 +74,7 @@
</a>
</li>
<li *ngIf="isPortalAdministrator"><a [class]="getSelectedMenuItems().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedMenuItems()"><i></i> Delete </a></li>
(click)="confirmDeleteSelectedMenuItems()"><i></i> Delete </a></li>
</ul>
</div>
</div>
@ -120,11 +120,18 @@
</div>
</div>
</div>
<modal-alert #editModal [okDisabled]="menuItemForm && (menuItemForm.invalid || menuItemForm.dirty)">
<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('title')" 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>
<!-- Workflow for EXTERNAL -->
<div dashboard-input *ngIf="menuItemForm.get('type').value === 'external'" [formInput]="menuItemForm.get('url')" type="URL" label="URL" placeholder="Write a URL"></div>
<!-- Workflow for INTERNAL -->
<div *ngIf="menuItemForm.get('type').value === 'internal'">
<div class="uk-text-center">Select one of the pages</div>
<div dashboard-input [formInput]="menuItemForm.get('route')" type="autocomplete" label="Page" placeholder="Search all pages" [options]="allPages" [showOptionsOnEmpty]="false">
</div>
<div class="uk-text-center uk-margin-top">Or <a>create a new one</a></div>
</div>
</form>
</modal-alert>

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

@ -13,6 +13,7 @@ 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';
import {Option} from '../../sharedComponents/input/input.component';
@Component({
@ -32,6 +33,7 @@ export class MenuComponent implements OnInit {
// public rootMenuForm: FormGroup;
public menuItemForm: FormGroup;
public allPages = [];
public keyword = '';
@ -85,15 +87,33 @@ 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 newRootMenu() {
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 Root Menu', 'Save Changes');
}
public editRootMenu() {
this.menuItemForm = this._fb.group({
id: this._fb.control("id"),
title: this._fb.control("Resources",Validators.required),
type: this._fb.control("",Validators.required),
route: this._fb.control("noNeed"),
url: this._fb.control("noNeed"),
isEnabled: this._fb.control("enabled",Validators.required),
});
this.menuItemsModalOpen('Edit Root Menu', 'Save Changes');
}
public deleteRootMenu() {
console.log('Delete root menu');
}
public getSelectedMenuItems(): string[] {
return this.checkboxes.filter(menuItem => menuItem.checked == true).map(checkedMenuItem => checkedMenuItem.menuItem).map(res => res.id);
@ -155,7 +175,7 @@ export class MenuComponent implements OnInit {
}
public onSearchClose() {
this.selectedKeyword = this.filterForm.value;
this.selectedKeyword = this.filterForm.get('keyword').value;
}
public reset() {