Simplify approach by using Form Widget

Author: daftspunk

modules/backend/behaviors/ImportExportController.php

@@ -28,6 +28,11 @@ class ImportExportController extends ControllerBehavior
      */
     public $importModel;
 
+    /**
+     * @var array Import column configuration.
+     */
+    public $importColumns;
+
     /**
      * @var Backend\Classes\WidgetBase Reference to the widget used for uploading import file.
      */
@@ -55,6 +60,9 @@ public function __construct($controller)
         $modelClass = $this->getConfig('import[modelClass]');
         $this->importModel = new $modelClass;
 
+        $columnConfig = $this->getConfig('import[list]');
+        $this->importColumns = $this->makeListColumns($columnConfig);
+
         $this->importUploadFormWidget = $this->makeImportUploadFormWidget();
         $this->importUploadFormWidget->bindToController();
     }
@@ -66,6 +74,7 @@ public function __construct($controller)
     public function prepareVars()
     {
         $this->vars['importUploadFormWidget'] = $this->importUploadFormWidget;
+        $this->vars['importColumns'] = $this->importColumns;
     }
 
     public function import()
@@ -75,17 +84,7 @@ public function import()
 
     public function importRender()
     {
-        return $this->importExportMakePartial('container');
-    }
-
-    public function importRenderUpload()
-    {
-        return $this->importExportMakePartial('import_upload');
-    }
-
-    public function importRenderColumns()
-    {
-        return $this->importExportMakePartial('import_columns');
+        return $this->importExportMakePartial('import');
     }
 
     /**
@@ -104,30 +103,37 @@ public function importExportMakePartial($partial, $params = [])
         return $contents;
     }
 
+    protected function makeListColumns($config)
+    {
+        $config = $this->makeConfig($config);
+
+        if (!isset($config->columns) || !is_array($config->columns)) {
+            return null;
+        }
+
+        $result = [];
+        foreach ($config->columns as $attribute => $column) {
+            $result[$attribute] = array_get($column, 'label', $attribute);
+        }
+
+        return $result;
+    }
+
     protected function makeImportUploadFormWidget()
     {
-        $fields = [
-            'import_file' => [
-                'label' => 'Import file',
-                'type' => 'fileupload',
-                'mode' => 'file'
-            ],
-            'first_row_titles' => [
-                'label' => 'First row contains column titles',
-                'comment' => 'Leave this checked if the first row in the CSV is used as the column titles.',
-                'type' => 'checkbox',
-                'default' => true
-            ]
-        ];
 
         // first_row_titles FALSE is generic columns (1,2,3,4,5..)
 
-        $widgetConfig = $this->makeConfig();
+        $widgetConfig = $this->makeConfig('~/modules/backend/behaviors/importexportcontroller/partials/fields_import.yaml');
         $widgetConfig->model = $this->importModel;
         $widgetConfig->alias = 'importUploadForm';
-        $widgetConfig->fields = $fields;
 
         $widget = $this->makeWidget('Backend\Widgets\Form', $widgetConfig);
+
+        $widget->bindEvent('form.beforeRefresh', function($holder) {
+            $holder->data = [];
+        });
+
         return $widget;
     }
 

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

@@ -0,0 +1,5 @@
+<div class="import-behavior">
+
+    <?= $importUploadFormWidget->render() ?>
+
+</div>

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

@@ -1,5 +1,3 @@
-
-
 <div class="row">
     <div class="col-md-6">
         File Columns
@@ -10,15 +8,15 @@
             </p>
 
             <ul style="display: none">
-                <li>
+                <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>
+                <li data-import-code="2|url_name">
                     <div class="import-column-name">
                         <span>URL Name</span>
                     </div>
@@ -34,9 +32,12 @@
 
         <div class="import-record-columns">
             <ul>
-                <li><span>SKU</span></li>
-                <li><span>Title</span></li>
-                <li><span>Description</span></li>
+                <?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>

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

@@ -0,0 +1,34 @@
+# ===================================
+#  Field Definitions
+# ===================================
+
+fields:
+    step1_section:
+        label: 1. Upload a CSV file
+        type: section
+
+    import_file:
+        label: Import file
+        type: fileupload
+        mode: file
+        span: left
+
+    first_row_titles:
+        label: First row contains column titles
+        comment: Leave this checked if the first row in the CSV is used as the column titles.
+        type: checkbox
+        default: true
+        span: left
+
+    step2_section:
+        label: 2. Match fields to the CSV columns
+        type: section
+
+    import_columns:
+        type: partial
+        path: ~/modules/backend/behaviors/importexportcontroller/partials/_import_columns.htm
+        dependsOn: import_file
+
+    step3_section:
+        label: 3. Set import options
+        type: section