Default templates: Cleaned up ux, added case for added endpoint

Cleaned up and updated page picker a bit, allowing longer names to show,
clicking through to item without triggering popup, and updated to use
hidden attributes instead of styles.

Added phpunit tests to cover supporting entity-selector-templates
endpoint.
This commit is contained in:
Dan Brown 2023-12-12 15:38:09 +00:00
parent d75eb06777
commit 2081a783f3
No known key found for this signature in database
GPG key ID: 46D9F943C24A2EF9
6 changed files with 47 additions and 16 deletions

View file

@ -1,7 +1,7 @@
import {Component} from './component';
function toggleElem(elem, show) {
elem.style.display = show ? null : 'none';
elem.toggleAttribute('hidden', !show);
}
export class PagePicker extends Component {
@ -21,6 +21,7 @@ export class PagePicker extends Component {
setupListeners() {
this.selectButton.addEventListener('click', this.showPopup.bind(this));
this.display.parentElement.addEventListener('click', this.showPopup.bind(this));
this.display.addEventListener('click', e => e.stopPropagation());
this.resetButton.addEventListener('click', () => {
this.setValue('', '');

View file

@ -270,10 +270,14 @@ body.flexbox {
overflow: hidden;
}
.fill-height {
.height-fill {
height: 100%;
}
.height-auto {
height: auto !important;
}
.float {
float: left;
&.right {

View file

@ -40,17 +40,18 @@
<label for="template-manager">{{ trans('entities.books_default_template') }}</label>
</button>
<div refs="collapsible@content" class="collapse-content">
<div class="flex-container-row items-center gap-m justify-space-between pt-s pb-xs">
<p class="text-muted small my-none">
<div class="flex-container-row gap-l justify-space-between pb-xs wrap">
<p class="text-muted small my-none min-width-xs flex">
{{ trans('entities.books_default_template_explain') }}
</p>
@include('form.page-picker', [
'name' => 'default_template_id',
'placeholder' => trans('entities.books_default_template_select'),
'value' => $book?->default_template_id ?? null,
])
<div class="min-width-m">
@include('form.page-picker', [
'name' => 'default_template_id',
'placeholder' => trans('entities.books_default_template_select'),
'value' => $book?->default_template_id ?? null,
])
</div>
</div>
</div>

View file

@ -1,13 +1,13 @@
{{--Depends on entity selector popup--}}
<div component="page-picker">
<div class="input-base overflow-hidden">
<span @if($value) style="display: none" @endif refs="page-picker@default-display" class="text-muted italic">{{ $placeholder }}</span>
<a @if(!$value) style="display: none" @endif href="{{ url('/link/' . $value) }}" target="_blank" rel="noopener" class="text-page" refs="page-picker@display">#{{$value}}, {{$value ? \BookStack\Entities\Models\Page::query()->visible()->find($value)->name ?? '' : '' }}</a>
<div class="input-base overflow-hidden height-auto">
<span @if($value) hidden @endif refs="page-picker@default-display" class="text-muted italic">{{ $placeholder }}</span>
<a @if(!$value) hidden @endif href="{{ url('/link/' . $value) }}" target="_blank" rel="noopener" class="text-page" refs="page-picker@display">#{{$value}}, {{$value ? \BookStack\Entities\Models\Page::query()->visible()->find($value)->name ?? '' : '' }}</a>
</div>
<br>
<input refs="page-picker@input" type="hidden" value="{{$value}}" name="{{$name}}" id="{{$name}}">
<button @if(!$value) style="display: none" @endif type="button" refs="page-picker@reset-button" class="text-button">{{ trans('common.reset') }}</button>
<span refs="page-picker@button-seperator" @if(!$value) style="display: none" @endif class="sep">|</span>
<button @if(!$value) hidden @endif type="button" refs="page-picker@reset-button" class="text-button">{{ trans('common.reset') }}</button>
<span refs="page-picker@button-seperator" @if(!$value) hidden @endif class="sep">|</span>
<button type="button" refs="page-picker@select-button" class="text-button">{{ trans('common.select') }}</button>
</div>

View file

@ -4,7 +4,7 @@
@section('content')
<div id="main-content" class="flex-fill flex fill-height">
<div id="main-content" class="flex-fill flex height-fill">
<form action="{{ $page->getUrl() }}" autocomplete="off" data-page-id="{{ $page->id }}" method="POST" class="flex flex-fill">
{{ csrf_field() }}

View file

@ -252,6 +252,31 @@ class EntitySearchTest extends TestCase
$this->withHtml($resp)->assertElementContains($baseSelector, "You don't have the required permissions to select this item");
}
public function test_entity_template_selector_search()
{
$templatePage = $this->entities->newPage(['name' => 'Template search test', 'html' => 'template test']);
$templatePage->template = true;
$templatePage->save();
$nonTemplatePage = $this->entities->newPage(['name' => 'Nontemplate page', 'html' => 'nontemplate', 'template' => false]);
// Visit both to make popular
$this->asEditor()->get($templatePage->getUrl());
$this->asEditor()->get($nonTemplatePage->getUrl());
$normalSearch = $this->get('/search/entity-selector-templates?term=test');
$normalSearch->assertSee($templatePage->name);
$normalSearch->assertDontSee($nonTemplatePage->name);
$normalSearch = $this->get('/search/entity-selector-templates?term=beans');
$normalSearch->assertDontSee($templatePage->name);
$normalSearch->assertDontSee($nonTemplatePage->name);
$defaultListTest = $this->get('/search/entity-selector-templates');
$defaultListTest->assertSee($templatePage->name);
$defaultListTest->assertDontSee($nonTemplatePage->name);
}
public function test_sibling_search_for_pages()
{
$chapter = $this->entities->chapterHasPages();