From 2a2d6ed0b48276d8bfe82bbd1ad2c2f5e11290b6 Mon Sep 17 00:00:00 2001
From: Paul Duncan <pabs@pablotron.org>
Date: Sun, 22 May 2016 00:50:55 -0400
Subject: add user-{add,edit}-dialog and assets/js/admin/users.js

---
 data/assets/js/admin/users.js | 229 +++++++++++++++++++++++++++++++++
 data/assets/test/tab-users.js | 286 ------------------------------------------
 src/views/admin-page.ecr      | 203 +++++++++++++++++++++++++++++-
 3 files changed, 431 insertions(+), 287 deletions(-)
 create mode 100644 data/assets/js/admin/users.js
 delete mode 100644 data/assets/test/tab-users.js

diff --git a/data/assets/js/admin/users.js b/data/assets/js/admin/users.js
new file mode 100644
index 0000000..a5eef0f
--- /dev/null
+++ b/data/assets/js/admin/users.js
@@ -0,0 +1,229 @@
+jQuery(function($) {
+  "use strict";
+
+  var TEMPLATES = new LuigiTemplate.Cache({
+    user: [
+      "<a ",
+        "href='#' ",
+        "class='list-group-item %{css|h}' ",
+        "title='Edit user \"%{user_name|h}\".' ",
+        "data-row='%{row|json|h}' ",
+        "data-q='%{q|h}' ",
+      ">",
+        "<i class='fa fa-fw fa-spinner fa-spin hidden loading'></i>",
+        "<i class='fa fa-fw fa-user loading'></i>",
+        " ",
+        "%{user_name|h} (%{email|h})",
+
+        "<span class='badge pull-right'>",
+          "%{role_name|h}",
+        "</span>",
+      "</a>",
+    ],
+
+    loading: [
+      "<span class='list-group-item disabled'>",
+        "<i class='fa fa-spinner fa-spin'></i>",
+        " ",
+        "Loading...",
+      "</span>",
+    ],
+
+    error: [
+      "<span class='list-group-item list-group-item-danger disabled'>",
+        "<i class='fa fa-exclamation-triangle'></i>",
+        " ",
+        "Error: %{responseText|h}",
+      "</span>",
+    ],
+  });
+
+  function filter() {
+    var qs = $('#users-q').val().replace(/^\s+|\s+$/g, '').toLowerCase().split(/\s+/);
+
+    if (qs.length > 0) {
+      // hide all users
+      $('#users .list-group-item').addClass('hidden');
+
+      // show matching users
+      $($.grep($('#users .list-group-item'), function(el) {
+        var eq = $(el).data('q');
+
+        return ($.grep(qs, function(q) {
+          return eq.indexOf(q) !== -1;
+        }).length == qs.length);
+      })).removeClass('hidden');
+    } else {
+      // show all users
+      $('#users .list-group-item').removeClass('hidden');
+    }
+  }
+
+  function reload() {
+    var btn = $('#users-reload'),
+        list = $('#users');
+
+    // show loading
+    btn.toggleClass('disabled').find('.loading').toggleClass('hidden');
+    list.html(TEMPLATES.run('loading'));
+
+    send('test/get_users').always(function() {
+      btn.toggleClass('disabled').find('.loading').toggleClass('hidden');
+      list.html('');
+    }).fail(function(r) {
+      console.log('get_users failed: ' + r.responseText);
+      list.html(TEMPLATES.run('error', r));
+    }).done(function(r) {
+      list.html($.map(r.users, function(row) {
+        return TEMPLATES.run('user', $.extend({}, row, {
+          q:   [row.user_id, row.user_name, row.email, row.role_name].join('  ').toLowerCase(),
+          row: row,
+        }));
+      }).join(''));
+
+      // refresh filters
+      filter();
+    });
+
+    // stop event
+    return false;
+  }
+
+  $('#users-q').on('search-update', function() {
+    filter();
+  });
+
+  $('#users').on('click', 'a.list-group-item', function() {
+    var me = $(this);
+
+    // update highlight
+    $('#users .active').removeClass('active');
+    me.addClass('active');
+
+    $('#user-edit-dialog').data('row', me.data('row')).modal('show');
+
+    // stop event
+    return false;
+  });
+
+  $('#user-add-dialog').on('show.bs.modal', function() {
+    $.each(['name', 'email', 'password'], function(i, id) {
+      $('#user-add-' + id).val('');
+    });
+    $('#user-add-role').val('guest');
+  });
+
+  $('#user-add-dialog').on('shown.bs.modal', function() {
+    $('#user-add-name').focus();
+  });
+
+  $('#user-add-name, #user-add-email, #user-add-password').keydown(function(ev) {
+    if (ev.which == 13) {
+      setTimeout(function() {
+        $('#user-add-confirm').click();
+      }, 10);
+
+      // stop event
+      return false;
+    }
+  });
+
+  $('#user-add-confirm').click(function() {
+    var me = $(this);
+
+    if (me.hasClass('disabled'))
+      return false;
+
+    // toggle loading
+    me.toggleClass('disabled').find('.loading').toggleClass('hidden');
+
+    send('test/add_user', {
+      name:     $('#user-add-name').val(),
+      email:    $('#user-add-email').val(),
+      password: $('#user-add-password').val(),
+      role:     $('#user-add-role').val(),
+      active:   't',
+    }).always(function() {
+      // toggle loading
+      me.toggleClass('disabled').find('.loading').toggleClass('hidden');
+    }).fail(function(r) {
+      alert('Error ' + r.responseText);
+    }).done(function(r) {
+      console.log(r);
+      reload();
+      $('#user-add-dialog').modal('hide');
+    });
+
+    // stop event
+    return false;
+  });
+
+  $('#user-edit-dialog').on('show.bs.modal', function() {
+    var row = $(this).data('row');
+
+    $.each({
+      name:   'user_name',
+      email:  'email',
+      role:   'role_name',
+    }, function(id, col) {
+      $('#user-edit-' + id).val(row[col]);
+    });
+  });
+
+  $('#user-edit-dialog').on('shown.bs.modal', function() {
+    $('#user-edit-name').focus();
+  });
+
+  $('#user-edit-dialog').on('hide.bs.modal', function() {
+    // clear highlight
+    $('#users .active').removeClass('active');
+  });
+
+  $('#user-edit-name, #user-edit-email').keydown(function(ev) {
+    if (ev.which == 13) {
+      setTimeout(function() {
+        $('#user-edit-confirm').click();
+      }, 10);
+
+      // stop event
+      return false;
+    }
+  });
+
+  $('#user-edit-confirm').click(function() {
+    var me = $(this),
+        user_id = $('#user-edit-dialog').data('row').user_id;
+
+    if (me.hasClass('disabled'))
+      return false;
+
+    // toggle loading
+    me.toggleClass('disabled').find('.loading').toggleClass('hidden');
+
+    send('test/edit_user', {
+      user_id:  user_id,
+      name:     $('#user-edit-name').val(),
+      email:    $('#user-edit-email').val(),
+      role:     $('#user-edit-role').val(),
+    }).always(function() {
+      // toggle loading
+      me.toggleClass('disabled').find('.loading').toggleClass('hidden');
+    }).fail(function(r) {
+      alert('Error ' + r.responseText);
+    }).done(function(r) {
+      console.log(r);
+      reload();
+      $('#user-edit-dialog').modal('hide');
+    });
+
+    // stop event
+    return false;
+  });
+
+  $('#users-reload').click(reload);
+
+  // load users
+  $('#admin-tab-users').on('show.bs.tab', function() {
+    reload();
+  });
+});
diff --git a/data/assets/test/tab-users.js b/data/assets/test/tab-users.js
deleted file mode 100644
index d60e348..0000000
--- a/data/assets/test/tab-users.js
+++ /dev/null
@@ -1,286 +0,0 @@
-jQuery(function($) {
-  "use strict";
-  var TEMPLATES = new LuigiTemplate.Cache({
-    user: [
-      "<a ",
-        "href='#' ",
-        "class='list-group-item %{css|h}' ",
-        "title='Edit user \"%{user_name|h}\".' ",
-        "data-row='%{row|json|h}' ",
-        "data-q='%{q|h}' ",
-      ">",
-        "<i class='fa fa-fw fa-spinner fa-spin hidden loading'></i>",
-        "<i class='fa fa-fw fa-user loading'></i>",
-        " ",
-        "%{user_name|h} (%{email|h})",
-
-        "<span class='badge pull-right'>",
-          "%{role_name|h}",
-        "</span>",
-      "</a>",
-    ],
-
-    loading: [
-      "<span class='list-group-item disabled'>",
-        "<i class='fa fa-spinner fa-spin'></i>",
-        " ",
-        "Loading...",
-      "</span>",
-    ],
-
-    error: [
-      "<span class='list-group-item list-group-item-danger disabled'>",
-        "<i class='fa fa-exclamation-triangle'></i>",
-        " ",
-        "Error: %{responseText|h}",
-      "</span>",
-    ],
-  });
-
-  function filter() {
-    var qs = $('#users-q').val().replace(/^\s+|\s+$/g, '').toLowerCase().split(/\s+/);
-
-    if (qs.length > 0) {
-      // hide all users
-      $('#users .list-group-item').addClass('hidden');
-
-      // show matching users
-      $($.grep($('#users .list-group-item'), function(el) {
-        var eq = $(el).data('q');
-
-        return ($.grep(qs, function(q) {
-          return eq.indexOf(q) !== -1;
-        }).length == qs.length);
-      })).removeClass('hidden');
-    } else {
-      // show all users
-      $('#users .list-group-item').removeClass('hidden');
-    }
-  }
-
-  function reload() {
-    var btn = $('#reload'),
-        list = $('#users');
-
-    // show loading
-    btn.toggleClass('disabled').find('.loading').toggleClass('hidden');
-    list.html(TEMPLATES.run('loading'));
-
-    send('test/get_users').always(function() {
-      btn.toggleClass('disabled').find('.loading').toggleClass('hidden');
-      list.html('');
-    }).fail(function(r) {
-      console.log('get_users failed: ' + r.responseText);
-      list.html(TEMPLATES.run('error', r));
-    }).done(function(r) {
-      list.html($.map(r.users, function(row) {
-        return TEMPLATES.run('user', $.extend({}, row, {
-          q:   [row.user_id, row.user_name, row.email, row.role_name].join('  ').toLowerCase(),
-          row: row,
-        }));
-      }).join(''));
-
-      // refresh filters
-      filter();
-    });
-
-    // stop event
-    return false;
-  }
-
-  // old test, not used any more
-  function set_user(user_id) {
-    return send('test/set_user', {
-      user_id: user_id,
-    }).fail(function(r) {
-      alert('Error ' + r.responseText);
-    }).done(function(r) {
-      // do nothing
-    });
-  }
-
-  $('#users-q').on('search-update', function() {
-    filter();
-  });
-
-  $('#users').on('click', 'a.list-group-item', function() {
-    var me = $(this);
-
-    // update highlight
-    $('#users .active').removeClass('active');
-    me.addClass('active');
-
-    $('#user-edit-dialog').data('row', me.data('row')).modal('show');
-
-    // stop event
-    return false;
-  });
-
-  $('#user-add-dialog').on('show.bs.modal', function() {
-    $.each(['name', 'email', 'password'], function(i, id) {
-      $('#user-add-' + id).val('');
-    });
-    $('#user-add-role').val('guest');
-  });
-
-  $('#user-add-dialog').on('shown.bs.modal', function() {
-    $('#user-add-name').focus();
-  });
-
-  $('#user-add-name, #user-add-email, #user-add-password').keydown(function(ev) {
-    if (ev.which == 13) {
-      setTimeout(function() {
-        $('#user-add-confirm').click();
-      }, 10);
-
-      // stop event
-      return false;
-    }
-  });
-
-  $('#user-add-confirm').click(function() {
-    var me = $(this);
-
-    if (me.hasClass('disabled'))
-      return false;
-
-    // toggle loading
-    me.toggleClass('disabled').find('.loading').toggleClass('hidden');
-
-    send('test/add_user', {
-      name:     $('#user-add-name').val(),
-      email:    $('#user-add-email').val(),
-      password: $('#user-add-password').val(),
-      role:     $('#user-add-role').val(),
-      active:   't',
-    }).always(function() {
-      // toggle loading
-      me.toggleClass('disabled').find('.loading').toggleClass('hidden');
-    }).fail(function(r) {
-      alert('Error ' + r.responseText);
-    }).done(function(r) {
-      console.log(r);
-      reload();
-      $('#user-add-dialog').modal('hide');
-    });
-
-    // stop event
-    return false;
-  });
-
-  $('#user-edit-dialog').on('show.bs.modal', function() {
-    var row = $(this).data('row');
-
-    $.each({
-      name:   'user_name',
-      email:  'email',
-      role:   'role_name',
-    }, function(id, col) {
-      $('#user-edit-' + id).val(row[col]);
-    });
-  });
-
-  $('#user-edit-dialog').on('shown.bs.modal', function() {
-    $('#user-edit-name').focus();
-  });
-
-  $('#user-edit-dialog').on('hide.bs.modal', function() {
-    // clear highlight
-    $('#users .active').removeClass('active');
-  });
-
-  $('#user-edit-name, #user-edit-email').keydown(function(ev) {
-    if (ev.which == 13) {
-      setTimeout(function() {
-        $('#user-edit-confirm').click();
-      }, 10);
-
-      // stop event
-      return false;
-    }
-  });
-
-  $('#user-edit-confirm').click(function() {
-    var me = $(this),
-        user_id = $('#user-edit-dialog').data('row').user_id;
-
-    if (me.hasClass('disabled'))
-      return false;
-
-    // toggle loading
-    me.toggleClass('disabled').find('.loading').toggleClass('hidden');
-
-    send('test/edit_user', {
-      user_id:  user_id,
-      name:     $('#user-edit-name').val(),
-      email:    $('#user-edit-email').val(),
-      role:     $('#user-edit-role').val(),
-    }).always(function() {
-      // toggle loading
-      me.toggleClass('disabled').find('.loading').toggleClass('hidden');
-    }).fail(function(r) {
-      alert('Error ' + r.responseText);
-    }).done(function(r) {
-      console.log(r);
-      reload();
-      $('#user-edit-dialog').modal('hide');
-    });
-
-    // stop event
-    return false;
-  });
-
-  $('#login-dialog').on('show.bs.modal', function() {
-    $('#login-email').val('');
-    $('#login-password').val('');
-  });
-
-  $('#login-dialog').on('shown.bs.modal', function() {
-    $('#login-email').focus();
-  });
-
-  $('#login-confirm').click(function() {
-    var me = $(this);
-
-    if (me.hasClass('disabled'))
-      return false;
-
-    // toggle loading
-    me.toggleClass('disabled').find('.loading').toggleClass('hidden');
-
-    send('test/login', {
-      email:    $('#login-email').val(),
-      password: $('#login-password').val(),
-    }).always(function() {
-      // toggle loading
-      me.toggleClass('disabled').find('.loading').toggleClass('hidden');
-    }).fail(function(r) {
-      alert('Error ' + r.responseText);
-    }).done(function(r) {
-      console.log(r);
-      $('#login-dialog').modal('hide');
-    });
-
-    // stop event
-    return false;
-  });
-
-  $('#login-user, #login-password').keydown(function(ev) {
-    if (ev.which == 13) {
-      setTimeout(function() {
-        // trigger login
-        $('#login-confirm').click();
-      }, 10);
-
-      // stop event
-      return false;
-    }
-  });
-
-  $('#reload').click(reload);
-
-  // load users
-  $('#admin-tab-users').on('show.bs.tab', function() {
-    reload();
-  });
-});
diff --git a/src/views/admin-page.ecr b/src/views/admin-page.ecr
index fe0d28d..678b8c5 100644
--- a/src/views/admin-page.ecr
+++ b/src/views/admin-page.ecr
@@ -194,6 +194,207 @@
         </div><!-- tab-content -->
       </div><!-- col-md-12 -->
     </div><!-- container -->
