start on new featured menu items

This commit is contained in:
Alex-Coded4 2022-07-11 10:25:00 +03:00
parent 02bf9abee4
commit 74bcc96847
3 changed files with 123 additions and 65 deletions

View File

@ -1,5 +1,19 @@
<div page-content class="admin-pages"> <div page-content (stickyEmitter)="stickyPageHeader = $event">
<div header> <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">
<admin-tabs tab="menu" [portal]="portal"></admin-tabs>
</div>
</div>
<!-- <div header>
<admin-tabs tab="menu" [portal]="portal"></admin-tabs> <admin-tabs tab="menu" [portal]="portal"></admin-tabs>
<div *ngIf="!showLoading" class="uk-grid" uk-grid> <div *ngIf="!showLoading" class="uk-grid" uk-grid>
<div class="uk-width-1-1"> <div class="uk-width-1-1">
@ -60,13 +74,25 @@
</a> </a>
</div> </div>
</div> </div>
</div> </div> -->
<div inner> <div inner>
<div class="uk-flex uk-flex-right@m uk-flex-center uk-flex-middle uk-grid uk-margin-top" uk-grid>
<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"> <div *ngIf="showLoading" class="uk-position-center">
<loading></loading> <loading></loading>
</div> </div>
<div *ngIf="!showLoading"> <div *ngIf="!showLoading">
<ul *ngIf='activeRootMenuId' class="uk-list submenu-items"> <!-- <ul *ngIf='activeRootMenuId' class="uk-list submenu-items">
<li *ngFor="let child of childrenMenuItems" class="uk-card uk-card-default uk-margin-bottom"> <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-grid uk-grid-divider uk-padding" uk-grid>
<div class="uk-width-4-5"> <div class="uk-width-4-5">
@ -107,7 +133,7 @@
</div> </div>
</div> </div>
</li> </li>
</ul> </ul> -->
<div *ngIf="childrenMenuItems.length == 0 && !activeRootMenu.isFeatured" <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"> 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>No menu items found</div>
@ -119,6 +145,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<modal-alert #editModal (alertOutput)="menuItemSaveConfirmed($event)" <modal-alert #editModal (alertOutput)="menuItemSaveConfirmed($event)"
[okDisabled]="menuItemForm && (menuItemForm.invalid || !menuItemForm.dirty)" classTitle="uk-background-primary uk-light"> [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> <form *ngIf="menuItemForm" [formGroup]="menuItemForm" class="uk grid uk-child-width-1-1" uk-grid>

View File

@ -15,6 +15,10 @@ import {MenuItem} from '../../sharedComponents/menu';
import {SearchInputComponent} from '../../sharedComponents/search-input/search-input.component'; import {SearchInputComponent} from '../../sharedComponents/search-input/search-input.component';
import {Page} from '../../utils/entities/adminTool/page'; import {Page} from '../../utils/entities/adminTool/page';
import {Option} from '../../sharedComponents/input/input.component'; import {Option} from '../../sharedComponents/input/input.component';
import {CommunityInfo} from '../../connect/community/communityInfo';
import {Stakeholder} from '../../monitor/entities/stakeholder';
import {StakeholderService} from '../../monitor/services/stakeholder.service';
import {CommunityService} from '../../connect/community/community.service';
declare var UIkit; declare var UIkit;
@ -45,6 +49,9 @@ export class MenuComponent implements OnInit {
public communities: Portal[] = []; public communities: Portal[] = [];
public portal: string; public portal: string;
public name: string;
public entity: CommunityInfo | Stakeholder;
public showLogo: boolean = true;
public newPageWindowOpen: boolean = false; public newPageWindowOpen: boolean = false;
public showLoading = true; public showLoading = true;
@ -65,11 +72,14 @@ export class MenuComponent implements OnInit {
public properties: EnvProperties = properties; public properties: EnvProperties = properties;
private subscriptions: any[] = []; private subscriptions: any[] = [];
private typeSub: Subscription = null; private typeSub: Subscription = null;
public stickyPageHeader: boolean = false;
constructor(private element: ElementRef, private route: ActivatedRoute, constructor(private element: ElementRef, private route: ActivatedRoute,
private _router: Router, private title: Title, private _router: Router, private title: Title,
private _helpContentService: HelpContentService, private _helpContentService: HelpContentService,
private userManagementService: UserManagementService, private _fb: FormBuilder) { private userManagementService: UserManagementService, private _fb: FormBuilder,
private stakeholderService: StakeholderService,
private communityService: CommunityService) {
} }
ngOnInit() { ngOnInit() {
@ -84,9 +94,28 @@ export class MenuComponent implements OnInit {
this.portal = (this.route.snapshot.data.portal) ? this.route.snapshot.data.portal : this.route.snapshot.params[this.route.snapshot.data.param]; this.portal = (this.route.snapshot.data.portal) ? this.route.snapshot.data.portal : this.route.snapshot.params[this.route.snapshot.data.param];
this.getMenuItems(); this.getMenuItems();
if (this.route.snapshot.data.portal) { if (this.route.snapshot.data.portal) {
this.name = StringUtils.capitalize(this.portal);
this.title.setTitle(StringUtils.capitalize(this.portal) + ' | Menu'); this.title.setTitle(StringUtils.capitalize(this.portal) + ' | Menu');
} else if (this.route.snapshot.params[this.route.snapshot.data.param]) { } else if (this.route.snapshot.params[this.route.snapshot.data.param]) {
this.title.setTitle(this.portal.toUpperCase() + ' | Menu'); // this.title.setTitle(this.portal.toUpperCase() + ' | Menu');
if(this.route.snapshot.data.param === 'stakeholder') {
this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
if(stakeholder) {
this.name = stakeholder.name;
this.entity = stakeholder;
this.title.setTitle(this.name + ' | Menu');
}
}));
} else {
this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(community => {
if(community) {
this.showLogo = false;
this.name = community.shortTitle;
this.entity = community;
this.title.setTitle(this.name + ' | Menu');
}
}));
}
} else { } else {
this.title.setTitle('Administrator Dashboard | Menu'); this.title.setTitle('Administrator Dashboard | Menu');
} }
@ -251,7 +280,7 @@ export class MenuComponent implements OnInit {
}); });
this.isChild = isChild; this.isChild = isChild;
this.addValidatorForUrlOrRoute(); this.addValidatorForUrlOrRoute();
this.menuItemsModalOpen('Create Menu Item', 'Create'); this.menuItemsModalOpen('Add Menu Item', 'Create');
} }
public editMenuItem(menuItem: MenuItem, isChild: boolean = false) { public editMenuItem(menuItem: MenuItem, isChild: boolean = false) {

View File

@ -12,7 +12,9 @@ import { properties } from 'src/environments/environment';
<li *ngIf="isPortalAdmin && !portal" [class.uk-active]="tab === 'portal'"><a routerLink="../portals">Portals</a></li> <li *ngIf="isPortalAdmin && !portal" [class.uk-active]="tab === 'portal'"><a routerLink="../portals">Portals</a></li>
<li [class.uk-active]="tab === 'page'"><a routerLink="../pages">Pages</a></li> <li [class.uk-active]="tab === 'page'"><a routerLink="../pages">Pages</a></li>
<li [class.uk-active]="tab === 'entity'"><a routerLink="../entities">Entities</a></li> <li [class.uk-active]="tab === 'entity'"><a routerLink="../entities">Entities</a></li>
<li *ngIf="env === 'development' && portal && type === 'community'" [class.uk-active]="tab === 'menu'"><a routerLink="../menu">Menu</a></li> <!-- removing the type === 'community' condition below for now -->
<!-- && type === 'community' -->
<li *ngIf="env === 'development' && portal" [class.uk-active]="tab === 'menu'"><a routerLink="../menu">Menu</a></li>
<li *ngIf="isPortalAdmin && !portal" [class.uk-active]="tab === 'class'"><a routerLink="../classes">Classes</a></li> <li *ngIf="isPortalAdmin && !portal" [class.uk-active]="tab === 'class'"><a routerLink="../classes">Classes</a></li>
</ul> </ul>
` `