From 771dc336811abf50ed4880dabfce5aefd883a764 Mon Sep 17 00:00:00 2001
From: gzbender <gzbender74@gmail.com>
Date: Fri, 6 Jul 2018 15:44:19 +0500
Subject: [PATCH] =?UTF-8?q?LIL-559=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D1=82=D1=8C=20=D0=B1=D0=BB=D0=BE=D0=BA=20=D0=BA=D0=BE=D0=BC?=
 =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D1=82=D0=B0=D1=80=D0=B8=D0=B5=D0=B2=20=D0=B2?=
 =?UTF-8?q?=20=D1=83=D1=80=D0=BE=D0=BA=D0=B8=20=D0=BE=D0=BD=D0=BB=D0=B0?=
 =?UTF-8?q?=D0=B9=D0=BD-=D1=88=D0=BA=D0=BE=D0=BB=D1=8B=20=D0=92=D1=80?=
 =?UTF-8?q?=D0=B5=D0=BC=D0=B5=D0=BD=D0=BD=D1=8B=D0=B9=20=D0=BA=D0=BE=D0=BC?=
 =?UTF-8?q?=D0=BC=D0=B8=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/course/templates/course/lesson.html | 10 ++++
 web/src/components/Comment.vue           | 44 ++++++++++++++++++
 web/src/components/Comments.vue          | 38 +++++++++++++++
 web/src/js/modules/comments.js           |  1 +
 web/src/js/modules/comments_vue.js       | 59 ++++++++++++++++++++++++
 web/webpack.config.js                    |  4 ++
 6 files changed, 156 insertions(+)
 create mode 100644 web/src/components/Comment.vue
 create mode 100644 web/src/components/Comments.vue
 create mode 100644 web/src/js/modules/comments_vue.js

diff --git a/apps/course/templates/course/lesson.html b/apps/course/templates/course/lesson.html
index 662a4dd5..9fbe5a88 100644
--- a/apps/course/templates/course/lesson.html
+++ b/apps/course/templates/course/lesson.html
@@ -92,6 +92,14 @@
     </div>
   </div>
 </div> {% endcomment %}
+<div class="section section_gray">
+  <div class="section__center center center_sm">
+    <div class="title">Задавайте вопросы:</div>
+    <div class="questions" id="comments_block">
+      <comments :nodes="comments" user-id="123" :access-token="accessToken"></comments>
+    </div>
+  </div>
+</div>
 <div class="section section_gray">
   <div class="section__center center center_sm">
     <div class="title">Задавайте вопросы:</div>
@@ -129,4 +137,6 @@
     {% include 'templates/blocks/share.html' %}
   </div>
 </div>
+<script type="text/javascript" src="{% static 'comments_vue.js' %}">
+</script>
 {% endblock content %}
