Mercurial > kallithea

changeset 5939:b8830c373681

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
datatables: use jQuery DataTables instead of base.js YUI_datatable wrapper of YAHOO.widget.DataTable Sorting and searching fixes by Mads Kiilerich.
author Daniel Hobley <danielh@unity3d.com>
date Thu, 21 May 2015 16:48:13 +0200
parents 37a2a02f9d6f
children 69418cbd8285
files kallithea/model/repo.py kallithea/public/js/base.js kallithea/templates/admin/repo_groups/repo_groups.html kallithea/templates/admin/repos/repos.html kallithea/templates/admin/user_groups/user_groups.html kallithea/templates/admin/users/users.html kallithea/templates/index_base.html
diffstat 7 files changed, 105 insertions(+), 276 deletions(-) [+]
line wrap: on
line diff
--- a/kallithea/model/repo.py	Mon May 23 18:02:33 2016 +0200
+++ b/kallithea/model/repo.py	Thu May 21 16:48:13 2015 +0200
@@ -237,6 +237,7 @@
                 "raw_name": repo.repo_name,
                 "name": repo_lnk(repo.repo_name, repo.repo_type,
                                  repo.repo_state, repo.private, repo.fork),
+                "last_change_iso": repo.last_db_change.isoformat(),
                 "last_change": last_change(repo.last_db_change),
                 "last_changeset": last_rev(repo.repo_name, cs_cache),
                 "last_rev_raw": cs_cache.get('revision'),
--- a/kallithea/public/js/base.js	Mon May 23 18:02:33 2016 +0200
+++ b/kallithea/public/js/base.js	Thu May 21 16:48:13 2015 +0200
@@ -1786,79 +1786,6 @@
     return pagi
 }
 
-var YUI_datatable = function(data, fields, columns, countnode, sortkey, rows){
-    var myDataSource = new YAHOO.util.DataSource(data);
-    myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
-    myDataSource.responseSchema = {
-        resultsList: "records",
-        fields: fields
-        };
-    myDataSource.doBeforeCallback = function(req, raw, res, cb) {
-        // This is the filter function
-        var data     = res.results || [],
-            filtered = [],
-            i, l;
-
-        if (req) {
-            req = req.toLowerCase();
-            for (i = 0; i<data.length; i++) {
-                var pos = data[i].raw_name.toLowerCase().indexOf(req);
-                if (pos != -1) {
-                    filtered.push(data[i]);
-                }
-            }
-            res.results = filtered;
-        }
-        $(countnode).html(res.results.length);
-        return res;
-    }
-
-    var myDataTable = new YAHOO.widget.DataTable("datatable_list_wrap", columns, myDataSource, {
-        sortedBy: {key:sortkey, dir:"asc"},
-        paginator: YUI_paginator(rows !== undefined && rows ? rows : 25, ['user-paginator']),
-        MSG_SORTASC: _TM['MSG_SORTASC'],
-        MSG_SORTDESC: _TM['MSG_SORTDESC'],
-        MSG_EMPTY: _TM['MSG_EMPTY'],
-        MSG_ERROR: _TM['MSG_ERROR'],
-        MSG_LOADING: _TM['MSG_LOADING']
-        });
-    myDataTable.subscribe('postRenderEvent',function(oArgs) {
-        tooltip_activate();
-        quick_repo_menu();
-        });
-
-    var filterTimeout = null;
-    var $q_filter = $('#q_filter');
-
-    var updateFilter = function () {
-        // Reset timeout
-        filterTimeout = null;
-
-        // Reset sort
-        var state = myDataTable.getState();
-        state.sortedBy = {key:sortkey, dir:YAHOO.widget.DataTable.CLASS_ASC};
-
-        // Get filtered data
-        myDataSource.sendRequest($q_filter.val(), {
-            success : myDataTable.onDataReturnInitializeTable,
-            failure : myDataTable.onDataReturnInitializeTable,
-            scope   : myDataTable,
-            argument: state});
-        };
-
-    $q_filter.click(function(){
-            if(!$q_filter.hasClass('loaded')){
-                //TODO: load here full list later to do search within groups
-                $q_filter.addClass('loaded');
-            }
-        });
-
-    $q_filter.keyup(function (e) {
-            clearTimeout(filterTimeout);
-            filterTimeout = setTimeout(updateFilter, 600);
-        });
-}
-
 /**
  Branch Sorting callback for select2, modifying the filtered result so prefix
  matches come before matches in the line.
@@ -1929,3 +1856,13 @@
     }
     return results;
 };
+
+/* Helper for jQuery DataTables */
+
+var updateRowCountCallback = function updateRowCountCallback($elem, onlyDisplayed) {
+    return function drawCallback() {
+        var info = this.api().page.info(),
+            count = onlyDisplayed === true ? info.recordsDisplay : info.recordsTotal;
+        $elem.html(count);
+    }
+};
--- a/kallithea/templates/admin/repo_groups/repo_groups.html	Mon May 23 18:02:33 2016 +0200
+++ b/kallithea/templates/admin/repo_groups/repo_groups.html	Thu May 21 16:48:13 2015 +0200
@@ -6,7 +6,6 @@
 </%block>
 
 <%def name="breadcrumbs_links()">
-    <input class="q_filter_box" id="q_filter" size="15" type="text" name="filter" placeholder="${_('quick filter...')}" value=""/>
     ${h.link_to(_('Admin'),h.url('admin_home'))} &raquo; <span id="repo_group_count">0</span> ${_('Repository Groups')}
 </%def>
 
@@ -29,28 +28,25 @@
         </ul>
     </div>
     <!-- end box / title -->
-    <div class="table-grid table yui-skin-sam" id="datatable_list_wrap"></div>
+    <div class="table">
+        <table id="datatable_list_wrap"></table>
+    </div>
     <div id="user-paginator" style="padding: 0px 0px 0px 20px"></div>
 </div>
 <script>
   var data = ${c.data|n};
-  var fields = [
-    {key: "group_name"},
-    {key: "raw_name"},
-    {key: "desc"},
-    {key: "repos"},
-    {key: "owner"},
-    {key: "action"}
-  ];
-  var column_defs = [
-    {key:"group_name",label:"${_('Name')}",sortable:true, sortOptions: { sortFunction: nameSort }},
-    {key:"desc",label:"${_('Description')}",sortable:true},
-    {key:"repos",label:"${_('Number of Top-level Repositories')}",sortable:true},
-    {key:"owner",label:"${_('Owner')}",sortable:true},
-    {key:"action",label:"${_('Action')}",sortable:false}
-  ];
-  var counter = YUD.get('repo_group_count');
-  var sort_key = "group_name";
-  YUI_datatable(data, fields, column_defs, counter, sort_key, ${c.visual.admin_grid_items});
+  var myDataTable = $("#datatable_list_wrap").DataTable({
+        data: data.records,
+        columns: [
+            {data: "raw_name", visible: false, searchable: false},
+            {data: "group_name", orderData: 0, title: "${_('Name')}"},
+            {data: "desc", title: "${_('Description')}", searchable: false},
+            {data: "repos", title: "${_('Number of Top-level Repositories')}", searchable: false},
+            {data: "owner", title: "${_('Owner')}", searchable: false},
+            {data: "action", title: "${_('Action')}", sortable: false, searchable: false}
+        ],
+        drawCallback: updateRowCountCallback($("#repo_group_count"))
+    });
+
 </script>
 </%def>
--- a/kallithea/templates/admin/repos/repos.html	Mon May 23 18:02:33 2016 +0200
+++ b/kallithea/templates/admin/repos/repos.html	Thu May 21 16:48:13 2015 +0200
@@ -6,7 +6,7 @@
 </%block>
 
 <%def name="breadcrumbs_links()">
-    <input class="q_filter_box" id="q_filter" size="15" type="text" name="filter" placeholder="${_('quick filter...')}" value=""/> ${h.link_to(_('Admin'),h.url('admin_home'))} &raquo; <span id="repo_count">0</span> ${_('Repositories')}
+    <span id="repo_count">0</span> ${_('Repositories')}
 </%def>
 <%block name="header_menu">
     ${self.menu('admin')}
@@ -24,36 +24,30 @@
          %endif
         </ul>
     </div>
-    <div class="table-grid table yui-skin-sam" id="datatable_list_wrap"></div>
+    <div class="table">
+        <table id="datatable_list_wrap"></table>
+    </div>
     <div id="user-paginator" style="padding: 0px 0px 0px 20px"></div>
 
 
 </div>
 <script>
   var data = ${c.data|n};
