discussion.html 13.5 KB
Newer Older
1 2
{% load ndf_tags %}
{% load i18n %}
Kedar A.'s avatar
Kedar A. committed
3
{% load cache %}
4

Kedar A.'s avatar
Kedar A. committed
5
<div>
6 7 8 9

  <br/>
  <div onclick="createDiscussion()" id="create-discussion" data-id="{{ node.pk }}" class="button" style="margin-bottom:0;">
    {% if all_replies %}
10
        Comment
11
    {% else %}
12
      Comment on {{ node.name }}
13 14 15 16 17 18 19 20
    {% endif %}
  </div>

  <div id="replies-area">

    <!-- populating replies -->
    {% for each_reply in all_replies %}

21
    <div style="margin-left:calc({{each_reply.level}} * 48px); {% if each_reply.level == 1 %}margin-top:25px;{% endif %}" class="disc-replies" data-reply-id="{{ each_reply.oid }}" data-priornode-id="{{ each_reply.prior_node }}">
22 23 24 25 26 27 28 29 30 31 32 33 34

      <div class="row"> 
        <div class="small-3 columns">
          <a class="text-center" href="/home/{{each_reply.userid}}/dashboard">
            <span class="align-center"><i class="fi-torso"></i></span>
            <label>{{ each_reply.username }}</label>
          </a>
        </div>
        <div class="small-9 columns">
          {% spaceless %}
          {{each_reply.HTMLcontent | safe }}
          {% endspaceless %}
        </div>
35 36 37 38 39 40 41 42 43 44 45 46 47 48

        {% for node in each_reply.collection_set  %}
        <div style="margin: 1em;">
          
        {{node.mime_type}}
        <br/>
        <a class="th" style="" href="{% url 'read_file' group_id node node.name %}">
           {% if 'image' in node.mime_type  %}
            <img style="height:100px;" src="{% url 'getFileThumbnail' group_id node.pk %}" />
          {% endif %}
          <p>{{node.name}}</p>
        </a>  
        </div>
        {% endfor %}
49 50 51
      </div>

      <div class="row">
52
        <div class="small-8 columns"> <small>{{ each_reply.last_update }}</small> </div>
53
        <div class="reply-btn small-2 columns" data-userid="{{each_reply.userid}}" onclick="deleteReply($(this))">{% trans "delete" %}</div>
54
        <div class='reply-btn text-right small-2 columns' data-id='{{ each_reply.oid }}' onclick='openOrgEditor($(this))' data-org-content='{{ each_reply.ORGcontent }}'>
55
          {% trans "reply" %}
56 57 58 59 60 61 62 63 64 65 66 67
        </div>
      </div>

    </div>

    {% endfor %}
    <!-- END of populating replies -->
  </div>

  <!-- orgitdown container -->
  <div id="org" style="" class="reveal-modal small" data-reveal>
    <!-- Reply : -->
makfire's avatar
makfire committed
68
    <textarea id="orgitdownreps" name="content_org" placeholder="{% trans 'Enter your reply text here.'%}"></textarea>
69
    <input data-id="{{ node.pk }}" type="button" value="Post"  class="button expand reply-button" onclick="addReply($(this))">
70
    <input type="file" id="uploaded-files" style="" value="" multiple>
71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87
    <input type="hidden" id="prior-node" style="visibility:hidden" value="">
    <!-- <input type="hidden" id="thd" style="visibility:hidden" value=""> -->
  </div>
  <!-- end of orgit down container -->

</div>

<script type="text/javascript">

  // for discussion tab
  // storing ndf_tags return values in JS variables
  {% user_access_policy groupid request.user as user_access %}
  var user_access = "{{ user_access }}"; // "allow" or "disallow"

  {% edit_policy groupid node request.user as status %}
  var edit_policy = "{{ status }}"; // "allow" or "disallow"

88 89 90 91 92 93 94 95
  var is_user_authenticated = {{ request.user.is_authenticated|lower }};

  // if( user_access == "allow" && edit_policy == "allow" )
  // { 
  //   $("#orgitdownreps").orgitdown(mySettings);
  // }

  {% if request.user.is_authenticated %}
