260 lines
14 KiB
HTML
260 lines
14 KiB
HTML
<div page-content>
|
|
<div header>
|
|
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
|
|
<ng-container *ngIf="showLogo">
|
|
<img [src]="entity | logoUrl" class="uk-margin-right uk-blend-multiply">
|
|
</ng-container>
|
|
<div>
|
|
<div class="uk-text-background uk-text-bold uk-text-small">Admin Dashboard - Manage Menus</div>
|
|
<h1 class="uk-h6 uk-margin-remove">{{name ? name : 'Super Admin'}}</h1>
|
|
</div>
|
|
</div>
|
|
<admin-tabs tab="menu" [portal]="portal" [type]="type"></admin-tabs>
|
|
</div>
|
|
<div actions>
|
|
<div class="uk-section-xsmall">
|
|
<div class="uk-flex uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid
|
|
[class]="isPortalAdministrator ? 'uk-flex-between@m':'uk-flex-right@m'">
|
|
<div>
|
|
<div input inputClass="border-bottom" type="select" [options]="menuTypes" [(value)]="selectedMenuType" (valueChange)="valueChange()"
|
|
*ngIf="isPortalAdministrator"></div>
|
|
</div>
|
|
<div>
|
|
<button class="uk-button uk-button-default uk-flex uk-flex-middle"
|
|
[disabled]="showLoading" [class.uk-disabled]="showLoading"
|
|
(click)="newMenuItem()"
|
|
uk-tooltip="title:<div><div class='uk-margin-small-bottom uk-text-bold'>Add new menu item</div><div>Creating a menu item for your customized navigation bar.</div><div>Menu items can be either linked to an existing page or to an external link.</div></div>">
|
|
<icon name="add" [flex]="true"></icon>
|
|
<span class="uk-margin-small-left">New Menu Item</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div inner>
|
|
<div class="uk-section uk-section-small uk-position-relative" style="min-height: 60vh">
|
|
<div *ngIf="showLoading" class="uk-position-center">
|
|
<loading></loading>
|
|
</div>
|
|
<div *ngIf="!showLoading">
|
|
<div class="uk-grid" uk-grid>
|
|
<div #elements transition-group class="uk-width-3-4@m">
|
|
<div *ngFor="let item of displayMenuItems; let i = index;" transition-group-item>
|
|
<div class="uk-width-2-3@m uk-margin-bottom uk-padding-small menu-item">
|
|
<div class="uk-flex uk-flex-middle uk-flex-between">
|
|
<div>
|
|
{{item.title}}
|
|
</div>
|
|
<div class="uk-flex uk-flex-middle uk-flex-center">
|
|
<span *ngIf="item.type == 'external'" class="uk-text-meta uk-text-small uk-margin-small-right">External URL</span>
|
|
<span *ngIf="item.type == 'internal'" class="uk-text-meta uk-text-small uk-margin-small-right">Internal page</span>
|
|
<span *ngIf="item.type == 'noAction'" class="uk-text-meta uk-text-small uk-margin-small-right"></span>
|
|
<a class="uk-link-reset" (click)="toggleMenuItem(item)">
|
|
<icon *ngIf="!item.isOpen" name="arrow_drop_down" [flex]="true"></icon>
|
|
<icon *ngIf="item.isOpen" name="arrow_drop_up" [flex]="true"></icon>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<ng-container *ngIf="item.isOpen">
|
|
<div *ngIf="item.type != 'noAction'" class="uk-margin-medium-top uk-margin-medium-bottom">
|
|
<div class="uk-text-meta uk-text-small uk-margin-xsmall-bottom">
|
|
Target {{item.type == 'external' ? 'URL' : 'Route'}}
|
|
</div>
|
|
<div>
|
|
{{item.type == 'external' ? item.url : item.route}}
|
|
</div>
|
|
<div *ngIf="item.type == 'internal' && item.route && pageStatus != null && !pageStatus.get(item.route)" class="uk-text-small uk-text-warning uk-margin-small-top">
|
|
This menu item will not visible because the page is disabled
|
|
</div>
|
|
</div>
|
|
<div class="uk-flex uk-flex-middle uk-flex-center">
|
|
<button class="uk-button uk-button-link uk-flex uk-flex-middle uk-margin-medium-right" (click)="editMenuItem(i, item, false)">
|
|
<icon name="edit" [flex]="true"></icon>
|
|
<span class="uk-margin-xsmall-left">Edit</span>
|
|
</button>
|
|
<button class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="confirmDeleteMenuItem(item._id, false)">
|
|
<icon name="delete" [flex]="true"></icon>
|
|
<span class="uk-margin-xsmall-left">Delete</span>
|
|
</button>
|
|
</div>
|
|
<div *ngIf="displayMenuItems.length > 1" class="uk-margin-medium-top uk-flex uk-flex-middle uk-text-small">
|
|
<span class="uk-text-meta uk-margin-small-right">
|
|
Move:
|
|
</span>
|
|
<a *ngIf="i != 0" class="uk-link uk-link-text uk-margin-right"
|
|
(click)="moveElement(i, i - 1)">
|
|
<div class="uk-flex uk-flex-middle">
|
|
<icon name="north" [flex]="true"></icon>
|
|
<span class="uk-margin-xsmall-left">Up</span>
|
|
</div>
|
|
</a>
|
|
<a *ngIf="i != (displayMenuItems.length - 1)" class="uk-link uk-link-text"
|
|
(click)="moveElement(i, i + 1)">
|
|
<div class="uk-flex uk-flex-middle">
|
|
<icon name="south" [flex]="true"></icon>
|
|
<span class="uk-margin-xsmall-left">Down</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
<div *ngIf="item.items && item.items.length" #subElements transition-group>
|
|
<div *ngFor="let subItem of item.items; let j = index" transition-group-item>
|
|
<div class="uk-margin-medium-left uk-width-2-3@m uk-margin-bottom uk-padding-small menu-item">
|
|
<div class="uk-flex uk-flex-middle uk-flex-between">
|
|
<div>
|
|
{{subItem.title}}
|
|
</div>
|
|
<div class="uk-flex uk-flex-middle uk-flex-center">
|
|
<span *ngIf="subItem.type == 'external'" class="uk-text-meta uk-text-small uk-margin-small-right">External URL</span>
|
|
<span *ngIf="subItem.type == 'internal'" class="uk-text-meta uk-text-small uk-margin-small-right">Internal page</span>
|
|
<a class="uk-link-reset" (click)="toggleMenuItem(subItem)">
|
|
<icon *ngIf="!subItem.isOpen" name="arrow_drop_down" [flex]="true"></icon>
|
|
<icon *ngIf="subItem.isOpen" name="arrow_drop_up" [flex]="true"></icon>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<ng-container *ngIf="subItem.isOpen">
|
|
<div class="uk-margin-medium-top uk-margin-medium-bottom">
|
|
<div class="uk-text-meta uk-text-small uk-margin-xsmall-bottom">
|
|
Target {{subItem.type == 'external' ? 'URL' : 'Route'}}
|
|
</div>
|
|
<div>
|
|
{{subItem.type == 'external' ? subItem.url : subItem.route}}
|
|
</div>
|
|
</div>
|
|
<div class="uk-flex uk-flex-middle uk-flex-center">
|
|
<button class="uk-button uk-button-link uk-flex uk-flex-middle uk-margin-medium-right" (click)="editMenuItem(j, subItem, true)">
|
|
<icon name="edit" [flex]="true"></icon>
|
|
<span class="uk-margin-xsmall-left">Edit</span>
|
|
</button>
|
|
<button class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="confirmDeleteMenuItem(subItem._id, true, subItem.parentItemId)">
|
|
<icon name="delete" [flex]="true"></icon>
|
|
<span class="uk-margin-xsmall-left">Delete</span>
|
|
</button>
|
|
</div>
|
|
<div *ngIf="item.items.length > 1" class="uk-margin-medium-top uk-flex uk-flex-middle uk-text-small">
|
|
<span class="uk-text-meta uk-margin-small-right">
|
|
Move:
|
|
</span>
|
|
<a *ngIf="j != 0" class="uk-link uk-link-text uk-margin-right"
|
|
(click)="moveElement(j, j - 1, item.items)">
|
|
<div class="uk-flex uk-flex-middle">
|
|
<icon name="north" [flex]="true"></icon>
|
|
<span class="uk-margin-xsmall-left">Up</span>
|
|
</div>
|
|
</a>
|
|
<a *ngIf="j != (item.items.length - 1)" class="uk-link uk-link-text"
|
|
(click)="moveElement(j, j + 1, item.items)">
|
|
<div class="uk-flex uk-flex-middle">
|
|
<icon name="south" [flex]="true"></icon>
|
|
<span class="uk-margin-xsmall-left">Down</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="displayMenuItems && displayMenuItems.length > 0" class="uk-width-1-4@m">
|
|
<h6>Menu visibility</h6>
|
|
<div class="uk-margin-small-bottom">
|
|
<label (click)="toggleMenu(true, selectedMenuType == 'normalMenu'? false : true )">
|
|
<input class="uk-radio" type="radio" name="menu" [checked]="(selectedMenuType == 'normalMenu' && showNormalMenu) || (selectedMenuType == 'customMenu' && showFeaturedMenu)">
|
|
<span class="uk-margin-small-left">Visible</span>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label (click)="toggleMenu(false, selectedMenuType == 'normalMenu'? false : true )">
|
|
<input class="uk-radio" type="radio" name="menu" [checked]="(selectedMenuType == 'normalMenu' && !showNormalMenu) || (selectedMenuType == 'customMenu' && !showFeaturedMenu)">
|
|
<span class="uk-margin-small-left">Hidden</span>
|
|
</label>
|
|
</div>
|
|
|
|
<h6 class="uk-margin-medium-top">Menu alignment</h6>
|
|
<div *ngIf="selectedMenuType == 'customMenu'">
|
|
<div>
|
|
<label (click)="alignMenu('LEFT')">
|
|
<input class="uk-radio" type="radio" name="menuAlign" [checked]="(featuredAlignment == 'LEFT')">
|
|
<span class="uk-margin-small-left">Left</span>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label (click)="alignMenu('CENTER')">
|
|
<input class="uk-radio" type="radio" name="menuAlign" [checked]="(featuredAlignment == 'CENTER')">
|
|
<span class="uk-margin-small-left">Center</span>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label (click)="alignMenu('RIGHT')">
|
|
<input class="uk-radio" type="radio" name="menuAlign" [checked]="(featuredAlignment == 'RIGHT')">
|
|
<span class="uk-margin-small-left">Right</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="displayMenuItems && displayMenuItems.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>
|
|
</div>
|
|
<modal-alert #editModal (alertOutput)="menuItemSaveConfirmed($event)"
|
|
[okDisabled]="menuItemForm && (menuItemForm.invalid || !menuItemForm.dirty)" classTitle="uk-background-primary uk-light">
|
|
<form *ngIf="menuItemForm" [formGroup]="menuItemForm" class="uk grid uk-child-width-1-1" uk-grid>
|
|
<div input [formInput]="menuItemForm.get('title')" type="text"
|
|
placeholder="Name"></div>
|
|
<!-- Selecting parent of menu item -->
|
|
<div input *ngIf="selectedMenuType == 'normalMenu' && isPortalAdministrator" [formInput]="menuItemForm.get('parentItemId')" type="select"
|
|
placeholder="Parent" [options]="parentOptions" [tooltip]="false" [disabled]="menuItemForm.get('_id').value"></div>
|
|
<!-- Selecting type of menu item -->
|
|
<div input [formInput]="menuItemForm.get('type')" type="select" placeholder="Type"
|
|
[options]="getTypeOptions(menuItemForm.get('isFeatured').value, menuItemForm.get('parentItemId').value)" [tooltip]="false"></div>
|
|
<!-- Workflow for EXTERNAL -->
|
|
<div input *ngIf="menuItemForm.get('type').value === 'external'" [formInput]="menuItemForm.get('url')"
|
|
[validators]="menuItemForm.get('url').validator" type="URL" placeholder="URL"></div>
|
|
<!-- Workflow for INTERNAL -->
|
|
<div *ngIf="menuItemForm.get('type').value === 'internal'">
|
|
<div class="uk-text-center uk-margin-small-bottom">Select one of the pages</div>
|
|
<div input [formInput]="menuItemForm.get('route')" [validators]="menuItemForm.get('route').validator"
|
|
type="autocomplete" label="Page" placeholder="Search all pages" [options]="allPages"
|
|
[showOptionsOnEmpty]="false" class="uk-margin-bottom">
|
|
</div>
|
|
<div *ngIf="pageStatus != null && !pageStatus.get(menuItemForm.get('route').value) && menuItemForm.get('route').dirty" class="uk-text-center">
|
|
<span class="uk-text-warning">The item is not used because the required page is disabled</span>
|
|
</div>
|
|
|
|
<!-- <div *ngIf="selectedMenuType == 'customMenu'" 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 input [formInput]="pageForm.get('name')" type="text" label="Name"-->
|
|
<!-- placeholder="Name"></div>-->
|
|
<!-- <div input [formInput]="pageForm.get('route')" type="text"-->
|
|
<!-- placeholder="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>
|
|
<!-- <div class="uk-flex" *ngIf="isPortalAdministrator">
|
|
<div class="uk-form-label uk-margin-small-right">Featured</div>
|
|
<mat-slide-toggle [formControl]="menuItemForm.get('isFeatured')"
|
|
uk-tooltip="title:<div class='uk-width-large'><div class='uk-text-bold '>Enable this to show your custom menu item in the community-specific navigation bar.</div><div class=' uk-margin-top'>If disabled, your custom menu item will appear in the default navigation bar.</div><div class=' uk-margin-top'>*Note that featured menu items can't have any children menu items(as a dropdown).</div></div>">
|
|
</mat-slide-toggle>
|
|
</div> -->
|
|
</form>
|
|
</modal-alert>
|
|
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeleteMenuItem($event)" classTitle="uk-background-primary uk-light"></modal-alert>
|