view rhodecode/templates/index_base.html @ 1778:defcf245f3e9 beta

fixes #229 repo sorting is not working. - implemented repo sorting using YUI dataTable
author Marcin Kuzminski <marcin@python-works.com>
date Fri, 16 Dec 2011 20:13:23 +0200
parents 184557472f5c
children 9edd6ac132f0
line wrap: on
line source

<%page args="parent" /> 
    <div class="box">
        <!-- box / title -->
        <div class="title">
            <h5>
            <input class="q_filter_box" id="q_filter" size="15" type="text" name="filter" value="${_('quick filter...')}"/> ${parent.breadcrumbs()} <span id="repo_count">0</span> ${_('repositories')} 
            </h5>
            %if c.rhodecode_user.username != 'default':
                %if h.HasPermissionAny('hg.admin','hg.create.repository')():
                <ul class="links">
                  <li>
                    <span>${h.link_to(_('ADD REPOSITORY'),h.url('admin_settings_create_repository'))}</span>
                  </li>          
                </ul>           
                %endif
            %endif
        </div>
        <!-- end box / title -->
        <div class="table">
           % if c.groups:
            <div id='groups_list_wrap' class="yui-skin-sam">
              <table id="groups_list">
                  <thead>
                      <tr>
                          <th class="left"><a href="#">${_('Group name')}</a></th>
                          <th class="left"><a href="#">${_('Description')}</a></th>
                          ##<th class="left"><a href="#">${_('Number of repositories')}</a></th>
                      </tr>
                  </thead>
                  
                  ## REPO GROUPS
                  % for gr in c.groups:
                    <tr>
                        <td>
                            <div style="white-space: nowrap">
                            <img class="icon" alt="${_('Repositories group')}" src="${h.url('/images/icons/database_link.png')}"/>
                            ${h.link_to(gr.name,url('repos_group_home',group_name=gr.group_name))}
                            </div>
                        </td>
                        <td>${gr.group_description}</td>
                        ##<td><b>${gr.repositories.count()}</b></td>
                    </tr>
                  % endfor
                  
              </table>
            </div>
            <div style="height: 20px"></div>
            % endif
            <div id="welcome" style="display:none;text-align:center">
                <h1><a href="${h.url('home')}">${c.rhodecode_name} ${c.rhodecode_version}</a></h1>
            </div>
            <div id='repos_list_wrap' class="yui-skin-sam">
            <table id="repos_list">
            <thead>
                <tr>
                    <th class="left"></th>
                    <th class="left">${_('Name')}</th>
                    <th class="left">${_('Description')}</th>
                    <th class="left">${_('Last change')}</th>
                    <th class="left">${_('Tip')}</th>
                    <th class="left">${_('Owner')}</th>
                    <th class="left">${_('RSS')}</th>
                    <th class="left">${_('Atom')}</th>
                </tr>
            </thead>
            <tbody>
            <%cnt=0%>
            %for cnt,repo in enumerate(c.repos_list,1):
                <tr class="parity${cnt%2}">
                    <td class="quick_repo_menu">
                    <ul class="menu_items hidden">
                      <li style="border-top:1px solid #003367;margin-left:18px;padding-left:-99px"></li>
                      <li>
                         <a title="${_('Summary')}" href="${h.url('summary_home',repo_name=repo['name'])}">
                         <span class="icon">
                             <img src="${h.url('/images/icons/clipboard_16.png')}" alt="${_('Summary')}" />
                         </span>
                         <span>${_('Summary')}</span>                 
                         </a>             
                      </li>
                      <li>
                         <a title="${_('Changelog')}" href="${h.url('changelog_home',repo_name=repo['name'])}">
                         <span class="icon">
                             <img src="${h.url('/images/icons/time.png')}" alt="${_('Changelog')}" />
                         </span>
                         <span>${_('Changelog')}</span>                 
                         </a>             
                      </li>
                      <li>
                         <a title="${_('Files')}" href="${h.url('files_home',repo_name=repo['name'])}">
                         <span class="icon">
                             <img src="${h.url('/images/icons/file.png')}" alt="${_('Files')}" />
                         </span>
                         <span>${_('Files')}</span>                 
                         </a>             
                      </li>
                      <li>
                         <a title="${_('Fork')}" href="${h.url('repo_fork_home',repo_name=repo['name'])}">
                         <span class="icon">
                             <img src="${h.url('/images/icons/arrow_divide.png')}" alt="${_('Fork')}" />
                         </span>
                         <span>${_('Fork')}</span>                 
                         </a>             
                      </li>                                                      
                    </ul>
                    </td>
                    <td>
                    ## TYPE OF REPO
                    <div style="white-space: nowrap">
                     %if repo['dbrepo']['repo_type'] =='hg':
                       <img class="icon" title="${_('Mercurial repository')}" alt="${_('Mercurial repository')}" src="${h.url('/images/icons/hgicon.png')}"/>
                     %elif repo['dbrepo']['repo_type'] =='git':
                       <img class="icon" title="${_('Git repository')}" alt="${_('Git repository')}" src="${h.url('/images/icons/giticon.png')}"/>
                     %endif 
                    
                     ##PRIVATE/PUBLIC
                     %if repo['dbrepo']['private']:
                        <img class="icon" title="${_('private repository')}" alt="${_('private repository')}" src="${h.url('/images/icons/lock.png')}"/>
                     %else:
                        <img class="icon" title="${_('public repository')}" alt="${_('public repository')}" src="${h.url('/images/icons/lock_open.png')}"/>
                     %endif
                    
                    ##NAME   
                    ${h.link_to(repo['name'],
                        h.url('summary_home',repo_name=repo['name']),class_="repo_name")}
                    %if repo['dbrepo_fork']:
                        <a href="${h.url('summary_home',repo_name=repo['dbrepo_fork']['repo_name'])}">
                        <img class="icon" alt="${_('fork')}"
                        title="${_('Fork of')} ${repo['dbrepo_fork']['repo_name']}" 
                        src="${h.url('/images/icons/arrow_divide.png')}"/></a>
                    %endif
                    </div>
                    </td>
                    ##DESCRIPTION
                    <td><span class="tooltip" title="${h.tooltip(repo['description'])}">
                       ${h.truncate(repo['description'],60)}</span>
                    </td>
                    ##LAST CHANGE
                    <td>
                      <span class="tooltip" title="${repo['last_change']}">
                      ${h.age(repo['last_change'])}</span>
                    </td>
                    <td>
                        <div>
                        %if repo['rev']>=0:
                        <pre><a title="${h.tooltip('%s\n%s' % (repo['author'],repo['last_msg']))}" class="tooltip" href="${h.url('changeset_home',repo_name=repo['name'],revision=repo['tip'])}">${'r%s:%s' % (repo['rev'],h.short_id(repo['tip']))}</a></pre>
                        %else:
                            ${_('No changesets yet')}
                        %endif
                        </div>    
                    </td>
                    <td title="${repo['contact']}">${h.person(repo['contact'])}</td>
                    <td>
                      %if c.rhodecode_user.username != 'default':
                        <a title="${_('Subscribe to %s rss feed')%repo['name']}" class="rss_icon"  href="${h.url('rss_feed_home',repo_name=repo['name'],api_key=c.rhodecode_user.api_key)}"></a>
                      %else:
                        <a title="${_('Subscribe to %s rss feed')%repo['name']}" class="rss_icon"  href="${h.url('rss_feed_home',repo_name=repo['name'])}"></a>
                      %endif:                       
                    </td>        
                    <td>
                      %if c.rhodecode_user.username != 'default':
                        <a title="${_('Subscribe to %s atom feed')%repo['name']}"  class="atom_icon" href="${h.url('atom_feed_home',repo_name=repo['name'],api_key=c.rhodecode_user.api_key)}"></a>
                      %else:
                        <a title="${_('Subscribe to %s atom feed')%repo['name']}"  class="atom_icon" href="${h.url('atom_feed_home',repo_name=repo['name'])}"></a>
                      %endif:
                    </td>
                </tr>
            %endfor
            </tbody>
            </table>
            </div>
        </div>
    </div>
    <script>
      YUD.get('repo_count').innerHTML = ${cnt}; 
      var func = function(node){
          return node.parentNode.parentNode.parentNode.parentNode;
      }
      var qrm = function(){
        YUE.on(YUQ('.quick_repo_menu'),'click',function(e){
            var menu = e.currentTarget.firstElementChild.firstElementChild;
            if(YUD.hasClass(menu,'hidden')){
                YUD.addClass(e.currentTarget,'active');
                YUD.removeClass(menu,'hidden');
            }else{
                YUD.removeClass(e.currentTarget,'active');
                YUD.addClass(menu,'hidden');
            }
        })
      };

      // groups table sorting
      var myColumnDefs = [
          {key:"name",label:"${_('Group Name')}",sortable:true,
              sortOptions: { sortFunction: groupNameSort }},
          {key:"desc",label:"${_('Description')}",sortable:true},
      ];

      var myDataSource = new YAHOO.util.DataSource(YUD.get("groups_list"));
      
      myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
      myDataSource.responseSchema = {
          fields: [
              {key:"name"},
              {key:"desc"},
          ]
      };

      var myDataTable = new YAHOO.widget.DataTable("groups_list_wrap", myColumnDefs, myDataSource,
              {
               sortedBy:{key:"name",dir:"asc"},
               MSG_SORTASC:"${_('Click to sort ascending')}",
               MSG_SORTDESC:"${_('Click to sort descending')}"
              }
      );
      
      // 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:"tip",label:"${_('Tip')}",sortable:true,
        	  sortOptions: { sortFunction: revisionSort }},
          {key:"owner",label:"${_('Owner')}",sortable:true},
          {key:"rss",label:"",sortable:false},
          {key:"atom",label:"",sortable:false},
      ];

      var myDataSource = new YAHOO.util.DataSource(YUD.get("repos_list"));
      
      myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
      
      myDataSource.responseSchema = {
          fields: [
              {key:"menu"},
              {key:"name"},
              {key:"desc"},
              {key:"last_change"},
              {key:"tip"},
              {key:"owner"},
              {key:"rss"},
              {key:"atom"},
          ]
      };

      var myDataTable = new YAHOO.widget.DataTable("repos_list_wrap", myColumnDefs, myDataSource,
              {
               sortedBy:{key:"name",dir:"asc"},
               MSG_SORTASC:"${_('Click to sort ascending')}",
               MSG_SORTDESC:"${_('Click to sort descending')}"
              }
      );
      myDataTable.subscribe('postRenderEvent',function(oArgs) {
          tooltip_activate();
          qrm();
          q_filter('q_filter',YUQ('div.table tr td a.repo_name'),func);          
      });          
      
    </script>