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

【ダイエット支援】【食事管理】詳細画面を作成する。

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

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

データ入力ダイアログから入力データをデータベースに登録するところまで行きます。

モデル

class User extends Authenticatable
{
    public function EatingManagements()
    {
        return $this->belongsToMany('App\Model\EatingManagement');
    }

class EatingManagement extends Model
{
    protected $table = 'eating_managements';
    
    public function users()
    {
        return $this->belongsToMany('App\User');
    }

    public function timezones()
    {
        return $this->belongsToMany('App\Model\Timezone');
    }
}

class Timezone extends Model
{
    protected $table = 'timezones';
    
    public function Eating()
    {
        return $this->belongsToMany('App\Model\EatingManagement');
    }
}

リポジトリ

<?php

namespace App\Repository;

use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Log;
use App\Model\EatingManagement;
use App\Model\Timezone;
use App\User;

class EatingManagementRepository
{
    private $paramNames = ['date', 'item', 'protein', 'riqid', 'carbo', 'calorie'];

    public function __construct()
    {

    }

    public function add($param, $user, $timezone)
    {
        $model = new EatingManagement();
        foreach($this->paramNames as $name)
        {
            $model->$name = $param[$name];
        }
        $model->save();
        $time = Timezone::where('id', $timezone)->first();

        $this->attachToUser($model, $user);
        $this->attachToTimezone($model, $time);
    }

    public function attachToUser($model, $user)
    {
        $model->users()->attach($user);
    }

    public function detachToUser($model, $user)
    {
        $model->users()->detach($user);
    }

    public function attachToTimezone($model, $timezone)
    {
        $model->timezones()->attach($timezone);
    }

    public function detachToTimezone($model, $timezone)
    {
        $model->timezones()->detach($timezone);
    }

    public function getParam()
    {
        return $this->paramNames;
    }

}

コントローラー

<?php

namespace App\Http\Controllers\Eating;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use App\Http\Controllers\Controller;
use App\Repository\EatingManagementRepository;

class ApiController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth');
        $this->eatingManagement = new EatingManagementRepository();
    }

    /**
     * データを１件登録する
     */
    public function add(Request $request)
    {
        $paramNames = $this->eatingManagement->getParam();

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

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

}

パラメータを設定する処理をちょっと変えています。

Vue側でtypoしていないことが前提ですが、なるべくコードの中で直値を使わない（定義する箇所は一か所のみ）ようにするための工夫。

これが正解なのか、いまだにわかりませんけどね。

Vue側の修正です。

EatingDashboardComponent.vue

<template>
    <div>
        <div class="dashboard">
            <div class="chart">
                <canvas id="eating"></canvas>
            </div>
            <div class="command">
                <ul>
                    <li><a @click="onClickPrev">prev</a></li>
                    <li><a @click="onClickNext">next</a></li>
                </ul>
                <ul>
                    <li><a @click="onClickInput">クイック入力</a></li>
                    <li><a href="/eating">詳細</a></li>
                </ul>
            </div>
        </div>
        <eating-input-dialog-component :show="showInputDialogContent" :datehold=true @update="invokeUpdateList"></eating-input-dialog-component>
    </div>
</template>

ダッシュボードからのクイック入力からは、日付の入力はできないようにします。（本日固定にする。）

そのために、コンポーネントにdateholdというパラメータを追加で渡しています。

EatingInputDialogComponent.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.riqid" /></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="clickAdd">入力</button>
                    <button @click="closeModal">閉じる</button>
                </p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: ['show', 'datehold'],
    data() {
        return {
            errors: [],
            error_flg: [],
            param: {},
            contents: {
                date: "",
                item: "",
                timezone: 1,
                protein: "",
                riqid: "",
                carbo: "",
                calorie: "",
            },
        };
    },
    created: function() {
        this.clear();
    },
    methods: {
        clickAdd: function() {
            var self = this;
            this.param.contents = this.contents;
            axios.post('api/eating/add', 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.showInputDialogContent = false;
        },
        clear: function() {
            var today = new Date();
            this.contents.date = today.getFullYear() + "-" + ('00'+(today.getMonth() + 1)).slice( -2 ) + "-" + today.getDate();
            this.contents.item = "";
            this.contents.timezone = 1;
            this.contents.protein = "";
            this.contents.riqid = "";
            this.contents.carbo = "";
            this.contents.calorie = "";
            this.error_flg = false;
            this.errors = [];
        }
    }
}
</script>

ちょっと苦労したのはdateのフォーマットですね。

dateフォームのフォーマットは”YYYY-MM-DD”で、これが若干違っていてもフォームは正しく認識してくれません。

実行結果。

• 

•