DEV: Convert `change-timestamp` modal to component-based API (#22832)
This commit is contained in:
Isaac Janzen
GitHub
parent
6b9e208612
commit
542b3ffc32
|
|
@ -0,0 +1,32 @@
|
|||
<DModal
|
||||
@bodyClass="change-timestamp"
|
||||
@closeModal={{@closeModal}}
|
||||
@flash={{this.flash}}
|
||||
@title={{i18n "topic.change_timestamp.title"}}
|
||||
>
|
||||
<:body>
|
||||
<p>
|
||||
{{i18n "topic.change_timestamp.instructions"}}
|
||||
</p>
|
||||
<p class="alert alert-error {{unless this.validTimestamp 'hidden'}}">
|
||||
{{i18n "topic.change_timestamp.invalid_timestamp"}}
|
||||
</p>
|
||||
<form>
|
||||
<DatePickerPast
|
||||
@value={{readonly this.date}}
|
||||
@containerId="date-container"
|
||||
@onSelect={{action (mut this.date)}}
|
||||
/>
|
||||
<Input @type="time" @value={{this.time}} />
|
||||
</form>
|
||||
<div id="date-container"></div>
|
||||
</:body>
|
||||
<:footer>
|
||||
<DButton
|
||||
class="btn-primary"
|
||||
@disabled={{this.buttonDisabled}}
|
||||
@action={{this.changeTimestamp}}
|
||||
@label={{if this.saving "saving" "topic.change_timestamp.action"}}
|
||||
/>
|
||||
</:footer>
|
||||
</DModal>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import Component from "@glimmer/component";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import DiscourseURL from "discourse/lib/url";
|
||||
import { action } from "@ember/object";
|
||||
import { next } from "@ember/runloop";
|
||||
import { isEmpty } from "@ember/utils";
|
||||
import I18n from "I18n";
|
||||
import Topic from "discourse/models/topic";
|
||||
|
||||
// Modal related to changing the timestamp of posts
|
||||
export default class ChangeTimestamp extends Component {
|
||||
@tracked saving = false;
|
||||
@tracked date = moment().format("YYYY-MM-DD");
|
||||
@tracked time;
|
||||
@tracked flash;
|
||||
|
||||
get createdAt() {
|
||||
return moment(`${this.date} ${this.time}`, "YYYY-MM-DD HH:mm:ss");
|
||||
}
|
||||
|
||||
get validTimestamp() {
|
||||
return moment().diff(this.createdAt, "minutes") < 0;
|
||||
}
|
||||
|
||||
get buttonDisabled() {
|
||||
return this.saving || this.validTimestamp || isEmpty(this.date);
|
||||
}
|
||||
|
||||
@action
|
||||
async changeTimestamp() {
|
||||
this.saving = true;
|
||||
try {
|
||||
await Topic.changeTimestamp(
|
||||
this.args.model.topic.id,
|
||||
this.createdAt.unix()
|
||||
);
|
||||
this.args.closeModal();
|
||||
next(() => DiscourseURL.routeTo(this.args.model.topic.url));
|
||||
} catch {
|
||||
this.flash = I18n.t("topic.change_timestamp.error");
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
import Controller, { inject as controller } from "@ember/controller";
|
||||
import DiscourseURL from "discourse/lib/url";
|
||||
import I18n from "I18n";
|
||||
import ModalFunctionality from "discourse/mixins/modal-functionality";
|
||||
import Topic from "discourse/models/topic";
|
||||
import discourseComputed from "discourse-common/utils/decorators";
|
||||
import { isEmpty } from "@ember/utils";
|
||||
import { next } from "@ember/runloop";
|
||||
|
||||
// Modal related to changing the timestamp of posts
|
||||
export default Controller.extend(ModalFunctionality, {
|
||||
topicController: controller("topic"),
|
||||
saving: false,
|
||||
date: "",
|
||||
time: "",
|
||||
|
||||
@discourseComputed("saving")
|
||||
buttonTitle(saving) {
|
||||
return saving ? I18n.t("saving") : I18n.t("topic.change_timestamp.action");
|
||||
},
|
||||
|
||||
@discourseComputed("date", "time")
|
||||
createdAt(date, time) {
|
||||
return moment(`${date} ${time}`, "YYYY-MM-DD HH:mm:ss");
|
||||
},
|
||||
|
||||
@discourseComputed("createdAt")
|
||||
validTimestamp(createdAt) {
|
||||
return moment().diff(createdAt, "minutes") < 0;
|
||||
},
|
||||
|
||||
@discourseComputed("saving", "date", "validTimestamp")
|
||||
buttonDisabled(saving, date, validTimestamp) {
|
||||
if (saving || validTimestamp) {
|
||||
return true;
|
||||
}
|
||||
return isEmpty(date);
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.set("date", moment().format("YYYY-MM-DD"));
|
||||
},
|
||||
|
||||
actions: {
|
||||
changeTimestamp() {
|
||||
this.set("saving", true);
|
||||
|
||||
const topic = this.topicController.model;
|
||||
|
||||
Topic.changeTimestamp(topic.id, this.createdAt.unix())
|
||||
.then(() => {
|
||||
this.send("closeModal");
|
||||
this.setProperties({ date: "", time: "", saving: false });
|
||||
next(() => DiscourseURL.routeTo(topic.url));
|
||||
})
|
||||
.catch(() =>
|
||||
this.flash(I18n.t("topic.change_timestamp.error"), "error")
|
||||
)
|
||||
.finally(() => this.set("saving", false));
|
||||
|
||||
return false;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -13,6 +13,7 @@ import PostFlag from "discourse/lib/flag-targets/post-flag";
|
|||
import HistoryModal from "discourse/components/modal/history";
|
||||
import PublishPageModal from "discourse/components/modal/publish-page";
|
||||
import EditSlowModeModal from "discourse/components/modal/edit-slow-mode";
|
||||
import ChangeTimestampModal from "discourse/components/modal/change-timestamp";
|
||||
|
||||
const SCROLL_DELAY = 500;
|
||||
|
||||
|
|
@ -139,9 +140,8 @@ const TopicRoute = DiscourseRoute.extend({
|
|||
|
||||
@action
|
||||
showChangeTimestamp() {
|
||||
showModal("change-timestamp", {
|
||||
model: this.modelFor("topic"),
|
||||
title: "topic.change_timestamp.title",
|
||||
this.modal.show(ChangeTimestampModal, {
|
||||
model: { topic: this.modelFor("topic") },
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@ const KNOWN_LEGACY_MODALS = [
|
|||
"bulk-progress",
|
||||
"change-owner",
|
||||
"change-post-notice",
|
||||
"change-timestamp",
|
||||
"create-account",
|
||||
"create-invite-bulk",
|
||||
"create-invite",
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
<DModalBody @class="change-timestamp">
|
||||
<p>
|
||||
{{i18n "topic.change_timestamp.instructions"}}
|
||||
</p>
|
||||
|
||||
<p class="alert alert-error {{unless this.validTimestamp 'hidden'}}">
|
||||
{{i18n "topic.change_timestamp.invalid_timestamp"}}
|
||||
</p>
|
||||
|
||||
<form>
|
||||
<DatePickerPast
|
||||
@value={{readonly this.date}}
|
||||
@containerId="date-container"
|
||||
@onSelect={{action (mut this.date)}}
|
||||
/>
|
||||
|
||||
<Input @type="time" @value={{this.time}} />
|
||||
</form>
|
||||
|
||||
<div id="date-container"></div>
|
||||
</DModalBody>
|
||||
|
||||
<div class="modal-footer change-timestamp-footer">
|
||||
<DButton
|
||||
@class="btn-primary"
|
||||
@disabled={{this.buttonDisabled}}
|
||||
@action={{action "changeTimestamp"}}
|
||||
@translatedLabel={{this.buttonTitle}}
|
||||
/>
|
||||
</div>
|
||||
Loading…
Reference in New Issue