96
    $("#orgitdownreps").orgitdown(mySettings);
97
  {% endif %}
98

99
  
100 101 102
  function createDiscussion()
  {

103
    if( user_access == "allow"){
104
    if( is_user_authenticated )
105
    {  
106
      {% if request.user.is_authenticated %}
107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145
        // ajax to create thread for first time.
        $.ajax({

          url: "{% url 'create_discussion' group_id node.pk %}",

          success: function(data){

            data = JSON.parse(data);

            if( (data[0] == "thread-created") || (data[0] == "Thread-exist") )
            {

                // $("#create-discussion").hide();

                // changing method to behave same as sub-reply button
                $("#create-discussion").attr("onclick", "openOrgEditor($(this))");

                $("#prior-node").val("{{ node.pk }}") // _id
                // $("input[data-id='{{ node.pk }}']").val("{{ node.pk }}") // _id
                
                $("#create-discussion").trigger("click");
              }
              // else if( data[0] == "Thread-exist" ){
              //   // alert(data)
              //   $("#create-discussion").hide();
              //   $("#prior-node").val("{{ node.pk }}") // _id         
              //   // changing method to behave same as sub-reply button   
              //   $("#create-discussion").attr("onclick", "openOrgEditor($(this))");
              //   $("create-discussion").trigger("click");
              // }
              else{ alert(data) }

            }//,
          // complete: function(){
            // $("#prior-node").val("") // removing _id
          // }

        });
        // --- END ajax and create thread for first time.
146
        {% endif %}
147 148 149
      }
      else
      {
150
        // alert("To start discussion you need to login and be the member of this group.");
makfire's avatar
makfire committed
151
        alert("{% trans 'Login to start discussion' %}");
152 153
      }
    }
154 155 156 157 158
  else{
        alert("Only group members can comment.");

  }
  }
159 160 161 162 163 164
  // --- END of createDiscussion()


  // function called by "Add Reply" and "Reply" buttons to open editor
  function openOrgEditor(sourceObj)
  {
165
    if( user_access == "allow"){
166
    if( is_user_authenticated )
167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197
    {

      var sourceObjDataId = $(sourceObj).attr("data-id"); // prior-node _id
      $("#prior-node").val(sourceObjDataId);
      
      // tempOrgObj = $("#org").clone(true, true);
      // console.log($(sourceObj));
      
      // $("#org").detach();
      
      // if( sourceObjDataId == "{{ node.pk }}")
      // {
      //   $('div[data-id="'+ sourceObjDataId +'"]').after(tempOrgObj);
      // }
      // else
      // {
      //   $tempPrior = $('div[data-id="'+ sourceObjDataId +'"]').parent();
      //   calcMargLeft = $tempPrior.css("margin-left");
      //   calcMargLeft = (parseFloat(calcMargLeft, 10) + 48) + "px";

      //   $('div[data-id="'+ sourceObjDataId +'"]').parent().after(tempOrgObj);
      // }
      
      // $("#org").fadeIn();
      // if( sourceObjDataId != "{{ node.pk }}")
      // {
        $('#org').foundation('reveal', 'open');
      // }
    }
    else
    {
198
      // alert("To start discussion you need to login and be the member of this group.");
makfire's avatar
makfire committed
199
      alert(" {% trans 'Login to start discussion.' %} ");
200 201
    }
  }
202 203 204 205 206
  else{
      alert("Only group members can reply to comment.");

  }
  }
207 208


