DataBase/script/js/vue-search-block.js

var db_table = {};

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
}

$.ajax({
    url: "./script/php/get_db_table.php",
    type: "GET",
    async: false,
    contentType: "application/json",
    dataType: "json"
}).done(function(data) {
    db_table = data;
}).error(function(error) {
    console.log(error);
});

db_table["notes"] = merge_object_by_key(db_table["notes"], "project_id", "notes");
var notes_button_list = [...new Set([].concat(...Object.values(db_table["notes"])))];

var search_data = {
    "category": get_value_list_by_key(db_table["category"], null, [], "category_id"),
    "project": get_value_list_by_key(db_table["project"], null, [], "project_id"),
    "type": get_value_list_by_key(db_table["type"], null, [], "type_id"),
    "notes": notes_button_list
};

const vm = Vue.createApp({});

vm.component('search-block', {
    data() {
        return {
            category_list: db_table["category"],
            project_list: db_table["project"],
            type_list: db_table["type"],
            notes_button_list: notes_button_list
        }
    },
    template: `<section class="panel">
            <div class="panel-body">
                <ul class="button-group nav nav-pills nav-pills-primary">
                    <li style="padding: 10px 15px;">
                        <label>工程類別:</label>
                    </li>
                    <select id="category_button">
                        <option value="any">any</option>
                        <category-button v-for="item in category_list" v-bind:object="item"></category-button>
                    </select>
                    <div class="multiselect">
                        <div class="selectBox">
                            <select id="c-select">
                                <option>選擇專案</option>
                            </select>
                            <div class="overSelect"></div>
                        </div>
                        <div class="checkboxes form-inline" style="display: none;">
                            <label for="category-any"><input type="checkbox" id="category-any" value="any" checked/> 全選</label>
                            <category-button v-for="item in category_list" :object="item"></category-button>
                        </div>
                    </div>
                </ul>

                <ul class="button-group nav nav-pills nav-pills-primary">
                    <li style="padding: 10px 15px;">
                        <label >專案類別:</label>
                    </li>
                    <div class="multiselect">
                        <div class="selectBox">
                            <select id="p-select">
                                <option>選擇專案</option>
                            </select>
                            <div class="overSelect"></div>
                        </div>
                        <div class="checkboxes form-inline" style="display: none;">
                            <label for="project-any"><input type="checkbox" id="project-any" value="any" checked/> 全選</label>
                            <project-button v-for="item in project_list" :object="item"></project-button>
                        </div>
                    </div>
                </ul>
                
                <div id="type">
                    <ul class="button-group nav nav-pills nav-pills-primary">
                        <li style="padding: 10px 15px;">
                            <label>文件類別:</label>
                        </li>
                        <select id="type-button">
                            <option value="any">any</option>
                            <type-button v-for="item in type_list" v-bind:object="item"></type-button>
                        </select>
                    </ul>
                </div>

                <div id="notes" hidden>
                    <ul class="button-group nav nav-pills nav-pills-primary">
                        <li style="padding: 10px 15px;">
                            <label>設計圖類別:</label>
                        </li>
                        <select id="notes-button">
                            <option value="any">any</option>
                            <option value="none">無符合條件選項</option>
                            <notes-button v-for="item in notes_button_list" v-bind:object="item"></notes-button>
                        </select>
                    </ul>
                </div>
                <div class="filter-search-bar">
                    <hr class="solid short">
                    <button class="search-by-filter" style="float:right">search</button>
                </div>
            </div>
            
        </section>`
});

vm.component("multi-select", {
    template:
        `<div class="multiselect">
            <div class="selectBox">
                <select id="c-select">
                    <option>選擇專案</option>
                </select>
                <div class="overSelect"></div>
            </div>
            <div class="checkboxes form-inline" style="display: none;">
                <label for="category-any"><input type="checkbox" id="category-any" value="any" checked/> 全選</label>
                <category-button v-for="item in category_list" :object="item"></category-button>
            </div>
        </div>`,
    props: {
        object: {
            category_name: String,
            category_id: String,
            list_id: String
        },
    },
    computed: {
        id_concat(){
            return "category" + this.object.category_id + "-" + this.object.list_id;
        }        
    }
});

vm.component("checkbox-option", {
    template: `<label class="category-button" v-bind:for="id_concat"><input type="checkbox" class="category-checkbox" :value=object.category_id :id="id_concat" checked/>{{" " + this.object.category_name}}</label>`,
    props: {
        object: {
            category_name: String,
            category_id: String,
            list_id: String
        },
    },
    computed: {
        id_concat(){
            return "category" + this.object.category_id + "-" + this.object.list_id;
        }        
    }
});

vm.component('category-button', {
    template: `<label class="category-button" v-bind:for="id_concat"><input type="checkbox" class="category-checkbox" :value=object.category_id :id="id_concat" checked/>{{" " + this.object.category_name}}</label>`,
    props: {
        object: {
            category_name: String,
            category_id: String,
            list_id: String
        },
    },
    computed: {
        id_concat(){
            return "category" + this.object.category_id + "-" + this.object.list_id;
        }        
    }
});

vm.component('project-button', {
    template: `<label class="project-button" v-bind:for="id_concat"><input type="checkbox" class="project-checkbox" :value=object.project_id :id="id_concat" checked/>{{" [" + this.object.project_id + "] " + this.object.project_name}}</label>`,
    props: {
        object: {
            project_id: String,
            project_name: String,
            category_id: String
        },
    },
    computed: {
        id_concat(){
            return "project" + this.object.project_id;
        }  
    }

});

vm.component('type-button', {
    template: `<option :value=object.type_id>{{object.type_name}}</option>`,
    props: {
        object: {
            type_id: String,
            type_name: String,
            filetype_id: String
        },
    }
});

vm.component('notes-button', {
    template: `<option v-bind:value=object>{{object}}</option>`,
    props: {
        object: String
    }
});