Merge pull request #1272 from alex-bu-93/admin-clean-up

Add - admin modules clean up

Author: kirjs

apps/codelab/src/app/admin/admin.component.css renamed to apps/codelab/src/app/admin/admin-layout/admin-layout.component.css

@@ -4,6 +4,6 @@
   margin: 0 auto;
 }
 
-.wrapper {
-  margin-top: 20px;
+nav {
+  margin-bottom: 20px;
 }

apps/codelab/src/app/admin/admin-layout/admin-layout.component.html

@@ -0,0 +1,15 @@
+<mat-card appearance="outlined">
+  <h2>Angular Codelab 🔥 Admin</h2>
+  <nav mat-tab-nav-bar [tabPanel]="tabPanel">
+    <a *ngFor="let link of ['users', 'feedback', 'content',]"
+       mat-tab-link
+       routerLinkActive
+       #rla="routerLinkActive"
+       [routerLink]="link"
+       [active]="rla.isActive">
+      {{ link | titlecase }}
+    </a>
+  </nav>
+  <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
+  <router-outlet></router-outlet>
+</mat-card>

apps/codelab/src/app/admin/admin-layout/admin-layout.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'slides-admin-layout',
+  templateUrl: './admin-layout.component.html',
+  styleUrls: ['./admin-layout.component.css']
+})
+export class AdminLayoutComponent {
+
+}

apps/codelab/src/app/admin/admin-layout/admin-layout.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { MatCardModule } from '@angular/material/card';
+import { MatTabsModule } from '@angular/material/tabs';
+import { AdminLayoutComponent } from './admin-layout.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatCardModule,
+    MatTabsModule,
+    RouterModule
+  ],
+  declarations: [AdminLayoutComponent]
+})
+export class AdminLayoutModule {
+}

apps/codelab/src/app/admin/admin-layout/index.ts

@@ -0,0 +1,2 @@
+export * from './admin-layout.component';
+export * from './admin-layout.module';

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

@@ -1,28 +1,32 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatCardModule } from '@angular/material/card';
-import { MatTabsModule } from '@angular/material/tabs';
-import { AdminComponent } from './admin.component';
-import { AdminRoutingModule } from './admin-routing.module';
-import { FeedbackModule } from './feedback/feedback.module';
-import { UsersModule } from './users/users.module';
-import { ContentModule } from './content/presentation-editor/content.module';
-import { PreviewModule } from './content/presentation-editor/preview/preview.module';
-import { PresentationListModule } from './content/presentation-list/presentation-list.module';
+import { RouterModule, Routes } from '@angular/router';
+import { UsersComponent, UsersModule } from './pages/users';
+import { FeedbackComponent, FeedbackModule } from './pages/feedback';
+import { AdminLayoutComponent, AdminLayoutModule } from './admin-layout';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AdminLayoutComponent,
+    children: [
+      {path: 'users', component: UsersComponent},
+      {path: 'feedback', component: FeedbackComponent},
+    ],
+  },
+  {
+    path: 'content',
+    loadChildren: () => import('./pages/content').then(m => m.ContentModule)
+  },
+];
+
 
 @NgModule({
   imports: [
-    AdminRoutingModule,
-    CommonModule,
-    ContentModule,
-    FeedbackModule,
-    PreviewModule,
-    PresentationListModule,
+    AdminLayoutModule,
     UsersModule,
-    MatCardModule,
-    MatTabsModule,
-  ],
-  declarations: [AdminComponent],
+    FeedbackModule,
+    RouterModule.forChild(routes)
+  ]
 })
 export class AdminModule {
 }