From 0f74646524cf4754c12da4dc67b227608a6b5f87 Mon Sep 17 00:00:00 2001
From: Kevin Granger <shipowlata@gmail.com>
Date: Thu, 28 Nov 2013 19:21:55 +0100
Subject: [PATCH] // import

---
 admin-dev/themes/default/css/admin-theme.css  |   2 +-
 .../scss/admin-theme/_admin-toolbar.sass      |   2 +
 .../controllers/import/helpers/form/form.tpl  | 411 +++++++++---------
 .../controllers/import/helpers/view/view.tpl  |  39 +-
 controllers/admin/AdminImportController.php   |   4 +-
 5 files changed, 216 insertions(+), 242 deletions(-)

diff --git a/admin-dev/themes/default/css/admin-theme.css b/admin-dev/themes/default/css/admin-theme.css
index bf46cdfaf..3718bd052 100644
--- a/admin-dev/themes/default/css/admin-theme.css
+++ b/admin-dev/themes/default/css/admin-theme.css
@@ -182,7 +182,7 @@ a .icon-rotate-90:before, a .icon-rotate-180:before, a .icon-rotate-270:before,
 
 .icon-th-list:before { content: "\f00b"; }
 
-.icon-ok:before { content: "\f00c"; }
+.icon-ok:before, .bootstrap .process-icon-ok:before { content: "\f00c"; }
 
 .icon-remove:before, .bootstrap .process-icon-cancel:before { content: "\f00d"; }
 
diff --git a/admin-dev/themes/default/scss/admin-theme/_admin-toolbar.sass b/admin-dev/themes/default/scss/admin-theme/_admin-toolbar.sass
index 2c9dc972b..93032054d 100644
--- a/admin-dev/themes/default/scss/admin-theme/_admin-toolbar.sass
+++ b/admin-dev/themes/default/scss/admin-theme/_admin-toolbar.sass
@@ -70,6 +70,8 @@
 
 .process-icon-save, .process-icon-save-and-stay, .process-icon-save-and-preview
 	@extend .icon-save
+.process-icon-ok
+	@extend .icon-ok
 .process-icon-cancel
 	@extend .icon-remove
 .process-icon-back
diff --git a/admin-dev/themes/default/template/controllers/import/helpers/form/form.tpl b/admin-dev/themes/default/template/controllers/import/helpers/form/form.tpl
index 52837ce97..9541926e9 100644
--- a/admin-dev/themes/default/template/controllers/import/helpers/form/form.tpl
+++ b/admin-dev/themes/default/template/controllers/import/helpers/form/form.tpl
@@ -49,19 +49,11 @@
 				</ul>
 			</div>
 			<hr>
-			<!-- <div id="upload_file_import">
-				<form action="{$current}&token={$token}" method="post" enctype="multipart/form-data" class="form-horizontal">
-					<button type="submit" name="submitFileUpload" class="btn btn-default">
-						<i class="icon-upload-alt"></i>
-						{l s='Upload'}
-					</button>
-				</form>
-			</div> -->
 			<form id="preview_import" action="{$current}&token={$token}" method="post" enctype="multipart/form-data" class="form-horizontal">
 				<div class="form-group">
-					<label class="control-label col-lg-4">{l s='What kind of entity would you like to import?'} </label>
+					<label for="entity" class="control-label col-lg-4">{l s='What kind of entity would you like to import?'} </label>
 					<div class="col-lg-8">
-						<select name="entity" id="entity" class="fixed-width-xl">
+						<select name="entity" id="entity" class="fixed-width-xxl form-control">
 							{foreach $entities AS $entity => $i }
 							<option value="{$i}"{if $entity_selected == $i} selected="selected"{/if}>
 								{$entity}
@@ -70,45 +62,18 @@
 						</select>
 					</div>
 				</div>
-
 				<div class="alert alert-warning import_products_categories">
 					<ul>
 						<li>{l s='Note that the category import does not support categories of the same name.'}</li>
 						<li>{l s='Note that you can have several products with the same reference.'}</li>
 					</ul>
 				</div>