diff --git a/web/src/components/Comment.vue b/web/src/components/Comment.vue
new file mode 100644
index 00000000..b688c6b7
--- /dev/null
+++ b/web/src/components/Comment.vue
@@ -0,0 +1,44 @@
+<template>
+  <div v-if="! node.deactivated_at">
+    <a class="questions__anchor" :id="'question__' + node.id"></a>
+    <div :id="'question__replyto__' + node.id" :class="{'questions__item_reply': node.is_child_node}" class="questions__item">
+
+      <div v-if="node.author.photo" class="questions__ava ava">
+        <img class="ava__pic" :src="node.author.photo.url">
+      </div>
+
+      <div v-if="! node.author.photo" class="questions__ava ava">
+        <img class="ava__pic" src="{% static 'img/user_default.jpg' %}">
+      </div>
+
+      <div class="questions__wrap">
+        <div class="questions__details">
+          <div class="questions__head">
+            <span class="questions__author">{{ node.author.get_full_name }}</span>
+            <span class="questions__date">{{ node.created_at_humanize }}</span>
+          </div>
+          <div class="questions__content">{{ node.content }}</div>
+        </div>
+        <div class="questions__foot">
+          <button @click="reply" v-if="userId" class="questions__action question__reply-button" :data-reply-id="node.id">ОТВЕТИТЬ</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+    export default {
+        name: 'comment',
+        props: ['node', 'userId'],
+        methods: {
+            reply() {
+                //
+            }
+        },
+        components: {
+        }
+
+    }
+</script>
diff --git a/web/src/components/Comments.vue b/web/src/components/Comments.vue
new file mode 100644
index 00000000..c89a3924
--- /dev/null
+++ b/web/src/components/Comments.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <ul v-for="node in nodes">
+      <li>
+        <comment v-if="! node.deactivated_at" :node="node" :user-id="userId"></comment>
+        <comments v-if="! node.is_leaf_node && node.children" :nodes="node.children"></comments>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script type="text/javascript">
+    import Comment from './comment';
+    import {api} from "../js/modules/api";
+
+    export default {
+        name: 'comments',
+        props: ['objType', 'objId', 'nodes', 'userId', 'accessToken'],
+        methods: {
+            reply() {
+                //
+            }
+        },
+        mounted() {
+            if(! this.nodes && this.objType && this.objId){
+                request = api.loadComments(this.objId, this.objType, this.accessToken);
+                request
+                    .then((response) => {
+                        this.nodes = response.data;
+                    })
+            }
+            console.log('nodes', this.nodes);
+        },
+        components: {
+            Comment
+        }
+    }
+</script>
diff --git a/web/src/js/modules/comments.js b/web/src/js/modules/comments.js
index 30b0a815..084b172f 100644
--- a/web/src/js/modules/comments.js
+++ b/web/src/js/modules/comments.js
@@ -62,3 +62,4 @@ $(document).ready(function () {
         form.find('.questions__reply-info').hide();
     }
 });
+
diff --git a/web/src/js/modules/comments_vue.js b/web/src/js/modules/comments_vue.js
new file mode 100644
index 00000000..f511dac5
--- /dev/null
+++ b/web/src/js/modules/comments_vue.js
@@ -0,0 +1,59 @@
+import Vue from 'vue';
+import Comments from '../../components/Comments';
+//import $ from 'jquery';
+
+if (process.env.NODE_ENV === 'development') {
+  // Enable vue-devtools
+  Vue.config.devtools = true;
+}
+
+let app = new Vue({
+  el: '#comments_block',
+  data(){
+    return {
+      userId: 123,
+      accessToken: 123,
+      comments: [{
+        author: {
+          get_full_name: 'John Doe',
+          photo: {url: ''},
+        },
+        created_at_humanize: '12 07 18',
+        content: 'content content content content',
+        id: 1,
+        is_child_node: false
+      }, {
+        author: {
+          get_full_name: 'Sarah Conor',
+          photo: {url: ''},
+        },
+        created_at_humanize: '5 05 18',
+        content: 'hasta la vista',
+        id: 2,
+        is_child_node: false,
+        children: [{
+          author: {
+            get_full_name: 'John Doe',
+            photo: {url: ''},
+          },
+          created_at_humanize: '12 07 18',
+          content: 'content content content content',
+          id: 10,
+          is_child_node: true
+        }, {
+          author: {
+            get_full_name: 'Sarah Conor',
+            photo: {url: ''},
+          },
+          created_at_humanize: '5 05 18',
+          content: 'hasta la vista',
+          id: 20,
+          is_child_node: true,
+        }]
+      }]
+    }
+  },
+  components: {
+    'comments': Comments,
+  }
+});
diff --git a/web/webpack.config.js b/web/webpack.config.js
index 3c6785ab..3d47d057 100644
--- a/web/webpack.config.js
+++ b/web/webpack.config.js
@@ -9,6 +9,7 @@ module.exports = {
   entry: {
     app: "./src/js/app.js",
     courseRedactor: "./src/js/course-redactor.js",
+    comments_vue: "./src/js/modules/comments_vue.js",
     mixpanel: "./src/js/third_party/mixpanel-2-latest.js",
     sprite: glob('./src/icons/*.svg'),
     images: glob('./src/img/*'),
@@ -116,6 +117,9 @@ module.exports = {
   },
 
   watch: NODE_ENV === 'development',
+  watchOptions: {
+      poll: true,
+  },
 
   devtool: NODE_ENV === 'development' ? 'source-map' : false
 };