Added filtering to settings page

npm-shrinkwrap.json

@@ -7140,6 +7140,14 @@
         "pify": "^3.0.0"
       }
     },
+    "list.js": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/list.js/-/list.js-1.5.0.tgz",
+      "integrity": "sha1-pMv8goHd78Av2y0wyHSL+uJfvNo=",
+      "requires": {
+        "string-natural-compare": "^2.0.2"
+      }
+    },
     "load-json-file": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
@@ -11914,6 +11922,11 @@
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
     },
+    "string-natural-compare": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/string-natural-compare/-/string-natural-compare-2.0.3.tgz",
+      "integrity": "sha512-4Kcl12rNjc+6EKhY8QyDVuQTAlMWwRiNbsxnVwBUKFr7dYPQuXVrtNU4sEkjF9LHY0AY6uVbB3ktbkIH4LC+BQ=="
+    },
     "string-width": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",

package.json

@@ -35,6 +35,7 @@
     "jquery.iframe-transport": "^1.0.0",
     "less": "less/less.js#efa6eb5306f28a7ef7e235d79ce854b780345591",
     "less-loader": "^4.1.0",
+    "list.js": "^1.5.0",
     "papaparse": "^4.3.3",
     "select2": "4.0.13",
     "tether": "^1.4.0",

public/mix-manifest.json

@@ -38,7 +38,7 @@
     "/css/skins/skin-orange-dark.css.map": "/css/skins/skin-orange-dark.css.map?id=68b998638217fd08ef29",
     "/css/skins/skin-orange.css.map": "/css/skins/skin-orange.css.map?id=5cb51f4917038fd753ce",
     "/css/dist/all.css": "/css/dist/all.css?id=9c6b075989db098ee828",
-    "/js/dist/all.js": "/js/dist/all.js?id=cf5b3892cdfa09af2ca4",
+    "/js/dist/all.js": "/js/dist/all.js?id=537ba021a5bbcf29b28a",
     "/css/build/all.css": "/css/build/all.css?id=9c6b075989db098ee828",
-    "/js/build/all.js": "/js/build/all.js?id=cf5b3892cdfa09af2ca4"
+    "/js/build/all.js": "/js/build/all.js?id=537ba021a5bbcf29b28a"
 }

resources/views/settings/index.blade.php

@@ -11,16 +11,47 @@
 
 
 
-  <div class="row">
+  <style>
+    #searchinput {
+      width: 200px;
+    }
+    #searchclear {
+      position: absolute;
+      right: 5px;
+      top: 0;
+      bottom: 0;
+      height: 14px;
+      margin: auto;
+      font-size: 14px;
+      cursor: pointer;
+      color: #ccc;
+    }
+  </style>
+
+  <div class="row" id="setting-list">
+
+    <div class="col-md-3 col-md-offset-9 form-group">
+      <form>
+
+        <div class="btn-group">
+          <input id="searchinput" name="search" type="search" class="search form-control" placeholder="Filter by setting keyword">
+          <span id="searchclear" class="fa fa-times" aria-hidden="true"></span>
+        </div>
+
+      </form>
+    </div>
+
+    <div class="list">
 
     <div class="col-md-4 col-lg-3 col-sm-6 col-xl-1">
       <div class="box box-default">
         <div class="box-body text-center">
-          <h5>
+          <h5 class="name">
           <a href="{{ route('settings.branding.index') }}">
             <i class="fa fa-copyright fa-4x" aria-hidden="true"></i>
             <br><br>
             Branding
+            <span class="keywords" aria-hidden="true" style="display:none">footer, logo, print, theme, skin, header, colors, color, css</span>
           </a>
           </h5>
           <p class="help-block">Logo, Site Name</p>
@@ -32,11 +63,12 @@
     <div class="col-md-4 col-lg-3 col-sm-6 col-xl-1">
       <div class="box box-default">
         <div class="box-body text-center">
-          <h5>
+          <h5 class="name">
             <a href="{{ route('settings.general.index') }}">
               <i class="fa fa-wrench fa-4x" aria-hidden="true"></i>
               <br><br>
              General Settings
+              <span class="keywords" aria-hidden="true" style="display:none">company support, signature, acceptance, email format, username format, images, per page, thumbnail, eula,  tos, dashboard, privacy</span>
             </a>
           </h5>
           <p class="help-block">Default EULA and more</p>
@@ -48,11 +80,12 @@
     <div class="col-md-4 col-lg-3 col-sm-6 col-xl-1">
       <div class="box box-default">
         <div class="box-body text-center">
-          <h5>
+          <h5  class="name">
             <a href="{{ route('settings.security.index') }}">
               <i class="fa fa-lock fa-4x" aria-hidden="true"></i>
               <br><br>
               Security
+              <span class="keywords" aria-hidden="true" style="display:none">password, passwords, requirements, two factor, two-factor, common passwords, remote login, logout, authentication</span>
             </a>
           </h5>
           <p class="help-block">Two-factor, Password Restrictions</p>
@@ -63,11 +96,12 @@
     <div class="col-md-4 col-lg-3 col-sm-6 col-xl-1">
       <div class="box box-default">
         <div class="box-body text-center">
-          <h5>
+          <h5  class="name">
             <a href="{{ route('groups.index') }}">
               <i class="fa fa-group fa-4x" aria-hidden="true"></i>
               <br><br>
               Groups
+              <span class="keywords" aria-hidden="true" style="display:none">permissions, permission groups, authorization</span>
               </a>
           </h5>
           <p class="help-block">Account permission groups</p>
