feat(forums): load topic content data

modules/core/client/app/trans-string-en.js

@@ -629,7 +629,8 @@
       LINK_EDIT: 'Edit',
       BTN_DELETE: '　Delete　 ',
       BTN_SUBMIT: 'Submit New Topic',
-      BTN_POST_NEW: 'Post New Topic',
+      BTN_POST_NEW_TOPIC: 'Post New Topic',
+      BTN_POST_NEW_REPLY: 'Post New Reply',
       ADD_SUCCESSFULLY: 'Forum added successfully',
       ADD_FAILED: 'Forum added failed',
       EDIT_SUCCESSFULLY: 'Forum edited successfully',

modules/core/client/app/trans-string-zh.js

@@ -629,7 +629,8 @@
       LINK_EDIT: '编辑',
       BTN_DELETE: '　删除　　',
       BTN_SUBMIT: ' 提交新话题 ',
-      BTN_POST_NEW: ' 发起新话题 ',
+      BTN_POST_NEW_TOPIC: ' 发起新话题 ',
+      BTN_POST_NEW_REPLY: ' 回复 ',
       ADD_SUCCESSFULLY: '版块添加成功',
       ADD_FAILED: '版块添加失败',
       EDIT_SUCCESSFULLY: '版块编辑成功',

modules/forums/client/controllers/forums-post.client.controller.js

@@ -15,6 +15,13 @@
     vm.user = Authentication.user;
     vm.forumPath = [];
 
+    /**
+     * If user is not signed in then redirect back home
+     */
+    if (!Authentication.user) {
+      $state.go('authentication.signin');
+    }
+
     /**
      * init
      */

modules/forums/client/controllers/forums-topic.client.controller.js

@@ -15,6 +15,13 @@
     vm.user = Authentication.user;
     vm.forumPath = [];
 
+    /**
+     * If user is not signed in then redirect back home
+     */
+    if (!Authentication.user) {
+      $state.go('authentication.signin');
+    }
+
     /**
      * init
      */
@@ -41,5 +48,15 @@
 
     };
 
+    /**
+     * getTopicContent
+     * @param t
+     * @returns {*}
+     */
+    vm.getTopicContent = function (t) {
+      if (t) {
+        return marked(t.content, {sanitize: true});
+      }
+    };
   }
 }());

modules/forums/client/controllers/forums-view.client.controller.js

@@ -15,6 +15,13 @@
     vm.user = Authentication.user;
     vm.forumPath = [];
 
+    /**
+     * If user is not signed in then redirect back home
+     */
+    if (!Authentication.user) {
+      $state.go('authentication.signin');
+    }
+
     /**
      * init
      */

modules/forums/client/controllers/forums.client.controller.js

@@ -14,6 +14,13 @@
     vm.forumsConfig = MeanTorrentConfig.meanTorrentConfig.forumsConfig;
     vm.user = Authentication.user;
 
+    /**
+     * If user is not signed in then redirect back home
+     */
+    if (!Authentication.user) {
+      $state.go('authentication.signin');
+    }
+
     /**
      * init
      */

modules/forums/client/less/forum.less

@@ -204,6 +204,144 @@
     }
 }
 
