surveyor_indonesia_gantt/view-mode/function/ganttSettings.js

// set work days

// gantt.setWorkTime({ day:1, hours:false });

const VERSION_GANTT_EDIT_URL = `${base_url}version-gantt/edit/${ganttId}`;
const VERSION_GANTT_UPDATE_URL = `${base_url}version-gantt/update/${ganttId}`;
const ACTIVITY_SET_BASELINE_URL = `${base_url}activity/set-baseline/${ganttId}`;
const ACTIVITY_SYNCHRONIZE_REPORT_URL = `${base_url}activity/synchronize-report/${ganttId}`;
var toggleTasks = "Collapse";
var isBaselineSet = false;
var daysObj = [
    {
        text: "Sunday",
        value: "0"
    },
    {
        text: "Monday",
        value: "1"
    },
    {
        text: "Tuesday",
        value: "2"
    },
    {
        text: "Wednesday",
        value: "3"
    },
    {
        text: "Thursday",
        value: "4"
    },
    {
        text: "Friday",
        value: "5"
    },
    {
        text: "Saturday",
        value: "6"
    }
];
var days = [0,1,2,3,4,5,6]; // Sunday -> Saturday

var selectDayOffChoices = null;

$(document).ready(function() {
    // init select multiple workdays
    selectDayOffChoices = new Choices('#select_dayoff', {
        removeItemButton: true,
        shouldSort: false
    });

    $('#gantt_setting_btn').on('click', async function() {
        const result = await axiosInstance
            .get(VERSION_GANTT_EDIT_URL, HEADER)
            .then(res => res)
            .catch((error) => error.response);
        if(result && result.status==200){
            if (result.data && result.data.data) {
                var config_dayoff = null;
                if (result.data.data.config_dayoff !== null) {
                    config_dayoff = result.data.data.config_dayoff;

                    if (config_dayoff && config_dayoff.length > 0) {
                        var config_dayoff_arr = config_dayoff.split(',');
                        for (var i=0; i < config_dayoff_arr.length; i++) {
                            var day = daysObj.find(o => parseInt(o.value) === parseInt(config_dayoff_arr[i]));
                            // $('#select_dayoff option[value='+day.value+']').prop("selected", true);
                            selectDayOffChoices.setChoiceByValue(day.value);
                        }
                    }
                }
            }
        }else{
            gantt.alert({type: "error", text: "Failed to get settings. Please check your internet connection."});
        }
        $('#modal_gantt_setting').modal('show');
    });

    // $('#gantt_setting_btn').on('click', async function() {
    //     $('#modal_gantt_setting').modal('show');
    //     // $('#')
    // });

    $('#btn_save_setting').on('click', async function() {
        // arr.forEach(function (element, key) {
        //     $('#choices-multiple-remove-button3').append(`<option value="${element.id}">${element.name}</option>`)
        //   });
        // var days = [0,1,2,3,4,5,6]; // Sunday -> Saturday

        // for (var i=0; i < days.length; i++) {
        //     gantt.unsetWorkTime({ day:days[i], hours:false });
        // }
        var holidays = [];
        var dayoff = $('#select_dayoff').val();
        dayoff = dayoff.map(item => parseInt(item));
        // reset the dayoff first
        for (var i=0; i < days.length; i++) {
            gantt.unsetWorkTime({day: days[i], hours: false});
        }
        // gantt.unsetWorkTime({day: 0, hours: false});
        // gantt.unsetWorkTime({day: 1, hours: false});
        // gantt.unsetWorkTime({day: 2, hours: false});
        // gantt.unsetWorkTime({day: 3, hours: false});
        // gantt.unsetWorkTime({day: 4, hours: false});
        // gantt.unsetWorkTime({day: 5, hours: false});
        // gantt.unsetWorkTime({day: 6, hours: false});

        // gantt.setWorkTime({hours: ["8:00-17:00"]});//global working hours
        // gantt.setWorkTime({day: 2, hours: false});// make Tuesdays day-off

        // if (workdays.length > 0) {
        //     for (var i=0; i < workdays.length; i++) {
        //         gantt.setWorkTime({ day:workdays[i], hours:false });
        //     }
        // }

        if (dayoff.length > 0) {
            for (var i=0; i < dayoff.length; i++) {
                gantt.setWorkTime({ day:dayoff[i], hours:false });
            }
        }
        // else if (dayoff.length < 1) {
        //     // work everyday
        //     for (var i=0; i < days.length; i++) {
        //         gantt.unsetWorkTime({day: days[i], hours: false});
        //     }
        // }

        // saveSettings()
        let payload = {
            "config_dayoff": dayoff.join(',')
        }
        const result = await axiosInstance
            .put(VERSION_GANTT_UPDATE_URL, payload, HEADER)
            .then(res => res)
            .catch((error) => error.response);
        if (result && result.status === 200) {
            $('#modal_gantt_setting').modal('hide');
            // gantt.alert("Settings updated");
            gantt.message("Settings updated");
        }
        else {
            gantt.alert({type: "error", text: "Failed to update setting"});
        }

        gantt.render();

    });

    $("#gantt_toggle_task_btn").on('click', function(event) {
		toggleCollapseTasks();
	});

    // $("#gantt_toggle_columns_btn").on('click', function(event) {
    //     toggleColumns();
    // })

    $("#gantt-baseline").on('click', function(event) {
        setBaseline();
    });

    $("#gantt-synchronize").on('click', function(event) {
        setSynchronize();
    });

    initHolidays();
    initGanttSettings();
});

