Skip to content

Commit

Permalink
Fixed issue #08496: Undefined attributes in Central Participant Database
Browse files Browse the repository at this point in the history 
Dev Changed interface from jQuery UI sortable to jQuery UI Draggable
Dev Fixed up invalid HTML
Dev Cleaned up styles and removed inline stuff
  • Loading branch information
@tpartner
tpartner committed Jan 18, 2014
1 parent 5099401 commit 9eeb7f1
Show file tree
Hide file tree
Showing 5 changed files with 466 additions and 292 deletions.
56 changes: 28 additions & 28 deletions application/views/admin/participants/attributeMapToken_view.php
View file
Expand Up @@ -6,82 +6,84 @@

/* LANGUAGE */
var attributesMappedText = "<?php $clang->eT("There are no unmapped attributes") ?>";
var mustPairAttributeText= "<?php $clang->eT("You have to pair it with one attribute of the token table") ?>";
var onlyOneAttributeMappedText="<?php $clang->eT("Only one central attribute is mapped with token attribute") ?>";
var cannotAcceptTokenAttributesText="<?php $clang->eT("This list cannot accept token attributes.") ?>";
var addElementBelowText="<?php $clang->eT("You have to add the element below the list") ?>";

</script>
</head>
<body>
<div class='header ui-widget-header'>
<strong>
<?php $clang->eT("Map your token attributes to an existing participant attribute or create a new one"); ?>
</strong>
</div>

<div id="tokenattribute">
<div class="heading"><?php $clang->eT("Unmapped token attributes") ?></div>
<ul id="tokenatt">
<div class="draggable-container">
<div id="tokenattribute" class="attribute-column">
<div class="heading"><?php $clang->eT("Unmapped token attributes") ?></div>
<div id="tokenatt" class="tokenatt droppable">
<?php
if (!empty($tokenattribute))
{
foreach ($tokenattribute as $key => $value)
{
echo "<li title='".$clang->gT("Drag this attribute to another column to map it to the central participants database")."' id='t_" . $value . "' name=\"$key\">" . $key . "</li>"; //Passing attribute description as name of the attribute
echo "<div title='".$clang->gT("Drag this attribute to another column to map it to the central participants database")."' id='t_" . $value . "' data-name=\"$key\" class=\"token-attribute attribute-item draggable\">" . $key . "</div>";
}
}
?>
</ul>
</div>

</div>
<div id="newcreated"><div class="heading"><?php $clang->eT("Participant attributes to create") ?></div>
<ul class="newcreate" id="sortable" style ="height: 40px">
</ul>
<div id="newcreated" class="attribute-column">
<div class="heading"><?php $clang->eT("Participant attributes to create") ?></div>
<div class="newcreate droppable" style ="height: 40px">
</div>
</div>
<div id="centralattribute"><div class="heading"><?php $clang->eT("Existing participant attributes")?></div><br />
<ul class="centralatt">
<div id="centralattribute" class="attribute-column">
<div class="heading"><?php $clang->eT("Existing participant attributes")?></div>
<div class="centralatt">
<?php
if (!empty($attribute))
{
foreach ($attribute as $key => $value)
{
echo "<li id='c_" . $key . "' name='c_" . $key . "' >" . $value . "</li>";
echo "<div class=\"mappable-attribute-wrapper droppable\"><div id='c_" . $key . "' data-name='c_" . $key . "' class=\"mappable-attribute attribute-item\" >" . $value . "</div></div>";
}
}
?>
</ul>
</div>

<?php if (!empty($attribute)) { ?>
<div class='explanation'>
<input type='checkbox' id='overwriteman' name='overwriteman' /> <label for='overwriteman'><?php $clang->eT("Overwrite existing attribute values if a participant already exists?") ?></label>
<br /><input type='checkbox' id='createautomap' name='createautomap' /> <label for='createautomap'><?php $clang->eT("Make these mappings automatic in future") ?></label><br />&nbsp;
<label for='overwriteman'><?php $clang->eT("Overwrite existing attribute values if a participant already exists?") ?></label><br /><input type='checkbox' id='overwriteman' name='overwriteman' />
<br />
<label for='createautomap'><?php $clang->eT("Make these mappings automatic in future") ?></label><br /><input type='checkbox' id='createautomap' name='createautomap' />
</div>
<?php } else { ?>
<br />&nbsp;

<?php }
if(!empty($alreadymappedattributename)) {
?>
<div class='heading'><?php $clang->eT("Pre-mapped attributes") ?></div><br />
<ul class="notsortable">
<div class="notsortable">
<?php
foreach ($alreadymappedattributename as $key => $value)
{
echo "<li title='".$clang->gT("This attribute is automatically mapped")."' id='' name='$value' >" . $alreadymappedattdescription[$value] . "</li>";
echo "<div title='".$clang->gT("This attribute is automatically mapped")."' data-name='$value' class=\"already-mapped-attribute attribute-item\" >" . $alreadymappedattdescription[$value] . "</div>";
}
?>
</ul>
</div>
<div class='explanation'>
<input type='checkbox' id='overwrite' name='overwrite' /> <label for='overwrite'><?php $clang->eT("Overwrite existing attribute values if a participant already exists?") ?></label>
<label for='overwrite'><?php $clang->eT("Overwrite existing attribute values if a participant already exists?") ?></label><input type='checkbox' id='overwrite' name='overwrite' />
</div>
<?php
}
?>
</div>
<div style="clear: both;"></div>
</div>
<p>
<input type="button" name="goback" onclick="history.back();" id="back" value="<?php $clang->eT('Back')?>" />
<input type="button" name="goback" id="back" value="<?php $clang->eT('Back')?>" />
<input type='button' name='reset' onClick='window.location.reload();' id='reset' value="<?php $clang->eT('Reset') ?>" />
<input type="button" name="attmap" id="attmap" value="Continue" />
</p>

