Move delete button for status into a component

This commit is contained in:
Jiayi Zheng 2016-12-07 21:50:46 +01:00
parent 7b5a30db14
commit 1c75feae60
4 changed files with 40 additions and 21 deletions

View file

@ -0,0 +1,16 @@
const DeleteButton = {
props: [ 'status' ],
methods: {
deleteStatus () {
const confirmed = confirm('Do you really want to delete this status?')
if (confirmed) {
this.$store.dispatch('deleteStatus', { id: this.status.id })
}
}
},
computed: {
canDelete () { return this.status.user.rights.delete_others_notice || this.status.user.id == this.$store.state.users.currentUser.id }
}
}
export default DeleteButton

View file

@ -0,0 +1,20 @@
<template>
<div v-if="canDelete">
<a href="#" v-on:click.prevent="deleteStatus()">
<i class='fa icon-cancel delete-status'></i>
</a>
</div>
</template>
<script src="./delete_button.js" ></script>
<style lang='scss'>
@import '../../_variables.scss';
.icon-cancel,.delete-status {
cursor: pointer;
&:hover {
color: $red;
}
}
</style>

View file

@ -1,6 +1,7 @@
import Attachment from '../attachment/attachment.vue' import Attachment from '../attachment/attachment.vue'
import FavoriteButton from '../favorite_button/favorite_button.vue' import FavoriteButton from '../favorite_button/favorite_button.vue'
import RetweetButton from '../retweet_button/retweet_button.vue' import RetweetButton from '../retweet_button/retweet_button.vue'
import DeleteButton from '../delete_button/delete_button.vue'
import PostStatusForm from '../post_status_form/post_status_form.vue' import PostStatusForm from '../post_status_form/post_status_form.vue'
const Status = { const Status = {
@ -20,25 +21,18 @@ const Status = {
}, },
loggedIn () { loggedIn () {
return !!this.$store.state.users.currentUser return !!this.$store.state.users.currentUser
}, }
deleted () { return this.statusoid.deleted },
canDelete () { return this.statusoid.user.rights.delete_others_notice || this.statusoid.user.id == this.$store.state.users.currentUser.id }
}, },
components: { components: {
Attachment, Attachment,
FavoriteButton, FavoriteButton,
RetweetButton, RetweetButton,
DeleteButton,
PostStatusForm PostStatusForm
}, },
methods: { methods: {
toggleReplying () { toggleReplying () {
this.replying = !this.replying this.replying = !this.replying
},
deleteStatus () {
const confirmed = confirm('Do you really want to delete this status?')
if (confirmed) {
this.$store.dispatch('deleteStatus', { id: this.status.id })
}
} }
} }
} }

View file

@ -52,11 +52,7 @@
</div> </div>
<retweet-button :status=status></retweet-button> <retweet-button :status=status></retweet-button>
<favorite-button :status=status></favorite-button> <favorite-button :status=status></favorite-button>
<div v-if="canDelete"> <delete-button :status=status></delete-button>
<a href="#" v-on:click.prevent="deleteStatus">
<i class='fa icon-cancel delete-status'></i>
</a>
</div>
</div> </div>
<post-status-form v-if="replying" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying"></post-status-form> <post-status-form v-if="replying" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying"></post-status-form>
@ -130,11 +126,4 @@
.status-el:last-child .status { .status-el:last-child .status {
border: none border: none
} }
.icon-cancel,.delete-status {
cursor: pointer;
&:hover {
color: $red;
}
}
</style> </style>