WIP
This commit is contained in:
Chris Chen
@@ -1,67 +0,0 @@
|
||||
<kendo-drawer-container>
|
||||
<kendo-drawer [mode]="'overlay'" [expanded]="layoutService.drawerExpanded()" [width]="280">
|
||||
|
||||
<kendo-drawer-content>
|
||||
<div class="drawer-content">
|
||||
<div class="drawer-header">
|
||||
<h3>User Portal</h3>
|
||||
<p>ROLCC AC Portal</p>
|
||||
</div>
|
||||
|
||||
<nav class="drawer-nav">
|
||||
<div class="nav-section">
|
||||
<h4>Main</h4>
|
||||
<button *ngFor="let item of mainNavItems" kendoButton
|
||||
[fillMode]="item.active ? 'solid' : 'flat'" [themeColor]="item.active ? 'primary' : 'base'"
|
||||
[svgIcon]="item.icon" class="nav-button" (click)="navigateTo(item.path)">
|
||||
{{ item.text }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<h4>Management</h4>
|
||||
<button *ngFor="let item of managementNavItems" kendoButton
|
||||
[fillMode]="item.active ? 'solid' : 'flat'" [themeColor]="item.active ? 'primary' : 'base'"
|
||||
[svgIcon]="item.icon" class="nav-button" (click)="navigateTo(item.path)">
|
||||
{{ item.text }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<h4>Support</h4>
|
||||
<button *ngFor="let item of supportNavItems" kendoButton
|
||||
[fillMode]="item.active ? 'solid' : 'flat'" [themeColor]="item.active ? 'primary' : 'base'"
|
||||
[svgIcon]="item.icon" class="nav-button" (click)="navigateTo(item.path)">
|
||||
{{ item.text }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="nav-section" *ngIf="showMemberAdminSection || showUserAdminSection">
|
||||
<h4>Administration</h4>
|
||||
<button *ngFor="let item of memberAdminNavItems" kendoButton
|
||||
[fillMode]="item.active ? 'solid' : 'flat'" [themeColor]="item.active ? 'primary' : 'base'"
|
||||
[svgIcon]="item.icon" class="nav-button" (click)="navigateTo(item.path)">
|
||||
{{ item.text }}
|
||||
</button>
|
||||
<ng-container *ngIf="showUserAdminSection">
|
||||
<button *ngFor="let item of userAdminNavItems" kendoButton
|
||||
[fillMode]="item.active ? 'solid' : 'flat'" [themeColor]="item.active ? 'primary' : 'base'"
|
||||
[svgIcon]="item.icon" class="nav-button" (click)="navigateTo(item.path)">
|
||||
{{ item.text }}
|
||||
</button>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<div class="nav-section" *ngIf="showFinanceSection">
|
||||
<h4>Finance</h4>
|
||||
<button *ngFor="let item of financeNavItems" kendoButton
|
||||
[fillMode]="item.active ? 'solid' : 'flat'" [themeColor]="item.active ? 'primary' : 'base'"
|
||||
[svgIcon]="item.icon" class="nav-button" (click)="navigateTo(item.path)">
|
||||
{{ item.text }}
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</kendo-drawer-content>
|
||||
</kendo-drawer>
|
||||
</kendo-drawer-container>
|
||||
@@ -1,66 +0,0 @@
|
||||
.drawer-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.drawer-header {
|
||||
padding: 1.5rem 1rem;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
|
||||
h3 {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-nav {
|
||||
flex: 1;
|
||||
padding: 1rem 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.nav-section {
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
padding: 0 1rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
padding: 0.75rem 1rem;
|
||||
margin: 0.125rem 0;
|
||||
border-radius: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
&.k-button-solid {
|
||||
background-color: #e3f2fd;
|
||||
color: #1976d2;
|
||||
|
||||
&:hover {
|
||||
background-color: #bbdefb;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,136 +0,0 @@
|
||||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Router, NavigationEnd, RouterModule } from '@angular/router';
|
||||
import { LayoutModule } from '@progress/kendo-angular-layout';
|
||||
import { ButtonsModule } from '@progress/kendo-angular-buttons';
|
||||
import { IconsModule } from '@progress/kendo-angular-icons';
|
||||
import { SVGIcon, homeIcon, calendarIcon, userIcon, groupIcon } from '@progress/kendo-svg-icons';
|
||||
import { LayoutService } from '../../../../layout/services/layout.service';
|
||||
import { AuthService, UserInfo } from '../../../../shared/services/auth.service';
|
||||
import { Subject, takeUntil, filter } from 'rxjs';
|
||||
|
||||
interface NavItem {
|
||||
text: string;
|
||||
icon: SVGIcon;
|
||||
path: string;
|
||||
active?: boolean;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-user-navbar',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule,
|
||||
LayoutModule,
|
||||
ButtonsModule,
|
||||
IconsModule
|
||||
],
|
||||
templateUrl: './user-navbar.component.html',
|
||||
styleUrls: ['./user-navbar.component.scss']
|
||||
})
|
||||
export class UserNavbarComponent implements OnInit, OnDestroy {
|
||||
public homeIcon: SVGIcon = homeIcon;
|
||||
public calendarIcon: SVGIcon = calendarIcon;
|
||||
public peopleIcon: SVGIcon = userIcon; // Using userIcon as fallback
|
||||
public bedIcon: SVGIcon = userIcon; // Using userIcon as fallback
|
||||
public userIcon: SVGIcon = userIcon;
|
||||
public pillIcon: SVGIcon = userIcon; // Using userIcon as fallback
|
||||
public chartIcon: SVGIcon = userIcon; // Using userIcon as fallback
|
||||
public buildingIcon: SVGIcon = userIcon; // Using userIcon as fallback
|
||||
public creditCardIcon: SVGIcon = userIcon; // Using userIcon as fallback
|
||||
public supportIcon: SVGIcon = userIcon; // Using userIcon as fallback
|
||||
|
||||
public mainNavItems: NavItem[] = [
|
||||
{ text: 'Dashboard', icon: this.homeIcon, path: '/user-portal/dashboard' },
|
||||
{ text: 'Schedule', icon: this.calendarIcon, path: '/user-portal/schedule' },
|
||||
{ text: 'Patients', icon: this.peopleIcon, path: '/user-portal/patients' }
|
||||
];
|
||||
|
||||
public managementNavItems: NavItem[] = [
|
||||
{ text: 'Bed Management', icon: this.bedIcon, path: '/user-portal/bed-management' },
|
||||
{ text: 'Staff', icon: this.userIcon, path: '/user-portal/staff' },
|
||||
{ text: 'Pharmacy', icon: this.pillIcon, path: '/user-portal/pharmacy' },
|
||||
{ text: 'Reports', icon: this.chartIcon, path: '/user-portal/reports' },
|
||||
{ text: 'Departments', icon: this.buildingIcon, path: '/user-portal/departments' },
|
||||
{ text: 'Payments', icon: this.creditCardIcon, path: '/user-portal/payments' }
|
||||
];
|
||||
|
||||
public supportNavItems: NavItem[] = [
|
||||
{ text: 'Support', icon: this.supportIcon, path: '/user-portal/support' }
|
||||
];
|
||||
|
||||
public memberAdminNavItems: NavItem[] = [
|
||||
{ text: 'Members', icon: groupIcon, path: '/user-portal/admin/members' },
|
||||
];
|
||||
|
||||
public userAdminNavItems: NavItem[] = [
|
||||
{ text: 'User Management', icon: userIcon, path: '/user-portal/admin/users' },
|
||||
];
|
||||
|
||||
public financeNavItems: NavItem[] = [
|
||||
{ text: 'Offering Entry', icon: this.creditCardIcon, path: '/user-portal/finance/offering-session' },
|
||||
{ text: 'Givings', icon: this.chartIcon, path: '/user-portal/finance/givings' },
|
||||
{ text: 'Giving Types', icon: this.buildingIcon, path: '/user-portal/finance/giving-categories' },
|
||||
];
|
||||
|
||||
public showMemberAdminSection = false;
|
||||
public showUserAdminSection = false;
|
||||
public showFinanceSection = false;
|
||||
|
||||
private destroy$ = new Subject<void>();
|
||||
|
||||
constructor(
|
||||
public layoutService: LayoutService,
|
||||
private router: Router,
|
||||
private authService: AuthService
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
// Listen to route changes to update active states
|
||||
this.router.events
|
||||
.pipe(
|
||||
filter(event => event instanceof NavigationEnd),
|
||||
takeUntil(this.destroy$)
|
||||
)
|
||||
.subscribe((event: NavigationEnd) => {
|
||||
this.updateActiveStates(event.url);
|
||||
});
|
||||
|
||||
// Set initial active state
|
||||
this.updateActiveStates(this.router.url);
|
||||
|
||||
this.authService.currentUser$.pipe(takeUntil(this.destroy$)).subscribe(user => {
|
||||
const roles = user?.roles ?? [];
|
||||
this.showMemberAdminSection = roles.some(r => r === 'super_admin' || r === 'secretary');
|
||||
this.showUserAdminSection = roles.includes('super_admin');
|
||||
this.showFinanceSection = roles.some(r => r === 'finance' || r === 'super_admin');
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
|
||||
public navigateTo(path: string): void {
|
||||
this.router.navigate([path]);
|
||||
this.layoutService.closeDrawer();
|
||||
}
|
||||
|
||||
private updateActiveStates(currentUrl: string): void {
|
||||
// Reset all active states
|
||||
[...this.mainNavItems, ...this.managementNavItems, ...this.supportNavItems,
|
||||
...this.memberAdminNavItems, ...this.userAdminNavItems, ...this.financeNavItems]
|
||||
.forEach(item => item.active = false);
|
||||
|
||||
// Set active state for current route
|
||||
const activeItem = [...this.mainNavItems, ...this.managementNavItems, ...this.supportNavItems,
|
||||
...this.memberAdminNavItems, ...this.userAdminNavItems, ...this.financeNavItems]
|
||||
.find(item => currentUrl.startsWith(item.path));
|
||||
|
||||
if (activeItem) {
|
||||
activeItem.active = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user