LIL-559 Добавить блок комментариев в уроки онлайн-школы

Временный коммит

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 %}

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>

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>

web/src/js/modules/comments.js

@@ -62,3 +62,4 @@ $(document).ready(function () {
         form.find('.questions__reply-info').hide();
     }
 });
+

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,
+  }
+});

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
 };