DataBase/script/js/search.js

$(function() {
    $(".selectBox").on("click", function (e) {
        if($(this).siblings(".checkboxes").find("label").css("display") == "block") {
            if($(this).siblings(".checkboxes").css("display") == "none") {
                $(".checkboxes").css("display", "none");
                $(this).siblings(".checkboxes").css("display", "block");
            } else {
                $(".checkboxes").css("display", "none");
            }
        }
    });

    $("body").on("click", function (event) {
        if (!$(event.target).hasClass("overSelect")) {
            if (($(event.target).closest(".checkboxes").length == 0)) {
                $(".checkboxes").css("display", "none");
            }
        }
    });

    $(".multiselect #category-any").on("change", function() {
        $("#notes").slideUp(200);
        if(this.checked) {
            search_data["category"] = get_value_list_by_key(db_table["category"], null, -1, "category_id");
            search_data["project"] = get_value_list_by_key(db_table["project"], null, -1, "project_id");
            search_data["type"] = get_value_list_by_key(db_table["type"], null, -1, "type_id");
            $(".category-option").prop("checked", true);
            show_select_option("project", search_data["project"], "p", true);
            $("#project-any").prop("checked", true);
            show_select_option("type", search_data["type"], "t", true);
            $("#type-any").prop("checked", true);

        } else {
            search_data["category"] = [];
            search_data["project"] = [];
            search_data["type"] = [];
            $(".category-option").prop("checked", false);
            show_select_option("project", search_data["project"], "p", true);
            show_select_option("type", search_data["type"], "t", true);
        }

        search_data["notes"] = [];
        search_data["project"].forEach(element => {
            search_data["notes"] = search_data["notes"].concat(db_table["notes"][element]);
        });
        notes_show_id_list = [];
        search_data["notes"].forEach(element => {
            for(i=0; i<notes_button_list.length; i++) {
                if(notes_button_list[i] == element) {
                    notes_show_id_list.push(i);
                }
            }
        });
        show_select_option("notes", notes_show_id_list, "n", true);
        set_select_text("category", "false");
    });

    $(".multiselect .category-option").on("change", function() {
        $("#notes").slideUp(200);
        category_id_list = [];
        list_id_list = [];

        //set search data
        if (this.value == "any") {
            search_data["category"] = get_value_list_by_key(db_table["category"], null, -1, "category_id");
            search_data["project"] = get_value_list_by_key(db_table["project"], null, -1, "project_id");
            search_data["type"] = get_value_list_by_key(db_table["type"], null, -1, "type_id");
        } else {
            check_list = get_multi_checkbox_check_list("category-option");
            check_list.forEach(element => {
                if(element != "any") {
                    category_id_list.push(element.split("-")[0].replace("c", ""));
                    list_id_list.push(element.split("-")[1].replace("l", ""));
                }
            });
            search_data["category"] = category_id_list;
            search_data["project"] = get_value_list_by_key(db_table["project"], "category_id", category_id_list, "project_id");
            target_type_id_list = get_value_list_by_key(db_table["category_type"], "list_id", list_id_list, "category_list");
            search_data["type"] = merge_string_to_list(target_type_id_list);
        }


        //set view
        show_select_option("project", search_data["project"], "p", true);
        $("#project-any").prop("checked", true);
        show_select_option("type", search_data["type"], "t", true);
        $("#type-any").prop("checked", true);
        
        if(category_id_list.length < db_table["category"].length) {
            $("#category-any").prop("checked", false);
        } else {
            $("#category-any").prop("checked", true);
        }

        search_data["notes"] = [];
        search_data["project"].forEach(element => {
            search_data["notes"] = search_data["notes"].concat(db_table["notes"][element]);
        });
        notes_show_id_list = [];
        search_data["notes"].forEach(element => {
            for(i=0; i<notes_button_list.length; i++) {
                if(notes_button_list[i] == element) {
                    notes_show_id_list.push(i);
                }
            }
        });
        show_select_option("notes", notes_show_id_list, "n", true);
        set_select_text("category", "false");
    });

    $(".multiselect #project-any").on("change", function() {
        $("#notes").slideUp(200);
        if(this.checked) {
            search_data["project"] = [];
            $(".project-button:visible").prop("checked", true);
            $(".project-button:visible").each(function(){
                search_data["project"].push($(this).find("input").attr("id").replace("p", ""));
                $(this).find("input").prop("checked", true);
            });
        } else {
            search_data["project"] = [];
            $(".project-option").prop("checked", false);
        }
        set_select_text("project", false);

    });

    $(".multiselect .project-option").on("change", function() {
        $("#notes").slideUp(200);
        search_data["project"] = get_multi_checkbox_check_list("project-option", "p");
        set_select_text("project", false);

        search_data["notes"] = [];
        search_data["project"].forEach(element => {
            search_data["notes"] = search_data["notes"].concat(db_table["notes"][element]);
        });
        notes_show_id_list = [];
        search_data["notes"].forEach(element => {
            for(i=0; i<notes_button_list.length; i++) {
                if(notes_button_list[i] == element) {
                    notes_show_id_list.push(i);
                }
            }
        });
        show_select_option("notes", notes_show_id_list, "n", true);

        if($(".project-option:checked").length < $(".project-button:visible").length) {
            $("#project-any").prop("checked", false);
        } else {
            $("#project-any").prop("checked", true);
        }

        reset_checkbox("type", "t", true);
    });

    $(".multiselect #type-any").on("change", function() {
        $("#notes").slideUp(200);
        if(this.checked) {
            search_data["type"] = [];
            $(".type-button:visible").prop("checked", true);
            $(".type-button:visible").each(function(){
                search_data["type"].push($(this).find("input").attr("id").replace("t", ""));
                $(this).find("input").prop("checked", true);
            });
        } else {
            search_data["type"] = [];
            $(".type-option").prop("checked", false);
        }
        set_select_text("type", false);
        reset_checkbox("notes", "n", true);
    });

    $(".multiselect .type-option").on("change", function() {
        search_data["type"] = get_multi_checkbox_check_list("type-option", "t");
        set_select_text("type", false);

        if($(".type-option:checked").length < $(".type-button:visible").length) {
            $("#type-any").prop("checked", false);
        } else {
            $("#type-any").prop("checked", true);
        }

        if($("#t3").prop("checked")) {
            $("#notes").slideDown(200);
            reset_checkbox("notes", "n", true);
        } else {
            $("#notes").slideUp(200);
        }
    });

    $(".multiselect #notes-any").on("change", function() {
        if(this.checked) {
            search_data["notes"] = [];
            $(".notes-button:visible").prop("checked", true);
            $(".notes-button:visible").each(function(){
                search_data["notes"].push(notes_button_list[parseInt($(this).find("input").attr("id").replace("n", ""))]);
                $(this).find("input").prop("checked", true);
            });
        } else {
            search_data["notes"] = [];
            $(".notes-option").prop("checked", false);
        }
        set_select_text("notes", false);
    });

    $(".multiselect .notes-option").on("change", function() {
        search_data["notes"] = get_multi_checkbox_check_list("notes-option", "n");
        set_select_text("notes", false);

        if($(".notes-option:checked").length < $(".notes-button:visible").length) {
            $("#notes-any").prop("checked", false);
        } else {
            $("#notes-any").prop("checked", true);
        }
    });
});

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 get_multi_checkbox_check_list(checkbox_class, name_replace) {
    output = [];
    var $select_option = $("."+checkbox_class+":checked");
    $select_option.each(function(){
        if(checkbox_class == "notes-option") {
            output.push($(this).attr('value'));
        } else {
            output.push($(this).attr('id').replace(name_replace, ""));
        }
        
    });
    return output;
}

