bootcamp
bootcamp copied to clipboard
fjordllc
ユーザー一覧にインクリメンタルサーチを追加
Issue
- #5349
概要
ユーザー一覧の全てタブのみにインクリメンタルサーチを設置しました。 検索文字列を入力後、以下の条件でインクリメンタルサーチができるようにしました。
- 現在表示しているユーザーのロールを検索対象にする
- 現在表示しているユーザーのロールでユーザーが存在しない場合はインクリメンタルサーチを非表示とする
- /^[\w-]+$/ にマッチする場合は3文字以上、それ以外は2文字以上の入力が必要
- 検索対象
- ユーザーID（ログイン名）
- ユーザー名
- ユーザー名読み方
- Discord ID
- GitHub ID
- Twitter ID
- facebook URL
- ブログURL
- 自己紹介文
変更確認方法
- ブランチ
feature/add-incremental-search-in-users-listをローカルに取り込んでください。 -
bin/rails sでローカル環境を立ち上げてください。 -
komagataでhttp://localhost:3000/users にアクセスし絞り込みと表示されているラベルと共にインクリメンタルサーチが存在することを確認してください。その際のユーザーロールは現役生になっています。 - 任意の検索文字列を上記検索対象(現役生)で大文字/小文字の英字、数字、アンダースコア、ハイフンで３文字以上入力し、そのユーザーが現役生の中から検索されることを確認してください。その際検索文字列が２文字以内であれば検索機能が動作しない事も同時に確認してください。また検索中の際は画面にロード中と表示されます。
- また任意の現役生を日本語２文字以上入力し、検索結果が表示されることを確認してください。その際に１文字のみだと検索機能が動作しない事も確認してください。
- インクリメンタルサーチで任意のメンターを検索してください。検索結果にユーザーが表示されず一致するユーザーはいませんと表示されることを確認してください。
- http://localhost:3000/users?target=followings にアクセスし、インクリメンタルサーチが表示されないことを確認してください。
facebookURLを用いたテストについて
fixtures/users.ymlで登録されているユーザーのfacebookURLがFBCに関係のない実在するものが使用されていたため、以前のIssueで全てのユーザーfacebookURLをフィヨルドのURLを使用したものに変更されています。今回のfacebookURLを用いたテストを作成するにあたり個人を特定したかったため、駒形さんに確認し現状使用されていないURLで一意のものに変更致しました。
変更箇所
@machida さん こちらの機能を追加したことでデザインが崩れてしまったため、デザイン依頼をさせていただきます。 申し訳ありませんがよろしくお願いいたします🙇♀️
@machida さん、お疲れ様です。 お忙しい所恐れ入りますが、１つデザインでお願いがあります。
今 test/system/user/tags_test.rbのテストが落ちているのですが、おそらくクリックしようとしているボタンの上に要素が重なってしまっており、ボタンが押せずテストが落ちているのではないかと考えています。
要素が重なってしまっているのは、フォロー中タブ（おそらくこちらは影響ないと思います）とタグ個別ページ（例 http://localhost:3000/users/tags/%E7%8C%AB )の部分になります。
私の確認不足で先にお伝えできておらず申し訳ありませんでした。
暫定的に書いてくださっているところが関係しているのかわからないのですが、お手隙の際に一度見ていただけますでしょうか😭
よろしくお願いいたします。
@daiki0381 さん レビューありがとうございました🙇♀️
@komagata さん チームメンバーのレビューが通りましたので、レビューお願いします！
@komagata さん レビューありがとうございます！ debounceの機能だけ、JSの関数として実装してみました。 再度ご確認よろしくお願いします🙇♀️
@machidaさん
app/assets/stylesheets/application/blocks/page-content/_page-content.sassでコンフリクトが発生しているようなのでご確認いただけますでしょうか🙏
@komagata さん レビューありがとうございます！
確かにdebounceの機能再利用出来ると良いですね！ Vueのmixinは機能そのものを追加するもので、メソッドを生成するためにmixinとして切り出すのは使い方が違っているかもしれないとメンターの方からご教示いただいたので、今回JSの関数として他ファイルに切り出しました。 お手数おかけしますが再レビューお願いできますでしょうか。
@komagata さん いつもレビューありがとうございます！ いただいたコメントに返信とコードの修正を行いました。 またご確認よろしくお願いいたします！