More work on tables

userfrosting · Nov 14, 2016 · 3159224 · 3159224
1 parent 15e5dd3
commit 3159224
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 60 deletions.
diff --git a/app/sprinkles/admin/assets/css/tablesorter-custom.css b/app/sprinkles/admin/assets/css/tablesorter-custom.css
@@ -11,3 +11,7 @@
     padding: 4px 8px;
     cursor: pointer;
 }
+
+.panel-heading-buttons h3 {
+    padding-top: 7.5px;
+}
diff --git a/app/sprinkles/admin/assets/js/pages/users.js b/app/sprinkles/admin/assets/js/pages/users.js
@@ -11,6 +11,9 @@ $(document).ready(function() {
 
     $("#widget-users").ufTable({
         dataUrl: site.uri.public + "/api/users",
+        addParams: {
+            "group": "users"
+        },
         DEBUG: true
     });
 

diff --git a/app/sprinkles/admin/templates/components/tables/users.html.twig b/app/sprinkles/admin/templates/components/tables/users.html.twig
@@ -1,10 +1,17 @@
-{% extends "layouts/table-responsive.html.twig" %}
+{# This partial template renders a table of users, to be populated with rows via an AJAX request.
+ # This extends a generic template for paginated tables.
+ #
+ # Note that this template contains a "skeleton" table with an empty table body, and then a block of Handlebars templates which are used
+ # to render the table cells with the data from the AJAX request.
+#}
+
+{% extends "layouts/table-paginated.html.twig" %}
 
 {% block table %}
     <table id="{{table.id}}" class="tablesorter table table-bordered table-hover table-striped" data-sortlist="[[0, 0]]">
         <thead>
             <tr>
-                <th class="sorter-metatext" data-column-name="last_name" data-column-template="#user-table-column-info">User/Info <i class="fa fa-sort"></i></th>
+                <th class="sorter-metatext" data-column-name="last_name" data-column-template="#user-table-column-info">User <i class="fa fa-sort"></i></th>
                 {% if 'last_activity' in table.columns %}
                     <th class="sorter-metanum" data-column-name="last_activity" data-column-template="#user-table-column-last-activity">Last Activity <i class="fa fa-sort"></i></th>
                 {% endif %}
@@ -18,29 +25,29 @@
 
 {% block table_cell_templates %}
     {# This contains a series of <script> blocks, each of which is a client-side Handlebars template.
-     # Requires handlebars-helpers.js, moment.js
+     # Note that these are NOT Twig templates, although the syntax is similar.  We wrap them in the `verbatim` tag,
+     # so that Twig will output them directly into the DOM instead of trying to treat them like Twig templates.
+     #
+     # These templates require handlebars-helpers.js, moment.js
     #}
     {% verbatim %}
     <script id="user-table-column-info" type="text/x-handlebars-template">
-        <td data-text="{{user.last_name}}">
+        <td data-text="{{row.last_name}}">
             <strong>
-                <a href="{{site.uri.public}}/users/u/{{user.user_name}}">{{user.first_name}} {{user.last_name}} ({{user.user_name}})</a>
+                <a href="{{site.uri.public}}/users/u/{{row.user_name}}">{{row.first_name}} {{row.last_name}} ({{row.user_name}})</a>
             </strong>
             <div>
-                <i>{{user.title}}</i>
-            </div>
-            <div>
-                <i class="fa fa-envelope"></i> <a href="mailto:{{user.email}}">{{user.email}}</a>
+                <i class="fa fa-envelope"></i> <a href="mailto:{{row.email}}">{{row.email}}</a>
             </div>
         </td>
     </script>
 
     <script id="user-table-column-last-activity" type="text/x-handlebars-template">
-        {{#if user.last_activity_at }}    
-        <td data-num="{{dateFormat user.last_activity_at format='x'}}">
-            {{dateFormat user.last_activity_at format="dddd"}}<br>{{dateFormat user.last_activity_at format="MMM Do, YYYY h:mm a"}}
+        {{#if row.last_activity_at }}    
+        <td data-num="{{dateFormat row.last_activity_at format='x'}}">
+            {{dateFormat row.last_activity_at format="dddd"}}<br>{{dateFormat row.last_activity_at format="MMM Do, YYYY h:mm a"}}
             <br>
-            <i>{{user.last_activity.description}}</i>
+            <i>{{row.last_activity.description}}</i>
         </td>
         {{ else }}
         <td data-num="0">
@@ -52,13 +59,13 @@
     <script id="user-table-column-actions" type="text/x-handlebars-template">
         <td>
             <div class="btn-group">
-                {{#ifCond user.flag_enabled 0 }}
+                {{#ifCond row.flag_enabled 0 }}
                     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                         Disabled
                         <span class="caret"></span>
                     </button>
                 {{ else }}
-                    {{#ifCond user.flag_verified 0 }}
+                    {{#ifCond row.flag_verified 0 }}
                         <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                             Unactivated
                             <span class="caret"></span>
@@ -71,36 +78,36 @@
                     {{/ifCond }}
                 {{/ifCond }}
                 <ul class="dropdown-menu" role="menu">
-                    {{#ifCond user.flag_verified 0 }}
+                    {{#ifCond row.flag_verified 0 }}
                     <li>
-                        <a href="#" data-id="{{user.id}}" class="js-user-activate">
+                        <a href="#" data-id="{{row.id}}" class="js-user-activate">
                         <i class="fa fa-bolt"></i> Activate user
                         </a>
                     </li>
                     {{/ifCond }}
                     <li>
-                        <a href="#" data-id="{{user.id}}" class="js-user-edit" data-target="#dialog-user-edit" data-toggle="modal">
+                        <a href="#" data-id="{{row.id}}" class="js-user-edit" data-target="#dialog-user-edit" data-toggle="modal">
                         <i class="fa fa-edit"></i> Edit user
                         </a>
                     </li>
                     <li>
-                        <a href="#" data-id="{{user.id}}" class="js-user-password" data-target="#dialog-user-password" data-toggle="modal">
+                        <a href="#" data-id="{{row.id}}" class="js-user-password" data-target="#dialog-user-password" data-toggle="modal">
                         <i class="fa fa-key"></i> Change password
                         </a>
                     </li>
                     <li>
-                    {{#ifCond user.flag_enabled 1 }}
-                        <a href="#" data-id="{{user.id}}" class="js-user-disable">
+                    {{#ifCond row.flag_enabled 1 }}
+                        <a href="#" data-id="{{row.id}}" class="js-user-disable">
                         <i class="fa fa-minus-circle"></i> Disable user
                         </a>
                     {{ else }}
-                        <a href="#" data-id="{{user.id}}" class="js-user-enable">
+                        <a href="#" data-id="{{row.id}}" class="js-user-enable">
                         <i class="fa fa-plus-circle"></i> Enable user
                         </a> 
                     {{/ifCond }}
                     </li>
                     <li>
-                        <a href="#" data-id="{{user.id}}" class="js-user-delete" data-user_name="{{user.user_name}}" data-target="#dialog-user-delete" data-toggle="modal">
+                        <a href="#" data-id="{{row.id}}" class="js-user-delete" data-user_name="{{row.user_name}}" data-target="#dialog-user-delete" data-toggle="modal">
                         <i class="fa fa-trash-o"></i> Delete user</a>
                     </li>
                 </ul>
@@ -109,9 +116,3 @@
     </script>
     {% endverbatim %}
 {% endblock %}
-
-{% block button_create %}
-    <button type="button" class="btn btn-success js-user-create" data-toggle="modal" data-target="#dialog-user-create">
-        <i class="fa fa-plus-square"></i>  Create New User
-    </button>
-{% endblock %}
diff --git a/...plates/layouts/table-responsive.html.twig → ...mplates/layouts/table-paginated.html.twig b/...plates/layouts/table-responsive.html.twig → ...mplates/layouts/table-paginated.html.twig
@@ -1,16 +1,20 @@
-{# Base layout for paginated tablesorter tables. #}
+{# Base layout for paginated tablesorter tables.
+ # Requires tablesorter-custom.css for proper styling of pager elements.
+#}
 
 <div class="table-responsive">
     {% block table %}
+        {# Define your table skeleton in this block in your child template #}
     {% endblock %}
 
     {% block table_cell_templates %}
+        {# Define your Handlebars cell templates in this block in your child template #}
     {% endblock %}
 
-    <div class="pager pager-lg tablesorter-pager js-table-pager-users">
+    <div class="pager pager-lg tablesorter-pager">
         <span class='pager-control first' title='First page'><i class='fa fa-angle-double-left'></i></span>
         <span class='pager-control prev' title='Previous page'><i class='fa fa-angle-left'></i></span>
-        <span class='pagedisplay'></span> <!-- this can be any element, including an input -->
+        <span class='pagedisplay'></span> {# this can be any element, including an input #}
         <span class='pager-control next' title='Next page'><i class='fa fa-angle-right'></i></span>
         <span class='pager-control last' title= 'Last page'><i class='fa fa-angle-double-right'></i></span>
         <br><br>
@@ -22,9 +26,3 @@
         </select>
     </div>
 </div>
-<div class="row">
-    <div class="col-md-6">
-    {% block button_create %}
-    {% endblock %}
-    </div>
-</div>
diff --git a/app/sprinkles/admin/templates/pages/users.html.twig b/app/sprinkles/admin/templates/pages/users.html.twig
@@ -28,6 +28,13 @@
                             }
                         }
                     %}
+                    <div class="row">
+                        <div class="col-md-6">
+                            <button type="button" class="btn btn-success js-user-create" data-toggle="modal" data-target="#dialog-user-create">
+                                <i class="fa fa-plus-square"></i>  Create New User
+                            </button>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>

diff --git a/app/sprinkles/core/assets/css/bootstrap-custom.css b/app/sprinkles/core/assets/css/bootstrap-custom.css
@@ -9,10 +9,6 @@
     width: 800px;
 }
 
-.panel-heading-buttons h3 {
-    padding-top: 7.5px;
-}
-
 /* Use to collapse empty button columns */
 
 .hideable {

diff --git a/app/sprinkles/core/assets/js/uf-table.js b/app/sprinkles/core/assets/js/uf-table.js
@@ -1,5 +1,5 @@
 /**
- * uf-table plugin.  Sets up a Tablesorter table with sorting, pagination, and search, and interfaces with our user data JSON API.
+ * uf-table plugin.  Sets up a Tablesorter table with sorting, pagination, and search, and fetches data from a JSON API.
  *
  * This plugin depends on query-string.js, which is used to convert a query string into a JSON object.
  *
@@ -28,6 +28,7 @@
             {
                 DEBUG       : false,
                 dataUrl     : "",
+                addParams   : {},
                 tablesorter : {
                     debug: false,                
                     theme     : 'bootstrap',
@@ -152,39 +153,44 @@
 
         // Link CSV download button
         $el.find(".js-download-table").on("click", function () {
-            var state = getTableStateVars(base.ts);
-            state['format'] = "csv";
-            delete state['page'];
-            delete state['size'];
-            if (primary_group)
-                state['primary_group'] = primary_group;       
+            var tableState = base.getTableStateVars(base.ts[0]);
+            tableState['format'] = "csv";
+            delete tableState['page'];
+            delete tableState['size'];
+
+            // Merge in any additional request parameters
+            $.extend(tableState, base.options.addParams);
+
             // Causes download to begin
-            window.location = base.options.dataUrl + $.param( state );
+            window.location = base.options.dataUrl + $.param( tableState );
         });
 
         base.ts.on("pagerComplete", function () {
             $el.trigger("pagerComplete");
         });
     };
 
-    // Callback for generating the AJAX url
+    /**
+     * Callback for generating the AJAX url.
+     */
     Plugin.prototype._generateUrl = function ( base, table, url ) {
         var tableState = base.getTableStateVars(table);
+
         if (base.options.DEBUG) {
             console.log(tableState);
         }
-        
+
         $.extend(table.config.pager.ajaxObject.data, tableState);
-        // Limit to a particular primary group
-        /*
-        if (primary_group) {
-            table.config.pager.ajaxObject.data.primary_group = primary_group;
-        }
-        */
+
+        // Merge in any additional parameters
+        $.extend(table.config.pager.ajaxObject.data, base.options.addParams);
+
         return url;
     }
 
-    // Callback for processing data returned from API
+    /**
+     * Callback for processing data returned from the AJAX request and rendering the table cells.
+     */
     Plugin.prototype._processAjax = function ( base, data ) {
         var ts = base.ts[0];
         var col, row, txt,
@@ -208,7 +214,7 @@
             for (row = 0; row < size; row++) {
                 rows += '<tr>';
                 var cellData = {
-                    "user" : data['rows'][ row ],       // It is safe to use the data from the API because Handlebars escapes HTML
+                    "row"  : data['rows'][ row ],       // It is safe to use the data from the API because Handlebars escapes HTML
                     "site" : site
                 };