function set_select_text(address, lock) {
    //unlock select bar
    $("#"+address+" select").prop("disabled", false);
    //get check number
    check_length = $("."+address+"-option:checked").length;

    //get option name that show on select bar
    show_list = [];
    $("."+address+"-option:checked").each(function() {
        show_list = show_list.concat($(this).attr("value"));
    });

    //set select bar text
    if(check_length == 0){
        if(lock) {
            $("#"+address+" select option").text("無符合條件選項");
            $("#"+address+" select").prop("disabled", true);
        } else {
            $("#"+address+" select option").text("未選擇任何專案");
        }
    } else {
        if(check_length > 2) {
            $("#"+address+" select option").text("已選擇 "+check_length+" 項");
        } else {
            $("#"+address+" select option").text(show_list);
        }
    }
}

function show_select_option(address, show_list, id_name, lock) {
    //init option
    $("#" + address + " .checkboxes input").prop("checked", false);
    $("#" + address + " .checkboxes label").css("display", "none");

    //show option
    show_list.forEach(element => {
        $("#"+id_name+element).prop("checked", true);
        $("#"+id_name+element).parent().css("display", "block");
    });

    if(show_list.length) {
        $("#" + address + " #" + address + "-any").prop("checked", true);
        $("#" + address + " #" + address + "-any").parent().css("display", "block");
    }

    set_select_text(address, lock);
}

function reset_checkbox(checkbox_class, id_name, lock) {
    search_data[checkbox_class] = [];

    $("#"+checkbox_class+" ." + checkbox_class + "-button").each(function() {
        if($(this).css("display") == "block") {
            $(this).find("input").prop("checked", true);
            if(checkbox_class == "notes") {
                search_data[checkbox_class] = search_data[checkbox_class].concat($(this).find("input").attr("value"));
            } else {
                search_data[checkbox_class] = search_data[checkbox_class].concat($(this).find("input").attr("id").replace(id_name, ""));
            }
        }
    });
    $("#"+checkbox_class+" #" + checkbox_class + "-any").prop("checked", true);
    set_select_text(checkbox_class, lock)
}