2023-04-19 05:20:02 +08:00
|
|
|
import {Component} from './component';
|
2022-11-15 20:44:57 +08:00
|
|
|
|
|
|
|
export class EntitySelectorPopup extends Component {
|
2017-08-27 21:31:34 +08:00
|
|
|
|
2020-06-28 06:56:01 +08:00
|
|
|
setup() {
|
2022-11-15 20:44:57 +08:00
|
|
|
this.container = this.$el;
|
2020-06-28 06:56:01 +08:00
|
|
|
this.selectButton = this.$refs.select;
|
2022-06-25 21:13:17 +08:00
|
|
|
this.selectorEl = this.$refs.selector;
|
2017-08-27 21:31:34 +08:00
|
|
|
|
|
|
|
this.callback = null;
|
|
|
|
this.selection = null;
|
|
|
|
|
|
|
|
this.selectButton.addEventListener('click', this.onSelectButtonClick.bind(this));
|
|
|
|
window.$events.listen('entity-select-change', this.onSelectionChange.bind(this));
|
2022-06-27 21:27:29 +08:00
|
|
|
window.$events.listen('entity-select-confirm', this.handleConfirmedSelection.bind(this));
|
2017-08-27 21:31:34 +08:00
|
|
|
}
|
|
|
|
|
2023-09-25 01:33:33 +08:00
|
|
|
show(callback, searchText = '') {
|
2017-08-27 21:31:34 +08:00
|
|
|
this.callback = callback;
|
2022-11-16 23:46:41 +08:00
|
|
|
this.getPopup().show();
|
2023-09-25 01:33:33 +08:00
|
|
|
|
|
|
|
if (searchText) {
|
|
|
|
this.getSelector().searchText(searchText);
|
|
|
|
}
|
|
|
|
|
2022-06-25 21:13:17 +08:00
|
|
|
this.getSelector().focusSearch();
|
2017-08-27 21:31:34 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
hide() {
|
2022-11-16 23:46:41 +08:00
|
|
|
this.getPopup().hide();
|
2017-08-27 21:31:34 +08:00
|
|
|
}
|
|
|
|
|
2022-11-16 23:46:41 +08:00
|
|
|
/**
|
|
|
|
* @returns {Popup}
|
|
|
|
*/
|
|
|
|
getPopup() {
|
|
|
|
return window.$components.firstOnElement(this.container, 'popup');
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @returns {EntitySelector}
|
|
|
|
*/
|
2022-06-25 21:13:17 +08:00
|
|
|
getSelector() {
|
2022-11-16 23:46:41 +08:00
|
|
|
return window.$components.firstOnElement(this.selectorEl, 'entity-selector');
|
2022-06-25 21:13:17 +08:00
|
|
|
}
|
|
|
|
|
2017-08-27 21:31:34 +08:00
|
|
|
onSelectButtonClick() {
|
2022-06-27 21:27:29 +08:00
|
|
|
this.handleConfirmedSelection(this.selection);
|
2017-08-27 21:31:34 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
onSelectionChange(entity) {
|
|
|
|
this.selection = entity;
|
|
|
|
if (entity === null) {
|
|
|
|
this.selectButton.setAttribute('disabled', 'true');
|
|
|
|
} else {
|
|
|
|
this.selectButton.removeAttribute('disabled');
|
|
|
|
}
|
|
|
|
}
|
2022-06-27 21:27:29 +08:00
|
|
|
|
|
|
|
handleConfirmedSelection(entity) {
|
|
|
|
this.hide();
|
|
|
|
this.getSelector().reset();
|
|
|
|
if (this.callback && entity) this.callback(entity);
|
|
|
|
}
|
2023-04-19 05:20:02 +08:00
|
|
|
|
|
|
|
}
|