Replace the component bounded `cachedValue` by a global `UnsavedEdits`

This new draft saving system is currently only implemented for the
card description and comment. We need better a component
inheritance/composition model to support this for all editable fields.

Fixes #186

1 files changed, 78 insertions, 0 deletions

diff --git a/client/lib/inlinedform.js b/client/lib/inlinedform.js
new file mode 100644
index 00000000..15074f40
--- /dev/null
+++ b/client/lib/inlinedform.js
@@ -0,0 +1,78 @@
+// A inlined form is used to provide a quick edition of single field for a given
+// document. Clicking on a edit button should display the form to edit the field
+// value. The form can then be submited, or just closed.
+//
+// When the form is closed we save non-submitted values in memory to avoid any
+// data loss.
+//
+// Usage:
+//
+//   +inlineForm
+//     // the content when the form is open
+//   else
+//     // the content when the form is close (optional)
+
+// We can only have one inlined form element opened at a time
+currentlyOpenedForm = new ReactiveVar(null);
+
+InlinedForm = BlazeComponent.extendComponent({
+  template: function() {
+    return 'inlinedForm';
+  },
+
+  onCreated: function() {
+    this.isOpen = new ReactiveVar(false);
+  },
+
+  onDestroyed: function() {
+    currentlyOpenedForm.set(null);
+  },
+
+  open: function() {
+    // Close currently opened form, if any
+    EscapeActions.executeUpTo('inlinedForm');
+    this.isOpen.set(true);
+    currentlyOpenedForm.set(this);
+  },
+
+  close: function() {
+    this.isOpen.set(false);
+    currentlyOpenedForm.set(null);
+  },
+
+  getValue: function() {
+    var input = this.find('textarea,input[type=text]');
+    return this.isOpen.get() && input && input.value;
+  },
+
+  events: function() {
+    return [{
+      'click .js-close-inlined-form': this.close,
+      'click .js-open-inlined-form': this.open,
+
+      // Pressing Ctrl+Enter should submit the form
+      'keydown form textarea': function(evt) {
+        if (evt.keyCode === 13 && (evt.metaKey || evt.ctrlKey)) {
+          this.find('button[type=submit]').click();
+        }
+      },
+
+      // Close the inlined form when after its submission
+      submit: function() {
+        if (this.currentData().autoclose !== false) {
+          Tracker.afterFlush(() => {
+            this.close();
+          });
+        }
+      }
+    }];
+  }
+}).register('inlinedForm');
+
+// Press escape to close the currently opened inlinedForm
+EscapeActions.register('inlinedForm',
+  function() { currentlyOpenedForm.get().close(); },
+  function() { return currentlyOpenedForm.get() !== null; }, {
+    noClickEscapeOn: '.js-inlined-form'
+  }
+);