Merge branch 'feature/courses' into dev

apps/course/migrations/0018_auto_20180130_1248.py

@@ -0,0 +1,17 @@
+# Generated by Django 2.0.1 on 2018-01-30 12:48
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('course', '0017_auto_20180130_0810'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='comment',
+            options={'ordering': ('-created_at',)},
+        ),
+    ]

apps/course/models.py

@@ -134,8 +134,11 @@ class Comment(MPTTModel):
     def __str__(self):
         return self.content
 
+    class Meta:
+        ordering = ('-created_at',)
+
     class MPTTMeta:
-        order_insertion_by = ['created_at']
+        order_insertion_by = ['-created_at']
         abstract = True
 
 
@@ -143,7 +146,7 @@ class CourseComment(Comment):
     parent = TreeForeignKey('self', null=True, blank=True, related_name='children', db_index=True, on_delete=models.PROTECT)
     course = models.ForeignKey(Course, on_delete=models.CASCADE, related_name='comments')
 
-    class Meta:
+    class Meta(Comment.Meta):
         verbose_name = 'Комментарий курса'
         verbose_name_plural = 'Комментарии курсов'
 
@@ -152,6 +155,6 @@ class LessonComment(Comment):
     parent = TreeForeignKey('self', null=True, blank=True, related_name='children', db_index=True, on_delete=models.PROTECT)
     lesson = models.ForeignKey(Lesson, on_delete=models.CASCADE, related_name='comments')
 
-    class Meta:
+    class Meta(Comment.Meta):
         verbose_name = 'Комментарий урока'
         verbose_name_plural = 'Комментарии уроков'

apps/course/templates/course/blocks/comment.html

@@ -1,6 +1,6 @@
 {% load static %}
 
-<div class="questions__item {% if node.is_child_node %}questions__item_reply{% endif %}">
+<div id="question__{{ node.id }}" class="questions__item {% if node.is_child_node %}questions__item_reply{% endif %}">
   {% if node.author.photo %}
   <div class="questions__ava ava">
     <img class="ava__pic" src="{{ node.author.photo.url }}">
@@ -19,7 +19,9 @@
       <div class="questions__content">{{ node.content }}</div>
     </div>
     <div class="questions__foot">
-      <button class="questions__action">ОТВЕТИТЬ</button>
+      {% if user.is_authenticated %}
+      <button class="questions__action question__reply-button" data-reply-id="{{ node.id }}">ОТВЕТИТЬ</button>
+      {% endif %}
     </div>
   </div>
 </div>

apps/course/templates/course/course.html

@@ -195,14 +195,25 @@
 
     <div class="title">Задавайте вопросы:</div>
     <div class="questions">
-      <div class="questions__form">
-        <div class="questions__ava ava"><img class="ava__pic" src="{% static 'img/user.jpg' %}"></div>
-        <div class="questions__wrap">
-          <div class="questions__field"><textarea class="questions__textarea" placeholder="Спросите автора курса интересующие вас вопросы"></textarea></div><button class="questions__btn btn btn_light">ОТПРАВИТЬ</button></div>
-      </div>
       <div class="questions__list">
           {% include "./blocks/comments.html" with object=course %}
       </div>
+      <form class="questions__form" method="post" action="{% url 'coursecomment' course_id=course.id %}">
+        <input type="hidden" name="reply_id">
+        <div class="questions__ava ava"><img class="ava__pic" src="{% static 'img/user.jpg' %}"></div>
+        <div class="questions__wrap">
+          {% if user.is_authenticated %}
+          <div class="questions__reply-info">В ответ на <a
+              href="" class="questions__reply-anchor">этот комментарий</a>. <a href="#" class="questions__reply-cancel grey-link">Отменить</a></div>
+          <div class="questions__field"><textarea class="questions__textarea"
+                                                  placeholder="Спросите автора курса интересующие вас вопросы"></textarea>
+          </div>
+          <button class="questions__btn btn btn_light">ОТПРАВИТЬ</button>
+          {% else %}
+          <div>Только зарегистрированные пользователи могут оставлять комментарии.</div>
+          {% endif %}
+        </div>
+      </form>
     </div>
   </div>
 </div>

web/build/css/app.css

@@ -1578,6 +1578,17 @@ a.btn {
   max-height: 277px;
 }
 