+.reply-list {
+    .pagination {
+        margin-bottom: 5px;
+        margin-top: 10px;
+    }
+    .table-category {
+        border-radius: 6px;
+    }
+    table {
+        border-spacing: 0;
+        border-collapse: inherit;
+        border: solid 3px @brand-primary;
+        thead {
+            background-color: @brand-primary;
+            border: solid 1px @brand-primary;
+            color: #efefef;
+            tr {
+                th {
+                    border: solid 2px @brand-primary;
+                    padding: 13px 10px;
+                    .count-info {
+                        font-size: 12px;
+                        font-weight: normal;
+                    }
+                }
+            }
+        }
+        tbody {
+            tr {
+                td {
+                    border-top: none;
+                    white-space: normal !important;
+                    border-bottom: solid 2px lighten(@brand-primary, 45%);
+                }
+            }
+            tr:last-child {
+                td {
+                    border-bottom: none;
+                }
+            }
+        }
+    }
+}
+
+.reply-item {
+    .reply-wrapper {
+        padding-left: 60px;
+        margin: 20px 30px;
+        .reply-comment {
+            position: relative;
+            background-color: #fff;
+            border: 1px solid #d1d5da;
+            border-radius: 3px;
+            &::before {
+                position: absolute;
+                top: 11px;
+                right: 100%;
+                left: -16px;
+                display: block;
+                width: 0;
+                height: 0;
+                pointer-events: none;
+                content: " ";
+                border-color: transparent;
+                border-style: solid solid outset;
+
+                border-width: 8px;
+                border-right-color: #d1d5da;
+            }
+            &::after {
+                position: absolute;
+                top: 11px;
+                right: 100%;
+                left: -16px;
+                display: block;
+                width: 0;
+                height: 0;
+                pointer-events: none;
+                content: " ";
+                border-color: transparent;
+                border-style: solid solid outset;
+
+                margin-top: 1px;
+                margin-left: 2px;
+                border-width: 7px;
+                border-right-color: lighten(@comment-background-default, 2%);
+            }
+            .reply-comment-header {
+                padding-right: 15px;
+                padding-left: 15px;
+                color: #586069;
+                background-color: lighten(@comment-background-default, 2%);
+                border-bottom: 1px dashed #d1d5da;
+                border-top-left-radius: 3px;
+                border-top-right-radius: 3px;
+                min-height: 42px;
+                .reply-comment-header-text {
+                    max-width: 70%;
+                    padding-top: 10px;
+                    padding-bottom: 10px;
+                    .user-ud-text {
+                        font-size: 12px;
+                        color: lighten(@gray-base, 60%);
+                    }
+                }
+                .reply-comment-header-time-text {
+                    font-size: 12px;
+                    color: lighten(@gray-base, 60%);
+                    margin-left: 5px;
+                }
+            }
+            .reply-comment-body {
+                padding-right: 15px;
+                padding-left: 15px;
+                min-height: 42px;
+                .reply-comment-body-text {
+                    padding-top: 10px;
+                }
+                .reply-comment-body-edited-text {
+                    font-size: 12px;
+                    color: lighten(@gray-base, 60%);
+                    margin-right: 15px;
+                }
+            }
+        }
+        .reply-avatar {
+            img {
+                cursor: pointer;
+                float: left;
+                margin-left: -60px;
+                border-radius: 3px;
+                height: 44px;
+                width: 44px;
+            }
+        }
+    }
+}
+
 .add-moderator-popover {
     max-width: 250px;
     max-height: 150px;

modules/forums/client/views/topic.client.view.html

@@ -36,11 +36,76 @@
             </ol>
         </div>
 
-        <div class="post-view">
+
+        <div>
             <div class="row">
-                <div class="col-md-8">
+                <div class="col-sm-12 col-md-9">
+                    <ul uib-pagination boundary-links="true" max-size="8" items-per-page="vm.itemsPerPage" total-items="vm.filterLength"
+                        ng-model="vm.currentPage"
+                        ng-change="vm.pageChanged()"
+                        first-text="{{ 'PAGE_TEXT_FIRST' | translate}}" previous-text="{{ 'PAGE_TEXT_PREVIOUS' | translate}}"
+                        next-text="{{ 'PAGE_TEXT_NEXT' | translate}}" last-text="{{ 'PAGE_TEXT_LAST' | translate}}">
+                    </ul>
+                </div>
+                <div class="col-sm-12 col-md-3">
+                    <a class="btn btn-success margin-top-10 margin-bottom-10 pull-right"
+                       href="#" ng-click="vm.scrollToReply=true;">{{'FORUMS.BTN_POST_NEW_REPLY' | translate}}</a>
                 </div>
             </div>
         </div>
+
+        <div class="table-responsive table-category">
+            <table class="table table-valign-middle">
+                <thead>
+                    <tr>
+                        <th>
+                            <span>{{vm.topic.title}}</span>
+
+                            <div class="count-info pull-right xs-hide sm-hide">
+                                <span>{{'FORUMS.FIELDS.VIEWS' | translate}}: {{vm.topic.viewCount}}</span>,
+                                <span>{{'FORUMS.FIELDS.REPLIES' | translate}}: {{vm.topic.replyCount}}</span>
+                            </div>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <div class="reply-item">
+                                <div class="reply-wrapper">
+                                    <a class="reply-avatar">
+                                        <img title="{{vm.topic.user.displayName}}" ng-src="/{{vm.topic.user.profileImageURL}}">
+                                    </a>
+
+                                    <div class="reply-comment">
+                                        <div class="reply-comment-header">
+                                            <div class="reply-comment-header-text">{{vm.topic.user.displayName}}
+                                                <span class="user-ud-text">
+                                                    (<span class="glyphicon glyphicon-arrow-up torrent-up"></span>{{vm.topic.user.uploaded | bytes}}
+                                                    <span class="glyphicon glyphicon-arrow-down torrent-down"></span>{{vm.topic.user.downloaded | bytes}}
+                                                    )
+                                                </span>
+                                                <span message-to="vm.topic.user" to-class="message-to-icon"></span>
+                                                <span class="reply-comment-header-time-text">{{vm.topic.createdAt | date:'yyyy-MM-dd HH:mm:ss'}}</span>
+                                            </div>
+                                        </div>
+                                        <div class="reply-comment-body">
+                                            <div class="reply-comment-body-text" ng-bind-html="vm.getTopicContent(vm.topic);"></div>
+                                            <div class="row text-right" ng-show="vm.topic.updatedAt">
+                                                <p class="reply-comment-body-edited-text">[ {{vm.topic.updatedBy}} {{ 'COMMENT_EDITED_INFO' | translate}} {{vm.topic.updatedAt | date:'yyyy-MM-dd HH:mm:ss'}} ]</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <div scroll-if="vm.scrollToReply==true">
+
     </div>
 </section>

modules/forums/client/views/view.client.view.html

@@ -46,7 +46,7 @@
                 </div>
                 <div class="col-sm-12 col-md-3">
                     <a class="btn btn-success margin-top-10 margin-bottom-10 pull-right"
-                       ui-sref="forums.post({forumId: vm.forum._id})">{{'FORUMS.BTN_POST_NEW' | translate}}</a>
+                       ui-sref="forums.post({forumId: vm.forum._id})">{{'FORUMS.BTN_POST_NEW_TOPIC' | translate}}</a>
                 </div>
             </div>
         </div>

modules/forums/server/models/topic.server.model.js

@@ -83,20 +83,24 @@ var TopicSchema = new Schema({
   _attach: [AttachSchema],
   _scoreList: [ScoreSchema],
 
-  lastUser: {
-    type: Schema.Types.ObjectId,
-    ref: 'User'
-  },
   isTop: {
     type: Number,
     default: 0
   },
+  lastUser: {
+    type: Schema.Types.ObjectId,
+    ref: 'User'
+  },
   lastReplyAt: {
     type: Date
   },
   updatedAt: {
     type: Date
   },
+  updatedBy: {
+    type: Schema.Types.ObjectId,
+    ref: 'User'
+  },
   createdAt: {
     type: Date,
     default: Date.now

modules/messages/client/directives/message-to.client.directive.js

@@ -16,26 +16,28 @@
 
     function link(scope, element, attrs) {
       scope.$watch(attrs.messageTo, function (s) {
-        var user = s;
-        var to = user._id + '|' + user.displayName;
-        var title = $translate.instant('MESSAGE_TO_ICON_TITLE');
-        var e = $compile('<a href="#"><i class="glyphicon glyphicon-envelope" ng-click="$event.stopPropagation();" ui-sref="messages.send({to: \'' + to + '\'})"></i></a>')(scope);
+        if(s) {
+          var user = s;
+          var to = user._id + '|' + user.displayName;
+          var title = $translate.instant('MESSAGE_TO_ICON_TITLE');
+          var e = $compile('<a href="#"><i class="glyphicon glyphicon-envelope" ng-click="$event.stopPropagation();" ui-sref="messages.send({to: \'' + to + '\'})"></i></a>')(scope);
 
-        e.attr('title', title);
+          e.attr('title', title);
 
-        if (attrs.toClass) {
-          e.addClass(attrs.toClass);
-        } else {
-          e.css('font-size', '12px');
-          e.css('margin-left', '10px');
-        }
-
-        if (element[0].firstChild) {
-          if (element[0].firstChild.nodeName === '#text') {
-            angular.element(element[0].firstChild).after(e);
+          if (attrs.toClass) {
+            e.addClass(attrs.toClass);
+          } else {
+            e.css('font-size', '12px');
+            e.css('margin-left', '10px');
+          }
+
+          if (element[0].firstChild) {
+            if (element[0].firstChild.nodeName === '#text') {
+              angular.element(element[0].firstChild).after(e);
+            }
+          } else {
+            angular.element(element[0]).append(e);
           }
-        } else {
-          angular.element(element[0]).append(e);
         }
       });
     }