-
 				<div class="alert alert-warning import_supply_orders_details">
 					<p>{l s='Importing Supply Order Details will reset products ordered, if there are any.'}</p>
 				</div>
-
 				<hr>
-				<!--<div class="form-group" id="csv_file_uploader">
-					<label class="control-label col-lg-4">{l s='Select your CSV file'}</label>
-					<div class="col-lg-8">
-						<input id="file" type="file" name="file" class="hide" />
-						<div class="dummyfile input-group">
-							<span class="input-group-addon"><i class="icon-file"></i></span>
-							<input id="file-name" name="filename" type="text" class="disabled"  readonly />
-							<span class="input-group-btn">
-								<button id="file-selectbutton" type="button" name="submitAddAttachments" class="btn btn-default">
-									<i class="icon-folder-open"></i> {l s='Choose a file'}
-								</button>
-							</span>
-						</div>
-						<p class="help-block">
-							{l s="You can also re-use a file that you already uploaded."}
-							<a href="#" onclick="$('#csv_files_history').slideToggle();$('#csv_file_uploader').slideToggle(); return false;">Click here</a>.
-						</p>
-					</div>
-					 <div class="alert alert-info">
-						{l s='Only UTF-8 and ISO-8859-1 encoding are allowed'}.<br/>
-						{l s='You can also upload your file via FTP to the following directory:'} {$path_import}.
-					</div> 
-				</div>-->
-
 				<div class="form-group" id="csv_file_uploader">
-					<label class="control-label col-lg-4">{l s='Select your CSV file'}</label>
+					<label for="file" class="control-label col-lg-4">{l s='Select your CSV file'}</label>
 					<div class="col-lg-8">
 						<input id="file" type="file" name="file" data-url="{$current}&token={$token}&ajax=1&action=uploadCsv" class="hide" />
 						<button class="ladda-button btn btn-default" data-style="expand-right" data-size="s" type="button" id="file-add-button">
@@ -116,7 +81,7 @@
 							{l s='Add file'}
 						</button>
 						{l s='or'}
-						<button class="btn btn-default" type="button" onclick="$('#csv_files_history').slideToggle();$('#csv_file_uploader').slideToggle(); return false;">
+						<button class="btn btn-default csv-history-btn" type="button">
 							<span class="csv-history-nb badge">{$files_to_import|count}</span>
 							{l s="Choose from history / FTP"}
 						</button>
@@ -127,131 +92,45 @@
 					</div>
 					<div class="alert alert-danger" id="file-errors" style="display:none"></div>
 				</div>
