Added book selector to books sort

Now more efficient rather than listing all books in the system.

app/Http/Controllers/BookController.php

@@ -161,15 +161,17 @@ class BookController extends Controller
      * Shows the view which allows pages to be re-ordered and sorted.
      * @param string $bookSlug
      * @return \Illuminate\View\View
+     * @throws \BookStack\Exceptions\NotFoundException
      */
     public function sort($bookSlug)
     {
         $book = $this->entityRepo->getBySlug('book', $bookSlug);
         $this->checkOwnablePermission('book-update', $book);
+
         $bookChildren = $this->entityRepo->getBookChildren($book, true);
-        $books = $this->entityRepo->getAll('book', false, 'update');
+
         $this->setPageTitle(trans('entities.books_sort_named', ['bookName'=>$book->getShortName()]));
-        return view('books/sort', ['book' => $book, 'current' => $book, 'books' => $books, 'bookChildren' => $bookChildren]);
+        return view('books/sort', ['book' => $book, 'current' => $book, 'bookChildren' => $bookChildren]);
     }
 
     /**

resources/assets/js/components/entity-selector.js

@@ -5,6 +5,7 @@ class EntitySelector {
         this.elem = elem;
         this.search = '';
         this.lastClick = 0;
+        this.selectedItemData = null;
 
         const entityTypes = elem.hasAttribute('entity-types') ? elem.getAttribute('entity-types') : 'page,book,chapter';
         const entityPermission = elem.hasAttribute('entity-permission') ? elem.getAttribute('entity-permission') : 'view';
@@ -14,6 +15,7 @@ class EntitySelector {
         this.searchInput = elem.querySelector('[entity-selector-search]');
         this.loading = elem.querySelector('[entity-selector-loading]');
         this.resultsContainer = elem.querySelector('[entity-selector-results]');
+        this.addButton = elem.querySelector('[entity-selector-add-button]');
 
         this.elem.addEventListener('click', this.onClick.bind(this));
 
@@ -31,6 +33,15 @@ class EntitySelector {
             if (event.keyCode === 13) event.preventDefault();
         });
 
+        if (this.addButton) {
+            this.addButton.addEventListener('click', event => {
+                if (this.selectedItemData) {
+                    this.confirmSelection(this.selectedItemData);
+                    this.unselectAll();
+                }
+            });
+        }
+
         this.showLoading();
         this.initialLoad();
     }
@@ -86,31 +97,37 @@ class EntitySelector {
         this.unselectAll();
         this.input.value = isSelected ? `${type}:${id}` : '';
 
+        const link = item.getAttribute('href');
+        const name = item.querySelector('.entity-list-item-name').textContent;
+        const data = {id: Number(id), name: name, link: link};
+
         if (isSelected) {
             item.classList.add('selected');
+            this.selectedItemData = data;
         } else {
             window.$events.emit('entity-select-change', null)
         }
 
         if (!isDblClick && !isSelected) return;
 
-        const link = item.getAttribute('href');
-        const name = item.querySelector('.entity-list-item-name').textContent;
-        const data = {id: Number(id), name: name, link: link};
-
         if (isDblClick) {
-            window.$events.emit('entity-select-confirm', data)
+            this.confirmSelection(data);
         }
         if (isSelected) {
             window.$events.emit('entity-select-change', data)
         }
     }
 
+    confirmSelection(data) {
+        window.$events.emit('entity-select-confirm', data);
+    }
+
     unselectAll() {
         let selected = this.elem.querySelectorAll('.selected');
         for (let selectedElem of selected) {
             selectedElem.classList.remove('selected', 'primary-background');
         }
+        this.selectedItemData = null;
     }
 
 }

resources/assets/sass/styles.scss

@@ -203,6 +203,13 @@ $btt-size: 40px;
     height: 400px;
     padding-top: $-l;
   }
+  .entity-selector-add button {
+    margin: 0;
+    display: block;
+    width: 100%;
+    border: 0;
+    border-top: 1px solid #DDD;
+  }
   &.compact {
     font-size: 10px;
     .entity-item-snippet {

resources/views/books/sort.blade.php

@@ -1,7 +1,5 @@
 @extends('simple-layout')
 
-{{--TODO - Load books in via selector interface--}}
-
 @section('body')
 
     <div class="container">
@@ -19,7 +17,7 @@
         <div class="grid left-focus gap-xl">
             <div>
                 <div class="card content-wrap">
-                    <h1 class="list-heading">{{ trans('entities.books_sort') }}</h1>
+                    <h1 class="list-heading mb-l">{{ trans('entities.books_sort') }}</h1>
                     <div id="sort-boxes">
                         @include('books.sort-box', ['book' => $book, 'bookChildren' => $bookChildren])
                     </div>
@@ -37,20 +35,12 @@
             </div>
 
             <div>
-                @if(count($books) > 1)
+                <div class="card content-wrap">
-                    <div class="card content-wrap">
+                    <h2 class="list-heading mb-m">{{ trans('entities.books_sort_show_other') }}</h2>
-                        <h2 class="list-heading">{{ trans('entities.books_sort_show_other') }}</h2>
+
-                        <div id="additional-books">
+                    @include('components.entity-selector', ['name' => 'books_list', 'selectorSize' => 'compact', 'entityTypes' => 'book', 'entityPermission' => 'update', 'showAdd' => true])
-                            @foreach($books as $otherBook)
+
-                                @if($otherBook->id !== $book->id)
+                </div>
-                                    <div>
-                                        <a href="{{ $otherBook->getUrl('/sort-item') }}" class="text-book">@icon('book'){{ $otherBook->name }}</a>
-                                    </div>
-                                @endif
-                            @endforeach
-                        </div>
-                    </div>
-                @endif
             </div>
         </div>
 
@@ -84,18 +74,17 @@
             // Create our sortable group
             let group = $('.sort-list').sortable(sortableOptions);
 
-            // Add additional books into the view on select.
+            // Add book on selection confirm
-            $('#additional-books').on('click', 'a', function(e) {
+            window.$events.listen('entity-select-confirm', function(entityInfo) {
-                e.preventDefault();
+                const alreadyAdded = $container.find(`[data-type="book"][data-id="${entityInfo.id}"]`).length > 0;
+                if (alreadyAdded) return;
 
-                const $link = $(this);
+                const entitySortItemUrl = entityInfo.link + '/sort-item';
-                const url = $link.attr('href');
+                window.$http.get(entitySortItemUrl).then(resp => {
-                $.get(url, function(data) {
+                    $container.append(resp.data);
-                    $container.append(data);
                     group.sortable("destroy");
                     group = $('.sort-list').sortable(sortableOptions);
                 });
-                $link.remove();
             });
 
             /**
@@ -185,7 +174,7 @@
 
             let lastSort = '';
             let reverse = false;
-            const reversableTypes = ['name', 'created', 'updated'];
+            const reversibleTypes = ['name', 'created', 'updated'];
 
             $container.on('click', '.sort-box-options [data-sort]', function(event) {
                 event.preventDefault();
@@ -194,7 +183,7 @@
 
                 reverse = (lastSort === sort) ? !reverse : false;
                 let sortFunction = sortOperations[sort];
-                if (reverse && reversableTypes.includes(sort)) {
+                if (reverse && reversibleTypes.includes(sort)) {
                    sortFunction = function(a, b) {
                        return 0 - sortOperations[sort](a, b)
                    };

resources/views/components/entity-selector.blade.php

@@ -4,5 +4,11 @@
         <input type="text" placeholder="{{ trans('common.search') }}" entity-selector-search>
         <div class="text-center loading" entity-selector-loading>@include('partials.loading-icon')</div>
         <div entity-selector-results></div>
+        @if($showAdd)
+            <div class="entity-selector-add">
+                <button entity-selector-add-button type="button"
+                        class="button outline">@icon('add'){{ trans('common.add') }}</button>
+            </div>
+        @endif
     </div>
 </div>