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 FavoriteButton from '../favorite_button/favorite_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'
const Status = {
@ -20,25 +21,18 @@ const Status = {
},
loggedIn () {
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: {
Attachment,
FavoriteButton,
RetweetButton,
DeleteButton,
PostStatusForm
},
methods: {
toggleReplying () {
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>
<retweet-button :status=status></retweet-button>
<favorite-button :status=status></favorite-button>
<div v-if="canDelete">
<a href="#" v-on:click.prevent="deleteStatus">
<i class='fa icon-cancel delete-status'></i>
</a>
</div>
<delete-button :status=status></delete-button>
</div>
<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 {
border: none
}
.icon-cancel,.delete-status {
cursor: pointer;
&:hover {
color: $red;
}
}
</style>