<?php
$ajaxloader = array(
'src' => Yii::app()->getConfig('adminimageurl') . '/ajax-loader.gif',
Expand All @@ -92,5 +94,3 @@
<div id="processing" title="<?php $clang->eT("Processing...") ?>" style="display:none">
<?php echo CHtml::image($ajaxloader['src'], $ajaxloader['alt']); ?>
</div>
</body>
</html>
182 changes: 102 additions & 80 deletions scripts/admin/attributeMapToken.js
View file
Expand Up @@ -5,82 +5,95 @@ $(document).ready(function(){
var height = $(document).height();
var width = $(document).width();
var tokencurrentarray = {};
var newcurrentarray = {};
if($("#overwrite").is(':checked')) {var attoverwrite=true;} else {var attoverwrite=false;}
if($("#overwriteman").is(':checked')) {var attoverwriteman=true;} else {var attoverwriteman=false;}
if($("#createautomap").is(':checked')) {var attcreateautomap=true;} else {var attcreateautomap=false;}

$('#tokenattribute').css({ 'height' : height-200});
$('#centralattribute').css({ 'height' : height-200});
$('#newcreated').css({ 'height' : height-200});
var ncHeadingHeight = $('#newcreated .heading').outerHeight();
$('.newcreate').css({
'padding-bottom':0,
'min-height':$('#newcreated').height()-ncHeadingHeight-5
});
var taHeadingHeight = $('#tokenattribute .heading').outerHeight();
$('#tokenatt').css({
'min-height':$('#tokenattribute').height()-taHeadingHeight-5
});

$("#tokenatt").sortable({ connectWith:'.centralatt,.newcreate',helper: 'clone',appendTo: 'body'});
$("ul.centralatt").sortable({
helper: 'clone',
appendTo: 'body',
connectWith: "ul",
beforeStop: function(event,ui) {
$(this).sortable('cancel');
},
receive: function(event,ui) {
tokencurrentarray = $(this).sortable('toArray');
var tattpos = jQuery.inArray($(ui.item).attr('id'),tokencurrentarray);
var cattpos = tattpos+1;
var tattid = tokencurrentarray[cattpos-2];
var cattid = $(ui.item).attr('id');
if(tattpos == 0 ) {
alert(mustPairAttributeText);
$(ui.sender).sortable('cancel');
} else if($("#"+tattid).css('color') == 'rgb(204, 204, 204)') {
alert(onlyOneAttributeMappedText);
$(ui.sender).sortable('cancel');
} else {
$('ul.centralatt > li:nth-child('+tattpos+')').css("color","white");
$('ul.centralatt > li:nth-child('+tattpos+')').css("border-bottom","0");
$('ul.centralatt > li:nth-child('+cattpos+')').css("color","white");
$('ul.centralatt > li:nth-child('+cattpos+')').css("margin-top","-5px");
$('ul.centralatt > li:nth-child('+cattpos+')').css("border-top","0");
$('ul.centralatt > li:nth-child('+cattpos+')').css("min-height","20px");
$("#"+cattid).css("background-color","#696565");
$("#"+tattid).css("background-color","#696565");
}

var headingHeight = 0;
$('.attribute-column .heading').each(function(i) {
if($(this).height() > headingHeight) {
headingHeight = $(this).height();
}
});
$("ul.newcreate").sortable({
helper: 'clone',
appendTo: 'body',
dropOnEmpty: true,
receive: function(event,ui) {
newcurrentarray = $(this).sortable('toArray');
var cpdbattpos = jQuery.inArray($(ui.item).attr('id'),newcurrentarray)
var size = $(".newcreate li").size();
if(cpdbattpos == 0 && size>1) {
alert(addElementBelowText);
$(ui.sender).sortable('cancel');
} else if(newcurrentarray[cpdbattpos+1]=='tb') {
alert(onlyOneAttributeMappedText);
$(ui.sender).sortable('cancel');
} else {
$('.newcreate').append('<li id="tb_'+$(ui.item).attr('id')+'"><input type="text" id="td_'+$(ui.item).attr('id')+'" value=\"'+$(ui.item).attr('name')+'\"></li>');
$(ui.item).html($(ui.item).attr('id').replace('t_',''));
cpdbattpos = cpdbattpos+1;
$('ul.newcreate > li:nth-child('+cpdbattpos+')').css("color", "white");
$('ul.newcreate > li:nth-child('+cpdbattpos+')').css("background-color","#696565");
$('ul.newcreate > li:nth-child('+cpdbattpos+')').css("border-bottom","0");
$('li#tb_'+$(ui.item).attr('id')).css("background-color", "#696565");
$('li#tb_'+$(ui.item).attr('id')).css("margin-top", "-5px");
$('li#tb_'+$(ui.item).attr('id')).css("border-top", "0");
}
}
$('.attribute-column .heading').height(headingHeight);

function adjustHeights() {
$('.attribute-column, .droppable').css({ 'height': 'auto' });
$('.attribute-column').height($('.draggable-container').height());

var ncHeadingHeight = $('#newcreated .heading').outerHeight();
$('.newcreate').css({
'height':$('#newcreated').height()-ncHeadingHeight-5
});
var taHeadingHeight = $('#tokenattribute .heading').outerHeight();
$('#tokenatt').css({
'height':$('#tokenattribute').height()-taHeadingHeight-5
});
}

adjustHeights();

// Make the items draggable
$('.draggable').draggable({
revert: "invalid",
appendTo: "body",
containment: $('.draggable-container'),
zindex: 150,
opacity: 0.75
});

// Set the targets for the draggables
$('.droppable').droppable({
hoverClass: 'target-hover',
accept: '.draggable',
over: function(event, ui) {
adjustHeights();
},
drop: function(event, ui) {

// Physically move the draggable to the target (the plugin just visually moves it)
// Need to use a clone for this to fake out iPad
var newDraggable = $(ui.draggable).clone();
$(newDraggable).appendTo(this);
$(ui.draggable).remove();

// Clean up the new clone
$(newDraggable).removeClass('ui-draggable-dragging').css({
'left':'0',
'z-index': '',
'opacity': 1
}).animate({
top: ''
}, 300).draggable({
revert: "invalid",
appendTo: "body",
containment: $('.draggable-container'),
opacity: 0.75
});

// Remove the text input if dropped out of the new attributes column
if(!$(this).hasClass('newcreate') && $('input[type="text"]', newDraggable).length > 0) {
$('input[type="text"]', newDraggable).remove();
$(newDraggable).text($(newDraggable).attr('data-name'));
}
// Dropped in new attributes
if($(this).hasClass('newcreate')) {
$(newDraggable).html($(newDraggable).attr('id').replace('t_',''));
$(newDraggable).append('<input type="text" id="td_'+$(newDraggable).attr('id')+'" value=\"'+$(newDraggable).attr('data-name')+'\">');
}
// Reset the mappable attribute classes
$('.mappable-attribute-wrapper').removeClass('paired');
$('.mappable-attribute-wrapper .token-attribute').closest('.mappable-attribute-wrapper').addClass('paired');
$('.mappable-attribute-wrapper').droppable('enable');
$('.mappable-attribute-wrapper.paired').droppable('disable');

adjustHeights();
}
});

$("#back").click(function(){
var backURL = document.URL.replace(/participants\/sa\/attributeMapToken\/sid\//, 'tokens/sa/browse/surveyid/');
window.location = backURL;
});
$("#overwrite").click(function(){
if($("#overwrite").is(':checked')) {attoverwrite=true;} else {attoverwrite=false;}
Expand All @@ -92,22 +105,31 @@ $(document).ready(function(){
if($("#createautomap").is(':checked')) {attcreateautomap=true;} else {attcreateautomap=false;}
});
$('#attmap').click(function(){
var mappedarray = {};
var anewcurrentarray = {};
$.each(tokencurrentarray, function(index,value) {
if(value[0]=='t') {
mappedarray[encodeURI(tokencurrentarray[index-1].substring(2))] = value.substring(2);
}
newcurrentarray = new Array();
$('#newcreated .attribute-item').each(function(i) {
newcurrentarray.push($(this).attr('id'));
});
$.each(newcurrentarray, function(index,value) {
if(value[0]=='t') {
anewcurrentarray[value.substring(2)] = $("#td_"+value).val();
}
});
var mappedarray = {};
tokencurrentarray = new Array();
$('#centralattribute .attribute-item').each(function(i) {
tokencurrentarray.push($(this).attr('id'));
});
$.each(tokencurrentarray, function(index,value) {
if(value[0]=='t') {
mappedarray[encodeURI(tokencurrentarray[index-1].substring(2))] = value.substring(2);
}
});

/* $("#processing").dialog({
height: 90,
width: 50,
modal: true
height: 90,
width: 50,
modal: true
}); */

$("#processing").load(copyUrl, {
Expand All @@ -119,7 +141,7 @@ $(document).ready(function(){
createautomap: attcreateautomap
}, function(msg){
alert(msg);
$(this).dialog("close");
//$(this).dialog("close");
$(location).attr('href',redUrl);
});
});
Expand Down

0 comments on commit 9eeb7f1

Please sign in to comment.