-  var fields = [
-    {key:"menu"},
-    {key:"raw_name"},
-    {key:"name"},
-    {key:"desc"},
-    {key:"last_changeset"},
-    {key:"last_rev_raw"},
-    {key:"owner"},
-    {key:"state"},
-    {key:"action"}
-  ];
-  var column_defs = [
-    {key:"menu",label:"",sortable:false,className:"quick_repo_menu hidden"},
-    {key:"name",label:"${_('Name')}",sortable:true, sortOptions: { sortFunction: nameSort }},
-    {key:"desc",label:"${_('Description')}",sortable:true},
-    {key:"last_changeset",label:"${_('Tip')}",sortable:true, sortOptions: { sortFunction: revisionSort }},
-    {key:"owner",label:"${_('Owner')}",sortable:true},
-    {key:"state",label:"${_('State')}",sortable:true},
-    {key:"action",label:"${_('Action')}",sortable:false}
-  ];
-  var counter = YUD.get('repo_count');
-  var sort_key = "name";
-  YUI_datatable(data, fields, column_defs, counter, sort_key, ${c.visual.admin_grid_items});
+  var myDataTable = $("#datatable_list_wrap").DataTable({
+        data: data.records,
+        columns: [
+            {data: "menu", sortable: false, className: "quick_repo_menu hidden", searchable: false},
+            {data: "raw_name", visible: false, searchable: false},
+            {data: "name", orderData: 1, title: "${_('Name')}"},
+            {data: "desc", title: "${_('Description')}", searchable: false},
+            {data: "last_rev_raw", visible: false, searchable: false},
+            {data: "last_changeset", orderData: 4, title: "${_('Tip')}", searchable: false},
+            {data: "owner", title: "${_('Owner')}", searchable: false},
+            {data: "state", title: "${_('State')}", searchable: false},
+            {data: "action", title: "${_('Action')}", sortable: false, searchable: false}
+        ],
+        drawCallback: updateRowCountCallback($("#repo_count"))
+    });
 </script>
 
 </%def>
--- a/kallithea/templates/admin/user_groups/user_groups.html	Mon May 23 18:02:33 2016 +0200
+++ b/kallithea/templates/admin/user_groups/user_groups.html	Thu May 21 16:48:13 2015 +0200
@@ -28,30 +28,25 @@
         </ul>
     </div>
     <!-- end box / title -->
-    <div class="table-grid table yui-skin-sam" id="datatable_list_wrap"></div>
+    <div class="table">
+        <table id="datatable_list_wrap"></table>
+    </div>
     <div id="user-paginator" style="padding: 0px 0px 0px 20px"></div>
 </div>
 <script>
-  var data = ${c.data|n};
-  var fields = [
-    {key: "group_name"},
-    {key: "raw_name"},
-    {key: "desc"},
-    {key: "members"},
-    {key: "active"},
-    {key: "owner"},
-    {key: "action"}
-  ];
-  var column_defs = [
-    {key:"group_name",label:"${_('Name')}",sortable:true, sortOptions: { sortFunction: nameSort }},
-    {key:"desc",label:"${_('Description')}",sortable:true},
-    {key:"members",label:"${_('Members')}",sortable:false},
-    {key:"active",label:"${_('Active')}",sortable:true},
-    {key:"owner",label:"${_('Owner')}",sortable:true},
-    {key:"action",label:"${_('Action')}",sortable:false}
-  ];
-  var counter = YUD.get('user_group_count');
-  var sort_key = "group_name";
-  YUI_datatable(data, fields, column_defs, counter, sort_key, ${c.visual.admin_grid_items});
+    var data = ${c.data|n};
+    var $dataTable = $("#datatable_list_wrap").DataTable({
+        data: data.records,
+        columns: [
+            {data: "raw_name", visible: false, searchable: false},
+            {data: "group_name", title: "${_('Name')}", orderData: 0},
+            {data: "desc", title: "${_('Description')}", searchable: false},
+            {data: "members", title: "${_('Members')}", searchable: false},
+            {data: "active", title: "${_('Active')}", searchable: false, 'sType': 'str'},
+            {data: "owner", title: "${_('Owner')}", searchable: false},
+            {data: "action", title: "${_('Action')}", searchable: false, sortable: false}
+        ],
+        order: [[1, "asc"]]
+    });
 </script>
 </%def>
--- a/kallithea/templates/admin/users/users.html	Mon May 23 18:02:33 2016 +0200
+++ b/kallithea/templates/admin/users/users.html	Thu May 21 16:48:13 2015 +0200
@@ -6,7 +6,6 @@
 </%block>
 
 <%def name="breadcrumbs_links()">
