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 *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)="filterForm.get('status').setValue('resources'); 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)="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 *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>
									<input type="checkbox" id="" class="checkBox" name="" value="">
								</div>
								<div class="uk-width-expand uk-margin-medium-bottom">
									{{child.title}}
								</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 (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>