Mercurial > kallithea
changeset 5939:b8830c373681
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'))} » <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'))} » <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'))} » <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>