Edit All button in row editor

resources/assets/js/components/RowsEditor.vue

@@ -26,14 +26,14 @@ Rows are identified by row._id, columns by col.id
             <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>
+              <button class="btn btn-outline-success">Add</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
+          -->From CSV
         </a>
 
         <form :action="route" method="POST" v-if="newRows" class="form-inline mr-2">
@@ -43,8 +43,13 @@ Rows are identified by row._id, columns by col.id
           <button class="btn btn-outline-danger">Remove Empty</button>
         </form>
 
-        <button @click="saveAllChanges" type="button"
-                :class="['btn', this.dirtyRows ? 'btn-info' : ['btn-outline-secondary', 'disabled']]">
+        <button @click="editAll()" type="button" v-if="!newRows"
+                class="btn btn-outline-secondary mr-2">
+          Edit All
+        </button>
+
+        <button @click="saveAllChanges()" type="button"
+                :class="['btn', this.dirtyRows ? 'btn-info' : 'btn-outline-secondary']">
           Save Rows
         </button>
       </div>
@@ -316,9 +321,15 @@ Rows are identified by row._id, columns by col.id
       /** Save all changed rows */
       saveAllChanges () {
         let toChange = _.filter(this.rows, (r) => {
-          return this.isRowChanged(r)
+          let changed = this.isRowChanged(r)
+          if (!changed && r._editing) {
+            this.rows[r._id]._editing = false
+          }
+          return changed;
         })
 
+        if (toChange.length === 0) return;
+
         this.query({
           action: 'row.update-many',
           data: toChange
@@ -349,7 +360,13 @@ Rows are identified by row._id, columns by col.id
         this.$set(this.rows, row._id, row)
 
         if (wasDirty) this.dirtyRows--
+      },
+
+      editAll() {
+        _.each(this.rows, (row, id) => {
+          this.$set(this.rows[id], '_editing', true)
+        })
       }
-    }
+    },
   }
 </script>