DEV: converts jump-to-post modal to gjs (#29830)
* DEV: converts jump-to-post modal to gjs * Update app/assets/javascripts/discourse/app/components/modal/jump-to-post.gjs --------- Co-authored-by: Jarek Radosz <jarek@cvx.dev>
This commit is contained in:
parent
410d6b9b04
commit
e02a37b0d7
|
@ -0,0 +1,95 @@
|
|||
import Component from "@glimmer/component";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import { Input } from "@ember/component";
|
||||
import { action } from "@ember/object";
|
||||
import DButton from "discourse/components/d-button";
|
||||
import DModal from "discourse/components/d-modal";
|
||||
import DModalCancel from "discourse/components/d-modal-cancel";
|
||||
import DatePicker from "discourse/components/date-picker";
|
||||
import { i18n } from "discourse-i18n";
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
}
|
|
@ -1,51 +0,0 @@
|
|||
<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>
|
|
@ -1,32 +0,0 @@
|
|||
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);
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue