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

diff --git a/app/Http/Controllers/BookshelfController.php b/app/Http/Controllers/BookshelfController.php
index feb581c780579d470e5bf1437ac491f0591ebb9f..ccbeb6484b0db0720f4d55cf872d74e810d1d6d6 100644 (file)
--- a/app/Http/Controllers/BookshelfController.php
+++ b/app/Http/Controllers/BookshelfController.php
@@ -10,22 +10,19 @@ use BookStack\Entities\Tools\PermissionsUpdater;
 use BookStack\Entities\Tools\ShelfContext;
 use BookStack\Exceptions\ImageUploadException;
 use BookStack\Exceptions\NotFoundException;
 use BookStack\Entities\Tools\ShelfContext;
 use BookStack\Exceptions\ImageUploadException;
 use BookStack\Exceptions\NotFoundException;

-use BookStack\Uploads\ImageRepo;

 use Exception;
 use Illuminate\Http\Request;
 use Illuminate\Validation\ValidationException;
 
 class BookshelfController extends Controller
 {
 use Exception;
 use Illuminate\Http\Request;
 use Illuminate\Validation\ValidationException;
 
 class BookshelfController extends Controller
 {

-    protected $bookshelfRepo;
-    protected $entityContextManager;
-    protected $imageRepo;
+    protected BookshelfRepo $shelfRepo;
+    protected ShelfContext $shelfContext;

 
 

-    public function __construct(BookshelfRepo $bookshelfRepo, ShelfContext $entityContextManager, ImageRepo $imageRepo)
+    public function __construct(BookshelfRepo $shelfRepo, ShelfContext $shelfContext)

     {
     {

-        $this->bookshelfRepo = $bookshelfRepo;
-        $this->entityContextManager = $entityContextManager;
-        $this->imageRepo = $imageRepo;
+        $this->shelfRepo = $shelfRepo;
+        $this->shelfContext = $shelfContext;

     }
 
     /**
     }
 
     /**


@@ -42,12 +39,12 @@ class BookshelfController extends Controller
             'updated_at' => trans('common.sort_updated_at'),
         ];
 
             'updated_at' => trans('common.sort_updated_at'),
         ];
 

-        $shelves = $this->bookshelfRepo->getAllPaginated(18, $sort, $order);
-        $recents = $this->isSignedIn() ? $this->bookshelfRepo->getRecentlyViewed(4) : false;
-        $popular = $this->bookshelfRepo->getPopular(4);
-        $new = $this->bookshelfRepo->getRecentlyCreated(4);
+        $shelves = $this->shelfRepo->getAllPaginated(18, $sort, $order);
+        $recents = $this->isSignedIn() ? $this->shelfRepo->getRecentlyViewed(4) : false;
+        $popular = $this->shelfRepo->getPopular(4);
+        $new = $this->shelfRepo->getRecentlyCreated(4);

 
 

-        $this->entityContextManager->clearShelfContext();
+        $this->shelfContext->clearShelfContext();

         $this->setPageTitle(trans('entities.shelves'));
 
         return view('shelves.index', [
         $this->setPageTitle(trans('entities.shelves'));
 
         return view('shelves.index', [


@@ -68,7 +65,7 @@ class BookshelfController extends Controller
     public function create()
     {
         $this->checkPermission('bookshelf-create-all');
     public function create()
     {
         $this->checkPermission('bookshelf-create-all');

-        $books = Book::visible()->get();
+        $books = Book::visible()->orderBy('name')->get(['name', 'id', 'slug']);

         $this->setPageTitle(trans('entities.shelves_create'));
 
         return view('shelves.create', ['books' => $books]);
         $this->setPageTitle(trans('entities.shelves_create'));
 
         return view('shelves.create', ['books' => $books]);


@@ -91,7 +88,7 @@ class BookshelfController extends Controller
         ]);
 
         $bookIds = explode(',', $request->get('books', ''));
         ]);
 
         $bookIds = explode(',', $request->get('books', ''));

-        $shelf = $this->bookshelfRepo->create($validated, $bookIds);
+        $shelf = $this->shelfRepo->create($validated, $bookIds);

 
         return redirect($shelf->getUrl());
     }
 
         return redirect($shelf->getUrl());
     }


@@ -103,7 +100,7 @@ class BookshelfController extends Controller
      */
     public function show(ActivityQueries $activities, string $slug)
     {
      */
     public function show(ActivityQueries $activities, string $slug)
     {

-        $shelf = $this->bookshelfRepo->getBySlug($slug);
+        $shelf = $this->shelfRepo->getBySlug($slug);

         $this->checkOwnablePermission('bookshelf-view', $shelf);
 
         $sort = setting()->getForCurrentUser('shelf_books_sort', 'default');
         $this->checkOwnablePermission('bookshelf-view', $shelf);
 
         $sort = setting()->getForCurrentUser('shelf_books_sort', 'default');


@@ -115,7 +112,7 @@ class BookshelfController extends Controller
             ->all();
 
         View::incrementFor($shelf);
             ->all();
 
         View::incrementFor($shelf);

-        $this->entityContextManager->setShelfContext($shelf->id);
+        $this->shelfContext->setShelfContext($shelf->id);

         $view = setting()->getForCurrentUser('bookshelf_view_type');
 
         $this->setPageTitle($shelf->getShortName());
         $view = setting()->getForCurrentUser('bookshelf_view_type');
 
         $this->setPageTitle($shelf->getShortName());


@@ -135,11 +132,11 @@ class BookshelfController extends Controller
      */
     public function edit(string $slug)
     {
      */
     public function edit(string $slug)
     {

-        $shelf = $this->bookshelfRepo->getBySlug($slug);
+        $shelf = $this->shelfRepo->getBySlug($slug);

         $this->checkOwnablePermission('bookshelf-update', $shelf);
 
         $shelfBookIds = $shelf->books()->get(['id'])->pluck('id');
         $this->checkOwnablePermission('bookshelf-update', $shelf);
 
         $shelfBookIds = $shelf->books()->get(['id'])->pluck('id');

-        $books = Book::visible()->whereNotIn('id', $shelfBookIds)->get();
+        $books = Book::visible()->whereNotIn('id', $shelfBookIds)->orderBy('name')->get(['name', 'id', 'slug']);

 
         $this->setPageTitle(trans('entities.shelves_edit_named', ['name' => $shelf->getShortName()]));
 
 
         $this->setPageTitle(trans('entities.shelves_edit_named', ['name' => $shelf->getShortName()]));
 


@@ -158,7 +155,7 @@ class BookshelfController extends Controller
      */
     public function update(Request $request, string $slug)
     {
      */
     public function update(Request $request, string $slug)
     {

-        $shelf = $this->bookshelfRepo->getBySlug($slug);
+        $shelf = $this->shelfRepo->getBySlug($slug);

         $this->checkOwnablePermission('bookshelf-update', $shelf);
         $validated = $this->validate($request, [
             'name'        => ['required', 'string', 'max:255'],
         $this->checkOwnablePermission('bookshelf-update', $shelf);
         $validated = $this->validate($request, [
             'name'        => ['required', 'string', 'max:255'],


@@ -174,7 +171,7 @@ class BookshelfController extends Controller
         }
 
         $bookIds = explode(',', $request->get('books', ''));
         }
 
         $bookIds = explode(',', $request->get('books', ''));

-        $shelf = $this->bookshelfRepo->update($shelf, $validated, $bookIds);
+        $shelf = $this->shelfRepo->update($shelf, $validated, $bookIds);

 
         return redirect($shelf->getUrl());
     }
 
         return redirect($shelf->getUrl());
     }


@@ -184,7 +181,7 @@ class BookshelfController extends Controller
      */
     public function showDelete(string $slug)
     {
      */
     public function showDelete(string $slug)
     {

-        $shelf = $this->bookshelfRepo->getBySlug($slug);
+        $shelf = $this->shelfRepo->getBySlug($slug);

         $this->checkOwnablePermission('bookshelf-delete', $shelf);
 
         $this->setPageTitle(trans('entities.shelves_delete_named', ['name' => $shelf->getShortName()]));
         $this->checkOwnablePermission('bookshelf-delete', $shelf);
 
         $this->setPageTitle(trans('entities.shelves_delete_named', ['name' => $shelf->getShortName()]));


@@ -199,10 +196,10 @@ class BookshelfController extends Controller
      */
     public function destroy(string $slug)
     {
      */
     public function destroy(string $slug)
     {

-        $shelf = $this->bookshelfRepo->getBySlug($slug);
+        $shelf = $this->shelfRepo->getBySlug($slug);

         $this->checkOwnablePermission('bookshelf-delete', $shelf);
 
         $this->checkOwnablePermission('bookshelf-delete', $shelf);
 

-        $this->bookshelfRepo->destroy($shelf);
+        $this->shelfRepo->destroy($shelf);

 
         return redirect('/shelves');
     }
 
         return redirect('/shelves');
     }


@@ -212,7 +209,7 @@ class BookshelfController extends Controller
      */
     public function showPermissions(string $slug)
     {
      */
     public function showPermissions(string $slug)
     {

-        $shelf = $this->bookshelfRepo->getBySlug($slug);
+        $shelf = $this->shelfRepo->getBySlug($slug);

         $this->checkOwnablePermission('restrictions-manage', $shelf);
 
         return view('shelves.permissions', [
         $this->checkOwnablePermission('restrictions-manage', $shelf);
 
         return view('shelves.permissions', [


@@ -225,7 +222,7 @@ class BookshelfController extends Controller
      */
     public function permissions(Request $request, PermissionsUpdater $permissionsUpdater, string $slug)
     {
      */
     public function permissions(Request $request, PermissionsUpdater $permissionsUpdater, string $slug)
     {

-        $shelf = $this->bookshelfRepo->getBySlug($slug);
+        $shelf = $this->shelfRepo->getBySlug($slug);

         $this->checkOwnablePermission('restrictions-manage', $shelf);
 
         $permissionsUpdater->updateFromPermissionsForm($shelf, $request);
         $this->checkOwnablePermission('restrictions-manage', $shelf);
 
         $permissionsUpdater->updateFromPermissionsForm($shelf, $request);


@@ -240,10 +237,10 @@ class BookshelfController extends Controller
      */
     public function copyPermissions(string $slug)
     {
      */
     public function copyPermissions(string $slug)
     {

-        $shelf = $this->bookshelfRepo->getBySlug($slug);
+        $shelf = $this->shelfRepo->getBySlug($slug);

         $this->checkOwnablePermission('restrictions-manage', $shelf);
 
         $this->checkOwnablePermission('restrictions-manage', $shelf);
 

-        $updateCount = $this->bookshelfRepo->copyDownPermissions($shelf);
+        $updateCount = $this->shelfRepo->copyDownPermissions($shelf);

         $this->showSuccessNotification(trans('entities.shelves_copy_permission_success', ['count' => $updateCount]));
 
         return redirect($shelf->getUrl());
         $this->showSuccessNotification(trans('entities.shelves_copy_permission_success', ['count' => $updateCount]));
 
         return redirect($shelf->getUrl());

diff --git a/resources/js/components/shelf-sort.js b/resources/js/components/shelf-sort.js
index 38e8ae8d3e2a40c2acde17725a448f9d880943cd..07526716a932da86ca34bbec46f8e8cbfa4bf7b3 100644 (file)
--- a/resources/js/components/shelf-sort.js
+++ b/resources/js/components/shelf-sort.js
@@ -2,10 +2,12 @@ import Sortable from "sortablejs";
 
 class ShelfSort {
 
 
 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();
 
         this.initSortable();
         this.setupListeners();


@@ -25,12 +27,36 @@ class ShelfSort {
 
     setupListeners() {
         this.elem.addEventListener('click', event => {
 
     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);
             }
         });
             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() {
     }
 
     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(',');
     }
 
         this.input.value = shelfBookElems.map(elem => elem.getAttribute('data-id')).join(',');
     }
 

diff --git a/resources/lang/en/entities.php b/resources/lang/en/entities.php
index aa353bdacb63e162a5e2ef829ea029a998d88b40..83e3c12d92707fca87bf798414a5b7205199b062 100644 (file)
--- a/resources/lang/en/entities.php
+++ b/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_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',
     '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',

diff --git a/resources/sass/_forms.scss b/resources/sass/_forms.scss
index 73799f0a03eaba71a5ad062e80b4a4c7a295c69f..e39f5414f37f7a4a4307fc995937d242138b1d18 100644 (file)
--- a/resources/sass/_forms.scss
+++ b/resources/sass/_forms.scss
@@ -317,7 +317,8 @@ input[type=color] {
 
 .form-group[collapsible] {
   padding: 0 $-m;
 
 .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;
   border-radius: 4px;
   .collapse-title {
     margin-inline-start: -$-m;

diff --git a/resources/sass/styles.scss b/resources/sass/styles.scss
index ee99d76682c7edf1b8601bc037d0d5f033f2bfc4..65eee866d7d8f9b9dcd9fa7d42392e15a9af10e1 100644 (file)
--- a/resources/sass/styles.scss
+++ b/resources/sass/styles.scss
@@ -241,28 +241,54 @@ $btt-size: 40px;
 .scroll-box {
   max-height: 250px;
   overflow-y: scroll;
 .scroll-box {
   max-height: 250px;
   overflow-y: scroll;

-  border: 1px solid #DDD;
+  border: 1px solid;
+  @include lightDark(border-color, #DDD, #000);

   border-radius: 3px;
   border-radius: 3px;

+  min-height: 20px;
+  @include lightDark(background-color, #EEE, #000);

   .scroll-box-item {
     padding: $-xs $-m;
   .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;
     margin-top: -1px;

+    @include lightDark(background-color, #FFF, #222);
+    display: flex;
+    gap: $-xs;

     &:last-child {
       border-bottom: 0;
     }
     &: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;
   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;
 }
 
   color: #666;
 }
 

+.scroll-box-search + .scroll-box,
+.scroll-box-header-item + .scroll-box {
+  border-radius: 0 0 3px 3px;
+}
+

 .fullscreen {
   border:0;
   position:fixed;
 .fullscreen {
   border:0;
   position:fixed;

diff --git a/resources/views/shelves/parts/form.blade.php b/resources/views/shelves/parts/form.blade.php
index f29c28c8164f5c9330ea626a709f25fabc3663b5..1dcc4192f04acaddfd1e51198defee4e5be4f294 100644 (file)
--- a/resources/views/shelves/parts/form.blade.php
+++ b/resources/views/shelves/parts/form.blade.php
@@ -10,15 +10,17 @@
     @include('form.textarea', ['name' => 'description'])
 </div>
 
     @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>
     <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', ',') : '' }}">
                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">
             @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
                         <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>
     <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">
             @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
                     <a href="{{ $book->getUrl() }}" class="text-book">@icon('book'){{ $book->name }}</a>
                 </div>
             @endforeach