+a.grey-link {
+  color: #A7A7A7;
+  border-bottom: 1px #ccc solid;
+  font-size: 14px;
+}
+
+a.grey-link:hover {
+  color: #000;
+  border-bottom: 1px #545454 solid;
+}
+
 .game {
   position: relative;
   padding: 70px 0 80px;
@@ -3074,9 +3085,9 @@ a.btn {
 }
 
 .questions__form {
-  margin-bottom: 40px;
+  margin-top: 40px;
-  padding-bottom: 20px;
+  padding-top: 20px;
-  border-bottom: 1px solid #E6E6E6;
+  border-top: 1px solid #E6E6E6;
 }
 
 .questions__item:not(:last-child) {
@@ -3087,6 +3098,11 @@ a.btn {
   padding-left: 80px;
 }
 
+.questions__reply-info {
+  display: none;
+  margin-bottom: 10px;
+}
+
 .questions__item_reply .questions__details {
   margin-bottom: 10px;
   padding: 20px;
@@ -3118,7 +3134,7 @@ a.btn {
 .questions__textarea {
   display: block;
   width: 100%;
-  height: 44px;
+  height: 70px;
   padding: 11px 15px;
   border-radius: 2px;
   font-size: 16px;

web/src/js/app.js

@@ -7,8 +7,6 @@ import "./modules/search";
 import "./modules/toggle";
 import "./modules/auth";
 import "./modules/select";
-// import "./modules/datepicker";
 import "./modules/tabs";
 import "./modules/popup";
-
+import "./modules/comments";
-import "./modules/courses";

web/src/js/modules/comments.js

@@ -0,0 +1,60 @@
+import $ from 'jquery';
+
+$(document).ready(function () {
+    // Обработчик отправки комментария. Нам не важно, комментарий к курсу или к уроку - URL берется из action формы
+    $('form.questions__form').on('submit', function (e) {
+        e.preventDefault();
+
+        const submitButton = $(this).find('button.questions__action');
+        const replyToInput = $(this).find('input[name=reply_id]');
+        const replyToValue = replyToInput.val() ? parseInt(replyToInput.val()) : 0;
+        const commentTextarea = $(this).find('textarea.questions__textarea');
+        commentTextarea.attr('disabled', 'disabled');
+        submitButton.attr('disabled', 'disabled');
+
+        $.ajax($(this).attr('action'), {
+            method: 'post',
+            data: {
+                reply_id: replyToValue,
+                comment: commentTextarea.val(),
+            }
+        })
+            .done(function (data) {
+                console.log(data);
+                if (data.success === true) {
+                    if (replyToValue > 0) {
+                        $(`#question__${replyToValue}`).after(data.comment);
+                    } else {
+                        $('.questions__list').append(data.comment);
+                    }
+
+                    commentTextarea.val('');
+                }
+            })
+            .fail(function (xhr) {
+
+            })
+            .always(function () {
+                commentTextarea.removeAttr('disabled');
+                submitButton.removeAttr('disabled');
+            });
+    });
+
+    // Обработчик кнопки "Ответить"
+    $('.questions__list').on('click', 'button.question__reply-button', function () {
+        const replyId = $(this).attr('data-reply-id');
+        const form = $('form.questions__form');
+        form.find('input[name=reply_id]').val(replyId);
+        form.find('.questions__reply-anchor').attr('href', `#question__${replyId}`);
+        form.find('.questions__reply-info').show();
+    });
+
+    // Обработчик отмены комментирования в ответ на комментарий
+    $('.questions__reply-cancel').on('click', function (e) {
+        e.preventDefault();
+
+        const form = $('form.questions__form');
+        form.find('input[name=reply_id]').val(0);
+        form.find('.questions__reply-info').hide();
+    });
+});

web/src/sass/_common.sass

@@ -1184,6 +1184,14 @@ a.btn
     +m
       max-height: 185px 
 
+a.grey-link
+  color: #A7A7A7
+  border-bottom: 1px #ccc solid
+  font-size: 14px
+  &:hover
+    color: #000
+    border-bottom: 1px #545454 solid
+
 .game
   position: relative
   padding: 70px 0 80px
@@ -2395,9 +2403,9 @@ a.btn
   &__item
     display: flex
   &__form
-    margin-bottom: 40px
+    margin-top: 40px
-    padding-bottom: 20px
+    padding-top: 20px
-    border-bottom: 1px solid $border
+    border-top: 1px solid $border
   &__item
     &:not(:last-child)
       margin-bottom: 25px
@@ -2405,6 +2413,9 @@ a.btn
       padding-left: 80px
       +m
         padding: 0
+  &__reply-info
+    display: none
+    margin-bottom: 10px
   &__item_reply &__details
     margin-bottom: 10px
     padding: 20px
@@ -2432,7 +2443,7 @@ a.btn
   &__textarea
     display: block
     width: 100%
-    height: 44px
+    height: 70px
     padding: 11px 15px
     border-radius: 2px 
     font-size: 16px