From 88001efb9042bbe8b1b0c7e9c46ad0f7a0919af5 Mon Sep 17 00:00:00 2001
From: plegall <plg@piwigo.org>
Date: Fri, 8 Nov 2013 21:50:52 +0000
Subject: [PATCH] feature 1668: first draft, add a complete form to edit user
 properties inside the DataTable.

git-svn-id: http://piwigo.org/svn/trunk@25405 68402e56-0260-453c-a942-63ccdbb3a9ee
---
 admin/themes/default/icon/details_close.png | Bin 0 -> 841 bytes
 admin/themes/default/icon/details_open.png  | Bin 0 -> 881 bytes
 admin/themes/default/template/user_list.tpl | 208 +++++++++++++++++++-
 3 files changed, 207 insertions(+), 1 deletion(-)
 create mode 100644 admin/themes/default/icon/details_close.png
 create mode 100644 admin/themes/default/icon/details_open.png

diff --git a/admin/themes/default/icon/details_close.png b/admin/themes/default/icon/details_close.png
new file mode 100644
index 0000000000000000000000000000000000000000..fcc23c63e22f9883bef72c9e3adae3d5ddfb35cc
GIT binary patch
literal 841
zcmV-P1GfB$P)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00004XF*Lt007q5
z)K6G40000PbVXQnQ*UN;cVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!+et)0RCwB~
zRZUD&K@grT6<e^<2BXxNUgYOsC0<Bt4}us23L()G;V2>DA_on|3pY;aiIaw_AzX~%
z0wEzG!5U~A62!y<6#_3!Y0@BA($@0c+jVBUFF+~kfo;CbzTKH`cV=g%b|^n=hzi67
zM5UV3FcF6cUCnu^p}pjrsWm6Ug}98UR-~ZFvWN`g0Fg%+2vP1<MCL$TMcf(~7<d*A
zhi8+?q{cZn2{flQ+9MsM>rl3*$mmwr5rOIH=?}WDABr;u?U4@YDw`9eOu1C&^?L7Z
zY;1fZBc9KT-2A-Q9Uc}tJv}1T-7R)sycF4)8NstzNldzAgSOWc2V?31C|17Z<>j$J
zAke}0_aQSe0l9^R;<1c^#DEC_0!<vD5Y!9~LPc#YEG;d~hC-p&sI^UTwO-OQG&J;}
zzrX)Em?qnMGX}ZE&w!UeCJtN*B%>d$>Do3Jo15TlYl9m;-_3M7y&8+fG<qbPBCP4{
z?R~-+v*p8K$cDcFH%$rC<VDG8ZmM+-xs??>bP>p=udnZ^^3rY*Ry8&@-XZS}=H{ef
zDUJ>}0_oCdYHA|eDvG0BC2ghK?XIQGd^|3d(Ko2a8<ZPAT3e+oY;8&Da=F}A0hA`T
zOnuWd;BUh;4Eaz@*NbU_ZXd4{Sx%WuX3yjCT&eJS;dde-pZ0t3u1YLb2*-r10&kuC
zM%$mNicFiT%iQ|<`l`Hsd%KE}aRfufjdK;xqP%p!T@uFQ@ipQgE{pKj<mBW>%4c^+
z2RQuxqA|Bf6p=-Yhg8<rgXi%hN+UisHT6l=w|*kAqtWQwmX?->1x*8ObQBJv5%iB0
zU9{XrXRDi=!8bAj&V~kvL?Uy+VDJ@gXo|Fa=^duiBKhvUSnKK%G5>85_4~!w&Q6gS
z9~Xt4ozl{)vr6y0nuGJKj&rJgrBbPcMMU#|wJ-Lc4fdkiFZ`>)vh)56_#?mow%h=n
ThIkt{00000NkvXXu0mjfW_^Rc

literal 0
HcmV?d00001

diff --git a/admin/themes/default/icon/details_open.png b/admin/themes/default/icon/details_open.png
new file mode 100644
index 0000000000000000000000000000000000000000..6f034d0f2d5c7902dce190355b12defdc07d6c9a
GIT binary patch
literal 881
zcmV-%1CIQOP)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00004XF*Lt007q5
z)K6G40000PbVXQnQ*UN;cVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU#14%?dRCwB~
zRozRIQ5b*Tx%`URmR7!^qREsHr4L~=rAQr;^QNxE%fy>P5xVIgh(4gM3Zjdy!n~2N
zjD^FnHQ1(tR(9cJl^-l~RyvtO-;dMt9M4;+6T9$?ALpFs<F|93kMl~9dYBMthy#dp
zv8JIRHV}$f>)Rcr6nirw3t>UzAPx#r5M&8N9I=W>B2)xRbt)puL>xs_c64-H@%#Or
zXf!&j>$*muHOWXvHo`VD#lg6MPE~+#^!N8aRTO1|?J`J5He@S&wvbBVO8K%ZpNm8y
zAIT}HC7Cxi$gY3tW-XzMtU1`kx+go?tM3CWp(Z#n*^&?X9upjrBoaWeDh>vNcO4E#
z)3UM*kH0>GH%mi2IAp}6%}CKyd$<m+mR^J0^gIXz0v@N+c>~2W6jvjYwyv(OhW7UM
zP7O5aPWUzq$A-}#e>#Hw16_xi<P1dCB5>hIJroxfm&IbSiP6!~SxS;g5FTo6ZM`H(
zlIh)&4}38nXc|&$DyX^!-nt?1)(-JKW(QQ%jr|ydxA>>z)7I8@S=`cW5N4N`m!G77
zdZMpERgp|rK~d3JRsUp;<Xne@3X*%idAPiyqJn(0DUN1QwCPr>HJ6lA@hNmr@UjvF
zT!Ag6;H&rZ+37vY=g+HO_-wIQtVRQvx7QEFj83+*vi=TLQ+cY^m5t3Z!D|~jv(ZlR
zc>I^mX3LW^WSCo>=P5lkaGKBKE#utS*o(YFK~4deqwi1AMVd+U<ytr#o*<<w-^Js$
z884M5z!-{%A)S!cjdCNGPft&OAPzDy2v>S~dit;|^yb25sIpdZA`Wys(O1dAvo2(I
ziyc~u+*C?>Z*T8&(cem%afeVS6nDGb_L8EKvNL%#5MBx6)#tX<qR#jZs%_P9tL7%i
z*)oibj0|FLKS7R|cq~%4-ePi*J(zsR8eY2C@n?2cia7tGp51$YpG6bV?X8z@wBCL_
z4q3asI6I!Ng@uKAgNW99JzxL(z-9>j`d$yLwBMhA-vSH(T>k(8(cOU?00000NkvXX
Hu0mjf8E%<j

literal 0
HcmV?d00001

diff --git a/admin/themes/default/template/user_list.tpl b/admin/themes/default/template/user_list.tpl
index 380ca6f20..6efd63daf 100644
--- a/admin/themes/default/template/user_list.tpl
+++ b/admin/themes/default/template/user_list.tpl
@@ -15,6 +15,11 @@ var missingUsername = "{'Please, enter a login'|translate}";
 var allUsers = [{$all_users}];
 var selection = [{$selection}];
 var pwg_token = "{$PWG_TOKEN}";
+
+var truefalse = {
+  true:"{'Yes'|translate}",
+  false:"{'No'|translate}",
+};
 {/footer_script}
 
 {footer_script}{literal}
@@ -79,6 +84,201 @@ jQuery(document).ready(function() {
   /**
    * Table with users
    */
+  /* Formating function for row details */
+  function fnFormatDetails(oTable, nTr) {
+    var userId = oTable.fnGetData(nTr)[0];
+    console.log("userId = "+userId);
+    var sOut = null;
+
+    jQuery.ajax({
+      url: "ws.php?format=json&method=pwg.users.getList",
+      type:"POST",
+      data: {
+        user_id: userId,
+        display: "all",
+      },
+      success:function(data) {
+        jQuery("#user"+userId+" .loading").hide();
+
+        var data = jQuery.parseJSON(data);
+        if (data.stat == 'ok') {
+          var user = data.result.users[0];
+
+          var userDetails = '<input type="hidden" name="user_id" value="'+user.id+'">';
+          userDetails += '<fieldset><legend>{/literal}{'Properties'|translate}{literal}</legend>';
+          userDetails += '<div class="userProperty"><strong>{/literal}{'Username'|translate}{literal}</strong>';
+          userDetails += '<br>'+user.username+'</div>';
+
+          userDetails += '<div class="userProperty"><strong>{/literal}{'Email address'|translate}{literal}</strong>';
+          userDetails += '<br><input name="email" type="text" value="'+user.email+'"></div>';
+
+          userDetails += '<div class="userProperty"><strong>{/literal}{'Status'|translate}{literal}</strong>';
+          userDetails += '<br><select name="status">';
+          jQuery("#action select[name=status] option").each(function() {
+            var selected = '';
+            if (user.status == jQuery(this).val()) {
+              selected = ' selected="selected"';
+            }
+            userDetails += '<option value="'+jQuery(this).val()+'"'+selected+'>'+jQuery(this).html()+'</option>';
+          });
+          userDetails += '</select></div>';
+
+/*
+          userDetails += '<div class="userProperty"><strong>{/literal}{'Groups'|translate}{literal}</strong>';
+          userDetails += '<br><select multiple class="chzn-select" style="width:200px;">';
+          jQuery("#action select[name=associate] option").each(function() {
+            var selected = '';
+            if (user.groups.indexOf(jQuery(this).val()) != -1) {
+              selected = ' selected="selected"';
+            }
+            userDetails += '<option value="'+jQuery(this).val()+'"'+selected+'>'+jQuery(this).html()+'</option>';
+          });
+          userDetails += '</select></div>';
+          // userDetails += '<br>'+user.groups.join(",")+'</div>';
+*/
+
+          userDetails += '<div class="userProperty"><strong>{/literal}{'Privacy level'|translate}{literal}</strong>';
+          userDetails += '<br><select name="level">';
+          jQuery("#action select[name=level] option").each(function() {
+            var selected = '';
+            if (user.level == jQuery(this).val()) {
+              selected = ' selected="selected"';
+            }
+            userDetails += '<option value="'+jQuery(this).val()+'"'+selected+'>'+jQuery(this).html()+'</option>';
+          });
+          userDetails += '</select></div>';
+
+          userDetails += '<div class="userProperty"><strong>{/literal}{'High definition enabled'|translate}{literal}</strong>';
+          userDetails += '<br>';
+          jQuery.each(truefalse, function(value, label) {
+            var checked = '';
+            if (user.enabled_high == value) {
+              checked = ' checked="checked"';
+            }
+            userDetails += '<label><input type="radio" name="enabled_high" value="'+value+'"'+checked+'>'+label+'</label>';
+          });
+          userDetails += '</div>';
+
+          userDetails += '</fieldset><fieldset><legend>{/literal}{'Preferences'|translate}{literal}</legend>';
+
+          userDetails += '<div class="userProperty"><strong>{/literal}{'Number of photos per page'|translate}{literal}</strong>';
+          userDetails += '<br>'+user.nb_image_page+'</div>';
+
+          userDetails += '<div class="userProperty"><strong>{/literal}{'Theme'|translate}{literal}</strong>';
+          userDetails += '<br><select name="theme">';
+          jQuery("#action select[name=theme] option").each(function() {
+            var selected = '';
+            if (user.theme == jQuery(this).val()) {
+              selected = ' selected="selected"';
+            }
+            userDetails += '<option value="'+jQuery(this).val()+'"'+selected+'>'+jQuery(this).html()+'</option>';
+          });
+          userDetails += '</select></div>';
+
+          userDetails += '<div class="userProperty"><strong>{/literal}{'Language'|translate}{literal}</strong>';
+          userDetails += '<br><select name="language">';
+          jQuery("#action select[name=language] option").each(function() {
+            var selected = '';
+            if (user.language == jQuery(this).val()) {
+              selected = ' selected="selected"';
+            }
+            userDetails += '<option value="'+jQuery(this).val()+'"'+selected+'>'+jQuery(this).html()+'</option>';
+          });
+          userDetails += '</select></div>';
+
+          userDetails += '<div class="userProperty"><strong>{/literal}{'Recent period'|translate}{literal}</strong>';
+          userDetails += '<br>'+user.recent_period+'</div>';
+
+          userDetails += '<div class="userProperty"><strong>{/literal}{'Expand all albums'|translate}{literal}</strong>';
+          userDetails += '<br>';
+          jQuery.each(truefalse, function(value, label) {
+            var checked = '';
+            if (user.expand == value) {
+              checked = ' checked="checked"';
+            }
+            userDetails += '<label><input type="radio" name="expand" value="'+value+'"'+checked+'>'+label+'</label>';
+          });
+          userDetails += '</div>';
+
+          userDetails += '<div class="userProperty"><strong>{/literal}{'Show number of comments'|translate}{literal}</strong>';
+          userDetails += '<br>';
+          jQuery.each(truefalse, function(value, label) {
+            var checked = '';
+            if (user.show_nb_comments == value) {
+              checked = ' checked="checked"';
+            }
+            userDetails += '<label><input type="radio" name="show_nb_comments" value="'+value+'"'+checked+'>'+label+'</label>';
+          });
+          userDetails += '</div>';
+
+          userDetails += '<div class="userProperty"><strong>{/literal}{'Show number of hits'|translate}{literal}</strong>';
+          userDetails += '<br>';
+          jQuery.each(truefalse, function(value, label) {
+            var checked = '';
+            if (user.show_nb_hits == value) {
+              checked = ' checked="checked"';
+            }
+            userDetails += '<label><input type="radio" name="show_nb_hits" value="'+value+'"'+checked+'>'+label+'</label>';
+          });
+          userDetails += '</div>';
+          userDetails += '</fieldset>';
+
+          userDetails += '<input type="submit" value="{/literal}{'Submit'|translate}{literal}" data-user_id="'+userId+'">';
+          userDetails += '<img class="submitWait" src="themes/default/images/ajax-loader-small.gif" style="display:none">'
+
+          jQuery("#user"+userId).append(userDetails);
+        }
+        else {
+          console.log('error loading user details');
+        }
+      },
+      error:function(XMLHttpRequest, textStatus, errorThrows) {
+        console.log('technical error loading user details');
+      }
+    });
+  
+    return '<div id="user'+userId+'" class="userProperties"><img class="loading" src="themes/default/images/ajax-loader-small.gif"></div>';
+  }
+
+  jQuery(document).on('click', '.userProperties input[type=submit]',  function() {
+    var userId = jQuery(this).data('user_id');
+
+    jQuery.ajax({
+      url: "ws.php?format=json&method=pwg.users.setInfo",
+      type:"POST",
+      data: jQuery('#user'+userId).find('select, input').serialize(),
+      beforeSend: function() {
+        jQuery('#user'+userId+' .submitWait').show();
+      },
+      success:function(data) {
+        jQuery('#user'+userId+' .submitWait').hide();
+      },
+      error:function(XMLHttpRequest, textStatus, errorThrows) {
+        jQuery('#user'+userId+' .submitWait').hide();
+      }
+    });
+
+    return false;
+  });
+
+  /* Add event listener for opening and closing details
+   * Note that the indicator for showing which row is open is not controlled by DataTables,
+   * rather it is done here
+   */
+  jQuery(document).on('click', '#userList tbody td img',  function() {
+    var nTr = this.parentNode.parentNode;
+    if ( this.src.match('details_close') ) {
+      /* This row is already open - close it */
+      this.src = "admin/themes/default/icon/details_open.png";
+      oTable.fnClose( nTr );
+    }
+    else {
+      /* Open this row */
+      this.src = "admin/themes/default/icon/details_close.png";
+      oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
+    }
+  });
+
 
   /* first column must be prefixed with the open/close icon */
   var aoColumns = [
@@ -87,7 +287,7 @@ jQuery(document).ready(function() {
     },
     {
       "mRender": function(data, type, full) {
-        return '<label><input type="checkbox" data-user_id="'+full[0]+'"> '+data+'</label>';
+        return '<img src="admin/themes/default/icon/details_open.png"> <label><input type="checkbox" data-user_id="'+full[0]+'"> '+data+'</label>';
       }
     }
   ];
@@ -328,10 +528,16 @@ jQuery(document).ready(function() {
 <style>
 .dataTables_wrapper, .dataTables_info {clear:none;}
 table.dataTable {clear:right;padding-top:10px;}
+.dataTable td img {margin-bottom: -6px;margin-left: -6px;}
 .bulkAction {margin-top:10px;}
 #addUserForm p {margin-left:0;}
 #applyActionBlock .actionButtons {margin-left:0;}
 span.infos, span.errors {background-image:none; padding:2px 5px; margin:0;border-radius:5px;}
+
+.userProperties {max-width:850px;}
+.userProperties fieldset {border-width:0; border-top-width:1px;}
+.userProperties fieldset legend {margin-left:-20px;padding-left:0;}
+.userProperty {width:220px;float:left;margin-bottom:15px;}
 </style>
 {/literal}