add option to upload file when creating a table

resources/assets/js/components/ColumnEditor.vue

@@ -63,6 +63,9 @@ Complex animated column editor for the table edit page
                 <input v-model="col.name"
                        :class="['form-control', { 'is-invalid': col._errors && col._errors['name'] }]"
                        :title="(col._errors && col._errors['name']) ? col._errors['name'][0] : null"
+                       :ref="`edit-${i}-name`"
+                       @keydown.down="verticalTab(i, 'name', 1)"
+                       @keydown.up="verticalTab(i, 'name', -1)"
                        type="text">
               </td>
 
@@ -81,6 +84,9 @@ Complex animated column editor for the table edit page
                 <input v-model="col.title"
                        :title="(col._errors && col._errors['title']) ? col._errors['title'][0] : null"
                        :class="['form-control', { 'is-invalid': col._errors && col._errors['title'] }]"
+                       :ref="`edit-${i}-title`"
+                       @keydown.down="verticalTab(i, 'title', 1)"
+                       @keydown.up="verticalTab(i, 'title', -1)"
                        type="text">
               </td>
             </template>
@@ -141,7 +147,7 @@ Complex animated column editor for the table edit page
 
   @media screen and (min-width: 625px) {
     table.new-table {
-      margin-left: -53px;
+      margin-left: -66px;
     }
   }
 
@@ -471,6 +477,34 @@ export default {
       for (const [key, value] of Object.entries(col._loadvals)) {
         col[key] = value
       }
+    },
+
+    /**
+     * Move to next or prev editable cell vertically
+     *
+     * @param index
+     * @param field
+     * @param dir - +1 down, -1 up
+     */
+    verticalTab (index, field, dir) {
+      if (dir == -1) {
+        // up
+        for(let i = index-1; i>= 0; i--) {
+          if (this.columns[i]._editing || this.newTable) {
+            this.$refs[`edit-${i}-${field}`][0].focus()
+            break;
+          }
+        }
+      }
+      else {
+        // down
+        for(let i = index+1; i < this.columns.length; i++) {
+          if (this.columns[i]._editing || this.newTable) {
+            this.$refs[`edit-${i}-${field}`][0].focus()
+            break;
+          }
+        }
+      }
     }
   }
 }

resources/views/table/create.blade.php

@@ -4,6 +4,7 @@
 
 @section('content')
   <form method="POST" action="{{route('table.storeNew')}}" class="row justify-content-center"
+        enctype="multipart/form-data"
         aria-label="New Table">
 
     @csrf
@@ -57,11 +58,15 @@
         </div>
       </div>
 
-      {!! Widget::textarea('data', 'Initial data')->value($exampleData)->height('12em')
-            ->help('
-              Initial table data in CSV format, columns corresponding to the
-              specification you entered above. This is optional; you can fill the table
-              later, e.g. by uploading a CSV file.') !!}
+      {!! Widget::par('
+        Initialize the table with pasted CSV lines or an uploaded CSV file,
+        using the column order you defined above. This is optional, you can always
+        fill or modify the table later.
+      ', 'text-muted') !!}
+
+      {!! Widget::textarea('data', 'CSV as text')->value($exampleData)->height('12em') !!}
+
+      {!! Widget::file('csv-file', 'CSV file')->accept("text/csv") !!}
 
       <div class="row form-group">
         <div class="col-md-7 offset-md-3">

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

@@ -23,7 +23,7 @@
       }
     @endphp
 
-    {!! Widget::par('Append rows from pasted CSV lines or uploaded CSV file') !!}
+    {!! Widget::par('Append rows from pasted CSV lines or an uploaded CSV file') !!}
 
     {{-- TODO interactive widget to select which cols are included, and in which order --}}
     {!! Widget::labeledPar('Columns', implode(', ', $cols), '', false) !!}