「チュートリアル1 Railsで管理画面を作る」の続き
必須パラメータには図のように*
がつくはずなのに、ついていなかったので調査。
これかも。yarnは入れていないので動かないはず。npm run watch:css
に書き換える。
動いた。DEPRICATION WARNINGが何件か出ているけど、とりあえず動いているので良さそう。
各項目の編集``削除
ボタンと、サイドバーがないので作っていく。
プロンプト:cats_controllerのindexの各項目に
編集ボタンと
削除ボタンをつけて欲しい
ボタン白抜きくらいは事前に指定したほうが節約できてよかったな...
ページネーションが気になる
ページネーションの見栄えをいじるだけだけど、結構いろんなファイルを修正している。
サイドバー
最初、他の動物のコントローラーの有無を確認せず、新しいコントローラーを作成して上書きしようとしたのはドキッとした。
細かい指示が必要にはなったけど、大枠を理解してくれるのはありがたい。
mainに対してPRを作成する
この画面で返ってこなくなった。おそらくだけど、スクロールを最後まで行わなければならなそうだ。
コミットの題名を見てもらうことで、スムーズにPRを作成できた。
チュートリアル2 Turboで管理画面をSPA風にする
ページネーションのTurbo Frames化
ねこ一覧だけTurbo Frames化してみた
いぬ一覧でページネーションをめくるとページ全体がリロードされるのに対して、ねこ一覧は該当部分のみがリロードされていてスクロールがリフレッシュされない。この後、ねこ一覧と同様に他の動物の一覧ページもTurbo Frames化した。
検索のTurbo Frames化
検索フォームはの外側にある。これだとTurbo Frameリクエストにはならない。そんな場合には検索フォームにdata-turbo-frame属性を指定してあげればいい。
なるほど
これで合っているのか...?
よくわからなかったので、↓のようなHTMLになる
と例示されていた部分と比べてみる
<%# data-turbo-frame="cats-list"によって、Turbo Frameリクエストになる %> <form class="cat_search" id="cat_search" data-turbo-frame="cats-list" action="/cats" accept-charset="UTF-8" method="get"> ... </form>
合っていそうだけど、検索したらスクロールが初期化されたような🤔
色々調べた結果、やっぱり合っていなかった。正しい結果がこちら
編集のTurbo Frames化
編集ボタン
カラム幅の調整でドツボにハマりそうだったので、ほどほどで次に移ります...
バリデーション
バリデーションエラーを生じさせてみると、画面には何も変化がなく、ただし保存されていない状態のままになる様子。バックエンドのログには422 Unprocessable Content
が表示されていた。
Turbo Streamはまた明日