kallithea Changeset - b8830c373681

Changeset - b8830c373681

Parent rev.

Child rev.

[Not reviewed]

default

0 7 0

Daniel Hobley - 10 years ago 2015-05-21 16:48:13
danielh@unity3d.com

datatables: use jQuery DataTables instead of base.js YUI_datatable wrapper of YAHOO.widget.DataTable

Sorting and searching fixes by Mads Kiilerich.

7 files changed with 102 insertions and 273 deletions:

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

104

0 comments (0 inline, 0 general)

kallithea/model/repo.py

➞

Show inline comments

@@ @@ -234,12 +234,13 @@ class RepoModel(BaseModel): @@
             cs_cache = repo.changeset_cache
             row = {
                 "menu": quick_menu(repo.repo_name),
                 "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'),
                 "desc": desc(repo.description),
                 "owner": h.person(repo.user),
                 "state": state(repo.repo_state),

kallithea/public/js/base.js

➞

Show inline comments

@@ @@ -1783,85 +1783,12 @@ var YUI_paginator = function(links_per_p @@
         containers:containers
     });
     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.
  **/
 var branchSort = function(results, container, query) {
     if (query.term) {
@@ @@ -1926,6 +1853,16 @@ var prefixFirstSort = function(results, @@
+            }
             return 0;
         });
+    }
     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);
+    }
 };

kallithea/templates/admin/repo_groups/repo_groups.html

➞

Show inline comments

@@ @@ -3,13 +3,12 @@ @@
 <%block name="title">
     ${_('Repository Groups Administration')}
 </%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>
 <%block name="header_menu">
     ${self.menu('admin')}
@@ @@ -26,31 +25,28 @@ @@
                <a href="${h.url('new_repos_group')}" class="btn btn-small btn-success"><i class="icon-plus"></i> ${_('Add Repository Group')}</a>
              </li>
             %endif
         </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>

kallithea/templates/admin/repos/repos.html

➞

Show inline comments

@@ @@ -3,13 +3,13 @@ @@
 <%block name="title">
     ${_('Repositories Administration')}
 </%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')}
 </%block>
 <%def name="main()">
 <div class="box">
@@ @@ -21,39 +21,33 @@ @@
           <li>
             <a href="${h.url('new_repo')}" class="btn btn-small btn-success"><i class="icon-plus"></i> ${_('Add Repository')}</a>
           </li>
          %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>

kallithea/templates/admin/user_groups/user_groups.html

➞

Show inline comments

@@ @@ -25,33 +25,28 @@ @@
             <a href="${h.url('new_users_group')}" class="btn btn-small btn-success"><i class="icon-plus"></i> ${_('Add User Group')}</a>
           </li>
         %endif
         </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 $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>

kallithea/templates/admin/users/users.html

➞

Show inline comments

@@ @@ -3,13 +3,12 @@ @@
 <%block name="title">
     ${_('Users Administration')}
 </%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>
 <%block name="header_menu">
     ${self.menu('admin')}
 </%block>
@@ @@ -23,42 +22,33 @@ @@
           <li>
             <a href="${h.url('new_user')}" class="btn btn-small btn-success"><i class="icon-plus"></i> ${_('Add User')}</a>
           </li>
         </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 $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>

kallithea/templates/index_base.html

➞

Show inline comments

 <%page args="parent,group_name=''" />
     <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>
                 <%
                     gr_name = c.group.group_name if c.group else None
                     # create repositories with write permission on group is set to true
@@ @@ -72,115 +69,34 @@ @@
             % endif
             <div id="welcome" style="display:none;text-align:center">
                 <h1><a href="${h.url('home')}">${c.site_name} ${c.kallithea_version}</a></h1>
             </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;
         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();
+        }
         // 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();
                     }},
                     {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"]]
         });
         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();
+        }
       </script>

0 comments (0 inline, 0 general)