Refactored the users component in admin to be manage-user and likewise added manage-library component.

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

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { AdminGuard } from '../_guards/admin.guard';
 import { DashboardComponent } from './dashboard/dashboard.component';
-import { UsersComponent } from './users/users.component';
+import { ManageUsersComponent } from './manage-users/manage-users.component';
 
 const routes: Routes = [
   {path: '**', component: DashboardComponent, pathMatch: 'full'},
@@ -11,7 +11,7 @@ const routes: Routes = [
     canActivate: [AdminGuard],
     children: [
       {path: '/dashboard', component: DashboardComponent},
-      {path: '/users', component: UsersComponent}
+      {path: '/users', component: ManageUsersComponent}
     ]
   }
 ];

src/app/admin/admin.module.ts

@@ -1,15 +1,15 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { AdminRoutingModule } from './admin-routing.module';
-import { UsersComponent } from './users/users.component';
-import { ToastrModule } from 'ngx-toastr';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { ManageLibraryComponent } from './manage-library/manage-library.component';
+import { ManageUsersComponent } from './manage-users/manage-users.component';
 
 
 
 @NgModule({
-  declarations: [UsersComponent, DashboardComponent],
+  declarations: [ManageUsersComponent, DashboardComponent, ManageLibraryComponent],
   imports: [
     CommonModule,
     AdminRoutingModule,

src/app/admin/dashboard/dashboard.component.html

@@ -6,10 +6,10 @@
       <ng-template ngbNavContent>
 
         <ng-container *ngIf="tab === 'users'">
-            <app-users></app-users>
+            <app-manage-users></app-manage-users>
         </ng-container>
         <ng-container *ngIf="tab === 'libraries'">
-            Library management here
+            <app-manage-library></app-manage-library>
         </ng-container>
       </ng-template>
     </li>

src/app/admin/dashboard/dashboard.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-dashboard',
@@ -11,7 +12,11 @@ export class DashboardComponent implements OnInit {
   counter = this.tabs.length + 1;
   active = this.tabs[0];
 
-  constructor() { }
+  constructor(private router: Router) {
+    // TODO: Depending on active route, set the tab else default to first tab.
+    console.log('current route: ', this.router.url);
+    //this.router.url === '/login'
+  }
 
   ngOnInit(): void {
   }

src/app/admin/manage-library/manage-library.component.html

@@ -0,0 +1,3 @@
+<h2>Libraries</h2>
+
+<button class="btn btn-primary" (click)="addFolder('')">Add Folder</button>

src/app/admin/manage-library/manage-library.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { DirectoryPickerComponent, DirectoryPickerResult } from 'src/app/directory-picker/directory-picker.component';
+
+@Component({
+  selector: 'app-manage-library',
+  templateUrl: './manage-library.component.html',
+  styleUrls: ['./manage-library.component.scss']
+})
+export class ManageLibraryComponent implements OnInit {
+
+  constructor(private modalService: NgbModal) { }
+
+  ngOnInit(): void {
+  }
+
+  addFolder(library: string) {
+
+    const modalRef = this.modalService.open(DirectoryPickerComponent);
+    //modalRef.componentInstance.name = 'World';
+    modalRef.closed.subscribe((closeResult: DirectoryPickerResult) => {
+      console.log('Closed Result', closeResult);
+      if (closeResult.success) {
+        console.log('Add folder path to Library');
+      }
+    });
+
+  }
+
+}

src/app/admin/manage-users/manage-users.component.html

@@ -1,10 +1,4 @@
 
-<button class="btn btn-primary" (click)="addFolder('')">Add Folder</button>
-
-
-<div class="container">
-    <h2></h2>
-</div>
 
 <h2>Members:</h2>
 <div class="container">

src/app/admin/manage-users/manage-users.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { DirectoryPickerComponent, DirectoryPickerResult } from 'src/app/directory-picker/directory-picker.component';
+import { MemberService } from 'src/app/member.service';
+import { Member } from 'src/app/_models/member';
+
+@Component({
+  selector: 'app-manage-users',
+  templateUrl: './manage-users.component.html',
+  styleUrls: ['./manage-users.component.scss']
+})
+export class ManageUsersComponent implements OnInit {
+
+  members: Member[] = [];
+  closeResult = ''; // Debug code
+  @ViewChild('content') content: any;
+
+  constructor(private memberService: MemberService) { }
+
+  ngOnInit(): void {
+    console.log('User Component');
+    this.memberService.getMembers().subscribe(members => {
+      this.members = members;
+    });
+  }
+
+  
+}

src/app/admin/users/users.component.ts

@@ -1,39 +0,0 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { ModalDismissReasons, NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { DirectoryPickerComponent, DirectoryPickerResult } from 'src/app/directory-picker/directory-picker.component';
-import { MemberService } from 'src/app/member.service';
-import { Member } from 'src/app/_models/member';
-
-@Component({
-  selector: 'app-users',
-  templateUrl: './users.component.html',
-  styleUrls: ['./users.component.scss']
-})
-export class UsersComponent implements OnInit {
-
-  members: Member[] = [];
-  closeResult = ''; // Debug code
-  @ViewChild('content') content: any;
-
-  constructor(private memberService: MemberService, private modalService: NgbModal) { }
-
-  ngOnInit(): void {
-    console.log('User Component');
-    this.memberService.getMembers().subscribe(members => {
-      this.members = members;
-    });
-  }
-
-  addFolder(library: string) {
-
-    const modalRef = this.modalService.open(DirectoryPickerComponent);
-    //modalRef.componentInstance.name = 'World';
-    modalRef.closed.subscribe((closeResult: DirectoryPickerResult) => {
-      console.log('Closed Result', closeResult);
-      if (closeResult.success) {
-        console.log('Add folder path to Library');
-      }
-    });
-
-  }
-}

src/app/home/home.component.html

@@ -30,9 +30,6 @@
     <ng-container *ngIf="!firstTimeFlow && (this.accountService.currentUser$ | async) == null">
         <app-user-login></app-user-login>
     </ng-container>
-
-    <app-directory-picker></app-directory-picker>
-
 </div>