Implement optional edit-list filter support

bower.json

@@ -15,6 +15,7 @@
     "datetimepicker": "~2.5.4",
     "SpinKit": "~1.2.5",
     "jQuery.stickyFooter": "https://github.com/miWebb/jQuery.stickyFooter.git#~1.2.3",
-    "bootstrap-sass": "^3.3.7"
+    "bootstrap-sass": "^3.3.7",
+    "list.js": "^1.3.0"
   }
 }

gulpfile.js

@@ -47,6 +47,7 @@ const jsDashboardLibs = [
     "bower_components/bootstrap-sass/assets/javascripts/bootstrap.js",
     "bower_components/Sortable/Sortable.js",
     "bower_components/datetimepicker/build/jquery.datetimepicker.full.js",
+    "bower_components/list.js/dist/list.js",
     "bower_components/simplemde/dist/simplemde.min.js"
 ];
 

readme.md

@@ -51,7 +51,8 @@ First add a function to generate the page:
             'sortcol' => false,
             'delete'  => true,
             'create'  => true,
-            'export'  => true
+            'export'  => true,
+            'filter'  => true
         ]);
     }
 ```
@@ -71,7 +72,8 @@ First add a function to generate the page:
             'sortcol' => 'order',
             'delete'  => false,
             'create'  => true,
-            'export'  => true
+            'export'  => true,
+            'filter'  => true
         ]);
     }
 ```
@@ -84,6 +86,7 @@ First add a function to generate the page:
 * `delete`: A `delete` button will appear in the list if this is set to `true`
 * `create`: A `new` button will appear in the heading if this is set to `true`
 * `export`: An `export` button will appear in the heading if this is set to `true`
+* `filter`: An input box will appear below the heading that can filter rows by input if this is set to `true`
 
 #### Editable Item
 

resources/assets/js/dashboard.js

@@ -193,10 +193,25 @@ function editListInit() {
         }
     };
 
+    // initialize filter functionality if the filter-input element exists
+    const filterInputInit = function() {
+        const $filter = $("#filter-input");
+
+        if ($filter.length) {
+            // empty the filter
+            $filter.val("");
+
+            const filterList = new List("edit-list-wrapper", {
+                valueNames: [ "title" ]
+            });
+        }
+    };
+
     newButtonInit();
     editButtonInit();
     deleteButtonInit();
     sortRowInit();
+    filterInputInit();
 }
 
 function editItemInit() {

resources/assets/sass/dashboard.scss

@@ -23,7 +23,7 @@ $fa-font-path: "/fonts";
 
 body {
     @include font-sans;
-    min-width: 350px;
+    min-width: 440px;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
@@ -87,6 +87,19 @@ body {
         padding-bottom: 0px;
         background-color: lighten($c-dashboard-light, 1%);
 
+        @media (max-width: $screen-xs-max) {
+            padding: 0px;
+        }
+
+        .search {
+            margin-bottom: 10px;
+            width: 100%;
+
+            @media (max-width: $screen-xs-max) {
+                margin-bottom: 0px;
+            }
+        }
+
         .help-text {
             margin-top: 10px;
             margin-bottom: 10px;
@@ -246,11 +259,16 @@ body {
             }
 
             .title-column {
+                float: left;
                 padding-top: 6px;
                 padding-bottom: 6px;
                 padding-left: 0px;
                 font-family: "Lucida Console", Monaco, monospace;
 
+                @media (max-width: $screen-xs-max) {
+                    font-size: 12px;
+                }
+
                 .column {
                     float: left;
                     margin-right: 10px;
@@ -258,6 +276,7 @@ body {
             }
 
             .button-column {
+                float: right;
                 padding-right: 0px;
                 padding-left: 0px;
                 text-align: right;
@@ -268,6 +287,11 @@ body {
                     height: 26px;
                     padding-top: 1px;
                     padding-bottom: 2px;
+
+                    @media (max-width: $screen-xs-max) {
+                        height: 20px;
+                        font-size: 11px;
+                    }
                 }
             }
         }

resources/views/dashboard/edit-list.blade.php

@@ -1,28 +1,34 @@
 @extends('dashboard.core')
 
 @section('dashboard-heading')
-    @if($export == true)
+    @if($export)
         <a href="/dashboard/export/{{ $model }}"><button type="button" class="btn btn-default">Export</button></a>
     @endif
 
-    @if($create == true)
+    @if($create)
         <button type="button" class="new-button btn btn-default">New</button>
     @endif
 @endsection
 
 @section('dashboard-body')
-    <ul id="edit-list" class="list-group edit-list" data-model="{{ $model }}" {{ $sortcol != false ? "data-sort=$sortcol" : '' }}>
+    <div id="edit-list-wrapper">
+        @if($filter)
+            <input id="filter-input" class="search" placeholder="Filter" />
+        @endif
+
+        <ul id="edit-list" class="list-group edit-list list" data-model="{{ $model }}" {{ $sortcol != false ? "data-sort=$sortcol" : '' }}>
             <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}" />
 
             @foreach($rows as $row)
                 <li class="list-group-item" data-id="{{ $row['id'] }}">
                     <div class="container-fluid">
                         <div class="row">
-                        <div class="col-xs-9 title-column">
+                            <div class="title-column">
                                 @if($sortcol != false)
                                     <i class="fa fa-bars sort-icon" title="Click and drag to reorder"></i>
                                 @endif
 
+                                <div class="title">
                                     @if(is_array($column))
                                         @foreach($column as $col)
                                             <div class="column">{{ $row[$col] }}</div>
@@ -35,11 +41,12 @@
                                         {{ $row[$column] }}
                                     @endif
                                 </div>
+                            </div>
 
-                        <div class="col-xs-3 button-column">
+                            <div class="button-column">
                                 <button type="button" class="edit-button btn btn-warning">Edit</button>
 
-                            @if($delete == true)
+                                @if($delete)
                                     <button type="button" class="delete-button btn btn-danger">Delete</button>
                                 @endif
                             </div>
@@ -48,4 +55,5 @@
                 </li>
             @endforeach
         </ul>
+    </div>
 @endsection