mirror of
https://github.com/discourse/discourse.git
synced 2025-03-09 14:34:35 +00:00
DEV: Migrate jump-to-post to the new modal api (#23058)
This commit is contained in:
Jarek Radosz
GitHub
parent
7358856ae7
commit
822ecdc91a
@ -0,0 +1,51 @@
|
||||
<DModal
|
||||
@closeModal={{@closeModal}}
|
||||
@title={{i18n "topic.progress.jump_prompt_long"}}
|
||||
class="jump-to-post-modal"
|
||||
>
|
||||
<:body>
|
||||
<div class="jump-to-post-form">
|
||||
<div class="jump-to-post-control">
|
||||
<span class="index">#</span>
|
||||
<Input
|
||||
@value={{this.postNumber}}
|
||||
@type="number"
|
||||
autofocus="true"
|
||||
id="post-jump"
|
||||
/>
|
||||
<span class="input-hint-text post-number">
|
||||
{{i18n "topic.progress.jump_prompt_of" count=this.filteredPostsCount}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="separator">
|
||||
<span class="text">
|
||||
{{i18n "topic.progress.jump_prompt_or"}}
|
||||
</span>
|
||||
<hr class="right" />
|
||||
</div>
|
||||
|
||||
<div class="jump-to-date-control">
|
||||
<span class="input-hint-text post-date">
|
||||
{{i18n "topic.progress.jump_prompt_to_date"}}
|
||||
</span>
|
||||
<DatePicker
|
||||
@value={{this.postDate}}
|
||||
@defaultDate="YYYY-MM-DD"
|
||||
id="post-date"
|
||||
class="date-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</:body>
|
||||
|
||||
<:footer>
|
||||
<DButton
|
||||
@action={{this.jump}}
|
||||
@label="composer.modal_ok"
|
||||
type="submit"
|
||||
class="btn-primary"
|
||||
/>
|
||||
<DModalCancel @close={{@closeModal}} />
|
||||
</:footer>
|
||||
</DModal>
|
||||
@ -0,0 +1,32 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import { action } from "@ember/object";
|
||||
|
||||
export default class JumpToPost extends Component {
|
||||
@tracked postNumber;
|
||||
@tracked postDate;
|
||||
|
||||
get filteredPostsCount() {
|
||||
return this.args.model.topic.postStream.filteredPostsCount;
|
||||
}
|
||||
|
||||
_jumpToIndex(postsCounts, postNumber) {
|
||||
const where = Math.min(postsCounts, Math.max(1, parseInt(postNumber, 10)));
|
||||
this.args.model.jumpToIndex(where);
|
||||
this.args.closeModal();
|
||||
}
|
||||
|
||||
_jumpToDate(date) {
|
||||
this.args.model.jumpToDate(date);
|
||||
this.args.closeModal();
|
||||
}
|
||||
|
||||
@action
|
||||
jump() {
|
||||
if (this.postNumber) {
|
||||
this._jumpToIndex(this.filteredPostsCount, this.postNumber);
|
||||
} else if (this.postDate) {
|
||||
this._jumpToDate(this.postDate);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,20 +1,23 @@
|
||||
import Component from "@ember/component";
|
||||
import { inject as service } from "@ember/service";
|
||||
import PanEvents, {
|
||||
SWIPE_DISTANCE_THRESHOLD,
|
||||
SWIPE_VELOCITY_THRESHOLD,
|
||||
} from "discourse/mixins/pan-events";
|
||||
import Component from "@ember/component";
|
||||
import EmberObject from "@ember/object";
|
||||
import discourseDebounce from "discourse-common/lib/debounce";
|
||||
import { headerOffset } from "discourse/lib/offset-calculator";
|
||||
import { next } from "@ember/runloop";
|
||||
import discourseLater from "discourse-common/lib/later";
|
||||
import { observes } from "discourse-common/utils/decorators";
|
||||
import showModal from "discourse/lib/show-modal";
|
||||
import JumpToPost from "./modal/jump-to-post";
|
||||
|
||||
const MIN_WIDTH_TIMELINE = 924,
|
||||
MIN_HEIGHT_TIMELINE = 325;
|
||||
|
||||
export default Component.extend(PanEvents, {
|
||||
modal: service(),
|
||||
|
||||
classNameBindings: [
|
||||
"info.topicProgressExpanded:topic-progress-expanded",
|
||||
"info.renderTimeline:with-timeline:with-topic-progress",
|
||||
@ -132,13 +135,12 @@ export default Component.extend(PanEvents, {
|
||||
|
||||
keyboardTrigger(e) {
|
||||
if (e.type === "jump") {
|
||||
const controller = showModal("jump-to-post", {
|
||||
modalClass: "jump-to-post-modal",
|
||||
});
|
||||
controller.setProperties({
|
||||
topic: this.topic,
|
||||
jumpToIndex: this.attrs.jumpToIndex,
|
||||
jumpToDate: this.attrs.jumpToDate,
|
||||
this.modal.show(JumpToPost, {
|
||||
model: {
|
||||
topic: this.topic,
|
||||
jumpToIndex: this.attrs.jumpToIndex,
|
||||
jumpToDate: this.attrs.jumpToDate,
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
@ -1,36 +0,0 @@
|
||||
import Controller from "@ember/controller";
|
||||
import ModalFunctionality from "discourse/mixins/modal-functionality";
|
||||
import { reads } from "@ember/object/computed";
|
||||
import { action } from "@ember/object";
|
||||
|
||||
export default Controller.extend(ModalFunctionality, {
|
||||
model: null,
|
||||
postNumber: null,
|
||||
postDate: null,
|
||||
filteredPostsCount: reads("topic.postStream.filteredPostsCount"),
|
||||
|
||||
@action
|
||||
jump() {
|
||||
if (this.postNumber) {
|
||||
this._jumpToIndex(this.filteredPostsCount, this.postNumber);
|
||||
} else if (this.postDate) {
|
||||
this._jumpToDate(this.postDate);
|
||||
}
|
||||
},
|
||||
|
||||
_jumpToIndex(postsCounts, postNumber) {
|
||||
const where = Math.min(postsCounts, Math.max(1, parseInt(postNumber, 10)));
|
||||
this.jumpToIndex(where);
|
||||
this._close();
|
||||
},
|
||||
|
||||
_jumpToDate(date) {
|
||||
this.jumpToDate(date);
|
||||
this._close();
|
||||
},
|
||||
|
||||
_close() {
|
||||
this.setProperties({ postNumber: null, postDate: null });
|
||||
this.send("closeModal");
|
||||
},
|
||||
});
|
||||
@ -37,6 +37,7 @@ import { spinnerHTML } from "discourse/helpers/loading-spinner";
|
||||
import { BookmarkFormData } from "discourse/lib/bookmark";
|
||||
import DeleteTopicConfirmModal from "discourse/components/modal/delete-topic-confirm";
|
||||
import ConvertToPublicTopicModal from "discourse/components/modal/convert-to-public-topic";
|
||||
import JumpToPost from "discourse/components/modal/jump-to-post";
|
||||
|
||||
let customPostMessageCallbacks = {};
|
||||
|
||||
@ -880,15 +881,12 @@ export default Controller.extend(bufferedProperty("model"), {
|
||||
},
|
||||
|
||||
jumpToPostPrompt() {
|
||||
const topic = this.model;
|
||||
const modal = showModal("jump-to-post", {
|
||||
modalClass: "jump-to-post-modal",
|
||||
});
|
||||
modal.setProperties({
|
||||
topic,
|
||||
postNumber: null,
|
||||
jumpToIndex: (index) => this.send("jumpToIndex", index),
|
||||
jumpToDate: (date) => this.send("jumpToDate", date),
|
||||
this.modal.show(JumpToPost, {
|
||||
model: {
|
||||
topic: this.model,
|
||||
jumpToIndex: (index) => this.send("jumpToIndex", index),
|
||||
jumpToDate: (date) => this.send("jumpToDate", date),
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
@ -33,7 +33,6 @@ const KNOWN_LEGACY_MODALS = [
|
||||
"history",
|
||||
"ignore-duration-with-username",
|
||||
"ignore-duration",
|
||||
"jump-to-post",
|
||||
"login",
|
||||
"move-to-topic",
|
||||
"post-enqueued",
|
||||
|
||||
@ -1,46 +0,0 @@
|
||||
<DModalBody @title="topic.progress.jump_prompt_long">
|
||||
|
||||
<div class="jump-to-post-form">
|
||||
<div class="jump-to-post-control">
|
||||
<span class="index">#</span>
|
||||
<Input
|
||||
id="post-jump"
|
||||
@type="number"
|
||||
@value={{this.postNumber}}
|
||||
@insert-newline={{action "jump"}}
|
||||
autofocus="true"
|
||||
/>
|
||||
<span class="input-hint-text post-number">
|
||||
{{i18n "topic.progress.jump_prompt_of" count=this.filteredPostsCount}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="separator">
|
||||
<span class="text">
|
||||
{{i18n "topic.progress.jump_prompt_or"}}
|
||||
</span>
|
||||
<hr class="right" />
|
||||
</div>
|
||||
|
||||
<div class="jump-to-date-control">
|
||||
<span class="input-hint-text post-date">
|
||||
{{i18n "topic.progress.jump_prompt_to_date"}}
|
||||
</span>
|
||||
<DatePicker
|
||||
@id="post-date"
|
||||
@class="date-input"
|
||||
@value={{this.postDate}}
|
||||
@defaultDate="YYYY-MM-DD"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</DModalBody>
|
||||
|
||||
<div class="modal-footer">
|
||||
<DButton
|
||||
@class="btn-primary"
|
||||
@action={{action "jump"}}
|
||||
@label="composer.modal_ok"
|
||||
/>
|
||||
<DModalCancel @close={{route-action "closeModal"}} />
|
||||
</div>
|
||||
@ -1,4 +1,4 @@
|
||||
import { acceptance, exists } from "discourse/tests/helpers/qunit-helpers";
|
||||
import { acceptance } from "discourse/tests/helpers/qunit-helpers";
|
||||
import { click, currentURL, fillIn, visit } from "@ember/test-helpers";
|
||||
import { test } from "qunit";
|
||||
|
||||
@ -7,11 +7,11 @@ acceptance("Jump to", function (needs) {
|
||||
needs.mobileView();
|
||||
|
||||
needs.pretender((server, helper) => {
|
||||
server.get("/t/280/excerpts.json", () => helper.response(200, []));
|
||||
server.get("/t/280/3.json", () => helper.response(200, {}));
|
||||
server.get("/t/280/excerpts.json", () => helper.response([]));
|
||||
server.get("/t/280/3.json", () => helper.response({}));
|
||||
server.get("/posts/by-date/280/:date", (req) => {
|
||||
if (req.params["date"] === "2014-02-24") {
|
||||
return helper.response(200, {
|
||||
return helper.response({
|
||||
post_number: 3,
|
||||
});
|
||||
}
|
||||
@ -25,7 +25,7 @@ acceptance("Jump to", function (needs) {
|
||||
await click("nav#topic-progress .nums");
|
||||
await click("button.jump-to-post");
|
||||
|
||||
assert.ok(exists(".jump-to-post-modal"), "it shows the modal");
|
||||
assert.dom(".jump-to-post-modal").exists("it shows the modal");
|
||||
|
||||
await fillIn("input.date-picker", "2014-02-24");
|
||||
await click(".jump-to-post-modal .btn-primary");
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user