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]="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>