Koha/koha-tmpl/intranet-tmpl/prog/en/modules/tools/quotes-upload.tt
Owen Leonard 90a1d98e06 Bug 16513 - Improvements and fixes for quote upload process
This patch fixes some minor bugs and adds a small enhancement to the
quotes editor and quotes upload pages.

To test, apply the patch and go to Tools -> Quote editor

- In the table of quotes, clicking the "ID" table header should trigger
  an alert, "Click on the quote's ide to select..."
- Go to "Import quotes" and select a file to upload.
- On the upload preview page you should see a new "Cancel import"
  button. Clicking it should return you to the quotes upload page after
  asking for confirmation.
- Test the upload cancel button:
  - If you have fast reflexes or are uploading a file large enough, you
    should be able to see a "Cancel upload" button during the upload
    process.
  - Clicking this button should cancel the upload and return you to the
    quote upload page.

Tested on top of Bug 16589, works as expected.
Signed-off-by: Marc Véron <veron@veron.ch>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
2016-06-24 13:47:34 +00:00

373 lines
15 KiB
Text

[% INCLUDE 'doc-head-open.inc' %]
<title>Koha &rsaquo; Tools &rsaquo; Quote uploader</title>
[% INCLUDE 'doc-head-close.inc' %]
<link rel="stylesheet" type="text/css" href="[% interface %]/[% theme %]/css/uploader.css" />
<link rel="stylesheet" type="text/css" href="[% interface %]/[% theme %]/css/quotes.css" />
<link rel="stylesheet" type="text/css" href="[% interface %]/[% theme %]/css/datatables.css" />
[% INCLUDE 'datatables.inc' %]
<script type="text/javascript" src="[% interface %]/lib/jquery/plugins/jquery.jeditable.mini.js"></script>
<script type="text/javascript">
//<![CDATA[
var oTable; //DataTable object
$(document).ready(function() {
$("#cancel_upload").on("click",function(e){
e.preventDefault();
fnAbortRead();
});
$("#cancel_quotes").on("click",function(){
return confirm( _("Are you sure you want to cancel this import?") );
});
// Credits:
// FileReader() code copied and hacked from:
// http://www.html5rocks.com/en/tutorials/file/dndfiles/
// fnCSVToArray() gratefully borrowed from:
// http://www.bennadel.com/blog/1504-Ask-Ben-Parsing-CSV-Strings-With-Javascript-Exec-Regular-Expression-Command.htm
var reader;
var progress = document.querySelector('.percent');
$("#server_response").hide();
function yuiGetData() {
fnGetData(document.getElementById('quotes_editor'));
}
function fnAbortRead() {
reader.abort();
}
function fnErrorHandler(evt) {
switch(evt.target.error.code) {
case evt.target.error.NOT_FOUND_ERR:
alert('File Not Found!');
break;
case evt.target.error.NOT_READABLE_ERR:
alert('File is not readable');
break;
case evt.target.error.ABORT_ERR:
break; // noop
default:
alert('An error occurred reading this file.');
};
}
function fnUpdateProgress(evt) {
// evt is an ProgressEvent.
if (evt.lengthComputable) {
var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
// Increase the progress bar length.
if (percentLoaded < 100) {
progress.style.width = percentLoaded + '%';
progress.textContent = percentLoaded + '%';
}
}
}
function fnCSVToArray( strData, strDelimiter ){
// This will parse a delimited string into an array of
// arrays. The default delimiter is the comma, but this
// can be overriden in the second argument.
// Check to see if the delimiter is defined. If not,
// then default to comma.
strDelimiter = (strDelimiter || ",");
// Create a regular expression to parse the CSV values.
var objPattern = new RegExp(
(
// Delimiters.
"(\\" + strDelimiter + "|\\r?\\n|\\r|^)" +
// Quoted fields.
"(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +
// Standard fields.
"([^\"\\" + strDelimiter + "\\r\\n]*))"
),
"gi"
);
// Create an array to hold our data. Give the array
// a default empty first row.
var arrData = [[]];
// Create an array to hold our individual pattern
// matching groups.
var arrMatches = null;
// Keep looping over the regular expression matches
// until we can no longer find a match.
while (arrMatches = objPattern.exec( strData )){
// Get the delimiter that was found.
var strMatchedDelimiter = arrMatches[ 1 ];
// Check to see if the given delimiter has a length
// (is not the start of string) and if it matches
// field delimiter. If it does not, then we know
// that this delimiter is a row delimiter.
if ( strMatchedDelimiter.length && (strMatchedDelimiter != strDelimiter) ){
// Since we have reached a new row of data,
// add an empty row to our data array.
// Note: if there is not more data, we will have to remove this row later
arrData.push( [] );
}
// Now that we have our delimiter out of the way,
// let's check to see which kind of value we
// captured (quoted or unquoted).
if (arrMatches[ 2 ]){
// We found a quoted value. When we capture
// this value, unescape any double quotes.
var strMatchedValue = arrMatches[ 2 ].replace(
new RegExp( "\"\"", "g" ),
"\""
);
} else if (arrMatches[3]){
// We found a non-quoted value.
var strMatchedValue = arrMatches[ 3 ];
} else {
// There is no more valid data so remove the row we added earlier
// Is there a better way? Perhaps a look-ahead regexp?
arrData.splice(arrData.length-1, 1);
}
// Now that we have our value string, let's add
// it to the data array.
arrData[ arrData.length - 1 ].push( strMatchedValue );
}
// Return the parsed data.
return( arrData );
}
function fnDataTable(aaData) {
for(var i=0; i<aaData.length; i++) {
aaData[i].unshift(i+1); // Add a column w/quote number
}
/* Transition from the quote file uploader to the quote file editor interface */
$('#toolbar').css("visibility","visible");
$('#toolbar').css("position","");
$('#file_editor_inst').css("visibility", "visible");
$('#file_editor_inst').css("position", "");
$('#file_uploader_inst').css("visibility", "hidden");
$('#save_quotes').css("visibility","visible");
$('#file_uploader').css("visibility","hidden");
$('#file_uploader').css("position","absolute");
$('#file_uploader').css("top","-150px");
$('#quotes_editor').css("visibility","visible");
$("#save_quotes").on("click", yuiGetData);
$("#delete_quote").on("click", fnClickDeleteRow);
oTable = $('#quotes_editor').dataTable( {
"bAutoWidth" : false,
"bPaginate" : true,
"bSort" : false,
"sPaginationType" : "full_numbers",
"sDom": '<"top pager"iflp>rt<"bottom pager"flp><"clear">',
"aaData" : aaData,
"aoColumns" : [
{
"sTitle" : "Number",
"sWidth" : "2%",
},
{
"sTitle" : "Source",
"sWidth" : "15%",
},
{
"sTitle" : "Quote",
"sWidth" : "83%",
},
],
"fnPreDrawCallback": function(oSettings) {
return true;
},
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
/* do foo on various cells in the current row */
var quoteNum = $('td', nRow)[0].innerHTML;
$(nRow).attr("id", quoteNum); /* set row ids to quote number */
$('td:eq(0)', nRow).click(function() {$(this.parentNode).toggleClass('selected',this.clicked);}); /* add row selectors */
$('td:eq(0)', nRow).attr("title", _("Click ID to select/deselect quote"));
/* apply no_edit id to noEditFields */
noEditFields = [0]; /* number */
for (i=0; i<noEditFields.length; i++) {
$('td', nRow)[noEditFields[i]].setAttribute("id","no_edit");
}
return nRow;
},
"fnDrawCallback": function(oSettings) {
/* Apply the jEditable handlers to the table on all fields w/o the no_edit id */
$('#quotes_editor tbody td[id!="no_edit"]').editable( function(value, settings) {
var cellPosition = oTable.fnGetPosition( this );
oTable.fnUpdate(value, cellPosition[0], cellPosition[1], false, false);
return(value);
},
{
"callback" : function( sValue, y ) {
oTable.fnDraw(false); /* no filter/sort or we lose our pagination */
},
"height" : "14px",
});
},
});
$('#footer').css("visibility","visible");
}
function fnHandleFileSelect(evt) {
// Reset progress indicator on new file selection.
progress.style.width = '0%';
progress.textContent = '0%';
reader = new FileReader();
reader.onerror = fnErrorHandler;
reader.onprogress = fnUpdateProgress;
reader.onabort = function(e) {
alert('File read cancelled');
parent.location='quotes-upload.pl';
};
reader.onloadstart = function(e) {
$('#cancel_upload').show();
$('#progress_bar').addClass("loading");
};
reader.onload = function(e) {
// Ensure that the progress bar displays 100% at the end.
progress.style.width = '100%';
progress.textContent = '100%';
$('#cancel_upload').hide();
quotes = fnCSVToArray(e.target.result, ',');
fnDataTable(quotes);
}
// perform various sanity checks on the target file prior to uploading...
var fileType = evt.target.files[0].type || 'unknown';
var fileSizeInK = Math.round(evt.target.files[0].size/1024);
if (!fileType.match(/comma-separated-values|csv|excel|calc/i)) {
alert(_("Uploads limited to csv. Incorrect filetype: %s").format(fileType));
parent.location='quotes-upload.pl';
return;
}
if (fileSizeInK > 512) {
if (!confirm(_("%s %s KB Do you really want to upload this file?").format(evt.target.files[0].name, fileSizeInK))) {
parent.location='quotes-upload.pl';
return;
}
}
// Read in the image file as a text string.
reader.readAsText(evt.target.files[0]);
}
$('#file_upload').one('change', fnHandleFileSelect);
});
function fnGetData(element) {
var jqXHR = $.ajax({
url : "/cgi-bin/koha/tools/quotes/quotes-upload_ajax.pl",
type : "POST",
contentType : "application/x-www-form-urlencoded", // we must claim this mimetype or CGI will not decode the URL encoding
dataType : "json",
data : {
"quote" : encodeURI ( JSON.stringify(oTable.fnGetData()) ),
"action" : "add",
},
success : function(){
var response = JSON.parse(jqXHR.responseText);
if (response.success) {
alert(_("%s quotes saved.").format(response.records));
window.location.reload(true); // is this the best route?
}
else {
alert(_("%s quotes saved, but an error has occurred. Please ask your administrator to check the server log for more details.").format(response.records));
window.location.reload(true); // is this the best route?
}
},
});
}
function fnClickDeleteRow() {
var idsToDelete = oTable.$('.selected').map(function() {
return this.id;
}).get().join(', ');
if (!idsToDelete) {
alert(_("Please select a quote(s) by clicking the quote id(s) you desire to delete."));
}
else if (confirm(_("Are you sure you wish to delete quote(s) %s?").format(idsToDelete))) {
oTable.$('.selected').each(function(){
oTable.fnDeleteRow(this);
});
}
}
//]]>
</script>
</head>
<body id="tools_quotes" class="tools">
[% INCLUDE 'header.inc' %]
[% INCLUDE 'cat-search.inc' %]
<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a> &rsaquo; <a href="/cgi-bin/koha/tools/quotes.pl">Quote editor</a> &rsaquo; Quote uploader</div>
<div id="doc3" class="yui-t2">
<div id="bd">
<div id="yui-main">
<div class="yui-b">
[% INCLUDE 'quotes-upload-toolbar.inc' %]
<h2>Quote uploader</h2>
<div id="instructions">
<fieldset id="file_uploader_help" class="rows">
<legend>Instructions</legend>
<div id="file_uploader_inst">
<ul>
<li>The quote uploader accepts standard csv files with two columns: "source","text"</li>
<li>Click the "Choose File" button and select the csv file to be uploaded.</li>
<li>The file will be imported into an editable table for review prior to saving.</li>
</ul>
</div>
<div id="file_editor_inst">
<ul>
<li>Click on any field to edit the contents; Press the &lt;Enter&gt; key to save edit.</li>
<li>Click on one or more quote numbers to select entire quotes for deletion; Click the 'Delete Quote(s)' button to delete selected quotes.</li>
<li>Click the 'Save Quotes' button in the toolbar to save the entire batch of quotes.</li>
</ul>
</div>
</fieldset>
</div>
<fieldset id="file_uploader" class="rows">
<legend>Upload quotes</legend>
<div id="file_upload">
<input type="file" name="file" />
<button id="cancel_upload" style="display:none">Cancel upload</button>
<div id="progress_bar"><div class="percent">0%</div></div>
</div>
</fieldset>
<table id="quotes_editor" style="visibility: hidden;">
<thead>
<tr>
<th>Source</th>
<th>Text</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!-- tbody content is generated by DataTables -->
<tr>
<td></td>
<td>Loading data...</td>
<td></td>
</tr>
</tbody>
</table>
<fieldset id="footer" class="action" style="visibility: hidden;">
</fieldset>
</div>
</div>
<div class="yui-b noprint">
[% INCLUDE 'tools-menu.inc' %]
</div>
</div>
[% INCLUDE 'intranet-bottom.inc' %]