Skip to content

Commit

Permalink
New feature #8298: Easy move page in token + quick search
Browse files Browse the repository at this point in the history 
New feature :  Allow search on token attribute if exist in token table
Dev: remove some HTML error (multiple id for addbutton)
Dev: Add a load class in token table : with big table loading is not in screen
  • Loading branch information
@Shnoulle
Shnoulle committed Nov 7, 2013
1 parent 8c1de24 commit 834658e
Show file tree
Hide file tree
Showing 16 changed files with 12,669 additions and 73 deletions.
19 changes: 19 additions & 0 deletions application/config/third_party.php
View file
Expand Up @@ -25,6 +25,16 @@
'jquery'
)

),
'jqgrid.addons' => array(
'baseUrl' => 'third_party/jqgrid/plugins/',
'js' => array(
'grid.addons.js'
),
'depends' => array(
'jqgrid'
)

),
'jquery-notify' => array(
'baseUrl' => 'third_party/jquery-notify',
Expand All @@ -51,6 +61,15 @@
'jquery',
)
),
'jquery-bindWithDelay' => array(
'baseUrl' => 'third_party/jquery-bindWithDelay',
'js' => array(
'bindWithDelay.js'
),
'depends' => array(
'jquery'
)
),
'jquery-cookie' => array(
'baseUrl' => 'third_party/jquery-cookie',
'js' => array(
Expand Down
107 changes: 58 additions & 49 deletions application/views/admin/token/browse.php
View file
Expand Up @@ -16,6 +16,28 @@
}
}
$langnames = implode(";", $lname);
// Build the column information : columnname=>Description,search(true/false) (type ?)
// Don't add id : because we don't really need it. This different from columnNames (no action).
// TODO: Merge columnNames and aTokenColumns : need more option (name,index,search, type, editable ...)
$aTokenColumns=getTokenFieldsAndNames($surveyid,false);
$aNotQuickFilter=array('tid','emailstatus','sent','remindersent','remindercount','completed','usesleft','validfrom','validuntil');
foreach($aTokenColumns as $aTokenColumn => &$aTokenInformation)
{
if($aTokenColumn=="tid"){
$aTokenInformation['editable']=false;
$aTokenInformation['search']=false;
$aTokenInformation['add']=false;
}else{
$aTokenInformation['editable']=true;
$aTokenInformation['search']=true;
$aTokenInformation['add']=true;
}
if(in_array($aTokenColumn,$aNotQuickFilter)){
$aTokenInformation['quickfilter']=false;
}else{
$aTokenInformation['quickfilter']=true;
}
}
// Build the columnNames for the extra attributes
// and, build the columnModel
$attributes = getTokenFieldsAndNames($surveyid,true);
Expand All @@ -29,7 +51,7 @@
}
$columnNames='"'.implode('","',$aColumnHeaders).'"';
}

$sJsonColumnInformation=json_encode($aTokenColumns);
// Build the javasript variables to pass to the jqGrid
?>
<script type="text/javascript">
Expand Down Expand Up @@ -64,7 +86,7 @@
var postUrl = "<?php echo Yii::app()->getController()->createUrl("admin/participants/sa/setSession"); ?>";
var editUrl = "<?php echo Yii::app()->getController()->createUrl("admin/tokens/sa/editToken/surveyid/{$surveyid}"); ?>";
var sEmptyRecords ='<?php $clang->eT("Participant table is empty.",'js');?>';
var sCaption ='<?php $clang->eT("Survey participants",'js');?>';
var sCaption ='';
var sDelTitle = '<?php $clang->eT("Delete selected participant(s) from this survey",'js');?>';
var sRefreshTitle ='<?php $clang->eT("Reload participant list",'js');?>';
var noSearchResultsTxt = '<?php $clang->eT("No survey participants matching the search criteria",'js');?>';
Expand Down Expand Up @@ -107,49 +129,41 @@
{ "name":"validfrom", "index":"validfrom","align":"center", "sorttype":"int", "sortable": true,"width":160,"editable":true},
{ "name":"validuntil", "index":"validuntil","align":"center", "sorttype":"int", "sortable": true,"width":160,"editable":true}
<?php if (count($uidNames)) echo ','.implode(",\n", $uidNames); ?>];
<!--

