ページのページネーションをクリックしたら次のページの先頭に飛ぶ #4217
Conversation
|
@Saki-htr さん、このPRをチェックしていただけませんか？ |
|
@chung3011 さん
ページネーションがあるページがたくさん有り、チェックに漏れがあると怖いので、変更したページをすべて教えていただけると助かります🙏 |
|
@Saki-htr さん
上記のページリストを更新しました。データが足りない場合、ページネーションは表示されません。 |
There was a problem hiding this comment.
@chung3011 さん
お待たせしてすみません🙇♀️
いくつか気になる点がありましたので、コメントさせていただきました〜。
また、descriptionに書いてくださった確認するページ一覧に漏れがあったり、書いていただいたURLと実際に変更したファイルが異なったりしていたのですが、レビュワーの方が、よりスムーズにレビューを行えるように、次回から気をつけていただけると良いかなと思いました〜😊
| @@ -125,6 +125,7 @@ export default { | |||
| this.currentPage = pageNumber | |||
| this.getUsers() | |||
| history.pushState(null, null, this.newUrl(pageNumber)) | |||
| window.scrollTo(0, 0) | |||
There was a problem hiding this comment.
こちら動作確認したところ、
- ページネーションをクリックしたら次のページの先頭に飛ぶようにはなっていますが、
- 全ページ同じユーザーが表示されました
以下に動作確認した際の動画をのせましたので、ご確認をお願いいたします〜
There was a problem hiding this comment.
すみませんが、サーバーを再度実行していただけませんか？私はもう一度http://localhost:3000/usersをアクセスすると、その問題がありませんでした。
上の2GIFが実施結果です。
There was a problem hiding this comment.
@chung3011 さん
調べたところ、@chung3011 さんの環境で成功し、私の環境で挙動がおかしくなる原因が分かりました。
原因
現在、最新のmainをgit pull --rebase origin mainで取り込んだ状態で、ユーザー一覧ページ( http://localhost:3000/users )を表示しようとすると、エラーが起こる状態になっています。(詳しい状況・解決方法はParuさんがこちらのチャットで説明してくださっています。)おそらく、chungさんのローカルのfeature/move-to-top-of-page-when-click-paginationブランチはこのエラーが起こるよりも前の状態なので、動作に問題が起こらなかったのだと思います。
komagataさんにレビュー依頼する際に、この事をお伝えしておくといいと思います〜
レビューOKです🙆♀️
上記の問題を解消して動作確認を行ったところ、問題なく動きました！
私の勘違いで誤ったレビューをしてしまい、申し訳ありませんでした🙇♀️
私の方では、レビューOKとさせていただきます〜
| @@ -159,6 +159,7 @@ export default { | |||
| url.searchParams.set('page', pageNumber) | |||
| } | |||
| history.pushState(history.state, '', url) | |||
| window.scrollTo(0, 0) | |||
There was a problem hiding this comment.
こちらのVueファイルですが、教えていただいた確認するページのうち
http://localhost:3000/companies
が該当のページかと思い動作確認しましたが、こちらのURLはVue.js化されていない&元々ページネーションが設定されていないようでした。bootcamp/app/views/index.html.slimを確認したところjsファイルは読み込まれていませんでした〜
調べたところ、app/javascript/admin_companies.vueの該当URLはhttp://localhost:3000/admin/companiesはでしたので、そちらを動作確認したところOKでした。
There was a problem hiding this comment.
descriptionを更新しました。
| @@ -118,6 +118,7 @@ export default { | |||
| null, | |||
| location.pathname + (pageNumber === 1 ? '' : `?page=${pageNumber}`) | |||
| ) | |||
| window.scrollTo(0, 0) | |||
There was a problem hiding this comment.
こちらのファイルに該当するURLが、
ページネーションがあるページを確認する。
の一覧の中に入っていないようでした。
一覧に漏れがないと、レビューする時に動作確認すべきURLが分かるので助かります〜
http://localhost:3000/current_user/bookmarksを確認したところ、OKでした。
There was a problem hiding this comment.
descriptionを更新しました。
| @@ -128,6 +128,7 @@ export default { | |||
| this.currentPage = pageNumber | |||
| this.getUsers() | |||
| history.pushState(null, null, this.newUrl(pageNumber)) | |||
| window.scrollTo(0, 0) | |||
There was a problem hiding this comment.
こちらも
ページネーションがあるページを確認する。
の一覧から漏れているようです〜
http://localhost:3000/generations/:idを動作確認したところ、OKでした。
There was a problem hiding this comment.
descriptionを更新しました。
| @@ -88,6 +88,7 @@ export default { | |||
| this.currentPage = pageNum | |||
| history.pushState(null, null, this.newURL) | |||
| this.getWatches() | |||
| window.scrollTo(0, 0) | |||
There was a problem hiding this comment.
こちらも
ページネーションがあるページを確認する。
の一覧から漏れているようです〜
該当するURLは http://localhost:3000/current_user/watches でしたので、そちらを動作確認したところ、挙動がおかしい所がいくつかありましたので、下記に詳細を書かせていただきました。
ご確認をお願いいたします〜
-
1ページ目と最後のページ以外(下記動画でいうと2~4ページ目)のページをクリックすると、表示されません
-
一番最後のページ(動画でいうと5ページ目)は、表示はされますが先頭に飛びません
-
1ページ目以外のページ(動画でいうと2~5ページ)から1ページ目に飛ぶと、表示はされますが先頭ではなく真ん中に移動しました
There was a problem hiding this comment.
私はもう一度http://localhost:3000/current_user/watchesをアクセスすると、その問題がありませんでした。
sotugyouさんとしてログインします。
@Saki-htrさん、もう一度ご確認ください。
There was a problem hiding this comment.
@chung3011 さん
再度確認させていただいたところ、問題なく動作しました！
私の環境でうまくいかなかった原因は、私がテストデータを増やすためにdb/fixtures/watches.yml の内容を変更していたことが原因でした。
お手数をおかけして、申し訳ありませんでした🙏
|
@komagataさん、このPRをチェックしていただけませんか？ |
#2677
要件
Vue.jsで表示されるページのページネーションをクリックしたら次のページの先頭に飛ぶようにする。
変更前
変更後
確認手順
feature/move-to-top-of-page-when-click-paginationブランチを手元に持ってくる。http://localhost:3000/reports(日報リストページ)http://localhost:3000/products(提出リストページ)http://localhost:3000/users(ユーザーリストページ)http://localhost:3000/announcements(お知らせページ)http://localhost:3000/events(イベントリストページ)http://localhost:3000/searchables?document_type=all&page=3&word=a(検索の結果ページ)http://localhost:3000/talks(相談部屋ページ)http://localhost:3000/notifications(通知リストページ)http://localhost:3000/pages(Docsリストページ)http://localhost:3000/questions(Q&Aリストページ)http://localhost:3000/admin/companies(会社リストページ)http://localhost:3000/companies/company-id/users?target=all(会社の社員リストページ)http://localhost:3000/current_user/bookmarks(ユーザーのブックマークリストページ)http://localhost:3000/generations/:id(期生別によるユーザーのリストページ)http://localhost:3000/current_user/watches(Watch中ページ)