2023-04-19 05:20:02 +08:00
|
|
|
import {onChildEvent} from '../services/dom';
|
|
|
|
import {Component} from './component';
|
2017-08-27 21:31:34 +08:00
|
|
|
|
2023-12-19 20:09:57 +08:00
|
|
|
/**
|
|
|
|
* @typedef EntitySelectorSearchOptions
|
|
|
|
* @property entityTypes string
|
|
|
|
* @property entityPermission string
|
|
|
|
* @property searchEndpoint string
|
2024-01-23 23:39:09 +08:00
|
|
|
* @property initialValue string
|
2023-12-19 20:09:57 +08:00
|
|
|
*/
|
|
|
|
|
2021-02-13 06:10:37 +08:00
|
|
|
/**
|
|
|
|
* Entity Selector
|
|
|
|
*/
|
2022-11-15 19:24:31 +08:00
|
|
|
export class EntitySelector extends Component {
|
2017-08-27 21:31:34 +08:00
|
|
|
|
2021-02-13 06:10:37 +08:00
|
|
|
setup() {
|
|
|
|
this.elem = this.$el;
|
|
|
|
|
|
|
|
this.input = this.$refs.input;
|
|
|
|
this.searchInput = this.$refs.search;
|
|
|
|
this.loading = this.$refs.loading;
|
|
|
|
this.resultsContainer = this.$refs.results;
|
|
|
|
|
2023-12-19 20:09:57 +08:00
|
|
|
this.searchOptions = {
|
|
|
|
entityTypes: this.$opts.entityTypes || 'page,book,chapter',
|
|
|
|
entityPermission: this.$opts.entityPermission || 'view',
|
|
|
|
searchEndpoint: this.$opts.searchEndpoint || '',
|
2024-01-23 23:39:09 +08:00
|
|
|
initialValue: this.searchInput.value || '',
|
2023-12-19 20:09:57 +08:00
|
|
|
};
|
|
|
|
|
2017-08-27 21:31:34 +08:00
|
|
|
this.search = '';
|
|
|
|
this.lastClick = 0;
|
|
|
|
|
2021-02-13 06:10:37 +08:00
|
|
|
this.setupListeners();
|
|
|
|
this.showLoading();
|
2023-12-19 20:09:57 +08:00
|
|
|
|
|
|
|
if (this.searchOptions.searchEndpoint) {
|
|
|
|
this.initialLoad();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @param {EntitySelectorSearchOptions} options
|
|
|
|
*/
|
|
|
|
configureSearchOptions(options) {
|
|
|
|
Object.assign(this.searchOptions, options);
|
|
|
|
this.reset();
|
2024-01-23 23:39:09 +08:00
|
|
|
this.searchInput.value = this.searchOptions.initialValue;
|
2021-02-13 06:10:37 +08:00
|
|
|
}
|
2017-08-27 21:31:34 +08:00
|
|
|
|
2021-02-13 06:10:37 +08:00
|
|
|
setupListeners() {
|
2017-08-27 21:31:34 +08:00
|
|
|
this.elem.addEventListener('click', this.onClick.bind(this));
|
|
|
|
|
|
|
|
let lastSearch = 0;
|
2023-04-19 22:20:04 +08:00
|
|
|
this.searchInput.addEventListener('input', () => {
|
2017-08-27 21:31:34 +08:00
|
|
|
lastSearch = Date.now();
|
|
|
|
this.showLoading();
|
|
|
|
setTimeout(() => {
|
|
|
|
if (Date.now() - lastSearch < 199) return;
|
|
|
|
this.searchEntities(this.searchInput.value);
|
|
|
|
}, 200);
|
|
|
|
});
|
2019-03-31 00:54:15 +08:00
|
|
|
|
2017-08-27 21:31:34 +08:00
|
|
|
this.searchInput.addEventListener('keydown', event => {
|
|
|
|
if (event.keyCode === 13) event.preventDefault();
|
|
|
|
});
|
|
|
|
|
2021-02-13 06:10:37 +08:00
|
|
|
// Keyboard navigation
|
2023-04-19 22:20:04 +08:00
|
|
|
onChildEvent(this.$el, '[data-entity-type]', 'keydown', event => {
|
|
|
|
if (event.ctrlKey && event.code === 'Enter') {
|
2021-02-13 06:10:37 +08:00
|
|
|
const form = this.$el.closest('form');
|
|
|
|
if (form) {
|
|
|
|
form.submit();
|
2023-04-19 22:20:04 +08:00
|
|
|
event.preventDefault();
|
2021-02-13 06:10:37 +08:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-04-19 22:20:04 +08:00
|
|
|
if (event.code === 'ArrowDown') {
|
2021-02-13 06:10:37 +08:00
|
|
|
this.focusAdjacent(true);
|
|
|
|
}
|
2023-04-19 22:20:04 +08:00
|
|
|
if (event.code === 'ArrowUp') {
|
2021-02-13 06:10:37 +08:00
|
|
|
this.focusAdjacent(false);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2023-04-19 22:20:04 +08:00
|
|
|
this.searchInput.addEventListener('keydown', event => {
|
|
|
|
if (event.code === 'ArrowDown') {
|
2021-02-13 06:10:37 +08:00
|
|
|
this.focusAdjacent(true);
|
|
|
|
}
|
2023-04-19 05:20:02 +08:00
|
|
|
});
|
2021-02-13 06:10:37 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
focusAdjacent(forward = true) {
|
|
|
|
const items = Array.from(this.resultsContainer.querySelectorAll('[data-entity-type]'));
|
|
|
|
const selectedIndex = items.indexOf(document.activeElement);
|
2023-04-19 05:20:02 +08:00
|
|
|
const newItem = items[selectedIndex + (forward ? 1 : -1)] || items[0];
|
2021-02-13 06:10:37 +08:00
|
|
|
if (newItem) {
|
|
|
|
newItem.focus();
|
|
|
|
}
|
2017-08-27 21:31:34 +08:00
|
|
|
}
|
|
|
|
|
2022-06-25 21:13:17 +08:00
|
|
|
reset() {
|
|
|
|
this.searchInput.value = '';
|
|
|
|
this.showLoading();
|
|
|
|
this.initialLoad();
|
|
|
|
}
|
|
|
|
|
|
|
|
focusSearch() {
|
|
|
|
this.searchInput.focus();
|
|
|
|
}
|
|
|
|
|
2017-08-27 21:31:34 +08:00
|
|
|
showLoading() {
|
|
|
|
this.loading.style.display = 'block';
|
|
|
|
this.resultsContainer.style.display = 'none';
|
|
|
|
}
|
|
|
|
|
|
|
|
hideLoading() {
|
|
|
|
this.loading.style.display = 'none';
|
|
|
|
this.resultsContainer.style.display = 'block';
|
|
|
|
}
|
|
|
|
|
|
|
|
initialLoad() {
|
2023-12-19 20:09:57 +08:00
|
|
|
if (!this.searchOptions.searchEndpoint) {
|
|
|
|
throw new Error('Search endpoint not set for entity-selector load');
|
|
|
|
}
|
|
|
|
|
2024-01-23 23:39:09 +08:00
|
|
|
if (this.searchOptions.initialValue) {
|
|
|
|
this.searchEntities(this.searchOptions.initialValue);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2021-02-13 06:10:37 +08:00
|
|
|
window.$http.get(this.searchUrl()).then(resp => {
|
2017-08-27 21:31:34 +08:00
|
|
|
this.resultsContainer.innerHTML = resp.data;
|
|
|
|
this.hideLoading();
|
2023-04-19 05:20:02 +08:00
|
|
|
});
|
2017-08-27 21:31:34 +08:00
|
|
|
}
|
|
|
|
|
2021-02-13 06:10:37 +08:00
|
|
|
searchUrl() {
|
2023-12-19 20:09:57 +08:00
|
|
|
const query = `types=${encodeURIComponent(this.searchOptions.entityTypes)}&permission=${encodeURIComponent(this.searchOptions.entityPermission)}`;
|
|
|
|
return `${this.searchOptions.searchEndpoint}?${query}`;
|
2021-02-13 06:10:37 +08:00
|
|
|
}
|
|
|
|
|
2017-08-27 21:31:34 +08:00
|
|
|
searchEntities(searchTerm) {
|
2023-12-19 20:09:57 +08:00
|
|
|
if (!this.searchOptions.searchEndpoint) {
|
|
|
|
throw new Error('Search endpoint not set for entity-selector load');
|
|
|
|
}
|
|
|
|
|
2017-08-27 21:31:34 +08:00
|
|
|
this.input.value = '';
|
2021-02-13 06:10:37 +08:00
|
|
|
const url = `${this.searchUrl()}&term=${encodeURIComponent(searchTerm)}`;
|
2017-08-27 21:31:34 +08:00
|
|
|
window.$http.get(url).then(resp => {
|
|
|
|
this.resultsContainer.innerHTML = resp.data;
|
|
|
|
this.hideLoading();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
isDoubleClick() {
|
2021-02-13 06:10:37 +08:00
|
|
|
const now = Date.now();
|
|
|
|
const answer = now - this.lastClick < 300;
|
2017-08-27 21:31:34 +08:00
|
|
|
this.lastClick = now;
|
|
|
|
return answer;
|
|
|
|
}
|
|
|
|
|
|
|
|
onClick(event) {
|
2019-03-31 00:54:15 +08:00
|
|
|
const listItem = event.target.closest('[data-entity-type]');
|
|
|
|
if (listItem) {
|
2017-08-27 21:31:34 +08:00
|
|
|
event.preventDefault();
|
|
|
|
event.stopPropagation();
|
2019-03-31 00:54:15 +08:00
|
|
|
this.selectItem(listItem);
|
2017-08-27 21:31:34 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
selectItem(item) {
|
2019-03-31 00:54:15 +08:00
|
|
|
const isDblClick = this.isDoubleClick();
|
|
|
|
const type = item.getAttribute('data-entity-type');
|
|
|
|
const id = item.getAttribute('data-entity-id');
|
|
|
|
const isSelected = (!item.classList.contains('selected') || isDblClick);
|
2017-08-27 21:31:34 +08:00
|
|
|
|
|
|
|
this.unselectAll();
|
|
|
|
this.input.value = isSelected ? `${type}:${id}` : '';
|
|
|
|
|
2019-04-06 23:56:50 +08:00
|
|
|
const link = item.getAttribute('href');
|
|
|
|
const name = item.querySelector('.entity-list-item-name').textContent;
|
2023-04-19 05:20:02 +08:00
|
|
|
const data = {id: Number(id), name, link};
|
2019-04-06 23:56:50 +08:00
|
|
|
|
2017-08-28 20:38:32 +08:00
|
|
|
if (isSelected) {
|
|
|
|
item.classList.add('selected');
|
2019-03-31 00:54:15 +08:00
|
|
|
} else {
|
2023-04-19 05:20:02 +08:00
|
|
|
window.$events.emit('entity-select-change', null);
|
2017-08-28 20:38:32 +08:00
|
|
|
}
|
2019-03-31 00:54:15 +08:00
|
|
|
|
2017-08-27 21:31:34 +08:00
|
|
|
if (!isDblClick && !isSelected) return;
|
|
|
|
|
2019-03-31 00:54:15 +08:00
|
|
|
if (isDblClick) {
|
2019-04-06 23:56:50 +08:00
|
|
|
this.confirmSelection(data);
|
2019-03-31 00:54:15 +08:00
|
|
|
}
|
|
|
|
if (isSelected) {
|
2023-04-19 05:20:02 +08:00
|
|
|
window.$events.emit('entity-select-change', data);
|
2019-03-31 00:54:15 +08:00
|
|
|
}
|
2017-08-27 21:31:34 +08:00
|
|
|
}
|
|
|
|
|
2019-04-06 23:56:50 +08:00
|
|
|
confirmSelection(data) {
|
|
|
|
window.$events.emit('entity-select-confirm', data);
|
|
|
|
}
|
|
|
|
|
2017-08-27 21:31:34 +08:00
|
|
|
unselectAll() {
|
2021-02-13 06:10:37 +08:00
|
|
|
const selected = this.elem.querySelectorAll('.selected');
|
|
|
|
for (const selectedElem of selected) {
|
2019-03-31 00:54:15 +08:00
|
|
|
selectedElem.classList.remove('selected', 'primary-background');
|
2017-08-27 21:31:34 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-04-19 05:20:02 +08:00
|
|
|
}
|