function addHiddenElement(theform,thename,thevalue)
{
var myel = document.createElement('input');
myel.type = 'hidden';
myel.name = thename;
theform.appendChild(myel);
myel.value = thevalue;
return myel;
}

function sendPost(myaction,checkcode,arrayparam,arrayval)
{
var myform = document.createElement('form');
document.body.appendChild(myform);
myform.action =myaction;
myform.method = 'POST';
for (i=0;i<arrayparam.length;i++)
{
addHiddenElement(myform,arrayparam[i],arrayval[i])
}
myform.submit();
}

//-->
var colInformation=<?php echo $sJsonColumnInformation ?>
</script>
<div class='menubar'>
<div class='menubar-title ui-widget-header'>
<strong><?php $clang->eT("Survey participants",'js'); ?></strong></div>
<div class='menubar-main'>
<div class='menubar-left'>
<img src='<?php echo $sImageURL; ?>databegin.png' alt='<?php $clang->eT("Show start..."); ?>' class="gridcontrol disabled databegin" />
<img src='<?php echo $sImageURL; ?>databack.png' alt='<?php $clang->eT("Show previous.."); ?>' class="gridcontrol disabled databack" />
<img src='<?php echo $sImageURL; ?>blank.gif' width='13' height='20' alt='' />
<img src='<?php echo $sImageURL; ?>dataforward.png' alt='<?php $clang->eT("Show next.."); ?>' class="gridcontrol disabled dataforward" />
<img src='<?php echo $sImageURL; ?>dataend.png' alt='<?php $clang->eT("Show last.."); ?>' class="gridcontrol disabled dataend" />
<img src='<?php echo $sImageURL; ?>separator.gif' class='separator' alt='' />
<div id='tokensearch' class='form-menubar'><label for='searchstring'><?php $clang->eT("Filter by") ?></label><input type='text' name='searchstring' id='searchstring' class='gridsearch' value="" /></div>
</div>
</div>
</div>
<?php
// Add some script for gridsearch
App()->getClientScript()->registerPackage('jquery-bindWithDelay');
App()->getClientScript()->registerPackage('jqgrid.addons');
?>
<table id="displaytokens"></table>
<div id="pager"></div>

