Vue Comments: Comments ported to Vue + DnD fileupload
* Drag and drop files to comment editor to add a file attachment * Using Vue to render comments Since comments now has attachments we need to update the schemas ./manage.py maintenance replace_pillar_node_type_schemas
This commit is contained in:
52
src/scripts/js/es6/common/vuecomponents/comments/Rating.js
Normal file
52
src/scripts/js/es6/common/vuecomponents/comments/Rating.js
Normal file
@@ -0,0 +1,52 @@
|
||||
import { EventBus, Events } from './EventBus'
|
||||
import { UnitOfWorkTracker } from '../mixins/UnitOfWorkTracker'
|
||||
import { thenVoteComment } from '../../api/comments'
|
||||
const TEMPLATE = `
|
||||
<div class="comment-rating"
|
||||
:class="{rated: hasRating, positive: isPositive }"
|
||||
>
|
||||
<div class="comment-rating-value" title="Number of likes">{{ rating }}</div>
|
||||
<div class="comment-action-rating up" title="Like comment"
|
||||
v-if="canVote"
|
||||
@click="upVote"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Vue.component('comment-rating', {
|
||||
template: TEMPLATE,
|
||||
mixins: [UnitOfWorkTracker],
|
||||
props: {comment: Object},
|
||||
computed: {
|
||||
positiveRating() {
|
||||
return this.comment.properties.rating_positive || 0;
|
||||
},
|
||||
negativeRating() {
|
||||
return this.comment.properties.rating_negative || 0;
|
||||
},
|
||||
rating() {
|
||||
return this.positiveRating - this.negativeRating;
|
||||
},
|
||||
isPositive() {
|
||||
return this.rating > 0;
|
||||
},
|
||||
hasRating() {
|
||||
return (this.positiveRating || this.negativeRating) !== 0;
|
||||
},
|
||||
canVote() {
|
||||
return this.comment.user.id !== pillar.utils.getCurrentUser().user_id;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
upVote() {
|
||||
let vote = this.comment.current_user_rating === true ? 0 : 1; // revoke if set
|
||||
this.unitOfWork(
|
||||
thenVoteComment(this.comment.parent, this.comment.id, vote)
|
||||
.then((updatedComment) => {
|
||||
EventBus.$emit(Events.UPDATED_COMMENT, updatedComment);
|
||||
})
|
||||
.fail((err) => {toastr.error(pillar.utils.messageFromError(err), 'Faied to vote on comment')})
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
Reference in New Issue
Block a user