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

<div page-content>
	<div header>
		<admin-tabs tab="menu" [portal]="portal" [type]="type"></admin-tabs>
	</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 visibility</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">Visible</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">Hidden</span>
							</label>
						</div>

            <h6 class="uk-margin-medium-top">Menu alignment</h6>
            <div *ngIf="selectedMenuType == 'customMenu'">
              <div>
                <label (click)="alignMenu('LEFT')">
                  <input class="uk-radio" type="radio" name="menuAlign" [checked]="(featuredAlignment == 'LEFT')">
                  <span class="uk-margin-small-left">Left</span>
                </label>
              </div>
              <div>
                <label (click)="alignMenu('CENTER')">
                  <input class="uk-radio" type="radio" name="menuAlign" [checked]="(featuredAlignment == 'CENTER')">
                  <span class="uk-margin-small-left">Center</span>
                </label>
              </div>
              <div>
                <label (click)="alignMenu('RIGHT')">
                  <input class="uk-radio" type="radio" name="menuAlign" [checked]="(featuredAlignment == 'RIGHT')">
                  <span class="uk-margin-small-left">Right</span>
                </label>
              </div>
            </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 *ngIf="selectedMenuType == 'customMenu'" 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 input [formInput]="pageForm.get('name')" type="text" label="Name"-->
<!--						placeholder="Name"></div>-->
<!--          <div input [formInput]="pageForm.get('route')" type="text"-->
<!--						placeholder="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>
		<!-- <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>