Mercurial > kallithea
changeset 5940:69418cbd8285
admin: use jQuery DataTables for my & watched repos
| author | Mads Kiilerich <madski@unity3d.com> |
|---|---|
| date | Mon, 23 May 2016 18:02:33 +0200 |
| parents | b8830c373681 |
| children | ff33bb5cf1e9 |
| files | kallithea/templates/admin/my_account/my_account_repos.html kallithea/templates/admin/my_account/my_account_watched.html |
| diffstat | 2 files changed, 31 insertions(+), 204 deletions(-) [+] |
line wrap: on
line diff
--- a/kallithea/templates/admin/my_account/my_account_repos.html Thu May 21 16:48:13 2015 +0200 +++ b/kallithea/templates/admin/my_account/my_account_repos.html Mon May 23 18:02:33 2016 +0200 @@ -1,107 +1,21 @@ <div style="font-size: 20px; color: #666666; padding: 0px 0px 10px 0px">${_('Repositories You Own')}</div> -<input class="q_filter_box" id="q_filter" size="15" type="text" name="filter" - placeholder="${_('quick filter...')}" value=""/> -<div class="table-grid table yui-skin-sam" id="repos_list_wrap"></div> -<div id="user-paginator" style="padding: 0px 0px 0px 20px"></div> +<div class="table"> + <table id="datatable_list_wrap"></table> +</div> <script> -function table_renderer(data){ - 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:"last_changeset"}, - {key:"last_rev_raw"}, - {key:"action"} - ] - }; - 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; - } - 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:"last_changeset",label:"${_('Tip')}",sortable:true, - sortOptions: { sortFunction: revisionSort }}, - {key:"action",label:"${_('Action')}",sortable:false} - ]; - - var myDataTable = new YAHOO.widget.DataTable("repos_list_wrap", myColumnDefs, myDataSource,{ - sortedBy:{key:"name",dir:"asc"}, - paginator: YUI_paginator(50, ['user-paginator']), - - MSG_SORTASC:"${_('Click to sort ascending')}", - MSG_SORTDESC:"${_('Click to sort descending')}", - MSG_EMPTY:"${_('No records 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 - }); - - }; - $('#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(); - } - - } - -table_renderer(${c.data |n}); + var data = ${c.data|n}; + 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: "last_rev_raw", "visible": false, searchable: false}, + {data: "last_changeset", "orderData": 3, title: "${_('Tip')}", searchable: false}, + {data: "action", title: "${_('Action')}", sortable: false, searchable: false} + ], + order: [[2, "asc"]] + }); </script>
--- a/kallithea/templates/admin/my_account/my_account_watched.html Thu May 21 16:48:13 2015 +0200 +++ b/kallithea/templates/admin/my_account/my_account_watched.html Mon May 23 18:02:33 2016 +0200 @@ -1,107 +1,20 @@ <div style="font-size: 20px; color: #666666; padding: 0px 0px 10px 0px">${_('Repositories You are Watching')}</div> -<input class="q_filter_box" id="q_filter" size="15" type="text" name="filter" - placeholder="${_('quick filter...')}" value=""/> -<div class="table-grid table yui-skin-sam" id="repos_list_wrap"></div> -<div id="user-paginator" style="padding: 0px 0px 0px 20px"></div> +<div class="table"> + <table id="datatable_list_wrap"></table> +</div> <script> -function table_renderer(data){ - 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:"last_changeset"}, - {key:"last_rev_raw"}, - {key:"action"} - ] - }; - 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; - } - 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:"last_changeset",label:"${_('Tip')}",sortable:true, - sortOptions: { sortFunction: revisionSort }}, - {key:"action",label:"${_('Action')}",sortable:false} - ]; - - var myDataTable = new YAHOO.widget.DataTable("repos_list_wrap", myColumnDefs, myDataSource,{ - sortedBy:{key:"name",dir:"asc"}, - paginator: YUI_paginator(50, ['user-paginator']), - - MSG_SORTASC:"${_('Click to sort ascending')}", - MSG_SORTDESC:"${_('Click to sort descending')}", - MSG_EMPTY:"${_('No records 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 - }); - - }; - $('#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(); - } - - } - -table_renderer(${c.data |n}); + var data = ${c.data|n}; + 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: "last_rev_raw", "visible": false, searchable: false}, + {data: "last_changeset", "orderData": 3, title: "${_('Tip')}", searchable: false}, + ], + order: [[2, "asc"]] + }); </script>