Implemented the ability to delete a library from UI. Added update functionality for library.

src/app/_services/library.service.ts

@@ -45,4 +45,8 @@ export class LibraryService {
     return this.httpClient.delete(this.baseUrl + 'library/delete?libraryId=' + libraryId, {});
   }
 
+  update(model: {name: string, folders: string[], id: number}) {
+    return this.httpClient.post(this.baseUrl + 'library/update', model);
+  }
+
 }

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

@@ -15,7 +15,7 @@
         <button *ngIf="routeStack.peek() !== undefined" (click)="goBack()" class="list-group-item list-group-item-action"><i class="fa fa-arrow-left mr-2"></i>Back</button>
         <button *ngFor="let folder of folders" class="list-group-item list-group-item-action" (click)="selectNode(folder)">
             <span>{{getStem(folder)}}</span>
-            <button class="btn btn-primary pull-right" (click)="shareFolder(folder, $event)">Share</button>
+            <button type="button" class="btn btn-primary pull-right" (click)="shareFolder(folder, $event)">Share</button>
         </button>
         <div class="text-center" *ngIf="folders.length === 0">
             There are no folders here

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

@@ -1,7 +1,7 @@
 
-<form [formGroup]="libraryForm" (ngSubmit)="submitLibrary()">
+<form [formGroup]="libraryForm">
     <div class="modal-header">
-        <h4 class="modal-title" id="modal-basic-title">New Library</h4>
+        <h4 class="modal-title" id="modal-basic-title">{{this.library !== undefined ? 'Edit' : 'New'}} Library</h4>
         <button type="button" class="close" aria-label="Close" (click)="close()">
         <span aria-hidden="true">&times;</span>
         </button>
@@ -12,7 +12,7 @@
             <input id="library-name" class="form-control" formControlName="name" type="text">
         </div>
         
-        <div class="form-group">
+        <div class="form-group" *ngIf="this.library === undefined">
             <label for="library-type">Type</label>
             <select class="form-control" id="library-type" formControlName="type">
                 <option [value]="0">Manga</option>
@@ -20,8 +20,8 @@
         </div>
         
     
-        <h4>Folders:</h4>
+        <h4>Folders <button type="button" class="btn pull-right" (click)="openDirectoryPicker()"><i class="fa fa-plus"></i></button></h4>
-        <button class="btn btn-primary" (click)="openDirectoryPicker()">Add Folder</button>
+        
         <div class="list-group">
             <li class="list-group-item" *ngFor="let folder of selectedFolders; let i = index">
                 {{folder}}
@@ -32,6 +32,6 @@
     <div class="modal-footer">
         <button type="button" class="btn btn-light" (click)="reset()">Reset</button>
         <button type="button" class="btn btn-secondary" (click)="close()">Cancel</button>
-        <button type="submit" class="btn btn-primary">Save</button>
+        <button type="submit" class="btn btn-primary" (click)="submitLibrary()">Save</button>
     </div>
 </form>

src/app/admin/_modals/library-editor-modal/library-editor-modal.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { LibraryEditorModalComponent } from './library-editor-modal.component';
-
-describe('LibraryEditorModalComponent', () => {
-  let component: LibraryEditorModalComponent;
-  let fixture: ComponentFixture<LibraryEditorModalComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ LibraryEditorModalComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(LibraryEditorModalComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,6 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { Library } from 'src/app/_models/library';
 import { LibraryService } from 'src/app/_services/library.service';
 import { DirectoryPickerComponent, DirectoryPickerResult } from '../directory-picker/directory-picker.component';
 
@@ -9,8 +10,9 @@ import { DirectoryPickerComponent, DirectoryPickerResult } from '../directory-pi
   templateUrl: './library-editor-modal.component.html',
   styleUrls: ['./library-editor-modal.component.scss']
 })
-export class LibraryEditorModalComponent implements OnInit {
+export class LibraryEditorModalComponent implements OnInit, OnChanges {
 
+  @Input() library: Library | undefined = undefined;
 
   libraryForm: FormGroup = new FormGroup({
     name: new FormControl('', [Validators.required]),
@@ -22,15 +24,27 @@ export class LibraryEditorModalComponent implements OnInit {
   constructor(private modalService: NgbModal, private libraryService: LibraryService, public modal: NgbActiveModal) { }
 
   ngOnInit(): void {
+    this.setValues();
+  }
+
+  ngOnChanges() {
+    console.log('Library: ', this.library);
   }
 
   submitLibrary() {
     const model = this.libraryForm.value;
     model.folders = this.selectedFolders;
-    console.log('Creating library with: ', model);
+
-    // this.libraryService.create(model).subscribe(() => {
+    if (this.library !== undefined) {
-    //   this.close(true);
+      model.id = this.library.id;
-    // });
+      this.libraryService.update(model).subscribe(() => {
+        this.close(true);
+      });
+    } else {
+      this.libraryService.create(model).subscribe(() => {
+        this.close(true);
+      });
+    }
   }
 
   close(returnVal= false) {
@@ -38,7 +52,15 @@ export class LibraryEditorModalComponent implements OnInit {
   }
 
   reset() {
+    this.setValues();
+  }
 
+  setValues() {
+    if (this.library !== undefined) {
+      this.libraryForm.get('name')?.setValue(this.library.name);
+      this.libraryForm.get('type')?.setValue(this.library.type);
+      this.selectedFolders = this.library.folders;
+    }
   }
 
   openDirectoryPicker() {

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

@@ -11,7 +11,7 @@
                     {{library.name | titlecase}}
                     <div class="pull-right">
                         <button class="btn btn-danger mr-2 btn-sm" (click)="deleteLibrary(library)"><i class="fa fa-trash" title="Delete {{library.name | titlecase}}"></i></button>
-                        <button class="btn btn-primary btn-sm" ><i class="fa fa-pencil" title="Edit {{library.name | titlecase}}"></i></button>
+                        <button class="btn btn-primary btn-sm" (click)="editLibrary(library)"><i class="fa fa-pencil" title="Edit {{library.name | titlecase}}"></i></button>
                     </div>
                 </h4>
                 <!-- <div>Last Active: {{member.lastActive | date}}</div>

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

@@ -29,6 +29,17 @@ export class ManageLibraryComponent implements OnInit {
     });
   }
 
+  editLibrary(library: Library) {
+    const modalRef = this.modalService.open(LibraryEditorModalComponent);
+    console.log('component instance: ', modalRef.componentInstance);
+    modalRef.componentInstance.library = library;
+    modalRef.closed.subscribe(refresh => {
+      if (refresh) {
+        this.getLibraries();
+      }
+    });
+  }
+
   addLibrary() {
     const modalRef = this.modalService.open(LibraryEditorModalComponent);
     modalRef.closed.subscribe(refresh => {

src/app/shared/series-card/series-card.component.ts

@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Router } from '@angular/router';
 import { ToastrService } from 'ngx-toastr';
-import { take } from 'rxjs/internal/operators/take';
+import { take } from 'rxjs/operators';
 import { Series } from 'src/app/_models/series';
 import { AccountService } from 'src/app/_services/account.service';
 import { SeriesService } from 'src/app/_services/series.service';