Row adding, some webpack tweaks

resources/assets/js/components/RowsEditor.vue

@@ -4,7 +4,7 @@
     <tr>
       <th style="width:3rem" class="border-top-0"></th>
       <th style="width:3rem" class="border-top-0"></th>
-      <th v-for="col in columns" :class="colClasses(col)">{{col.title}}</th>
+      <th v-for="col in columns" :class="colClasses(col)" :title="col.name">{{col.title}}</th>
     </tr>
     </thead>
     <tbody>
@@ -59,6 +59,7 @@ export default {
     route: String,
     xRows: Object, // key'd by _id
     columns: Array,
+    lastPage: Boolean,
   },
   data: function() {
     return {
@@ -83,13 +84,22 @@ export default {
     },
 
     toggleRowDelete(_id) {
+      if (!_.isDefined(this.rows[_id])) return;
+
       let remove = !this.rows[_id]._remove
 
       this.query({
         action: remove ? 'row.remove' : 'row.restore',
         id: _id
       }, (resp) => {
-        this.$set(this.rows, _id, resp.data)
+        // if response is null, this was a New row
+        // and it was discarded without a way back - hard drop
+        if (_.isEmpty(resp.data)) {
+          this.$delete(this.rows, _id)
+        }
+        else {
+          this.$set(this.rows, _id, resp.data)
+        }
       })
     },
 
@@ -131,13 +141,15 @@ export default {
 
     rowStyle(row) {
       return {
-        opacity: row._remove? .8 : 1,
-        backgroundColor: row._remove? '#FFC4CC': 'transparent'
+        opacity: row._remove ? .8 : 1,
+        backgroundColor:
+          row._remove ? '#FFC4CC':
+          'transparent'
       }
     },
 
     isChanged (row, colId) {
-      return row._changed.indexOf(colId) > -1
+      return row._changed && row._changed.indexOf(colId) > -1
     },
 
     revertCell(row, colId) {

resources/assets/js/udash.js

@@ -1,5 +1,12 @@
 // subset of used lodash modules
 
-export { default as each } from 'lodash/each';
-export { default as isUndefined } from 'lodash/isUndefined';
-export { default as merge } from 'lodash/merge';
+export { default as each } from 'lodash/each'
+export { default as isUndefined } from 'lodash/isUndefined'
+export { default as merge } from 'lodash/merge'
+export { default as unset } from 'lodash/unset'
+export { default as isEmpty } from 'lodash/isEmpty'
+
+function isDefined(x) {
+  return typeof(x) !== 'undefined';
+}
+export { isDefined }

resources/assets/js/vue-init.js

@@ -1,9 +1,27 @@
 window.Vue = require('vue');
 
-Vue.component('column-editor', require('./components/ColumnEditor.vue'));
-Vue.component('row-editor', require('./components/RowEditor.vue'));
-Vue.component('v-icon', require('./components/Icon.vue'));
+const ColumnEditorCtor = Vue.component('column-editor', require('./components/ColumnEditor.vue'));
+const RowsEditorCtor = Vue.component('rows-editor', require('./components/RowsEditor.vue'));
+const IconCtor = Vue.component('v-icon', require('./components/Icon.vue'));
 
-const app = new Vue({
-  el: '#app'
-});
+// const app = new Vue({
+//   el: '#app'
+// });
+
+window.app = {
+  ColumnEditor: function(selector, data) {
+    new ColumnEditorCtor({
+      propsData: data
+    }).$mount(selector);
+  },
+  RowsEditor: function(selector, data) {
+    new RowsEditorCtor({
+      propsData: data
+    }).$mount(selector);
+  },
+  Icon: function(selector, data) {
+    new IconCtor({
+      propsData: data
+    }).$mount(selector);
+  }
+}

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">