async function initHolidays(){
    let payload = {
        "columns": [
            { "name": "version_gantt_id", "logic_operator": "=", "value": ganttId },
            { "name": "proyek_id", "logic_operator": "=", "value": proyekId }
        ],
        "joins": [],
        "orders": { "columns": ["date"], "ascending": true },
        "paging": { "start": 0, "length": -1 }
    }

    $.ajax({
        data:  JSON.stringify(payload),
        url: `${base_url}holiday/search`,
        type: "POST",
        success: function (result) {
            let dataHolidays = result.data || []
            dataHolidays.map((val, index) => {
                // let day = moment(val.date).format("YYYY-MM-DD");
                var a = moment(val.date);
                var b = moment(a).add(val.duration, 'days');
                for (var m = moment(a); m.isBefore(b); m.add(1, 'days')) {
                    let holiday = new Date(m.format('YYYY-MM-DD'));
                    gantt.setWorkTime({
                        date: holiday,
                        hours: false
                    });
                }
                // let holiday = new Date(day);
                // gantt.setWorkTime({
                //     date: holiday,
                //     hours: false
                // });
            });
            gantt.render();
        },
        error: function (data) {

        }
    });
}

async function initGanttSettings() {
    // if zoom is day
    $("#scale3").attr('checked', true);
    // toggleCollapseTasks();

    // init to gantt chart view (holidays)
    const result = await axiosInstance
        .get(VERSION_GANTT_EDIT_URL, HEADER)
        .then(res => res)
        .catch((error) => error.response);

    if (result && result.status==200){
        var config_dayoff = result.data.data.config_dayoff;
        var dayoff = [];
        if(config_dayoff && config_dayoff.length > 0){
            dayoff = config_dayoff.split(',');
        }
        // var dayoff = config_dayoff.split(',');

        // reset the dayoff first
        for (var i=0; i < days.length; i++) {
            gantt.unsetWorkTime({day: days[i], hours: false});
        }

        if (dayoff.length > 0) {
            for (var i=0; i < dayoff.length; i++) {
                gantt.setWorkTime({ day:dayoff[i], hours:false });
            }
        }
    }
}

function expandTask(){
    gantt.eachTask(function(task){
        task.$open = true;
    });
    // updateProperty({task_open:true})
    toggleTasks = "Collapse";
    $("#gantt_toggle_task_btn").prop('title', 'Collapse Activities');
    $("#gantt_toggle_task_btn").children().removeClass('fa-expand-alt');
    $("#gantt_toggle_task_btn").children().addClass('fa-compress-alt');
    gantt.render();
}

function toggleCollapseTasks() {
    // collapse task / activity
    gantt.eachTask(function(task){
        task.$open = toggleTasks == "Expand";
    });
    if (toggleTasks == "Expand") {
        updateProperty({task_open:true})
        toggleTasks = "Collapse";
        $("#gantt_toggle_task_btn").prop('title', 'Collapse Activities');
        $("#gantt_toggle_task_btn").children().removeClass('fa-expand-alt');
        $("#gantt_toggle_task_btn").children().addClass('fa-compress-alt'); // change icon to collapse
    } else {
        updateProperty({task_open:false})
        toggleTasks = "Expand";
        $("#gantt_toggle_task_btn").prop('title', 'Expand Activities');
        $("#gantt_toggle_task_btn").children().removeClass('fa-compress-alt');
        $("#gantt_toggle_task_btn").children().addClass('fa-expand-alt'); // change icon to expand
    }
    gantt.render();
}


