Row adding, some webpack tweaks

resources/views/layouts/app.blade.php

@@ -12,6 +12,12 @@
 
   <!-- Scripts -->
   <script src="{{ asset('js/app.js') }}" defer></script>
+  <script>
+    function ready(fn) {
+      document.addEventListener('DOMContentLoaded', fn);
+    }
+  </script>
+  @stack('scripts')
 
   <!-- Styles -->
   <link href="{{ asset('css/app.css') }}" rel="stylesheet">

resources/views/table/_rows.blade.php

@@ -11,14 +11,16 @@
 <table class="table table-hover table-sm">
   <thead>
   <tr>
+    <th>#</th>
     @foreach($columns as $col)
-      <th>{{ $col->title }}</th>
+      <th title="{{$col->name}}">{{ $col->title }}</th>
     @endforeach
   </tr>
   </thead>
   <tbody>
   @foreach($rows as $row)
     <tr>
+      <td>{{$row->_id}}</td>
       @foreach($columns as $col)
         <td>{{ $row->{$col->name} }}</td>
       @endforeach

resources/views/table/create.blade.php

@@ -30,23 +30,12 @@
             ->help('If you took the data from some external site, a book, etc., write it here.
                URLs in a full format will be clickable.') !!}
 
-      {{--!! Widget::textarea('columns', 'Columns')->value($exampleColumns)->height('8em')
-            ->help('
-              <div class="text-left">
-                Column parameters in CSV format:
-                <ul class="pl-3 mb-0">
-                  <li><b>column identifier</b><br>letters, numbers, underscore
-                  <li><b>column data type</b><br>int, string, float, bool
-                  <li><b>column title</b><br>used for display (optional)
-                </ul>
-              </div>') !!--}}
-
       <div class="row form-group">
         <label for="field-columns" class="col-md-3 col-form-label text-md-right">
           Columns
         </label>
         <div class="col-md-8">
-          <column-editor name="columns" :initial-columns="{{old('columns', toJSON($columns))}}"></column-editor>
+          <div id="column-editor"></div>
 
           <noscript>
             You have JavaScript disabled; enter columns as JSON array<br>
@@ -84,3 +73,14 @@
     </div>
   </form>
 @endsection
+
+@push('scripts')
+  <script>
+    ready(function() {
+      app.ColumnEditor('#column-editor', {
+        name: 'columns',
+        initialColumns: {!! old('columns', toJSON($columns)) !!},
+      })
+    });
+  </script>
+@endpush

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

@@ -1,6 +1,52 @@
-@php($tab='add-rows')
-@extends('table.propose.layout')
+@php
+  $tab = 'add-rows';
+  /** @var \App\Tables\Column[] $columns */
+  /** @var \App\Tables\Changeset $changeset */
+  /** @var \App\Models\Row[]|Illuminate\Pagination\Paginator $rows */
+  /** @var \App\Models\Table $table */
+@endphp
+@extends('table.propose.layout-row-pagination')
 
-@section('tab-content')
-  ...
+@section('header')
+  <div class="form-inline py-2 px-1 border-bottom mb-3">
+    {{-- TODO improve layout --}}
+    <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 class="flex-grow-1"></div>
+
+    <form action="{{$table->draftUpdateRoute}}" method="POST">
+      @csrf
+      <input type="hidden" name="action" value="rows.add">
+      <input type="hidden" name="redirect" value="{{request()->fullUrl()}}">
+      <label class="form-inline pr-2" for="newrow-count">Add Empty Rows:</label>
+      <input name="count" id="newrow-count" type="number" min=1 step=1 value=1 class="form-control mr-1" style="width:10em">
+      <button class="btn btn-outline-success">Add</button>
+    </form>
+  </div>
 @stop
+
+@section('rows')
+  <div id="rows-editor"></div>
+@stop
+
+@push('scripts')
+  <script>
+    ready(function() {
+      app.RowsEditor('#rows-editor', {
+        route: {!! toJSON($table->draftUpdateRoute) !!},
+        columns: {!! toJSON($columns) !!},
+        xRows: {!! toJSON($rows->keyBy('_id'), true) !!},
+      })
+    });
+  </script>
+@endpush

resources/views/table/propose/edit-rows.blade.php

@@ -4,9 +4,6 @@
   /** @var \App\Tables\Changeset $changeset */
   /** @var \App\Models\Row[]|Illuminate\Pagination\Paginator $rows */
   /** @var \App\Models\Table $table */
-  /** @var \App\Tables\Column[] $columns */
-  /** @var \App\Tables\Changeset $changeset */
-  /** @var \App\Models\Table $table */
 @endphp
 
 @extends('table.propose.layout-row-pagination')
@@ -19,9 +16,17 @@
     });
   @endphp
 
-  <table is="row-editor"
-         route="{{$table->draftUpdateRoute}}"
-         :columns="{{toJSON($columns)}}"
-         :x-rows="{{toJSON($transformed)}}">
-  </table>
+  <div id="rows-editor"></div>
 @stop
+
+@push('scripts')
+  <script>
+    ready(function() {
+      app.RowsEditor('#rows-editor', {
+        route: {!! toJSON($table->draftUpdateRoute) !!},
+        columns: {!! toJSON($columns) !!},
+        xRows: {!! toJSON($transformed, true) !!},
+      })
+    });
+  </script>
+@endpush

resources/views/table/propose/layout-row-pagination.blade.php

@@ -5,6 +5,10 @@
 @extends('table.propose.layout')
 
 @section('tab-content')
+  <div class="col-12">
+    @yield('header')
+  </div>
+
   @if($rows->hasPages())
     <div class="col-md-12 d-flex">
       <nav class="text-center" aria-label="Pages of the table">

resources/views/table/propose/layout.blade.php

@@ -14,9 +14,7 @@ if (!isset($tab) || $tab == '') $tab = 'edit-rows';
     <small class="flex-grow-1" style="font-size: 120%;">
       <a href="{{ route('profile.view', $table->owner->name) }}" class="link-no-color">{{ $table->owner->handle }}</a>{{--
       --}}<span class="px-1">/</span>{{--
-      --}}<b>
-        <a href="{{ $table->viewRoute }}" class="link-no-color">{{ $table->name }}</a>
-      </b>
+      --}}<b><a href="{{ $table->viewRoute }}" class="link-no-color">{{ $table->name }}</a></b>
     </small>
 
     <h1 class="mx-3">