「チュートリアル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はまた明日