Implemented some safety checks on library editor modal. Added a placeholder search bar to nav bar for positioning support.

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

@@ -80,7 +80,6 @@ export class DirectoryPickerComponent implements OnInit {
   }
 
   shareFolder(folderName: string, event: any) {
-    console.log(`You selected ${folderName} as your folder to share!`);
     event.preventDefault();
     event.stopPropagation();
 

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

@@ -7,6 +7,9 @@
         </button>
     </div>
     <div class="modal-body">
+        <div class="alert alert-info" *ngIf="errorMessage !== ''">
+            <strong>Error: </strong> {{errorMessage}}
+        </div>
         <div class="form-group">
             <label for="library-name">Name</label>
             <input id="library-name" class="form-control" formControlName="name" type="text">
@@ -25,13 +28,13 @@
         <div class="list-group">
             <li class="list-group-item" *ngFor="let folder of selectedFolders; let i = index">
                 {{folder}}
-                <!-- TODO: Implement ability to remove folders added-->
+                <button class="btn pull-right mr-2 btn-sm" (click)="removeFolder(folder)"><i class="fa fa-times-circle"></i></button>
             </li>
         </div>
     </div>
     <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" (click)="submitLibrary()">Save</button>
+        <button type="submit" class="btn btn-primary" (click)="submitLibrary()" [disabled]="!libraryForm.dirty">Save</button>
     </div>
 </form>

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

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, OnInit } from '@angular/core';
+import { Component, Input, 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';
@@ -10,7 +10,7 @@ import { DirectoryPickerComponent, DirectoryPickerResult } from '../directory-pi
   templateUrl: './library-editor-modal.component.html',
   styleUrls: ['./library-editor-modal.component.scss']
 })
-export class LibraryEditorModalComponent implements OnInit, OnChanges {
+export class LibraryEditorModalComponent implements OnInit {
 
   @Input() library: Library | undefined = undefined;
 
@@ -20,6 +20,7 @@ export class LibraryEditorModalComponent implements OnInit, OnChanges {
   });
 
   selectedFolders: string[] = [];
+  errorMessage = '';
 
   constructor(private modalService: NgbModal, private libraryService: LibraryService, public modal: NgbActiveModal) { }
 
@@ -27,27 +28,37 @@ export class LibraryEditorModalComponent implements OnInit, OnChanges {
     this.setValues();
   }
 
-  ngOnChanges() {
-    console.log('Library: ', this.library);
+
+  removeFolder(folder: string) {
+    this.selectedFolders = this.selectedFolders.filter(item => item !== folder);
   }
 
   submitLibrary() {
     const model = this.libraryForm.value;
     model.folders = this.selectedFolders;
 
+    if (this.libraryForm.errors) {
+      return;
+    }
+
     if (this.library !== undefined) {
       model.id = this.library.id;
       this.libraryService.update(model).subscribe(() => {
         this.close(true);
+      }, err => {
+        this.errorMessage = err;
       });
     } else {
       this.libraryService.create(model).subscribe(() => {
         this.close(true);
+      }, err => {
+        this.errorMessage = err;
       });
     }
   }
 
   close(returnVal= false) {
+    const model = this.libraryForm.value;
     this.modal.close(returnVal);
   }
 

src/app/nav-header/nav-header.component.html

@@ -5,12 +5,15 @@
         <!-- <li class="nav-item">
           <input type="text" placeholder="Search bar">
         </li> -->
-
       </ul>
+      <div class="container-fluid" style="max-width: 400px">
+        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+        <!-- TODO: Implement autocomplete for searching -->
+      </div>
 
       <!-- TODO: Put SignalR notification button dropdown here. -->
 
-      <div ngbDropdown class=" nav-item dropdown" *ngIf="(accountService.currentUser$ | async) as user" dropdown>
+      <div ngbDropdown class="nav-item dropdown" *ngIf="(accountService.currentUser$ | async) as user" dropdown>
         <button class="btn btn-outline-secondary" ngbDropdownToggle>{{user.username | titlecase}}</button>
         <div ngbDropdownMenu >
           <button ngbDropdownItem routerLink="/admin/dashboard" *ngIf="user.roles.includes('Admin')">Server Settings</button>