remotes/origin/hotfix/LIL-661
gzbender
8 years ago
parent
055141c9f0
commit
3f4426618f
11 changed files with 277 additions and 133 deletions
@ -0,0 +1,14 @@ |
||||
from django.conf import settings |
||||
from pusher import Pusher |
||||
|
||||
|
||||
def pusher(): |
||||
try: |
||||
pusher_cluster = settings.PUSHER_CLUSTER |
||||
except AttributeError: |
||||
pusher_cluster = 'mt1' |
||||
|
||||
return Pusher(app_id=settings.PUSHER_APP_ID, |
||||
key=settings.PUSHER_KEY, |
||||
secret=settings.PUSHER_SECRET, |
||||
cluster=pusher_cluster) |
||||
@ -0,0 +1,42 @@ |
||||
<template> |
||||
<div class="questions__form" :class="{'questions__item_reply': controller.$data.replyTo}"> |
||||
<div class="questions__ava ava"> |
||||
<img class="ava__pic" :src="store.user.photo || store.defaultUserPhoto"> |
||||
</div> |
||||
<div class="questions__wrap"> |
||||
<div class="questions__field"> |
||||
<textarea v-model="content" class="questions__textarea" |
||||
:placeholder="controller.$data.replyTo ? 'Ответьте на комментарий' : 'Задайте автору курса интересующие вас вопросы'"></textarea> |
||||
</div> |
||||
<div style="text-align: center;"> |
||||
<button class="questions__btn btn btn_light" style="display: inline; margin: 0 20px;" @click="add">ОТПРАВИТЬ</button> |
||||
<button v-show="controller.$data.replyTo" class="questions__btn btn btn_light" style="display: inline; margin: 0 20px;" |
||||
@click="controller.cancelReply">ОТМЕНИТЬ</button> |
||||
<button v-if="controller.isChat" class="questions__btn btn btn_light" style="display: inline; margin: 0 20px; color: #d40700;" |
||||
@click="controller.addHeart">❤</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
|
||||
<script> |
||||
import {api} from "../js/modules/api"; |
||||
|
||||
export default { |
||||
name: 'comment-form', |
||||
props: ['controller',], |
||||
data() { |
||||
return { |
||||
content: '', |
||||
store: window.VUE_STORE, |
||||
} |
||||
}, |
||||
methods: { |
||||
add() { |
||||
this.controller.add(this.content); |
||||
this.content = ''; |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
@ -1,97 +1,142 @@ |
||||
<template> |
||||
<div> |
||||
<ul v-for="node in nodes"> |
||||
<div :class="{'questions_chat': isChat}"> |
||||
<comment-form v-if="store.user.id && ! replyTo" :controller="controller"></comment-form> |
||||
<div class="questions-block" style=""> |
||||
<ul v-for="(node, index) in nodes" :key="index"> |
||||
<li> |
||||
<comment v-on:reply="onReply" v-if="! node.deactivated_at" :comment="node" :user-id="userId" :default-author-picture="defaultAuthorPicture"></comment> |
||||
<comments v-if="! node.is_leaf_node && node.children" :comments="node.children" default-author-picture="defaultAuthorPicture"></comments> |
||||
<comment v-if="! node.deactivated_at" :comment="node" :controller="controller" v-on:remove="remove"></comment> |
||||
</li> |
||||
</ul> |
||||
<form v-if="userId" class="questions__form" method="post" > |
||||
<input type="hidden" name="reply_id"> |
||||
<div class="questions__ava ava"> |
||||
<img class="ava__pic" :src="userPhoto || defaultAuthorPicture"> |
||||
</div> |
||||
<div class="questions__wrap"> |
||||
<div v-show="replyTo" class="questions__reply-info" style="display: block;">В ответ на |
||||
<a :href="replyAnchor" class="questions__reply-anchor">этот комментарий</a>. |
||||
<a href="#" @click="cancelReply" class="questions__reply-cancel grey-link">Отменить</a> |
||||
</div> |
||||
<div class="questions__field"> |
||||
<textarea v-model="content" class="questions__textarea" placeholder="Задайте автору курса интересующие вас вопросы"></textarea> |
||||
</div> |
||||
<button class="questions__btn btn btn_light" @click="post">ОТПРАВИТЬ</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
</template> |
||||
|
||||
<script type="text/javascript"> |
||||
import Comment from './comment'; |
||||
import Comment from './Comment'; |
||||
import CommentForm from './CommentForm'; |
||||
import {api} from "../js/modules/api"; |
||||
|
||||
export default { |
||||
name: 'comments', |
||||
props: ['objType', 'objId', 'comments', 'userId', 'userPhoto', 'accessToken', 'defaultAuthorPicture'], |
||||
props: ['objType', 'objId', 'isChat'], |
||||
data() { |
||||
return { |
||||
loading: false, |
||||
replyTo: null, |
||||
content: '', |
||||
nodes: [], |
||||
} |
||||
}, |
||||
computed: { |
||||
replyAnchor(){ |
||||
return this.replyTo ? `#question__${this.replyTo.id}` : ''; |
||||
controller: this, |
||||
store: window.VUE_STORE, |
||||
flatComments: {}, |
||||
} |
||||
}, |
||||
methods: { |
||||
clear() { |
||||
this.content = '', |
||||
this.replyTo = null |
||||
reply(comment) { |
||||
this.replyTo = comment; |
||||
}, |
||||
cancelReply() { |
||||
cancelReply(){ |
||||
this.replyTo = null; |
||||
}, |
||||
post() { |
||||
addHeart(){ |
||||
this.add('❤'); |
||||
}, |
||||
add(content){ |
||||
let vm = this; |
||||
this.loading = true; |
||||
let request = api.addComment(this.objId, this.objType, { |
||||
content: this.content, |
||||
author: this.userId, |
||||
let request = api.addObjComment(this.objId, this.objType, { |
||||
content: content, |
||||
author: this.store.user.id, |
||||
parent: this.replyTo && this.replyTo.id, |
||||
}, this.accessToken); |
||||
}, this.store.accessToken); |
||||
request.then((response) => { |
||||
this.loading = false; |
||||
if(this.replyTo){ |
||||
this.replyTo.children.push(response.data); |
||||
} |
||||
else { |
||||
this.nodes.push(response.data); |
||||
vm.loading = false; |
||||
vm.onAdd(response.data); |
||||
if(vm.replyTo){ |
||||
vm.cancelReply(); |
||||
} |
||||
this.clear(); |
||||
}).catch(() => { |
||||
this.loading = false; |
||||
vm.loading = false; |
||||
}); |
||||
}, |
||||
onReply(replyTo) { |
||||
this.replyTo = replyTo; |
||||
remove(comment){ |
||||
if(! confirm('Удалить комментарий?')){ |
||||
return; |
||||
} |
||||
let vm = this; |
||||
this.loading = true; |
||||
let request = api.removeComment(comment.id, this.store.accessToken); |
||||
request.then((response) => { |
||||
vm.loading = false; |
||||
vm.onRemove(comment); |
||||
}); |
||||
}, |
||||
onAdd(comment){ |
||||
if(this.flatComments[comment.id]){ |
||||
return; |
||||
} |
||||
if(comment.parent){ |
||||
this.flatComments[comment.parent].children.unshift(comment); |
||||
} |
||||
else{ |
||||
this.nodes.unshift(comment); |
||||
} |
||||
this.flatComments[comment.id] = comment; |
||||
}, |
||||
onRemove(comment){ |
||||
let comments = []; |
||||
if(comment.parent){ |
||||
comments = this.flatComments[comment.parent].children; |
||||
} |
||||
else{ |
||||
comments = this.nodes; |
||||
} |
||||
let index = comments.indexOf(comment); |
||||
if(index === -1){ |
||||
return; |
||||
} |
||||
comments.splice(index, 1); |
||||
delete this.flatComments[comment.id]; |
||||
}, |
||||
connectToPusher(){ |
||||
let vm = this; |
||||
// Enable pusher logging - don't include this in production |
||||
Pusher.logToConsole = true; |
||||
|
||||
let pusher = new Pusher('d9bfd3aaf6ed22bdcc0d', { |
||||
cluster: 'eu', |
||||
encrypted: true |
||||
}); |
||||
|
||||
let channel = pusher.subscribe('comments_' + this.objType + '_' + this.objId); |
||||
channel.bind('add', this.onAdd); |
||||
channel.bind('delete', this.onRemove); |
||||
} |
||||
}, |
||||
mounted() { |
||||
if(this.comments && this.comments.length){ |
||||
this.nodes = this.comments; |
||||
} |
||||
else if(this.objType && this.objId){ |
||||
let request = api.getObjComments(this.objId, this.objType, this.accessToken); |
||||
let vm = this; |
||||
this.loading = true; |
||||
let request = api.getObjComments(this.objId, this.objType, this.store.accessToken); |
||||
request |
||||
.then((response) => { |
||||
this.nodes = response.data.results; |
||||
vm.loading = false; |
||||
vm.nodes = response.data.results; |
||||
vm.connectToPusher(); |
||||
}) |
||||
.catch(() => { |
||||
vm.loading = false; |
||||
}); |
||||
} |
||||
console.log('nodes', this.nodes); |
||||
}, |
||||
components: { |
||||
Comment |
||||
Comment, |
||||
CommentForm |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
.questions_chat .questions-block { |
||||
background: white; |
||||
border: 1px solid #ccc; |
||||
padding: 10px; |
||||
border-radius: 5px; |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue