Improved shelf book management interface

- Added ability to search books list (Local simple text match).
- Added handles, hover-states and cursor states for better user
  interaction and clearer use of drag & drop.
- Improved styles for dark mode.
- Converted shelf sort component to newer component format.
- Modernized shelf controller code a little.

Related to #3266

resources/js/components/shelf-sort.js

@@ -2,10 +2,12 @@ import Sortable from "sortablejs";
 
 class ShelfSort {
 
-    constructor(elem) {
-        this.elem = elem;
-        this.input = document.getElementById('books-input');
-        this.shelfBooksList = elem.querySelector('[shelf-sort-assigned-books]');
+    setup() {
+        this.elem = this.$el;
+        this.input = this.$refs.input;
+        this.shelfBookList = this.$refs.shelfBookList;
+        this.allBookList = this.$refs.allBookList;
+        this.bookSearchInput = this.$refs.bookSearch;
 
         this.initSortable();
         this.setupListeners();
@@ -25,12 +27,36 @@ class ShelfSort {
 
     setupListeners() {
         this.elem.addEventListener('click', event => {
-            const sortItem = event.target.closest('.scroll-box-item:not(.instruction)');
+            const sortItem = event.target.closest('.scroll-box-item');
             if (sortItem) {
                 event.preventDefault();
                 this.sortItemClick(sortItem);
             }
         });
+
+        this.bookSearchInput.addEventListener('input', event => {
+            this.filterBooksByName(this.bookSearchInput.value);
+        });
+    }
+
+    /**
+     * @param {String} filterVal
+     */
+    filterBooksByName(filterVal) {
+
+        // Set height on first search, if not already set, to prevent the distraction
+        // of the list height jumping around
+        if (!this.allBookList.style.height) {
+            this.allBookList.style.height = this.allBookList.getBoundingClientRect().height + 'px';
+        }
+
+        const books = this.allBookList.children;
+        const lowerFilter = filterVal.trim().toLowerCase();
+
+        for (const bookEl of books) {
+            const show = !filterVal || bookEl.textContent.toLowerCase().includes(lowerFilter);
+            bookEl.style.display = show ? null : 'none';
+        }
     }
 
     /**
@@ -47,7 +73,7 @@ class ShelfSort {
     }
 
     onChange() {
-        const shelfBookElems = Array.from(this.shelfBooksList.querySelectorAll('[data-id]'));
+        const shelfBookElems = Array.from(this.shelfBookList.querySelectorAll('[data-id]'));
         this.input.value = shelfBookElems.map(elem => elem.getAttribute('data-id')).join(',');
     }
 

resources/lang/en/entities.php

@@ -88,7 +88,7 @@ return [
     'shelves_save' => 'Save Shelf',
     'shelves_books' => 'Books on this shelf',
     'shelves_add_books' => 'Add books to this shelf',
-    'shelves_drag_books' => 'Drag books here to add them to this shelf',
+    'shelves_drag_books' => 'Drag books below to add them to this shelf',
     'shelves_empty_contents' => 'This shelf has no books assigned to it',
     'shelves_edit_and_assign' => 'Edit shelf to assign books',
     'shelves_edit_named' => 'Edit Bookshelf :name',

resources/sass/_forms.scss

@@ -317,7 +317,8 @@ input[type=color] {
 
 .form-group[collapsible] {
   padding: 0 $-m;
-  border: 1px solid #DDD;
+  border: 1px solid;
+  @include lightDark(border-color, #DDD, #000);
   border-radius: 4px;
   .collapse-title {
     margin-inline-start: -$-m;

resources/sass/styles.scss

@@ -241,28 +241,54 @@ $btt-size: 40px;
 .scroll-box {
   max-height: 250px;
   overflow-y: scroll;
-  border: 1px solid #DDD;
+  border: 1px solid;
+  @include lightDark(border-color, #DDD, #000);
   border-radius: 3px;
+  min-height: 20px;
+  @include lightDark(background-color, #EEE, #000);
   .scroll-box-item {
     padding: $-xs $-m;
-    border-bottom: 1px solid #DDD;
-    border-top: 1px solid #DDD;
+    border-bottom: 1px solid;
+    border-top: 1px solid;
+    @include lightDark(border-color, #DDD, #000);
     margin-top: -1px;
+    @include lightDark(background-color, #FFF, #222);
+    display: flex;
+    gap: $-xs;
     &:last-child {
       border-bottom: 0;
     }
+    &:hover {
+      cursor: pointer;
+      @include lightDark(background-color, #f8f8f8, #333);
+    }
+    .handle {
+      color: #AAA;
+      cursor: grab;
+    }
   }
 }
 
-.scroll-box[data-instruction]:before {
-  content: attr(data-instruction);
+input.scroll-box-search, .scroll-box-header-item {
+  font-size: 0.8rem;
   padding: $-xs $-m;
-  border-bottom: 1px solid #DDD;
-  display: block;
-  font-size: 0.75rem;
+  border: 1px solid;
+  @include lightDark(border-color, #DDD, #000);
+  @include lightDark(background-color, #FFF, #222);
+  margin-bottom: -1px;
+  border-radius: 3px 3px 0 0;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  line-height: 1.4;
   color: #666;
 }
 
+.scroll-box-search + .scroll-box,
+.scroll-box-header-item + .scroll-box {
+  border-radius: 0 0 3px 3px;
+}
+
 .fullscreen {
   border:0;
   position:fixed;

resources/views/shelves/parts/form.blade.php

@@ -10,15 +10,17 @@
     @include('form.textarea', ['name' => 'description'])
 </div>
 
-<div shelf-sort class="grid half gap-xl">
+<div component="shelf-sort" class="grid half gap-xl">
     <div class="form-group">
         <label for="books">{{ trans('entities.shelves_books') }}</label>
-        <input type="hidden" id="books-input" name="books"
+        <input refs="shelf-sort@input" type="hidden" name="books"
                value="{{ isset($shelf) ? $shelf->visibleBooks->implode('id', ',') : '' }}">
-        <div class="scroll-box" shelf-sort-assigned-books data-instruction="{{ trans('entities.shelves_drag_books') }}">
+        <div class="scroll-box-header-item">{{ trans('entities.shelves_drag_books') }}</div>
+        <div refs="shelf-sort@shelf-book-list" class="scroll-box">
             @if (count($shelf->visibleBooks ?? []) > 0)
                 @foreach ($shelf->visibleBooks as $book)
                     <div data-id="{{ $book->id }}" class="scroll-box-item">
+                        <div class="handle">@icon('grip')</div>
                         <a href="{{ $book->getUrl() }}" class="text-book">@icon('book'){{ $book->name }}</a>
                     </div>
                 @endforeach
@@ -27,9 +29,11 @@
     </div>
     <div class="form-group">
         <label for="books">{{ trans('entities.shelves_add_books') }}</label>
-        <div class="scroll-box">
+        <input type="text" refs="shelf-sort@book-search" class="scroll-box-search" placeholder="{{ trans('common.search') }}">
+        <div refs="shelf-sort@all-book-list" class="scroll-box">
             @foreach ($books as $book)
                 <div data-id="{{ $book->id }}" class="scroll-box-item">
+                    <div class="handle">@icon('grip')</div>
                     <a href="{{ $book->getUrl() }}" class="text-book">@icon('book'){{ $book->name }}</a>
                 </div>
             @endforeach