From d2bf425a47caa84bd3a86b70f7b356f5fd30d162 Mon Sep 17 00:00:00 2001
From: Joseph Milazzo <joseph.v.milazzo@gmail.com>
Date: Mon, 4 Jan 2021 14:48:56 -0600
Subject: [PATCH] Implemented some safety checks on library editor modal. Added
 a placeholder search bar to nav bar for positioning support.

---
 .../directory-picker.component.ts             |  1 -
 .../library-editor-modal.component.html       |  7 +++++--
 .../library-editor-modal.component.ts         | 19 +++++++++++++++----
 src/app/nav-header/nav-header.component.html  |  7 +++++--
 4 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/app/admin/_modals/directory-picker/directory-picker.component.ts b/src/app/admin/_modals/directory-picker/directory-picker.component.ts
index 1a78047ee..24b852265 100644
--- a/src/app/admin/_modals/directory-picker/directory-picker.component.ts
+++ b/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();
 
diff --git a/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.html b/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.html
index bc28e2c7d..b92a0e10e 100644
--- a/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.ts b/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.ts
index 41d494ff3..bb65d5aac 100644
--- a/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.ts
+++ b/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);
   }
 
diff --git a/src/app/nav-header/nav-header.component.html b/src/app/nav-header/nav-header.component.html
index 3223c7ff1..78cd8b650 100644
--- a/src/app/nav-header/nav-header.component.html
+++ b/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>