Merge menu service & layout service
This commit is contained in:
@@ -3,7 +3,7 @@ import { NavigationEnd, Router, RouterModule } from '@angular/router';
|
|||||||
import { animate, state, style, transition, trigger } from '@angular/animations';
|
import { animate, state, style, transition, trigger } from '@angular/animations';
|
||||||
import { Subscription } from 'rxjs';
|
import { Subscription } from 'rxjs';
|
||||||
import { filter } from 'rxjs/operators';
|
import { filter } from 'rxjs/operators';
|
||||||
import { MenuService } from '@/src/service/layout/menu.service';
|
import { LayoutService } from '@/src/service/layout/layout.service';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { RippleModule } from 'primeng/ripple';
|
import { RippleModule } from 'primeng/ripple';
|
||||||
import { MenuItem} from 'primeng/api';
|
import { MenuItem} from 'primeng/api';
|
||||||
@@ -49,7 +49,7 @@ import { MenuItem} from 'primeng/api';
|
|||||||
transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
|
transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
|
||||||
])
|
])
|
||||||
],
|
],
|
||||||
providers: [MenuService],
|
providers: [LayoutService],
|
||||||
})
|
})
|
||||||
export class AppMenuItem {
|
export class AppMenuItem {
|
||||||
|
|
||||||
@@ -69,8 +69,8 @@ export class AppMenuItem {
|
|||||||
|
|
||||||
key: string = "";
|
key: string = "";
|
||||||
|
|
||||||
constructor(public router: Router, private menuService: MenuService) {
|
constructor(public router: Router, private layoutService: LayoutService) {
|
||||||
this.menuSourceSubscription = this.menuService.menuSource$.subscribe(value => {
|
this.menuSourceSubscription = this.layoutService.menuSource$.subscribe(value => {
|
||||||
Promise.resolve(null).then(() => {
|
Promise.resolve(null).then(() => {
|
||||||
if (value.routeEvent) {
|
if (value.routeEvent) {
|
||||||
this.active = (value.key === this.key || value.key.startsWith(this.key + '-')) ? true : false;
|
this.active = (value.key === this.key || value.key.startsWith(this.key + '-')) ? true : false;
|
||||||
@@ -83,7 +83,7 @@ export class AppMenuItem {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
this.menuResetSubscription = this.menuService.resetSource$.subscribe(() => {
|
this.menuResetSubscription = this.layoutService.resetSource$.subscribe(() => {
|
||||||
this.active = false;
|
this.active = false;
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -107,7 +107,7 @@ export class AppMenuItem {
|
|||||||
let activeRoute = this.router.isActive(this.item.routerLink[0], { paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' });
|
let activeRoute = this.router.isActive(this.item.routerLink[0], { paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' });
|
||||||
|
|
||||||
if (activeRoute) {
|
if (activeRoute) {
|
||||||
this.menuService.onMenuStateChange({ key: this.key, routeEvent: true });
|
this.layoutService.onMenuStateChange({ key: this.key, routeEvent: true });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -128,7 +128,7 @@ export class AppMenuItem {
|
|||||||
this.active = !this.active;
|
this.active = !this.active;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.menuService.onMenuStateChange({ key: this.key });
|
this.layoutService.onMenuStateChange({ key: this.key });
|
||||||
}
|
}
|
||||||
|
|
||||||
get submenuAnimation() {
|
get submenuAnimation() {
|
||||||
|
|||||||
@@ -17,6 +17,11 @@ interface LayoutState {
|
|||||||
menuHoverActive?: boolean;
|
menuHoverActive?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface MenuChangeEvent {
|
||||||
|
key: string;
|
||||||
|
routeEvent?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: 'root',
|
providedIn: 'root',
|
||||||
})
|
})
|
||||||
@@ -45,6 +50,14 @@ export class LayoutService {
|
|||||||
|
|
||||||
private overlayOpen = new Subject<any>();
|
private overlayOpen = new Subject<any>();
|
||||||
|
|
||||||
|
private menuSource = new Subject<MenuChangeEvent>();
|
||||||
|
|
||||||
|
private resetSource = new Subject();
|
||||||
|
|
||||||
|
menuSource$ = this.menuSource.asObservable();
|
||||||
|
|
||||||
|
resetSource$ = this.resetSource.asObservable();
|
||||||
|
|
||||||
configUpdate$ = this.configUpdate.asObservable();
|
configUpdate$ = this.configUpdate.asObservable();
|
||||||
|
|
||||||
overlayOpen$ = this.overlayOpen.asObservable();
|
overlayOpen$ = this.overlayOpen.asObservable();
|
||||||
@@ -151,4 +164,12 @@ export class LayoutService {
|
|||||||
this._config = { ...this.layoutConfig() };
|
this._config = { ...this.layoutConfig() };
|
||||||
this.configUpdate.next(this.layoutConfig());
|
this.configUpdate.next(this.layoutConfig());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onMenuStateChange(event: MenuChangeEvent) {
|
||||||
|
this.menuSource.next(event);
|
||||||
|
}
|
||||||
|
|
||||||
|
reset() {
|
||||||
|
this.resetSource.next(true);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,27 +0,0 @@
|
|||||||
import { Injectable } from '@angular/core';
|
|
||||||
import { Subject } from 'rxjs';
|
|
||||||
|
|
||||||
interface MenuChangeEvent {
|
|
||||||
key: string;
|
|
||||||
routeEvent?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
@Injectable({
|
|
||||||
providedIn: 'root'
|
|
||||||
})
|
|
||||||
export class MenuService {
|
|
||||||
|
|
||||||
private menuSource = new Subject<MenuChangeEvent>();
|
|
||||||
private resetSource = new Subject();
|
|
||||||
|
|
||||||
menuSource$ = this.menuSource.asObservable();
|
|
||||||
resetSource$ = this.resetSource.asObservable();
|
|
||||||
|
|
||||||
onMenuStateChange(event: MenuChangeEvent) {
|
|
||||||
this.menuSource.next(event);
|
|
||||||
}
|
|
||||||
|
|
||||||
reset() {
|
|
||||||
this.resetSource.next(true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user