Added a new Library Access modal component and moved directory picker into admin _modals directory to keep consistent.

src/app/_models/library.ts

@@ -1,3 +1,6 @@
 export interface Library {
-    
+    name: string;
+    coverImage: string;
+    type: any;
+    folders: string[];
 }

src/app/admin/_modals/directory-picker/directory-picker.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import { BehaviorSubject } from 'rxjs';
-import { LibraryService } from '../_services/library.service';
+import { LibraryService } from '../../../_services/library.service';
 
 class Stack {
   items: any[];

src/app/admin/_modals/library-access-modal/library-access-modal.component.html

@@ -0,0 +1 @@
+<p>library-access-modal works!</p>

src/app/admin/_modals/library-access-modal/library-access-modal.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Member } from 'src/app/_models/member';
+
+@Component({
+  selector: 'app-library-access-modal',
+  templateUrl: './library-access-modal.component.html',
+  styleUrls: ['./library-access-modal.component.scss']
+})
+export class LibraryAccessModalComponent implements OnInit {
+
+  @Input() member: Member | undefined;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/admin/admin.module.ts

@@ -7,11 +7,20 @@ import { ManageLibraryComponent } from './manage-library/manage-library.componen
 import { ManageUsersComponent } from './manage-users/manage-users.component';
 import { LibraryEditorModalComponent } from './_modals/library-editor-modal/library-editor-modal.component';
 import { SharedModule } from '../shared/shared.module';
+import { LibraryAccessModalComponent } from './_modals/library-access-modal/library-access-modal.component';
+import { DirectoryPickerComponent } from './_modals/directory-picker/directory-picker.component';
 
 
 
 @NgModule({
-  declarations: [ManageUsersComponent, DashboardComponent, ManageLibraryComponent, LibraryEditorModalComponent],
+  declarations: [
+    ManageUsersComponent,
+    DashboardComponent,
+    ManageLibraryComponent,
+    LibraryEditorModalComponent,
+    LibraryAccessModalComponent,
+    DirectoryPickerComponent
+  ],
   imports: [
     CommonModule,
     AdminRoutingModule,

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

@@ -1,3 +1,22 @@
-<h2>Libraries</h2>
+<div class="container">
+    <div class="row mb-2">
+        <div class="col-8"><h3>Libraries</h3></div>
+        <div class="col-4"><button class="btn btn-primary pull-right" (click)="addLibrary()">New Library</button></div>
+    </div>
+    <ul class="list-group" *ngIf="!createLibraryToggle; else createLibrary">
+        <li *ngFor="let library of libraries" class="list-group-item">
+            <!-- We can move this into a view-member component -->
+            <div>
+                <div>{{library.name}}</div>
+
+            </div>
+
+            <!-- <button class="btn btn-primary pull-right" *ngIf="canEditMember(member)">Edit</button> -->
+        </li>
+    </ul>
+    <ng-template #createLibrary>
+        <app-library-editor-modal></app-library-editor-modal>
+    </ng-template>
+</div>
 
 <button class="btn btn-primary" (click)="addFolder('')">Add Folder</button>

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

@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { DirectoryPickerComponent, DirectoryPickerResult } from 'src/app/directory-picker/directory-picker.component';
 import { Library } from 'src/app/_models/library';
 import { LibraryService } from 'src/app/_services/library.service';
+import { DirectoryPickerComponent, DirectoryPickerResult } from '../_modals/directory-picker/directory-picker.component';
 import { LibraryEditorModalComponent } from '../_modals/library-editor-modal/library-editor-modal.component';
 
 @Component({
@@ -13,6 +13,7 @@ import { LibraryEditorModalComponent } from '../_modals/library-editor-modal/lib
 export class ManageLibraryComponent implements OnInit {
 
   libraries: Library[] = [];
+  createLibraryToggle = false;
 
   constructor(private modalService: NgbModal, private libraryService: LibraryService) { }
 
@@ -29,9 +30,7 @@ export class ManageLibraryComponent implements OnInit {
   }
 
   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) {

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

@@ -9,13 +9,19 @@
         <li *ngFor="let member of members" class="list-group-item">
             <!-- We can move this into a view-member component -->
             <div>
-                <div>Name: {{member.username | titlecase}} <span *ngIf="member.isAdmin">(Admin)</span></div>
-                <div *ngIf="!member.isAdmin">Sharing: {{member?.libraries ? member?.libraries : 'None'}}</div>
+                <h4>
+                    {{member.username | titlecase}} <span *ngIf="member.isAdmin" class="badge badge-pill badge-secondary">Admin</span>
+                    <div class="pull-right" *ngIf="canEditMember(member)">
+                        <button class="btn btn-danger">Delete</button>
+                        <button class="btn btn-primary" (click)="openEditLibraryAccess(member)">Edit</button>
+                    </div>
+                </h4>
                 <div>Last Active: {{member.lastActive | date}}</div>
+                <div *ngIf="!member.isAdmin">Sharing: {{member?.libraries ? member?.libraries : 'None'}}</div>
 
             </div>
 
-            <button class="btn btn-primary pull-right" [disabled]="canEditMember(member)">Edit</button>
+            
         </li>
     </ul>
     <ng-template #createUser>

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

@@ -1,11 +1,11 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { take } from 'rxjs/operators';
-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';
 import { User } from 'src/app/_models/user';
 import { AccountService } from 'src/app/_services/account.service';
+import { LibraryAccessModalComponent } from '../_modals/library-access-modal/library-access-modal.component';
 
 @Component({
   selector: 'app-manage-users',
@@ -20,14 +20,13 @@ export class ManageUsersComponent implements OnInit {
   // Create User functionality
   createMemberToggle = false;
 
-  constructor(private memberService: MemberService, public accountService: AccountService) {
+  constructor(private memberService: MemberService, public accountService: AccountService, private modalService: NgbModal) {
     this.accountService.currentUser$.pipe(take(1)).subscribe((user: User) => {
       this.loggedInUsername = user.username;
     });
   }
 
   ngOnInit(): void {
-    console.log('User Component');
     this.loadMembers();
   }
 
@@ -49,4 +48,12 @@ export class ManageUsersComponent implements OnInit {
     this.createMemberToggle = false;
     this.loadMembers();
   }
+
+  openEditLibraryAccess(member: Member) {
+    const modalRef = this.modalService.open(LibraryAccessModalComponent);
+    modalRef.componentInstance.member = member;
+    modalRef.closed.subscribe((closeResult: any) => {
+      console.log('Closed Result', closeResult);
+    });
+  }
 }

src/app/app.module.ts

@@ -14,7 +14,6 @@ import { UserLoginComponent } from './user-login/user-login.component';
 import { ToastrModule } from 'ngx-toastr';
 import { ErrorInterceptor } from './_interceptors/error.interceptor';
 import { LibraryComponent } from './library/library.component';
-import { DirectoryPickerComponent } from './directory-picker/directory-picker.component';
 import { SharedModule } from './shared/shared.module';
 
 
@@ -26,7 +25,6 @@ import { SharedModule } from './shared/shared.module';
     NavHeaderComponent,
     UserLoginComponent,
     LibraryComponent,
-    DirectoryPickerComponent,
   ],
   imports: [
     HttpClientModule,
@@ -44,7 +42,7 @@ import { SharedModule } from './shared/shared.module';
     {provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true},
     {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true}
   ],
-  entryComponents: [DirectoryPickerComponent],
+  entryComponents: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }