mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-25 11:45:58 +00:00
Added book selector to books sort
Now more efficient rather than listing all books in the system.
This commit is contained in:
Dan Brown
parent
17969c0bbf
commit
aedff7dc6d
@ -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]);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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">
|
||||
<h2 class="list-heading">{{ trans('entities.books_sort_show_other') }}</h2>
|
||||
<div id="additional-books">
|
||||
@foreach($books as $otherBook)
|
||||
@if($otherBook->id !== $book->id)
|
||||
<div>
|
||||
<a href="{{ $otherBook->getUrl('/sort-item') }}" class="text-book">@icon('book'){{ $otherBook->name }}</a>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
<div class="card content-wrap">
|
||||
<h2 class="list-heading mb-m">{{ trans('entities.books_sort_show_other') }}</h2>
|
||||
|
||||
@include('components.entity-selector', ['name' => 'books_list', 'selectorSize' => 'compact', 'entityTypes' => 'book', 'entityPermission' => 'update', 'showAdd' => true])
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -84,18 +74,17 @@
|
||||
// Create our sortable group
|
||||
let group = $('.sort-list').sortable(sortableOptions);
|
||||
|
||||
// Add additional books into the view on select.
|
||||
$('#additional-books').on('click', 'a', function(e) {
|
||||
e.preventDefault();
|
||||
// Add book on selection confirm
|
||||
window.$events.listen('entity-select-confirm', function(entityInfo) {
|
||||
const alreadyAdded = $container.find(`[data-type="book"][data-id="${entityInfo.id}"]`).length > 0;
|
||||
if (alreadyAdded) return;
|
||||
|
||||
const $link = $(this);
|
||||
const url = $link.attr('href');
|
||||
$.get(url, function(data) {
|
||||
$container.append(data);
|
||||
const entitySortItemUrl = entityInfo.link + '/sort-item';
|
||||
window.$http.get(entitySortItemUrl).then(resp => {
|
||||
$container.append(resp.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)
|
||||
};
|
||||
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user