Add modal editing option rather than rows, add ability to save rows via javascript

Author: wilr

client/css/ManyField.css

@@ -1,3 +1,7 @@
 .many_field.inactive {
 	display: none;
 }
+
+.manyfield__outer.loading {
+	display: none;
+}

client/js/ManyField.src.js

@@ -31,6 +31,40 @@
 
     wrapManyFields()
 
+    $('body').on('change', '[data-inline-save] .field', function(e) {
+      // saves the record line
+      var parent = $(this).parents('[data-inline-save]');
+      var row = $(this).parents('.row');
+      var url = parent.attr('data-inline-save');
+      var csrf = $('input[name=SecurityID]').val();
+      var data = [];
+
+      row.find('[name]').each(function(i, field) {
+        var name = $(field).attr('name');
+        var value = null;
+
+        if ($(field).is(':checkbox')) {
+          value = $(field).is(":checked");
+        } else {
+          value = $(field).val();
+        }
+
+        data.push({
+          name: name.substr(name.indexOf('[') + 1, name.indexOf(']') - (name.indexOf('[') + 1)),
+          value: value
+        })
+      })
+
+      data.push({
+        name: 'SecurityID',
+        value: csrf
+      })
+
+      $.post(url, $.param(data), function() {
+        //..
+      });
+    })
+
     $('body').on('click', '.manyfield__add a', function(e) {
       e.preventDefault();
 
@@ -40,29 +74,125 @@
 
       $.get($(this).attr('href'), { index: parents.find('.manyfield__row').length }, function(data) {
         var rows = parents.find('.manyfield__row').last()
-        
-        if (rows && rows.length) {
-          rows.after(data)
+
+        // if this is the inline modal version then we want to open that in
+        // a popup
+        if (parents.hasClass('manyfieldmodal')) {
+          // find the add modal, set the content to that and open it.
+          var id = parents.attr('id');
+          var modal = $("#" + id + '_modal');
+
+          modal.find('.modal-body').html($(data)
+            .find('.CompositeField')
+            .removeClass('manyfield__row').html()
+          );
+
+          modal.modal('show');
         } else {
-          parents.find('.manyfield__outer').append(data)
-        }
+          if (rows && rows.length) {
+            rows.after(data)
+          } else {
+            parents.find('.manyfield__outer').append(data)
+          }
 
-        wrapManyFields()
+          wrapManyFields()
+        }
 
         $('body').trigger('manyFieldAdded', {
           parents
         })
       })
     })
 
+    /**
+     *
+     */
     $('body').on('click', '.manyfield__remove', function() {
       var parent = $(this).parents('.manyfield__row')
 
+      if (parent.length < 1) {
+        parent = $(this).parents('[data-many-id]');
+      }
+
       parent.remove()
 
+      if ($(this).attr('href')) {
+        $.post($(this).attr('href'));
+      }
+
       $('body').trigger('manyFieldRemoved', {
         parent
       })
+
+      return false;
+    })
+
+    /**
+     *
+     */
+    $('body').on('click', '.manyfield__save', function(e) {
+      var form = $(this).parents('.modal-content').find('form');
+
+      if (form.checkValidity()) {
+        var body = $(this).parents('.modal-content').find('.modal-body')
+          .addClass('loading')
+
+        $.post(form.attr('action'), form.serialize(), function(reply) {
+          // reply should be the updated content for
+          form.parents('.manyfield__holder').html(reply);
+          body.html('');
+        })
+      } else {
+        e.preventDefault();
+      }
+    })
+
+    /**
+     *
+     */
+    $('body').on('click', '.manyfieldmodal .manyfield__outer > div', function() {
+      var parents = $(this).parents('.manyfieldmodal');
+      var recordId = $(this).data('many-id');
+
+      // find the add modal, set the content to that and open it.
+      var id = parents.attr('id');
+      var modal = $('#' + id + '_modal');
+
+      $.get(modal.data('form-url'), {RecordID: recordId}, function(data) {
+        modal.find('.modal-body').html(data).removeClass('loading');
+        modal.modal('show');
+      });
+    })
+
+    /**
+     * Ajax load results.
+     */
+    function populateViaAjax(holder) {
+      var outer = holder.find('.manyfield__outer');
+      var form = holder.parents('form');
+
+      outer.addClass('loading');
+
+
+      $.get(holder.data('ajax-url'), form.serialize(), function(rows) {
+        outer
+          .html($(rows).find('.manyfield__outer').html())
+          .removeClass('loading');
+
+        $('body').trigger('manyFieldLoaded', {
+          holder
+        })
+      })
+    }
+
+    $('.manyfield__holder[data-ajax-url]').each(function(i, elem) {
+      populateViaAjax($(elem));
+
+      var form = $(elem).parents('form');
+
+      $('body').on('change', '[data-updates-manyfield='+ $(elem).attr('id') + ']', function(e) {
+        populateViaAjax($(elem));
+      })
     })
   })
 })(jQuery)