FEATURE: Introduce ignore duration selection (#7266)

* FEATURE: Introducing new UI for tracking User's ignored or muted states
This commit is contained in:
Tarek Khalil
2019-03-29 10:14:53 +00:00
committed by GitHub
parent 961fb2c70e
commit b1cb95fc23
14 changed files with 201 additions and 62 deletions

View File

@ -1,85 +1,99 @@
import DropdownSelectBox from "select-kit/components/dropdown-select-box";
import { popupAjaxError } from "discourse/lib/ajax-error";
import showModal from "discourse/lib/show-modal";
export default DropdownSelectBox.extend({
classNames: ["user-notifications", "user-notifications-dropdown"],
nameProperty: "label",
allowInitialValueMutation: false,
computeHeaderContent() {
let content = this._super(...arguments);
init() {
this._super(...arguments);
if (this.get("user.ignored")) {
this.set("headerIcon", "eye-slash");
content.name = `${I18n.t("user.user_notifications_ignore_option")}`;
this.set("value", "changeToIgnored");
} else if (this.get("user.muted")) {
this.set("headerIcon", "times-circle");
content.name = `${I18n.t("user.user_notifications_mute_option")}`;
this.set("value", "changeToMuted");
} else {
this.set("headerIcon", "user");
content.name = `${I18n.t("user.user_notifications_normal_option")}`;
this.set("value", "changeToNormal");
}
return content;
},
computeContent() {
const content = [];
content.push({
icon: "user",
id: "change-to-normal",
description: I18n.t("user.user_notifications_normal_option_title"),
action: () => this.send("reset"),
label: I18n.t("user.user_notifications_normal_option")
id: "changeToNormal",
description: I18n.t("user.user_notifications.normal_option_title"),
label: I18n.t("user.user_notifications.normal_option")
});
content.push({
icon: "times-circle",
id: "change-to-muted",
description: I18n.t("user.user_notifications_mute_option_title"),
action: () => this.send("mute"),
label: I18n.t("user.user_notifications_mute_option")
id: "changeToMuted",
description: I18n.t("user.user_notifications.mute_option_title"),
label: I18n.t("user.user_notifications.mute_option")
});
if (this.get("user.can_ignore_user")) {
content.push({
icon: "eye-slash",
id: "change-to-ignored",
description: I18n.t("user.user_notifications_ignore_option_title"),
action: () => this.send("ignore"),
label: I18n.t("user.user_notifications_ignore_option")
id: "changeToIgnored",
description: I18n.t("user.user_notifications.ignore_option_title"),
label: I18n.t("user.user_notifications.ignore_option")
});
}
return content;
},
changeToNormal() {
this.get("updateNotificationLevel")("normal")
.then(() => {
this.set("user.ignored", false);
this.set("user.muted", false);
this.set("headerIcon", "user");
})
.catch(popupAjaxError);
},
changeToMuted() {
this.get("updateNotificationLevel")("mute")
.then(() => {
this.set("user.ignored", false);
this.set("user.muted", true);
this.set("headerIcon", "times-circle");
})
.catch(popupAjaxError);
},
changeToIgnored() {
const controller = showModal("ignore-duration", {
model: this.get("user")
});
controller.setProperties({
onSuccess: () => {
this.set("headerIcon", "eye-slash");
},
onClose: () => {
if (this.get("user.muted")) {
this.set("headerIcon", "times-circle");
this._select("changeToMuted");
} else if (!this.get("user.muted") && !this.get("user.ignored")) {
this.set("headerIcon", "user");
this._select("changeToNormal");
}
}
});
},
_select(id) {
this.select(
this.collectionComputedContent.find(c => c.originalContent.id === id)
);
},
actions: {
reset() {
this.get("updateNotificationLevel")("normal")
.then(() => {
this.set("user.ignored", false);
this.set("user.muted", false);
this.computeHeaderContent();
})
.catch(popupAjaxError);
},
mute() {
this.get("updateNotificationLevel")("mute")
.then(() => {
this.set("user.ignored", false);
this.set("user.muted", true);
this.computeHeaderContent();
})
.catch(popupAjaxError);
},
ignore() {
this.get("updateNotificationLevel")("ignore")
.then(() => {
this.set("user.ignored", true);
this.set("user.muted", false);
this.computeHeaderContent();
})
.catch(popupAjaxError);
onSelect(level) {
this[level]();
}
}
});