Skip to content

Commit

Permalink
[add]メニューの削除ダイアログ追加#76
Browse files Browse the repository at this point in the history
  • Loading branch information
aki537 committed Apr 12, 2021
1 parent d241a8d commit c00d5ec
Show file tree
Hide file tree
Showing 4 changed files with 123 additions and 89 deletions.
12 changes: 11 additions & 1 deletion front/components/CalorieGraph.vue
Original file line number Diff line number Diff line change
Expand Up @@ -108,9 +108,19 @@ export default {
chartOptions: {
maintainAspectRatio: false,
animation: {
duration: 1500,
duration: 1000,
easing: "easeInOutCubic",
},
// scales: {
// yAxes: [
// {
// ticks: {
// max: 4000,
// min: 0,
// },
// },
// ],
// },
},
events: [],
value: this.$dayjs().format("YYYY-MM-DD"),
Expand Down
49 changes: 4 additions & 45 deletions front/components/CalorieMenu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -30,16 +30,7 @@
</div>
<v-spacer />
<template v-if="login">
<div v-if="menu.user_id === $store.state.auth.loginUser.id">
<v-btn
color="red"
class="font-weight-bold justify-center mr-2"
text
@click="deleteMenu(menu.id)"
>
削除
</v-btn>
</div>
<delete-food-menu :menu="menu" />
</template>
</div>
</v-card>
Expand All @@ -48,10 +39,12 @@
<script>
import { mapGetters } from "vuex"
import foodList from "~/components/FoodList.vue"
import deleteFoodMenu from "~/components/DeleteFoodMenu.vue"
export default {
components: {
foodList,
deleteFoodMenu,
},
props: {
menu: {
Expand Down Expand Up @@ -96,41 +89,7 @@ export default {
this.totalProtein = protein.toFixed(1)
this.totalLipid = lipid.toFixed(1)
},
methods: {
deleteMenu(id) {
this.$axios
.delete(`api/v1/menus/${id}`)
.then(() => {
this.$store.dispatch(
"flashMessage/showMessage",
{
message: "献立を削除しました。",
type: "info",
status: true,
},
{ root: true }
)
this.$axios
.$get(`/api/v1/users/${this.$route.params.id}`)
.then((res) => {
this.$store.commit("user/setUser", res, { root: true })
this.status = false
})
})
.catch((err) => {
console.log(err)
this.$store.dispatch(
"flashMessage/showMessage",
{
message: "献立の削除に失敗しました。",
type: "error",
status: true,
},
{ root: true }
)
})
},
},
methods: {},
}
</script>

Expand Down
104 changes: 104 additions & 0 deletions front/components/DeleteFoodMenu.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<template>
<v-dialog v-model="dialog" max-width="600">
<template v-if="$store.state.auth.isLoggedIn" #activator="{ on, attrs }">
<v-btn
v-if="menu.user_id === $store.state.auth.loginUser.id"
color="red"
class="font-weight-bold justify-center mr-2"
text
v-bind="attrs"
v-on="on"
>
削除
</v-btn>
</template>

<v-card>
<v-system-bar lights-out>
<v-spacer></v-spacer>
<v-btn icon class="mt-5" @click="dialog = false">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-system-bar>
<v-card-title class="headline justify-center">
投稿を削除しますか?
</v-card-title>
<v-card-text class="mt-3">
この操作は取り消せません。メニューが削除されます。
</v-card-text>
<div class="text-center">
<v-btn
color="red"
class="font-weight-bold justify-center mb-2"
text
@click="deleteMenu(menu.id)"
>
削除
</v-btn>
</div>
</v-card>
</v-dialog>
</template>

<script>
export default {
props: {
menu: {
type: Object,
required: true,
},
},
data() {
return {
dialog: false,
}
},
methods: {
// ...mapActions({ deleteReview: "food/deleteReview" }),
deleteMenu(id) {
this.$axios
.delete(`api/v1/menus/${id}`)
.then(() => {
this.$store.dispatch(
"flashMessage/showMessage",
{
message: "メニューを削除しました。",
type: "info",
status: true,
},
{ root: true }
)
this.$axios
.$get(`/api/v1/users/${this.$route.params.id}`)
.then((res) => {
this.$store.commit("user/setUser", res, { root: true })
this.dialog = false
})
})
.catch((err) => {
console.log(err)
this.$store.dispatch(
"flashMessage/showMessage",
{
message: "メニューの削除に失敗しました。",
type: "error",
status: true,
},
{ root: true }
)
})
},
},
}
</script>

<style scoped>
.signup-link {
color: #2196f3;
cursor: pointer;
}
.signup-link:hover {
opacity: 0.8;
text-decoration: underline;
}
</style>
47 changes: 4 additions & 43 deletions front/components/UserMenu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,7 @@
<v-spacer />
<template v-if="login">
<div v-if="menu.user_id === $store.state.auth.loginUser.id">
<v-btn
color="red"
class="font-weight-bold justify-center mr-2"
text
@click="deleteMenu(menu.id)"
>
削除
</v-btn>
<delete-food-menu :menu="menu" />
</div>
</template>
</div>
Expand All @@ -49,10 +42,12 @@
<script>
import { mapGetters } from "vuex"
import foodList from "~/components/FoodList.vue"
import deleteFoodMenu from "~/components/DeleteFoodMenu.vue"
export default {
components: {
foodList,
deleteFoodMenu,
},
props: {
menu: {
Expand Down Expand Up @@ -99,41 +94,7 @@ export default {
this.totalProtein = protein.toFixed(1)
this.totalLipid = lipid.toFixed(1)
},
methods: {
deleteMenu(id) {
this.$axios
.delete(`api/v1/menus/${id}`)
.then(() => {
this.$store.dispatch(
"flashMessage/showMessage",
{
message: "献立を削除しました。",
type: "info",
status: true,
},
{ root: true }
)
this.$axios
.$get(`/api/v1/users/${this.$route.params.id}`)
.then((res) => {
this.$store.commit("user/setUser", res, { root: true })
this.status = false
})
})
.catch((err) => {
console.log(err)
this.$store.dispatch(
"flashMessage/showMessage",
{
message: "献立の削除に失敗しました。",
type: "error",
status: true,
},
{ root: true }
)
})
},
},
methods: {},
}
</script>

Expand Down

0 comments on commit c00d5ec

Please sign in to comment.