user groups: fix form and label

rhodecode/templates/admin/users/user_edit_groups.mako

@@ -1,145 +1,147 b''
 ## -*- coding: utf-8 -*-
 
 
 <div class="panel panel-default">
     <div class="panel-heading">
       <h3 class="panel-title">${_('User groups administration')}</h3>
     </div>
     <div class="panel-body">
+        <div class="fields">
         <div class="field">
             <div class="label label-checkbox">
-                <label for="users_group_active">${_('Add user to group')}:</label>
+                    <label for="users_group_active">${_('Add `%s` to user group') % c.user.username}:</label>
             </div>
             <div class="input">
                 ${h.text('add_user_to_group', placeholder="user group name", class_="medium")}
             </div>
 
         </div>
+        </div>
 
         <div class="groups_management">
             ${h.secure_form(h.route_path('edit_user_groups_management_updates', user_id=c.user.user_id), method='post')}
             <div id="repos_list_wrap">
                 <table id="user_group_list_table" class="display"></table>
             </div>
             <div class="buttons">
                 ${h.submit('save',_('Save'),class_="btn")}
             </div>
             ${h.end_form()}
         </div>
         </div>
 </div>
 <script>
 var api;
 $(document).ready(function() {
 
     var get_datatable_count = function(){
         $('#user_group_count').text(api.page.info().recordsDisplay);
     };
 
     $('#user_group_list_table').on('click', 'a.editor_remove', function (e) {
         e.preventDefault();
         var row = api.row($(this).closest('tr'));
         row.remove().draw();
     } );
 
     $('#user_group_list_table').DataTable({
       data: ${c.groups|n},
       dom: 'rtp',
       pageLength: ${c.visual.admin_grid_items},
       order: [[ 0, "asc" ]],
       columns: [
          { data: {"_": "group_name",
                   "sort": "group_name"}, title: "${_('Name')}", className: "td-componentname," ,
             render: function (data,type,full,meta)
                     {return '<div><i class="icon-group" title="User group">'+data+'</i></div>'}},
 
          { data: {"_": "group_description",
                   "sort": "group_description"}, title: "${_('Description')}", className: "td-description" },
          { data: {"_": "users_group_id"}, className: "td-user",
                  render: function (data,type,full,meta)
                     {return '<input type="hidden" name="users_group_id" value="'+data+'">'}},
          { data: {"_": "active",
                   "sort": "active"}, title: "${_('Active')}", className: "td-active", className: "td-number"},
          { data: {"_": "owner_data"}, title: "${_('Owner')}", className: "td-user",
              render: function (data,type,full,meta)
                     {return '<div class="rc-user tooltip">'+
                             '<img class="gravatar" src="'+ data.owner_icon +'" height="16" width="16">'+
                              data.owner +'</div>'
                     }
 },
          { data: null,
              title: "${_('Action')}",
              className: "td-action",
              defaultContent: '<a href="" class="btn btn-link btn-danger">Delete</a>'
          },
       ],
       language: {
           paginate: DEFAULT_GRID_PAGINATION,
           emptyTable: _gettext("No user groups available yet.")
       },
       "initComplete": function( settings, json ) {
           var data_grid = $('#user_group_list_table').dataTable();
           api = data_grid.api();
           get_datatable_count();
       }
     });
 
     // update the counter when doing search
     $('#user_group_list_table').on( 'search.dt', function (e,settings) {
         get_datatable_count();
     });
 
     // filter, filter both grids
     $('#q_filter').on( 'keyup', function () {
       var user_api = $('#user_group_list_table').dataTable().api();
       user_api
         .columns(0)
         .search(this.value)
         .draw();
     });
 
     // refilter table if page load via back button
     $("#q_filter").trigger('keyup');
 
   });
 
     $('#language').select2({
         'containerCssClass': "drop-menu",
         'dropdownCssClass': "drop-menu-dropdown",
         'dropdownAutoWidth': true
     });
 
 
 
 $(document).ready(function(){
     $("#group_parent_id").select2({
         'containerCssClass': "drop-menu",
         'dropdownCssClass': "drop-menu-dropdown",
         'dropdownAutoWidth': true
     });
 
     $('#add_user_to_group').autocomplete({
         serviceUrl: pyroutes.url('user_group_autocomplete_data'),
         minChars:2,
         maxHeight:400,
         width:300,
         deferRequestBy: 300, //miliseconds
         showNoSuggestionNotice: true,
         params: { user_groups:true },
         formatResult: autocompleteFormatResult,
         lookupFilter: autocompleteFilterResult,
         onSelect: function(element, suggestion){
             var owner = {owner_icon: suggestion.owner_icon, owner:suggestion.owner};
             api.row.add(
                     {"active": suggestion.active,
                         "owner_data": owner,
                         "users_group_id": suggestion.id,
                         "group_description": suggestion.description,
                         "group_name": suggestion.value}).draw();
         }
     });
 })
 
 </script>