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:
Joffrey JAFFEUX 2024-11-19 23:14:10 +01:00 committed by GitHub
parent 410d6b9b04
commit e02a37b0d7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 95 additions and 83 deletions

View File

@ -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>
}

View File

@ -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>

View File

@ -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);
}
}
}