+
+    <div id='user-add-dialog' class='modal fade' role='dialog'>
+      <div class='modal-dialog' role='document'>
+        <div class='modal-content'>
+          <div class='modal-header'>
+            <button
+              type='button'
+              class='close'
+              data-dismiss='modal'
+              aria-label='Close'
+            >
+              <span aria-hidden='true'>
+                &times;
+              </span>
+            </button><!-- close -->
+
+            <h4 class='modal-title'>
+              <i class='fa fa-user-plus'></i>
+              Add User
+            </h4><!-- modal-title -->
+          </div><!-- modal-header -->
+
+          <div class='modal-body'>
+            <div class='form-group'>
+              <label for='user-add-name'>
+                Name
+              </label>
+
+              <input
+                type='text'
+                id='user-add-name'
+                class='form-control'
+                title='Enter name of user.'
+                placeholder='John Doe'
+              />
+            </div><!-- form-group -->
+
+            <div class='form-group'>
+              <label for='user-add-email'>
+                Email Address
+              </label>
+
+              <input
+                type='text'
+                id='user-add-email'
+                class='form-control'
+                title='Enter user email.'
+                placeholder='johndoe@example.com'
+              />
+            </div><!-- form-group -->
+
+            <div class='form-group'>
+              <label for='user-add-password'>
+                Password
+              </label>
+
+              <input
+                type='password'
+                id='user-add-password'
+                class='form-control'
+                title='Enter password.'
+              />
+            </div><!-- form-group -->
+
+            <div class='form-group'>
+              <label for='user-add-role'>
+                Role
+              </label>
+
+              <select
+                id='user-add-role'
+                class='form-control'
+                title='Choose role of user.'
+              ><%=
+                # get_roles
+              %></select>
+            </div><!-- form-group -->
+          </div><!-- modal-body -->
+
+          <div class='modal-footer'>
+            <button
+              id='user-add-confirm'
+              class='btn btn-primary'
+              title='Create new user.'
+            >
+              <span class='hidden loading'>
+                <i class='fa fa-spinner fa-spin'></i>
+                Please Wait...
+              </span>
+
+              <span class='loading'>
+                <i class='fa fa-user-plus'></i>
+                Create User
+              </span>
+            </button>
+
+            <button
+              class='btn btn-default'
+              data-dismiss='modal'
+              title='Close dialog.'
+            >
+              &times; Close
+            </button>
+          </div><!-- modal-footer -->
+        </div><!-- modal-content -->
+      </div><!-- modal-dialog -->
+    </div><!-- modal -->
+
+    <div id='user-edit-dialog' class='modal fade' role='dialog'>
+      <div class='modal-dialog' role='document'>
+        <div class='modal-content'>
+          <div class='modal-header'>
+            <button
+              type='button'
+              class='close'
+              data-dismiss='modal'
+              aria-label='Close'
+            >
+              <span aria-hidden='true'>
+                &times;
+              </span>
+            </button><!-- close -->
+
+            <h4 class='modal-title'>
+              <i class='fa fa-user'></i>
+              Edit User
+            </h4><!-- modal-title -->
+          </div><!-- modal-header -->
+
+          <div class='modal-body'>
+            <div class='form-group'>
+              <label for='user-edit-name'>
+                Name
+              </label>
+
+              <input
+                type='text'
+                id='user-edit-name'
+                class='form-control'
+                title='Enter name of user.'
+                placeholder='John Doe'
+              />
+            </div><!-- form-group -->
+
+            <div class='form-group'>
+              <label for='user-edit-email'>
+                Email Address
+              </label>
+
+              <input
+                type='text'
+                id='user-edit-email'
+                class='form-control'
+                title='Enter user email.'
+                placeholder='johndoe@example.com'
+              />
+            </div><!-- form-group -->
+
+            <div class='form-group'>
+              <label for='user-edit-role'>
+                Role
+              </label>
+
+              <select
+                id='user-edit-role'
+                class='form-control'
+                title='Choose role of user.'
+              ><%=
+                # get_roles
+              %></select>
+            </div><!-- form-group -->
+          </div><!-- modal-body -->
+
+          <div class='modal-footer'>
+            <button
+              id='user-edit-confirm'
+              class='btn btn-primary'
+              title='Update user.'
+            >
+              <span class='hidden loading'>
+                <i class='fa fa-spinner fa-spin'></i>
+                Please Wait...
+              </span>
+
+              <span class='loading'>
+                <i class='fa fa-save'></i>
+                Save Changes
+              </span>
+            </button>
+
+            <button
+              class='btn btn-default'
+              data-dismiss='modal'
+              title='Close dialog.'
+            >
+              &times; Close
+            </button>
+          </div><!-- modal-footer -->
+        </div><!-- modal-content -->
+      </div><!-- modal-dialog -->
+    </div><!-- modal -->
   </body>
 
   <%=
@@ -204,7 +405,7 @@
       assets/bootstrap-3.3.6/js/bootstrap.min.js
       assets/ckeditor-4.5.8-custom/ckeditor.js
       assets/js/search-field.js
-      assets/test/tab-users.js
+      assets/js/admin/users.js
       assets/test/tab-posts.js
     }
   %>
-- 
cgit v1.2.3