209 210 211 212 213
  function updateDiscussionTabText()
  {
    var totalReplies = $("#replies-area div.disc-replies:visible").length;
    if(totalReplies == 0)
    {
makfire's avatar
makfire committed
214
      $(".view-discussion span").fadeOut().fadeIn().html(" {% trans 'Begin Discussion' %}");
215
      $("#create-discussion").text("{% trans 'Comment' %}" + $("h1 span.node[itemprop]").text().trim());
216
    }
217 218
    else
    {
makfire's avatar
makfire committed
219
      $(".view-discussion span").fadeOut().fadeIn().html("{% trans 'Join Discussion' %}("+totalReplies+")");
220
    }
221 222 223 224 225
  }


  function createReplyHTML(replyStyle, data)
  {
226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242
    var files = data[8];
    // console.log(files)
    filesContent = ""
    files.forEach(function(f){
        // console.log("=========")
        // console.log(f)
        var mime_type = f[1];

        filesContent += "<div style='margin: 1em;'>"+ f[1] +"<br/>"+
        "<a class='th' href='/{{group_id}}/file/readDoc/"+f[0]+"/"+f[2]+"'>";

        if(mime_type.indexOf("image") >= 0){
          filesContent += "<img style='height: 100px;' src='/{{group_id}}/file/thumbnail/"+ f[0] +"'/>";}

        filesContent += "<p>" + f[2] + "</p></a></div>";
        // console.log(filesContent);
    });
243 244 245 246
    var htmlReply = "<div style='"+ replyStyle +"' data-reply-id='"+ data[1] +"' data-priornode-id='"+ data[2] +"' class='disc-replies'>"
    + "<div class='row'><div class='small-3 columns'><a href='/home/"+ data[5] +"/dashboard' class='text-center'>"
    + "<span class='align-center'><i class='fi-torso'></i></span>"
    + "<label>" + data[6] + "</label></a></div>"
247
    + "<div class='small-9 columns'>"+ data[3] + filesContent +"</div></div>"
248 249

    + "<div class='row'><div class='small-8 columns'><small>"+ data[7] + "</small></div>"
makfire's avatar
makfire committed
250
    + "<div class='reply-btn small-2 columns' data-userid='"+ data[5] +"' onclick='deleteReply($(this))'>{% trans 'delete' %}</div>"
251 252
    + "<div data-org-content='"
    + data[4] + "' onclick='openOrgEditor($(this))' data-id='" 
makfire's avatar
makfire committed
253
    + data[1] + "' class='reply-btn text-right small-2 columns'>{% trans  'reply' %} </div></div></div>"
254 255 256 257 258

    return htmlReply;
  }


259 260 261 262 263
  function addReply(sourceObj)
  {
    $('#org').foundation('reveal', 'close');

    var priorNodeId = $("#prior-node").val(),
264
        replyContent = $("#orgitdownreps:visible").val().trim();
265 266 267 268 269

    // If reply is non empty - make ajax to save reply.
    if( (replyContent.length > 0) && (priorNodeId.length == 24) )
    {

270 271 272 273 274 275 276 277 278 279 280 281 282 283 284
      docs_list = new FormData();
      var all_files = document.getElementById("uploaded-files");
      var docs_count = all_files.files.length;

      for(var i = 0; i < docs_count; i++)
        {
          docs_list.append("upload"+i, all_files.files[i]);
          // console.log(all_files.files[i]);
        }

        docs_list.append('upload_cnt', docs_count)
        docs_list.append('csrfmiddlewaretoken','{{csrf_token}}');
        docs_list.append('reply_text_content', replyContent)
        docs_list.append('prior_node_id', priorNodeId)

285 286 287 288
      $.ajax({
        
        type: "POST",

289
        url: "{% url 'discussion_reply' group_id node.pk %}",
290

291 292 293
        data: docs_list,
        processData: false, 
        contentType: false,
294 295 296 297 298 299 300 301 302 303 304 305 306 307

        success: function(data){
            
            data = JSON.parse(data);

            if( data[0] == "reply_saved" )
            {
              
              $("#org").fadeOut();          // hide editor
              $("#orgitdownreps").val("");  // make textarea empty

              if(priorNodeId == "{{ node.pk }}")  // main reply
              {
                // change the text of Start discussion and make it visible
308
                $("#create-discussion").html("Comment");                
309 310
                // $("#create-discussion").fadeIn();

311
                //sample format of data = [0:"status_info", 1:"reply_id", 2:"prior_node", 3:"html_content", 4:"org_content", 5:"user_id", 6:"user_name", 7:"created_at" ]
312 313

                // add reply text content after #replies-area
314
                $("#replies-area").prepend(createReplyHTML('margin-top:20px;', data)).fadeIn(8000);
315 316 317 318 319 320 321 322
              }
              else  // sub-reply
              {
                $tempPrior = $('div[data-id="'+ priorNodeId +'"]').parent().parent();
                calcMargLeft = $tempPrior.css("margin-left");
                calcMargLeft = (parseFloat(calcMargLeft, 10) + 48) + "px";

                // add reply text content as sub-reply
323
                $($tempPrior).after(createReplyHTML('margin-left:'+calcMargLeft, data)).fadeIn(8000);
324
              }
325 326
              // updating tab-text
              updateDiscussionTabText();
327
              location.reload();
328 329 330
            }
            else if( data[0] == "no_content" ){
              
makfire's avatar
makfire committed
331
              alert("{% trans 'Please provide the reply content.' %}")
332 333 334 335 336 337 338
            }
            else { alert(data) }
          }
      });// --- END of ajax to save reply    
    }
    else // content is not provided
    {
makfire's avatar
makfire committed
339
      alert(" {% trans 'Please provide the reply content.' %}")
340 341 342 343
    } // --- END of IF-ELSE
  
  } // --- END of addReply()

