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

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

@ -13,11 +13,11 @@
<span class="clickable" uk-icon="more-vertical"></span> <span class="clickable" uk-icon="more-vertical"></span>
<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 10; delay-hide: 0; flip: false"> <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 10; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<li> <li (click)="editRootMenu()">
<a>Edit</a> <a>Edit</a>
</li> </li>
<hr class="uk-nav-divider"> <hr class="uk-nav-divider">
<li> <li (click)="deleteRootMenu()">
<a>Delete</a> <a>Delete</a>
</li> </li>
</ul> </ul>
@ -25,7 +25,7 @@
</span> </span>
</span> </span>
</li> </li>
<li class="uk-visible-toggle"> <li (click)="newRootMenu()" class="uk-visible-toggle">
<span class="clickable"> <span class="clickable">
<span class="uk-icon-button small portal-icon-button"> <span class="uk-icon-button small portal-icon-button">
<icon name="add"></icon> <icon name="add"></icon>
@ -120,11 +120,18 @@
</div> </div>
</div> </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> <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('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> <!-- Workflow for EXTERNAL -->
<div dashboard-input [formInput]="menuItemForm.get('url')" type="text" label="URL" placeholder="Write a URL"></div> <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> </form>
</modal-alert> </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 {AlertModal} from '../../utils/modal/alert';
import {CheckMenuItem, MenuItem} from '../../sharedComponents/menu'; import {CheckMenuItem, MenuItem} from '../../sharedComponents/menu';
import {SearchInputComponent} from '../../sharedComponents/search-input/search-input.component'; import {SearchInputComponent} from '../../sharedComponents/search-input/search-input.component';
import {Option} from '../../sharedComponents/input/input.component';
@Component({ @Component({
@ -32,6 +33,7 @@ export class MenuComponent implements OnInit {
// public rootMenuForm: FormGroup; // public rootMenuForm: FormGroup;
public menuItemForm: FormGroup; public menuItemForm: FormGroup;
public allPages = [];
public keyword = ''; public keyword = '';
@ -85,15 +87,33 @@ export class MenuComponent implements OnInit {
}); });
} }
// public newRootMenu() { public newRootMenu() {
// this.rootMenuForm = this._fb.group({ this.menuItemForm = this._fb.group({
// id: this._fb.control(null), id: this._fb.control(""),
// title: this._fb.control("",Validators.required), title: this._fb.control("",Validators.required),
// route: this._fb.control(""), type: this._fb.control("",Validators.required),
// isEnabled: this._fb.control("",Validators.required), route: this._fb.control(""),
// }); url: this._fb.control(""),
// this.menuItemsModalOpen('Create Root Menu', 'Save Changes'); 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[] { public getSelectedMenuItems(): string[] {
return this.checkboxes.filter(menuItem => menuItem.checked == true).map(checkedMenuItem => checkedMenuItem.menuItem).map(res => res.id); 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() { public onSearchClose() {
this.selectedKeyword = this.filterForm.value; this.selectedKeyword = this.filterForm.get('keyword').value;
} }
public reset() { public reset() {