webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-08-09 10:22:51 +03:00
Code Activity

Sorting: Added sort set form manager UI JS

Browse Source 
Extracted much code to be shared with the shelf books management UI
This commit is contained in:
Dan Brown
2025-02-04 15:14:22 +00:00
parent bf8a84a8b1
commit d28278bba6
13 changed files with 168 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
resources/views/settings/sort-sets/parts/form.blade.php
View File

@@ -1,4 +1,3 @@
<div class="setting-list">
<div class="grid half">
<div>
@@ -13,59 +12,36 @@
</div>
</div>
<div>
<div component="sort-set-manager">
<label class="setting-list-label">{{ trans('settings.sort_set_operations') }}</label>
<p class="text-muted text-small">{{ trans('settings.sort_set_operations_desc') }}</p>
<input refs="sort-set-manager@input" type="hidden" name="books"
value="{{ $model?->sequence ?? '' }}">
<div class="grid half">
<div class="form-group">
<label for="books" id="sort-set-configured-operations">{{ trans('settings.sort_set_configured_operations') }}</label>
<ul refs="sort-set@configured-operations-list"
<label for="books"
id="sort-set-configured-operations">{{ trans('settings.sort_set_configured_operations') }}</label>
<ul refs="sort-set-manager@configured-operations-list"
aria-labelledby="sort-set-configured-operations"
class="scroll-box">
@foreach(($model?->getOptions() ?? []) as $option)
<li data-id="{{ $option->value }}"
class="scroll-box-item">
<div class="handle px-s">@icon('grip')</div>
<div>{{ $option->getLabel() }}</div>
<div class="buttons flex-container-row items-center ml-auto px-xxs py-xs">
<button type="button" data-action="move_up" class="icon-button p-xxs"
title="{{ trans('entities.books_sort_move_up') }}">@icon('chevron-up')</button>
<button type="button" data-action="move_down" class="icon-button p-xxs"
title="{{ trans('entities.books_sort_move_down') }}">@icon('chevron-down')</button>
<button type="button" data-action="remove" class="icon-button p-xxs"
title="{{ trans('common.remove') }}">@icon('remove')</button>
<button type="button" data-action="add" class="icon-button p-xxs"
title="{{ trans('common.add') }}">@icon('add-small')</button>
</div>
</li>
class="scroll-box configured-option-list">
<li class="text-muted empty-state px-m py-s italic text-small">{{ trans('settings.sort_set_configured_operations_empty') }}</li>
@foreach(($model?->getOperations() ?? []) as $option)
@include('settings.sort-sets.parts.operation')
@endforeach
</ul>
</div>
<div class="form-group">
<label for="books" id="sort-set-available-operations">{{ trans('settings.sort_set_available_operations') }}</label>
<ul refs="sort-set@available-operations-list"
<label for="books"
id="sort-set-available-operations">{{ trans('settings.sort_set_available_operations') }}</label>
<ul refs="sort-set-manager@available-operations-list"
aria-labelledby="sort-set-available-operations"
class="scroll-box">
@foreach(\BookStack\Sorting\SortSetOption::allExcluding($model?->getOptions() ?? []) as $option)
<li data-id="{{ $option->value }}"
class="scroll-box-item">
<div class="handle px-s">@icon('grip')</div>
<div>{{ $option->getLabel() }}</div>
<div class="buttons flex-container-row items-center ml-auto px-xxs py-xs">
<button type="button" data-action="move_up" class="icon-button p-xxs"
title="{{ trans('entities.books_sort_move_up') }}">@icon('chevron-up')</button>
<button type="button" data-action="move_down" class="icon-button p-xxs"
title="{{ trans('entities.books_sort_move_down') }}">@icon('chevron-down')</button>
<button type="button" data-action="remove" class="icon-button p-xxs"
title="{{ trans('common.remove') }}">@icon('remove')</button>
<button type="button" data-action="add" class="icon-button p-xxs"
title="{{ trans('common.add') }}">@icon('add-small')</button>
</div>
</li>
class="scroll-box available-option-list">
<li class="text-muted empty-state px-m py-s italic text-small">{{ trans('settings.sort_set_available_operations_empty') }}</li>
@foreach(\BookStack\Sorting\SortSetOperation::allExcluding($model?->getOperations() ?? []) as $operation)
@include('settings.sort-sets.parts.operation', ['operation' => $operation])
@endforeach
</ul>
</div>

15
resources/views/settings/sort-sets/parts/operation.blade.php Normal file
View File

@@ -0,0 +1,15 @@
<li data-id="{{ $operation->value }}"
class="scroll-box-item items-center">
<div class="handle px-s">@icon('grip')</div>
<div class="text-small">{{ $operation->getLabel() }}</div>
<div class="buttons flex-container-row items-center ml-auto px-xxs py-xxs">
<button type="button" data-action="move_up" class="icon-button p-xxs"
title="{{ trans('entities.books_sort_move_up') }}">@icon('chevron-up')</button>
<button type="button" data-action="move_down" class="icon-button p-xxs"
title="{{ trans('entities.books_sort_move_down') }}">@icon('chevron-down')</button>
<button type="button" data-action="remove" class="icon-button p-xxs"
title="{{ trans('common.remove') }}">@icon('remove')</button>
<button type="button" data-action="add" class="icon-button p-xxs"
title="{{ trans('common.add') }}">@icon('add-small')</button>
</div>
</li>

4
resources/views/shelves/parts/form.blade.php
View File

@@ -38,7 +38,7 @@
</div>
<ul refs="shelf-sort@shelf-book-list"
aria-labelledby="shelf-sort-books-label"
class="scroll-box">
class="scroll-box configured-option-list">
@foreach (($shelf->visibleBooks ?? []) as $book)
@include('shelves.parts.shelf-sort-book-item', ['book' => $book])
@endforeach
@@ -49,7 +49,7 @@
<input type="text" refs="shelf-sort@book-search" class="scroll-box-search" placeholder="{{ trans('common.search') }}">
<ul refs="shelf-sort@all-book-list"
aria-labelledby="shelf-sort-all-books-label"
class="scroll-box">
class="scroll-box available-option-list">
@foreach ($books as $book)
@include('shelves.parts.shelf-sort-book-item', ['book' => $book])
@endforeach