IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-01 13:09:33 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add async search to tags dropdown, always show selected tag

Browse Source
This commit is contained in:
pmusaraj 2018-09-13 15:05:23 -04:00 committed by Sam
parent bc4e2aa07c
commit 0a2efd8ff1
1 changed files with 44 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
app/assets/javascripts/select-kit/components/tag-drop.js.es6
View File

@ -1,9 +1,10 @@
import ComboBoxComponent from "select-kit/components/combo-box"; import ComboBoxComponent from "select-kit/components/combo-box";
import DiscourseURL from "discourse/lib/url"; import DiscourseURL from "discourse/lib/url";
import Tags from "select-kit/mixins/tags";
import { default as computed } from "ember-addons/ember-computed-decorators"; import { default as computed } from "ember-addons/ember-computed-decorators";
const { isEmpty } = Ember; const { isEmpty, run } = Ember;
export default ComboBoxComponent.extend({ export default ComboBoxComponent.extend(Tags, {
pluginApiIdentifiers: ["tag-drop"], pluginApiIdentifiers: ["tag-drop"],
classNameBindings: ["categoryStyle", "tagClass"], classNameBindings: ["categoryStyle", "tagClass"],
classNames: "tag-drop", classNames: "tag-drop",
@ -21,6 +22,8 @@ export default ComboBoxComponent.extend({
fullWidthOnMobile: true, fullWidthOnMobile: true,
caretDownIcon: "caret-right", caretDownIcon: "caret-right",
caretUpIcon: "caret-down", caretUpIcon: "caret-down",
allowContentReplacement: true,
isAsync: true,
@computed("tagId") @computed("tagId")
noTagsSelected() { noTagsSelected() {
@ -42,7 +45,9 @@ export default ComboBoxComponent.extend({
let content = this._super(); let content = this._super();
if (!content.value) { if (!content.value) {
if (this.get("noTagsSelected")) { if (this.get("tagId")) {
content.title = this.get("tagId");
} else if (this.get("noTagsSelected")) {
content.title = this.get("noTagsLabel"); content.title = this.get("noTagsLabel");
} else { } else {
content.title = this.get("allTagsLabel"); content.title = this.get("allTagsLabel");
@ -89,7 +94,7 @@ export default ComboBoxComponent.extend({
`; `;
} }
if (this.get("hasSelection") || this.get("tagId") === "none") { if (this.get("tagId")) {
content += ` content += `
<a href="${allTagsUrl}" class="tag-filter"> <a href="${allTagsUrl}" class="tag-filter">
${allTagsLabel} ${allTagsLabel}
@ -119,6 +124,21 @@ export default ComboBoxComponent.extend({
} }
}, },
_prepareSearch(query) {
const data = {
q: query,
limit: this.get("siteSettings.max_tag_search_results")
};
this.searchTags("/tags/filter/search", data, this._transformJson);
},
_transformJson(context, json) {
let results = json.results;
results = results.sort((a, b) => a.id > b.id);
return results;
},
actions: { actions: {
onSelect(tagId) { onSelect(tagId) {
let url = "/tags"; let url = "/tags";
@ -127,6 +147,26 @@ export default ComboBoxComponent.extend({
} }
url = `${url}/${tagId}`; url = `${url}/${tagId}`;
DiscourseURL.routeTo(url); DiscourseURL.routeTo(url);
},
onExpand() {
if (isEmpty(this.get("asyncContent"))) {
this.set("asyncContent", this.get("content"));
}
},
onFilter(filter) {
if (isEmpty(filter)) {
this.set("asyncContent", this.get("content"));
return;
}
this.startLoading();
this.set(
"searchDebounce",
run.debounce(this, this._prepareSearch, filter, 350)
);
} }
} }
}); });