2022-07-11 09:25:00 +02:00
< div page-content ( stickyEmitter ) = " stickyPageHeader = $event" >
< div header >
< div class = "uk-flex uk-flex-middle uk-margin-top info" [ class . uk-active ] = " stickyPageHeader " >
< 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" >
2022-07-15 09:16:42 +02:00
< admin-tabs tab = "menu" [ portal ] = " portal " [ type ] = " type " > < / admin-tabs >
2022-07-11 09:25:00 +02:00
< / div >
< / div >
<!-- <div header>
2022-01-13 14:46:22 +01:00
< 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">
2021-12-09 14:52:39 +01:00
< span >
2022-01-11 11:05:40 +01:00
< a ( click ) = " changeActiveRootMenuItem ( item ) " >
2021-12-23 15:12:51 +01:00
< span class = "title" > {{item.title}}< / span >
2021-12-09 14:52:39 +01:00
< / a >
2022-06-26 22:30:54 +02:00
< 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" >
2021-12-09 14:52:39 +01:00
< ul class = "uk-nav uk-dropdown-nav" >
2022-01-05 15:41:49 +01:00
< li ( click ) = " editMenuItem ( item , false ) " >
2021-12-09 14:52:39 +01:00
< a > Edit< / a >
< / li >
< hr class = "uk-nav-divider" >
2022-01-05 15:41:49 +01:00
< li ( click ) = " confirmDeleteMenuItem ( item . _id , false ) " >
2021-12-09 14:52:39 +01:00
< a > Delete< / a >
< / li >
< / ul >
< / div >
< / span >
< / span >
2022-01-13 14:46:22 +01:00
< / li >
< li ( click ) = " newMenuItem ( false ) " class = "uk-visible-toggle" >
2021-12-09 14:52:39 +01:00
< span class = "clickable" >
< span class = "uk-icon-button small portal-icon-button" >
< icon name = "add" > < / icon >
< / span >
2022-01-11 11:05:40 +01:00
< span class = "space" [ class . uk-hidden-hover ] = " rootMenuItems . length ! = 0 " >
2021-12-17 08:22:07 +01:00
Create new root menu
2021-12-09 14:52:39 +01:00
< / span >
< / span >
2022-01-13 14:46:22 +01:00
< / li >
< / ul >
< / div >
< / div >
2022-03-02 11:26:28 +01:00
< div * ngIf = "!activeRootMenu.isFeatured"
2022-01-13 14:46:22 +01:00
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 "
2022-07-11 09:25:00 +02:00
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 >
2022-01-13 14:46:22 +01:00
< 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 >
2022-07-11 09:25:00 +02:00
< / div > -->
2022-01-13 14:46:22 +01:00
< div inner >
2022-07-15 09:16:42 +02:00
< div class = "uk-flex uk-flex-between@m uk-flex-center uk-flex-middle uk-grid uk-margin-top" uk-grid
[class]="isPortalAdministrator ? 'uk-flex-between@m':'uk-flex-right@m'">
< div >
< div input inputClass = "border-bottom" type = "select" [ options ] = " menuTypes " [ ( value ) ] = " selectedMenuType "
*ngIf="isPortalAdministrator">< / div >
< / div >
2022-07-11 09:25:00 +02:00
< 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 > ">
< icon name = "add" [ flex ] = " true " > < / icon >
< span class = "uk-margin-small-left" > New Menu Item< / span >
< / button >
< / div >
< / div >
< 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" >
2022-07-15 09:16:42 +02:00
< div # elements transition-group >
< div * ngFor = "let item of displayMenuItems; let i = index;" transition-group-item >
< div class = "uk-width-1-2@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 >
< 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)">
< div class = "uk-flex uk-flex-middle" >
< icon name = "north" [ flex ] = " true " > < / icon >
< span class = "uk-margin-xsmall-left" > One 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" > One down< / span >
< / div >
< / a >
< / div >
< / ng-container >
< / div >
< div * ngIf = "item.type == 'noAction' && item.items && item.items.length" transition-group >
< div * ngFor = "let subItem of item.items; let j = index" transition-group-item >
< div class = "uk-margin-medium-left uk-width-1-2@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 ) " >
< 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" >
< div class = "uk-flex uk-flex-middle" >
< icon name = "north" [ flex ] = " true " > < / icon >
< span class = "uk-margin-xsmall-left" > One up< / span >
< / div >
< / a >
< a * ngIf = "j != (item.items.length - 1)" class = "uk-link uk-link-text" >
< div class = "uk-flex uk-flex-middle" >
< icon name = "south" [ flex ] = " true " > < / icon >
< span class = "uk-margin-xsmall-left" > One down< / span >
< / div >
< / a >
< / div >
< / ng-container >
< / div >
< / div >
< / div >
< / div >
< / div >
2022-07-11 09:25:00 +02:00
<!-- <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"
2022-07-15 09:16:42 +02:00
class="uk-padding-remove uk-margin-left">{{child.url}}< / a >
2022-07-11 09:25:00 +02:00
< / 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 >
2022-01-14 14:55:24 +01:00
< / div >
2022-07-11 09:25:00 +02:00
< / 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"
2022-07-15 09:16:42 +02:00
(click)="editMenuItem(child, true)">
2022-07-11 09:25:00 +02:00
< 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"
2022-07-15 09:16:42 +02:00
(click)="confirmDeleteMenuItem(child._id, true)">
2022-07-11 09:25:00 +02:00
< icon name = "delete" [ flex ] = " true " > < / icon >
< span class = "uk-margin-small-left" > Delete< / span >
< / button >
< / div >
< / div >
< / div >
< / div >
< / div >
< / li >
< / ul > -->
2022-07-15 09:16:42 +02:00
<!-- TODO: new error conditions -->
<!-- <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">
2022-07-11 09:25:00 +02:00
< div > No menu items found< / div >
< / div >
< div * ngIf = "activeRootMenu.isFeatured"
2022-07-15 09:16:42 +02:00
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
2022-07-11 09:25:00 +02:00
< div > Featured menu items can't have any sub menu items< / div >
2022-07-15 09:16:42 +02:00
< / div > -->
2022-07-11 09:25:00 +02:00
< / div >
< / div >
2022-01-13 14:46:22 +01:00
< / div >
2021-12-09 14:52:39 +01:00
< / div >
2022-01-13 14:46:22 +01:00
< modal-alert # editModal ( alertOutput ) = " menuItemSaveConfirmed ( $ event ) "
2022-07-15 09:16:42 +02:00
[okDisabled]="menuItemForm & & (menuItemForm.invalid || !menuItemForm.dirty)" classTitle="uk-background-primary uk-light">
2022-01-13 14:46:22 +01:00
< form * ngIf = "menuItemForm" [ formGroup ] = " menuItemForm " class = "uk grid uk-child-width-1-1" uk-grid >
2022-07-15 09:16:42 +02:00
< div input [ formInput ] = " menuItemForm . get ( ' title ' ) " type = "text"
placeholder="Name">< / div >
<!-- Selecting parent of menu item -->
<!-- <div input [formInput]="menuItemForm.get('title')" type="autocomplete" *ngIf="isPortalAdministrator"
placeholder="Parent">< / div > -->
<!-- Selecting type of menu item -->
< div input [ formInput ] = " menuItemForm . get ( ' type ' ) " type = "select" placeholder = "Type"
[options]="getTypeOptions(menuItemForm.get('isFeatured').value)" [tooltip]="false">< / div >
2022-01-13 14:46:22 +01:00
<!-- Workflow for EXTERNAL -->
2022-07-15 09:16:42 +02:00
< div input * ngIf = "menuItemForm.get('type').value === 'external'" [ formInput ] = " menuItemForm . get ( ' url ' ) "
[validators]="menuItemForm.get('url').validator" type="URL" placeholder="URL">< / div >
2022-01-13 14:46:22 +01:00
<!-- Workflow for INTERNAL -->
< div * ngIf = "menuItemForm.get('type').value === 'internal'" >
2022-07-15 09:16:42 +02:00
< 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">
2022-01-13 14:46:22 +01:00
< / div >
2022-01-14 14:55:24 +01:00
< 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 >
2022-07-15 09:16:42 +02:00
<!-- <div class="uk - text - center uk - margin - top">Or <a (click)="newPageWindow()">create a new one</a></div>
2022-01-13 14:46:22 +01:00
< 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 >
2022-07-15 09:16:42 +02:00
< div input [ formInput ] = " pageForm . get ( ' name ' ) " type = "text" label = "Name"
placeholder="Name">< / div >
< div input [ formInput ] = " pageForm . get ( ' route ' ) " type = "text"
placeholder="Route">< / div >
2022-01-13 14:46:22 +01:00
< 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 >
2022-07-15 09:16:42 +02:00
< / div > -->
2022-01-13 14:46:22 +01:00
< / div >
2022-07-15 09:16:42 +02:00
< 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 >
2022-01-13 14:46:22 +01:00
< / form >
2022-01-05 15:41:49 +01:00
< / modal-alert >
2022-06-21 11:22:28 +02:00
< modal-alert # deleteModal [ overflowBody ] = " false " ( alertOutput ) = " confirmedDeleteMenuItem ( $ event ) " classTitle = "uk-background-primary uk-light" > < / modal-alert >
