mirror of
https://github.com/discourse/discourse.git
synced 2024-11-23 20:20:43 +08:00
DEV: Convert group-add-members modal to component-based API (#22368)
This commit is contained in:
Isaac Janzen
GitHub
parent
ad1b466cd4
commit
239d56dd69
|
|
@ -0,0 +1,60 @@
|
|||
<DModal
|
||||
@title={{this.title}}
|
||||
@closeModal={{@closeModal}}
|
||||
class="group-add-members-modal"
|
||||
@flash={{this.flash}}
|
||||
>
|
||||
<:body>
|
||||
<form class="form-vertical group-add-members">
|
||||
<p>{{i18n "groups.add_members.description"}}</p>
|
||||
<div class="input-group">
|
||||
<EmailGroupUserChooser
|
||||
@value={{this.usernamesAndEmails}}
|
||||
@onChange={{this.setUsernamesAndEmails}}
|
||||
@options={{hash
|
||||
allowEmails=this.currentUser.can_invite_to_forum
|
||||
filterPlaceholder=(if
|
||||
this.currentUser.can_invite_to_forum
|
||||
"groups.add_members.usernames_or_emails_placeholder"
|
||||
"groups.add_members.usernames_placeholder"
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{{#if @model.can_admin_group}}
|
||||
<div class="input-group">
|
||||
<label>
|
||||
<Input
|
||||
id="set-owner"
|
||||
@type="checkbox"
|
||||
@checked={{this.setOwner}}
|
||||
disabled={{this.emails}}
|
||||
/>
|
||||
{{i18n "groups.add_members.set_owner"}}
|
||||
</label>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="input-group">
|
||||
<label>
|
||||
<Input
|
||||
@type="checkbox"
|
||||
@checked={{this.notifyUsers}}
|
||||
disabled={{and (not this.usernames) this.emails}}
|
||||
/>
|
||||
{{i18n "groups.add_members.notify_users"}}
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</:body>
|
||||
<:footer>
|
||||
<DButton
|
||||
@action={{this.addMembers}}
|
||||
class="add btn-primary"
|
||||
@icon="plus"
|
||||
@disabled={{or this.loading (not this.usernamesAndEmails)}}
|
||||
@label="groups.add"
|
||||
/>
|
||||
</:footer>
|
||||
</DModal>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
import Component from "@glimmer/component";
|
||||
import { action } from "@ember/object";
|
||||
import { isEmpty } from "@ember/utils";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import { emailValid } from "discourse/lib/utilities";
|
||||
import I18n from "I18n";
|
||||
import { inject as service } from "@ember/service";
|
||||
|
||||
export default class GroupAddMembers extends Component {
|
||||
@service currentUser;
|
||||
@service router;
|
||||
|
||||
@tracked loading = false;
|
||||
@tracked setOwner = false;
|
||||
@tracked notifyUsers = false;
|
||||
@tracked usernamesAndEmails = [];
|
||||
@tracked flash;
|
||||
|
||||
get title() {
|
||||
return I18n.t("groups.add_members.title", {
|
||||
group_name: this.args.model.fullName || this.args.model.name,
|
||||
});
|
||||
}
|
||||
|
||||
get usernames() {
|
||||
return this.usernamesAndEmails.reject(emailValid).join(",");
|
||||
}
|
||||
|
||||
get emails() {
|
||||
return this.usernamesAndEmails.filter(emailValid).join(",");
|
||||
}
|
||||
|
||||
@action
|
||||
setUsernamesAndEmails(usernamesAndEmails) {
|
||||
this.usernamesAndEmails = usernamesAndEmails;
|
||||
if (this.emails) {
|
||||
if (!this.usernames) {
|
||||
this.notifyUsers = false;
|
||||
}
|
||||
this.setOwner = false;
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
addMembers() {
|
||||
if (isEmpty(this.usernamesAndEmails)) {
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
const promise = this.setOwner
|
||||
? this.args.model.addOwners(this.usernames, true, this.notifyUsers)
|
||||
: this.args.model.addMembers(
|
||||
this.usernames,
|
||||
true,
|
||||
this.notifyUsers,
|
||||
this.emails
|
||||
);
|
||||
|
||||
promise
|
||||
.then(() => {
|
||||
this.router.transitionTo("group.members", this.args.model.name, {
|
||||
queryParams: { ...(this.usernames && { filter: this.usernames }) },
|
||||
});
|
||||
this.args.closeModal();
|
||||
})
|
||||
.catch((e) => (this.flash = e))
|
||||
.finally(() => (this.loading = false));
|
||||
}
|
||||
}
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
import Controller from "@ember/controller";
|
||||
import { action } from "@ember/object";
|
||||
import { isEmpty } from "@ember/utils";
|
||||
import discourseComputed from "discourse-common/utils/decorators";
|
||||
import { flashAjaxError } from "discourse/lib/ajax-error";
|
||||
import { emailValid } from "discourse/lib/utilities";
|
||||
import ModalFunctionality from "discourse/mixins/modal-functionality";
|
||||
import I18n from "I18n";
|
||||
|
||||
export default Controller.extend(ModalFunctionality, {
|
||||
loading: false,
|
||||
|
||||
usernamesAndEmails: null,
|
||||
setOwner: false,
|
||||
notifyUsers: false,
|
||||
|
||||
onShow() {
|
||||
this.setProperties({
|
||||
loading: false,
|
||||
setOwner: false,
|
||||
notifyUsers: false,
|
||||
usernamesAndEmails: [],
|
||||
});
|
||||
},
|
||||
|
||||
@discourseComputed("model.name", "model.full_name")
|
||||
rawTitle(name, fullName) {
|
||||
return I18n.t("groups.add_members.title", { group_name: fullName || name });
|
||||
},
|
||||
|
||||
@discourseComputed("usernamesAndEmails.[]")
|
||||
usernames(usernamesAndEmails) {
|
||||
return usernamesAndEmails.reject(emailValid).join(",");
|
||||
},
|
||||
|
||||
@discourseComputed("usernamesAndEmails.[]")
|
||||
emails(usernamesAndEmails) {
|
||||
return usernamesAndEmails.filter(emailValid).join(",");
|
||||
},
|
||||
|
||||
@action
|
||||
setUsernamesAndEmails(usernamesAndEmails) {
|
||||
this.set("usernamesAndEmails", usernamesAndEmails);
|
||||
|
||||
if (this.emails) {
|
||||
if (!this.usernames) {
|
||||
this.set("notifyUsers", false);
|
||||
}
|
||||
|
||||
this.set("setOwner", false);
|
||||
}
|
||||
},
|
||||
|
||||
@action
|
||||
addMembers() {
|
||||
if (isEmpty(this.usernamesAndEmails)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.set("loading", true);
|
||||
|
||||
const promise = this.setOwner
|
||||
? this.model.addOwners(this.usernames, true, this.notifyUsers)
|
||||
: this.model.addMembers(
|
||||
this.usernames,
|
||||
true,
|
||||
this.notifyUsers,
|
||||
this.emails
|
||||
);
|
||||
|
||||
promise
|
||||
.then(() => {
|
||||
this.transitionToRoute("group.members", this.get("model.name"), {
|
||||
queryParams: this.usernames ? { filter: this.usernames } : {},
|
||||
});
|
||||
|
||||
this.send("closeModal");
|
||||
})
|
||||
.catch(flashAjaxError(this))
|
||||
.finally(() => this.set("loading", false));
|
||||
},
|
||||
});
|
||||
|
|
@ -2,8 +2,12 @@ import DiscourseRoute from "discourse/routes/discourse";
|
|||
import I18n from "I18n";
|
||||
import { action } from "@ember/object";
|
||||
import showModal from "discourse/lib/show-modal";
|
||||
import { inject as service } from "@ember/service";
|
||||
import GroupAddMembersModal from "discourse/components/modal/group-add-members";
|
||||
|
||||
export default DiscourseRoute.extend({
|
||||
modal: service(),
|
||||
|
||||
titleToken() {
|
||||
return I18n.t("groups.members.title");
|
||||
},
|
||||
|
|
@ -25,7 +29,7 @@ export default DiscourseRoute.extend({
|
|||
|
||||
@action
|
||||
showAddMembersModal() {
|
||||
showModal("group-add-members", { model: this.modelFor("group") });
|
||||
this.modal.show(GroupAddMembersModal, { model: this.modelFor("group") });
|
||||
},
|
||||
|
||||
@action
|
||||
|
|
|
|||
|
|
@ -1,55 +0,0 @@
|
|||
<DModalBody @rawTitle={{this.rawTitle}}>
|
||||
<form class="form-vertical group-add-members">
|
||||
<p>{{i18n "groups.add_members.description"}}</p>
|
||||
|
||||
<div class="input-group">
|
||||
<EmailGroupUserChooser
|
||||
@value={{this.usernamesAndEmails}}
|
||||
@onChange={{action "setUsernamesAndEmails"}}
|
||||
@options={{hash
|
||||
allowEmails=this.currentUser.can_invite_to_forum
|
||||
filterPlaceholder=(if
|
||||
this.currentUser.can_invite_to_forum
|
||||
"groups.add_members.usernames_or_emails_placeholder"
|
||||
"groups.add_members.usernames_placeholder"
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{{#if this.model.can_admin_group}}
|
||||
<div class="input-group">
|
||||
<label>
|
||||
<Input
|
||||
id="set-owner"
|
||||
@type="checkbox"
|
||||
@checked={{this.setOwner}}
|
||||
disabled={{this.emails}}
|
||||
/>
|
||||
{{i18n "groups.add_members.set_owner"}}
|
||||
</label>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="input-group">
|
||||
<label>
|
||||
<Input
|
||||
@type="checkbox"
|
||||
@checked={{this.notifyUsers}}
|
||||
disabled={{and (not this.usernames) this.emails}}
|
||||
/>
|
||||
{{i18n "groups.add_members.notify_users"}}
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</DModalBody>
|
||||
|
||||
<div class="modal-footer">
|
||||
<DButton
|
||||
@action={{action "addMembers"}}
|
||||
@class="add btn-primary"
|
||||
@icon="plus"
|
||||
@disabled={{or this.loading (not this.usernamesAndEmails)}}
|
||||
@label="groups.add"
|
||||
/>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user