📝
Nuxt.jsでWebアプリケーション開発メモ21
概要
ダッシュボードのカレンダーの日付をダブルクリックしたとき、トレーニング記録用のポップアップ画面が表示されるが、該当日付に記録が存在する場合その状態を反映してポップアップ画面表示させる。
プロンプト21
# 命令21
## 命令21-1
- topページのダッシュボードのカレンダーの日付をダブルクリックすると、トレーニングを記録するためのポップアップ画面がでますが、
トレーニング記録された日をダブルクリックしても、その日の記録が反映された状態になっていません。
トレーニング記録された日をダブルクリックしたら、その日の記録が反映された状態でポップアップ画面が表示されるようにしてください。
- ポッポアップ画面の`トレーニング項目`欄で、ドロップダウンからトレーニングを選択するためのリストも空っぽですのでこれらも正しく選択リストが表示されるようにしてください。
- 同じく、`目的`のドロップダウンも選択リストが表示されるようにしてください。
- ポッポアップ画面で保存ボタンをクリックしたときに上書き保存する処理はまだ実装しなくてよいです。
追加命令
- トレーニング項目の選択リストをグループ化して。
- トレーニング項目の選択リストをグループごとに昇順表示にして。
対応内容
- topページ表示した際に、REST APIでバックエンドにトレーニング項目一覧取得を行う。
- カレンダーの日付をダブルクリックしたとき、該当日付のトレーニング記録が存在すればその状態をトレーニング記録ポップアップ画面に反映する。
- トレーニング項目と目的のドロップダウンメニューに選択リストが表示されるようにする。
- コピー元のモック画面の状態でリスト表示するべく実装されていたが、バグがあってそもそもリスト表示できていなかった。
-
<USelect>を使って、:optinonsという属性で指定していたが誤りで正しくは:itemsだった。
- トレーニング項目は
<USelect>ではなく、<UInputMenu>に変更。 - トレーニング項目のリストはトレーニングカテゴリごとにグループ化。
画面
ソース差分
Discussion