ユーザー個別ページ > 回答一覧をVue.js化した #4319

eatplaynap · 2022-02-28T09:01:01Z

Issue概要

ユーザー個別ページ > 回答一覧を vue.js化したい #4295

Issueのdescriptionに書いてある通り、下記3点を修正しテストを追加しました。

回答一覧を vue.js化
ページのタイトルを変更(user名の回答 →user名)
ページャーを付ける

参考にしたIssue

変更後

確認手順

ブランチ feature/convert-users-answers-to-vuejsをローカルに取り込む
bin/setupを実行
rails sでサーバーを立ち上げる
~~4. rails cでコンソールを開き、下記手順で回答データを作成~~
bin/rails db:seedでfixtureデータを作成する
komagataでログイン後、ユーザー個別ページから回答タブをクリックし、Vue化された回答一覧画面を確認する

※4でrails cを行っている理由は、#4438 でのバグでdb/fixtures/answers.ymlが機能していないことが発覚し、rails db:seedでfixtureが作れないためです。
こちらも私の方で対応予定ですが、こちらのバグが解消されmainに反映されるまでは、お手数ですが上記手順でデータを作成いただき、ページャーのご確認をお願いいたします:pray:

2022/3/23 #4447 での修正がマージされたのでfixtureを作成しました。

eatplaynap · 2022-03-18T14:52:28Z

@aim2bpg
お疲れさまです。だいぶ時間が経ってしまいましたが、ペアプロしていただいたVue化のIssueのPRです。
お手すきの際にレビューをお願いいたします:pray:

aim2bpg · 2022-03-18T21:09:52Z

@eatplaynap さん、レビュー依頼ありがとうございます。
本日中には確認して、結果をお知らせできればと思います〜😄

aim2bpg

@eatplaynap さん、動作確認していたらコンフリクトが起きていることに気付きました。
まずは、手元で下記を実行してコンフリクトを解消されてください🙏

$ git pull --rebase origin main

eatplaynap · 2022-03-19T09:43:00Z

@aim2bpg
ご確認ありがとうございます！コンフリクト解消させたので再度ご確認お願いします〜

aim2bpg

@eatplaynap さん、コンフリクト解消ありがとうございます😄

確認したところ、HTMLのVue.js化でインデントがずれていたり、classが違っていたりしますので、デベロッパーツールで対応をとりながら確認した方が良さそうです。今回.vueファイルを新規作成しており、間違っていても今後なかなか気付きにくい部分ですので、今後のためにも今回きちんと合わせ込みしておいた方が良いと思いました(ここは他の機能でもバグがあったので、間違いやすい部分なのかなと個人的には思っています😅 )。

こちらで確認した際の画面を貼っておきますのでご参考ください。
左がステージング環境(Vue.js化前)、右が開発環境(Vue.js化後)です。

aim2bpg · 2022-03-20T09:59:44Z

app/javascript/users-answers.vue

