前回作成した履歴一覧画面からデータテンプレートへ移動する機能を作成していきます。
<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に移動させています。
この画面はまだまだ改良の余地がありますが、とりあえずこんな感じでいいでしょう。
次回はテンプレートから入力候補を検索する処理を作成していきます。
