前回までの状況はこちら。

最新ソースはこちら(gitHub)

https://github.com/takishita2nd/diet-mng

データ編集処理を作成していきます。

やり方は、体重管理機能のものと同じです。

EatingEditDialogComponent.vue

<template>
    <div>
        <div id="overlay" v-show="show">
            <div id="content">
                <p v-if="error_flg == true" class="error">
                    <ui>
                        <li v-for="error in errors">{{ error }}</li>
                    </ui>
                </p>
                <table class="edit">
                    <tbody>
                        <tr>
                            <td>日付</td>
                            <td>
                                <input type="date" v-model="contents.date" v-if="datehold" readonly>
                                <input type="date" v-model="contents.date" v-else>
                            </td>
                        </tr>
                        <tr>
                            <td>品名</td>
                            <td><input type="text" v-model="contents.item" /></td>
                        </tr>
                        <tr>
                            <td>時間帯</td>
                            <td>
                                <select name="timezone" v-model="contents.timezone">
                                    <option value="1" selected>朝</option>
                                    <option value="2">昼</option>
                                    <option value="3">夜</option>
                                    <option value="4">間食</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>タンパク質</td>
                            <td><input type="number" v-model="contents.protein" /></td>
                        </tr>
                        <tr>
                            <td>脂質</td>
                            <td><input type="number" v-model="contents.liqid" /></td>
                        </tr>
                        <tr>
                            <td>炭水化物</td>
                            <td><input type="number" v-model="contents.carbo" /></td>
                        </tr>
                        <tr>
                            <td>カロリー</td>
                            <td><input type="number" v-model="contents.calorie" /></td>
                        </tr>
                    </tbody>
                </table>
                <p id="command">
                    <button @click="clickEdit">編集</button>
                    <button @click="closeModal">閉じる</button>
                </p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: ['show', 'date', 'datehold'],
    data() {
        return {
            errors: [],
            error_flg: [],
            param: {},
            contents: {},
        };
    },
    methods: {
        dataSet: function(data) {
            this.contents = data;
        },
        clickEdit: function() {
            var self = this;
            this.param.contents = this.contents;
            axios.post('/api/eating/update', this.param).then(function(response){
                self.clear();
                self.closeModal();
                self.$emit('update');
            }).catch(function(error){
                self.error_flg = true;
                self.errors = error.response.data.errors;
            });
        },
        closeModal: function() {
            this.$parent.showEditDialogContent = false;
        },
        clear: function() {
            this.contents.date = this.date;
            this.contents.item = "";
            this.contents.timezone = 1;
            this.contents.protein = "";
            this.contents.liqid = "";
            this.contents.carbo = "";
            this.contents.calorie = "";
            this.error_flg = false;
            this.errors = [];
        }
    }
}
</script>

EatingDetailComponent.vue

        <eating-edit-dialog-component ref="editDialog" :show="showEditDialogContent" :date="date" :datehold=true @update="invokeUpdateList"></eating-edit-dialog-component>

        onClickEdit: function(timezone, id) {
            var editData = {};
            this.datalists[timezone].forEach(element => {
                if(element.id == id){
                    editData.id = id;
                    editData.date = this.date;
                    editData.item = element.item;
                    editData.timezone = timezone + 1;
                    editData.protein = element.protein;
                    editData.liqid = element.liqid;
                    editData.carbo = element.carbo;
                    editData.calorie = element.calorie;
                    return true;
                }
            });
            this.$refs.editDialog.dataSet(editData);
            this.showEditDialogContent = true;
        },

Editボタンをクリックすると、detail側でEditダイアログに表示するパラメータを作成し、Editダイアログに渡します。

refパラメータを使用することで、親から子のモジュールの関数を呼び出すことができるので、これを利用してパラメータ一式を子モジュールに渡します。

編集ダイアログで編集をクリックすると、APIを呼び出してデータの更新を行います。

ApiController.php

    /**
     * データを一件取得する
     */
    public function update(Request $request)
    {
        $paramNames = $this->eatingManagement->getParam();

        $param = [];
        foreach($paramNames as $name) {
            $param[$name] = $request->contents[$name];
        }

        $this->eatingManagement->update($param, Auth::user(),  $request->contents['id'], $request->contents['timezone']);
        
        return response()->json();
    }

EatingManagementRepository.php

    /**
     * データを一件取得する
     */
    public function update($param, $user, $id, $timezone)
    {
        $model = $user->EatingManagements()->where('id', $id)->first();
        foreach($this->paramNames as $name)
        {
            $model->$name = $param[$name];
        }
        $model->save();
        $oldtime = $model->timezones()->first();
        $newtime = Timezone::where('id', $timezone)->first();

        $this->detachToTimezone($model, $oldtime);
        $this->attachToTimezone($model, $newtime);
    }

データを更新するときは、IDからデータベースのデータを取得し、これのデータを上書きすることで更新できます。

ただ、時間帯の更新というのもありえるので、timezonesテーブルとのリンクを再構築しなければなりません。

いったん、リレーションからtimezonesとデタッチし、新しいtimezonesとアタッチします。

これが終わったら、入力と同様にダイアログを非表示にし、detail画面を更新します。

ちょっと表示に手間取ったけど、できました。