56 lines
1.5 KiB
JavaScript
56 lines
1.5 KiB
JavaScript
import { isEmpty } from "@ember/utils";
|
|
import Component from "@ember/component";
|
|
import discourseComputed, {
|
|
on,
|
|
observes
|
|
} from "discourse-common/utils/decorators";
|
|
import { findRawTemplate } from "discourse/lib/raw-templates";
|
|
|
|
export default Component.extend({
|
|
@discourseComputed("placeholderKey")
|
|
placeholder(placeholderKey) {
|
|
return placeholderKey ? I18n.t(placeholderKey) : "";
|
|
},
|
|
|
|
@observes("groupNames")
|
|
_update() {
|
|
if (this.canReceiveUpdates === "true")
|
|
this._initializeAutocomplete({ updateData: true });
|
|
},
|
|
|
|
@on("didInsertElement")
|
|
_initializeAutocomplete(opts) {
|
|
let selectedGroups;
|
|
let groupNames = this.groupNames;
|
|
|
|
$(this.element.querySelector("input")).autocomplete({
|
|
allowAny: false,
|
|
items: _.isArray(groupNames)
|
|
? groupNames
|
|
: isEmpty(groupNames)
|
|
? []
|
|
: [groupNames],
|
|
single: this.single,
|
|
fullWidthWrap: this.fullWidthWrap,
|
|
updateData: opts && opts.updateData ? opts.updateData : false,
|
|
onChangeItems: items => {
|
|
selectedGroups = items;
|
|
this.set("groupNames", items.join(","));
|
|
},
|
|
transformComplete: g => {
|
|
return g.name;
|
|
},
|
|
dataSource: term => {
|
|
return this.groupFinder(term).then(groups => {
|
|
if (!selectedGroups) return groups;
|
|
|
|
return groups.filter(group => {
|
|
return !selectedGroups.any(s => s === group.name);
|
|
});
|
|
});
|
|
},
|
|
template: findRawTemplate("group-selector-autocomplete")
|
|
});
|
|
}
|
|
});
|