github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-02-17 10:12:51 +08:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

Updated entity-selector-popup to reset on selection

Browse Source 
Better links the core selector component to the popup version, with new
public methods for direct controlling.

For #3528
This commit is contained in:
Dan Brown 2022-06-25 14:13:17 +01:00
parent 0801955a26
commit c9d0e22132
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
3 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
resources/js/components/entity-selector-popup.js
View File

@ -7,9 +7,9 @@ class EntitySelectorPopup {
setup() {
this.elem = this.$el;
this.selectButton = this.$refs.select;
this.searchInput = this.$refs.searchInput;
window.EntitySelectorPopup = this;
this.selectorEl = this.$refs.selector;
this.callback = null;
this.selection = null;
@ -22,13 +22,17 @@ class EntitySelectorPopup {
show(callback) {
this.callback = callback;
this.elem.components.popup.show();
this.searchInput.focus();
this.getSelector().focusSearch();
}
hide() {
this.elem.components.popup.hide();
}
getSelector() {
return this.selectorEl.components['entity-selector'];
}
onSelectButtonClick() {
this.hide();
if (this.selection !== null && this.callback) this.callback(this.selection);
@ -36,6 +40,7 @@ class EntitySelectorPopup {
onSelectionConfirm(entity) {
this.hide();
this.getSelector().reset();
if (this.callback && entity) this.callback(entity);
}

10
resources/js/components/entity-selector.js
View File

@ -87,6 +87,16 @@ class EntitySelector {
}
}
reset() {
this.searchInput.value = '';
this.showLoading();
this.initialLoad();
}
focusSearch() {
this.searchInput.focus();
}
showLoading() {
this.loading.style.display = 'block';
this.resultsContainer.style.display = 'none';

3
resources/views/entities/selector.blade.php
View File

@ -1,10 +1,11 @@
<div class="form-group entity-selector-container">
<div component="entity-selector"
refs="entity-selector-popup@selector"
class="entity-selector {{$selectorSize ?? ''}}"
option:entity-selector:entity-types="{{ $entityTypes ?? 'book,chapter,page' }}"
option:entity-selector:entity-permission="{{ $entityPermission ?? 'view' }}">
<input refs="entity-selector@input" type="hidden" name="{{$name}}" value="">
<input refs="entity-selector@search entity-selector-popup@searchInput" type="text" placeholder="{{ trans('common.search') }}" @if($autofocus ?? false) autofocus @endif>
<input refs="entity-selector@search" type="text" placeholder="{{ trans('common.search') }}" @if($autofocus ?? false) autofocus @endif>
<div class="text-center loading" refs="entity-selector@loading">@include('common.loading-icon')</div>
<div refs="entity-selector@results"></div>
@if($showAdd ?? false)