DataBase/script/js/search.js

$(function() {
    $(".search-by-filter").on("click", function (e) {
        console.log($("#category_button").val());
    });

    $(".selectBox").on("click", function (e) {
        if(get_value_list_by_key(db_table["project"], "category_id", search_data["category"], "project_id").length) {
            if (checkboxes.style.display == "none") {
                checkboxes.style.display = "block";
            } else {
                checkboxes.style.display = "none";
            }
        }
    });

    $("body").on("click", function (event) {
        test = $(event.target);
        if (!$(event.target).hasClass("overSelect")) {
            if (($(event.target).closest("#checkboxes").length == 1)) {
                checkboxes.style.display = "block";
            } else {
                checkboxes.style.display = "none";
            }
        }
    });

    $("#category_button").on("change", function() {
        var category_id = [this.value.split(',')[0]];
        var list_id = [this.value.split(',')[1]];
        $("#p-select").prop("disabled", false);
        $('#type-button').prop("value", "any");
        $("#notes").slideUp(200);
        $('#notes-button').prop("value", "any");
        //set search_data
        if (this.value == "any") {
            search_data["category"] = get_value_list_by_key(db_table["category"], null, [], "category_id");
            search_data["project"] = get_value_list_by_key(db_table["project"], null, [], "project_id");
            search_data["type"] = get_value_list_by_key(db_table["type"], null, [], "type_id");
        } else {
            search_data["category"] = category_id;
            search_data["project"] = get_value_list_by_key(db_table["project"], "category_id", category_id, "project_id");
            target_type_id_list = get_value_list_by_key(db_table["category_type"], "list_id", list_id, "category_list");
            search_data["type"] = merge_string_to_list(target_type_id_list);
        }

        //show project option
        project_id_list = string_concat_list("project", search_data["project"]);
        show_multi_checkbox("project-button", project_id_list);
        $("#project-any").prop("checked", true);
        set_multi_checkbox_text("project-checkbox", "project")
        if (!search_data["project"].length) {
            $("#p-select").prop("disabled", true);
            $("#p-select option").text("無符合條件選項");
        }

        //show type option
        show_select_option("type-button", search_data["type"]);

        //init notes
        search_data["notes"] = notes_button_list;
    });

    $("#project-any").on("change", function() {
        if(this.checked) {
            search_data["project"] = get_value_list_by_key(db_table["project"], "category_id", search_data["category"], "project_id");
            project_id_list = string_concat_list("project", search_data["project"]);
            show_multi_checkbox("project-button", project_id_list);
        } else {
            search_data["project"] = [];
            $(".project-checkbox").prop("checked", false);
        }
        set_multi_checkbox_text("project-checkbox", "project");
    });

    $(".project-checkbox").on("change", function() {
        $('#type-button').prop("value", "any");
        $("#notes").slideUp(200);
        $('#notes-button').prop("value", "any");        

        check_option = get_multi_checkbox_check_list("project-checkbox", "project");
        if(check_option.length < get_value_list_by_key(db_table["project"], "category_id", search_data["category"], "project_id").length) {
            $("#project-any").prop("checked", false);
        } else {
            $("#project-any").prop("checked", true);
        }

        search_data["project"] = check_option;
        search_data["notes"] = notes_button_list;
        set_multi_checkbox_text("project-checkbox", "project");
    });

    $("#type-button").on("change", function() {
        var type_id = this.value;
        var show_notes_list = [];

        if (type_id == "3") {
            project_id_list = get_multi_checkbox_check_list("project-checkbox", "project");
            project_id_list.forEach(element => {
                show_notes_list = show_notes_list.concat(db_table["notes"][element]);
            });
            show_notes_list = [...new Set(show_notes_list)];
            show_select_option("notes-button", show_notes_list);
            $("#notes").slideDown(200);
        } else {
            $("#notes").slideUp(200);
            $('#notes-button').prop("value", "any");
        }

        if(type_id == "any") {
            search_data["type"] = db_table["type"];
        } else {
            search_data["type"] = [type_id];
        }
        search_data["notes"] = notes_button_list;
    });

    $("#notes-button").on("change", function() {
        var notes_name = this.value;
        if(notes_name == "any") {
            search_data["notes"] = notes_button_list;
        } else {
            search_data["notes"] = [notes_name];
        }
        });

});

//sql
function get_value_list_by_key(obj_list, key_search, target_value, key_save) {
    output_list = [];
    obj_list.forEach(element => {
        if (target_value.length) {
            target_value.forEach(e => {
                if(e.toString() == element[key_search].toString()) {
                    output_list.push(element[key_save]);
                }
            });
        } else {
            output_list.push(element[key_save]);
        }
    });
    output_list = [...new Set(output_list)];
    return output_list;
}

function merge_object_by_key(obj, key, value) {
    output_object = {};
    while (obj.length > 0) {
        pop_out = obj.pop();
        if (output_object[pop_out[key]] == undefined) {
            output_object[pop_out[key]] = [pop_out[value]];
        } else {
            output_object[pop_out[key]].push(pop_out[value]);
        }
    }
    return output_object
}

function merge_string_to_list(string_list) {
    output = [];
    string_list.forEach(element => {
        output = output.concat(element.split(","));
    });
    return output;
}

function string_concat_list(name, target_list) {
    output_list = [];
    target_list.forEach(element => {
        output_list.push(name + element);
    });
    return output_list;
}

function show_multi_checkbox(class_name, show_list) {
    $("."+class_name+" input").prop("checked", false);
    $("."+class_name).css("display", "none");
    
    show_list.forEach(element => {
        $("#"+element).prop("checked", true);
        $("#"+element).parent().css("display", "block");
    });
}

function show_select_option(select_id, show_list) {
    $("#" + select_id + " option").hide();

    $("#" + select_id + " option[value=any]").show();
    show_list.forEach(element => {
        $("#" + select_id + " option[value=" + element + "]").show();
    });
}

//set multi_checkbox text
function set_multi_checkbox_text(checkbox_class, name_replace) {
    check_list = get_multi_checkbox_check_list(checkbox_class, name_replace);

    if(check_list.length > 3){
        $("#p-select option").text("已選擇 "+check_list.length+" 項");
    } else {
        if(check_list.length == 0) {
            $("#p-select option").text("未選擇任何專案");
        } else {
            $("#p-select option").text(check_list);
        }
    }
}

//get check_list
function get_multi_checkbox_check_list(checkbox_class, name_replace) {
    output = [];
    var $select_option = $("."+checkbox_class+":checked");
    $select_option.each(function(){
        output.push($(this).attr('id').replace(name_replace, ""));
    });
    return output;
}