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

170 lines
9.2 KiB
HTML
Raw Blame History

<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">
<a class="uk-link-reset">
<icon [flex]="true" name="more_vert"></icon>
</a>
<div class="uk-dropdown" 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 *ngIf="!activeRootMenu.isFeatured"
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 *ngIf="(menuRouteStatus != null && !menuRouteStatus.get(child._id) && child.type == 'internal')" class="uk-grid uk-width-1-1 uk-margin-left">
<span class="uk-padding-remove uk-text-warning">The item is not used either because the required page does not exist or it is disabled</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 uk-button-secondary uk-margin-top uk-flex uk-flex-middle"
(click)="editMenuItem(child, true)">
<icon name="edit" [flex]="true"></icon>
<span class="uk-margin-small-left"> Edit</span>
</button>
<button class="uk-button uk-button-danger uk-margin-top uk-flex uk-flex-middle"
(click)="confirmDeleteMenuItem(child._id, true)">
<icon name="delete" [flex]="true"></icon>
<span class="uk-margin-small-left"> Delete</span>
</button>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<div *ngIf="childrenMenuItems.length == 0 && !activeRootMenu.isFeatured"
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 *ngIf="activeRootMenu.isFeatured"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
<div>Featured menu items can't have any sub menu items</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 dashboard-input [formInput]="menuItemForm.get('title')" type="text" label="Name"
placeholder="Write a name"></div>
<div class="uk-flex" *ngIf="activeRootMenu && !activeRootMenu.items.length">
<div class="uk-text-bold 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>
<div dashboard-input [formInput]="menuItemForm.get('type')" type="select" label="Type" placeholder="Choose a type"
[options]="getTypeOptions(menuItemForm.get('isFeatured').value)" [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" class="uk-margin-bottom">
</div>
<div *ngIf="(menuRouteStatus != null && !menuRouteStatus.get(menuItemForm.get('_id').value) && !menuItemForm.get('route').dirty)" class="uk-text-center">
<span class="uk-text-warning">The item is not used either because the required page does not exist or it is disabled</span>
</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 [overflowBody]="false" (alertOutput)="confirmedDeleteMenuItem($event)" classTitle="uk-background-primary uk-light"></modal-alert>
Reference in New Issue View Git Blame Copy Permalink