2021-12-09 14:52:39 +01:00
< 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" >
2022-01-11 11:05:40 +01:00
< 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-01-11 11:05:40 +01:00
< span class = "uk-invisible-hover uk-position-center-right color z-index-2" >
2021-12-09 14:52:39 +01:00
< 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" >
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 >
< / li >
2022-01-05 15:41:49 +01:00
< 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 >
< / li >
< / ul >
< / div >
< / div >
2021-12-17 08:22:07 +01:00
< 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 >
2022-01-05 15:41:49 +01:00
< a ( click ) = " newMenuItem ( true ) " class = "uk-flex uk-flex-middle uk-text-uppercase" >
2021-12-17 08:22:07 +01:00
< 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 >
2021-12-09 14:52:39 +01:00
< / div >
< div inner >
< div * ngIf = "showLoading" class = "uk-position-center" >
< loading > < / loading >
< / div >
< div * ngIf = "!showLoading" >
2022-01-11 11:05:40 +01:00
< ul * ngIf = 'activeRootMenuId' class = "uk-list submenu-items" >
< li * ngFor = "let child of childrenMenuItems" class = "uk-card uk-card-default uk-margin-bottom" >
2021-12-09 14:52:39 +01:00
< 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" >
2021-12-23 15:12:51 +01:00
{{child.title}}
2021-12-09 14:52:39 +01:00
< / div >
2022-01-11 11:05:40 +01:00
< div * ngIf = "child.url && child.type == 'external'" class = "uk-grid uk-width-1-1 uk-margin-left" >
2022-01-05 15:41:49 +01:00
< 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 >
2022-01-11 11:05:40 +01:00
< div * ngIf = "child.route && child.type == 'internal'" class = "uk-grid uk-width-1-1 uk-margin-left" >
2022-01-05 15:41:49 +01:00
< span class = "title uk-padding-remove" > Route: < / span > < span class = "uk-padding-remove uk-margin-left" > {{child.route}}< / span >
2021-12-09 14:52:39 +01:00
< / div >
< / div >
< / div >
< div class = "uk-width-1-5" >
< div class = "uk-flex uk-flex-center" >
< div href = "#" class = "actions" >
2022-01-05 15:41:49 +01:00
< div class = "uk-button action uk-margin-top uk-flex uk-flex-middle" ( click ) = " editMenuItem ( child , true ) " >
2021-12-09 14:52:39 +01:00
< i uk-icon = "pencil" class = "clickable uk-icon" > < / i >
< span class = "uk-margin-small-left" > Edit< / span >
< / div >
2022-01-05 15:41:49 +01:00
< div class = "uk-button action uk-margin-top uk-flex uk-flex-middle" ( click ) = " confirmDeleteMenuItem ( child . _id , true ) " >
2021-12-09 14:52:39 +01:00
< i uk-icon = "trash" class = "clickable uk-icon" > < / i >
< span class = "uk-margin-small-left" > Delete< / span >
< / div >
< / div >
< / div >
< / div >
< / div >
< / li >
< / ul >
2022-01-11 11:05:40 +01:00
< div * ngIf = "childrenMenuItems.length == 0"
2022-01-05 15:41:49 +01:00
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 >
2021-12-09 14:52:39 +01:00
< / div >
< / div >
< / div >
2022-01-05 15:41:49 +01:00
< modal-alert # editModal ( alertOutput ) = " menuItemSaveConfirmed ( $ event ) "
[okDisabled]="menuItemForm & & (menuItemForm.invalid || !menuItemForm.dirty)">
2021-12-17 08:22:07 +01:00
< form * ngIf = "menuItemForm" [ formGroup ] = " menuItemForm " class = "uk grid uk-child-width-1-1" uk-grid >
2021-12-17 14:36:30 +01:00
< div dashboard-input [ formInput ] = " menuItemForm . get ( ' title ' ) " type = "text" label = "Name" placeholder = "Write a name" > < / div >
2022-01-11 16:20:05 +01:00
< div dashboard-input [ formInput ] = " menuItemForm . get ( ' type ' ) " type = "select" label = "Type" placeholder = "Choose a type" [ options ] = " getTypeOptions ( ) " [ tooltip ] = " false " > < / div >
2021-12-17 14:36:30 +01:00
<!-- Workflow for EXTERNAL -->
2022-01-11 12:15:37 +01:00
< 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 >
2021-12-17 14:36:30 +01:00
<!-- Workflow for INTERNAL -->
< div * ngIf = "menuItemForm.get('type').value === 'internal'" >
< div class = "uk-text-center" > Select one of the pages< / div >
2022-01-11 12:15:37 +01:00
< div dashboard-input [ formInput ] = " menuItemForm . get ( ' route ' ) " [ validators ] = " menuItemForm . get ( ' route ' ) . validator " type = "autocomplete" label = "Page" placeholder = "Search all pages" [ options ] = " allPages " [ showOptionsOnEmpty ] = " false " >
2021-12-17 14:36:30 +01:00
< / div >
2021-12-23 08:22:07 +01:00
< 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 >
2022-01-11 11:05:40 +01:00
< 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 >
2021-12-23 08:22:07 +01:00
< div class = "uk-flex uk-flex-right" >
2022-01-13 10:23:27 +01:00
< button [ disabled ] = " ! ( pageForm . get ( ' name ' ) . value & & pageForm . get ( ' route ' ) . value ) " class = "uk-button uk-button-secondary outlined" ( click ) = " createPage ( ) " > Create Page< / button >
2021-12-23 08:22:07 +01:00
< / div >
< / form >
< / div >
2021-12-17 14:36:30 +01:00
< / div >
2021-12-09 14:52:39 +01:00
< / form >
2022-01-05 15:41:49 +01:00
< / modal-alert >
< modal-alert # deleteModal ( alertOutput ) = " confirmedDeleteMenuItem ( $ event ) " > < / modal-alert >