ClientsModule added to admin dashboard sidebar

Author: RELATO

src/app/admin/admin-routing.module.ts

@@ -9,44 +9,60 @@ const routes: Routes = [
     children: [
       {
         path: '',
-        redirectTo: 'dashboard'
+        redirectTo: 'dashboard',
       },
       {
         path: 'dashboard',
-        loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
+        loadChildren: () =>
+          import('./dashboard/dashboard.module').then(m => m.DashboardModule),
       },
       {
         path: 'charts',
-        loadChildren: () => import('./mat-demos/charts/charts.module').then(m => m.ChartsModule)
+        loadChildren: () =>
+          import('./mat-demos/charts/charts.module').then(m => m.ChartsModule),
       },
       {
         path: 'tables',
-        loadChildren: () => import('./mat-demos/tables/tables.module').then(m => m.TablesModule)
+        loadChildren: () =>
+          import('./mat-demos/tables/tables.module').then(m => m.TablesModule),
       },
       {
         path: 'forms',
-        loadChildren: () => import('./mat-demos/forms/forms.module').then(m => m.FormsModule)
+        loadChildren: () =>
+          import('./mat-demos/forms/forms.module').then(m => m.FormsModule),
       },
       {
         path: 'mat-grid',
-        loadChildren: () => import('./mat-demos/mat-grid/mat-grid.module').then(m => m.MatGridModule)
+        loadChildren: () =>
+          import('./mat-demos/mat-grid/mat-grid.module').then(
+            m => m.MatGridModule
+          ),
       },
       {
         path: 'mat-components',
-        loadChildren:
-          () => import('./mat-components/mat-components.module').then(m => m.MatComponentsModule)
+        loadChildren: () =>
+          import('./mat-components/mat-components.module').then(
+            m => m.MatComponentsModule
+          ),
       },
       {
         path: 'animations',
-        loadChildren:
-          () => import('./mat-demos/animations/animations.module').then(m => m.AnimationsModule)
-      }
-    ]
-  }
+        loadChildren: () =>
+          import('./mat-demos/animations/animations.module').then(
+            m => m.AnimationsModule
+          ),
+      },
+      {
+        path: 'clients',
+        loadChildren: () =>
+          import('../pages/clients/clients.module').then(m => m.ClientsModule),
+      },
+    ],
+  },
 ];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
 export class AdminRoutingModule {}

src/app/admin/layout/side-nav/side-nav.component.html

@@ -14,17 +14,24 @@
   <a mat-list-item [routerLinkActive]="'active'" [routerLink]="['/mat-grid']">
     <mat-icon class="sidenav-icon">grid_on</mat-icon>Flex Grid
   </a>
-  <a mat-list-item [routerLinkActive]="'active'" [routerLink]="['/mat-components']">
+  <a
+    mat-list-item
+    [routerLinkActive]="'active'"
+    [routerLink]="['/mat-components']"
+  >
     <mat-icon class="sidenav-icon">code</mat-icon>Material Components
   </a>
   <a mat-list-item [routerLinkActive]="'active'" [routerLink]="['/animations']">
     <mat-icon class="sidenav-icon">perm_media</mat-icon>Animations
   </a>
+  <a mat-list-item [routerLinkActive]="'active'" [routerLink]="['/clients']">
+    <mat-icon class="sidenav-icon">people</mat-icon>Clients
+  </a>
   <a mat-list-item [routerLinkActive]="'active'" [routerLink]="['/blank-page']">
     <mat-icon class="sidenav-icon">insert_drive_file</mat-icon>Blank Page
   </a>
   <div class="nested-menu">
-    <a mat-list-item (click)="showMenu=!showMenu">
+    <a mat-list-item (click)="showMenu = !showMenu">
       <mat-icon class="sidenav-icon">add</mat-icon>Menu
     </a>
     <ul class="nested submenu" [class.expand]="showMenu">

src/app/app-routing.module.ts

@@ -9,7 +9,7 @@ import { AuthGuard } from './core/auth.guard';
 
 const routes: Routes = [
   {
-    path: 'admin',
+    path: '',
     loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
     canActivate: [AuthGuard],
   },
@@ -18,21 +18,21 @@ const routes: Routes = [
     loadChildren: () => import('./login/login.module').then(m => m.LoginModule),
   },
   {
-    path: '',
+    path: 'home',
     component: HomepageComponent,
   },
   {
     path: 'todos',
     component: TodoPageComponent,
   },
-  {
-    path: 'clients',
-    loadChildren: './pages/clients/clients.module#ClientsModule',
-  },
-  {
-    path: 'algorithms',
-    loadChildren: './pages/algorithms/algorithms.module#AlgorithmsModule',
-  },
+  // {
+  //   path: 'clients',
+  //   loadChildren: './pages/clients/clients.module#ClientsModule',
+  // },
+  // {
+  //   path: 'algorithms',
+  //   loadChildren: './pages/algorithms/algorithms.module#AlgorithmsModule',
+  // },
 
   {
     path: '**',

src/app/pages/clients/containers/clients-page/clients-page.component.html

@@ -1,4 +1,4 @@
-<app-main-layout>
+<div>
   <h1 class="sub-header">
     Clients
     <button mat-stroked-button color="primary" (click)="addItem()">Add</button>
@@ -7,14 +7,11 @@ <h1 class="sub-header">
   <app-clients-list
     [clients]="clients$ | async"
     [loading]="clientsLoading$ | async"
-
     [count]="clientsCount$ | async"
     [offset]="clientsOffset$ | async"
-
     (selectItem)="onItemSelected($event)"
     (editItem)="onItemUpdate($event)"
     (deleteItem)="onItemDelete($event)"
-
     (reload)="onGridUpdate($event)"
   ></app-clients-list>
-</app-main-layout>
+</div>