use control-group for add-rows widget, fix paginator overflowing with hundreds of items

app/Tables/Changeset.php

@@ -619,9 +619,19 @@ class Changeset
             return $c->cast(null);
         })->all();
 
+        foreach ($this->newColumns as $k => $obj) {
+            $cols[] = $c = new Column($obj);
+            $c->markAsNew();
+
+            $emptyTpl[$k] = $c->cast(null);
+        }
+
         $this->newRows = array_filter($this->newRows, function ($r) use ($emptyTpl) {
-            $emptyTpl['_id'] = $r['_id'];
-            return $emptyTpl != $r;
+            foreach ($r as $k => $val) {
+                if ($k[0] == '_') continue;
+                if ($val != $emptyTpl[$k]) return true;
+            }
+            return false;
         });
     }
 }

resources/assets/js/components/RowsEditor.vue

@@ -11,36 +11,43 @@ Rows are identified by row._id, columns by col.id
 
 <template>
   <div>
-    <div class="col-md-12 d-flex mt-3">
-      <div v-if="hasPages" v-html="pager"></div>
-
+    <div class="col-md-12 d-flex flex-wrap">
+      <div class="mt-3">
+        <div v-if="hasPages" v-html="pager"></div>
+      </div>
       <div class="flex-grow-1"></div>
 
-      <form :action="route" method="POST" v-if="newRows" class="form-inline mr-2">
-        <input type="hidden" name="_token" :value="csrf">
-        <input type="hidden" name="action" value="rows.add">
-        <input type="hidden" name="redirect" :value="pageUrl">
-        <input name="count" id="newrow-count" type="number"
-               min=1 step=1 value=1 class="form-control mr-1" style="width: 8em">
-        <button class="btn btn-outline-success">Add Rows</button>
-      </form>
-
-      <a :href="loadCsvUrl" class="btn btn-outline-success mr-2" v-if="newRows && loadCsvUrl">
-        <v-icon class="fa-file-excel-o fa-pr" alt="CSV"></v-icon><!--
-        -->CSV
-      </a>
-
-      <form :action="route" method="POST" v-if="newRows" class="form-inline mr-2">
-        <input type="hidden" name="_token" :value="csrf">
-        <input type="hidden" name="action" value="row.remove-empty-new">
-        <input type="hidden" name="redirect" :value="pageUrl">
-        <button class="btn btn-outline-danger">Remove Empty</button>
-      </form>
-
-      <button @click="saveAllChanges" type="button"
-              :class="['btn', this.dirtyRows ? 'btn-info' : 'btn-outline-secondary']">
-        Save Rows
-      </button>
+      <div class="d-flex flex-nowrap mt-3">
+        <form :action="route" method="POST" v-if="newRows" class="form-inline mr-2">
+          <input type="hidden" name="_token" :value="csrf">
+          <input type="hidden" name="action" value="rows.add">
+          <input type="hidden" name="redirect" :value="pageUrl">
+          <div class="input-group">
+            <input name="count" id="newrow-count" type="number"
+                   min=1 step=1 value=1 class="form-control" style="width: 6em">
+            <div class="input-group-append">
+              <button class="btn btn-outline-success">Add Rows</button>
+            </div>
+          </div>
+        </form>
+
+        <a :href="loadCsvUrl" class="btn btn-outline-success mr-2" v-if="newRows && loadCsvUrl">
+          <v-icon class="fa-file-excel-o fa-pr" alt="CSV"></v-icon><!--
+          -->CSV
+        </a>
+
+        <form :action="route" method="POST" v-if="newRows" class="form-inline mr-2">
+          <input type="hidden" name="_token" :value="csrf">
+          <input type="hidden" name="action" value="row.remove-empty-new">
+          <input type="hidden" name="redirect" :value="pageUrl">
+          <button class="btn btn-outline-danger">Remove Empty</button>
+        </form>
+
+        <button @click="saveAllChanges" type="button"
+                :class="['btn', this.dirtyRows ? 'btn-info' : 'btn-outline-secondary']">
+          Save Rows
+        </button>
+      </div>
     </div>
 
     <div class="col-md-12 mt-3">