webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-13 00:41:59 +03:00
Code Activity

Input WYSIWYG: Added dynamic options for entity selector popups

Browse Source 
So that multiple elements on the page can share the same popup, with
different search options.
This commit is contained in:
Dan Brown
2023-12-19 12:09:57 +00:00
parent c07aa056c2
commit 2fbed3919b
12 changed files with 79 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,13 @@
import {onChildEvent} from '../services/dom';
import {Component} from './component';
/**
* @typedef EntitySelectorSearchOptions
* @property entityTypes string
* @property entityPermission string
* @property searchEndpoint string
*/
/**
* Entity Selector
*/
@ -8,21 +15,35 @@ export class EntitySelector extends Component {
setup() {
this.elem = this.$el;
this.entityTypes = this.$opts.entityTypes || 'page,book,chapter';
this.entityPermission = this.$opts.entityPermission || 'view';
this.searchEndpoint = this.$opts.searchEndpoint || '/search/entity-selector';
this.input = this.$refs.input;
this.searchInput = this.$refs.search;
this.loading = this.$refs.loading;
this.resultsContainer = this.$refs.results;
this.searchOptions = {
entityTypes: this.$opts.entityTypes || 'page,book,chapter',
entityPermission: this.$opts.entityPermission || 'view',
searchEndpoint: this.$opts.searchEndpoint || '',
};
this.search = '';
this.lastClick = 0;
this.setupListeners();
this.showLoading();
this.initialLoad();
if (this.searchOptions.searchEndpoint) {
this.initialLoad();
}
}
/**
* @param {EntitySelectorSearchOptions} options
*/
configureSearchOptions(options) {
Object.assign(this.searchOptions, options);
this.reset();
}
setupListeners() {
@ -103,6 +124,10 @@ export class EntitySelector extends Component {
}
initialLoad() {
if (!this.searchOptions.searchEndpoint) {
throw new Error('Search endpoint not set for entity-selector load');
}
window.$http.get(this.searchUrl()).then(resp => {
this.resultsContainer.innerHTML = resp.data;
this.hideLoading();
@ -110,10 +135,15 @@ export class EntitySelector extends Component {
}
searchUrl() {
return `${this.searchEndpoint}?types=${encodeURIComponent(this.entityTypes)}&permission=${encodeURIComponent(this.entityPermission)}`;
const query = `types=${encodeURIComponent(this.searchOptions.entityTypes)}&permission=${encodeURIComponent(this.searchOptions.entityPermission)}`;
return `${this.searchOptions.searchEndpoint}?${query}`;
}
searchEntities(searchTerm) {
if (!this.searchOptions.searchEndpoint) {
throw new Error('Search endpoint not set for entity-selector load');
}
this.input.value = '';
const url = `${this.searchUrl()}&term=${encodeURIComponent(searchTerm)}`;
window.$http.get(url).then(resp => {