backlog/main/templates/_comment_div.html

{# section commentaire. prends en parametre un objet Story ou Epic #}
{# l'objet en parametre doit avoir une propriete 'comments' et une propriete 'uuid' #}

{% load martortags %}

<div class="comment-section" data-obj-uuid="{{ obj.uuid }}">
	<ul class="comment-list">
	{% for comment in obj.comments.all %}
		<li class="comment flex-col" data-id="{{ comment.id }}">
			<div class="flex-row">
				<span class="comment-header"><i class="fa fa-comment"></i> {{ comment.author }}, le {{ comment.created }}</span>
				<a class="disabled comment-edit-btn" href="" style="margin-left: 20px;"><i class="fa fa-pencil"></i></a>
				<a class="disabled comment-del-btn" href="" style="margin-left: 10px;"><i class="fa fa-trash"></i></a>
			</div>
			<div class="comment-display">
				{{ comment.content|safe_markdown }}
			</div>
	    </li>
	{% endfor %}
	</ul>
	
	<form action="{% url 'comment_post' obj_uuid=obj.uuid %}" method="post" accept-charset="utf-8">
		{% csrf_token %}
		{{ comment_form.content }}
		
    	<div class="flex-row flex-end" style="margin-top: 10px;">
    		<input type="submit">
    	</div>
    </form>
    
</div>

<!-- <script>
	
	// Nouveau commentaire
    $(".comment-section input[type=submit]").click(function (event) {
    	event.preventDefault();
    	
    	var section = $(this).closest(".comment-section");
    	var form = section.find("form");
     	var obj_uuid = section.data("obj-uuid");
     	var csrf_token= form.find("input[name=csrfmiddlewaretoken]").attr('value');
     	var target = form.attr('action');

     	var content = form.find("textarea").val();
        if (!content) {
            return;
        }
        
        $.ajax({
            type: "POST",
            url: target,
            headers: {"X-CSRFToken": csrf_token},
            data: '{"content": ' + JSON.stringify(content) + '}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (comment) {
            	form.find("textarea").val("");
            	location.reload();
            },
            failure: function (response) {
            	// restore the default behavior
                console.log(response.responseText);
            	alert("An error occured (see the console for more informations)");
            },
            error: function (response) {
            	// restore the default behavior
            	console.log(response.responseText);
            	alert("An error occured (see the console for more informations)");
            }
        });
    });
	
</script> -->