139 lines
7.0 KiB
HTML
139 lines
7.0 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]="activeRootMenu==item['_id']" class="uk-visible-toggle uk-position-relative uk-padding-remove-horizontal">
|
|
<span>
|
|
<a (click)="activeRootMenu=item['_id']">
|
|
<span class="title">{{item.title}}</span>
|
|
</a>
|
|
<span class="uk-invisible-hover uk-position-center-right color">
|
|
<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 (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 uk-hidden-hover">
|
|
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='activeRootMenu' class="uk-list submenu-items">
|
|
<li *ngFor="let child of getActiveRootItem(activeRootMenu).items" 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" 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" 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">
|
|
<div href="#" class="actions">
|
|
<div class="uk-button action uk-margin-top uk-flex uk-flex-middle" (click)="editMenuItem(child, true)">
|
|
<i uk-icon="pencil" class="clickable uk-icon"></i>
|
|
<span class="uk-margin-small-left"> Edit</span>
|
|
</div>
|
|
<div class="uk-button action uk-margin-top uk-flex uk-flex-middle" (click)="confirmDeleteMenuItem(child._id, true)">
|
|
<i uk-icon="trash" class="clickable uk-icon"></i>
|
|
<span class="uk-margin-small-left"> Delete</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div *ngIf="!getActiveRootItem(activeRootMenu) || !getActiveRootItem(activeRootMenu).items || getActiveRootItem(activeRootMenu).items.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]="typeOptions"></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 (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="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('title')" type="text" label="Route" placeholder="Write a route"></div>
|
|
<div>
|
|
<div class="uk-text-bold uk-form-label uk-margin-small-bottom">Enable/disable</div>
|
|
<mat-slide-toggle
|
|
uk-tooltip="title:<div class='uk-padding-small uk-width-large'><div class='uk-text-bold '>Disable a page to hide it from community dashboard portal.</div><div class=' uk-margin-top'>If the page is disabled, a message 'Can't find that page' will appear in case the url of that page is loaded. If the disabled page belongs to the menu, the link will be removed from menu, too.</div></div>">
|
|
</mat-slide-toggle>
|
|
</div>
|
|
<div class="uk-flex uk-flex-right">
|
|
<button class="uk-button uk-button-default">Create Page</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</modal-alert>
|
|
|
|
<modal-alert #deleteModal (alertOutput)="confirmedDeleteMenuItem($event)"></modal-alert> |