-    <input class="q_filter_box" id="q_filter" size="15" type="text" name="filter" placeholder="${_('quick filter...')}" value=""/>
     ${h.link_to(_('Admin'),h.url('admin_home'))} &raquo; <span id="user_count">0</span> ${_('Users')}
 </%def>
 
@@ -26,39 +25,30 @@
         </ul>
     </div>
     <!-- end box / title -->
-    <div class="table-grid table yui-skin-sam" id="datatable_list_wrap"></div>
-    <div id="user-paginator" style="padding: 0px 0px 0px 20px"></div>
+    <div class="table">
+        <table id="datatable_list_wrap"></table>
+    </div>
 </div>
 
 <script>
-  var data = ${c.data|n};
-  var fields = [
-    {key: "gravatar"},
-    {key: "raw_name"},
-    {key: "username"},
-    {key: "firstname"},
-    {key: "lastname"},
-    {key: "last_login"},
-    {key: "last_login_raw"},
-    {key: "active"},
-    {key: "admin"},
-    {key: "extern_type"},
-    {key: "action"}
-  ];
-  var column_defs = [
-    {key:"gravatar",label:"",sortable:false},
-    {key:"username",label:"${_('Username')}",sortable:true},
-    {key:"firstname",label:"${_('First Name')}",sortable:true},
-    {key:"lastname",label:"${_('Last Name')}",sortable:true},
-    {key:"last_login",label:"${_('Last Login')}",sortable:true, sortOptions: { sortFunction: lastLoginSort }},
-    {key:"active",label:"${_('Active')}",sortable:true},
-    {key:"admin",label:"${_('Admin')}",sortable:true},
-    {key:"extern_type",label:"${_('Auth Type')}",sortable:true},
-    {key:"action",label:"${_('Action')}",sortable:false}
-  ];
-  var counter = YUD.get('user_count');
-  var sort_key = "username";
-  YUI_datatable(data, fields, column_defs, counter, sort_key, ${c.visual.admin_grid_items});
+    var data = ${c.data|n};
+    var $dataTable = $("#datatable_list_wrap").DataTable({
+        data: data.records,
+        columns: [
+            {data: "gravatar", sortable: false, searchable: false},
+            {data: "username", title: "${_('Username')}"},
+            {data: "firstname", title: "${_('First Name')}"},
+            {data: "lastname", title: "${_('Last Name')}"},
+            {data: "last_login_raw", visible: false, searchable: false},
+            {data: "last_login", title: "${_('Last Login')}", orderData: 4, searchable: false},
+            {data: "active", title: "${_('Active')}", searchable: false, 'sType': 'str'},
+            {data: "admin", title: "${_('Admin')}", searchable: false, 'sType': 'str'},
+            {data: "extern_type", title: "${_('Auth Type')}", searchable: false},
+            {data: "action", title: "${_('Action')}", searchable: false, sortable: false}
+        ],
+        order: [[1, "asc"]],
+        drawCallback: updateRowCountCallback($("#user_count"))
+    });
 </script>
 
 </%def>
--- a/kallithea/templates/index_base.html	Mon May 23 18:02:33 2016 +0200
+++ b/kallithea/templates/index_base.html	Thu May 21 16:48:13 2015 +0200
@@ -2,9 +2,6 @@
     <div class="box">
         <!-- box / title -->
         <div class="title">
-            <h5>
-            <input class="q_filter_box" id="q_filter" size="15" type="text" name="filter" placeholder="${_('quick filter...')}" value=""/> ${parent.breadcrumbs()} <span id="repo_count">0</span> ${_('repositories')}
-            </h5>
             %if c.authuser.username != 'default':
               <ul class="links">
                 <li>
@@ -75,112 +72,31 @@
             </div>
             <%cnt=0%>
             <%namespace name="dt" file="/data_table/_dt_elements.html"/>
-            <div class="yui-skin-sam" id="repos_list_wrap"></div>
+            <table class="yui-skin-sam" id="repos_list_wrap"></table>
             <div id="user-paginator" style="padding: 0px 0px 0px 0px"></div>
         </div>
     </div>
 
       <script>
