BookStack/resources/js/components/page-picker.js
Dan Brown 69c8ff5c2d
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
2024-01-23 15:42:13 +00:00

69 lines
2 KiB
JavaScript

import {Component} from './component';
function toggleElem(elem, show) {
elem.toggleAttribute('hidden', !show);
}
export class PagePicker extends Component {
setup() {
this.input = this.$refs.input;
this.resetButton = this.$refs.resetButton;
this.selectButton = this.$refs.selectButton;
this.display = this.$refs.display;
this.defaultDisplay = this.$refs.defaultDisplay;
this.buttonSep = this.$refs.buttonSeperator;
this.selectorEndpoint = this.$opts.selectorEndpoint;
this.value = this.input.value;
this.setupListeners();
}
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('', '');
});
}
showPopup() {
/** @type {EntitySelectorPopup} * */
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',
});
}
setValue(value, name) {
this.value = value;
this.input.value = value;
this.controlView(name);
}
controlView(name) {
const hasValue = this.value && this.value !== 0;
toggleElem(this.resetButton, hasValue);
toggleElem(this.buttonSep, hasValue);
toggleElem(this.defaultDisplay, !hasValue);
toggleElem(this.display, hasValue);
if (hasValue) {
const id = this.getAssetIdFromVal();
this.display.textContent = `#${id}, ${name}`;
this.display.href = window.baseUrl(`/link/${id}`);
}
}
getAssetIdFromVal() {
return Number(this.value);
}
}