DEV: migrate ignore duration to Glimmer and DModal (#22687)

This PR migrates the ignore modal to a Glimmer component and DModal. Most of the code is lift-and-shift.
This commit is contained in:
Ted Johansson 2023-07-20 10:49:58 +08:00 committed by GitHub
parent 117f6d92a8
commit 9a6bbac5bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 114 additions and 105 deletions

View File

@ -1,9 +1,11 @@
import Component from "@ember/component";
import { inject as service } from "@ember/service";
import User from "discourse/models/user";
import { popupAjaxError } from "discourse/lib/ajax-error";
import showModal from "discourse/lib/show-modal";
import IgnoreDurationModal from "./modal/ignore-duration-with-username";
export default Component.extend({
modal: service(),
item: null,
actions: {
removeIgnoredUser(item) {
@ -20,13 +22,13 @@ export default Component.extend({
});
},
newIgnoredUser() {
const modal = showModal("ignore-duration-with-username", {
model: this.model,
});
modal.setProperties({
ignoredUsername: null,
onUserIgnored: (username) => {
this.items.addObject(username);
this.modal.show(IgnoreDurationModal, {
model: {
actingUser: this.model,
ignoredUsername: null,
onUserIgnored: (username) => {
this.items.addObject(username);
},
},
});
},

View File

@ -0,0 +1,36 @@
<DModal
@closeModal={{@closeModal}}
@title={{i18n "user.user_notifications.ignore_duration_title"}}
@flash={{this.flash}}
@autoFocus="false"
class="ignore-duration-with-username-modal"
>
<:body>
<div class="controls tracking-controls">
<label>{{d-icon "far-eye-slash" class="icon"}}
{{i18n "user.user_notifications.ignore_duration_username"}}</label>
<EmailGroupUserChooser
@value={{this.ignoredUsername}}
@onChange={{this.updateIgnoredUsername}}
@options={{hash excludeCurrentUser=true maximum=1}}
/>
</div>
<FutureDateInput
@label="user.user_notifications.ignore_duration_when"
@input={{readonly this.ignoredUntil}}
@customShortcuts={{this.timeShortcuts}}
@includeDateTime={{false}}
@onChangeInput={{action (mut this.ignoredUntil)}}
/>
<p>{{i18n "user.user_notifications.ignore_duration_note"}}</p>
</:body>
<:footer>
<DButton
@class="btn-primary"
@disabled={{this.saveDisabled}}
@label="user.user_notifications.ignore_duration_save"
@action={{this.ignore}}
/>
<ConditionalLoadingSpinner @size="small" @condition={{this.loading}} />
</:footer>
</DModal>

View File

@ -0,0 +1,68 @@
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";
import { inject as service } from "@ember/service";
import I18n from "I18n";
import User from "discourse/models/user";
import { popupAjaxError } from "discourse/lib/ajax-error";
import { timeShortcuts } from "discourse/lib/time-shortcut";
export default class IgnoreDurationModal extends Component {
@service currentUser;
@tracked flash;
@tracked loading = false;
@tracked ignoredUntil = null;
@tracked ignoredUsername = null;
get timeShortcuts() {
const timezone = this.currentUser.user_option.timezone;
const shortcuts = timeShortcuts(timezone);
return [
shortcuts.laterToday(),
shortcuts.tomorrow(),
shortcuts.laterThisWeek(),
shortcuts.thisWeekend(),
shortcuts.monday(),
shortcuts.twoWeeks(),
shortcuts.nextMonth(),
shortcuts.twoMonths(),
shortcuts.threeMonths(),
shortcuts.fourMonths(),
shortcuts.sixMonths(),
shortcuts.oneYear(),
shortcuts.forever(),
];
}
@action
ignore() {
if (!this.ignoredUntil || !this.ignoredUsername) {
this.flash = I18n.t(
"user.user_notifications.ignore_duration_time_frame_required"
);
return;
}
this.loading = true;
User.findByUsername(this.ignoredUsername).then((user) => {
user
.updateNotificationLevel({
level: "ignore",
expiringAt: this.ignoredUntil,
actingUser: this.args.model.actingUser,
})
.then(() => {
this.args.model.onUserIgnored(this.ignoredUsername);
this.args.closeModal();
})
.catch(popupAjaxError)
.finally(() => (this.loading = false));
});
}
@action
updateIgnoredUsername(selected) {
this.ignoredUsername = selected.firstObject;
}
}

View File

@ -1,65 +0,0 @@
import Controller from "@ember/controller";
import I18n from "I18n";
import ModalFunctionality from "discourse/mixins/modal-functionality";
import User from "discourse/models/user";
import { popupAjaxError } from "discourse/lib/ajax-error";
import { timeShortcuts } from "discourse/lib/time-shortcut";
import discourseComputed from "discourse-common/utils/decorators";
export default Controller.extend(ModalFunctionality, {
loading: false,
ignoredUntil: null,
ignoredUsername: null,
@discourseComputed
timeShortcuts() {
const timezone = this.currentUser.user_option.timezone;
const shortcuts = timeShortcuts(timezone);
return [
shortcuts.laterToday(),
shortcuts.tomorrow(),
shortcuts.laterThisWeek(),
shortcuts.thisWeekend(),
shortcuts.monday(),
shortcuts.twoWeeks(),
shortcuts.nextMonth(),
shortcuts.twoMonths(),
shortcuts.threeMonths(),
shortcuts.fourMonths(),
shortcuts.sixMonths(),
shortcuts.oneYear(),
shortcuts.forever(),
];
},
actions: {
ignore() {
if (!this.ignoredUntil || !this.ignoredUsername) {
this.flash(
I18n.t("user.user_notifications.ignore_duration_time_frame_required"),
"error"
);
return;
}
this.set("loading", true);
User.findByUsername(this.ignoredUsername).then((user) => {
user
.updateNotificationLevel({
level: "ignore",
expiringAt: this.ignoredUntil,
actingUser: this.model,
})
.then(() => {
this.onUserIgnored(this.ignoredUsername);
this.send("closeModal");
})
.catch(popupAjaxError)
.finally(() => this.set("loading", false));
});
},
updateIgnoredUsername(selected) {
this.set("ignoredUsername", selected.firstObject);
},
},
});

View File

@ -1,32 +0,0 @@
<DModalBody
@title="user.user_notifications.ignore_duration_title"
@autoFocus="false"
>
<div class="controls tracking-controls">
<label>{{d-icon "far-eye-slash" class="icon"}}
{{i18n "user.user_notifications.ignore_duration_username"}}</label>
<EmailGroupUserChooser
@value={{this.ignoredUsername}}
@onChange={{action "updateIgnoredUsername"}}
@options={{hash excludeCurrentUser=true maximum=1}}
/>
</div>
<FutureDateInput
@label="user.user_notifications.ignore_duration_when"
@input={{readonly this.ignoredUntil}}
@customShortcuts={{this.timeShortcuts}}
@includeDateTime={{false}}
@onChangeInput={{action (mut this.ignoredUntil)}}
/>
<p>{{i18n "user.user_notifications.ignore_duration_note"}}</p>
</DModalBody>
<div class="modal-footer">
<DButton
@class="btn-primary"
@disabled={{this.saveDisabled}}
@label="user.user_notifications.ignore_duration_save"
@action={{action "ignore"}}
/>
<ConditionalLoadingSpinner @size="small" @condition={{this.loading}} />
</div>