<div id ="search" style="display:none">
<?php
$optionsearch = array('' => $clang->gT('Select...'),
'firstname' => $clang->gT("First name"),
'lastname' => $clang->gT("Last name"),
'email' => $clang->gT("Email address"),
'emailstatus' => $clang->gT("Email status"),
'token' => $clang->gT("Token"),
'language' => $clang->gT("Language"),
'sent' => $clang->gT("Invitation sent?"),
'remindersent' => $clang->gT("Reminder sent?"),
'remindercount' => $clang->gT("Reminder count"),
'completed' => $clang->gT("Completed?"),
'usesleft' => $clang->gT("Uses left"),
'validfrom' => $clang->gT("Valid from"),
'validuntil' => $clang->gT("Valid until"));
$optionsearch = array('' => $clang->gT('Select...'));
foreach($aTokenColumns as $aTokenColumn => $aTokenInformation)
{
if($aTokenInformation['search'])
{
$optionsearch[$aTokenColumn]=$aTokenInformation['description'];
}
}
$optioncontition = array('' => $clang->gT('Select...'),
'equal' => $clang->gT("Equals"),
'contains' => $clang->gT("Contains"),
Expand All @@ -163,15 +177,10 @@ function sendPost(myaction,checkcode,arrayparam,arrayval)
<td><?php echo CHtml::dropDownList('field_1', 'id="field_1"', $optionsearch); ?></td>
<td><?php echo CHtml::dropDownList('condition_1', 'id="condition_1"', $optioncontition); ?></td>
<td><input type="text" id="conditiontext_1" style="margin-left:10px;" /></td>
<td><img src=<?php echo Yii::app()->getConfig('adminimageurl')."plus.png" ?> alt='<?php $clang->eT("Add another search criteria");?>' id="addbutton" style="margin-bottom:4px"></td>
<td><img src=<?php echo Yii::app()->getConfig('adminimageurl')."plus.png" ?> alt='<?php $clang->eT("Add another search criteria");?>' class="addcondition-button" style="margin-bottom:4px"></td>
</tr>
</table>
<br/>


</div>
<br/>
<table id="displaytokens"></table> <div id="pager"></div>

<?php if (Permission::model()->hasGlobalPermission('participantpanel','read')) { ?>
<div id="addcpdb" title="addsurvey" style="display:none">
Expand Down Expand Up @@ -213,4 +222,4 @@ function sendPost(myaction,checkcode,arrayparam,arrayval)
</div>
<div class="ui-widget ui-helper-hidden" id="client-script-return-msg" style="display:none"></div>
<div>
<div id ='dialog-modal'></div>
<div id ='dialog-modal'></div>
103 changes: 79 additions & 24 deletions scripts/admin/tokens.js
View file
Expand Up @@ -12,13 +12,17 @@ function addcondition()
id=2;
html = "<tr name='joincondition_"+idexternal+"' id='joincondition_"+idexternal+"'><td><select name='join_"+idexternal+"' id='join_"+idexternal+"'>\n\
<option value='and'>AND</option><option value='or'>OR</option></td></tr>";
html2 = "<tr><td><select name='field_"+idexternal+"' \n\
id='field_"+idexternal+"'><option value='firstname'>"+colNames[2]+"</option><option value='lastname'>"+colNames[3]+"</option><option value='email'>"+colNames[4]+"</option><option value='emailstatus'>"+colNames[5]+"</option><option value='token'>"+colNames[6]+"</option><option value='sent'>"+colNames[7]+"</option><option value='remindersent'>"+colNames[8]+"</option><option value='remindercount'>"+colNames[9]+"</option><option value='completed'>"+colNames[10]+"</option><option value='usesleft'>"+colNames[11]+"</option><option value='Valid from'>"+colNames[12]+"</option><option value='validuntil'>"+colNames[13]+"</option></select></td><td>\n\
html2 = "<tr><td><select name='field_"+idexternal+"' \n\ id='field_"+idexternal+"'>";
for(col in colInformation){
if(colInformation[col]['search'])
html2 += "<option value='"+col+"'>"+colInformation[col]['description']+"</option>";
}
html2 += "</select></td><td>\n\
<select name='condition_"+idexternal+"' id='condition_"+idexternal+"'><option value='equal'>"+searchtypes[0]+"</option><option value='contains'>"+searchtypes[1]+"</option>\n\
<option value='notequal'>"+searchtypes[2]+"</option><option value='notcontains'>"+searchtypes[3]+"</option><option value='greaterthan'>"+searchtypes[4]+"</option>\n\
<option value='lessthan'>"+searchtypes[5]+"</option></select></td>\n\<td><input type='text' id='conditiontext_"+idexternal+"' style='margin-left:10px;' /></td>\n\
<td><img src="+minusbutton+" onClick= $(this).parent().parent().remove();$('#joincondition_"+idexternal+"').remove() id='removebutton'"+idexternal+">\n\
<img src="+addbutton+" id='addbutton' onclick='addcondition();' style='margin-bottom:4px'></td></tr>";
<img src="+addbutton+" class='addcondition-button' style='margin-bottom:4px'></td></tr>";
//$('#searchtable > tbody > tr').eq(id).after(html);
$('#searchtable > tbody > tr').eq(idexternal).after(html);
idexternal++;
Expand Down Expand Up @@ -70,8 +74,6 @@ $(document).ready(function() {
$("#lifilterduplicatefields").slideUp();
}
})


// Code for AJAX download
jQuery.download = function(url, data, method){
//url and data options required
Expand All @@ -91,23 +93,14 @@ $(document).ready(function() {
};
// Code for AJAX download
var id=1;
$("#addbutton").click(function(){
$(document).on("click",".addcondition-button",function(){
id=2;
html = "<tr name='joincondition_"+id+"' id='joincondition_"+id+"'><td><select name='join_"+id+"' id='join_"+id+"'><option value='and'>AND</option><option value='or'>OR</option></td><td></td></tr><tr><td><select name='field_"+id+"' id='field_"+id+"'>\n\
<option value='firstname'>"+colNames[2]+"</option>\n\
<option value='lastname'>"+colNames[3]+"</option>\n\
<option value='email'>"+colNames[4]+"</option>\n\
<option value='emailstatus'>"+colNames[5]+"</option>\n\
<option value='token'>"+colNames[6]+"</option>\n\
<option value='language'>"+colNames[7]+"</option>\n\
<option value='sent'>"+colNames[8]+"</option>\n\
<option value='remindersent'>"+colNames[9]+"</option>\n\
<option value='remindercount'>"+colNames[10]+"</option>\n\
<option value='completed'>"+colNames[11]+"</option>\n\
<option value='usesleft'>"+colNames[12]+"</option>\n\
<option value='validfrom'>"+colNames[13]+"</option>\n\
<option value='validuntil'>"+colNames[14]+"</option>\n\
</select>\n\</td>\n\<td>\n\
html = "<tr name='joincondition_"+id+"' id='joincondition_"+id+"'><td><select name='join_"+id+"' id='join_"+id+"'><option value='and'>AND</option><option value='or'>OR</option></td><td></td></tr><tr><td><select name='field_"+id+"' id='field_"+id+"'>\n";
for(col in colInformation){
if(colInformation[col]['search'])
html += "<option value='"+col+"'>"+colInformation[col]['description']+"</option>";
}
html += "</select>\n\</td>\n\<td>\n\
<select name='condition_"+id+"' id='condition_"+id+"'>\n\
<option value='equal'>"+searchtypes[0]+"</option>\n\
<option value='contains'>"+searchtypes[1]+"</option>\n\
Expand All @@ -117,7 +110,7 @@ $(document).ready(function() {
<option value='lessthan'>"+searchtypes[5]+"</option>\n\
</select></td>\n\<td><input type='text' id='conditiontext_"+id+"' style='margin-left:10px;' /></td>\n\
<td><img src="+minusbutton+" onClick= $(this).parent().parent().remove();$('#joincondition_"+id+"').remove() id='removebutton'"+id+">\n\
<img src="+addbutton+" id='addbutton' onclick='addcondition();' style='margin-bottom:4px'></td></tr><tr></tr>";
<img src="+addbutton+" class='addcondition-button' style='margin-bottom:4px'></td></tr><tr></tr>";
$('#searchtable tr:last').after(html);
});
var searchconditions = {};
Expand All @@ -126,7 +119,7 @@ $(document).ready(function() {

});
var lastSel,lastSel2;
jQuery("#displaytokens").jqGrid({
oGrid=jQuery("#displaytokens").jqGrid({
loadtext : sLoadText,
recordtext: sRecordText,
emptyrecords: sEmptyRecords,
Expand All @@ -149,9 +142,13 @@ $(document).ready(function() {
viewrecords : true,
rowList: [25,50,100,250,500,1000,2500,5000],
multiselect: true,
beforeRequest : function(){
$(this).addClass('load');
},
loadonce : false,
loadComplete: function()
{
$(this).removeClass('load');
/* Sneaky way of adding custom icons to jqGrid pager buttons */
$("#pager").find(".ui-add-to-cpdb-link").css({"background-image":"url("+imageurl+"addtocpdb_12.png)", "background-position":"0", "color":"black"});
$("#pager").find(".ui-participant-link").css({"background-image":"url("+imageurl+"cpdb_12.png)", "background-position":"0", "color":"black"});
Expand Down Expand Up @@ -196,6 +193,7 @@ $(document).ready(function() {
func();
});
});
updatePageAfterGrid();
},
ondblClickRow: function(id)
{
Expand Down Expand Up @@ -385,11 +383,68 @@ $(document).ready(function() {
onClickButton:addSelectedParticipantsToCPDB
});
}
$(".gridsearch").bindWithDelay("keyup", function(e) {
var sSearchString=$.trim($(this).val());
if(sSearchString != ""){
var aSearchConditions=new Array;
for(col in colInformation){
if(colInformation[col]['quickfilter'])
aSearchConditions.push(col+"||contains||"+sSearchString);
}
var sSearchConditions=aSearchConditions.join("||or||");
oGrid.jqGrid('setGridParam', {url: jsonSearchUrl+"/"+sSearchConditions}).trigger('reloadGrid', [{current: true, page: 1}]);
}else{
oGrid.jqGrid('setGridParam', {url: jsonUrl}).trigger('reloadGrid', [{current: true, page: 1}]);
}
}, 500);

$.extend(jQuery.jgrid.edit,{
closeAfterAdd: true,
reloadAfterSubmit: true,
closeOnEspace:true
});
});
//ui-icon-newwin

function updatePageAfterGrid(){
var oGrid=$("#displaytokens");
var iLastPage=parseInt(oGrid.jqGrid('getGridParam', 'lastpage'));
var iPage=parseInt(oGrid.jqGrid('getGridParam', 'page'));
if(iPage>1)
{
iPrevPage=iPage-1;
$(".databegin").click(function(){
oGrid.setGridParam({page:1}).trigger("reloadGrid");
});
$(".gridcontrol.databegin").removeClass("disabled");
$(".databack").click(function(){
oGrid.setGridParam({page:iPrevPage}).trigger("reloadGrid");
});
$(".gridcontrol.databack").removeClass("disabled");
}
else
{
$(".databegin").click(function(){});
$(".gridcontrol.databegin").addClass("disabled");
$(".databack").click(function(){});
$(".gridcontrol.databack").addClass("disabled");
}
if(iPage<iLastPage)
{
iNextPage=iPage+1;
$(".dataend").click(function(){
oGrid.setGridParam({page:iLastPage}).trigger("reloadGrid");
});
$(".gridcontrol.dataend").removeClass("disabled");
$(".dataforward").click(function(){
oGrid.setGridParam({page:iNextPage}).trigger("reloadGrid");
});
$(".gridcontrol.dataforward").removeClass("disabled");
}
else
{
$(".dataend").click(function(){});
$(".gridcontrol.dataend").addClass("disabled");
$(".dataforward").click(function(){});
$(".gridcontrol.dataforward").addClass("disabled");
}
}
3 changes: 3 additions & 0 deletions styles/adminstyle.css
View file
Expand Up @@ -116,9 +116,12 @@ select, textarea, input[type="text"], input[type="password"], input[type="dateti
textarea{
height: auto;
}
.ui-jqgrid{clear:both}
.ui-jqgrid-btable.load{opacity:0.5}
.ui-jqgrid select,.ui-jqgrid textarea,.ui-jqgrid input[type="text"]{
padding: 2px;
}
.gridcontrol.disabled{visibility:hidden}
label, legend {
width:auto;
min-height: 26px;
Expand Down
16 changes: 16 additions & 0 deletions third_party/jquery-bindWithDelay/README
View file
@@ -0,0 +1,16 @@

bindWithDelay jQuery plugin
Author: Brian Grinstead
MIT license: http://www.opensource.org/licenses/mit-license.php

http://github.com/bgrins/bindWithDelay
http://briangrinstead.com/files/bindWithDelay

Usage:
See http://api.jquery.com/bind/
.bindWithDelay( eventType, [ eventData ], handler(eventObject), timeout, throttle )

Examples:
$("#foo").bindWithDelay("click", function(e) { }, 100);
$(window).bindWithDelay("resize", { optional: "eventData" }, callback, 1000);
$(window).bindWithDelay("resize", callback, 1000, true);

0 comments on commit 834658e

Please sign in to comment.