344

345
  function deleteReply(sourceObj)
346
  {
347 348
    var userid = $(sourceObj).attr("data-userid");
    if( (user_access == "allow" && edit_policy == "allow") || (userid == "{{request.user.id}}") )
349 350
    {
      var reply_id = $(sourceObj).closest("div.disc-replies").attr("data-reply-id");
351

352 353
      var nodesToDeleteArr = getChildReplies(reply_id, []);
      nodesToDeleteArr.push(reply_id);  // adding current node's _id
354

355
      var deleteConfirm;
356

357 358
      if(nodesToDeleteArr.length > 1)
      {
makfire's avatar
makfire committed
359
        deleteConfirm = confirm("{% trans 'Along with this reply, total of' %}: " + nodesToDeleteArr.length + "{% trans 'replies would get deleted.\nClick 'OK' to delete. Else click on 'Cancel'' %} ");
360 361 362
      }
      else
      {
makfire's avatar
makfire committed
363
        deleteConfirm = confirm("{% trans 'Are you sure to delete this reply ?\nClick 'OK' to delete.' %} ");
364
      }
365

366 367 368 369 370
      if(deleteConfirm)
      {
        $.ajax({
          
          type: 'POST',
371
          url: "{% url 'discussion_delete_reply' group_id %}",
372 373 374 375 376
          data: { 
              "csrfmiddlewaretoken": "{{ csrf_token }}",
              "nodes_to_delete": JSON.stringify(nodesToDeleteArr)
            },
          success: function(data){
377

378
            data = typeof(data) == "string" ? JSON.parse(data): data;
379

380 381 382
            data.forEach(function(reply){
              $("[data-reply-id="+ reply +"]").detach().fadeOut();
            })
383

384 385 386
            // updating tab-text
            updateDiscussionTabText();
          }
387

388 389 390 391 392 393
        })
        //end of ajax
      }
    }
    else
    {
makfire's avatar
makfire committed
394
      alert("{% trans 'To delete this reply, you need to be login and author of this reply.' %}");
395
    }
396 397
  }

398

399
  // recursive function to get child replies
400
  function getChildReplies(oid, replyArr)
401 402 403 404 405 406 407 408 409
  {
    var tempReplyArr = $("[data-priornode-id="+oid+"]");
    // console.log(tempReplyArr)
    if (tempReplyArr.length > 0)
    {
      tempReplyArr.each(function(){
        var tempId = $(this).attr("data-reply-id")
        // console.log(replyArr);
        replyArr.push(tempId);
410
        getChildReplies(tempId, replyArr);
411 412 413 414 415 416

      })
    }
    return replyArr;
  }

417 418 419
  // --- END of discussion code ----

</script>