LIL-559

api/v1/views.py

@@ -454,6 +454,7 @@ class ObjectCommentsViewSet(ExtendedModelViewSet):
     queryset = Comment.objects.all()
     serializer_class = CommentCreateSerializer
     permission_classes = (IsAuthorObjectOrAdmin,)
+    ordering_fields = ('update_at', )
 
     def get_queryset(self):
         queryset = self.queryset
@@ -470,7 +471,7 @@ class ObjectCommentsViewSet(ExtendedModelViewSet):
             queryset = queryset.filter(deactivated_at__isnull=True)
         elif is_deactivated == '2':
             queryset = queryset.filter(deactivated_at__isnull=False)
-        return queryset.order_by('update_at')
+        return queryset
 
     def get_serializer_class(self):
         if self.request.method == 'POST':

apps/course/templates/course/lesson.html

@@ -118,13 +118,7 @@
   <div class="section__center center center_sm">
     <div class="title">Задавайте вопросы:</div>
     <div class="questions" id="comments_block">
-      <comments obj-type="lesson" obj-id="{{ lesson.id }}" :is-chat="true"
-                {% if request.user.is_authenticated %}
-                user-id="{{ request.user.id }}" user-photo="{{ request.user.photo.url }}"
-                {% endif %}
-                default-author-picture="{% static 'img/user_default.jpg' %}"
-                access-token="{{ request.user.auth_token }}"></comments>
-
+      <comments obj-type="lesson" obj-id="{{ lesson.id }}"></comments>
     </div>
   </div>
 </div>

apps/school/templates/school/livelesson_detail.html

@@ -21,7 +21,8 @@
           mozallowfullscreen allowfullscreen>
         </iframe>
         <span>Если видео не загрузилось, - уменьшите качество видео или <a href="#" onclick="location.reload();">обновите страницу</a></span>
-        <iframe class="lesson__chat_frame" src="https://vimeo.com/live-chat/{{ livelesson.stream_index }}" frameborder="0"></iframe>
+        <!--<iframe class="lesson__chat_frame" src="https://vimeo.com/live-chat/{{ livelesson.stream_index }}" frameborder="0"></iframe>-->
+        <comments obj-type="live-lesson" obj-id="{{ livelesson.id }}" :is-chat="true"></comments>
         {% else %}
           {% if livelesson.cover %}
           <img class="video__pic" src="{{ livelesson.cover.image.url }}"/>

web/src/components/Comment.vue

@@ -9,7 +9,7 @@
         </div>
 
         <div v-if="! comment.author.photo" class="questions__ava ava">
-          <img class="ava__pic" :src="store.defaultUserPhoto">
+          <img class="ava__pic" :src="$root.store.defaultUserPhoto">
         </div>
 
         <div class="questions__wrap">
@@ -24,13 +24,13 @@
             </div>
           </div>
           <div class="questions__foot" v-if="! controller.isChat">
-            <button @click="controller.reply(comment)" v-if="store.user.id" class="questions__action question__reply-button">ОТВЕТИТЬ</button>
-            <button @click="controller.remove(comment)" v-if="store.user.id == comment.author.id" class="questions__action question__reply-button">УДАЛИТЬ</button>
+            <button @click="controller.reply(comment)" v-if="$root.store.user.id" class="questions__action question__reply-button">ОТВЕТИТЬ</button>
+            <button @click="controller.remove(comment)" v-if="$root.store.user.id == comment.author.id" class="questions__action question__reply-button">УДАЛИТЬ</button>
           </div>
         </div>
       </div>
     </div>
-    <comment-form v-if="store.user.id && !controller.$data.isChat && controller.$data.replyTo && controller.$data.replyTo.id == comment.id"
+    <comment-form v-if="$root.store.user.id && !controller.$data.isChat && controller.$data.replyTo && controller.$data.replyTo.id == comment.id"
                   :controller="controller"></comment-form>
 
     <ul v-if="comment.children" v-for="(node, index) in comment.children" :key="index">
