提出物編集画面にキャンセルボタンが欲しい #7847 流れ
6/12(水) issue assign
6/14(金)、6/15(土) 実装
6/17(月) PR作成、CSS確認依頼（machidaさん）→ 調整OK
6/18(火) レビュー依頼（reckeyyさん）
6/20(木) レビューOK → レビュー依頼（komagataさん）
6/25(火) レビュー修正返信
7/3(水) レビューOK、マージ、ステージング環境確認OK
7/4(木) リリース
詳細
6/14(金)
現状確認
提出物編集画面にキャンセルボタンはなし
https://scrapbox.io/files/6671392da7eb9e001c6f05ee.png
実装
app/views/products/_form.html.slim
code:_form.html.slim
/41行目以降に追加
li.form-actions__item.is-sub.has-help
- when 'new', 'create'
= link_to 'キャンセル', practice_path(params:practice_id), class: 'a-button is-sm is-text' - when 'edit', 'update'
= link_to 'キャンセル', product_path, class: 'a-button is-sm is-text'
params[:action]にcreateやupdateが入るのは、たとえば新規作成/編集画面で本文に何も入れずにWIPボタンをクリックすると、バリデーションエラーになるので元の画面に戻るとき。
なのでnew・editだけじゃなくてcreate・updateも必要。
以下例↓
https://scrapbox.io/files/66713caf1c7020001d67018d.mov
キャンセルリンクの位置が異なっていた
実装した提出物のキャンセルリンク
https://scrapbox.io/files/66713df8966bb4001cf1facc.png
既に実装されていたキャンセルリンク（日報）
https://scrapbox.io/files/66713dfd88b9f5001cd3944d.png
CSSの.is-ais-flex-startを消すと既存の位置と同じになった
code:_form.html.slim
.form-actions
ul.form-actions__items.is-ais-flex-start ← ★ここ★
li.form-actions__item.is-main.has-help
= f.submit 'WIP', class: 'a-button is-lg is-secondary is-block', id: 'js-shortcut-wip'
.form-actions__item-help
| まだ作成途中
li.form-actions__item.is-main.has-help
= f.submit '提出する', class: 'a-button is-lg is-primary is-block'
li.form-actions__item.is-sub.has-help
- when 'new', 'create'
= link_to 'キャンセル', practice_path(params:practice_id), class: 'a-button is-sm is-text' - when 'edit', 'update'
= link_to 'キャンセル', product_path, class: 'a-button is-sm is-text'
6/17(月)
デザインについてmachidaさんに確認
キャンセルの位置についてはデザインに関わることなのでmachidaさんに確認した
不必要になったクラスを削除していただいた。
6/18(火)
レビュー依頼（reckeyyさん）
6/20(木)
レビューOK
レビュー依頼（komagataさん）
6/25(火)
レビュー修正返信
code:_form.html.slim
li.form-actions__item.is-sub.has-help
- when 'new', 'create'
= link_to 'キャンセル', practice_path(params:practice_id), class: 'a-button is-sm is-text' - when 'edit', 'update'
= link_to 'キャンセル', product_path, class: 'a-button is-sm is-text'
上記のコードを重複をなくしたほうがよいとのレビューをいただいたので以下のようにした
code:_form.html.slim
li.form-actions__item.is-sub.has-help
- cancel_link_path = case params:action - when 'new', 'create'
- when 'edit', 'update'
- product_path
= link_to 'キャンセル', cancel_link_path, class: 'a-button is-sm is-text'
そしたらslim-lintで警告がでる！その警告に合わせて修正してもひたすらに別な警告が出て結構調べたり試行錯誤したけどうまくいかず…
結局以下のようにした↓
code:_form.html.slim
li.form-actions__item.is-sub.has-help
- when 'new', 'create'
- when 'edit', 'update'
- cancel_link_path = product_path
= link_to 'キャンセル', cancel_link_path, class: 'a-button is-sm is-text'
7/3(水)
レビューOK
マージ
ステージング環境確認OK
7/4(木)
リリース