Added cross-book page/chapter sorting

This commit is contained in:
Dan Brown 2015-09-06 14:35:53 +01:00
parent 411c331a62
commit e449f25cc8
12 changed files with 239 additions and 129 deletions

View File

@ -9,6 +9,7 @@ use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Str;
use Oxbow\Http\Requests;
use Oxbow\Repos\BookRepo;
use Oxbow\Repos\ChapterRepo;
use Oxbow\Repos\PageRepo;
class BookController extends Controller
@ -16,16 +17,19 @@ class BookController extends Controller
protected $bookRepo;
protected $pageRepo;
protected $chapterRepo;
/**
* BookController constructor.
* @param BookRepo $bookRepo
* @param PageRepo $pageRepo
* @param BookRepo $bookRepo
* @param PageRepo $pageRepo
* @param ChapterRepo $chapterRepo
*/
public function __construct(BookRepo $bookRepo, PageRepo $pageRepo)
public function __construct(BookRepo $bookRepo, PageRepo $pageRepo, ChapterRepo $chapterRepo)
{
$this->bookRepo = $bookRepo;
$this->pageRepo = $pageRepo;
$this->chapterRepo = $chapterRepo;
parent::__construct();
}
@ -133,6 +137,71 @@ class BookController extends Controller
return view('books/delete', ['book' => $book, 'current' => $book]);
}
/**
* Shows the view which allows pages to be re-ordered and sorted.
* @param string $bookSlug
* @return \Illuminate\View\View
*/
public function sort($bookSlug)
{
$this->checkPermission('book-update');
$book = $this->bookRepo->getBySlug($bookSlug);
$books = $this->bookRepo->getAll();
return view('books/sort', ['book' => $book, 'current' => $book, 'books' => $books]);
}
public function getSortItem($bookSlug)
{
$book = $this->bookRepo->getBySlug($bookSlug);
return view('books/sort-box', ['book' => $book]);
}
/**
* Saves an array of sort mapping to pages and chapters.
*
* @param string $bookSlug
* @param Request $request
* @return \Illuminate\Http\RedirectResponse|\Illuminate\Routing\Redirector
*/
public function saveSort($bookSlug, Request $request)
{
$this->checkPermission('book-update');
$book = $this->bookRepo->getBySlug($bookSlug);
// Return if no map sent
if (!$request->has('sort-tree')) {
return redirect($book->getUrl());
}
$sortedBooks = [];
// Sort pages and chapters
$sortMap = json_decode($request->get('sort-tree'));
$defaultBookId = $book->id;
foreach ($sortMap as $index => $bookChild) {
$id = $bookChild->id;
$isPage = $bookChild->type == 'page';
$bookId = $this->bookRepo->exists($bookChild->book) ? $bookChild->book : $defaultBookId;
$model = $isPage ? $this->pageRepo->getById($id) : $this->chapterRepo->getById($id);
$isPage ? $this->pageRepo->setBookId($bookId, $model) : $this->chapterRepo->setBookId($bookId, $model);
$model->priority = $index;
if ($isPage) {
$model->chapter_id = ($bookChild->parentChapter === false) ? 0 : $bookChild->parentChapter;
}
$model->save();
if (!in_array($bookId, $sortedBooks)) {
$sortedBooks[] = $bookId;
}
}
// Add activity for books
foreach ($sortedBooks as $bookId) {
$updatedBook = $this->bookRepo->getById($bookId);
Activity::add($updatedBook, 'book_sort', $updatedBook->id);
}
return redirect($book->getUrl());
}
/**
* Remove the specified book from storage.
*

View File

@ -142,50 +142,6 @@ class PageController extends Controller
return redirect($page->getUrl());
}
/**
* Shows the view which allows pages to be re-ordered and sorted.
* @param $bookSlug
* @return \Illuminate\View\View
*/
public function sortPages($bookSlug)
{
$this->checkPermission('book-update');
$book = $this->bookRepo->getBySlug($bookSlug);
return view('pages/sort', ['book' => $book, 'current' => $book]);
}
/**
* Saves an array of sort mapping to pages and chapters.
*
* @param $bookSlug
* @param Request $request
* @return \Illuminate\Http\RedirectResponse|\Illuminate\Routing\Redirector
*/
public function savePageSort($bookSlug, Request $request)
{
$this->checkPermission('book-update');
$book = $this->bookRepo->getBySlug($bookSlug);
// Return if no map sent
if (!$request->has('sort-tree')) {
return redirect($book->getUrl());
}
// Sort pages and chapters
$sortMap = json_decode($request->get('sort-tree'));
foreach ($sortMap as $index => $bookChild) {
$id = $bookChild->id;
$isPage = $bookChild->type == 'page';
$model = $isPage ? $this->pageRepo->getById($id) : $this->chapterRepo->getById($id);
$model->priority = $index;
if ($isPage) {
$model->chapter_id = ($bookChild->parentChapter === false) ? 0 : $bookChild->parentChapter;
}
$model->save();
}
Activity::add($book, 'book_sort', $book->id);
return redirect($book->getUrl());
}
/**
* Show the deletion page for the specified page.
* @param $bookSlug

View File

@ -12,14 +12,16 @@ Route::group(['middleware' => 'auth'], function () {
Route::get('/{slug}/edit', 'BookController@edit');
Route::put('/{slug}', 'BookController@update');
Route::delete('/{id}', 'BookController@destroy');
Route::get('/{slug}/sort-item', 'BookController@getSortItem');
Route::get('/{slug}', 'BookController@show');
Route::get('/{slug}/delete', 'BookController@showDelete');
Route::get('/{bookSlug}/sort', 'BookController@sort');
Route::put('/{bookSlug}/sort', 'BookController@saveSort');
// Pages
Route::get('/{bookSlug}/page/create', 'PageController@create');
Route::post('/{bookSlug}/page', 'PageController@store');
Route::get('/{bookSlug}/sort', 'PageController@sortPages');
Route::put('/{bookSlug}/sort', 'PageController@savePageSort');
Route::get('/{bookSlug}/page/{pageSlug}', 'PageController@show');
Route::get('/{bookSlug}/page/{pageSlug}/edit', 'PageController@edit');
Route::get('/{bookSlug}/page/{pageSlug}/delete', 'PageController@showDelete');

View File

@ -35,6 +35,16 @@ class BookRepo
return $this->book->where('slug', '=', $slug)->first();
}
/**
* Checks if a book exists.
* @param $id
* @return bool
*/
public function exists($id)
{
return $this->book->where('id', '=', $id)->exists();
}
/**
* Get a new book instance from request input.
* @param $input

View File

@ -80,4 +80,15 @@ class ChapterRepo
return $chapters;
}
public function setBookId($bookId, Chapter $chapter)
{
$chapter->book_id = $bookId;
foreach($chapter->activity as $activity) {
$activity->book_id = $bookId;
$activity->save();
}
$chapter->save();
return $chapter;
}
}

View File

@ -186,6 +186,17 @@ class PageRepo
return $query->count() > 0;
}
public function setBookId($bookId, Page $page)
{
$page->book_id = $bookId;
foreach($page->activity as $activity) {
$activity->book_id = $bookId;
$activity->save();
}
$page->save();
return $page;
}
/**
* Gets a suitable slug for the resource
*

View File

@ -13,7 +13,7 @@ $(function () {
$('.chapter-toggle').click(function(e) {
e.preventDefault();
$(this).toggleClass('open');
$(this).closest('.book-child').find('.inset-list').slideToggle(180);
$(this).closest('.chapter').find('.inset-list').slideToggle(180);
});
});

View File

@ -37,6 +37,7 @@
cursor: pointer;
margin: 0 0 $-l 0;
transition: all ease-in-out 180ms;
user-select: none;
i {
transition: all ease-in-out 180ms;
transform: rotate(0deg);
@ -154,10 +155,18 @@
// Sortable Lists
.sortable-page-list, .sortable-page-list ul {
list-style: none;
background-color: #FFF;
}
.sort-box {
margin-bottom: $-m;
padding: 0 $-l 0 $-l;
border-left: 4px solid $color-book;
}
.sortable-page-list {
margin-left: 0;
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
> ul {
margin-left: 0;
}
ul {
margin-bottom: 0;
margin-top: 0;

View File

@ -16,4 +16,8 @@ table.table {
tr:hover {
background-color: #EEE;
}
}
table {
max-width: 100%;
}

View File

@ -0,0 +1,20 @@
<div class="sort-box" data-type="book" data-id="{{ $book->id }}">
<h3 class="text-book"><i class="zmdi zmdi-book"></i>{{ $book->name }}</h3>
<ul class="sortable-page-list sort-list">
@foreach($book->children() as $bookChild)
<li data-id="{{$bookChild->id}}" data-type="{{ $bookChild->getName() }}" class="text-{{ $bookChild->getName() }}">
<i class="zmdi {{ $bookChild->isA('chapter') ? 'zmdi-collection-bookmark':'zmdi-file-text'}}"></i>{{ $bookChild->name }}
@if($bookChild->isA('chapter'))
<ul>
@foreach($bookChild->pages as $page)
<li data-id="{{$page->id}}" class="text-page" data-type="page">
<i class="zmdi zmdi-file-text"></i>
{{ $page->name }}
</li>
@endforeach
</ul>
@endif
</li>
@endforeach
</ul>
</div>

View File

@ -0,0 +1,96 @@
@extends('base')
@section('content')
<div class="container">
<h1>Sorting Pages & Chapters<span class="subheader">For {{ $book->name }}</span></h1>
<div class="row">
<div class="col-md-8" id="sort-boxes">
@include('books/sort-box', ['book' => $book])
</div>
<div class="col-md-4">
<h3>Show Other Books</h3>
@foreach($books as $otherBook)
@if($otherBook->id !== $book->id)
<div id="additional-books">
<a href="/books/{{ $otherBook->slug }}/sort-item" class="text-book"><i class="zmdi zmdi-book"></i>{{ $otherBook->name }}</a>
</div>
@endif
@endforeach
</div>
</div>
<form action="{{$book->getUrl()}}/sort" method="POST">
{!! csrf_field() !!}
<input type="hidden" name="_method" value="PUT">
<input type="hidden" id="sort-tree-input" name="sort-tree">
<div class="list">
<a href="{{$book->getUrl()}}" class="button muted">Cancel</a>
<button class="button pos" type="submit">Save Order</button>
</div>
</form>
</div>
<script>
$(document).ready(function() {
var sortableOptions = {
group: 'serialization',
onDrop: function($item, container, _super) {
var pageMap = buildPageMap();
$('#sort-tree-input').val(JSON.stringify(pageMap));
_super($item, container);
},
isValidTarget: function ($item, container) {
// Prevent nested chapters
return !($item.is('[data-type="chapter"]') && container.target.closest('li').attr('data-type') == 'chapter');
}
};
var group = $('.sort-list').sortable(sortableOptions);
$('#additional-books').on('click', 'a', function(e) {
e.preventDefault();
var $link = $(this);
var url = $link.attr('href');
$.get(url, function(data) {
$('#sort-boxes').append(data);
group.sortable("destroy");
$('.sort-list').sortable(sortableOptions);
});
$link.remove();
});
function buildPageMap() {
var pageMap = [];
var $lists = $('.sort-list');
$lists.each(function(listIndex) {
var list = $(this);
var bookId = list.closest('[data-type="book"]').attr('data-id');
var $childElements = list.find('[data-type="page"], [data-type="chapter"]');
$childElements.each(function(childIndex) {
var $childElem = $(this);
var type = $childElem.attr('data-type');
var parentChapter = false;
if(type === 'page' && $childElem.closest('[data-type="chapter"]').length === 1) {
parentChapter = $childElem.closest('[data-type="chapter"]').attr('data-id');
}
pageMap.push({
id: $childElem.attr('data-id'),
parentChapter: parentChapter,
type: type,
book: bookId
});
});
});
return pageMap;
}
});
</script>
@stop

View File

@ -1,78 +0,0 @@
@extends('base')
@section('content')
<div class="container small">
<h1>Sorting Pages & Chapters<span class="subheader">For {{ $book->name }}</span></h1>
<ul class="sortable-page-list" id="sort-list">
@foreach($book->children() as $bookChild)
<li data-id="{{$bookChild->id}}" data-type="{{ $bookChild->getName() }}" class="text-{{ $bookChild->getName() }}">
<i class="zmdi {{ $bookChild->isA('chapter') ? 'zmdi-collection-bookmark':'zmdi-file-text'}}"></i>{{ $bookChild->name }}
@if($bookChild->isA('chapter'))
<ul>
@foreach($bookChild->pages as $page)
<li data-id="{{$page->id}}" class="text-page" data-type="page">
<i class="zmdi zmdi-file-text"></i>
{{ $page->name }}
</li>
@endforeach
</ul>
@endif
</li>
@endforeach
</ul>
<form action="{{$book->getUrl()}}/sort" method="POST">
{!! csrf_field() !!}
<input type="hidden" name="_method" value="PUT">
<input type="hidden" id="sort-tree-input" name="sort-tree">
<div class="list">
<a href="{{$book->getUrl()}}" class="button muted">Cancel</a>
<button class="button pos" type="submit">Save Order</button>
</div>
</form>
</div>
<script>
$(document).ready(function() {
var group = $('#sort-list').sortable({
group: 'serialization',
onDrop: function($item, container, _super) {
var data = group.sortable('serialize').get();
var pageMap = buildPageMap(data[0]);
$('#sort-tree-input').val(JSON.stringify(pageMap));
_super($item, container);
}
});
function buildPageMap(data) {
var pageMap = [];
for(var i = 0; i < data.length; i++) {
var bookChild = data[i];
pageMap.push({
id: bookChild.id,
parentChapter: false,
type: bookChild.type
});
if(bookChild.type == 'chapter' && bookChild.children) {
var chapterId = bookChild.id;
var chapterChildren = bookChild.children[0];
for(var j = 0; j < chapterChildren.length; j++) {
var page = chapterChildren[j];
pageMap.push({
id: page.id,
parentChapter: chapterId,
type: 'page'
});
}
}
}
return pageMap;
}
});
</script>
@stop