openaire-library/dashboard/menu/menu.component.html

<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" 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 is 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 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 *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>