add search-field and searching to users panel

2 files changed, 67 insertions, 19 deletions

diff --git a/src/guff/views/ecrs/test/auth.ecr b/src/guff/views/ecrs/test/auth.ecr
index ab9f552..00cc918 100644
--- a/src/guff/views/ecrs/test/auth.ecr
+++ b/src/guff/views/ecrs/test/auth.ecr
@@ -27,25 +27,8 @@
         <div class='btn-group btn-group-xs pull-right'>
           <a
             href='#'
-            id='reload'
-            class='btn btn-default btn-xs'
-            title='Reload users.'
-          >
-            <span class='loading'>
-              <i class='fa fa-refresh'></i>
-            </span>
-
-            <span class='loading hidden'>
-              <i class='fa fa-spinner fa-spin'></i>
-            </span>
-          </a><!-- #reload -->
-        </div><!-- btn-group -->
-
-        <div class='btn-group btn-group-xs pull-right'>
-          <a
-            href='#'
             class='btn btn-primary btn-xs'
-            title='Add new user.'
+            title='Create new user.'
             data-toggle='modal'
             data-target='#add-dialog'
           >
@@ -55,6 +38,67 @@
         </div><!-- btn-group -->
       </div><!-- panel-heading -->
 
+      <div class='panel-heading'>
+        <div class='btn-toolbar'>
+          <div class='btn-group btn-group-sm'>
+            <a
+              href='#'
+              class='btn btn-default'
+              title='Filter users by role.'
+              data-toggle='dropdown'
+            >
+              Role: <span></span>
+              <i class='fa fa-caret-down'></i>
+            </a>
+
+            <ul id='filter-roles' class='dropdown-menu'>
+            </ul>
+          </div><!-- btn-group -->
+
+          <div class='btn-group btn-group-sm pull-right'>
+            <a
+              href='#'
+              id='reload'
+              class='btn btn-default'
+              title='Reload users.'
+            >
+              <span class='loading'>
+                <i class='fa fa-refresh'></i>
+              </span>
+
+              <span class='loading hidden'>
+                <i class='fa fa-spinner fa-spin'></i>
+              </span>
+            </a><!-- #reload -->
+          </div><!-- btn-group -->
+
+          <div class='btn-group btn-group-sm pull-right'>
+            <a
+              href='#'
+              class='btn btn-default search-toggle'
+              title='Toggle search field.'
+            >
+              <i class='fa fa-search'></i>
+            </a><!-- btn-->
+          </div><!-- btn-group -->
+        </div><!-- btn-toolbar -->
+      </div><!-- panel-heading -->
+
+      <div class='panel-heading hidden search-toggle'>
+        <div class='input-group input-group-sm'>
+          <span class='input-group-addon'>
+            <i class='fa fa-search'></i>
+          </span>
+
+          <input
+            type='text'
+            id='filter-q'
+            class='form-control'
+            title='Enter search terms'
+          />
+        </div><!-- input-group -->
+      </div><!-- panel-heading -->
+
       <div id='users' class='list-group'>
         <span class='list-group-item disabled'>
           <i class='fa fa-spinner fa-spin'></i>
diff --git a/src/guff/views/html/test/auth.cr b/src/guff/views/html/test/auth.cr
index 1baa7de..528b652 100644
--- a/src/guff/views/html/test/auth.cr
+++ b/src/guff/views/html/test/auth.cr
@@ -4,6 +4,10 @@ require "../page"
 class Guff::TestAuthHTMLView
   TITLE = "Guff Auth Test"
   FEATURES = %w{bootstrap font-awesome guff/util}
+  SCRIPTS = %w{
+    /guff-stuff/js/search-field.js
+    /guff-stuff/test/auth.js
+  }
 
   TEMPLATES = TemplateCache.new({
     role: "
@@ -27,7 +31,7 @@ class Guff::TestAuthHTMLView
   def run(context)
     page = PageHTMLView.new(TITLE, self.to_s)
     page.add_features(FEATURES)
-    page.scripts << "/guff-stuff/test/auth.js"
+    page.scripts.concat(SCRIPTS)
     context.response.content_type = page.content_type
     context.response.puts page
   end