From 8f07ce9b6d97a35ce31379d368c9f6e86b56c302 Mon Sep 17 00:00:00 2001
From: Joseph Milazzo <joseph.v.milazzo@gmail.com>
Date: Thu, 17 Dec 2020 16:02:04 -0600
Subject: [PATCH] Added a new Library Access modal component and moved
 directory picker into admin _modals directory to keep consistent.

---
 src/app/_models/library.ts                    |  5 ++++-
 .../directory-picker.component.html           |  0
 .../directory-picker.component.scss           |  0
 .../directory-picker.component.ts             |  3 +--
 .../library-access-modal.component.html       |  1 +
 .../library-access-modal.component.scss       |  0
 .../library-access-modal.component.ts         | 18 ++++++++++++++++
 src/app/admin/admin.module.ts                 | 11 +++++++++-
 .../manage-library.component.html             | 21 ++++++++++++++++++-
 .../manage-library.component.ts               |  5 ++---
 .../manage-users/manage-users.component.html  | 12 ++++++++---
 .../manage-users/manage-users.component.ts    | 13 +++++++++---
 src/app/app.module.ts                         |  4 +---
 13 files changed, 76 insertions(+), 17 deletions(-)
 rename src/app/{ => admin/_modals}/directory-picker/directory-picker.component.html (100%)
 rename src/app/{ => admin/_modals}/directory-picker/directory-picker.component.scss (100%)
 rename src/app/{ => admin/_modals}/directory-picker/directory-picker.component.ts (95%)
 create mode 100644 src/app/admin/_modals/library-access-modal/library-access-modal.component.html
 create mode 100644 src/app/admin/_modals/library-access-modal/library-access-modal.component.scss
 create mode 100644 src/app/admin/_modals/library-access-modal/library-access-modal.component.ts

diff --git a/src/app/_models/library.ts b/src/app/_models/library.ts
index edc7c9fdc..19fa61c19 100644
--- a/src/app/_models/library.ts
+++ b/src/app/_models/library.ts
@@ -1,3 +1,6 @@
 export interface Library {
-    
+    name: string;
+    coverImage: string;
+    type: any;
+    folders: string[];
 }
\ No newline at end of file
diff --git a/src/app/directory-picker/directory-picker.component.html b/src/app/admin/_modals/directory-picker/directory-picker.component.html
similarity index 100%
rename from src/app/directory-picker/directory-picker.component.html
rename to src/app/admin/_modals/directory-picker/directory-picker.component.html
diff --git a/src/app/directory-picker/directory-picker.component.scss b/src/app/admin/_modals/directory-picker/directory-picker.component.scss
similarity index 100%
rename from src/app/directory-picker/directory-picker.component.scss
rename to src/app/admin/_modals/directory-picker/directory-picker.component.scss
diff --git a/src/app/directory-picker/directory-picker.component.ts b/src/app/admin/_modals/directory-picker/directory-picker.component.ts
similarity index 95%
rename from src/app/directory-picker/directory-picker.component.ts
rename to src/app/admin/_modals/directory-picker/directory-picker.component.ts
index 72e2965f7..f51a9b1a4 100644
--- a/src/app/directory-picker/directory-picker.component.ts
+++ b/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[];
diff --git a/src/app/admin/_modals/library-access-modal/library-access-modal.component.html b/src/app/admin/_modals/library-access-modal/library-access-modal.component.html
new file mode 100644
index 000000000..fe08a02b1
--- /dev/null
+++ b/src/app/admin/_modals/library-access-modal/library-access-modal.component.html
@@ -0,0 +1 @@
+<p>library-access-modal works!</p>
diff --git a/src/app/admin/_modals/library-access-modal/library-access-modal.component.scss b/src/app/admin/_modals/library-access-modal/library-access-modal.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/admin/_modals/library-access-modal/library-access-modal.component.ts b/src/app/admin/_modals/library-access-modal/library-access-modal.component.ts
new file mode 100644
index 000000000..1766ce528
--- /dev/null
+++ b/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 {
+  }
+
+}
diff --git a/src/app/admin/admin.module.ts b/src/app/admin/admin.module.ts
index 9400c3c62..b8a9d9fe8 100644
--- a/src/app/admin/admin.module.ts
+++ b/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,
diff --git a/src/app/admin/manage-library/manage-library.component.html b/src/app/admin/manage-library/manage-library.component.html
index 49e489a41..f4ab32726 100644
--- a/src/app/admin/manage-library/manage-library.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/admin/manage-library/manage-library.component.ts b/src/app/admin/manage-library/manage-library.component.ts
index ccd0859de..571620446 100644
--- a/src/app/admin/manage-library/manage-library.component.ts
+++ b/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) {
diff --git a/src/app/admin/manage-users/manage-users.component.html b/src/app/admin/manage-users/manage-users.component.html
index a9b483afd..d43b5ac18 100644
--- a/src/app/admin/manage-users/manage-users.component.html
+++ b/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>
diff --git a/src/app/admin/manage-users/manage-users.component.ts b/src/app/admin/manage-users/manage-users.component.ts
index 9121d1881..5ea1ede42 100644
--- a/src/app/admin/manage-users/manage-users.component.ts
+++ b/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);
+    });
+  }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index bbaf241c0..14b772fe4 100644
--- a/src/app/app.module.ts
+++ b/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 { }