Skip to content

Commit

Permalink
Add lazy loading for admin components
Browse files Browse the repository at this point in the history
  • Loading branch information
Suryansh5545 committed Sep 2, 2023
1 parent f4ce774 commit 87fc86d
Show file tree
Hide file tree
Showing 13 changed files with 185 additions and 95 deletions.
93 changes: 93 additions & 0 deletions frontend/src/app/admin/admin.module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

// Components
import { SideBarComponent } from './side-bar/side-bar.component';
import { DashboardComponent } from '../admin/dashboard/dashboard.component';
import { TicketsComponent } from '../admin/tickets/tickets.component';
import { TicketDialogComponent } from '../admin/dialog/ticket-dialog/ticket-dialog.component';
import { ScanComponent } from '../admin/scan/scan.component';
import { TransactionsComponent } from '../admin/dialog/transactions/transactions.component';
import { ListComponent } from '../admin/list/list.component';
import { LoginComponent } from '../admin/login/login.component';
import { FormsModule } from '@angular/forms';

// Angular Material
import {MatButtonModule} from '@angular/material/button';
import {MatCardModule} from '@angular/material/card';
import {MatListModule} from '@angular/material/list';
import {MatIconModule} from '@angular/material/icon';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatTableModule} from '@angular/material/table';
import { MatInputModule } from '@angular/material/input';
import { MatDialogModule } from '@angular/material/dialog';
import {MatSelectModule} from '@angular/material/select';

// NPM Module
import { NgxScannerQrcodeModule } from 'ngx-scanner-qrcode';

// Services
import { isAuthGuard } from '../services/authentication/authguard.guard';

const adminRoutes: Routes = [
{ path: 'login', component: LoginComponent },
{
path: '',
component: SideBarComponent,
canActivate: [isAuthGuard], // Apply the AuthGuard to the entire admin path
children: [
{ path: '', pathMatch: 'full', redirectTo: 'dashboard' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'tickets', component: TicketsComponent },
{ path: 'scan', component: ScanComponent },
{ path: 'events', component: ListComponent },
{ path: 'addon', component: ListComponent },
],
},
];




@NgModule({
declarations: [
SideBarComponent,
DashboardComponent,
TicketsComponent,
TicketDialogComponent,
ScanComponent,
TransactionsComponent,
ListComponent,
LoginComponent,
],
imports: [
CommonModule,
MatButtonModule,
MatCardModule,
MatListModule,
MatIconModule,
MatSidenavModule,
MatToolbarModule,
FormsModule,
MatTableModule,
MatInputModule,
MatDialogModule,
NgxScannerQrcodeModule,
MatSelectModule,
RouterModule.forChild(adminRoutes),
],
exports: [
SideBarComponent,
DashboardComponent,
TicketsComponent,
TicketDialogComponent,
ScanComponent,
TransactionsComponent,
ListComponent,
LoginComponent,
RouterModule
]
})
export class AdminModule { }
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Component } from '@angular/core';
import {MediaMatcher} from '@angular/cdk/layout';
import {ChangeDetectorRef, OnDestroy} from '@angular/core';
import { Router } from '@angular/router';
import { EventDetailsService } from '../services/event-details/event-details.service';
import { EventDetailsService } from '../../services/event-details/event-details.service';

@Component({
selector: 'side-bar',
Expand Down
21 changes: 20 additions & 1 deletion frontend/src/app/app-routing.module.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,26 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [];
// Components
import { MaintenanceComponent } from './customer/maintenance/maintenance.component';
import { DeliveryComponent } from './customer/delivery/delivery.component';
import { CheckoutComponent } from './customer/checkout/checkout.component';

// Services
import { isAuthGuard } from './services/authentication/authguard.guard';

const routes: Routes = [
{ path: '', redirectTo: 'checkout', pathMatch: 'full' },
{ path: 'checkout', component: CheckoutComponent },
{ path: 'maintenance', component: MaintenanceComponent },
{ path: 'delivery/:ticketId', component: DeliveryComponent },
{
path: 'admin',
loadChildren: () =>
import('./admin/admin.module').then((m) => m.AdminModule),
canActivate: [isAuthGuard], // Apply the AuthGuard to the entire admin path
},
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
Expand Down
98 changes: 6 additions & 92 deletions frontend/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,122 +3,36 @@ import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { CustomerModule } from './customer/customer.module';
import { AdminModule } from './admin/admin.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { Routes , RouterModule } from '@angular/router';
import { CheckoutComponent } from './customer/checkout/checkout.component';
import { SideBarComponent } from './side-bar/side-bar.component';
import { DashboardComponent } from './admin/dashboard/dashboard.component';
import { TicketsComponent } from './admin/tickets/tickets.component';
import { TicketDialogComponent } from './admin/dialog/ticket-dialog/ticket-dialog.component';
import { ScanComponent } from './admin/scan/scan.component';
import { TransactionsComponent } from './admin/dialog/transactions/transactions.component';
import { MaintenanceComponent } from './maintenance/maintenance.component';
import { DeliveryComponent } from './customer/delivery/delivery.component';

// Angular Material
import {MatButtonModule} from '@angular/material/button';
import {MatCardModule} from '@angular/material/card';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatListModule} from '@angular/material/list';
import {MatIconModule} from '@angular/material/icon';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatTableModule} from '@angular/material/table';
import { MatInputModule } from '@angular/material/input';
import { MatDialogModule } from '@angular/material/dialog';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatSelectModule} from '@angular/material/select';

// Font Awesome
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';

// NPM Module
import { NgxScannerQrcodeModule } from 'ngx-scanner-qrcode';
import { ListComponent } from './admin/list/list.component';
import { LoginComponent } from './admin/login/login.component';

// Services
import { ApiService, httpInterceptorProviders } from './services/api.service/api.service.component';
import { EventDetailsService } from './services/event-details/event-details.service';
import { isAtuhGuard } from './services/authentication/authguard.guard';
import { HttpinterceptorService } from './services/interceptor/httpinterceptor.service';

const routes: Routes = [
{ path: 'login', component: LoginComponent},
{ path: '', redirectTo: 'checkout', pathMatch: 'full' },
{ path: 'checkout', component: CheckoutComponent },
{
path: 'admin',
component: SideBarComponent, // AdminComponent will be displayed in the main router-outlet
canActivate: [isAtuhGuard],
children: [
{ path: '', pathMatch: 'full', redirectTo: 'dashboard' }, // Redirect to dashboard as the default child route for /admin
{ path: 'dashboard', component: DashboardComponent }, // DashboardComponent will be displayed in the router-outlet of AdminComponent
{ path: 'tickets', component: TicketsComponent },
{ path: 'scan', component: ScanComponent },
{ path: 'events', component: ListComponent },
{ path: 'addon', component: ListComponent },
],
},
{ path: 'maintenance', component: MaintenanceComponent },
{ path: 'delivery/:ticketId', component: DeliveryComponent },
];



@NgModule({
declarations: [
AppComponent,
CheckoutComponent,
SideBarComponent,
DashboardComponent,
TicketsComponent,
TicketDialogComponent,
ScanComponent,
TransactionsComponent,
ListComponent,
LoginComponent,
MaintenanceComponent,
DeliveryComponent,
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
CustomerModule,
AdminModule,
HttpClientModule,
BrowserAnimationsModule,
MatButtonModule,
MatCardModule,
MatCheckboxModule,
MatFormFieldModule,
MatListModule,
MatIconModule,
FontAwesomeModule,
MatSidenavModule,
MatToolbarModule,
FormsModule,
MatTableModule,
MatInputModule,
MatDialogModule,
MatProgressSpinnerModule,
MatSnackBarModule,
NgxScannerQrcodeModule,
MatSlideToggleModule,
MatSelectModule,
RouterModule.forRoot(routes),
],
providers: [ApiService, EventDetailsService,
{ provide: HTTP_INTERCEPTORS, useClass: HttpinterceptorService, multi: true }, httpInterceptorProviders ],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(library: FaIconLibrary) {
library.addIconPacks(fas, far);
}
}
export class AppModule { }
64 changes: 64 additions & 0 deletions frontend/src/app/customer/customer.module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

// Components
import { CheckoutComponent } from './checkout/checkout.component';
import { DeliveryComponent } from './delivery/delivery.component';
import { MaintenanceComponent } from './maintenance/maintenance.component';

// Angular Material
import {MatButtonModule} from '@angular/material/button';
import {MatCardModule} from '@angular/material/card';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatListModule} from '@angular/material/list';
import {MatIconModule} from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { FormsModule } from '@angular/forms';

// Font Awesome
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';


const customerRoutes = [
{ path: 'maintenance', component: MaintenanceComponent },
{ path: 'delivery/:ticketId', component: DeliveryComponent },
{ path: 'checkout', component: CheckoutComponent },
];



@NgModule({
declarations: [
CheckoutComponent,
DeliveryComponent,
MaintenanceComponent
],
imports: [
CommonModule,
MatButtonModule,
MatListModule,
MatIconModule,
MatCardModule,
MatCheckboxModule,
MatInputModule,
MatProgressSpinnerModule,
FontAwesomeModule,
FormsModule,
RouterModule.forChild(customerRoutes)
],
exports: [
CheckoutComponent,
DeliveryComponent,
MaintenanceComponent,
RouterModule
]
})
export class CustomerModule {
constructor(library: FaIconLibrary) {
library.addIconPacks(fas, far);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,6 @@ class AuthGuard {
}
}

export const isAtuhGuard: CanActivateFn = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean => {
export const isAuthGuard: CanActivateFn = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean => {
return inject(AuthGuard).canActivate(route, state) as boolean;
}

0 comments on commit 87fc86d

Please sign in to comment.