-
-				<script type="text/javascript">
-					function humanizeSize(bytes) {
-						if (typeof bytes !== 'number')
-							return '';
-						if (bytes >= 1000000000)
-							return (bytes / 1000000000).toFixed(2) + ' GB';
-						if (bytes >= 1000000)
-							return (bytes / 1000000).toFixed(2) + ' MB';
-						return (bytes / 1000).toFixed(2) + ' KB';
-					}
-
-					function csv_select(filename) {
-						$('#csv_selected_value').val(filename);
-						$('#csv_selected_filename').html(filename);
-						$('#csv_file_selected').show();
-						$('#csv_file_uploader').hide();
-						$('#csv_files_history').hide();
-					}
-					
-					function csv_unselect() {
-						$('#csv_file_selected').hide();
-						$('#csv_file_uploader').show();
-					}
-
-					function init_selected() {
-						$('#csv_file_selected').show();
-						$('#csv_file_uploader').hide();
-					}
-
-					$(document).ready(function() {
-
-						var file_add_button = Ladda.create( document.querySelector('#file-add-button' ));
-						var file_total_files = 0;
-
-						$('#file').fileupload({
-							dataType: 'json',
-							autoUpload: true,
-							acceptFileTypes: /(\.|\/)(csv)$/i,
-							singleFileUploads: true,
-							{if isset ($post_max_size)}maxFileSize: {$post_max_size},{/if}
-							start: function (e) {
-								file_add_button.start();
-							},
-							fail: function (e, data) {
-								$('#file-errors').html(data.errorThrown.message).show();
-							},
-							done: function (e, data) {
-								if (data.result) {
-									if (typeof data.result.file !== 'undefined') {
-										if (typeof data.result.file.error !== 'undefined' && data.result.file.error != '')
-											$('#file-errors').html('<strong>'+data.result.file.name+'</strong> : '+data.result.file.error).show();
-										else {
-											//$('#file-success').show();
-											$(data.context).find('button').remove();
-											$('#csv_uploaded_history').append($('#csv_uploaded_history tr:first').clone());
-											$('#csv_uploaded_history tr:last td:first').html(data.result.file.filename);
-											$('#csv_uploaded_history tr:last button').data('filename', data.result.file.filename);
-											csv_select(data.result.file.filename);
-										}
-									}
-								}
-							},
-						}).on('fileuploadalways', function (e, data) {
-							file_add_button.stop();
-						}).on('fileuploadprocessalways', function (e, data) {
-							var index = data.index,	file = data.files[index];
-							
-							if (file.error) {
-								$('#file-errors').append('<strong>'+file.name+'</strong> ('+humanizeSize(file.size)+') : '+file.error).show();
-								$(data.context).find('button').trigger('click');
-							}
-						});
-						$('#csv_uploaded_history').on('click', 'button', function(e){
-							e.preventDefault();
-							var filename = $(this).data('filename');
-							csv_select(filename);
-						});
-						$('#file-add-button').on('click', function(e) {
-							e.preventDefault();
-							$('#file-success').hide();
-							$('#file-errors').html('').hide();
-							$('#file').trigger('click');
-						});
-						$('#file-remove-button').on('click', function(e) {
-							e.preventDefault();
-							csv_unselect();
-						});
-
-						var selected = '{$csv_selected}';
-						console.log(selected);
-						if(selected){
-							init_selected();
-						}
-					});
-				</script>
-				<!-- <div class="form-group">
-					<label class="control-label col-lg-3">
-						{if count($files_to_import) > 1}
-							{l s='Your CSV file (%d files):' sprintf=count($files_to_import)}
-						{else}
-							{l s='Your CSV file (%d file):' sprintf=count($files_to_import)}
-						{/if}
-					</label>
-					<div class="col-lg-9">
-					{if count($files_to_import)}
-						<select name="csv">
-							{foreach $files_to_import AS $filename}
-								<option value="{$filename}"{if $csv_selected == $filename} selected="selected"{/if}>{$filename|escape:'html':'UTF-8'}</option>
-							{/foreach}
-						</select>
-					{/if}
-					</div>
-				</div> -->
 				<div class="form-group" id="csv_files_history" style="display:none;" >
 					<div class="panel">
 						<div class="panel-heading">
-							<!-- {l s='Click to view your csv files.'} -->
 							{l s='History of uploaded .CSV'}
 							<span class="csv-history-nb badge">{$files_to_import|count}</span>
-							<button type="button" class="btn btn-link pull-right" onclick="$('#csv_files_history').toggle();$('#csv_file_uploader').toggle(); return false;">
+							<button type="button" class="btn btn-link pull-right csv-history-btn">
 								<i class="icon-remove"></i>
 							</button>
 						</div>
 						<table id="csv_uploaded_history" class="table">
+							<tr class="hide">
+								<td></td>
+								<td>
+									<div class="btn-group pull-right">
+										<button type="button" data-filename="" class="csv-use-btn btn btn-default">
+											<i class="icon-ok"></i>
+											{l s='Use'}
+										</button>
+										<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+											<i class="icon-chevron-down"></i>
+										</button>
+										<ul class="dropdown-menu" role="menu">
+											<li>
+												<a class="csv-download-link" href="#" target="_blank">
+													<i class="icon-download"></i>
+													{l s='Download'}
+												</a>
+											</li>
+											<li class="divider"></li>
+											<li>
+												<a class="csv-delete-link" href="#">
+													<i class="icon-trash"></i>
+													{l s='Delete'}
+												</a>
+											</li>
+										</ul>
+									</div>
+								</td>
+							</tr>
 							{foreach $files_to_import AS $filename}
 							<tr >
 								<td>
