CSV import, also from file, and more UX improvements

resources/views/table/propose/add-rows-csv.blade.php

@@ -8,19 +8,42 @@
 @extends('table.propose.layout')
 
 @section('tab-content')
-  <div class="form-inline py-2 px-1">
-    <form action="{{$table->draftUpdateRoute}}" method="POST" class="form-inline">
-      @csrf
-      <input type="hidden" name="action" value="rows.add-csv">
-      <input type="hidden" name="redirect" value="{{request()->fullUrl()}}">
-      <label class="pr-2" for="csv-data">Add CSV:</label>
-      <textarea name="data" id="csv-data"
-                title="{{$errors->has('data') ? $errors->first('data') : ''}}"
-                class="form-control mr-1 {{ $errors->has('data')?'is-invalid':'' }}"
-                style="width:30em; height:10em">{{old('data')}}</textarea>
-      <button class="btn btn-outline-success">Append</button>
-    </form>
-  </div>
+  <form action="{{$table->draftUpdateRoute}}" method="POST" class="form col-md-12 mt-3" enctype="multipart/form-data">
+    @csrf
+    <input type="hidden" name="action" value="row.add-csv">
+    <input type="hidden" name="redirect" value="{{$table->getDraftRoute('add-rows')}}">
+    <?php Widget::setLayout(3,7) ?>
+
+    {!! Widget::header(3, "Import CSV") !!}
+
+    @php
+      $cols = [];
+      foreach ($columns as $column) {
+          $cols[] = '<b>'.e($column->title) . '</b>';
+      }
+    @endphp
+
+    {!! Widget::par('Append rows from pasted CSV lines or uploaded CSV file') !!}
+
+    {{-- TODO interactive widget to select which cols are included, and in which order --}}
+    {!! Widget::labeledPar('Columns', implode(', ', $cols), '', false) !!}
+
+    {!! Widget::textarea('data', 'CSV as text')->help('
+      Comma-separated values, one row per line.
+      Do not put spaces after commas, they would be
+      included in the values.
+    ')->minHeight('10em') !!}
+
+    {!! Widget::file('csv-file', 'CSV file')->accept("text/csv") !!}
+
+    <div class="row form-group">
+      <div class="col-md-7 offset-md-3">
+        <button class="btn btn-outline-success">
+          @icon(fa-upload fa-pr)Upload
+        </button>
+      </div>
+    </div>
+  </form>
 @stop
 
 @push('scripts')