Now more efficient rather than listing all books in the system.
* 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]);
}
/**
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';
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));
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();
}
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;
}
}
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 {
@extends('simple-layout')
-{{--TODO - Load books in via selector interface--}}
-
@section('body')
<div class="container">
<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>
</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>
// 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();
});
/**
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();
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)
};
<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>
\ No newline at end of file
projects / bookstack / commitdiff