From 025af009002c5473bf184ce7387bc6e874239d9d Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Fri, 25 Mar 2016 17:54:53 +0800
Subject: [PATCH] [group discussion] added 'load more'

---
 media/css/seahub.css                          |  5 ++
 seahub/api2/endpoints/group_discussions.py    |  7 ++-
 seahub/templates/libraries.html               |  1 +
 .../app/collections/group-discussions.js      |  7 +++
 static/scripts/app/views/group-discussions.js | 47 +++++++++++++++++++
 5 files changed, 65 insertions(+), 2 deletions(-)

diff --git a/media/css/seahub.css b/media/css/seahub.css
index 5e161a82d5..f7f46e15df 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -1267,6 +1267,11 @@ textarea:-moz-placeholder {/* for FF */
     text-align:center;
     margin:10px 0;
 }
+.load-more-discussion {
+    color:#eb8205;
+    cursor:pointer;
+    text-align:center;
+}
 /********** container ***********/
 #main, #footer {
     width:950px;
diff --git a/seahub/api2/endpoints/group_discussions.py b/seahub/api2/endpoints/group_discussions.py
index 23b18ad4b6..6f1e358f94 100644
--- a/seahub/api2/endpoints/group_discussions.py
+++ b/seahub/api2/endpoints/group_discussions.py
@@ -75,8 +75,11 @@ class GroupDiscussions(APIView):
                 "created_at": isoformat_timestr
             })
 
-        return HttpResponse(json.dumps(msgs), status=200,
-                            content_type=json_content_type)
+        return HttpResponse(json.dumps({
+            "msgs": msgs,
+            "current_page": page,
+            "page_num": paginator.num_pages,
+            }), status=200, content_type=json_content_type)
 
     @api_check_group
     def post(self, request, group_id, format=None):
diff --git a/seahub/templates/libraries.html b/seahub/templates/libraries.html
index 0c367b5df7..ec62655f3a 100644
--- a/seahub/templates/libraries.html
+++ b/seahub/templates/libraries.html
@@ -159,6 +159,7 @@
         </div>
         <div class="popover-con">
             <span class="loading-icon loading-tip"></span>
+            <p class="load-more-discussion hide js-load-more">{% trans "More..." %}</p>
             <ul id="group-discussion-list" class="hide"></ul>
             <p class="no-discussion-tip hide">{% trans "No discussion in this group yet." %}</p>
             <p class="error hide"></p>
diff --git a/static/scripts/app/collections/group-discussions.js b/static/scripts/app/collections/group-discussions.js
index 8a04e02c3c..9cd8852318 100644
--- a/static/scripts/app/collections/group-discussions.js
+++ b/static/scripts/app/collections/group-discussions.js
@@ -15,6 +15,13 @@ define([
 
         url: function() {
             return Common.getUrl({name: 'group_discussions', group_id: this.group_id});
+        },
+
+        parse: function(data) {
+            this.current_page = data.current_page;
+            this.page_num = data.page_num;
+
+            return data.msgs;
         }
 
     });
diff --git a/static/scripts/app/views/group-discussions.js b/static/scripts/app/views/group-discussions.js
index f68628c38f..c6a54fdd4a 100644
--- a/static/scripts/app/views/group-discussions.js
+++ b/static/scripts/app/views/group-discussions.js
@@ -22,6 +22,7 @@ define([
             this.$listContainer = this.$('#group-discussion-list');
             this.$emptyTip = this.$('.no-discussion-tip');
             this.$error = this.$('.error');
+            this.$loadMore = this.$('.js-load-more');
 
             var _this = this;
             $(window).resize(function() {
@@ -44,6 +45,7 @@ define([
 
         events: {
             'click .close': 'hide',
+            'click .js-load-more': 'loadMore',
             'submit form': 'formSubmit'
         },
 
@@ -70,9 +72,15 @@ define([
                 this.collection.each(this.addOne, this);
                 this.$listContainer.show();
                 this.scrollConToBottom();
+                if (this.collection.current_page < this.collection.page_num) {
+                    this.$loadMore.show();
+                } else {
+                    this.$loadMore.hide();
+                }
             } else {
                 this.$emptyTip.show();
                 this.$listContainer.hide();
+                this.$loadMore.hide();
             }
         },
 
@@ -146,6 +154,45 @@ define([
             $input.focus();
         },
 
+        loadMore: function() {
+            var _this = this;
+
+            this.$loadMore.hide();
+            this.$loadingTip.show();
+
+            this.collection.fetch({
+                cache: false,
+                remove: false,
+                data: {
+                    'avatar_size': 64,
+                    'page': this.collection.current_page + 1
+                },
+                success: function(collection, response, opts) {
+                },
+                error: function(collection, response, opts) {
+                    var err_msg;
+                    if (response.responseText) {
+                        if (response['status'] == 401 || response['status'] == 403) {
+                            err_msg = gettext("Permission error");
+                        } else {
+                            err_msg = gettext("Error");
+                        }
+                    } else {
+                        err_msg = gettext('Please check the network.');
+                    }
+                    _this.$error.html(err_msg).show();
+                },
+                complete: function() {
+                    _this.$loadingTip.hide();
+                    if (_this.collection.current_page < _this.collection.page_num) {
+                        _this.$loadMore.show();
+                    } else {
+                        _this.$loadMore.hide();
+                    }
+                }
+            });
+        },
+
         formSubmit: function() {
             var _this = this;
             var content = $.trim(this.$('[name="message"]').val());