Add message list search feature

- Search as you type (client side)
- Add makeDelay to reduce resize and search callback frequency
- Rename class listEntry to message-list-entry
- Move Refresh button into search button bar

CHANGELOG.md

@@ -3,9 +3,12 @@ All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
+### Added
+- Message Cap to status page
+- Search-while-you-type message list filter
+
 ### Fixed
 - Shutdown hang in retention scanner
-- Add Message Cap to status page
 
 ## [1.1.0-rc1] - 2016-03-04
 ### Added

themes/bootstrap/public/mailbox.js

@@ -4,6 +4,13 @@ var mediumDeviceWidth = 980;
 var messageListMargin = 275;
 var clipboard = null;
 var messageListScroll = false;
+var messageListData = null;
+
+// clearMessageSearch resets the message list search
+function clearMessageSearch() {
+  $('#message-search').val('');
+  updateMessageSearch();
+}
 
 // deleteMessage sends a delete request for a message
 function deleteMessage(id) {
@@ -36,9 +43,10 @@ function loadList() {
     dataType: "json",
     url: '/api/v1/mailbox/' + mailbox,
     success: function(data) {
+      messageListData = data;
       // Render list
       $('#message-list').loadTemplate($('#list-entry-template'), data);
-      $('.listEntry').click(onMessageListClick);
+      $('.message-list-entry').click(onMessageListClick);
       // Reveal and select current message
       $("#message-list").slideDown();
       if (selected != "") {
@@ -46,10 +54,21 @@ function loadList() {
         selected = "";
       }
       onDocumentChange();
+      updateMessageSearch();
     }
   });
 }
 
+// makeDelay creates a call-back timer that prevents itself from being
+// stacked
+function makeDelay(ms) {
+  var timer = 0;
+  return (function(callback) {
+    clearTimeout (timer);
+    timer = setTimeout(callback, ms);
+  });
+}
+
 // messageSource pops open another window for message source
 function messageSource(id) {
   window.open('/mailbox/' + mailbox + '/' + id + "/source", '_blank',
@@ -85,19 +104,27 @@ function onDocumentChange() {
 
 // onDocumentReady is called by mailbox/index.html to initialize
 function onDocumentReady() {
+  // Prevent search and resize handlers being called too often
+  var searchDelay = makeDelay(200);
+  var resizeDelay = makeDelay(100);
   $.addTemplateFormatter("DateFormatter",
       function(value, template) {
         return moment(value).calendar();
       });
   $("#message-list").hide();
   onWindowResize();
-  $(window).resize(onWindowResize);
+  $(window).resize(function() {
+    resizeDelay(onWindowResize);
+  });
+  $('#message-search').on('change keyup', function(el) {
+    searchDelay(updateMessageSearch);
+  });
   loadList();
 }
 
 // onMessageListClick is triggered by clicks on the message list
 function onMessageListClick() {
-  $('.listEntry').removeClass("disabled");
+  $('.message-list-entry').removeClass("disabled");
   $(this).addClass("disabled");
   $('#message-content').load('/mailbox/' + mailbox + '/' + this.id, onMessageLoaded);
   selected = this.id;
@@ -132,3 +159,24 @@ function onWindowResize() {
   }
 }
 
+// updateMessageSearch compares the message list subjects and senders against
+// the search string and hides entries that don't match
+function updateMessageSearch() {
+  var criteria = $('#message-search').val();
+  if (criteria.length < 2) {
+    $('.message-list-entry').show();
+    return;
+  }
+  criteria = criteria.toLowerCase();
+  for (i=0; i<messageListData.length; i++) {
+    entry = messageListData[i];
+    if ((entry.subject.toLowerCase().indexOf(criteria) > -1) ||
+        (entry.from.toLowerCase().indexOf(criteria) > -1)) {
+      // Match
+      $('#' + entry.id).show();
+    } else {
+      $('#' + entry.id).hide();
+    }
+  }
+}
+

themes/bootstrap/templates/mailbox/index.html

@@ -13,7 +13,7 @@ $(document).ready(function() {
 });
 </script>
 <script type="text/html" id="list-entry-template">
-  <button data-id="id" type="button" class="listEntry list-group-item">
+  <button data-id="id" type="button" class="message-list-entry list-group-item">
     <div class="row">
       <div class="col-sm-4 col-md-12 text-primary" data-content="subject"/>
       <div class="col-sm-4 col-md-12 small" data-content="from"/>
@@ -31,11 +31,32 @@ $(document).ready(function() {
   </div>
 </div>
 <div class="col-md-3">
-  <div class="text-center">
+  <div class="input-group">
-    <a href="javascript:loadList()">
+    <input id="message-search"
-      <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
+           type="search" 
-      Refresh
+           class="form-control" 
-    </a>
+           placeholder="search"
+           data-toggle="tooltip"
+           data-placement="top"
+           title="Search Sender and Subject"/>
+    <div class ="input-group-btn">
+      <button class="btn btn-default"
+              type="button"
+              data-toggle="tooltip"
+              data-placement="top"
+              title="Clear&nbsp;Search"
+              onclick="clearMessageSearch()">
+        <span class="glyphicon glyphicon-remove-circle"></span>
+      </button>
+      <button class="btn btn-default"
+              type="button"
+              data-toggle="tooltip"
+              data-placement="top"
+              title="Refresh&nbsp;List"
+              onclick="loadList()">
+        <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
+      </button>
+    </div>
   </div>
   <div id="message-list-wrapper">
     <div id="message-list" class="list-group"></div>