Start on dynamic menu for connect-admin - dev only
This commit is contained in:
parent
ca430fd89f
commit
edad40ad0b
|
|
@ -0,0 +1,12 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {MenuComponent} from "./menu.component";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild([
|
||||
{ path: '',component: MenuComponent}
|
||||
])
|
||||
]
|
||||
})
|
||||
export class MenuRoutingModule { }
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<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 [class.uk-active]="filterForm.get('status').value === 'resources'" class="uk-visible-toggle uk-position-relative uk-padding-remove-horizontal">
|
||||
<span>
|
||||
<a (click)="filterForm.get('status').setValue('resources')">
|
||||
<span class="title">Resourses</span>
|
||||
</a>
|
||||
<span class="uk-invisible-hover uk-position-center-right color">
|
||||
<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">
|
||||
<li>
|
||||
<a>Edit</a>
|
||||
</li>
|
||||
<hr class="uk-nav-divider">
|
||||
<li>
|
||||
<a>Delete</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="uk-visible-toggle">
|
||||
<span class="clickable">
|
||||
<span class="uk-icon-button small portal-icon-button">
|
||||
<icon name="add"></icon>
|
||||
</span>
|
||||
<span class="space uk-hidden-hover">
|
||||
Create new menu item
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div inner>
|
||||
<div *ngIf="showLoading" class="uk-position-center">
|
||||
<loading></loading>
|
||||
</div>
|
||||
<div *ngIf="!showLoading">
|
||||
<ul class="uk-list submenu-items">
|
||||
<!-- <li class="uk-card uk-card-default uk-margin-bottom">
|
||||
<div class="uk-grid uk-grid-divider uk-padding" uk-grid>
|
||||
Submenu item 1
|
||||
</div>
|
||||
</li> -->
|
||||
<li 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>
|
||||
<input type="checkbox" id="" class="checkBox" name="" value="">
|
||||
</div>
|
||||
<div class="uk-width-expand uk-margin-medium-bottom">
|
||||
Name and info
|
||||
</div>
|
||||
<div class="uk-grid uk-width-1-1 uk-margin-left">
|
||||
Additional info
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-1-5">
|
||||
<div class="uk-flex uk-flex-center">
|
||||
<div href="#" class="actions">
|
||||
<div class="uk-button action uk-margin-top uk-flex uk-flex-middle" (click)="editMenuItem()">
|
||||
<i uk-icon="pencil" class="clickable uk-icon"></i>
|
||||
<span class="uk-margin-small-left"> Edit</span>
|
||||
</div>
|
||||
<div class="uk-button action uk-margin-top uk-flex uk-flex-middle" (click)="deleteMenuItem()">
|
||||
<i uk-icon="trash" class="clickable uk-icon"></i>
|
||||
<span class="uk-margin-small-left"> Delete</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<modal-alert #editModal>
|
||||
<form>
|
||||
|
||||
</form>
|
||||
</modal-alert>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
|
||||
import {ActivatedRoute, Router} from '@angular/router';
|
||||
import {HelpContentService} from '../../services/help-content.service';
|
||||
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
|
||||
import {Portal} from '../../utils/entities/adminTool/portal';
|
||||
import {EnvProperties} from '../../utils/properties/env-properties';
|
||||
import {Session} from '../../login/utils/helper.class';
|
||||
import {UserManagementService} from '../../services/user-management.service';
|
||||
import {Subscriber} from "rxjs";
|
||||
import {properties} from "../../../../environments/environment";
|
||||
import {StringUtils} from "../../utils/string-utils.class";
|
||||
import {Title} from "@angular/platform-browser";
|
||||
import {AlertModal} from '../../utils/modal/alert';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'menuSelector',
|
||||
templateUrl: './menu.component.html',
|
||||
})
|
||||
export class MenuComponent implements OnInit {
|
||||
|
||||
@ViewChild('editModal') editModal: AlertModal;
|
||||
@ViewChild('deleteModal') deleteModal: AlertModal;
|
||||
|
||||
public keyword = '';
|
||||
|
||||
public communities: Portal[] = [];
|
||||
public portal: string;
|
||||
|
||||
public properties: EnvProperties = properties;
|
||||
|
||||
public showLoading = true;
|
||||
public isPortalAdministrator = null;
|
||||
public filterForm: FormGroup;
|
||||
private subscriptions: any[] = [];
|
||||
|
||||
constructor(private element: ElementRef, private route: ActivatedRoute,
|
||||
private _router: Router, private title: Title,
|
||||
private _helpContentService: HelpContentService,
|
||||
private userManagementService: UserManagementService, private _fb: FormBuilder) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.filterForm = this._fb.group({
|
||||
keyword: [''],
|
||||
status: ['resources', Validators.required]
|
||||
});
|
||||
this.userManagementService.getUserInfo().subscribe(user => {
|
||||
this.portal = (this.route.snapshot.data.portal) ? this.route.snapshot.data.portal : this.route.snapshot.params[this.route.snapshot.data.param];
|
||||
if (this.route.snapshot.data.portal) {
|
||||
this.title.setTitle(StringUtils.capitalize(this.portal) + ' | Menu');
|
||||
} else if (this.route.snapshot.params[this.route.snapshot.data.param]) {
|
||||
this.title.setTitle(this.portal.toUpperCase() + ' | Menu');
|
||||
} else {
|
||||
this.title.setTitle('Administrator Dashboard | Menu');
|
||||
}
|
||||
this.isPortalAdministrator = Session.isPortalAdministrator(user) && !this.portal;
|
||||
});
|
||||
this.showLoading = false;
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.subscriptions.forEach(value => {
|
||||
if (value instanceof Subscriber) {
|
||||
value.unsubscribe();
|
||||
} else if (value instanceof Function) {
|
||||
value();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public editMenuItem() {
|
||||
console.log('Edit menu item');
|
||||
this.menuItemsModalOpen('Edit Menu Item', 'Save Changers');
|
||||
}
|
||||
|
||||
public deleteMenuItem() {
|
||||
console.log('Delete menu item');
|
||||
}
|
||||
|
||||
private menuItemsModalOpen(title: string, yesBtn: string) {
|
||||
this.editModal.cancelButton = true;
|
||||
this.editModal.okButton = true;
|
||||
this.editModal.okButtonLeft = false;
|
||||
this.editModal.alertTitle = title;
|
||||
this.editModal.okButtonText = yesBtn;
|
||||
this.editModal.open();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {MenuComponent} from './menu.component';
|
||||
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
|
||||
import {AlertModalModule} from '../../utils/modal/alertModal.module';
|
||||
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
|
||||
import {AdminToolServiceModule} from "../../services/adminToolService.module";
|
||||
import {InputModule} from "../../sharedComponents/input/input.module";
|
||||
import {PageContentModule} from "../sharedComponents/page-content/page-content.module";
|
||||
import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module";
|
||||
import {MenuRoutingModule} from "./menu-routing.module";
|
||||
import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
|
||||
import {IconsModule} from "../../utils/icons/icons.module";
|
||||
import {IconsService} from "../../utils/icons/icons.service";
|
||||
import {add} from "../../utils/icons/icons";
|
||||
import {LoadingModule} from "../../utils/loading/loading.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, RouterModule, FormsModule, AdminToolServiceModule,
|
||||
AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, InputModule, PageContentModule, AdminTabsModule, MenuRoutingModule, SearchInputModule, IconsModule, LoadingModule
|
||||
],
|
||||
declarations: [MenuComponent],
|
||||
exports: [MenuComponent]
|
||||
})
|
||||
export class MenuModule {
|
||||
constructor(private iconsService: IconsService) {
|
||||
this.iconsService.registerIcons([add]);
|
||||
}
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@ import {Session, User} from "../../../login/utils/helper.class";
|
|||
import {UserManagementService} from "../../../services/user-management.service";
|
||||
import {Subscriber} from "rxjs";
|
||||
import {ActivatedRoute} from "@angular/router";
|
||||
import {HelperFunctions} from "../../../utils/HelperFunctions.class";
|
||||
import { properties } from 'src/environments/environment';
|
||||
|
||||
@Component({
|
||||
selector: 'admin-tabs',
|
||||
|
|
@ -12,6 +12,7 @@ import {HelperFunctions} from "../../../utils/HelperFunctions.class";
|
|||
<li *ngIf="isPortalAdmin && !portal" [class.uk-active]="tab === 'portal'"><a routerLink="../portals"><span class="title">Portals</span></a></li>
|
||||
<li [class.uk-active]="tab === 'page'"><a routerLink="../pages"><span class="title">Pages</span></a></li>
|
||||
<li [class.uk-active]="tab === 'entity'"><a routerLink="../entities"><span class="title">Entities</span></a></li>
|
||||
<li *ngIf="env == 'development'" [class.uk-active]="tab === 'menu'"><a routerLink="../menu"><span class="title">Menu</span></a></li>
|
||||
<li *ngIf="isPortalAdmin && !portal" [class.uk-active]="tab === 'class'"><a routerLink="../classes"><span class="title">Classes</span></a></li>
|
||||
</ul>
|
||||
`
|
||||
|
|
@ -25,7 +26,9 @@ export class AdminTabsComponent implements OnInit {
|
|||
@Input()
|
||||
public user: User;
|
||||
@Input()
|
||||
public tab: "portal"| "page" | "entity" | "class" = 'page';
|
||||
public tab: "portal" | "page" | "entity" | "menu" | "class" = 'page';
|
||||
|
||||
public env = properties.environment;
|
||||
|
||||
private subscriptions: any[] = [];
|
||||
constructor(private route: ActivatedRoute, private userManagementService: UserManagementService) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue