add some validation to row edit, better handle setting null cols with empty

resources/assets/js/base-setup.js

@@ -1,4 +1,4 @@
-//window._ = require('lodash');
+window._ = require('lodash');
 window.Popper = require('popper.js').default
 
 /**

resources/assets/js/components/RowEditor.vue

@@ -26,14 +26,16 @@
 
         <template v-if="row._editing">
           <td v-for="col in columns" class="pr-0">
-            <input v-model="row[col.id]" class="form-control" type="text">
+            <input v-model="row[col.id]" :class="['form-control', { 'is-invalid': row._errors && row._errors[col.id] }]"
+                   :title="(row._errors && row._errors[col.id]) ? row._errors[col.id][0] : null"
+                   type="text" @keyup.enter="toggleRowEditing(row._id)">
           </td>
         </template>
 
         <template v-else>
           <td v-for="col in columns">
             <span class="text-danger strike" title="Original value" v-if="isChanged(row, col.id)">{{row._orig[col.id]}}</span>
-            <span>{{ row[col.id] || '' }}</span>
+            <span>{{ row[col.id] }}</span>
             <v-icon v-if="isChanged(row, col.id)"
                     @click="revertCell(row, col.id)"
                     class="fa-undo text-danger pointer"
@@ -52,8 +54,6 @@
 </style>
 
 <script>
-import { merge } from 'lodash';
-
 export default {
   props: {
     route: String,
@@ -69,11 +69,13 @@ export default {
     busy (yes) {
       $('#draft-busy').css('opacity', yes ? 1 : 0)
     },
-    query (data, sucfn) {
+    query (data, sucfn, erfn) {
       this.busy(true)
       if (!sucfn) sucfn = ()=>{}
-      window.axios.post(this.route, data).then(sucfn).catch((e) => {
-        console.error(e)
+      if (!sucfn) erfn = ()=>{}
+      window.axios.post(this.route, data).then(sucfn).catch((error) => {
+        console.error(error.message)
+        erfn(error.response.data)
       }).then(() => {
         this.busy(false)
       })
@@ -94,6 +96,10 @@ export default {
         data: row
       }, (resp) => {
         this.$set(this.rows, resp.data._id, resp.data);
+      }, (er) => {
+        if (!_.isUndefined(er.errors)) {
+          this.$set(this.rows[row._id], '_errors', er.errors);
+        }
       })
     },
     toggleRowEditing(_id) {
@@ -127,7 +133,7 @@ export default {
       return row._changed.indexOf(colId) > -1
     },
     revertCell(row, colId) {
-      this.submitRowChange(merge({}, row, { [colId]: row._orig[colId] }))
+      this.submitRowChange(_.merge({}, row, { [colId]: row._orig[colId] }))
     }
   }
 }

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

@@ -4,40 +4,24 @@
   /** @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')
+@extends('table.propose.layout-row-pagination')
 
-@section('tab-content')
+@section('rows')
+  @php
+    $transformed = $rows->keyBy('_id')->map(function($r) use ($changeset) {
+      /** @var \App\Tables\Changeset $changeset */
+      return $changeset->transformRow($r, true);
+    });
+  @endphp
 
-  @if($rows->hasPages())
-    <div class="col-md-12 d-flex">
-      <nav class="text-center" aria-label="Pages of the table">
-        {{ $rows->links(null, ['ulClass' => 'mb-0']) }}
-      </nav>
-    </div>
-  @endif
-
-  <div class="col-12">
-    @php
-      $transformed = $rows->keyBy('_id')->map(function($r) use ($changeset) {
-        /** @var \App\Tables\Changeset $changeset */
-        return $changeset->transformRow($r, true);
-      });
-    @endphp
-
-    <table is="row-editor"
-           route="{{$table->getDraftRoute('update')}}"
-           :columns="{{toJSON($columns)}}"
-           :x-rows="{{toJSON($transformed)}}">
-    </table>
-  </div>
-
-  @if($rows->hasPages())
-    <div class="col-md-12 d-flex">
-      <nav class="text-center" aria-label="Pages of the table">
-        {{ $rows->links(null, ['ulClass' => 'mb-0']) }}
-      </nav>
-    </div>
-  @endif
+  <table is="row-editor"
+         route="{{$table->draftUpdateRoute}}"
+         :columns="{{toJSON($columns)}}"
+         :x-rows="{{toJSON($transformed)}}">
+  </table>
 @stop

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

@@ -0,0 +1,27 @@
+@php
+  /** @var \App\Models\Row[]|Illuminate\Pagination\Paginator $rows */
+@endphp
+
+@extends('table.propose.layout')
+
+@section('tab-content')
+  @if($rows->hasPages())
+    <div class="col-md-12 d-flex">
+      <nav class="text-center" aria-label="Pages of the table">
+        {{ $rows->links(null, ['ulClass' => 'mb-0']) }}
+      </nav>
+    </div>
+  @endif
+
+  <div class="col-12">
+    @yield('rows')
+  </div>
+
+  @if($rows->hasPages())
+    <div class="col-md-12 d-flex">
+      <nav class="text-center" aria-label="Pages of the table">
+        {{ $rows->links(null, ['ulClass' => 'mb-0']) }}
+      </nav>
+    </div>
+  @endif
+@stop

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

@@ -22,7 +22,7 @@ if (!isset($tab) || $tab == '') $tab = 'edit-rows';
     <h1 class="mx-3">
       <a href="{{ $table->viewRoute }}" class="link-no-color">{{ $table->title }}</a>
     </h1>
-    <a href="" class="btn btn-outline-danger mr-2" @tooltip(Discard changes)>
+    <a href="{{$table->draftDiscardRoute}}" class="btn btn-outline-danger mr-2" @tooltip(Discard changes)>
       @icon(fa-trash-o, sr:Discard)
     </a>
     @if(user()->ownsTable($table))