openaire-library/dashboard/menu/menu.component.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 [class.uk-active]="filterForm.get('status').value === 'resources'" class="uk-visible-toggle uk-position-relative uk-padding-remove-horizontal">
						<span>
							<a (click)="filterForm.get('status').setValue('resources')">
								<span class="title">Resourses</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)="editRootMenu()">
											<a>Edit</a>
										</li>
										<hr class="uk-nav-divider">
										<li (click)="deleteRootMenu()">
											<a>Delete</a>
										</li>
									</ul>
								</div>
							</span>
						</span>
					</li>
					<li (click)="newRootMenu()" 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()" 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>
		<!-- Not currently working -->
		<div *ngIf="!showLoading && checkboxes.length > 0" class="uk-padding 
				uk-padding-remove-bottom uk-padding-remove-top uk-margin-remove-top uk-margin-small-bottom uk-display-inline" 
				[attr.uk-tooltip]="getSelectedMenuItems().length == 0 ? 'pos:left; cls: uk-active' : null" 
				title="Select at least one menu item">
			<input id="checkAll" type="checkbox" (click)="selectAll()" [ngModel]="getSelectedMenuItems().length == checkboxes.length"/>
			<span *ngIf="getSelectedMenuItems().length > 0" class="uk-margin-left uk-text-muted"> {{getSelectedMenuItems().length}} menu items selected </span>
			<a class="uk-margin-left">Actions</a>
			<div uk-dropdown="mode: click">
        <ul class="uk-nav uk-dropdown-nav"
            [attr.uk-tooltip]="getSelectedMenuItems().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
            title="Select at least one page">
          <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedMenuItems().length == 0 ? 'uk-disabled' : ''"
                                                (click)="toggleMenuItems(true,getSelectedMenuItems())"><i></i> Enable
          </a></li>
          <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedMenuItems().length == 0 ? 'uk-disabled' : ''"
                                                (click)="toggleMenuItems(false,getSelectedMenuItems())"><i></i> Disable
          </a>
          </li>
          <li *ngIf="isPortalAdministrator"><a [class]="getSelectedMenuItems().length == 0 ? 'uk-disabled' : ''"
                                               	(click)="confirmDeleteSelectedMenuItems()"><i></i> Delete </a></li>
        </ul>
      </div>
		</div>
	</div>
	<div inner>
		<div *ngIf="showLoading" class="uk-position-center">
			<loading></loading>
		</div>
		<div *ngIf="!showLoading">
			<ul class="uk-list submenu-items">
				<li 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>
									<input type="checkbox" id="" class="checkBox" name="" value="">
								</div>
								<div class="uk-width-expand uk-margin-medium-bottom">
									Name and info
								</div>
								<div class="uk-grid uk-width-1-1 uk-margin-left">
									Additional info
								</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()">
										<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)="deleteMenuItem()">
										<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>
	</div>
</div>
<modal-alert #editModal [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>create a new one</a></div>
		</div>
	</form>
</modal-alert>