+    usersAnswer: UsersAnswer
+  },
+  props: {
+    usersPath: { type: String, default: '', required: false }


Suggested change

usersPath: { type: String, default: '', required: false }

usersPath: { type: String, default: null, required: false }

ここのdefault値はnullとした方が良いようです。
理由は、#4293 (comment) を参照ください。

aim2bpg

すみません、もう一点ありました。。
default値の設定見直しもお願いいたします🙏

eatplaynap · 2022-03-21T07:49:34Z

@aim2bpg
ご確認ありがとうございます！ご指摘の点に加えて、実装に漏れがあった分を修正したので再確認をお願いいたします:pray:

Vue.js化後のHTMLとVue.js化前に揃えるよう修正
default値の設定を修正
質問の更新日付を表示させるよう修正(:new:)

aim2bpg

@eatplaynap さん、確認しました。

もう1箇所変換できてないところがありました👀（下記のスクショ参照、左：ステージング環境、右：開発環境）。
今回、目視で気付けたところは再発防止の観点でテストを入れておきましょう💪
バグ関連の修正はテストもセットと考えておいた方が良いと思います（駒形さんから過去にご指摘受けました）。
今回、Vue.js化したことで不要となるファイルやコードはなかったでしょうか。もし、不要であれば削除しておきましょう✨
ex. /app/views/users/answers/_answer.html.slim, /app/controllers/users/answers_controller.rbの@answers

eatplaynap · 2022-03-22T06:08:13Z

@aim2bpg
丁寧なレビューありがとうございます！ご指摘いただいた下記3点の対応を行いましたのでお手すきの際ご確認お願いします:pray:

各回答の名前がユーザー個別ページへのリンクになるように修正
↑のテスト追加
Vue化に伴い使用しなくなった回答一覧関連のデータを削除

aim2bpg

@eatplaynap さん、確認しました。
さきほどは気付かなかったのですが、回答日時が変換前(左)が更新日時に対して、変換後(右)が作成日時となっているようです。

あと、question.vueが書き変わっていたのが原因不明というのが気持ち悪い感じがしています。
この辺でRebase時のコンフリクト解消か何かで書き変わっていたりしないでしょうか？おそらく、Files changedに現れない差分かなと思って、レビューできているか心配してます🤔
もし、単純に1箇所だけ誤って書き換えてた〜とかで、クリアとなっていれば余計な心配かもしれません🙏

eatplaynap · 2022-03-23T05:33:57Z

@aim2bpg
自分では細かいところを見落としがちなので、たくさん見つけてくださってありがとうございます〜:sob:

回答一覧の日付について

ステージング環境の回答一覧の日付を自分の実装したものと見比べたところ、そもそも仕様を勘違いしていたことに気づきました。

修正前: 回答に紐づく質問の作成日時が表示される
修正後(ステージング環境と同じ): 各回答の更新日時が表示される

上記の変更に伴い、jbuilderで渡していたanswer.question.updated_atも必要なくなったので削除しました。

`question.vue`の変更について

これは参考にしようと思って触っているうちに書き換えてしまったという認識です。

aim2bpg

@eatplaynap さん、修正ありがとうございます。question.vueの変更についても了解しました👍
~~下記の1点を修正いただければ、~~ 私はOKです🙆‍♀️チームリーダーレビューに進められてください👍

@garammasala29 さんの方でVue.js化された質問ページの方のselectedTagのdefault値の設定を修正しておきましょう。
本PRのスコープ外となりますが、動作確認中にコンソールにワーニングが出るのが気になりましたもので😅
→ こちらは、開発MTGでスコープ外とのことでしたので、私の方でIssue #4473 に登録しました🙏
@garammasala29 さんの修正とも直接関係なく、元々内在したものでした。早合点して失礼しました🙇🏻‍♂️

eatplaynap · 2022-03-23T09:50:15Z

@aim2bpg
度々のご確認ありがとうございます〜！
#4447 の変更がマージされ、answers.ymlのfixtureが作成できるようになったのでもう一度レビューをお願いいたします:pray:

Co-authored-by: Masaki Komagata <komagata@gmail.com>

eatplaynap · 2022-04-01T08:11:17Z

@komagata
お疲れさまです。AnswerのAPIにユーザーIDでの絞り込み機能を追加する形に実装しなおしたので再度レビューをお願いいたします！

komagata

確認しました、OKですー🙆‍♂️

eatplaynap force-pushed the feature/convert-users-answers-to-vuejs branch 3 times, most recently from 5a18fff to 35a24ad Compare March 18, 2022 07:08

eatplaynap changed the title ~~一旦コミット(表示されてない)~~ ユーザー個別ページ > 回答一覧をVue.js化した Mar 18, 2022

eatplaynap self-assigned this Mar 18, 2022

eatplaynap marked this pull request as ready for review March 18, 2022 14:51

eatplaynap requested a review from aim2bpg March 18, 2022 14:51

aim2bpg suggested changes Mar 19, 2022

View reviewed changes

eatplaynap force-pushed the feature/convert-users-answers-to-vuejs branch from 39758da to 2bbdb15 Compare March 19, 2022 08:44

aim2bpg self-requested a review March 20, 2022 09:34

aim2bpg suggested changes Mar 20, 2022

View reviewed changes

aim2bpg reviewed Mar 20, 2022

View reviewed changes

aim2bpg suggested changes Mar 20, 2022

View reviewed changes

eatplaynap force-pushed the feature/convert-users-answers-to-vuejs branch from 2bbdb15 to fc9fbab Compare March 21, 2022 07:19

eatplaynap requested a review from aim2bpg March 21, 2022 07:46

aim2bpg suggested changes Mar 22, 2022

View reviewed changes

eatplaynap force-pushed the feature/convert-users-answers-to-vuejs branch from 629d777 to 3eec19a Compare March 22, 2022 05:29

eatplaynap requested a review from aim2bpg March 22, 2022 06:08

aim2bpg suggested changes Mar 22, 2022

View reviewed changes

eatplaynap force-pushed the feature/convert-users-answers-to-vuejs branch from 5063c04 to e89b551 Compare March 23, 2022 05:14

eatplaynap requested a review from aim2bpg March 23, 2022 05:17

aim2bpg approved these changes Mar 23, 2022

View reviewed changes

eatplaynap requested a review from aim2bpg March 23, 2022 09:48

eatplaynap and others added 18 commits March 30, 2022 16:10

ページのタイトル変更

a1e8d81

必要のないpropsを削除

dda28e9

テスト追加

85b3010

prettier通過

e6fbb3d

落ちていたテストの修正

4823061

正しいクラス名が表示されるよう変更

5a2e4c0

質問の更新日時が表示されるよう変更

af72fef

default値を空文字からnullに変更

8418a12

lint通過

c3a1721

間違えて修正してしまったファイルを戻す

7613bd5

名前をリンクにした

2479ec3

Vue化でいらなくなったファイル・コードの削除

89f0610

回答一覧からユーザー個別ページへのリンクのテスト追加

630896d

lint通過

e18be5d

回答の更新日時が一覧画面で表示されるよう修正

7b11fbf

ページャー確認用デモ回答を追加

6be0e67

ymlファイルのインデント修正

007e1f8

Co-authored-by: Masaki Komagata <komagata@gmail.com>

AnswerのAPIにユーザーIDでの絞り込み機能を追加

539f2e9

eatplaynap force-pushed the feature/convert-users-answers-to-vuejs branch from 47b5060 to 539f2e9 Compare March 30, 2022 07:12

eatplaynap added 4 commits April 1, 2022 15:46

ユーザー一覧からのアクセスOK(回答個別ページからのanswersへのアクセスができなくなった)

633942a

誤って消していたusersのルーティングを復活

bd7602c

不要なコントローラーを削除

7ab5deb

テスト修正

dc3ed76

eatplaynap requested a review from komagata April 1, 2022 08:11

komagata approved these changes Apr 5, 2022

View reviewed changes

komagata merged commit 7eccf17 into main Apr 5, 2022

komagata deleted the feature/convert-users-answers-to-vuejs branch April 5, 2022 12:20

github-actions bot mentioned this pull request Apr 5, 2022

Release 2022-04-06 04:45:46 #4564

Merged

11 tasks

eatplaynap mentioned this pull request Apr 7, 2022

回答の本文が90文字以上の場合省略表記されるようにした #4576

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ユーザー個別ページ > 回答一覧をVue.js化した #4319

ユーザー個別ページ > 回答一覧をVue.js化した #4319

eatplaynap commented Feb 28, 2022 •

edited

Loading

eatplaynap commented Mar 18, 2022

aim2bpg commented Mar 18, 2022

aim2bpg left a comment

eatplaynap commented Mar 19, 2022

aim2bpg left a comment •

edited

Loading

aim2bpg Mar 20, 2022

aim2bpg left a comment

eatplaynap commented Mar 21, 2022

aim2bpg left a comment •

edited

Loading

eatplaynap commented Mar 22, 2022

aim2bpg left a comment

eatplaynap commented Mar 23, 2022

aim2bpg left a comment •

edited

Loading

eatplaynap commented Mar 23, 2022

eatplaynap commented Apr 1, 2022

komagata left a comment

	usersPath: { type: String, default: '', required: false }
	usersPath: { type: String, default: null, required: false }

ユーザー個別ページ > 回答一覧をVue.js化した #4319

ユーザー個別ページ > 回答一覧をVue.js化した #4319

Conversation

eatplaynap commented Feb 28, 2022 • edited Loading

Issue概要

参考にしたIssue

変更後

確認手順

eatplaynap commented Mar 18, 2022

aim2bpg commented Mar 18, 2022

aim2bpg left a comment

Choose a reason for hiding this comment

eatplaynap commented Mar 19, 2022

aim2bpg left a comment • edited Loading

Choose a reason for hiding this comment

aim2bpg Mar 20, 2022

Choose a reason for hiding this comment

aim2bpg left a comment

Choose a reason for hiding this comment

eatplaynap commented Mar 21, 2022

aim2bpg left a comment • edited Loading

Choose a reason for hiding this comment

eatplaynap commented Mar 22, 2022

aim2bpg left a comment

Choose a reason for hiding this comment

eatplaynap commented Mar 23, 2022

回答一覧の日付について

question.vueの変更について

aim2bpg left a comment • edited Loading

Choose a reason for hiding this comment

eatplaynap commented Mar 23, 2022

eatplaynap commented Apr 1, 2022

komagata left a comment

Choose a reason for hiding this comment

eatplaynap commented Feb 28, 2022 •

edited

Loading

aim2bpg left a comment •

edited

Loading

aim2bpg left a comment •

edited

Loading

`question.vue`の変更について

aim2bpg left a comment •

edited

Loading