// Function Show / Hide Columns
function getColumnsSelection(node){
    var selectedColumns = node.querySelectorAll(":checked");
    var unselectedColumn = node.querySelectorAll('input[type="checkbox"]:not(:checked)');
    // var allSelected = node.querySelector("#check-all").prop('checked');
    var checkedColumns = {};
    selectedColumns.forEach(function(node){
        checkedColumns[node.name] = true;
    });
    unselectedColumn.forEach(function(node){
        checkedColumns[node.name] = false;
    });
    return checkedColumns;
}

function populateColumnsDropdown(node){
    var visibleColumns = {};
    // var preventHide = ['action'];
    gantt.config.columns.forEach(function(col){
        visibleColumns[col.name] = true;
    });

    var lines = [];
    allColumns.forEach(function(col){
        var checked = visibleColumns[col.name] ? "checked" : "";
        // skip action to be pushed
        lines.push(`<label class="${col.name === 'action' ? 'elm-hide2': ''} dropdown-item"><input type="checkbox" name="${col.name}" ${checked}> ${col.label}</label>`);
    });
    node.innerHTML = '<span class="dropdown-title">Show / Hide Columns</span><br>' + lines.join("<br>");
}

function getDropdownNode(){
    return document.querySelector("#gantt_dropdown");
}

gantt.$showDropdown = function(node){
    var position = node.getBoundingClientRect();
    var dropDown = getDropdownNode();
    dropDown.style.top = position.bottom + "px";
    dropDown.style.left = position.left - 150 + "px";
    dropDown.style.display = "block";
    populateColumnsDropdown(dropDown);

    dropDown.onchange = function(){
        var selection = getColumnsSelection(dropDown);
        if(readOnly && parseInt(readOnly)==0){
            updateShowHideColumn(selection)
        }
        gantt.config.columns = createColumnsConfig(selection);
        gantt.render();
    }

    dropDown.keep = true;
    setTimeout(function(){
        dropDown.keep = false;
    })
}

gantt.$hideDropdown = function(){
    var dropDown = getDropdownNode();
    dropDown.style.display = "none";
}

window.addEventListener("click", function(event){
    if(!event.target.closest("#gantt_dropdown") && !getDropdownNode().keep){
        gantt.$hideDropdown();
    }
});

// End Function Show / Hide Columns


// Set Baseline
function setBaseline() {
    var box = gantt.confirm({
        text: "Set Baseline for this gantt chart?",
        ok:"Yes",
        cancel:"No",
        callback: async function(result){
            if(result){
                // gantt.message("Yes!");
                // send to API
                await setBaselineAPI();
            }else{
                // gantt.message("No...");
            }
        }
    });
}

async function setBaselineAPI() {
    const res = await axiosInstance
        .get(ACTIVITY_SET_BASELINE_URL, HEADER)
        .then(res => res)
        .catch((error) => error.response);
    if (res && res.status === 200) {
        // $('#modal_gantt_setting').modal('hide');
        // gantt.alert("Settings updated");
        // gantt.message(result.data.message);
        gantt.message("Set baseline success!");
        window.location.reload();
    }
    else {
        gantt.alert({type: "error", text: "Failed to set baseline"});
    }
    gantt.render();
}

function setSynchronize() {
    if (!isBaselineSet) {
        // gantt.alert({
        //     title:"Synchronize to Report",
        //     type:"alert-error",
        //     text:"Please set baseline before continue."
        // });
        gantt.confirm({
            text: "Plase set baseline before continue.",
            ok:"Set Baseline",
            cancel:"Cancel",
            callback: async function(result) {
                if (result) {
                    await setBaselineAPI();
                }
            }
        });
        return false;
    }

    var box = gantt.confirm({
        text: "Synchronize to Report Activity?",
        ok:"Yes",
        cancel:"No",
        callback: async function(result){
            if(result){
                // gantt.message("Yes!");
                // send to API
                await setSynchronizeAPI()
            }else{
                // gantt.message("No...");
            }
        }
    });
}

async function setSynchronizeAPI() {
    const res = await axiosInstance
        .get(ACTIVITY_SYNCHRONIZE_REPORT_URL, HEADER)
        .then(res => res)
        .catch((error) => error.response);

    if (res && res.status === 200) {
        // $('#modal_gantt_setting').modal('hide');
        // gantt.alert("Settings updated");
        // gantt.message(result.data.message);
        gantt.message("Synchronize to Report success!");
        window.location.reload();
    }
    else {
        gantt.alert({type: "error", text: "Failed to Synchronize to Report"});
    }
    gantt.render();
}