surveyor_indonesia_gantt/view-mode/function/ganttActivityUploadDoc.js

// Upload Document Activity
const DOCUMENT_UPLOAD_URL = `${base_url}document-activity/upload`;
const DOCUMENT_DOWNLOAD_URL = (id, company_id) => `${base_url}document-activity/download/${id}/${company_id}`;
const DOCUMENT_SEARCH_URL = `${base_url}document-activity/search`;
const DOCUMENT_DELETE_URL = (id, company_id) => `${base_url}document-activity/delete/${id}/${company_id}`;

var fileToUpload = null;

$(document).ready(function() {
    $(".modal_add_btn_doc").on('click', function() {
        console.log('onclick add document');
        addDocuments();
    });
    
    $("#btn_doc_submit").on('click', function() {
        submitDocuments();
    });

    $("#dokumen").on('change', function(e) {
        fileToUpload = e.target.files[0];
    });
    
    // $("#add_doc_form").on('submit', function(e) {
    //     // submitDocuments();
    //     e.preventDefault();
    //     console.log(this);
    //     var formData = new FormData(this);
    //     console.log('formData', formData);
    //     $.ajax({
    //         method: "POST",
    //         url: DOCUMENT_UPLOAD_URL,
    //         data: formData,
    //         processData: false,
    //         contentType: false,
    //         cache: false,
    //         success: function(msg) {
    //             console.log('done submit comment', msg)
    //             $("#add_doc_form").trigger("reset");
    //             searchDocuments(activity_id); // reload the contents
    //         },
    //         error: function(xhr, status, error) {
    //             // error handling
    //             console.log('error document upload', xhr, status, error);
    //         }
    //     });
    // });

    $("#btn_doc_reset").on('click', function() {
        // $("#add_doc_form").trigger("reset");
    })

    $('#modal_upload_doc').on('hidden.bs.modal', function () {
        $("#add_doc_form").trigger('reset');
    });
});

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

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

// pressing submit button (add comment)
async function submitDocuments() {
    var activity_id = $("#activity_id").val();
    var files = $("#dokumen")[0].files[0];

    $('#btn_doc_submit').html('Uploading...');
    $('#btn_doc_submit').prop("disabled",true);

    if (!files) {
        gantt.alert("Please insert the document file");
        $('#btn_doc_submit').html('Upload');
        $('#btn_doc_submit').prop("disabled",false);
        return;
    }

    console.log('fileToUpload', fileToUpload);
    var formData = new FormData;
    formData.append('activity_id', activity_id);
    formData.append('dokumen', files);
    formData.append('company_id',company_id);
    if (activity_id !== '' && dokumen !== '') {
        const result = await axiosInstance
            .post(DOCUMENT_UPLOAD_URL, formData)
            .then(res => res)
            .catch((error) => error.response);
        if(result && result.status==200){
            console.log('done upload doc', result)
            gantt.alert("Upload Success");
            $("#add_doc_form").trigger("reset");
            $('#btn_doc_submit').html('Upload');
            $('#btn_doc_submit').prop("disabled",false);
            searchDocuments(activity_id); // reload the contents
        }else{
            gantt.alert({type: "error", text: "Upload Failed"});
            $('#btn_doc_submit').html('Upload');
            $('#btn_doc_submit').prop("disabled",false);
        }
    }
    else {
        gantt.alert("Please insert the document file");
        $('#btn_doc_submit').html('Upload');
        $('#btn_doc_submit').prop("disabled",false);
    }
}

// generate comment list
function searchDocuments(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
        }
    }

    $.ajax({
        method: "POST",
        url: DOCUMENT_SEARCH_URL,
        dataType: "json",
        data: JSON.stringify(payload)
    })
    .done(function( msg ) {
        console.log('done search documents', msg)
        var documents = msg && msg.data;
        // var contents = '';
        // if (documents.length > 0) {
        //     contents += '<div>';
        //     for (var i=0; i < documents.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>';
        // }
        $("#documents_table").DataTable().destroy();
        $('#documents_table').DataTable({
            data: documents,
            columns: [
                { data: null, title: "Action",
                    "mRender": function(data, type, row){
                        var optContent = '<button title="Download File" type="button" class="btn btn-xs btn-default" onclick="downloadDocument(' + row.id + ',`' + row.file + '`);"><span class="fa fa-download"></span></button>';
                        optContent += '<button title="Delete File" type="button" class="btn btn-xs btn-default" onclick="deleteDocument('+row.id+', '+activity_id+');"><span class="fa fa-trash"></span></button>';
                        return optContent;
                    }
                },
                { data: "file", title: "Nama Dokumen" },
                { data: null, title: "Tanggal Upload",
                    "mRender": function(data, type, row){
                        return '<span>'+moment(row.created_at).format('DD-MM-YYYY HH:mm:ss')+'</span>';
                    }
                },                      
            ]
        });
        // $("#documents_list").html(contents);
    })
    .fail(function(xhr, status, error) {
        // error handling
        console.log('error document search', status);
    });
}

async function downloadDocument(id, name) {
    let result;
    await fetch(DOCUMENT_DOWNLOAD_URL(id, company_id), {
        headers: new Headers({
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
        })
    })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            result = response;
            return response.blob();
        })
        .then(blob => {
            let url = window.URL.createObjectURL(blob);
            let a = document.createElement('a');
            a.href = url;
            a.download = name;
            a.click();
        })
        .catch(error => {
            console.error(`Error: ${error.message}`);
            alert('File not found');
        });

    if (result && result.status == 200) {
        $("body").removeClass("loading"); 
    }
    else {
        $("body").removeClass("loading"); 
        gantt.alert({type: "error", text: result.data.message});
    }
}

async function deleteDocument(id, activity_id) {
    gantt.confirm({
        text: "Are you sure to delete this file?",
        ok:"Yes", 
        cancel:"No",
        callback: async function(result){
            // result is true / false;
            if (result) {
                console.log('download document', id);
                const result = await axiosInstance
                    .delete(DOCUMENT_DELETE_URL(id, company_id))
                    .then(res => res)
                    .catch((error) => error.response);

                if(result && result.status==200){
                    gantt.alert("Success to delete file");
                    searchDocuments(activity_id); // reload the contents
                }else{
                    gantt.alert({type: "error", text: "Failed to delete file"});
                }
            }
        }
    });
}