Add logic to extract column headers from file

Move import columns to their own partials

modules/backend/behaviors/ImportExportController.php

@@ -1,7 +1,8 @@
 <?php namespace Backend\Behaviors;
 
 use Backend\Classes\ControllerBehavior;
-use League\Csv\Writer;
+use League\Csv\Writer as CsvWrtier;
+use League\Csv\Reader as CsvReader;
 
 /**
  * Import/Export Controller Behavior
@@ -87,7 +88,8 @@ class ImportExportController extends ControllerBehavior
     public function prepareVars()
     {
         $this->vars['importUploadFormWidget'] = $this->importUploadFormWidget;
-        $this->vars['importColumns'] = $this->getImportDbColumns();
+        $this->vars['importDbColumns'] = $this->getImportDbColumns();
+        $this->vars['importFileColumns'] = $this->getImportFileColumns();
 
         // Make these variables to widgets
         $this->controller->vars += $this->vars;
@@ -119,7 +121,20 @@ class ImportExportController extends ControllerBehavior
 
     protected function getImportFileColumns()
     {
+        if (!$path = $this->getImportFilePath()) {
+            return null;
+        }
 
+        $reader = CsvReader::createFromPath($path);
+        $firstRow = $reader->fetchOne(0);
+
+        if (!post('first_row_titles')) {
+            array_walk($firstRow, function(&$value, $key) {
+                $value = 'Column #'.($key + 1);
+            });
+        }
+
+        return $firstRow;
     }
 
     protected function makeImportUploadFormWidget()
@@ -139,6 +154,21 @@ class ImportExportController extends ControllerBehavior
         return $widget;
     }
 
+    protected function getImportFilePath()
+    {
+        $model = $this->importGetModel();
+        $file = $model
+            ->import_file()
+            ->withDeferred($this->importUploadFormWidget->getSessionKey())
+            ->first();
+
+        if (!$file) {
+            return null;
+        }
+
+        return $file->getLocalPath();
+    }
+
     //
     // Exporting
     //

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

@@ -18,6 +18,7 @@
   height: 400px;
   background: #f0f0f0;
   padding: 5px;
+  overflow: auto;
 }
 .import-behavior .import-file-columns .upload-prompt {
   display: block;
@@ -61,6 +62,11 @@
   float: left;
   width: 45%;
 }
+.import-behavior .import-file-columns > ul div.import-column-name > span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .import-behavior .import-file-columns > ul .import-column-bindings > ul {
   float: right;
   width: 55%;

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

@@ -30,6 +30,7 @@
         height: 400px;
         background: #f0f0f0;
         padding: 5px;
+        overflow: auto;
     }
     .import-file-columns {
         .upload-prompt {
@@ -71,6 +72,12 @@
         div.import-column-name {
             float: left;
             width: 45%;
+
+            > span {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
         }
 
         .import-column-bindings > ul {

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

@@ -1,51 +0,0 @@
-<div class="row">
-    <div class="col-md-6">
-        File Columns
-
-        <div class="import-file-columns">
-            <p class="upload-prompt">
-                Please upload a valid CSV file.
-            </p>
-
-            <ul style="display: none">
-                <li data-import-code="1|name">
-                    <div class="import-column-name">
-                        <span>Name</span>
-                    </div>
-                    <div class="import-column-bindings">
-                        <ul data-empty-text="Drop column here..."></ul>
-                    </div>
-                </li>
-                <li data-import-code="2|url_name">
-                    <div class="import-column-name">
-                        <span>URL Name</span>
-                    </div>
-                    <div class="import-column-bindings">
-                        <ul data-empty-text="Drop column here..."></ul>
-                    </div>
-                </li>
-            </ul>
-        </div>
-    </div>
-    <div class="col-md-6">
-        Record Columns
-
-        <div class="import-db-columns">
-            <ul>
-                <?php foreach ($importColumns as $column => $label): ?>
-                    <li data-column-name="<?= e($column) ?>">
-                        <span><?= e($label) ?></span>
-                        <input type="hidden" data-column-match Xname="column_match[1|xxx][]" Xvalue="<?= e($column) ?>" >
-                    </li>
-                <?php endforeach ?>
-            </ul>
-        </div>
-    </div>
-</div>
-
-<script>
-    $('.import-db-columns > ul, .import-column-bindings > ul').sortable({
-        group: 'import-fields',
-        usePlaceholderClone: true
-    })
-</script>

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

@@ -0,0 +1,17 @@
+<div class="import-db-columns">
+    <ul>
+        <?php foreach ($importDbColumns as $column => $label): ?>
+            <li data-column-name="<?= e($column) ?>">
+                <span><?= e($label) ?></span>
+                <input type="hidden" data-column-match Xname="column_match[1][]" Xvalue="<?= e($column) ?>" >
+            </li>
+        <?php endforeach ?>
+    </ul>
+</div>
+
+<script>
+    $('.import-db-columns > ul, .import-column-bindings > ul').sortable({
+        group: 'import-fields',
+        usePlaceholderClone: true
+    })
+</script>

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

@@ -0,0 +1,20 @@
+<div class="import-file-columns">
+    <?php if ($importFileColumns): ?>
+        <ul>
+            <?php foreach ($importFileColumns as $index => $column): ?>
+                <li data-column-id="<?= $index ?>">
+                    <div class="import-column-name">
+                        <span><?= $column ?></span>
+                    </div>
+                    <div class="import-column-bindings">
+                        <ul data-empty-text="Drop column here..."></ul>
+                    </div>
+                </li>
+            <?php endforeach ?>
+        </ul>
+    <?php else: ?>
+        <p class="upload-prompt">
+            Please upload a valid CSV file.
+        </p>
+    <?php endif ?>
+</div>

modules/backend/behaviors/importexportcontroller/partials/fields_import.yaml

@@ -25,10 +25,18 @@ fields:
         label: 2. Match fields to the CSV columns
         type: section
 
-    import_columns:
+    import_file_columns:
+        label: File columns
         type: partial
-        path: ~/modules/backend/behaviors/importexportcontroller/partials/_import_columns.htm
+        path: ~/modules/backend/behaviors/importexportcontroller/partials/_import_file_columns.htm
         dependsOn: import_file
+        span: left
+
+    import_db_columns:
+        label: Record columns
+        type: partial
+        path: ~/modules/backend/behaviors/importexportcontroller/partials/_import_db_columns.htm
+        span: right
 
     step3_section:
         label: 3. Set import options