153 lines
7.4 KiB
HTML
153 lines
7.4 KiB
HTML
<div page-content class="admin-pages">
|
|
<div header>
|
|
<admin-tabs tab="menu" [portal]="portal"></admin-tabs>
|
|
<div *ngIf="!showLoading" class="uk-grid" uk-grid>
|
|
<div class="uk-width-1-1">
|
|
<ul *ngIf="!isPortalAdministrator" class="uk-subnav uk-subnav-pill uk-flex uk-flex-middle">
|
|
<li *ngFor="let item of rootMenuItems; let i=index" [class.uk-active]="activeRootMenuId==item['_id']"
|
|
class="uk-visible-toggle uk-position-relative uk-padding-remove-horizontal">
|
|
<span>
|
|
<a (click)="changeActiveRootMenuItem(item)">
|
|
<span class="title">{{item.title}}</span>
|
|
</a>
|
|
<span class="uk-invisible-hover uk-position-center-right color z-index-2">
|
|
<span class="clickable" uk-icon="more-vertical"></span>
|
|
<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 20; delay-hide: 0; flip: false">
|
|
<ul class="uk-nav uk-dropdown-nav">
|
|
<li (click)="editMenuItem(item, false)">
|
|
<a>Edit</a>
|
|
</li>
|
|
<hr class="uk-nav-divider">
|
|
<li (click)="confirmDeleteMenuItem(item._id, false)">
|
|
<a>Delete</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</span>
|
|
</span>
|
|
</li>
|
|
<li (click)="newMenuItem(false)" class="uk-visible-toggle">
|
|
<span class="clickable">
|
|
<span class="uk-icon-button small portal-icon-button">
|
|
<icon name="add"></icon>
|
|
</span>
|
|
<span class="space" [class.uk-hidden-hover]="rootMenuItems.length != 0">
|
|
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(true)" 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>
|
|
</div>
|
|
<div inner>
|
|
<div *ngIf="showLoading" class="uk-position-center">
|
|
<loading></loading>
|
|
</div>
|
|
<div *ngIf="!showLoading">
|
|
<ul *ngIf='activeRootMenuId' class="uk-list submenu-items">
|
|
<li *ngFor="let child of childrenMenuItems" 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">
|
|
<div class="uk-grid uk-flex uk-flex-middle">
|
|
<div class="uk-width-expand uk-margin-medium-bottom">
|
|
{{child.title}}
|
|
</div>
|
|
<div *ngIf="child.url && child.type == 'external'" class="uk-grid uk-width-1-1 uk-margin-left">
|
|
<span class="title uk-padding-remove">URL: </span><a href="{{child.url}}" target="_blank"
|
|
class="uk-padding-remove uk-margin-left">{{child.url}}</a>
|
|
</div>
|
|
<div *ngIf="child.route && child.type == 'internal'" class="uk-grid uk-width-1-1 uk-margin-left">
|
|
<span class="title uk-padding-remove">Route: </span><span
|
|
class="uk-padding-remove uk-margin-left">{{child.route}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="uk-width-1-5">
|
|
<div class="uk-flex uk-flex-center uk-flex-column uk-height-1-1">
|
|
<div class="uk-flex uk-flex-center">
|
|
<div class="actions">
|
|
<button class="uk-button action uk-margin-top uk-flex uk-flex-middle"
|
|
(click)="editMenuItem(child, true)">
|
|
<icon name="edit"></icon>
|
|
<span class="uk-margin-small-left"> Edit</span>
|
|
</button>
|
|
<button class="uk-button action uk-margin-top uk-flex uk-flex-middle"
|
|
(click)="confirmDeleteMenuItem(child._id, true)">
|
|
<icon name="remove"></icon>
|
|
<span class="uk-margin-small-left"> Delete</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div *ngIf="childrenMenuItems.length == 0"
|
|
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
|
|
<div>No menu items found</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<modal-alert #editModal (alertOutput)="menuItemSaveConfirmed($event)"
|
|
[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('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]="getTypeOptions()" [tooltip]="false"></div>
|
|
<!-- Workflow for EXTERNAL -->
|
|
<div dashboard-input *ngIf="menuItemForm.get('type').value === 'external'" [formInput]="menuItemForm.get('url')"
|
|
[validators]="menuItemForm.get('url').validator" 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')" [validators]="menuItemForm.get('route').validator"
|
|
type="autocomplete" label="Page" placeholder="Search all pages" [options]="allPages"
|
|
[showOptionsOnEmpty]="false">
|
|
</div>
|
|
<div class="uk-text-center uk-margin-top">Or <a (click)="newPageWindow()">create a new one</a></div>
|
|
<div *ngIf="newPageWindowOpen" class="uk-card uk-card-default uk-card-body uk-margin-top">
|
|
<div>
|
|
<button (click)="newPageWindow()" class="uk-close uk-icon uk-float-right" uk-close></button>
|
|
<h6 class="uk-text-bold uk-margin-remove-top">Create New Page</h6>
|
|
</div>
|
|
<form *ngIf="pageForm" [formGroup]="pageForm" class="uk grid uk-child-width-1-1" uk-grid>
|
|
<div dashboard-input [formInput]="pageForm.get('name')" type="text" label="Name"
|
|
placeholder="Write a name"></div>
|
|
<div dashboard-input [formInput]="pageForm.get('route')" type="text" label="Route"
|
|
placeholder="Write a route"></div>
|
|
<div class="uk-flex uk-flex-right">
|
|
<button [disabled]="!(pageForm.get('name').value && pageForm.get('route').value)"
|
|
class="uk-button uk-button-secondary outlined" (click)="createPage()">Create Page
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</modal-alert>
|
|
|
|
<modal-alert #deleteModal (alertOutput)="confirmedDeleteMenuItem($event)"></modal-alert>
|