surveyor_indonesia_gantt/view-mode/function/ganttActivityComments.js

// Comment Activity
const COMMENT_ADD_URL = `${base_url}comment-activity/add`;
const COMMENT_SEARCH_URL = `${base_url}comment-activity/search`;

$(document).ready(function() {
    $(".modal_add_btn_comment").on('click', function() {
        console.log('onclick add comments');
        addComments();
    });
    $("#btn_comment_submit").on('click', function() {
        submitComments();
    });
});

// show comments modal
function showComments(id) {
    var task = gantt.getTaskBy('id', id);
    console.log('showComments', task);
    var activity = task && task.length > 0 ? task[0].text : '';
    $("#activity_id").val(id);
    $("#comments_title").text(activity);
    searchComments(id);
    $("#modal_comments").modal('show');
}

function addComments() {
    // toggle input form
    if ($('#add_comment_form').css("display") === 'block') {
        $("#add_comment_form").css({
            display: "none"
        });
        $(".modal_add_btn_comment").html('<span aria-hidden="true"><i class="fa fa-plus"></i></span>');
    }
    else if ($('#add_comment_form').css("display") === 'none') {
        $("#add_comment_form").css({
            display: "block"
        });
        $(".modal_add_btn_comment").html('<span aria-hidden="true"><i class="fa fa-chevron-up"></i></span>');
    }
}

// pressing submit button (add comment)
function submitComments() {
    var activity_id = $("#activity_id").val();
    var comment = $("#comment").val();
    $('#btn_comment_submit').html('Processing..');
    $('#btn_comment_submit').prop("disabled",true);

    if (activity_id !== '' && comment !== '') {
        var payload = {
            "activity_id": activity_id,
            "comment": comment
        }
        $.ajax({
            method: "POST",
            url: COMMENT_ADD_URL,
            dataType: "json",
            data: JSON.stringify(payload)
        })
        .done(function( msg ) {
            console.log('done submit comment', msg)
            // gantt.message("Comment posted");
            gantt.alert("Comment posted");
            $("#add_comment_form").trigger("reset");
            $('#btn_comment_submit').html('Submit');
            $('#btn_comment_submit').prop("disabled",false);
            searchComments(activity_id); // reload the contents
        })
        .fail(function() {
            // gantt.message({type:"error", text:"Failed to post comment"});
            gantt.alert({type: "error", text: "Failed to post comment"});
            $('#btn_comment_submit').html('Submit');
            $('#btn_comment_submit').prop("disabled",false);
        });
    }
    else {
        // alert('Please input the comment');
        gantt.alert("Please input the comment");
        $('#btn_comment_submit').html('Submit');
        $('#btn_comment_submit').prop("disabled",false);
        // gantt.alert({type: "error", text: "Please input the comment"});
    }
}

// generate comment list
function searchComments(activity_id) {
    var payload = {
        "paging": {
            "start": 0,
            "length": 10
        },
        "columns": [
            {
                "name": "activity_id",
                "logic_operator": "=",
                "value": activity_id,
                "operator": "AND"
            }
        ],
        // "joins": [{ "name": "m_proyek", "column_join": "proyek_id", "column_results": ["kode_sortname", "nama"] }],
        "orders": {
            "columns": [
                "id"
            ],
            "ascending": false
        }
    }

    console.log('searchComments payload', payload);

    $.ajax({
        method: "POST",
        url: COMMENT_SEARCH_URL,
        dataType: "json",
        data: JSON.stringify(payload)
    })
    .done(function( msg ) {
        console.log('done search comment', msg)
        var comments = msg && msg.data;
        var contents = '';
        if (comments.length > 0) {
            contents += '<div>';
            for (var i=0; i < comments.length; i++) {
                contents += '<div class="comment-section">';
                contents += '<div class="comment-detail">'+comments[i].created_by+' &bull; '+moment(comments[i].created_at).format('DD-MM-YYYY HH:mm:ss')+'</div>';
                contents += '<div class="comment-text">'+comments[i].comment+'</div>';
                contents += '</div>';
                
            }
            contents += '</div>';
        }
        else {
            contents = '<div style="text-align: center; color: red;">Tidak ada komentar</div>';
        }
        $("#comments_list").html(contents);
    });

}