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
69 lines
2 KiB
JavaScript
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);
|
|
}
|
|
|
|
}
|