Implement column data sample popup

modules/backend/behaviors/ImportExportController.php

@@ -1,8 +1,10 @@
 <?php namespace Backend\Behaviors;
 
+use Str;
 use Backend\Classes\ControllerBehavior;
 use League\Csv\Writer as CsvWrtier;
 use League\Csv\Reader as CsvReader;
+use ApplicationException;
 
 /**
  * Import/Export Controller Behavior
@@ -139,8 +141,6 @@ class ImportExportController extends ControllerBehavior
 
     protected function makeImportUploadFormWidget()
     {
-        // first_row_titles FALSE is generic columns (1,2,3,4,5..)
-
         $widgetConfig = $this->makeConfig('~/modules/backend/behaviors/importexportcontroller/partials/fields_import.yaml');
         $widgetConfig->model = $this->importGetModel();
         $widgetConfig->alias = 'importUploadForm';
@@ -169,6 +169,42 @@ class ImportExportController extends ControllerBehavior
         return $file->getLocalPath();
     }
 
+    public function onImportLoadColumnSamplePopup()
+    {
+        if (($columnId = post('file_column_id', false)) === false) {
+            throw new ApplicationException('Missing column identifier');
+        }
+
+        $columns = $this->getImportFileColumns();
+        if (!array_key_exists($columnId, $columns)) {
+            throw new ApplicationException('Unknown column');
+        }
+
+        $path = $this->getImportFilePath();
+        $reader = CsvReader::createFromPath($path);
+
+        if (post('first_row_titles')) {
+            $reader->setOffset(1);
+        }
+
+        $data = $reader->setLimit(20)->fetchColumn((int) $columnId);
+
+        /*
+         * Clean up data
+         */
+        foreach ($data as $index => $sample) {
+            $data[$index] = Str::limit($sample, 100);
+            if (!strlen($data[$index])) {
+                unset($data[$index]);
+            }
+        }
+
+        $this->vars['columnName'] = array_get($columns, $columnId);
+        $this->vars['columnData'] = $data;
+
+        return $this->importExportMakePartial('column_sample_popup');
+    }
+
     //
     // Exporting
     //

modules/backend/behaviors/importexportcontroller/assets/js/october.importexport.js

@@ -28,7 +28,10 @@
 
         this.loadFileColumnSample = function(el, id) {
             $(el).popup({
-                handler: 'onImportLoadColumnSample'
+                handler: 'onImportLoadColumnSamplePopup',
+                extraData: {
+                    file_column_id: id
+                }
             })
         }
     }

modules/backend/behaviors/importexportcontroller/assets/less/importexport.less

@@ -24,7 +24,6 @@
 
         li.dragged {
             position: absolute;
-            //opacity: 0.5;
             z-index: 2000;
             .box-shadow(0 3px 6px rgba(0,0,0,.075));
         }

modules/backend/behaviors/importexportcontroller/partials/_column_sample_popup.htm

@@ -0,0 +1,31 @@
+<div class="modal-header">
+    <button type="button" class="close" data-dismiss="popup">&times;</button>
+    <h4 class="modal-title">Column preview</h4>
+</div>
+<div class="modal-body">
+    <p>
+        Column:
+        <strong><?= $columnName ?></strong>
+    </p>
+
+    <div class="list-preview">
+        <div class="control-simplelist is-divided is-scrollable size-small" data-control="simplelist">
+            <ul>
+                <?php foreach ($columnData as $sample): ?>
+                    <li class="oc-icon-file-o">
+                        <?= e($sample) ?>
+                    </li>
+                <?php endforeach ?>
+            </ul>
+        </div>
+    </div>
+
+</div>
+<div class="modal-footer">
+    <button
+        type="button"
+        class="btn btn-default"
+        data-dismiss="popup">
+        <?= e(trans('backend::lang.form.close')) ?>
+    </button>
+</div>

modules/backend/behaviors/importexportcontroller/partials/_import_file_columns.htm

@@ -6,7 +6,7 @@
                     <div class="import-column-name">
                         <span>
                             <a
-                                href="javascript"
+                                href="javascript:;"
                                 class="column-ignore"
                                 data-toggle="tooltip"
                                 data-delay="300"