@@ -79,7 +113,7 @@
     <div class="col-md-4 col-lg-3 col-sm-6 col-xl-1">
       <div class="box box-default">
         <div class="box-body text-center">
-          <h5>
+          <h5  class="name">
             <a href="{{ route('settings.localization.index') }}">
               <i class="fa fa-globe fa-4x" aria-hidden="true"></i>
               <br><br>
@@ -96,7 +130,7 @@
     <div class="col-md-4 col-lg-3 col-sm-6 col-xl-1">
       <div class="box box-default">
         <div class="box-body text-center">
-          <h5>
+          <h5  class="name">
             <a href="{{ route('settings.alerts.index') }}">
               <i class="fa fa-bell fa-4x" aria-hidden="true"></i>
               <br><br>
@@ -111,7 +145,7 @@
     <div class="col-md-4 col-lg-3 col-sm-6 col-xl-1">
       <div class="box box-default">
         <div class="box-body text-center">
-          <h5>
+          <h5  class="name">
             <a href="{{ route('settings.slack.index') }}">
               <i class="fa fa-slack fa-4x" aria-hidden="true"></i>
               <br><br>
@@ -126,7 +160,7 @@
     <div class="col-md-4 col-lg-3 col-sm-6 col-xl-1">
       <div class="box box-default">
         <div class="box-body text-center">
-          <h5>
+          <h5  class="name">
             <a href="{{ route('settings.asset_tags.index') }}">
               <i class="fa fa-list-ol fa-4x" aria-hidden="true"></i>
               <br><br>
@@ -141,7 +175,7 @@
     <div class="col-md-4 col-lg-3 col-sm-6 col-xl-1">
       <div class="box box-default">
         <div class="box-body text-center">
-          <h5>
+          <h5  class="name">
             <a href="{{ route('settings.barcodes.index') }}">
               <i class="fa fa-barcode fa-4x" aria-hidden="true"></i>
               <br><br>
@@ -156,7 +190,7 @@
     <div class="col-md-4 col-lg-3 col-sm-6 col-xl-1">
       <div class="box box-default">
         <div class="box-body text-center">
-          <h5>
+          <h5  class="name">
             <a href="{{ route('settings.labels.index') }}">
               <i class="fa fa-tags fa-4x" aria-hidden="true"></i>
               <br><br>
@@ -172,7 +206,7 @@
     <div class="col-md-4 col-lg-3 col-sm-6 col-xl-1">
       <div class="box box-default">
         <div class="box-body text-center">
-          <h5>
+          <h5  class="name">
             <a href="{{ route('settings.ldap.index') }}">
               <i class="fa fa-sitemap fa-4x" aria-hidden="true"></i>
               <br><br>
@@ -187,7 +221,7 @@
     <div class="col-md-4 col-lg-3 col-sm-6 col-xl-1">
       <div class="box box-default">
         <div class="box-body text-center">
-          <h5>
+          <h5  class="name">
             <a href="{{ route('settings.backups.index') }}">
               <i class="fa fa-cloud-download fa-4x" aria-hidden="true"></i>
               <br><br>
@@ -203,7 +237,7 @@
     <div class="col-md-4 col-lg-3 col-sm-6 col-xl-1">
       <div class="box box-default">
         <div class="box-body text-center">
-          <h5>
+          <h5  class="name">
           <a href="{{ route('settings.oauth.index') }}">
             <i class="fa fa-user-secret fa-4x" aria-hidden="true"></i>
             <br><br>
@@ -219,11 +253,12 @@
       <div class="col-md-4 col-lg-3 col-sm-6 col-xl-1">
         <div class="box box-default">
           <div class="box-body text-center">
-            <h5>
+            <h5  class="name">
             <a href="{{ route('settings.phpinfo.index') }}">
                 <i class="fa fa-server fa-4x" aria-hidden="true"></i>
               <br><br>
               PHP
+              <span class="keywords" aria-hidden="true" style="display:none">phpinfo</span>
             </a>
             </h5>
             <p class="help-block">PHP System Info</p>
@@ -235,11 +270,12 @@
     <div class="col-md-4 col-lg-3 col-sm-6 col-xl-1">
       <div class="box box-danger">
         <div class="box-body text-center">
-          <h5>
+          <h5  class="name">
             <a href="{{ route('settings.purge.index') }}">
               <i class="fa fa-trash fa-4x" aria-hidden="true"></i>
               <br><br>
               Purge
+              <span class="keywords" aria-hidden="true" style="display:none">permanently delete</span>
             </a>
           </h5>
           <p class="help-block">Purge Deleted Records</p>
@@ -304,8 +340,27 @@
   </div><!--/col-md-8-->
 </div><!--/row-->
 
+  @section('moar_scripts')
+<script nonce="{{ csrf_token() }}">
 
 
+
+  var options = {
+    valueNames: [ 'name', 'keywords', 'summary', 'help-block']
+  };
+
+  var userList = new List('setting-list', options);
+
+  $("#searchclear").click(function(){
+    $("#searchinput").val('');
+    userList.search();
+  });
+
+
+
+</script>
+  @endsection
+
 @stop
 
 

webpack.mix.js

@@ -43,9 +43,11 @@ mix
     './node_modules/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js',
     './node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.js',
     './node_modules/icheck/icheck.js',
+    './node_modules/list.js/dist/list.js',
     './node_modules/ekko-lightbox/dist/ekko-lightbox.js',
     './resources/assets/js/app.js', //this is part of AdminLTE
     './resources/assets/js/snipeit.js', //this is the actual Snipe-IT JS
+
     './resources/assets/js/snipeit_modals.js'
 ],
     './public/js/dist/all.js');