@@ -306,13 +185,13 @@
 				</div>
 				<hr>
 				<div class="form-group">
-					<label class="control-label col-lg-4">
+					<label for="iso_lang" class="control-label col-lg-4">
 						<span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="{l s='The locale must be installed'}">
 							{l s='Language of the file'}
 						</span>
 					</label>
 					<div class="col-lg-8">
-						<select name="iso_lang" class="fixed-width-xl">
+						<select id="iso_lang" name="iso_lang" class="fixed-width-xl form-control">
 							{foreach $languages AS $lang}
 								<option value="{$lang.iso_code}" {if $lang.id_lang == $id_language} selected="selected"{/if}>{$lang.name}</option>
 							{/foreach}
@@ -320,7 +199,7 @@
 					</div>
 				</div>			
 				<div class="form-group">
-					<label for="convert" class="control-label col-lg-4">{l s='ISO-8859-1 encoded file?'} </label>
+					<label for="convert" class="control-label col-lg-4">{l s='ISO-8859-1 encoded file?'}</label>
 					<div class="col-lg-8">
 						<label class="switch-light prestashop-switch fixed-width-lg">
 							<input name="convert" id="convert" type="checkbox" />
@@ -333,16 +212,16 @@
 					</div>
 				</div>
 				<div class="form-group">
-					<label class="control-label col-lg-4">{l s='Field separator'} </label>
+					<label for="separator" class="control-label col-lg-4">{l s='Field separator'}</label>
 					<div class="col-lg-8">
-						<input class="fixed-width-xs" type="text" value="{if isset($separator_selected)}{$separator_selected|escape:'html':'UTF-8'}{else};{/if}" name="separator"/>
+						<input id="separator" name="separator" class="fixed-width-xs form-control" type="text" value="{if isset($separator_selected)}{$separator_selected|escape:'html':'UTF-8'}{else};{/if}" />
 						<div class="help-block">{l s='e.g. '} 1; Ipod; 129.90; 5</div>
 					</div>
 				</div>
 				<div class="form-group">
-					<label class="control-label col-lg-4">{l s='Multiple value separator'} </label>
+					<label for="multiple_value_separator" class="control-label col-lg-4">{l s='Multiple value separator'}</label>
 					<div class="col-lg-8">
-						<input class="fixed-width-xs" type="text" value="{if isset($multiple_value_separator_selected)}{$multiple_value_separator_selected|escape:'html':'UTF-8'}{else},{/if}" name="multiple_value_separator"/>
+						<input id="multiple_value_separator" name="multiple_value_separator" class="fixed-width-xs form-control" type="text" value="{if isset($multiple_value_separator_selected)}{$multiple_value_separator_selected|escape:'html':'UTF-8'}{else},{/if}" />
 						<div class="help-block">{l s='e.g. '} Ipod; red.jpg, blue.jpg, green.jpg; 129.90</div>
 					</div>
 				</div>
@@ -351,7 +230,7 @@
 					<label for="truncate" class="control-label col-lg-4">{l s='Delete all'} <span id="entitie">{l s='categories'}</span> {l s='before import?'} </label>
 					<div class="col-lg-8">
 						<label class="switch-light prestashop-switch fixed-width-lg">
-							<input name="truncate" id="truncate" type="checkbox"/>
+							<input id="truncate" name="truncate" type="checkbox"/>
 							<span>
 								<span>{l s='Yes'}</span>
 								<span>{l s='No'}</span>
@@ -364,7 +243,7 @@
 					<label for="match_ref" class="control-label col-lg-4">{l s='Use product reference as key?'}</label>
 					<div class="col-lg-8">
 						<label class="switch-light prestashop-switch fixed-width-lg">
