MasterClass/resources/app/backoffice/events/event_comment.js

let comment_action = 'add'
const event_comment = (function ($, window, jQuery) {
    return {
        "add_comment": function (comment) {

            $('#commentTBody').append(
                '<tr>' +
                    '<td>'+
                        comment.name +
                    '</td>'+
                    '<td>'+
                        comment.date +
                    '</td>'+
                    
                    '<td>'+
                        comment.rate +
                    '</td>'+
                    '<td>'+
                        comment.comment +
                    '</td>'+
                    '<td class="text-center" style="display: flex;">' + 
                        '<button style="margin-right: 10px;" class="btn btn-primary btn-small edit_comment" type="button">Edit</button>' +
                        '<button class="btn btn-outline btn-small remove_comment" type="button">Supprimer</button>' +
                    '</td>'+
                    '<td style="display:none">'+
                        comment.id +
                    '</td>'+
                '</tr>'
                )
                event_comment.get_review_avg()
        
        },
        "edit_comment": function(cells) {
            cells[5].innerText = cells[5].innerText == '' ? '0': cells[5].innerText 
            $('#comment_name').val(cells[0].innerText)
            $('#comment_date').val(app._form.format_inputs("unformat_datetime", cells[1].innerText))
            $('#comment_rate').val(cells[2].innerText)
            $('#comment_content').val(cells[3].innerText)
            $('#comment_id').val(cells[5].innerText)
        },
        "update_comment": function() {
            const trCount = $('#commentTBody tr')
            if(trCount.length>0) {
                for(let i=0; i < trCount.length; i++) {
                    const tds = trCount[i].cells
                    if(tds[5].innerText == $('#comment_id').val()) {
                        if(tds[5].innerText == '0') {
                            tds[5].innerText =''
                        }
                        tds[0].innerText = $('#comment_name').val()
                        tds[1].innerText = app._form.format_inputs("date", $('#comment_date').val())
                        tds[2].innerText = $('#comment_rate').val()
                        tds[3].innerText = $('#comment_content').val()=='0'?'': $('#comment_content').val()
                        break;
                    }
                }

            }
            event_comment.get_review_avg()
        },
        "format_comments": function () {
            let comments = []
            const trCount = $('#commentTBody tr')
            if(trCount.length>0) {
                for(let i=0; i < trCount.length; i++) {
                    const tds = trCount[i].cells
                    comments.push({
                        name: tds[0].innerText,
                        date: tds[1].innerText,
                        rate: tds[2].innerText,
                        comment: tds[3].innerText,
                        id: tds[5].innerText=='' ? null: parseInt(tds[5].innerText)
                    })
                }

            }
            return comments
        },
        "get_review_avg" : function () {
            const trCount = $('#commentTBody tr')
            let validCommentCount = 0;
            if(trCount.length>0) {
                let avgTotal = 0
                for(let i=0; i < trCount.length; i++) {
                    const tds = trCount[i].cells
                    if(!isNaN(parseInt(tds[2].innerText))) {
                        avgTotal += parseInt(tds[2].innerText)
                        validCommentCount++
                    }
                }

                $('#comment_rate_avg').text(event_comment.format_review_avg(avgTotal, validCommentCount))
            } else {
                $('#comment_rate_avg').text('n/a')
            }
        },
        "format_review_avg": function(avgTotal, numComments) {
            let avg = avgTotal / numComments
            if(Number.isInteger(avg)) {
                return avg>0?avg + '/10':'n/a'
            }
            return avg.toFixed(1) + '/10'
        },
        "validate_comment": function(){
            if(!$('#comment_name').val()) {
                $('#comment_name_error').text('Ce champ est obligatoire.')
                $('#comment_name').focus()
                return false;
            // } else if(!$('#comment_rate').val()) {
            //     $('#comment_rate_error').text('Ce champ est obligatoire.')
            //     $('#comment_rate').focus()
            //     return false;
            } else if(!$('#comment_date').val()) {
                $('#comment_date_error').text('Ce champ est obligatoire.')
                $('#comment_date').focus()
                return false;
            } else if(!$('#comment_content').val()) {
                $('#comment_content_error').text('Ce champ est obligatoire.')
                $('#comment_content').focus()
                return false;
            }

            return true;
        },
        "rate_validator": function(rate) {
            let val = rate.val();
            if(isNaN(val)){
                val = val.replace(/[^0-9]/g,'');
            }
            val = val.substring(0,1) === '0' ? '':val
            if(parseInt(val)>10) {
                val = val.substring(0,1)
            }
            rate.val(val);
        },
        "clear_fields": function() {
            $('#comment_name').val(null)
            $('#comment_rate').val(null)
            $('#comment_date').val(null)
            $('#comment_content').val(null)
            $('#comment_id').val('')
            comment_action='add'
            $('#addComment').text('Add comment')
            $('#comment_form_label>b').text('Add Comment')
        }
    }
})(jQuery, this)

$(document).ready(function() {
    $('#commentTBody').on('click', '.remove_comment', function () {
        $(this).closest('tr').remove();
        event_comment.get_review_avg()
    });

    $('#commentTBody').on('click', '.edit_comment', function () {
        comment_action = 'edit'
        event_comment.edit_comment($(this).closest('tr')[0].cells)
        $('#comment_name').focus()
        $('#addComment').text('Save Changes')
        $('#comment_form_label>b').text('Edit Comment')
    });

    $('.comment-modal-save').on('click', function () {
        event_comment.update_comment();
    });

    $('#clearComment').on('click', function () {
        event_comment.clear_fields()
    });

    $('#addComment').on('click', function() {
        if(event_comment.validate_comment()) {
            if(comment_action === 'add') {
                let comment = {
                    name: $('#comment_name').val(),
                    rate: $('#comment_rate').val(),
                    date: app._form.format_inputs("date", $('#comment_date').val()),
                    comment: $('#comment_content').val(),
                    id: ''
                }
                event_comment.add_comment(comment)
            } else {
                event_comment.update_comment()
            }
            event_comment.clear_fields()
        }
    })

    $('#comment_name').on('input', function(){
        $('#comment_name_error').text('')
    })
    $('#comment_rate').on('input', function(){
        $('#comment_rate_error').text('')
    })
    $('#comment_date').on('input', function(){
        $('#comment_date_error').text('')
    })
    $('#comment_content').on('input', function(){
        $('#comment_content_error').text('')
    })

    $('#comment_rate').on('keyup', () => {
        event_comment.rate_validator($('#comment_rate'))
    })
});