From 69c8ff5c2d491d8674e2671a912a025cf16f86d3 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Tue, 23 Jan 2024 15:39:09 +0000 Subject: [PATCH] Entity selector: Fixed initial load overwriting initial search This changes how initial searches can be handled via config rather than specific action so they can be considered in how the initial data load is done, to prevent the default empty state loading and overwriting the search data if it lands later (which was commonly likely). For #4778 --- resources/js/components/entity-selector-popup.js | 7 +------ resources/js/components/entity-selector.js | 13 ++++++++----- resources/js/components/page-picker.js | 3 ++- resources/js/markdown/actions.js | 3 ++- resources/js/wysiwyg/config.js | 3 ++- resources/js/wysiwyg/shortcuts.js | 3 ++- 6 files changed, 17 insertions(+), 15 deletions(-) diff --git a/resources/js/components/entity-selector-popup.js b/resources/js/components/entity-selector-popup.js index 6fb461968..29c06e909 100644 --- a/resources/js/components/entity-selector-popup.js +++ b/resources/js/components/entity-selector-popup.js @@ -18,18 +18,13 @@ export class EntitySelectorPopup extends Component { /** * Show the selector popup. * @param {Function} callback - * @param {String} searchText * @param {EntitySelectorSearchOptions} searchOptions */ - show(callback, searchText = '', searchOptions = {}) { + show(callback, searchOptions = {}) { this.callback = callback; this.getSelector().configureSearchOptions(searchOptions); this.getPopup().show(); - if (searchText) { - this.getSelector().searchText(searchText); - } - this.getSelector().focusSearch(); } diff --git a/resources/js/components/entity-selector.js b/resources/js/components/entity-selector.js index 5ad991437..561370d7a 100644 --- a/resources/js/components/entity-selector.js +++ b/resources/js/components/entity-selector.js @@ -6,6 +6,7 @@ import {Component} from './component'; * @property entityTypes string * @property entityPermission string * @property searchEndpoint string + * @property initialValue string */ /** @@ -25,6 +26,7 @@ export class EntitySelector extends Component { entityTypes: this.$opts.entityTypes || 'page,book,chapter', entityPermission: this.$opts.entityPermission || 'view', searchEndpoint: this.$opts.searchEndpoint || '', + initialValue: this.searchInput.value || '', }; this.search = ''; @@ -44,6 +46,7 @@ export class EntitySelector extends Component { configureSearchOptions(options) { Object.assign(this.searchOptions, options); this.reset(); + this.searchInput.value = this.searchOptions.initialValue; } setupListeners() { @@ -108,11 +111,6 @@ export class EntitySelector extends Component { this.searchInput.focus(); } - searchText(queryText) { - this.searchInput.value = queryText; - this.searchEntities(queryText); - } - showLoading() { this.loading.style.display = 'block'; this.resultsContainer.style.display = 'none'; @@ -128,6 +126,11 @@ export class EntitySelector extends Component { throw new Error('Search endpoint not set for entity-selector load'); } + if (this.searchOptions.initialValue) { + this.searchEntities(this.searchOptions.initialValue); + return; + } + window.$http.get(this.searchUrl()).then(resp => { this.resultsContainer.innerHTML = resp.data; this.hideLoading(); diff --git a/resources/js/components/page-picker.js b/resources/js/components/page-picker.js index 39af67229..5ab511595 100644 --- a/resources/js/components/page-picker.js +++ b/resources/js/components/page-picker.js @@ -35,7 +35,8 @@ export class PagePicker extends Component { const selectorPopup = window.$components.first('entity-selector-popup'); selectorPopup.show(entity => { this.setValue(entity.id, entity.name); - }, '', { + }, { + initialValue: '', searchEndpoint: this.selectorEndpoint, entityTypes: 'page', entityPermission: 'view', diff --git a/resources/js/markdown/actions.js b/resources/js/markdown/actions.js index 511f1ebda..73040a57b 100644 --- a/resources/js/markdown/actions.js +++ b/resources/js/markdown/actions.js @@ -73,7 +73,8 @@ export class Actions { const selectedText = selectionText || entity.name; const newText = `[${selectedText}](${entity.link})`; this.#replaceSelection(newText, newText.length, selectionRange); - }, selectionText, { + }, { + initialValue: selectionText, searchEndpoint: '/search/entity-selector', entityTypes: 'page,book,chapter,bookshelf', entityPermission: 'view', diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js index 963e2970d..6c96e47e9 100644 --- a/resources/js/wysiwyg/config.js +++ b/resources/js/wysiwyg/config.js @@ -85,7 +85,8 @@ function filePickerCallback(callback, value, meta) { text: entity.name, title: entity.name, }); - }, selectionText, { + }, { + initialValue: selectionText, searchEndpoint: '/search/entity-selector', entityTypes: 'page,book,chapter,bookshelf', entityPermission: 'view', diff --git a/resources/js/wysiwyg/shortcuts.js b/resources/js/wysiwyg/shortcuts.js index da9e02270..dbc725b1d 100644 --- a/resources/js/wysiwyg/shortcuts.js +++ b/resources/js/wysiwyg/shortcuts.js @@ -58,7 +58,8 @@ export function register(editor) { editor.selection.collapse(false); editor.focus(); - }, selectionText, { + }, { + initialValue: selectionText, searchEndpoint: '/search/entity-selector', entityTypes: 'page,book,chapter,bookshelf', entityPermission: 'view',