Skip to content

Commit

Permalink
Fixed issue #08558: Clean up interface for mapping attributes when im…
Browse files Browse the repository at this point in the history 
…orting into CPDB

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 24, 2014
1 parent f4d5b50 commit e909a9e
Show file tree
Hide file tree
Showing 5 changed files with 587 additions and 361 deletions.
80 changes: 44 additions & 36 deletions application/views/admin/participants/attributeMapCSV_view.php
View file
@@ -1,48 +1,56 @@
<div class='header ui-widget-header'><strong><?php printf($clang->ngT("Select which fields to import as attributes with your participant.","Select which fields to import as attributes with your %s participants.",$linecount), $linecount); ?></strong></div>
<div class="main">
<div id="csvattribute" class='container'>
<div class="heading"><?php $clang->eT("CSV field names "); ?></div>
<div class='instructions'><?php $clang->eT("The following additional fields were found in your CSV file."); ?></div>

<ul class="csvatt">
<?php
foreach ($firstline as $key => $value)
{
echo "<li id='cs_" . $value . "' name='cs_" . $value . "' >" . $value . "</li>";
}
?>
</ul>
<div class='header ui-widget-header'>
<strong><?php printf($clang->ngT("Select which fields to import as attributes with your participant.","Select which fields to import as attributes with your %s participants.",$linecount), $linecount); ?></strong>
</div>
<div class="draggable-container">
<div id="csvattribute" class="attribute-column">
<div class="heading"><?php $clang->eT("CSV field names "); ?></div>
<div class='instructions'><?php $clang->eT("The following additional fields were found in your CSV file."); ?></div>
<div class="csvatt droppable">
<?php
foreach ($firstline as $key => $value)
{
echo "<div id='cs_" . $value . "' data-name='cs_" . $value . "' class=\"csv-attribute attribute-item draggable\">" . $value . "</div>";
}
?>
</div>
<div id="newcreated" class='container'><div class="heading"><?php $clang->eT("Attributes to be created") ?></div>
</div>
<div id="newcreated" class="attribute-column">
<div class="heading"><?php $clang->eT("Attributes to be created") ?></div>
<div class='instructions'><?php $clang->eT("Drop a CSV field into this area to create a new participant attribute and import your data into it."); ?></div>
<ul class="newcreate" id="sortable">
</ul>
<div class="newcreate droppable" style ="height: 40px">
</div>
<div id="centralattribute" class='container'><div class="heading"><?php $clang->eT("Existing attribute"); ?></div>
</div>
<div id="centralattribute" class="attribute-column">
<div class="heading"><?php $clang->eT("Existing attribute"); ?></div>
<div class='instructions'><?php $clang->eT("Drop a CSV field into an existing participant attribute listed below to import your data into it."); ?></div>
<ul class="cpdbatt">
<?php
foreach ($attributes as $key => $value)
{
echo "<li id='c_" . $value['attribute_id'] . "' name='c_" . $key . "'>" . $value['attribute_name'] . "<br />&nbsp;</li>";
}
?>
</ul>
<div class='explanation'>
<input type='checkbox' id='overwrite' name='overwrite' /> <label for='overwrite'><?php $clang->eT("Overwrite existing token attribute values if a duplicate participant is found?") ?></label>
<br /><br /><?php
if($participant_id_exists) {
$clang->eT("Duplicates will be detected using the participant_id field in this CSV file");
} else {
$clang->eT("Duplicates will be detected by a combination of firstname, lastname and email addresses");
<div class="centralatt">
<?php
foreach ($attributes as $key => $value)
{
echo "<div class=\"mappable-attribute-wrapper droppable\"><div id='c_" . $value['attribute_id'] . "' data-name='c_" . $key . "' class=\"mappable-attribute attribute-item\">" . $value['attribute_name'] . "</div></div>";
}

?>
</div>
<div class='explanation'>
<div class="explanation-row">
<input type='checkbox' id='overwrite' name='overwrite' />
<label for='overwrite'><?php $clang->eT("Overwrite existing token attribute values if a duplicate participant is found?") ?>
<br />
<?php
if($participant_id_exists) {
$clang->eT("Duplicates will be detected using the participant_id field in this CSV file.");
} else {
$clang->eT("Duplicates will be detected by a combination of firstname, lastname and email addresses.");
}
?>
</label>
</div>
</div>
</ul>
</div>
<div style="clear: both;"></div>
</div>
<p><input type="button" name="attmapcancel" id="attmapcancel" value="<?php $clang->eT("Cancel") ?>" />
<p>
<input type="button" name="attmapcancel" id="attmapcancel" value="<?php $clang->eT("Cancel") ?>" />
<input type="button" name="attreset" id="attreset" value="<?php $clang->eT("Reset") ?>" onClick="window.location.reload();" />
<input type="button" name="attmap" id="attmap" value="<?php $clang->eT("Continue"); ?>" />
</p>
Expand Down
266 changes: 143 additions & 123 deletions scripts/admin/attributeMapCSV.js
View file
Expand Up @@ -4,140 +4,160 @@ $(document).ready(function() {
}
var height = $(document).height();
var width = $(document).width();
var cpdbattarray = {};
var newcurrentarray = {};
$('#centralattribute').css({'height' : height-200});
$('#csvattribute').css({'height' : height-200});
$('#newcreated').css({'height' : height-200});
if($("#overwrite").is(':checked')) {var attoverwrite=true;} else {var attoverwrite=false;}
$("#overwrite").click(function(){
if($("#overwrite").is(':checked')) {attoverwrite=true;} else {attoverwrite=false;}
});
//The original fieldnames bucket
$(".csvatt").sortable({
connectWith:".cpdbatt,.newcreate",
helper: "clone",
appendTo: "ul",
receive: function(event,ui) {
newcurrentarray = $(this).sortable('toArray');
var csvattpos = jQuery.inArray($(ui.item).attr('id'),newcurrentarray)
csvattpos = csvattpos+1;
$('ul.csvatt > li:nth-child('+csvattpos+')').css("color", "black");
$('ul.csvatt > li:nth-child('+csvattpos+')').css("background-color","white");
$('ul.csvatt > li:nth-child('+csvattpos+')').css("margin-top","3px");
$('ul.csvatt > li:nth-child('+csvattpos+')').css("border-top","2px solid #ddd");


var headingHeight = 0;
$('.attribute-column .heading').each(function(i) {
if($(this).height() > headingHeight) {
headingHeight = $(this).height();
}
});
//The 'create new' bucket
$(".newcreate").sortable({
helper: "clone",
connectWith:".cpdbatt,.csvatt"
});
//The existing attributes bucket
$("ul.cpdbatt").sortable({
helper: "clone",
$('.attribute-column .heading').height(headingHeight);

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

var ncHeadingHeight = $('#newcreated .heading').outerHeight();
var ncInstructionsHeight = $('#newcreated .instructions').outerHeight();
$('.newcreate').css({
'height':$('#newcreated').height()-ncHeadingHeight-5-ncInstructionsHeight
});
var csvHeadingHeight = $('#csvattribute .heading').outerHeight();
var csvInstructionsHeight = $('#csvattribute .instructions').outerHeight();
$('.csvatt').css({
'height':$('#csvattribute').height()-csvHeadingHeight-5-csvInstructionsHeight
});
}

adjustHeights();

if($("#overwrite").is(':checked')) {
var attoverwrite=true;
}
else {
var attoverwrite=false;
}

// Make the items draggable
$('.draggable').draggable({
revert: "invalid",
appendTo: "body",
connectWith: "ul.cpdbatt,.csvatt,.newcreate",

receive: function(event,ui) {
cpdbattarray = $(this).sortable('toArray');
var cpdbattpos = jQuery.inArray($(ui.item).attr('id'),cpdbattarray);
var csvpos = cpdbattpos+1;
var cpdbattid = cpdbattarray[cpdbattpos-1];
var csvattid = $(ui.item).attr('id');
if(cpdbattpos == 0 ) {
alert(notPairedErrorTxt);
$(ui.sender).sortable('cancel');
} else if($("#"+cpdbattid).css('color') == 'white') {
alert(onlyOnePairedErrorTxt);
$(ui.sender).sortable('cancel');
} else {
$('ul.cpdbatt > li:nth-child('+cpdbattpos+')').css("color","white");
$('ul.cpdbatt > li:nth-child('+cpdbattpos+')').css("border-bottom","0");
$('ul.cpdbatt > li:nth-child('+csvpos+')').css("color","white");
$('ul.cpdbatt > li:nth-child('+csvpos+')').css("margin-top","-5px");
$('ul.cpdbatt > li:nth-child('+csvpos+')').css("border-top","0");
$('ul.cpdbatt > li:nth-child('+csvpos+')').css("min-height","20px");
$('ul.cpdbatt > li:nth-child('+csvpos+')').css("background-color","#328639");
$("#"+cpdbattid).css("background-color","#328639");
}
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();
},
remove: function(event,ui) {
/* TODO: Find out how to change the colour of the li item above the moved item back to white */
}
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
});

// Reset the mappable attribute classes
$('.mappable-attribute-wrapper').removeClass('paired');
$('.mappable-attribute-wrapper .csv-attribute').closest('.mappable-attribute-wrapper').addClass('paired');
$('.mappable-attribute-wrapper').droppable('enable');
$('.mappable-attribute-wrapper.paired').droppable('disable');

adjustHeights();
}
});


$("ul.newcreate").sortable({
helper: 'clone',
appendTo: 'body',
dropOnEmpty: true,
receive: function(event,ui) {
if($(ui.item).attr('id')[0]=='t') {
alert(cannotAcceptErrorTxt);
$(ui.sender).sortable('cancel');
}
newcurrentarray = $(this).sortable('toArray');
var cpdbattpos = jQuery.inArray($(ui.item).attr('id'),newcurrentarray)
cpdbattpos = cpdbattpos+1;
$('ul.newcreate > li:nth-child('+cpdbattpos+')').css("color", "white");
$('ul.newcreate > li:nth-child('+cpdbattpos+')').css("background-color","#328639");
}
});

$('#attmapcancel').click(function(){
$.post(mapCSVcancelled, {fullfilepath : thefilepath},
function(data){
$(location).attr('href',displayParticipants);
});
});

$('#attmap').click(function(){
var mappedarray = {};
$.each(cpdbattarray, function(index,value) {
if(value[0]=='c' && value[1]=='s') {
mappedarray[cpdbattarray[index-1].substring(2)] = value.substring(3);
}
});
$('#attmapcancel').click(function(){
$.post(mapCSVcancelled, {fullfilepath : thefilepath},
function(data){
$(location).attr('href',displayParticipants);
});
});

$("#overwrite").click(function(){
if($("#overwrite").is(':checked')) {
attoverwrite=true;
}
else {
attoverwrite=false;
}
});

$.each(newcurrentarray, function(index,value) {
newcurrentarray[index] = value.substring(3);
});
$('#attmap').click(function(){
var anewcurrentarray = {};
newcurrentarray = new Array();
$('#newcreated .attribute-item').each(function(i) {
newcurrentarray.push($(this).attr('id'));
});
$.each(newcurrentarray, function(index,value) {
anewcurrentarray[index] = value.substring(3);
});

var mappedarray = {};
cpdbattarray = new Array();
$('#centralattribute .attribute-item').each(function(i) {
cpdbattarray.push($(this).attr('id'));
});
$.each(cpdbattarray, function(index,value) {
if(value[0]=='c' && value[1]=='s') {
mappedarray[cpdbattarray[index-1].substring(2)] = value.substring(3);
}
});

var dialog_buttons={};
var dialog_buttons={};

dialog_buttons[okBtn]=function(){
$(location).attr('href',displayParticipants);
};
dialog_buttons[okBtn]=function(){
$(location).attr('href',displayParticipants);
};

$("#processing").dialog({
height: 550,
width: 700,
modal: true,
buttons: dialog_buttons,
open: function(event, ui) {
$('#processing').parent().find("button").each(function() {
if ($(this).text() == okBtn) {
$(this).attr('disabled', true);
}
});
}
});
$("#processing").dialog({
height: 550,
width: 700,
modal: true,
buttons: dialog_buttons,
open: function(event, ui) {
$('#processing').parent().find("button").each(function() {
if ($(this).text() == okBtn) {
$(this).attr('disabled', true);
}
});
}
});

$("#processing").load(copyUrl, {
characterset: characterset,
separatorused : separator,
fullfilepath : thefilepath,
newarray : newcurrentarray,
mappedarray : mappedarray,
$("#processing").load(copyUrl, {
characterset: characterset,
separatorused : separator,
fullfilepath : thefilepath,
newarray : anewcurrentarray,
mappedarray : mappedarray,
overwrite : attoverwrite,
filterbea : filterblankemails
}, function(msg){
$('#processing').parent().find("button").each(function() {
if ($(this).text() == okBtn) {
$(this).attr('disabled', false);
}
});
});
});
}, function(msg){
$('#processing').parent().find("button").each(function() {
if ($(this).text() == okBtn) {
$(this).attr('disabled', false);
}
});
});
});
});

0 comments on commit e909a9e

Please sign in to comment.