Added ability to click books in shelf-sort

diff --git a/resources/assets/js/components/shelf-sort.js b/resources/assets/js/components/shelf-sort.js
index 91713ab41f1ec212169b9c179bb628454dba75f6..59ac712a4d726600a604e9d497780ff5f897b0b5 100644 (file)
--- a/resources/assets/js/components/shelf-sort.js
+++ b/resources/assets/js/components/shelf-sort.js
@@ -5,6 +5,7 @@ class ShelfSort {
         this.elem = elem;
         this.sortGroup = this.initSortable();
         this.input = document.getElementById('books-input');
         this.elem = elem;
         this.sortGroup = this.initSortable();
         this.input = document.getElementById('books-input');

+        this.setupListeners();

     }
 
     initSortable() {
     }
 
     initSortable() {


@@ -21,10 +22,39 @@ class ShelfSort {
         });
     }
 
         });
     }
 

+    setupListeners() {
+        this.elem.addEventListener('click', event => {
+            const sortItem = event.target.closest('.scroll-box-item:not(.instruction)');
+            if (sortItem) {
+                event.preventDefault();
+                this.sortItemClick(sortItem);
+            }
+        });
+    }
+
+    /**
+     * Called when a sort item is clicked.
+     * @param {Element} sortItem
+     */
+    sortItemClick(sortItem) {
+        const lists = this.elem.querySelectorAll('.scroll-box');
+        const newList = Array.from(lists).filter(list => sortItem.parentElement !== list);
+        if (newList.length > 0) {
+            newList[0].appendChild(sortItem);
+        }
+        this.onChange();
+    }
+

     onDrop($item, container, _super) {
     onDrop($item, container, _super) {

+        this.onChange();
+        _super($item, container);
+    }
+
+    onChange() {

         const data = this.sortGroup.sortable('serialize').get();
         this.input.value = data[0].map(item => item.id).join(',');
         const data = this.sortGroup.sortable('serialize').get();
         this.input.value = data[0].map(item => item.id).join(',');

-        _super($item, container);
+        const instruction = this.elem.querySelector('.scroll-box-item.instruction');
+        instruction.parentNode.insertBefore(instruction, instruction.parentNode.children[0]);

     }
 
     getPlaceholderHTML() {
     }
 
     getPlaceholderHTML() {

diff --git a/resources/views/shelves/form.blade.php b/resources/views/shelves/form.blade.php
index 2a4b38b8b61170e77fdfaee97ea1aae004ad9bd8..142e5c69e06b1b62b8592ae5325ab96447f6a862 100644 (file)
--- a/resources/views/shelves/form.blade.php
+++ b/resources/views/shelves/form.blade.php
@@ -10,9 +10,9 @@
     @include('form/textarea', ['name' => 'description'])
 </div>
 
     @include('form/textarea', ['name' => 'description'])
 </div>
 

-<div class="row">
+<div shelf-sort class="row">

     <div class="col-md-6">
     <div class="col-md-6">

-        <div shelf-sort class="form-group">
+        <div  class="form-group">

             <label for="books">{{ trans('entities.shelves_books') }}</label>
             <input type="hidden" id="books-input" name="books"
                    value="{{ isset($shelf) ? $shelf->books->implode('id', ',') : '' }}">
             <label for="books">{{ trans('entities.shelves_books') }}</label>
             <input type="hidden" id="books-input" name="books"
                    value="{{ isset($shelf) ? $shelf->books->implode('id', ',') : '' }}">