Add reply feature

frappe/public/js/frappe/social/components/Post.vue

@@ -6,32 +6,64 @@
 			<div class="user-name">{{ user_name }}</div>
 			<div class="content" v-html="post.content"></div>
 		</div>
-		<post-action :comment_count="comment_count"></post-action>
+		<post-action :reply_count="reply_count" @reply="toggle_reply" @new_reply="create_new_reply"></post-action>
+		<post-reply class="post-reply" v-if="show_replies" :replies="replies"></post-reply>
 	</div>
 </template>
 <script>
+import PostReply from './PostReply.vue';
 import PostAction from './PostAction.vue';
-export default {
+
+frappe.provide('frappe.social');
+
+const Post = {
 	props: ['post'],
 	components: {
-		PostAction
+		PostAction,
+		PostReply
 	},
 	data() {
 		return {
 			user_avatar: frappe.avatar(this.post.owner, 'avatar-medium'),
 			post_time: comment_when(this.post.creation),
 			user_name: frappe.user_info(this.post.owner).fullname,
-			show_comment: false,
-			comment_count: 0,
-			comments: null
+			reply_count: 0,
+			replies: [{
+				content: 'hello',
+				name: 'asdfasdf'
+			}],
+			show_replies: false
 		}
 	},
 	created() {
-
+		frappe.db.get_list('Post', {
+			fields: ['name', 'content', 'owner', 'creation'],
+			order_by: 'creation desc',
+			filters: {
+				reply_to: this.post.name
+			}
+		}).then(replies => {
+			this.replies = replies;
+		})
+		frappe.realtime.on('new_post_reply', (post) => {
+			if (post.reply_to === this.post.name) {
+				this.reply_count += 1;
+			}
+		})
 	},
 	methods: {
+		create_new_reply: () => {
+			frappe.social.post_reply_dialog.show()
+		},
+		toggle_reply: () => {
+			this.show_repies = !this.show_replies
+		}
 	}
 }
+
+frappe.social.Post = Post;
+
+export default Post;
 </script>
 <style lang="less">
 .post-card {
@@ -66,5 +98,8 @@ export default {
 			border: none;
 		}
 	}
+	.post-reply {
+		margin-left: 10px;
+	}
 }
 </style>

frappe/public/js/frappe/social/components/PostAction.vue

@@ -1,8 +1,8 @@
 <template>
 	<div class="flex text-muted justify-center">
-		<div class="comment" @click="$emit('comment')">
+		<div class="reply" @click="$emit('reply')">
 			<i class="fa fa-reply"></i>
-			<span>{{comment_count}}</span>
+			<span>{{reply_count}}</span>
 		</div>
 		<div class="like" @click="$emit('like')">
 			<i class="fa fa-heart"></i>
@@ -17,7 +17,7 @@ export default {
 			'type': Number,
 			'default': 0,
 		},
-		'comment_count': {
+		'reply_count': {
 			'type': Number,
 			'default': 0,
 		}
@@ -25,7 +25,7 @@ export default {
 }
 </script>
 <style lang='less' scoped>
-.comment, .like{
+.reply, .like{
 	padding: 10px;
 	span {
 		margin-left: 5px;

frappe/public/js/frappe/social/components/PostReply.vue

@@ -0,0 +1,16 @@
+<template>
+	<div>
+		<div v-for="reply in replies" :key="reply.name">
+			<post :post='reply'></post>
+		</div>
+	</div>
+</template>
+<script>
+
+export default {
+	props: ['replies'],
+	components: {
+		Post: () => Promise.resolve(frappe.social.Post)
+	}
+}
+</script>

frappe/public/js/frappe/social/social_home.js

@@ -39,6 +39,7 @@ frappe.social.post_dialog = new frappe.ui.Dialog({
 	title: __("Create A Post"),
 	fields: [
 		{fieldtype: "Text Editor", fieldname: "content", label: __("Content"), reqd: 1},
+		{fieldtype: "Link", fieldname: "reply_to", label: __("Reply"), hidden: 1}
 	]
 });
 
@@ -46,8 +47,28 @@ frappe.social.post_dialog.set_primary_action(__('Post'), () => {
 	const values = frappe.social.post_dialog.get_values();
 	const post = frappe.model.get_new_doc('Post');
 	post.content = values.content;
+	post.reply_to = values.reply_to;
 	frappe.db.insert(post).then(() => {
 		frappe.social.post_dialog.clear();
 		frappe.social.post_dialog.hide();
 	});
+});
+
+frappe.social.post_reply_dialog = new frappe.ui.Dialog({
+	title: __("Reply"),
+	fields: [
+		{fieldtype: "Text Editor", fieldname: "content", label: __("Content"), reqd: 1},
+		{fieldtype: "Link", fieldname: "reply_to", label: __("Reply"), hidden: 1}
+	]
+});
+
+frappe.social.post_reply_dialog.set_primary_action(__('Reply'), () => {
+	const values = frappe.social.post_reply_dialog.get_values();
+	const post = frappe.model.get_new_doc('Post');
+	post.content = values.content;
+	post.reply_to = values.reply_to;
+	frappe.db.insert(post).then(() => {
+		frappe.social.post_reply_dialog.clear();
+		frappe.social.post_reply_dialog.hide();
+	});
 });

frappe/social/doctype/post/post.py

@@ -9,6 +9,6 @@ from frappe.model.document import Document
 class Post(Document):
 	def after_insert(self):
 		if self.reply_to:
-			frappe.publish_realtime('post_reply', self, after_commit=True)
+			frappe.publish_realtime('new_post_reply', self, after_commit=True)
 		else:
 			frappe.publish_realtime('new_post', self, after_commit=True)