new: [website] search bar in config page

webiste/app/templates/modules_config.html

@@ -6,17 +6,24 @@
 
 {% block content %}
     <div id="top"> <h1>Modules Config</h1> </div>
-
+    <small>[[modules_config.length]] modules found</small>
     <hr>
+    
+
+    <div style="width:50%; transform: translate(50%, 0);">
+        <div>
+            <input type="search" @input="onInput" id="search_modules" placeholder="Search modules" autofocus class="form-control" style="border-radius: 5px;" />
+        </div>
+    </div>
     <br>
 
-    <div class="row">
+    <div class="row" style="margin-bottom: 100px;">
         <div class="col" style="flex: 0 0 50%">
             <div class="list-group">
                 <div v-for="module in modules_config" style="display:flex; ">
                     <input v-if="module.is_active || module.is_active == null" type="checkbox" style="margin-right: 5px;" checked @click="change_status(module)">
                     <input v-else type="checkbox" style="margin-right: 5px;" @click="change_status(module)">
-                    <a class="list-group-item list-group-item-action" style="border-radius: 10px;" @click="display_config(module)">
+                    <a class="list-group-item list-group-item-action" style="border-radius: 10px;" :title="module.description" @click="display_config(module)">
                         [[module.name]]
                         <i v-if="!module.config.length" style="color: brown;">No config</i>
                     </a>
@@ -60,11 +67,13 @@
         setup() {
             const modules_config = ref({})
             const current_config = ref({})
+            let loc_modules = {}
 
             async function query_modules(){
                 let res = await fetch("/modules_config_data")
                 let loc = await res.json()
                 modules_config.value = loc
+                loc_modules = modules_config.value
             }
             query_modules()
 
@@ -136,6 +145,18 @@
             }
 
 
+            function onInput(e){
+				modules_config.value = []
+				if(e.target.value){
+                    modules_config.value = loc_modules.filter((module) => {
+                        return module.name.toLowerCase().includes(e.target.value.toLowerCase())
+                    })
+				}else{
+                    modules_config.value = loc_modules
+                }
+			}
+
+
             return {
                 message_list,
                 modules_config,
@@ -144,7 +165,8 @@
                 close_panel,
                 change_config,
                 change_status,
-                check_request_on_query
+                check_request_on_query,
+                onInput
             }
         }
     }).mount('.container')