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 105 insertions and 276 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

105

0 comments (0 inline, 0 general)

kallithea/model/repo.py

➞

Show inline comments

@@ @@ -237,6 +237,7 @@ class RepoModel(BaseModel): @@
                 "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'),

kallithea/public/js/base.js

➞

Show inline comments

@@ @@ -1786,79 +1786,6 @@ var YUI_paginator = function(links_per_p @@
     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 @@ var prefixFirstSort = function(results, @@
+    }
     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

@@ @@ -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>

kallithea/templates/admin/repos/repos.html

➞

Show inline comments

@@ @@ -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>

kallithea/templates/admin/user_groups/user_groups.html

➞

Show inline comments

@@ @@ -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>

kallithea/templates/admin/users/users.html

➞

Show inline comments

@@ @@ -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>

kallithea/templates/index_base.html

➞

Show inline comments

@@ @@ -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>

0 comments (0 inline, 0 general)