-        var data = ${c.data|n};
-        var myDataSource = new YAHOO.util.DataSource(data);
-        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
-
-        myDataSource.responseSchema = {
-            resultsList: "records",
-            fields: [
-               {key:"menu"},
-               {key:"raw_name"},
-               {key:"name"},
-               {key:"desc"},
-               {key:"last_change"},
-               {key:"last_changeset"},
-               {key:"last_rev_raw"},
-               {key:"owner"},
-               {key:"atom"}
-            ]
-         };
-        myDataSource.doBeforeCallback = function(req,raw,res,cb) {
-            // This is the filter function
-            var data     = res.results || [],
-                filtered = [],
-                i,l;
-
-            if (req) {
-                req = req.toLowerCase();
-                for (i = 0; i<data.length; i++) {
-                    var pos = data[i].raw_name.toLowerCase().indexOf(req, ${len(group_name)});
-                    if (pos != -1) {
-                        filtered.push(data[i]);
-                    }
-                }
-                res.results = filtered;
-            }
-            YUD.get('repo_count').innerHTML = res.results.length;
-            return res;
-        }
-
-        // main table sorting
-        var myColumnDefs = [
-            {key:"menu",label:"",sortable:false,className:"quick_repo_menu hidden"},
-            {key:"name",label:"${_('Name')}",sortable:true,
-                sortOptions: { sortFunction: nameSort }},
-            {key:"desc",label:"${_('Description')}",sortable:true},
-            {key:"last_change",label:"${_('Last Change')}",sortable:true,
-                sortOptions: { sortFunction: ageSort }},
-            {key:"last_changeset",label:"${_('Tip')}",sortable:true,
-                sortOptions: { sortFunction: revisionSort }},
-            {key:"owner",label:"${_('Owner')}",sortable:true},
-            {key:"atom",label:"",sortable:false}
-        ];
-
-        var myDataTable = new YAHOO.widget.DataTable("repos_list_wrap", myColumnDefs, myDataSource,{
-          sortedBy:{key:"name",dir:"asc"},
-          paginator: YUI_paginator(${c.visual.dashboard_items},['user-paginator']),
-
-          MSG_SORTASC:"${_('Click to sort ascending')}",
-          MSG_SORTDESC:"${_('Click to sort descending')}",
-          MSG_EMPTY:"${_('No repositories found.')}",
-          MSG_ERROR:"${_('Data error.')}",
-          MSG_LOADING:"${_('Loading...')}"
-        }
-        );
-        myDataTable.subscribe('postRenderEvent',function(oArgs) {
-            tooltip_activate();
-            quick_repo_menu();
-        });
-
-        var filterTimeout = null;
-
-        updateFilter = function () {
-            // Reset timeout
-            filterTimeout = null;
-
-            // Reset sort
-            var state = myDataTable.getState();
-            state.sortedBy = {key:'name', dir:YAHOO.widget.DataTable.CLASS_ASC};
-
-            // Get filtered data
-            myDataSource.sendRequest(YUD.get('q_filter').value,{
-                success : myDataTable.onDataReturnInitializeTable,
-                failure : myDataTable.onDataReturnInitializeTable,
-                scope   : myDataTable,
-                argument: state
+        var data = ${c.data|n},
+            $dataTable = $("#repos_list_wrap").DataTable({
+                data: data.records,
+                columns: [
+                    {data: "menu", sortable: false, className: "quick_repo_menu hidden", searchable: false},
+                    {data: "raw_name", visible: false, searchable: false},
+                    {title: "${_('Name')}", data: "name", orderData: 1, render: {
+                        filter: function(data) {
+                            return $(data).find(".dt_repo_name").text();
+                        }
+                    }},
+                    {data: "desc", title: "${_('Description')}", searchable: false},
+                    {data: "last_change_iso", visible: false, searchable: false},
+                    {data: "last_change", title: "${_('Last Change')}", orderData: 4, searchable: false},
+                    {data: "last_rev_raw", visible: false, searchable: false},
+                    {data: "last_changeset", title: "${_('Tip')}", orderData: 6, searchable: false},
+                    {data: "owner", title: "${_('Owner')}", searchable: false},
+                    {data: "atom", sortable: false}
+                ],
+                order: [[1, "asc"]]
             });
-
-        };
-        $('#q_filter').click(function(){
-            if(!$('#q_filter').hasClass('loaded')){
-                //TODO: load here full list later to do search within groups
-                $('#q_filter').addClass('loaded');
-            }
-        });
-
-        $('#q_filter').keyup(function(){
-            clearTimeout(filterTimeout);
-            filterTimeout = setTimeout(updateFilter,600);
-        });
-
-        if($('#q_filter').val()) {
-            updateFilter();
-        }
       </script>