|
1 |
| -import { Component, Injector, OnInit } from '@angular/core'; |
2 |
| -import { AppComponentBase } from '@shared/app-component-base'; |
| 1 | +import {Component, Injector, OnInit} from '@angular/core'; |
| 2 | +import {AppComponentBase} from '@shared/app-component-base'; |
3 | 3 | import {
|
4 |
| - Router, |
5 |
| - RouterEvent, |
6 |
| - NavigationEnd, |
7 |
| - PRIMARY_OUTLET |
| 4 | + Router, |
| 5 | + RouterEvent, |
| 6 | + NavigationEnd, |
| 7 | + PRIMARY_OUTLET |
8 | 8 | } from '@angular/router';
|
9 |
| -import { BehaviorSubject } from 'rxjs'; |
10 |
| -import { filter } from 'rxjs/operators'; |
11 |
| -import { MenuItem } from '@shared/layout/menu-item'; |
| 9 | +import {BehaviorSubject} from 'rxjs'; |
| 10 | +import {filter} from 'rxjs/operators'; |
| 11 | +import {MenuItem} from '@shared/layout/menu-item'; |
12 | 12 |
|
13 | 13 | @Component({
|
14 |
| - selector: 'sidebar-menu', |
15 |
| - templateUrl: './sidebar-menu.component.html' |
| 14 | + selector: 'sidebar-menu', |
| 15 | + templateUrl: './sidebar-menu.component.html' |
16 | 16 | })
|
17 | 17 | export class SidebarMenuComponent extends AppComponentBase implements OnInit {
|
18 |
| - menuItems: MenuItem[]; |
19 |
| - menuItemsMap: { [key: number]: MenuItem } = {}; |
20 |
| - activatedMenuItems: MenuItem[] = []; |
21 |
| - routerEvents: BehaviorSubject<RouterEvent> = new BehaviorSubject(undefined); |
22 |
| - homeRoute = '/app/home'; |
| 18 | + menuItems: MenuItem[]; |
| 19 | + menuItemsMap: { [key: number]: MenuItem } = {}; |
| 20 | + activatedMenuItems: MenuItem[] = []; |
| 21 | + routerEvents: BehaviorSubject<RouterEvent> = new BehaviorSubject(undefined); |
| 22 | + homeRoute = '/app/home'; |
23 | 23 |
|
24 |
| - constructor(injector: Injector, private router: Router) { |
25 |
| - super(injector); |
26 |
| - this.router.events.subscribe(this.routerEvents); |
27 |
| - } |
28 |
| - |
29 |
| - ngOnInit(): void { |
30 |
| - this.menuItems = this.getMenuItems(); |
31 |
| - this.patchMenuItems(this.menuItems); |
32 |
| - this.routerEvents |
33 |
| - .pipe(filter((event) => event instanceof NavigationEnd)) |
34 |
| - .subscribe((event) => { |
35 |
| - const currentUrl = event.url !== '/' ? event.url : this.homeRoute; |
36 |
| - const primaryUrlSegmentGroup = this.router.parseUrl(currentUrl).root |
37 |
| - .children[PRIMARY_OUTLET]; |
38 |
| - if (primaryUrlSegmentGroup) { |
39 |
| - this.activateMenuItems('/' + primaryUrlSegmentGroup.toString()); |
40 |
| - } |
41 |
| - }); |
42 |
| - } |
| 24 | + constructor(injector: Injector, private router: Router) { |
| 25 | + super(injector); |
| 26 | + this.router.events.subscribe(this.routerEvents); |
| 27 | + } |
43 | 28 |
|
44 |
| - getMenuItems(): MenuItem[] { |
45 |
| - return [ |
46 |
| - new MenuItem(this.l('HomePage'), '/app/home', 'fas fa-home'), |
47 |
| - new MenuItem( |
48 |
| - this.l('Tenants'), |
49 |
| - '/app/tenants', |
50 |
| - 'fas fa-building', |
51 |
| - 'Pages.Tenants' |
52 |
| - ), |
53 |
| - new MenuItem( |
54 |
| - this.l('Users'), |
55 |
| - '/app/users', |
56 |
| - 'fas fa-users', |
57 |
| - 'Pages.Users' |
58 |
| - ), |
59 |
| - new MenuItem( |
60 |
| - this.l('Roles'), |
61 |
| - '/app/roles', |
62 |
| - 'fas fa-theater-masks', |
63 |
| - 'Pages.Roles' |
64 |
| - ), |
65 |
| - new MenuItem(this.l('About'), '/app/about', 'fas fa-info-circle'), |
66 |
| - new MenuItem(this.l('MultiLevelMenu'), '', 'fas fa-circle', '', [ |
67 |
| - new MenuItem('ASP.NET Boilerplate', '', 'fas fa-dot-circle', '', [ |
68 |
| - new MenuItem( |
69 |
| - 'Home', |
70 |
| - 'https://aspnetboilerplate.com?ref=abptmpl', |
71 |
| - 'far fa-circle' |
72 |
| - ), |
73 |
| - new MenuItem( |
74 |
| - 'Templates', |
75 |
| - 'https://aspnetboilerplate.com/Templates?ref=abptmpl', |
76 |
| - 'far fa-circle' |
77 |
| - ), |
78 |
| - new MenuItem( |
79 |
| - 'Samples', |
80 |
| - 'https://aspnetboilerplate.com/Samples?ref=abptmpl', |
81 |
| - 'far fa-circle' |
82 |
| - ), |
83 |
| - new MenuItem( |
84 |
| - 'Documents', |
85 |
| - 'https://aspnetboilerplate.com/Pages/Documents?ref=abptmpl', |
86 |
| - 'far fa-circle' |
87 |
| - ), |
88 |
| - ]), |
89 |
| - new MenuItem('ASP.NET Zero', '', 'fas fa-dot-circle', '', [ |
90 |
| - new MenuItem( |
91 |
| - 'Home', |
92 |
| - 'https://aspnetzero.com?ref=abptmpl', |
93 |
| - 'far fa-circle' |
94 |
| - ), |
95 |
| - new MenuItem( |
96 |
| - 'Features', |
97 |
| - 'https://aspnetzero.com/Features?ref=abptmpl', |
98 |
| - 'far fa-circle' |
99 |
| - ), |
100 |
| - new MenuItem( |
101 |
| - 'Pricing', |
102 |
| - 'https://aspnetzero.com/Pricing?ref=abptmpl#pricing', |
103 |
| - 'far fa-circle' |
104 |
| - ), |
105 |
| - new MenuItem( |
106 |
| - 'Faq', |
107 |
| - 'https://aspnetzero.com/Faq?ref=abptmpl', |
108 |
| - 'far fa-circle' |
109 |
| - ), |
110 |
| - new MenuItem( |
111 |
| - 'Documents', |
112 |
| - 'https://aspnetzero.com/Documents?ref=abptmpl', |
113 |
| - 'far fa-circle' |
114 |
| - ) |
115 |
| - ]) |
116 |
| - ]) |
117 |
| - ]; |
118 |
| - } |
| 29 | + ngOnInit(): void { |
| 30 | + this.menuItems = this.getMenuItems(); |
| 31 | + this.patchMenuItems(this.menuItems); |
| 32 | + this.routerEvents |
| 33 | + .pipe(filter((event) => event instanceof NavigationEnd)) |
| 34 | + .subscribe((event) => { |
| 35 | + const currentUrl = event.url !== '/' ? event.url : this.homeRoute; |
| 36 | + const primaryUrlSegmentGroup = this.router.parseUrl(currentUrl).root |
| 37 | + .children[PRIMARY_OUTLET]; |
| 38 | + if (primaryUrlSegmentGroup) { |
| 39 | + this.activateMenuItems('/' + primaryUrlSegmentGroup.toString()); |
| 40 | + } |
| 41 | + }); |
| 42 | + } |
119 | 43 |
|
120 |
| - patchMenuItems(items: MenuItem[], parentId?: number): void { |
121 |
| - items.forEach((item: MenuItem, index: number) => { |
122 |
| - item.id = parentId ? Number(parentId + '' + (index + 1)) : index + 1; |
123 |
| - if (parentId) { |
124 |
| - item.parentId = parentId; |
125 |
| - } |
126 |
| - if (parentId || item.children) { |
127 |
| - this.menuItemsMap[item.id] = item; |
128 |
| - } |
129 |
| - if (item.children) { |
130 |
| - this.patchMenuItems(item.children, item.id); |
131 |
| - } |
132 |
| - }); |
133 |
| - } |
| 44 | + getMenuItems(): MenuItem[] { |
| 45 | + return [ |
| 46 | + new MenuItem(this.l('About'), '/app/about', 'fas fa-info-circle'), |
| 47 | + new MenuItem(this.l('HomePage'), '/app/home', 'fas fa-home'), |
| 48 | + new MenuItem( |
| 49 | + this.l('Roles'), |
| 50 | + '/app/roles', |
| 51 | + 'fas fa-theater-masks', |
| 52 | + 'Pages.Roles' |
| 53 | + ), |
| 54 | + new MenuItem( |
| 55 | + this.l('Tenants'), |
| 56 | + '/app/tenants', |
| 57 | + 'fas fa-building', |
| 58 | + 'Pages.Tenants' |
| 59 | + ), |
| 60 | + new MenuItem( |
| 61 | + this.l('Users'), |
| 62 | + '/app/users', |
| 63 | + 'fas fa-users', |
| 64 | + 'Pages.Users' |
| 65 | + ), |
| 66 | + new MenuItem(this.l('MultiLevelMenu'), '', 'fas fa-circle', '', [ |
| 67 | + new MenuItem('ASP.NET Boilerplate', '', 'fas fa-dot-circle', '', [ |
| 68 | + new MenuItem( |
| 69 | + 'Home', |
| 70 | + 'https://aspnetboilerplate.com?ref=abptmpl', |
| 71 | + 'far fa-circle' |
| 72 | + ), |
| 73 | + new MenuItem( |
| 74 | + 'Templates', |
| 75 | + 'https://aspnetboilerplate.com/Templates?ref=abptmpl', |
| 76 | + 'far fa-circle' |
| 77 | + ), |
| 78 | + new MenuItem( |
| 79 | + 'Samples', |
| 80 | + 'https://aspnetboilerplate.com/Samples?ref=abptmpl', |
| 81 | + 'far fa-circle' |
| 82 | + ), |
| 83 | + new MenuItem( |
| 84 | + 'Documents', |
| 85 | + 'https://aspnetboilerplate.com/Pages/Documents?ref=abptmpl', |
| 86 | + 'far fa-circle' |
| 87 | + ), |
| 88 | + ]), |
| 89 | + new MenuItem('ASP.NET Zero', '', 'fas fa-dot-circle', '', [ |
| 90 | + new MenuItem( |
| 91 | + 'Home', |
| 92 | + 'https://aspnetzero.com?ref=abptmpl', |
| 93 | + 'far fa-circle' |
| 94 | + ), |
| 95 | + new MenuItem( |
| 96 | + 'Features', |
| 97 | + 'https://aspnetzero.com/Features?ref=abptmpl', |
| 98 | + 'far fa-circle' |
| 99 | + ), |
| 100 | + new MenuItem( |
| 101 | + 'Pricing', |
| 102 | + 'https://aspnetzero.com/Pricing?ref=abptmpl#pricing', |
| 103 | + 'far fa-circle' |
| 104 | + ), |
| 105 | + new MenuItem( |
| 106 | + 'Faq', |
| 107 | + 'https://aspnetzero.com/Faq?ref=abptmpl', |
| 108 | + 'far fa-circle' |
| 109 | + ), |
| 110 | + new MenuItem( |
| 111 | + 'Documents', |
| 112 | + 'https://aspnetzero.com/Documents?ref=abptmpl', |
| 113 | + 'far fa-circle' |
| 114 | + ) |
| 115 | + ]) |
| 116 | + ]) |
| 117 | + ]; |
| 118 | + } |
134 | 119 |
|
135 |
| - activateMenuItems(url: string): void { |
136 |
| - this.deactivateMenuItems(this.menuItems); |
137 |
| - this.activatedMenuItems = []; |
138 |
| - const foundedItems = this.findMenuItemsByUrl(url, this.menuItems); |
139 |
| - foundedItems.forEach((item) => { |
140 |
| - this.activateMenuItem(item); |
141 |
| - }); |
142 |
| - } |
| 120 | + patchMenuItems(items: MenuItem[], parentId?: number): void { |
| 121 | + items.forEach((item: MenuItem, index: number) => { |
| 122 | + item.id = parentId ? Number(parentId + '' + (index + 1)) : index + 1; |
| 123 | + if (parentId) { |
| 124 | + item.parentId = parentId; |
| 125 | + } |
| 126 | + if (parentId || item.children) { |
| 127 | + this.menuItemsMap[item.id] = item; |
| 128 | + } |
| 129 | + if (item.children) { |
| 130 | + this.patchMenuItems(item.children, item.id); |
| 131 | + } |
| 132 | + }); |
| 133 | + } |
143 | 134 |
|
144 |
| - deactivateMenuItems(items: MenuItem[]): void { |
145 |
| - items.forEach((item: MenuItem) => { |
146 |
| - item.isActive = false; |
147 |
| - item.isCollapsed = true; |
148 |
| - if (item.children) { |
149 |
| - this.deactivateMenuItems(item.children); |
150 |
| - } |
151 |
| - }); |
152 |
| - } |
| 135 | + activateMenuItems(url: string): void { |
| 136 | + this.deactivateMenuItems(this.menuItems); |
| 137 | + this.activatedMenuItems = []; |
| 138 | + const foundedItems = this.findMenuItemsByUrl(url, this.menuItems); |
| 139 | + foundedItems.forEach((item) => { |
| 140 | + this.activateMenuItem(item); |
| 141 | + }); |
| 142 | + } |
153 | 143 |
|
154 |
| - findMenuItemsByUrl( |
155 |
| - url: string, |
156 |
| - items: MenuItem[], |
157 |
| - foundedItems: MenuItem[] = [] |
158 |
| - ): MenuItem[] { |
159 |
| - items.forEach((item: MenuItem) => { |
160 |
| - if (item.route === url) { |
161 |
| - foundedItems.push(item); |
162 |
| - } else if (item.children) { |
163 |
| - this.findMenuItemsByUrl(url, item.children, foundedItems); |
164 |
| - } |
165 |
| - }); |
166 |
| - return foundedItems; |
167 |
| - } |
| 144 | + deactivateMenuItems(items: MenuItem[]): void { |
| 145 | + items.forEach((item: MenuItem) => { |
| 146 | + item.isActive = false; |
| 147 | + item.isCollapsed = true; |
| 148 | + if (item.children) { |
| 149 | + this.deactivateMenuItems(item.children); |
| 150 | + } |
| 151 | + }); |
| 152 | + } |
168 | 153 |
|
169 |
| - activateMenuItem(item: MenuItem): void { |
170 |
| - item.isActive = true; |
171 |
| - if (item.children) { |
172 |
| - item.isCollapsed = false; |
| 154 | + findMenuItemsByUrl( |
| 155 | + url: string, |
| 156 | + items: MenuItem[], |
| 157 | + foundedItems: MenuItem[] = [] |
| 158 | + ): MenuItem[] { |
| 159 | + items.forEach((item: MenuItem) => { |
| 160 | + if (item.route === url) { |
| 161 | + foundedItems.push(item); |
| 162 | + } else if (item.children) { |
| 163 | + this.findMenuItemsByUrl(url, item.children, foundedItems); |
| 164 | + } |
| 165 | + }); |
| 166 | + return foundedItems; |
173 | 167 | }
|
174 |
| - this.activatedMenuItems.push(item); |
175 |
| - if (item.parentId) { |
176 |
| - this.activateMenuItem(this.menuItemsMap[item.parentId]); |
| 168 | + |
| 169 | + activateMenuItem(item: MenuItem): void { |
| 170 | + item.isActive = true; |
| 171 | + if (item.children) { |
| 172 | + item.isCollapsed = false; |
| 173 | + } |
| 174 | + this.activatedMenuItems.push(item); |
| 175 | + if (item.parentId) { |
| 176 | + this.activateMenuItem(this.menuItemsMap[item.parentId]); |
| 177 | + } |
177 | 178 | }
|
178 |
| - } |
179 | 179 |
|
180 |
| - isMenuItemVisible(item: MenuItem): boolean { |
181 |
| - if (!item.permissionName) { |
182 |
| - return true; |
| 180 | + isMenuItemVisible(item: MenuItem): boolean { |
| 181 | + if (!item.permissionName) { |
| 182 | + return true; |
| 183 | + } |
| 184 | + return this.permission.isGranted(item.permissionName); |
183 | 185 | }
|
184 |
| - return this.permission.isGranted(item.permissionName); |
185 |
| - } |
186 | 186 | }
|
0 commit comments