Windowsアプリ開発エンジニアがWebアプリ開発を頑張ってみた②

こんにちは。
オアシステクノロジーズの中村です。

前回の記事の続きとなります。
前回はテーブルに対して直接データを入力して更新していたところを

１レコードずつダイアログに表示して更新する機能に修正していました。

こんなイメージです。

ダイアログにデータを表示するところはできたのですが、ダイアログで更新することができないところで今回の始まりです。
https://zenn.dev/oasys/articles/c1d5d1887c2a5e

今日はダイアログに表示したデータのみを更新するを解決します

テーブルとダイアログの作りはこんな感じです

foreach
  テーブルの記述
  ダイアログの記述
    form
      ～テーブル項目をダイアログの項目に表示～
      登録ボタン
    /form
endforeach

４か月前に作成したため定かではないのですが、ここで登録ボタンを押すとレコードに対応する全てのダイアログ情報を更新してしまってた気が・・・

（値を修正していないのでデータ的には問題ないのですが、更新日時が変わってしまうのがよろしくない）

なのでダイアログ単位で更新できるように非同期処理で更新するように修正することとします。

（ゴリゴリJavaScriptを書いたことないので、結構大変でした・・・）

対応①：バックエンドに渡すデータを識別できるようにプロパティのidにid情報を付与

登録ボタンを押した時にどのレコードの情報かを識別することができるようになる

ダイアログの記述
  form
    ～テーブル項目をダイアログの項目に表示～
    　<input id="name-{{$id}}" class="name" value="{{$prefix["name"]}}">
    ～登録ボタン～
    　<button label="登録する" id="" class="btn-register" data-id="{{$id}}"></button>
  /form

対応②：JavaScriptの記述でidをキーにしてformのデータを取得し、更新する

function registerItem(e) {
    e.preventDefault();
    let currentBtn = $(this);
    let $currentId = currentBtn.attr("data-id");
    let $form = $('#form-' + $currentId);
    let $route = "秘密";
    $.ajax({
        url: $route,
        method: 'POST',
        data: {
            _token: $('input[name="_token"]').val(),
            data: {
                id: $form.find('#id-' + currentId).val(),
                name: $form.find('#name-' + currentId).val(),
                birthday: $form.find('#birthday-' + currentId).val(),
            },
        },
        dataType: 'json',
        success: function (response) {
            location.reload();
        },

対応③：Laravelのrequestに記載してあるエラーチェックの結果を画面に表示する

        success: function (response) {
            location.reload();
        },
        error: function (jqXHR) {
            if (jqXHR.status === 422) {
                let response = JSON.parse(jqXHR.responseText);
                if (response.body) {
                    if (response.body["id"]) {
                        let id = $form.find('#id-' + currentId);
                        id.parent().parent().find('.invalid-feedback').text(response.body["id"]);
                    }
                    if (response.body["name"]) {
                        let name = $form.find('#name-' + currentId);
                        name.parent().parent().find('.invalid-feedback').text(response.body["name"]);
                    }
                    if (response.body["birthday"]) {
                        let birthday = $form.find('#birthday-' + currentId);
                        birthday.parent().parent().find('.invalid-feedback').text(response.body["birthday"]);
                    }
                }
                return;
            }
        },

ここは結構苦労しました。

ユーザーインターフェースを考慮して、他の画面と同様にエラー発生時は項目の下にエラーメッセージを表示させたいです。

エラーチェック自体はLaravelのリクエストクラスで行っており、JavaScript側に転記を考えましたが、ここの画面だけ仕様を変更するのは微妙なので調べながら実装しました。

識別するためのidは既に取得できているので、そこからコンポーネントを見つけてfind('.invalid-feedback')にエラーメッセージを表示しています。

最後にlocation.reload();をすることで一覧画面に更新後のデータを表示することができます。

さて

これで一覧画面のデータを編集画面に表示しデータを更新して一覧に戻ってくる一連の流れが完了しました。

これで終わりかと思いきや・・・

ファイルを追加・・・？

ファイルの追加を行う必要があり、可変な更新項目対応が必要でした。

ええまぁかなり苦労しましたよ・・・・・・

その解決は次の記事にて！！！