前回までの状況はこちら
最新ソースはこちら(gitHub)
https://github.com/takishita2nd/diet-mng
データ削除処理を作成していきます。
まずはDeleteをクリックしたときの処理。
やり方はEditと同じです。
EatingDetailComponent.vue
onClickDelete: function(timezone, id) {
var deleteData = {};
this.datalists[timezone].forEach(element => {
if(element.id == id){
deleteData.id = id;
deleteData.date = this.date;
deleteData.item = element.item;
deleteData.timezone = timezone + 1;
deleteData.protein = element.protein;
deleteData.liqid = element.liqid;
deleteData.carbo = element.carbo;
deleteData.calorie = element.calorie;
return true;
}
});
this.$refs.deleteDialog.dataSet(deleteData);
this.showDeleteDialogContent = true;
},
ダイアログ処理は体重管理のものを流用しています。
EatingDeleteDialogComponent.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>{{contents.date}}</td>
</tr>
<tr>
<td>品名</td>
<td>{{contents.item}}</td>
</tr>
<tr>
<td>時間帯</td>
<td>{{contents.time}}</td>
</tr>
<tr>
<td>タンパク質</td>
<td>{{contents.protein}}</td>
</tr>
<tr>
<td>脂質</td>
<td>{{contents.liqid}}</td>
</tr>
<tr>
<td>炭水化物</td>
<td>{{contents.carbo}}</td>
</tr>
<tr>
<td>カロリー</td>
<td>{{contents.calorie}}</td>
</tr>
</tbody>
</table>
<p id="command">
<button @click="clickDelete">削除</button>
<button @click="closeModal">閉じる</button>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['show'],
data() {
return {
errors: [],
error_flg: [],
param: {},
contents: {},
};
},
created: function() {
},
methods: {
dataSet: function(data) {
this.contents = data;
switch(this.contents.timezone) {
case 1:
this.contents.time = "朝";
break;
case 2:
this.contents.time = "昼";
break;
case 3:
this.contents.time = "夜";
break;
case 4:
this.contents.time = "間食";
break;
}
},
clickDelete: function() {
var self = this;
this.param.contents = this.contents;
axios.post('/api/eating/delete', this.param).then(function(response){
self.closeModal();
self.$emit('update');
}).catch(function(error){
self.error_flg = true;
self.errors = error.response.data.errors;
});
},
closeModal: function() {
this.$parent.showDeleteDialogContent = false;
},
}
}
</script>
次はAPIの処理です。
これも体重管理の処理とほぼ同じ。
ApiController.php
/**
* データを一件削除する
*/
public function delete(Request $request)
{
$this->eatingManagement->delete(Auth::user(), $request->contents['id']);
return response()->json();
}
EatingManagementRepository.php
/**
* データを一件削除する
*/
public function delete($user, $id)
{
$model = $user->EatingManagements()->where('id', $id)->first();
$timezone = $model->timezones()->first();
$this->detachToUser($model, $user);
$this->detachToTimezone($model, $timezone);
$model->delete();
}
違いはtimezoneテーブルとのリンクを削除する処理が増えたぐらいで、やっていることはそんなに難しくないです。
すんなり完成しました。
これでCURD処理一通り完成したので、次回はグラフ処理を作成していこうと思います。
