|
|
@@ -16,12 +16,11 @@ 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": db_table["category"],
|
|
|
- "project": db_table["project"],
|
|
|
- "type": db_table["type"],
|
|
|
+ "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
|
|
|
};
|
|
|
-var project_check = [];
|
|
|
|
|
|
const vm = Vue.createApp({});
|
|
|
|
|
|
@@ -40,8 +39,8 @@ vm.component('search-block', {
|
|
|
<li style="padding: 10px 15px;">
|
|
|
<label>工程類別:</label>
|
|
|
</li>
|
|
|
- <select id="category_button" onchange="category_onchange(this)">
|
|
|
- <option>any</option>
|
|
|
+ <select id="category_button">
|
|
|
+ <option value="any">any</option>
|
|
|
<category-button v-for="item in category_list" v-bind:object="item"></category-button>
|
|
|
</select>
|
|
|
</ul>
|
|
|
@@ -51,24 +50,25 @@ vm.component('search-block', {
|
|
|
<label >專案類別:</label>
|
|
|
</li>
|
|
|
<div class="multiselect">
|
|
|
- <div class="selectBox" onclick="showCheckboxes()">
|
|
|
+ <div class="selectBox">
|
|
|
<select id="p-select">
|
|
|
<option>選擇專案</option>
|
|
|
</select>
|
|
|
<div class="overSelect"></div>
|
|
|
</div>
|
|
|
- <div id="checkboxes" class="form-inline">
|
|
|
+ <div id="checkboxes" class="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" hidden>
|
|
|
+ <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" onchange="type_onchange(this)">
|
|
|
+ <select id="type-button">
|
|
|
<option value="any">any</option>
|
|
|
<type-button v-for="item in type_list" v-bind:object="item"></type-button>
|
|
|
</select>
|
|
|
@@ -80,7 +80,7 @@ vm.component('search-block', {
|
|
|
<li style="padding: 10px 15px;">
|
|
|
<label>設計圖類別:</label>
|
|
|
</li>
|
|
|
- <select id="notes-button" onchange="notes_onchange(this)">
|
|
|
+ <select id="notes-button">
|
|
|
<option value="any">any</option>
|
|
|
<notes-button v-for="item in notes_button_list" v-bind:object="item"></notes-button>
|
|
|
</select>
|
|
|
@@ -112,45 +112,18 @@ vm.component('category-button', {
|
|
|
});
|
|
|
|
|
|
vm.component('project-button', {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- project_check: project_check
|
|
|
- }
|
|
|
- },
|
|
|
- template: `<label class="project-button" v-bind:for="concat">
|
|
|
- <input type="checkbox" class="checkbox" :value=object.project_id
|
|
|
- :id="concat" @change="changeText"/>{{object.project_name}}
|
|
|
- </label>`,
|
|
|
+ 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
|
|
|
},
|
|
|
- },
|
|
|
- methods: {
|
|
|
- changeText(event) {
|
|
|
- if(event.target.checked) {
|
|
|
- project_check.push(this.object.project_id);
|
|
|
- $("#p-select option").text(project_check);
|
|
|
- } else {
|
|
|
- project_check.splice(project_check.indexOf(this.object.project_id), 1);
|
|
|
- $("#p-select option").text(project_check);
|
|
|
- }
|
|
|
-
|
|
|
- if(!project_check.length){
|
|
|
- $("#p-select option").text("未選擇任何專案");
|
|
|
- }
|
|
|
-
|
|
|
- $("#notes").slideUp(200);
|
|
|
- document.getElementById('notes-button').value="any";
|
|
|
- document.getElementById('type_button').value="any";
|
|
|
- }
|
|
|
},
|
|
|
computed: {
|
|
|
- concat(){
|
|
|
- return 'project'+ this.object.project_id;
|
|
|
- }
|
|
|
+ id_concat(){
|
|
|
+ return "project" + this.object.project_id;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
});
|
|
|
@@ -166,7 +139,6 @@ vm.component('type-button', {
|
|
|
}
|
|
|
});
|
|
|
|
|
|
-
|
|
|
vm.component('notes-button', {
|
|
|
template: `<option v-bind:value=object>{{object}}</option>`,
|
|
|
props: {
|
|
|
@@ -174,176 +146,4 @@ vm.component('notes-button', {
|
|
|
}
|
|
|
});
|
|
|
|
|
|
-function category_onchange(obj) {
|
|
|
- var category_id = obj.value.split(',')[0];
|
|
|
- var list_id = obj.value.split(',')[1];
|
|
|
-
|
|
|
- if(category_id == "any") {
|
|
|
- search_data["project"] = db_table["project"];
|
|
|
- search_data["type"] = db_table["type"];
|
|
|
-
|
|
|
- $("#type").slideUp(200);
|
|
|
- } else {
|
|
|
- search_data["project"] = get_list_by_key(db_table["project"], "category_id", [category_id]);
|
|
|
- if(search_data["project"].length) {
|
|
|
- $("#p-select option").text("選擇專案");
|
|
|
- project_id_list = string_concat_list("project", get_object_value_to_list(search_data["project"], "project_id"));
|
|
|
- show_multi_checkbox("project-button", project_id_list);
|
|
|
- $("#type").slideDown(200);
|
|
|
- } else {
|
|
|
- $("#p-select option").text("無符合條件選項");
|
|
|
- $("#p-select option").disabled = false;
|
|
|
- }
|
|
|
-
|
|
|
- target_type_id_list = get_list_by_key(db_table["category_type"], "list_id", [list_id]);
|
|
|
- target_type_id = merge_obj_list_value(target_type_id_list, "category_list").split(",");
|
|
|
- search_data["type"] = get_list_by_key(db_table["type"], "type_id", target_type_id)
|
|
|
- }
|
|
|
- $("#notes").slideUp(200);
|
|
|
- document.getElementById('notes-button').value="any";
|
|
|
-
|
|
|
- type_id_list = get_object_value_to_list(search_data["type"], "type_id");
|
|
|
- show_select_option("type_button", type_id_list);
|
|
|
- document.getElementById('type_button').value="any";
|
|
|
-
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-function type_onchange(obj) {
|
|
|
- var type_id = obj.value;
|
|
|
- var show_notes_list = [];
|
|
|
- if(type_id == "3") {
|
|
|
- project_id_list = get_multiselect_value("checkbox");
|
|
|
- project_id_list.forEach(element => {
|
|
|
- show_notes_list = show_notes_list.concat(db_table["notes"][element.split("project")[1]]);
|
|
|
- });
|
|
|
- show_notes_list = [...new Set(show_notes_list)];
|
|
|
- show_select_option("notes-button", show_notes_list);
|
|
|
- $("#notes").slideDown(200);
|
|
|
- } else {
|
|
|
- $("#notes").slideUp(200);
|
|
|
- document.getElementById('notes-button').value="any";
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-function notes_onchange(obj) {
|
|
|
- var notes_name = obj.value;
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-function get_value_list_by_key(obj_list, key, target_value) {
|
|
|
- output_list = [];
|
|
|
- obj_list.forEach(element => {
|
|
|
- if(target_value.length) {
|
|
|
- if(target_value.includes(element[key].toString())) {
|
|
|
- output_list.push(element);
|
|
|
- }
|
|
|
- } else {
|
|
|
- output_list.push(element);
|
|
|
- }
|
|
|
- });
|
|
|
- output_list = [...new Set(output_list)];
|
|
|
- return output_list;
|
|
|
-}
|
|
|
-
|
|
|
-function get_list_by_key(obj, key_name, value_list) {
|
|
|
- output_list = [];
|
|
|
- obj.forEach(element => {
|
|
|
- if(value_list.includes(element[key_name].toString())) {
|
|
|
- output_list.push(element)
|
|
|
- }
|
|
|
- });
|
|
|
- output_list = [...new Set(output_list)];
|
|
|
- return output_list;
|
|
|
-}
|
|
|
-
|
|
|
-function get_object_value_to_list(obj, key) {
|
|
|
- value_list = [];
|
|
|
- for(i=0; i<obj.length; i++){
|
|
|
- value_list.push(obj[i][key]);
|
|
|
- }
|
|
|
- return value_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_obj_list_value(obj_list, key) {
|
|
|
- output = "";
|
|
|
- obj_list.forEach(element => {
|
|
|
- output = output.concat(element[key]);
|
|
|
- });
|
|
|
- return output;
|
|
|
-}
|
|
|
-
|
|
|
-function string_concat_list(name, target_list) {
|
|
|
- output_list = [];
|
|
|
- target_list.forEach(element => {
|
|
|
- output_list.push(name + element);
|
|
|
- });
|
|
|
- return output_list;
|
|
|
-}
|
|
|
-
|
|
|
-var expanded = false;
|
|
|
-function showCheckboxes() {
|
|
|
- var checkboxes = document.getElementById("checkboxes");
|
|
|
- if (!expanded) {
|
|
|
- checkboxes.style.display = "block";
|
|
|
- expanded = true;
|
|
|
- } else {
|
|
|
- checkboxes.style.display = "none";
|
|
|
- expanded = false;
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
-function show_multi_checkbox(class_name, show_list) {
|
|
|
- //initial checkbox to uncheck
|
|
|
- var init_checkboxes = document.getElementsByClassName("checkbox");
|
|
|
- for (var x = 0; x < init_checkboxes.length; x++) {
|
|
|
-
|
|
|
- init_checkboxes[x].checked = false;
|
|
|
- }
|
|
|
-
|
|
|
- //hide all option
|
|
|
- var checkboxes = document.getElementsByClassName(class_name);
|
|
|
- if (checkboxes) {
|
|
|
- for (var x = 0; x < checkboxes.length; x++) {
|
|
|
- checkboxes[x].style.display = 'none';
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- //show target option
|
|
|
- show_list.forEach(element => {
|
|
|
- document.getElementById(element).parentElement.style.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();
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-function get_multiselect_value(checkbox_class){
|
|
|
- output = [];
|
|
|
- var checkboxes = document.getElementsByClassName(checkbox_class);
|
|
|
- for (var x = 0; x < checkboxes.length; x++) {
|
|
|
- if(checkboxes[x].checked) {
|
|
|
- output.push(checkboxes[x].id);
|
|
|
- }
|
|
|
- }
|
|
|
- return output;
|
|
|
-}
|