-							<input name="match_ref" id="match_ref" type="checkbox" />
+							<input id="match_ref" name="match_ref" type="checkbox" />
 							<span>
 								<span>{l s='Yes'}</span>
 								<span>{l s='No'}</span>
@@ -377,7 +256,7 @@
 					<label for="regenerate" class="control-label col-lg-4">{l s='No thumbnails regeneration'}</label>
 					<div class="col-lg-8">
 						<label class="switch-light prestashop-switch fixed-width-lg">
-							<input name="regenerate" id="regenerate" type="checkbox" />
+							<input id="regenerate" name="regenerate" type="checkbox" />
 							<span>
 								<span>{l s='Yes'}</span>
 								<span>{l s='No'}</span>
@@ -388,13 +267,13 @@
 				</div>
 				<div class="form-group">
 					<label for="forceIDs" class="control-label col-lg-4">
-						<span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="{l s='If you don\'t use this option, all ID\'s will be auto-incremented.'}">
+						<span data-toggle="tooltip" class="label-tooltip" data-original-title="{l s='If you don\'t use this option, all ID\'s will be auto-incremented.'}">
 							{l s='Force all ID'} 
 						</span>
 					</label>
 					<div class="col-lg-8">
 						<label class="switch-light prestashop-switch fixed-width-lg">
-							<input name="forceIDs" id="forceIDs" type="checkbox"/>
+							<input  id="forceIDs"name="forceIDs" type="checkbox"/>
 							<span>
 								<span>{l s='Yes'}</span>
 								<span>{l s='No'}</span>
@@ -403,25 +282,14 @@
 						</label>
 					</div>
 				</div>
-<!-- 				<hr>
-				<div class="form-group">
-					<div class="col-lg-9 col-lg-push-3">
-						<button type="submit" name="submitImportFile" id="submitImportFile" class="btn btn-default pull-right" {if empty($files_to_import)}disabled{/if}>
-							{l s='Next step'}
-							<i class="icon-circle-arrow-right"></i>
-						</button>
-					</div>
-				</div> -->
-
-				<!-- {if empty($files_to_import)}
+<!-- 
+				{*if empty($files_to_import)*}
 				<div class="alert alert-info">{l s='You must upload a file in order to proceed to the next step'}</div>
-				{/if} -->
-
-				<!--{if !count($files_to_import)}
-				 <p>{l s='There is no CSV file available. Please upload one using the \'Upload\' button above.'}</p> 
-				{/if}-->
+				{*if !count($files_to_import)*}
+				<p>{l s='There is no CSV file available. Please upload one using the \'Upload\' button above.'}</p> 
+-->
 				<div class="panel-footer">
-					<button type="submit" name="submitImportFile" id="submitImportFile" class="btn btn-default pull-right">
+					<button type="submit" name="submitImportFile" id="submitImportFile" class="btn btn-default pull-right" >
 						<i class="process-icon-next"></i> <span>{l s='Next step'}</span>
 					</button>
 				</div>
@@ -442,7 +310,7 @@
 		</div>
 		<div class="panel">
 			<a href="#" onclick="$('#sample_files_import').slideToggle(); return false;">
-				{l s='Click to view our sample import csv files.'}
+				<i class="icon-info-sign"></i> {l s='Click to view our sample import csv files.'}
 			</a>
 
 			<div id="sample_files_import" class="list-group" style="display:none">
@@ -493,59 +361,171 @@
 	</div>
 </div>
 
