#104 closed: "Change users grid to a simpler list"

src/main/scala/scala/tools/colladoc/model/mapper/User.scala

@@ -377,19 +377,32 @@ object User extends User with KeyedMetaMapper[Long, User] {
       "save" -> SHtml.a(Text("Add"), SubmitFormWithValidation(".category"), ("class", "button"))
     )
   }
-
+
+  private def userList =
+    <div id="user_list">
+      <ul>
+        {
+          User.findAll(OrderBy(User.userName, Ascending)) map { u =>
+            <li class={if (u.deleted_?) "deleted" else if (u.banned.is) "banned" else ""}>
+              { u.profileHyperlinkLocal }
+            </li>
+          }
+        }
+      </ul>
+    </div>
+
   /** Admin user form. */
   def adminForm =
     <div id="settings_tab">
       <ul>
-        <li><a href="#user_settings">User settings</a></li>
+        <li><a href="#user_settings">User list</a></li>
         <li><a href="#project_settings">Project settings</a></li>
         <li><a href="#discussions_settings">Discussions</a></li>
       </ul>
       <div id="user_settings">
-        <table id="userlist"/>
-        <div id="userpager"></div>
-        { SHtml.a(Text("Create new user"), Jq(Str(".create")) ~> OpenDialog(), ("class", "link")) }
+        <input id="user_filter" class="text ui-widget-content ui-corner-all"/>
+        { userList }
+        { SHtml.a(Text("Create new user"), Jq(Str(".create")) ~> OpenDialog(), ("class", "button")) }
       </div>
       <div id="project_settings">
         { projectSettings }
@@ -518,14 +531,16 @@ object User extends User with KeyedMetaMapper[Long, User] {
   def createUser = {
     var user = create
 
-    def doCreate() {
+    def doCreate(): JsCmd = {
       user.validate match {
         case Nil =>
           S.notice("User successfully created")
           user.save()
           user = create
+          Replace("user_list", userList)
         case n =>
           S.error(n)
+          Noop
       }
     }
 

src/main/webapp/cosettings.css

@@ -199,4 +199,36 @@
 
 #settings_tab {
     padding: 0;
+}
+
+#user_settings {
+    width: 600px;
+}
+
+#user_list {
+    overflow-y: scroll;
+    overflow-x: hidden;
+    height: 400px;
+    margin: 10px 0;
+}
+
+#user_list li {
+    padding: 5px 0;
+}
+
+.deleted > a {
+    color: #AAAAAA;
+}
+
+.banned > a {
+    color: #993300;
+}
+
+#user_settings input {
+    display: block;
+}
+
+#user_settings input.text {
+    width: 588px;
+    padding: 5px;
 }

src/main/webapp/scripts/cosettings.js

@@ -24,23 +24,7 @@
 $(document).ready(function() {
   $("#settings_tab").tabs();
 
-  $("#userlist").jqGrid({
-    url:'grid/users?',
-    datatype: "xml",
-    colNames:['Username'],
-    colModel:[
-      {name: 'profile', index: 'profile'}
-    ],
-    rowList:[5,10,20,30],
-    pager: '#userpager',
-    viewrecords: true,
-    sortname: 'username',
-    sortorder: 'desc',
-    autowidth: true,
-    height: 500,
-    caption: 'User list'
-  }).navGrid('#userpager', {edit:false,add:false,del:false});
-  $('.ui-jqgrid-titlebar-close').remove();
+  $("#user_filter").focus().livefilter({selector:'#user_list > ul > li'});
 
   $(".create").dialog({
     autoOpen: false,
@@ -49,13 +33,7 @@ $(document).ready(function() {
       'Save': function() {
         if ($(".create").valid()) {
           $(".create").submit();
-          setTimeout(function() {
-            $("#userlist").trigger('reloadGrid', [
-              {page: 1}
-            ]);
-          }, 2000);
           $(this).dialog('close');
-
         }
       },
       'Cancel': function() {

src/main/webapp/scripts/jquery.livefilter.js

@@ -0,0 +1,67 @@
+(function($) {
+  /** Plugin Main Function */
+  $.fn.livefilter = function(action, opts) {
+    if (typeof action === "undefined") {
+      action = "init";
+    }
+    if (typeof action === "object") {
+      opts = action;
+      action = "init";
+    }
+    if (action === "init") {
+      opts = $.extend({}, $.fn.livefilter.defaults, opts);
+      $(this).data("lf-data", opts);
+      $(this).unbind(".livefilter").bind("keyup.livefilter", $.fn.livefilter.onKey(opts));
+    } else if (action === "destroy") {
+      opts = $(this).data("lf-data");
+      $(opts.selector).filter("." + opts.hiddenClass)[opts.showFn]();
+      $(this).unbind(".livefilter");
+    }
+    return $(this);
+  };
+
+  /** keyup event action */
+  $.fn.livefilter.onKey = function(opts) {
+    var rv = function() {
+      var v = $(this).val();
+      if (v) {
+        $(opts.selector).filter(":icontains(" + v + ")")[opts.showFn]().removeClass(opts.hiddenClass).end().filter(":not(:icontains(" + v + "))")[opts.hideFn]().addClass(opts.hiddenClass);
+      } else {
+        $(opts.selector).removeClass(opts.hiddenClass)[opts.showFn]();
+      }
+    };
+    if (opts.debounce) {
+      rv = $.fn.livefilter.debounce(rv, opts.debounce);
+    }
+    return rv;
+  };
+
+  /** Delay execution of too frequent tasks*/
+  $.fn.livefilter.debounce = function(func, threshold) {
+    var timeout;
+    return function debounced() {
+      var obj = this, args = arguments;
+      function delayed() {
+        func.apply(obj, args);
+        timeout = null;
+      }
+      if (timeout) clearTimeout(timeout);
+      timeout = setTimeout(delayed, threshold || 100);
+    };
+  };
+
+  /** Case insensitive :contains jQuery pseudo selector */
+  $.expr[":"].icontains = function(obj, index, meta, stack) {
+    return (obj.textContent || obj.innerText || jQuery(obj).text() || "").toLowerCase().indexOf(meta[3].toLowerCase()) >= 0;
+  };
+
+  /** Plugin global defaults */
+  $.fn.livefilter.defaults = {
+    selector: "tbody tr",
+    debounce: 500,
+
+    hiddenClass: "lf-hidden",
+    showFn: "show",
+    hideFn: "hide"
+  };
+})(jQuery);

src/main/webapp/settings.html

@@ -4,6 +4,7 @@
      <lift:with-resource-id>
        <script src="/lib/jquery.layout.js" type="text/javascript" />
        <script src="/scripts/cotemplate.js" type="text/javascript" />
+       <script src="/scripts/jquery.livefilter.js" type="text/javascript" />
        <script src="/scripts/cosettings.js" type="text/javascript" />
        <link href="/lib/template.css" media="screen" type="text/css" rel="stylesheet" />
        <link href="/cotemplate.css"  media="screen" type="text/css" rel="stylesheet"/>