【ダイエット支援】【入力履歴機能】履歴管理画面の作成

前回作成した履歴一覧画面からデータテンプレートへ移動する機能を作成していきます。

<template>
    <div>
        <div>
            <p id="navi"> <a href="/home">HOME</a></p>
            <p id="inputbutton">
                <button @click="onClickSubmit">選択したデータを登録</button>
            </p>
            <table class="eatinghistory">
                <tbody>
                    <tr>
                        <th class="check">
                            <input type="checkbox" v-model="all" @click="onAllCheck" />
                        </th>
                        <th class="date">日時</th>
                        <th class="item">アイテム</th>
                        <th class="protein">タンパク質</th>
                        <th class="liqid">脂質</th>
                        <th class="carbo">炭水化物</th>
                        <th class="calorie">カロリー</th>
                    </tr>
                    <tr v-for="data in datalists">
                        <td class="check">
                            <input type="checkbox" v-model="data.check" />
                        </td>
                        <td class="date">{{ data.date}}</td>
                        <td class="item">{{ data.item}}</td>
                        <td class="protein">{{ data.protein}}</td>
                        <td class="liqid">{{ data.liqid}}</td>
                        <td class="carbo">{{ data.carbo}}</td>
                        <td class="calorie">{{ data.calorie}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

チェックボックスの処理と処理を行うボタンを配置しました。

リストのチェックボックスはリストデータとバインドさせています。

チェックした内容がそのままデータに反映されます。

        onClickSubmit: function() {
            var self = this;
            this.datalists.forEach(element => {
                if(element.check == true){
                    this.ids.push(element.id);
                }
            });
            this.param.contents = this.ids;
            axios.post('/api/eating/regist', this.param).then(function(response){
                self.updateList();
            }).catch(function(error){
            });
        },
        onAllCheck: function() {
            if(this.all == false) {
                this.datalists.forEach(element => {
                    element.check = true;
                });
            }else{
                this.datalists.forEach(element => {
                    element.check = false;
                });
            }
        }

ヘッダのチェックをクリックすると、リストの中の全項目にチェックを行うように処理しています。

そして、「選択したデータを登録」をクリックすると、チェックをつけたidのリストがバックエンド側に送信されます。

Route::post('api/eating/regist', 'Eating\ApiController@regist');

class ApiController extends Controller
{
    public function regist(Request $request)
    {
        $this->eatingManagement->registTemplate($request->contents);
        return response()->json();
    }

class EatingManagementRepository
{
    public function registTemplate($ids)
    {
        $records =EatingHistoryItem::whereIn('id', $ids )->get();
        foreach($records as $record)
        {
            $model = new EatingTemplateItem();
            foreach($this->templateParamNames as $name)
            {
                $model->$name = $record[$name];
            }
            $model->save();
            $record->delete();
        }
    }

idのリストを元にhistoryのデータをtemplateに移動させています。

この画面はまだまだ改良の余地がありますが、とりあえずこんな感じでいいでしょう。

次回はテンプレートから入力候補を検索する処理を作成していきます。