[discuss to grp] use ajax, show discusstions & replies

* manually merged some code from zx's branch 'file_discuss'

templates/snippets/bottom_bar.html

@@ -6,30 +6,103 @@ $('#main-panel').css('margin-bottom', $('#bottom-bar').outerHeight() + 2);
 $('#footer').addClass('hide');
 
 {% if groups %}
+function getAndHandleDiscussions(data_html) {
+    $('#discussions-to-grp').html(data_html).css({'max-height':$(window).height() * 0.9 - $('#bottom-bar').height() - $('#discuss-to-group-caret').height() - $('#discuss-to-group-form').outerHeight()}).removeClass('hide');
+    {% include 'group/msg_js.html' %}
+}
 $('#discuss').click(function() {
-    var form = $('#discuss-to-group-form');
+    var popup = $('#discuss-to-group');
     var caret = $('#discuss-to-group-caret');
-    if (form.hasClass('hide')) {
-        form.removeClass('hide');
+    if (popup.hasClass('hide')) {
+        popup.removeClass('hide');
         caret.removeClass('hide');
         caret.css({'left': $(this).offset().left});
+        $.ajax({
+            url:$('#discuss-to-group-form').attr('action'),
+            dataType: 'json',
+            contentType: 'application/json; charset=utf-8',
+            data: {
+                'repo_id': '{{ repo.id }}',
+                'path': '{{ path }}'
+            },
+            success: function(data) {
+                getAndHandleDiscussions(data['html']);
+            },
+            error: function(jqXHR, textStatus, errorThrown) {
+                var err_str = ''; 
+                if (jqXHR.responseText) {
+                    err_str = $.parseJSON(jqXHR.responseText).err;
+                    feedback(err_str, 'error');
+                }
+            }   
+        });
     } else {
-        form.addClass('hide');
+        popup.addClass('hide');
         caret.addClass('hide');
     }
 });
 $(document).click(function(e) {
     var target = e.target || event.srcElement;
-    if (!$('#discuss, #discuss-to-group-form, #discuss-to-group-caret').is(target) && !($('#discuss-to-group-form, #discuss-to-group-caret').find('*').is(target))) {
-        $('#discuss-to-group-form, #discuss-to-group-caret').addClass('hide');
+    if (!$('#discuss, #discuss-to-group, #discuss-to-group-caret').is(target) && !($('#discuss-to-group, #discuss-to-group-caret').find('*').is(target))) {
+        $('#discuss-to-group, #discuss-to-group-caret').addClass('hide');
     }   
 });
 
 $('#discuss-submit').click(function() {
-    if (!$.trim($('#discuss-to-group-form .input').val())) {
-        apply_form_error('discuss-to-group-form', '{% trans "Please input a discussion." %}');
+    var form = $('#discuss-to-group-form'),
+        form_id = form.attr('id');
+    
+    if (form.find('.checkbox-checked').length == 0) {
+        apply_form_error(form_id, '{% trans "Please select at least 1 group." %}');
         return false;   
     }
+
+    if (!$.trim($('#discuss-to-group-form .input').val())) {
+        apply_form_error(form_id, '{% trans "Please input a discussion." %}');
+        return false;   
+    }
+    form.find('.error').addClass('hide');    
+
+    var groups = [];
+    form.find('.checkbox-checked .checkbox-orig').each(function() {
+        groups.push($(this).val());
+    });
+
+    $.ajax({
+        url: form.attr('action'),
+        type: 'POST',
+        dataType: 'json',
+        contentType: 'application/json; charset=utf-8',
+        beforeSend: prepareCSRFToken,
+        traditional: true,
+        data: {
+            'groups': groups,
+            'message': form.find('.input').val(),
+            'repo_id': '{{ repo.id }}',
+            'path': '{{ path }}',
+            'attach_type': form.find('[name="attach_type"]').val()
+        },
+        success: function(data) {
+            if(data['success']) {
+                feedback(data['success'], 'success');
+                getAndHandleDiscussions(data['html']);
+                form.find('.input').val('');
+            }
+            if(data['err']) {
+                feedback(data['err'], 'error');
+            }
+        },
+        error: function(jqXHR, textStatus, errorThrown) {
+            var err_str = ''; 
+            if (jqXHR.responseText) {
+                err_str = $.parseJSON(jqXHR.responseText).err;
+            } else {
+                err_str = '{% trans "Failed. Please check the network." %}';
+            }   
+            apply_form_error(form_id, err_str); 
+        }   
+    });
+    return false;
 });
 
 $('#main').append('<div id="to-group" class="hide">{{ repo_group_str|escapejs }}</div><div id="to-group-caret" class="hide"><div class="outer-caret"><div class="inner-caret"></div></div></div>');
@@ -64,5 +137,5 @@ $(document).click(function(e) {
 $(function() {
     var btn_height = $('#bottom-bar button').outerHeight();
     $('#discuss-to-group-caret, #to-group-caret, #comment-caret').css({'bottom': btn_height + 1});
-    $('#file-comment, #to-group, #discuss-to-group-form').css({'bottom': btn_height + 1 + $('.outer-caret').outerHeight()});
+    $('#file-comment, #to-group, #discuss-to-group').css({'bottom': btn_height + 1 + $('.outer-caret').outerHeight()});
 });

templates/snippets/discussion_list.html

@@ -0,0 +1,46 @@
+{% load i18n seahub_tags avatar_tags%}
+{% load url from future %}
+
+{% for msg in messages %}
+<li class="msg ovhd">
+<a class="pic fleft" href="{% url 'user_profile' msg.from_email|email2id %}">{% avatar msg.from_email 48 %}</a>
+<div class="txt">
+    <div class="msg-main">
+        <a href="{% url 'user_profile' msg.from_email|email2id %}" class="fleft">{{ msg.from_email|email2nickname }}</a>
+        <span class="time">{{ msg.timestamp|translate_seahub_time }}</span>
+        <p class="msg-con">{{ msg.message|seahub_urlize|find_at|linebreaksbr }}</p>
+        <span class="say"></span>
+    </div>
+    <div class="msg-op">
+        <div class="replies-op{% if msg.reply_cnt < 4 %} hide{% endif %}" data-rstatus="hide">
+            <span class="unfold-replies" data-url="{% url 'msg_reply' msg.id %}">{% blocktrans with amount=msg.reply_cnt %}{{ amount }} replies{% endblocktrans %}</span>
+            <span class="fold-replies hide">{% trans "Hide replies" %}</span>
+        </div>
+        {% if msg.reply_cnt == 0 %}
+        <ul class="reply-list hide"></ul>
+        {% else %}
+        <ul class="reply-list">
+            {% for r in msg.replies %}
+            <li class="reply w100 ovhd">
+            {% with id=r.from_email|email2id name=r.from_email|email2nickname %}
+            <a href="{% url 'user_profile' id %}" class="pic fleft">{% avatar r.from_email 28 %}</a>
+            <div class="txt">
+                <a href="{% url 'user_profile' id %}">{{ name }}</a>
+                <span class="time">{{ r.timestamp|translate_seahub_time }}</span>
+                <span class="reply-at op vh" data="{{ name }}">{% trans 'Reply' %}</span>
+                <p class="reply-con">{{ r.message|seahub_urlize|find_at }}</p>
+            </div>
+            {% endwith %}
+            </li>
+            {% endfor %}
+        </ul>
+        {% endif %}
+        <textarea placeholder="{% trans "Add a reply..." %}" name="message" class="reply-input"></textarea>
+        <p class="error hide">{% trans "It can not be blank and should be no more than 150 characters." %}</p>
+        <button type="button" class="reply-submit hide" data-url="{% url 'msg_reply' msg.id %}">{% trans "Submit" %}</button>
+        <button type="button" class="reply-cancel hide">{% trans "Cancel" %}</button>
+    </div>
+</div>
+</li>
+{% endfor %}
+

templates/snippets/group_recommend_form.html

@@ -1,6 +1,7 @@
 {% load seahub_tags i18n %}
 {% load url from future %}
-    <form action="{% url 'group_recommend' %}" method="post" id="discuss-to-group-form" class="hide">{% csrf_token %}
+<div id="discuss-to-group" class="hide">
+    <form action="{% url 'group_recommend' %}" method="post" id="discuss-to-group-form">{% csrf_token %}
         <h3>{% trans "Post a discussion to group" %}</h3>
         <div class="groups">
             {% for group in groups %}
@@ -31,6 +32,8 @@
         <p class="error hide"></p>
         <input type="submit" id="discuss-submit" class="submit" value="{% trans "Submit"%}" />
     </form>
+    <ul id="discussions-to-grp" class="hide"></ul>
+</div>
     <div id="discuss-to-group-caret" class="hide">
         <div class="outer-caret">
             <div class="inner-caret"></div>