Filter modules

Author: AlexeiShmidman

css/editor.css

@@ -48,6 +48,10 @@ ul {
   transform: rotate(90deg);
 }
 
+.filtered-out {
+  display: none;
+}
+
 .loading {
   animation: loadingAnimation 5s infinite;
 }

js/editor.js

@@ -6,6 +6,8 @@ $(document).ready(function () {
     $("#browseWorkspace").click(onBrowseWorkspaceHandler);
     $("#loadModulesBtn").click(onLoadModulesHandler);
     $("#importProjectBtn").click(onImportProjectHandler);
+    $("input#filterModules").on("input", onFilterChange);
+    $("#resetFilter").click(onResetFilter);
 });
 
 function onWindowMessageHandler (event) {
@@ -60,8 +62,30 @@ function onImportProjectHandler () {
         modules: modules
     });
 }
+
+function onFilterChange () {
+    const topLevel = $("div#moduleList > ul");
+    let filter = $("input#filterModules").val().toLowerCase().trim();
+    if (filter && filter.length > 0) {
+        filterModules(topLevel, filter);
+    } else {
+        resetFilteredModules();
+    }
+}
+
+function onResetFilter () {
+    clearFilter();
+    resetFilteredModules();
+}
 //-----------------------------------------
 
+function resetFilteredModules () {
+    const topLevel = $("div#moduleList > ul");
+    topLevel.find("li").each(function () {
+        $(this).removeClass("filtered-out");
+    });
+}
+
 function onSetWorkspaceHandler (message) {
     console.log('on set workspace');
     clearModules();
@@ -72,9 +96,20 @@ function disableImportBtn (enabled) {
     $("#importProjectBtn").attr("disabled", enabled);
 }
 
+function disableFilterTxt (enabled) {
+    $("input#filterModules").attr("disabled", enabled);
+    $("#resetFilter").attr("disabled", enabled);
+}
+
+function clearFilter () {
+    $("input#filterModules").val("");
+}
+
 function clearModules () {
     $("#moduleList").empty();
     disableImportBtn(true);
+    disableFilterTxt(true);
+    clearFilter();
 }
 
 function setLocation (elementId, message) {
@@ -98,10 +133,11 @@ function listModules (message) {
     if (modules !== null) {
         if (modules.length > 0) {
             disableImportBtn(false);
-        }
-        const topList = $("<ul></ul>").appendTo("div#moduleList");
-        for (i = 0; i < modules.length; i++) {
-            addNode(modules[i], topList);
+            disableFilterTxt(false);
+            const topList = $("<ul></ul>").appendTo("div#moduleList");
+            for (i = 0; i < modules.length; i++) {
+                addNode(modules[i], topList);
+            }
         }
     }
 }
@@ -143,6 +179,27 @@ function addNode (module, parentNode) {
     }
 }
 
+function filterModules (parentNode, filter) {
+    let filtered = false;
+    parentNode.children("li").each(function () {
+        const cbNode = $(this).children("input").first();
+        let filteredModule = cbNode.attr("name").toLowerCase().includes(filter);
+        const nested = $(this).children("ul").first();
+        if (nested && nested.length) {
+            const nestedFiltered = filterModules(nested, filter);
+            filteredModule = (filteredModule || nestedFiltered);
+        }
+        filtered = (filtered || filteredModule);
+        if (true === filteredModule) {
+            $(this).removeClass("filtered-out");
+        } else {
+            $(this).addClass("filtered-out");
+        }
+
+    });
+    return filtered;
+}
+
 function collectModules (parentNode, modules) {
     parentNode.children("li").each(function () {
         const cbNode = $(this).children("input").first();

src/editor.ts

@@ -78,12 +78,18 @@ export function getWebviewContent(panel: vscode.WebviewPanel, extCtx: vscode.Ext
         <div>
             <label for="workspaceLocation">Project WORKSPACE location</label>
             <input type="text" id="workspaceLocation" name="workspaceLocation" style="width: 50%; height: 1.5em;">
-            <button id="browseWorkspace" name="browseWorkspace"
-                style="height: 1.5em;">Browse...</button>
+            <button id="browseWorkspace" name="browseWorkspace" style="height: 1.5em;">Browse...</button>
+        </div>
+        <div>
+            <button id="loadModulesBtn" style="height: 1.5em;">Load modules</button>
+            <button id="importProjectBtn" style="height: 1.5em;" disabled>Start import</button>
+        </div>
+        <br><br>
+        <div>
+            <label for="filterModules">Filter modules:</label>
+            <input type="text" id="filterModules" name="filterModules" style="width: 50%; height: 1.5em;" disabled>
+            <button id="resetFilter" name="resetFilter" style="height: 1.5em;" disabled>Reset filter</button>
         </div>
-    
-        <button id="loadModulesBtn" style="height: 1.5em;">Load modules</button>
-        <button id="importProjectBtn" style="height: 1.5em;" disabled>Start import</button>
     
         <div id="moduleList" style="width: 100%; height: 50%; overflow-y: scroll;">
         </div>