+<script type="text/javascript">
+	function humanizeSize(bytes) {
+		if (typeof bytes !== 'number')
+			return '';
+		if (bytes >= 1000000000)
+			return (bytes / 1000000000).toFixed(2) + ' GB';
+		if (bytes >= 1000000)
+			return (bytes / 1000000).toFixed(2) + ' MB';
+		return (bytes / 1000).toFixed(2) + ' KB';
+	}
+
+	function csv_select(filename) {
+		$('#csv_selected_value').val(filename);
+		$('#csv_selected_filename').html(filename);
+		$('#csv_file_selected').show();
+		$('#csv_file_uploader').hide();
+		$('#csv_files_history').hide();
+	}
+
+	function csv_unselect() {
+		$('#csv_file_selected').hide();
+		$('#csv_file_uploader').show();
+	}
+
+	$(document).ready(function() {
+
+		var file_add_button = Ladda.create( document.querySelector('#file-add-button' ));
+		var file_total_files = 0;
+
+		$('#file').fileupload({
+			dataType: 'json',
+			autoUpload: true,
+			acceptFileTypes: /(\.|\/)(csv)$/i,
+			singleFileUploads: true,
+			{if isset ($post_max_size)}maxFileSize: {$post_max_size},{/if}
+			start: function (e) {
+				file_add_button.start();
+			},
+			fail: function (e, data) {
+				$('#file-errors').html(data.errorThrown.message).show();
+			},
+			done: function (e, data) {
+				if (data.result) {
+					if (typeof data.result.file !== 'undefined') {
+						if (typeof data.result.file.error !== 'undefined' && data.result.file.error != '')
+							$('#file-errors').html('<strong>'+data.result.file.name+'</strong> : '+data.result.file.error).show();
+						else {
+							$(data.context).find('button').remove();
+							var row = $('#csv_uploaded_history tr:first').clone();
+							$('#csv_uploaded_history').append(row);
+							row.removeClass('hide');
+							row.find('td:first').html(data.result.file.filename);
+							row.find('button.csv-use-btn').data('filename', data.result.file.filename);
+							row.find('a.csv-download-link').attr('href','{$current}&token={$token}&csvfilename='+data.result.file.name);
+							row.find('a.csv-delete-link').attr('href','{$current}&token={$token}&csvfilename='+data.result.file.name+'&delete=1');
+							csv_select(data.result.file.filename);
+							var items = $('#csv_uploaded_history tr').length -1;
+							$('.csv-history-nb').html(items);
+						}
+					}
+				}
+			},
+		}).on('fileuploadalways', function (e, data) {
+			file_add_button.stop();
+		}).on('fileuploadprocessalways', function (e, data) {
+			var index = data.index,	file = data.files[index];
+			
+			if (file.error) {
+				$('#file-errors').append('<strong>'+file.name+'</strong> ('+humanizeSize(file.size)+') : '+file.error).show();
+				$(data.context).find('button').trigger('click');
+			}
+		});
+
+		$('#csv_uploaded_history').on('click', 'button.csv-use-btn', function(e){
+			e.preventDefault();
+			var filename = $(this).data('filename');
+			csv_select(filename);
+		});
+		$('#file-add-button').on('click', function(e) {
+			e.preventDefault();
+			$('#file-success').hide();
+			$('#file-errors').html('').hide();
+			$('#file').trigger('click');
+		});
+		$('#file-remove-button').on('click', function(e) {
+			e.preventDefault();
+			csv_unselect();
+		});
+
+		$('.csv-history-btn').on('click',function(e){
+			e.preventDefault();
+			$('#csv_files_history').toggle();
+			$('#csv_file_uploader').toggle();
+		})
+		//show selected csv if exists
+		var selected = '{$csv_selected}';
+		if(selected){
+			$('#csv_file_selected').show();
+			$('#csv_file_uploader').hide();
+		}
+	});
+</script>
+
 <script type="text/javascript">
 	$(document).ready(function(){
 		var truncateAuthorized = {$truncateAuthorized|intval};
 		activeClueTip();
 		
-		$('#preview_import').submit(function(e){
-			if ($('#truncate').get(0).checked)
-				if (truncateAuthorized)
-				{
+		$('#preview_import').submit(function(e) {
+			if ($('#truncate').get(0).checked) {
+				if (truncateAuthorized) {
 					if (!confirm('{l s='Are you sure that you would like to delete this' js=1}' + ' ' + $.trim($('#entity > option:selected').text().toLowerCase()) + '?'))
 						e.preventDefault();
 				}
-				else
-				{
+				else {
 					jAlert('{l s='You do not have permission to delete here. When the multistore is enabled, only a SuperAdmin can delete all items before an import.' js=1}');
 					return false;
 				}
+			}
 		});
 
-		$("select#entity").change(function(){
-			if ($("#entity > option:selected").val() == 8 || $("#entity > option:selected").val() == 9)
-				$("label[for=truncate],#truncate").hide();
-			else
-				$("label[for=truncate],#truncate").show();
-	
-			if ($("#entity > option:selected").val() == 9)
+		$("select#entity").change(function() {
+			if ($("#entity > option:selected").val() == 8 || $("#entity > option:selected").val() == 9) {
+				$("#truncate").closest('.form-group.').hide();
+			}
+			else {
+				$("#truncate").closest('.form-group.').show();
+			}
+			if ($("#entity > option:selected").val() == 9) {
 				$(".import_supply_orders_details").show();
-			else
-			{
+			}
+			else {
 				$(".import_supply_orders_details").hide();
 				$('input[name=multiple_value_separator]').val('{if isset($multiple_value_separator_selected)}{$multiple_value_separator_selected}{else},{/if}');
 			}
-			if ($("#entity > option:selected").val() == 1)
+			if ($("#entity > option:selected").val() == 1) {
 				$("#match_ref").closest('.form-group.').show();
-			else
+			}
+			else {
 				$("#match_ref").closest('.form-group.').hide();
-
-			if ($("#entity > option:selected").val() == 1 || $("#entity > option:selected").val() == 0)
+			}
+			if ($("#entity > option:selected").val() == 1 || $("#entity > option:selected").val() == 0) {
 				$(".import_products_categories").show();
-			else
+			}
+			else {
 				$(".import_products_categories").hide();
-
-			if ($("#entity > option:selected").val() == 0 || $("#entity > option:selected").val() == 1 || 
-				$("#entity > option:selected").val() == 5 || $("#entity > option:selected").val() == 6)
-				$("#regenerate").closest('.form-group.').show();
-			else
+			}
+			if ($("#entity > option:selected").val() == 0 || $("#entity > option:selected").val() == 1 ||
+				$("#entity > option:selected").val() == 5 || $("#entity > option:selected").val() == 6) {
+					$("#regenerate").closest('.form-group.').show();
+			}
+			else {
 				$("#regenerate").closest('.form-group.').hide();
-
-			if ($("#entity > option:selected").val() == 0 || $("#entity > option:selected").val() == 1 || $("#entity > option:selected").val() == 3 || $("#entity > option:selected").val() == 5 || $("#entity > option:selected").val() == 6 || $("#entity > option:selected").val() == 7)
+			}
+			if ($("#entity > option:selected").val() == 0 || $("#entity > option:selected").val() == 1 ||
+				$("#entity > option:selected").val() == 3 || $("#entity > option:selected").val() == 5 ||
+				$("#entity > option:selected").val() == 6 || $("#entity > option:selected").val() == 7) {
 				$("#forceIDs").closest('.form-group.').show();
-			else
+			}
+			else {
 				$("#forceIDs").closest('.form-group.').hide();
+			}
+
 			$("#entitie").html($("#entity > option:selected").text().toLowerCase());
+
 			$.ajax({
 				url: 'ajax.php',
 				data: {
@@ -566,9 +546,10 @@
 				error: function(j){}			
 			});
 		});
+
 		$("select#entity").trigger('change');
-		function activeClueTip()
-		{
+
+		function activeClueTip() {
 			$('.info_import').cluetip({
 				splitTitle: '|',
 			    showTitle: false
diff --git a/admin-dev/themes/default/template/controllers/import/helpers/view/view.tpl b/admin-dev/themes/default/template/controllers/import/helpers/view/view.tpl
index abc9e3fa6..d8f589b60 100644
--- a/admin-dev/themes/default/template/controllers/import/helpers/view/view.tpl
+++ b/admin-dev/themes/default/template/controllers/import/helpers/view/view.tpl
@@ -28,17 +28,14 @@
 		var errorEmpty = '{l s='Please name your mapping configuration in order to save it.' js=1}';
 		var token = '{$token}';
 		var current = 0;
-		function showTable(nb)
-		{
+		function showTable(nb) {
 			$('#btn_left').disabled = null;
 			$('#btn_right').disabled = null;
-			if (nb <= 0)
-			{
+			if (nb <= 0) {
 				nb = 0;
 				$('#btn_left').disabled = 'true';
 			}
-			if (nb >= {$nb_table} - 1)
-			{
+			if (nb >= {$nb_table} - 1) {
 				nb = {$nb_table} - 1;
 				$('#btn_right').disabled = 'true';
 			}
@@ -46,11 +43,10 @@
 			current = nb;
 			$('#table' + current).show();
 		}
-		$(document).ready(function(){
+		$(document).ready(function() {
 			var btn_save_import = $('span[class~="process-icon-save-import"]').parent();
 			var btn_submit_import = $('#import');
-			if (btn_save_import.length > 0 && btn_submit_import.length > 0)
-			{
+			if (btn_save_import.length > 0 && btn_submit_import.length > 0) {
 				btn_submit_import.closest('.form-group').hide();
 				btn_save_import.find('span').removeClass('process-icon-save-import');
 				btn_save_import.find('span').addClass('process-icon-save');
@@ -117,8 +113,8 @@
 			<input type="hidden" name="multiple_value_separator" value="{$fields_value.multiple_value_separator}" />
 			<div class="form-group">
 				<label class="control-label col-lg-3" for="skip">{l s='Lines to skip'}</label>
-				<div class="col-lg-7">
-					<input type="text" name="skip" id="skip" value="1" />
+				<div class="col-lg-9">
+					<input class="fixed-width-sm" type="text" name="skip" id="skip" value="1" />
 					<p class="help-block">{l s='This number indicates how many of the first lines of your CSV file should be skipped when importing the data. For instance set it to 1 if the first row of your file contains headers.'}</p>
 				</div>
 			</div>
@@ -136,18 +132,15 @@
 					</button>
 				</div>
 			</div>
-			<hr>
-			<div class="form-group">
-				<div class="col-lg-12">
-					<button type="button" class="btn btn-default">
-						<i class="icon-remove text-danger"></i>
-						{l s='Cancel'}
-					</button>
-					<button id="import" name="import" type="submit" onclick="return (validateImportation(new Array({$res})));"  class="btn btn-default pull-right">
-						<i class="icon-ok text-success"></i>
-						{l s='Import .CSV data'}
-					</button>
-				</div>
+			<div class="panel-footer">
+				<button type="button" class="btn btn-default" onclick="window.history.back();">
+					<i class="process-icon-cancel text-danger"></i>
+					{l s='Cancel'}
+				</button>
+				<button id="import" name="import" type="submit" onclick="return (validateImportation(new Array({$res})));"  class="btn btn-default pull-right">
+					<i class="process-icon-ok text-success"></i>
+					{l s='Import .CSV data'}
+				</button>
 			</div>
 		</form>
 	</div>
diff --git a/controllers/admin/AdminImportController.php b/controllers/admin/AdminImportController.php
index d82512bec..8c2af3b5e 100644
--- a/controllers/admin/AdminImportController.php
+++ b/controllers/admin/AdminImportController.php
@@ -709,9 +709,7 @@ class AdminImportControllerCore extends AdminController
 
 	protected function generateContentTable($current_table, $nb_column, $handle, $glue)
 	{
-		$html = '<table id="table'.$current_table.'" style="display: none;" class="table">
-					<thead><tr>';
-
+		$html = '<table id="table'.$current_table.'" style="display: none;" class="table table-bordered"><thead><tr>';
 		// Header
 		for ($i = 0; $i < $nb_column; $i++)
 			if (MAX_COLUMNS * (int)$current_table <= $i && (int)$i < MAX_COLUMNS * ((int)$current_table + 1))