Changeset 25405


Ignore:
Timestamp:
11/08/13 22:50:52 (6 years ago)
Author:
plg
Message:

feature 1668: first draft, add a complete form to edit user properties inside the DataTable.

Location:
trunk/admin/themes/default
Files:
2 added
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/admin/themes/default/template/user_list.tpl

    r25282 r25405  
    1616var selection = [{$selection}]; 
    1717var pwg_token = "{$PWG_TOKEN}"; 
     18 
     19var truefalse = { 
     20  true:"{'Yes'|translate}", 
     21  false:"{'No'|translate}", 
     22}; 
    1823{/footer_script} 
    1924 
     
    8085   * Table with users 
    8186   */ 
     87  /* Formating function for row details */ 
     88  function fnFormatDetails(oTable, nTr) { 
     89    var userId = oTable.fnGetData(nTr)[0]; 
     90    console.log("userId = "+userId); 
     91    var sOut = null; 
     92 
     93    jQuery.ajax({ 
     94      url: "ws.php?format=json&method=pwg.users.getList", 
     95      type:"POST", 
     96      data: { 
     97        user_id: userId, 
     98        display: "all", 
     99      }, 
     100      success:function(data) { 
     101        jQuery("#user"+userId+" .loading").hide(); 
     102 
     103        var data = jQuery.parseJSON(data); 
     104        if (data.stat == 'ok') { 
     105          var user = data.result.users[0]; 
     106 
     107          var userDetails = '<input type="hidden" name="user_id" value="'+user.id+'">'; 
     108          userDetails += '<fieldset><legend>{/literal}{'Properties'|translate}{literal}</legend>'; 
     109          userDetails += '<div class="userProperty"><strong>{/literal}{'Username'|translate}{literal}</strong>'; 
     110          userDetails += '<br>'+user.username+'</div>'; 
     111 
     112          userDetails += '<div class="userProperty"><strong>{/literal}{'Email address'|translate}{literal}</strong>'; 
     113          userDetails += '<br><input name="email" type="text" value="'+user.email+'"></div>'; 
     114 
     115          userDetails += '<div class="userProperty"><strong>{/literal}{'Status'|translate}{literal}</strong>'; 
     116          userDetails += '<br><select name="status">'; 
     117          jQuery("#action select[name=status] option").each(function() { 
     118            var selected = ''; 
     119            if (user.status == jQuery(this).val()) { 
     120              selected = ' selected="selected"'; 
     121            } 
     122            userDetails += '<option value="'+jQuery(this).val()+'"'+selected+'>'+jQuery(this).html()+'</option>'; 
     123          }); 
     124          userDetails += '</select></div>'; 
     125 
     126/* 
     127          userDetails += '<div class="userProperty"><strong>{/literal}{'Groups'|translate}{literal}</strong>'; 
     128          userDetails += '<br><select multiple class="chzn-select" style="width:200px;">'; 
     129          jQuery("#action select[name=associate] option").each(function() { 
     130            var selected = ''; 
     131            if (user.groups.indexOf(jQuery(this).val()) != -1) { 
     132              selected = ' selected="selected"'; 
     133            } 
     134            userDetails += '<option value="'+jQuery(this).val()+'"'+selected+'>'+jQuery(this).html()+'</option>'; 
     135          }); 
     136          userDetails += '</select></div>'; 
     137          // userDetails += '<br>'+user.groups.join(",")+'</div>'; 
     138*/ 
     139 
     140          userDetails += '<div class="userProperty"><strong>{/literal}{'Privacy level'|translate}{literal}</strong>'; 
     141          userDetails += '<br><select name="level">'; 
     142          jQuery("#action select[name=level] option").each(function() { 
     143            var selected = ''; 
     144            if (user.level == jQuery(this).val()) { 
     145              selected = ' selected="selected"'; 
     146            } 
     147            userDetails += '<option value="'+jQuery(this).val()+'"'+selected+'>'+jQuery(this).html()+'</option>'; 
     148          }); 
     149          userDetails += '</select></div>'; 
     150 
     151          userDetails += '<div class="userProperty"><strong>{/literal}{'High definition enabled'|translate}{literal}</strong>'; 
     152          userDetails += '<br>'; 
     153          jQuery.each(truefalse, function(value, label) { 
     154            var checked = ''; 
     155            if (user.enabled_high == value) { 
     156              checked = ' checked="checked"'; 
     157            } 
     158            userDetails += '<label><input type="radio" name="enabled_high" value="'+value+'"'+checked+'>'+label+'</label>'; 
     159          }); 
     160          userDetails += '</div>'; 
     161 
     162          userDetails += '</fieldset><fieldset><legend>{/literal}{'Preferences'|translate}{literal}</legend>'; 
     163 
     164          userDetails += '<div class="userProperty"><strong>{/literal}{'Number of photos per page'|translate}{literal}</strong>'; 
     165          userDetails += '<br>'+user.nb_image_page+'</div>'; 
     166 
     167          userDetails += '<div class="userProperty"><strong>{/literal}{'Theme'|translate}{literal}</strong>'; 
     168          userDetails += '<br><select name="theme">'; 
     169          jQuery("#action select[name=theme] option").each(function() { 
     170            var selected = ''; 
     171            if (user.theme == jQuery(this).val()) { 
     172              selected = ' selected="selected"'; 
     173            } 
     174            userDetails += '<option value="'+jQuery(this).val()+'"'+selected+'>'+jQuery(this).html()+'</option>'; 
     175          }); 
     176          userDetails += '</select></div>'; 
     177 
     178          userDetails += '<div class="userProperty"><strong>{/literal}{'Language'|translate}{literal}</strong>'; 
     179          userDetails += '<br><select name="language">'; 
     180          jQuery("#action select[name=language] option").each(function() { 
     181            var selected = ''; 
     182            if (user.language == jQuery(this).val()) { 
     183              selected = ' selected="selected"'; 
     184            } 
     185            userDetails += '<option value="'+jQuery(this).val()+'"'+selected+'>'+jQuery(this).html()+'</option>'; 
     186          }); 
     187          userDetails += '</select></div>'; 
     188 
     189          userDetails += '<div class="userProperty"><strong>{/literal}{'Recent period'|translate}{literal}</strong>'; 
     190          userDetails += '<br>'+user.recent_period+'</div>'; 
     191 
     192          userDetails += '<div class="userProperty"><strong>{/literal}{'Expand all albums'|translate}{literal}</strong>'; 
     193          userDetails += '<br>'; 
     194          jQuery.each(truefalse, function(value, label) { 
     195            var checked = ''; 
     196            if (user.expand == value) { 
     197              checked = ' checked="checked"'; 
     198            } 
     199            userDetails += '<label><input type="radio" name="expand" value="'+value+'"'+checked+'>'+label+'</label>'; 
     200          }); 
     201          userDetails += '</div>'; 
     202 
     203          userDetails += '<div class="userProperty"><strong>{/literal}{'Show number of comments'|translate}{literal}</strong>'; 
     204          userDetails += '<br>'; 
     205          jQuery.each(truefalse, function(value, label) { 
     206            var checked = ''; 
     207            if (user.show_nb_comments == value) { 
     208              checked = ' checked="checked"'; 
     209            } 
     210            userDetails += '<label><input type="radio" name="show_nb_comments" value="'+value+'"'+checked+'>'+label+'</label>'; 
     211          }); 
     212          userDetails += '</div>'; 
     213 
     214          userDetails += '<div class="userProperty"><strong>{/literal}{'Show number of hits'|translate}{literal}</strong>'; 
     215          userDetails += '<br>'; 
     216          jQuery.each(truefalse, function(value, label) { 
     217            var checked = ''; 
     218            if (user.show_nb_hits == value) { 
     219              checked = ' checked="checked"'; 
     220            } 
     221            userDetails += '<label><input type="radio" name="show_nb_hits" value="'+value+'"'+checked+'>'+label+'</label>'; 
     222          }); 
     223          userDetails += '</div>'; 
     224          userDetails += '</fieldset>'; 
     225 
     226          userDetails += '<input type="submit" value="{/literal}{'Submit'|translate}{literal}" data-user_id="'+userId+'">'; 
     227          userDetails += '<img class="submitWait" src="themes/default/images/ajax-loader-small.gif" style="display:none">' 
     228 
     229          jQuery("#user"+userId).append(userDetails); 
     230        } 
     231        else { 
     232          console.log('error loading user details'); 
     233        } 
     234      }, 
     235      error:function(XMLHttpRequest, textStatus, errorThrows) { 
     236        console.log('technical error loading user details'); 
     237      } 
     238    }); 
     239   
     240    return '<div id="user'+userId+'" class="userProperties"><img class="loading" src="themes/default/images/ajax-loader-small.gif"></div>'; 
     241  } 
     242 
     243  jQuery(document).on('click', '.userProperties input[type=submit]',  function() { 
     244    var userId = jQuery(this).data('user_id'); 
     245 
     246    jQuery.ajax({ 
     247      url: "ws.php?format=json&method=pwg.users.setInfo", 
     248      type:"POST", 
     249      data: jQuery('#user'+userId).find('select, input').serialize(), 
     250      beforeSend: function() { 
     251        jQuery('#user'+userId+' .submitWait').show(); 
     252      }, 
     253      success:function(data) { 
     254        jQuery('#user'+userId+' .submitWait').hide(); 
     255      }, 
     256      error:function(XMLHttpRequest, textStatus, errorThrows) { 
     257        jQuery('#user'+userId+' .submitWait').hide(); 
     258      } 
     259    }); 
     260 
     261    return false; 
     262  }); 
     263 
     264  /* Add event listener for opening and closing details 
     265   * Note that the indicator for showing which row is open is not controlled by DataTables, 
     266   * rather it is done here 
     267   */ 
     268  jQuery(document).on('click', '#userList tbody td img',  function() { 
     269    var nTr = this.parentNode.parentNode; 
     270    if ( this.src.match('details_close') ) { 
     271      /* This row is already open - close it */ 
     272      this.src = "admin/themes/default/icon/details_open.png"; 
     273      oTable.fnClose( nTr ); 
     274    } 
     275    else { 
     276      /* Open this row */ 
     277      this.src = "admin/themes/default/icon/details_close.png"; 
     278      oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' ); 
     279    } 
     280  }); 
     281 
    82282 
    83283  /* first column must be prefixed with the open/close icon */ 
     
    88288    { 
    89289      "mRender": function(data, type, full) { 
    90         return '<label><input type="checkbox" data-user_id="'+full[0]+'"> '+data+'</label>'; 
     290        return '<img src="admin/themes/default/icon/details_open.png"> <label><input type="checkbox" data-user_id="'+full[0]+'"> '+data+'</label>'; 
    91291      } 
    92292    } 
     
    329529.dataTables_wrapper, .dataTables_info {clear:none;} 
    330530table.dataTable {clear:right;padding-top:10px;} 
     531.dataTable td img {margin-bottom: -6px;margin-left: -6px;} 
    331532.bulkAction {margin-top:10px;} 
    332533#addUserForm p {margin-left:0;} 
    333534#applyActionBlock .actionButtons {margin-left:0;} 
    334535span.infos, span.errors {background-image:none; padding:2px 5px; margin:0;border-radius:5px;} 
     536 
     537.userProperties {max-width:850px;} 
     538.userProperties fieldset {border-width:0; border-top-width:1px;} 
     539.userProperties fieldset legend {margin-left:-20px;padding-left:0;} 
     540.userProperty {width:220px;float:left;margin-bottom:15px;} 
    335541</style> 
    336542{/literal} 
Note: See TracChangeset for help on using the changeset viewer.