@@ -48,11 +48,6 @@
     export default {
         name: 'comment',
         props: ['controller', 'comment',],
-        data() {
-            return {
-              store: window.VUE_STORE,
-            }
-        },
         computed: {
             isHeart(){
                 return this.comment.content === '❤';

web/src/components/CommentForm.vue

@@ -1,7 +1,7 @@
 <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">
+      <img class="ava__pic" :src="$root.store.user.photo || $root.store.defaultUserPhoto">
     </div>
     <div class="questions__wrap">
       <div class="questions__field">
@@ -11,9 +11,15 @@
       <div class="questions__form-foot">
         <button v-if="controller.isChat" class="questions__btn"
                 @click="controller.addHeart"><svg class="icon questions__heart"><use xlink:href="/static/img/sprite.svg#icon-like"></use></svg></button>
-        <button class="questions__btn"  :class="{'btn btn_light': ! controller.isChat}" @click="add">ОТПРАВИТЬ</button>
-        <button v-show="controller.$data.replyTo" class="questions__btn" :class="{'btn btn_light': ! controller.isChat}"
-                @click="controller.cancelReply">ОТМЕНИТЬ</button>
+        <button class="questions__btn"  :class="{'btn btn_light': ! controller.isChat}" @click="add">
+          <span :class="{'mobile-hide': controller.isChat }">ОТПРАВИТЬ</span>
+          <span class="mobile-show" v-if="controller.isChat">
+            <svg class="icon questions__send-icon"><use xlink:href="/static/img/sprite.svg#icon-plus"></use></svg>
+          </span>
+        </button>
+        <button v-show="! controller.isChat && controller.$data.replyTo" class="questions__btn" @click="controller.cancelReply">
+          <span>ОТМЕНИТЬ</span>
+        </button>
       </div>
     </div>
   </div>
@@ -29,7 +35,6 @@
           data() {
               return {
                   content: '',
-                  store: window.VUE_STORE,
               }
           },
           methods: {

web/src/components/Comments.vue

@@ -7,7 +7,7 @@
         </li>
       </ul>
     </div>
-    <comment-form v-if="store.user.id && ! replyTo" :controller="controller"></comment-form>
+    <comment-form v-if="$root.store.user.id && ! replyTo" :controller="controller"></comment-form>
   </div>
 </template>
 
@@ -25,7 +25,6 @@
                 replyTo: null,
                 nodes: [],
                 controller: this,
-                store: window.VUE_STORE,
                 flatComments: {},
             }
         },
@@ -44,9 +43,9 @@
                 this.loading = true;
                 let request = api.addObjComment(this.objId, this.objType, {
                     content: content,
-                    author: this.store.user.id,
+                    author: this.$root.store.user.id,
                     parent: this.replyTo && this.replyTo.id,
-                }, this.store.accessToken);
+                });
                 request.then((response) => {
                     vm.loading = false;
                     vm.onAdd(response.data);
@@ -63,7 +62,7 @@
                 }
                 let vm = this;
                 this.loading = true;
-                let request = api.removeObjComment(comment.id, this.store.accessToken);
+                let request = api.removeObjComment(comment.id);
                 request.then((response) => {
                     vm.loading = false;
                     vm.onRemove(comment);
@@ -73,11 +72,12 @@
                 if(this.flatComments[comment.id]){
                     return;
                 }
+                const method = this.isChat ? 'push' : 'unshift';
                 if(comment.parent){
-                    this.flatComments[comment.parent].children.unshift(comment);
+                    this.flatComments[comment.parent].children[method](comment);
                 }
                 else{
-                    this.nodes.unshift(comment);
+                    this.nodes[method](comment);
                 }
                 this.flatComments[comment.id] = comment;
             },
@@ -114,7 +114,7 @@
         mounted() {
             let vm = this;
             this.loading = true;
-            let request = api.getObjComments(this.objId, this.objType, this.store.accessToken);
+            let request = api.getObjComments(this.objId, this.objType, this.isChat ? 'update_at' : '-update_at');
             request
                 .then((response) => {
                     vm.loading = false;

web/src/js/modules/api.js

@@ -510,31 +510,32 @@ export const api = {
             }
         });
     },
-    getObjComments: (objId, objType, accessToken) => {
+    getObjComments: (objId, objType, ordering) => {
         return api.get('/api/v1/obj-comments/', {
             params: {
               obj_id: objId,
               obj_type: objType,
+              ordering: ordering || '',
             },
             headers: {
-                'Authorization': `Token ${accessToken}`,
+                'Authorization': `Token ${window.LIL_STORE.accessToken}`,
             }
         });
     },
-    addObjComment: (objId, objType, commentJson, accessToken) => {
+    addObjComment: (objId, objType, commentJson) => {
         let data = commentJson;
         data.obj_id = objId;
         data.obj_type = objType;
         return api.post('/api/v1/obj-comments/', data, {
             headers: {
-                'Authorization': `Token ${accessToken}`,
+                'Authorization': `Token ${window.LIL_STORE.accessToken}`,
             }
         });
     },
-    removeObjComment: (commentId, accessToken) => {
+    removeObjComment: (commentId) => {
         return api.delete(`/api/v1/obj-comments/${commentId}/`, {
             headers: {
-                'Authorization': `Token ${accessToken}`,
+                'Authorization': `Token ${window.LIL_STORE.accessToken}`,
             }
         });
     }

web/src/sass/_common.sass

@@ -2819,10 +2819,12 @@ a.grey-link
   &__item
     &:not(:last-child)
       margin-bottom: 25px
+    +m
+      padding: 10px 0
     &_reply
       padding-left: 80px
       +m
-        padding: 0
+        padding: 10px 0
   &__reply-info
     display: none
     margin-bottom: 10px
@@ -2863,6 +2865,8 @@ a.grey-link
   &__btn
     margin: 0 15px;
     border-radius: 20px
+    +m
+      margin-left: 0
   &__details
     margin-bottom: 5px
   &__head,
@@ -2881,6 +2885,7 @@ a.grey-link
   &__author
     margin-right: 15px
   &__date
+    font-size: 10px
     display: inline-block
   &__foot
     height: 20px
@@ -2891,36 +2896,51 @@ a.grey-link
     fill: #d40700
     width: 28px
     height: 28px
+  &__send-icon
+    fill: $gray
+    width: 20px
+    height: 20px
   &--heart
     &__content
-        font-size: 24px;
-        color: #d40700;
-
+      font-size: 24px;
+      color: #d40700;
   &--chat &__items
-        background: white;
-        border: 1px solid #ccc;
-        padding: 10px;
-        border-radius: 5px;
-        max-height: 400px;
-        overflow: auto;
+    background: white;
+    border: 1px solid #ccc;
+    padding: 10px;
+    border-radius: 5px;
+    max-height: 400px;
+    overflow: auto;
+    +m
+      max-height: inherit
+  &--chat &__item, &--chat &__item_reply
+    +m
+      padding: 0
   &--chat &__ava
-        height: 40px
-        margin-right: 10px
-        flex: 0 0 40px
+    height: 40px
+    margin-right: 10px
+    flex: 0 0 40px
+    +m
+      display: none
   &--chat &__content
-        margin-bottom: 10px
+    margin-bottom: 10px
   &--chat &__wrap
-      display: flex
-      flex: 0 0 calc(100% - 60px);
+    display: flex
+    flex: 0 0 calc(100% - 60px);
+    +m
+      flex: 1
   &--chat &__field
-      margin-bottom: 0;
-      flex: 0 0 calc(100% - 160px);
+    margin-bottom: 0;
+    flex: 0 0 calc(100% - 160px);
+    +m
+      flex: 1
   &--chat &__btn
-      font-weight: 600;
-      text-shadow: 1px 1px #fff;
+    font-weight: 600;
+    text-shadow: 1px 1px #fff;
+    +m
+      margin: 0 0 0 15px;
   &--chat &__form-foot
-      display: flex;
-
+    display: flex;
 
 .share
   &__title
@@ -3702,6 +3722,11 @@ a.grey-link
   +m
     display: none
 
+.mobile-show
+  display: none
+  +m
+    display: block
+
 .school
   display: flex
   position: relative