mirror of
https://github.com/discourse/discourse.git
synced 2024-11-25 05:47:31 +08:00
98201ecc24
This PR is the first step towards replacing our `{{user-selector}}` and eventually deprecating and removing it from our codebase. Some of `{{user-selector}}` problems are:
1. It's called `{{user-selector}}`, but in reality in can also select groups and emails.
2. It's an Ember component, yet it doesn't have a handlebars template and uses jQuery to render itself and modify the DOM. An example of this problem is when you want to clear the selected users programmatically, see [this](6c155dba77/app/assets/javascripts/discourse/app/components/user-selector.js (L179-L185)).
3. We now have select kit which does very similar things but a lot better.
This PR introduces `{{email-group-user-chooser}}` which is meant to replace `{{user-selector}}`. It extends select kit and has the same features that `{{user-selector}}` has. `{{user-selector}}` is still used in a few places in core, but they'll all be replaced with the new component in a separate commit.
Once `{{user-selector}}` is not used anywhere in core, it'll be deprecated and then removed after the 2.7 release.
86 lines
2.3 KiB
JavaScript
86 lines
2.3 KiB
JavaScript
import userSearch, {
|
|
eagerCompleteSearch,
|
|
skipSearch,
|
|
} from "discourse/lib/user-search";
|
|
import MultiSelectComponent from "select-kit/components/multi-select";
|
|
import { computed } from "@ember/object";
|
|
import { makeArray } from "discourse-common/lib/helpers";
|
|
|
|
export default MultiSelectComponent.extend({
|
|
pluginApiIdentifiers: ["user-chooser"],
|
|
classNames: ["user-chooser"],
|
|
valueProperty: "username",
|
|
|
|
modifyComponentForRow() {
|
|
return "user-chooser/user-row";
|
|
},
|
|
|
|
selectKitOptions: {
|
|
topicId: undefined,
|
|
categoryId: undefined,
|
|
includeGroups: false,
|
|
allowedUsers: false,
|
|
includeMentionableGroups: false,
|
|
includeMessageableGroups: false,
|
|
allowEmails: false,
|
|
groupMembersOf: undefined,
|
|
excludeCurrentUser: false,
|
|
},
|
|
|
|
content: computed("value.[]", function () {
|
|
return makeArray(this.value).map((x) => this.defaultItem(x, x));
|
|
}),
|
|
|
|
excludedUsers: computed(
|
|
"value",
|
|
"currentUser",
|
|
"selectKit.options.{excludeCurrentUser,excludedUsernames}",
|
|
{
|
|
get() {
|
|
const options = this.selectKit.options;
|
|
let usernames = makeArray(this.value);
|
|
|
|
if (this.currentUser && options.excludeCurrentUser) {
|
|
usernames = usernames.concat([this.currentUser.username]);
|
|
}
|
|
|
|
return usernames.concat(options.excludedUsernames || []);
|
|
},
|
|
}
|
|
),
|
|
|
|
search(filter = "") {
|
|
filter = filter || "";
|
|
const options = this.selectKit.options;
|
|
|
|
// prevents doing ajax request for nothing
|
|
const skippedSearch = skipSearch(filter, options.allowEmails);
|
|
const eagerComplete = eagerCompleteSearch(
|
|
filter,
|
|
options.topicId || options.categoryId
|
|
);
|
|
if (skippedSearch || (filter === "" && !eagerComplete)) {
|
|
return;
|
|
}
|
|
|
|
return userSearch({
|
|
term: filter,
|
|
topicId: options.topicId,
|
|
categoryId: options.categoryId,
|
|
exclude: this.excludedUsers,
|
|
includeGroups: options.includeGroups,
|
|
allowedUsers: options.allowedUsers,
|
|
includeMentionableGroups: options.includeMentionableGroups,
|
|
includeMessageableGroups: options.includeMessageableGroups,
|
|
groupMembersOf: options.groupMembersOf,
|
|
allowEmails: options.allowEmails,
|
|
}).then((result) => {
|
|
if (typeof result === "string") {
|
|
// do nothing promise probably got cancelled
|
|
} else {
|
|
return result;
|
|
}
|
|
});
|
|
},
|
|
});
|