Adds filtering to Features page

Fixes #994
OrchardCMS · Sep 27, 2017 · 3e5d945 · 3e5d945
1 parent 9f091a0
commit 3e5d945
Showing 1 changed file with 36 additions and 10 deletions.
diff --git a/src/OrchardCore.Modules/OrchardCore.Features/Views/Admin/Features.cshtml b/src/OrchardCore.Modules/OrchardCore.Features/Views/Admin/Features.cshtml
@@ -1,4 +1,4 @@
-@model FeaturesViewModel
+@model FeaturesViewModel
 
 @{
 //var lifecycleStatusClassDictionary = new Dictionary<LifecycleStatus, string> {
@@ -65,10 +65,13 @@
             }
 
             <p>
-                <h2>@categoryName</h2>
-                <ul class="list-group">
+                @{
+                    var features = featureGroup.OrderBy(f => f.Descriptor.Name);
+                    var categoryFeatureNames = String.Join(" ", features.Select(f => f.Descriptor.Name));
+                }  
+                <h2 data-filter-value="@categoryFeatureNames">@categoryName</h2>
+                <ul class="list-group" data-filter-value="@categoryFeatureNames">
                     @{
-                        var features = featureGroup.OrderBy(f => f.Descriptor.Name);
                         foreach (var feature in features)
                         {
                             if (!Model.IsAllowed(feature.Descriptor.Extension))
@@ -88,7 +91,7 @@
                             var showDisable = true; // categoryName.ToString() != "Core";
                             var showEnable = Model.IsAllowed(feature.Descriptor.Extension) && !missingDependencies.Any() && feature.Descriptor.Id != "OrchardCore.Setup";
 
-                            <li class="list-group-item">
+                            <li class="list-group-item" data-filter-value="@featureName">
                                 <div class="properties">
                                     <div class="related">
                                         @if (showEnable && !feature.IsEnabled)
@@ -107,7 +110,7 @@
                                         <div class="checkbox">
                                             <h5>
                                                 <label for="@feature.Descriptor.Id">
-                                                    <input type="checkbox" name="featureIds" id="@feature.Descriptor.Id" value="@feature.Descriptor.Id" />
+                                                    <input type="checkbox" name="featureIds" id="@feature.Descriptor.Id" value="@feature.Descriptor.Id"/>
                                                     @featureName
                                                 </label>
                                             </h5>
@@ -117,7 +120,7 @@
                                     {
                                         <h5>@featureName</h5>
                                     }
-                                    
+
                                     <p class="text-muted">@feature.Descriptor.Description</p>
                                     <div>
                                         @if (feature.Descriptor.Dependencies != null && feature.Descriptor.Dependencies.Any())
@@ -140,9 +143,9 @@
                             </li>
                         }
                     }
-                    </ul>
-                    </p>
-                        }
+                </ul>
+            </p>
+        }
     }
 
     @*<li class="@featureClassName" id="@featureId" title="@string.Format(feature.IsEnabled ? "{0} is enabled" : "{0} is disabled", featureName)">
@@ -236,5 +239,28 @@
 <script at="Foot" type="text/javascript">
     //<![CDATA[
     var confirmDisableMessage = '@T["Disabling this feature will also disable the following dependent features. Are you sure you want to continue?"]'; //HttpUtility.JavaScriptStringEncode()
+
+
+    $(function() {
+        var searchBox = $('#search-box');
+
+        // On each keypress filter the list of features
+        searchBox.keyup(function(e) {
+            var search = $(this).val().toLowerCase();
+            var elementsToFilter = $("[data-filter-value]");
+
+            // On ESC, clear the search box and display all features
+            if (e.keyCode == 27 || search == '') {
+                searchBox.val('');
+                elementsToFilter.toggle(true);
+            } else {
+                elementsToFilter.each(function() {
+                    var text = $(this).data('filter-value').toLowerCase();
+                    var found = text.indexOf(search) > -1;
+                    $(this).toggle(found);
+                });
+            }
+        });
+    });
     //]]>
 </script>