QuotationMaker/wwwroot/assets/javascript/custom/grouplist.js

var tmpNestableObj;
var tmpNestableItem;

$(document).ready(function () {
    deptList();

    $('#memberAddSaveBtn').on('click', function () {
        var userArray = [];
        var html = '';
        $.each($('input[type=checkbox][name="memberChkList[]"]:checked'), function () {
            var item = {
                user_uid: $(this).val(),
                user_name: $(this).parent().find('span').eq(0).text().trim()
            }
            userArray.push(item);
            html += optionItemHtml(item);
        });
       
        $('#nestableMember .dd-list').append(html);
        
        $('#memberModal').modal('toggle');
    });

    $('#groupNewModal').on('click', function () {
        $('#group_method').val('add');
        $('#dept_uid').val($('#dept_select').val());
        $('#nestableMember .dd-list').children().remove();
        //$('#nestableMember').nestable();
        $('#groupModal').modal('toggle');
    });

    $('#groupDialogSaveBtn').on('click', function () {
        var method = $('#group_method').val();
        var group_uid = $('#group_uid').val();
        var dept_uid = $('#dept_uid').val();
        var group_name = $('#group_name').val();
        var userArray = [];

        if (group_name == '') {
            alert('請輸入群組名稱!');
            return;
        }

        $.each($('#nestableMember .dd-list li'), function () {
            var tmp_uid = $(this).attr('data-user-uid');
            var tmp_name = $(this).find("[data-name='option_name']").text();
            var item = {
                user_uid: tmp_uid,
                user_name: tmp_name
            }
            userArray.push(item);
        });

        if (userArray.length == 0) {
            alert('群組內至少需要一名成員!');
            return;
        }

        var users_json = JSON.stringify(userArray);

        var formData = {
            dept_uid: dept_uid,
            group_name: group_name,
            users_json: users_json
        }

        $.ajax({
            url: "/AuthApi/addNewGroup",
            type: "post",
            data: formData,
            success: function (data, textStatus, jqXHR) {
                if (data.ret == "yes") {
                    

                    $('#groupModal').modal('toggle');
                } else {
                    alert(data.message);

                    if (data.err_code == "99999") {
                        location.href = "/Root/Login";
                    }
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('網路或伺服器發生錯誤，請稍後重試!');
            }
        });
    });
});

function newMemberClick(dept_uid) {
    var formData = {
        dept_uid: dept_uid
    }

    $.ajax({
        url: "/AuthApi/noGroupUserList",
        type: "post",
        data: formData,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                $('#nogroup_memberlist').html('<div class="list-group-header"> 勾選要加入群組的成員 </div>');

                var obj = data.userList;
                var items = "";
                $.each(obj, function (i, item) {
                    var isExist = 'N';

                    $.each($('#nestableMember .dd-list li'), function () {
                        var tmp_uid = $(this).attr('data-user-uid');
                        if (tmp_uid == item.user_uid) {
                            isExist = 'Y';
                        }
                    });

                    if (isExist == 'N') {
                        items += '<label class="list-group-item custom-control custom-checkbox mb-0"><input id="chk_' + item.user_uid + '" name="memberChkList[]" type="checkbox"  value="' + item.user_uid + '" class="custom-control-input"> <span class="custom-control-label">' + item.user_name + '</span></label>';
                    }

                    
                });

                $('#nogroup_memberlist').append(items);

                $('#memberModal').modal('toggle');
            } else {
                alert(data.message);

                if (data.err_code == "99999") {
                    location.href = "/Root/Login";
                }
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('網路或伺服器發生錯誤，請稍後重試!');
        }
    });
}

function groupList() {
    var dept_uid = $('#dept_select').val();
    var formData = {
        dept_uid: dept_uid
    }
    $.ajax({
        url: "/AuthApi/groupList",
        type: "post",
        data: formData,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                $('#group_div').html('');

                var obj = data.groups;
                var items = "";
                $.each(obj, function (i, item) {


                    


                });
            } else {
                alert(data.message);

                if (data.err_code == "99999") {
                    location.href = "/Root/Login";
                }
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('網路或伺服器發生錯誤，請稍後重試!');
        }
    });
}
function deptList() {
    $.ajax({
        url: "/AuthApi/authDeptList",
        type: "post",
        data: null,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                var obj = data.depts;
                var items = "";
                $.each(obj, function (i, item) {


                    $("#dept_select").append($("<option>", {
                        value: item.dept_uid,
                        text: item.dept_name
                    }));


                });
            } else {
                alert(data.message);

                if (data.err_code == "99999") {
                    location.href = "/Root/Login";
                }
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('網路或伺服器發生錯誤，請稍後重試!');
        }
    });
}

function optionItemHtml(item) {
    var html = '';
    html += '<li class="dd-item dd-nodrag" data-id="1" data-user-uid="'+ item.user_uid +'">';
    html += '    <div class="dd-handle">';
    html += '            <span class="dd-nodrag drag-indicator"></span>';
    html += '                       <div data-name="option_name"> ' + item.user_name + ' </div>';
    html += '                       <div class="dd-nodrag btn-group ml-auto">';
    html += '                                   <button type="button" class="btn btn-sm btn-secondary" onclick="delMemberBtnClick(this);"><i class="far fa-trash-alt"></i></button>';
    html += '                       </div>';
    html += '    </div>';
    html += '</li > ';
    return html;
}

function delMemberBtnClick(obj) {
    if (confirm('再次確認要移除此成員?')) {
        tmpNestableItem = $(obj).parent().parent().find("[data-name='option_name']");
        var optionItem_name = $(obj).parent().parent().find("[data-name='option_name']").text();
        var user_uid = $(obj).parent().parent().parent().attr("data-user-uid");

        if ($('#client_method').val() == 'add') {
            tmpNestableItem.parent().parent().remove();
        }
    }
}