MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
openaire-library/dashboard/menu/menu.component.html

221 lines
12 KiB
HTML
Raw Blame History

<div page-content>
<div header>
<div class="uk-flex uk-flex-middle uk-margin-top info">
<ng-container *ngIf="showLogo">
<img [src]="entity | logoUrl" class="uk-margin-right uk-blend-multiply">
</ng-container>
<div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Menu Items</div>
<h1 class="uk-h4 uk-margin-remove">{{name ? name : 'Super Admin'}}</h1>
</div>
</div>
<div class="uk-margin uk-margin-remove-bottom">
<admin-tabs tab="menu" [portal]="portal" [type]="type"></admin-tabs>
</div>
</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 settings</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">Show menu</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">Hide menu</span>
</label>
</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>
<!-- <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>
Reference in New Issue View Git Blame Copy Permalink