フルスタックエンジニアのノウハウ
2021.01.24    2021.04.12

【開発実況シリーズ】Web日報登録システムを作る #10 編集機能開発編

【開発実況シリーズ】Web日報登録システムを作る #10 編集機能開発編

この記事の動画版はこちら

チャンネル登録お願いします!


今回は、開発実況シリーズ「Web日報登録システム」の第10回ということで、前回の続きを進めていきたいと思います。



前回は…


前回は、こちらの打刻画面(モーダル)から、当日の出勤/退勤/休憩時間/業務内容を登録出来る機能を作りました。



関連記事

【開発実況シリーズ】Web日報登録システムを作る #09 打刻画面機能開発編


また、当日の打刻データがまだ記録されていない場合は、ログイン後にモーダルを自動表示し、すでに打刻済みの場合はモーダルを表示しない、といった表示制御も実装しました。


今回は、こちらの月別リスト画面でそれぞれの日の「編集ボタン」をクリックすると、登録済みのデータを修正出来る機能を作っていきましょう!





今回のタスク


今回も、最初に作業内容を簡単にまとめておきましょう。




まずは、この編集ボタンを押すとモーダルが表示されるようにします。




モーダルの各項目には、対象日の登録済みデータがあらかじめ表示されるようにします。


もし、業務データが未登録の日だった場合は、各項目も空欄で表示します。


そして、モーダルの各項目を入力し、登録ボタンを押すと、対象日のデータとしてデータベースに登録または更新されるようにします。




登録完了後、モーダルを閉じて、一覧表には更新済みのデータが表示されるようにします。


それでは、順番に実装していきましょう!



編集ボタンクリックでモーダルを表示


まずは、このアイコンを<button>タグで囲んでボタン化します。




これで押せるようになりましたね。




ボタンの幅が大きすぎるので、調整します。




次に、このボタンが押されたら、打刻モーダルが表示されるようにします。




どの日のボタンが押されたのかが分かるように、日付データも渡すようにしておきます。



編集ボタンを押すと、とりあえずモーダルが表示されるようになりました。





モーダルに対象日のデータを表示


次は、モーダルが表示された際のイベントで、対象日のデータを表示させる部分を書いていきます。


まずは、先ほど入れておいた日付データを取得して




クリックしたボタンの日付が、ちゃんと取得出来ていますね。




対象行の各データを取得し、モーダルの各入力ボックスに代入していきます。




日付表示部分も調整します。



OKですね。




確認してみます。


クリックした日の日付、出勤時間、退勤時間、休憩時間、業務内容が表示されています。




業務データがまだ登録されていない日の場合は、空欄で表示されます。




登録処理の実装


では、最後に登録処理を実装していきます。


登録処理自体は前回作っているので、それを微調整するだけで済みそうです。


前回作った登録処理は、「今日」のデータを固定で登録するようになっているので、「指定した日」のデータを登録出来るように調整していきます。


まずは、対象日をPOST送信出来るように、hiddenタグでパラメーターを設置します。




hiddenタグの詳細については、こちらの動画もご覧ください。

関連記事

データを引き回せ!(hiddenを使う)


POST処理で、hiddenタグの対象日を取得し、「今日」ではなく、その「対象日」をターゲットにするように変更します。


なお、ここではプログラムの細かい書き方までは説明していませんが、講座の方ではこういった作り方を1から順番に説明していますので、もし自分でも作れるようになりたいという方は、是非講座の方もチェックしてみてください。




これでOKですね。


それでは、登録テストをしてみましょう!


編集ボタンを押すと、その日のデータがモーダルで読み込まれ




内容を変更して「登録」ボタンを押すと




その内容で更新されるようになりました。




業務データが未登録の日も



後から登録することが出来るようになりました。





現在の仕様では、過去のデータや、未来のデータも自由に登録出来るようになっていますが、この辺りはクライアントの要望に応じて、過去や未来のデータは編集出来なくしたり、管理者のみが変更出来るようにしたりなど、自由に調整することが出来ます。



次回予告


ということで、これで今回のタスクは完了です。


今回は、登録済みの業務データを修正する機能を実装しました。


これで、社員側の機能は一通り実装完了になります。


エラー処理など細かな部分は、全ての機能が組みあがってから、チェックしつつ品質を上げていく予定ですので


次回は、管理者側の機能実装に取りかかっていきましょう!





おすすめ記事