mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-12-15 07:33:36 +08:00
69c8ff5c2d
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
70 lines
2.0 KiB
JavaScript
70 lines
2.0 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);
|
|
}
|
|
|
|
}
|