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

client/components/cards/cardDetails.jade

@@ -34,11 +34,11 @@ template(name="cardDetails")
     //- XXX We should use "editable" to avoid repetiting ourselves
     if currentUser.isBoardMember
       h3.card-details-item-title Description
-      +inlinedForm(classNames="card-description js-card-description")
+      +inlinedCardDescription(classNames="card-description js-card-description")
         +editor(autofocus=true)
-          = description
+          | {{getUnsavedValue 'cardDescription' _id description}}
         .edit-controls.clearfix
-          button.primary(type="submit") {{_ 'edit'}}
+          button.primary(type="submit") {{_ 'save'}}
           a.fa.fa-times-thin.js-close-inlined-form
       else
         a.js-open-inlined-form
@@ -47,6 +47,12 @@ template(name="cardDetails")
               = description
           else
             | {{_ 'edit'}}
+        if (hasUnsavedValue 'cardDescription' _id)
+          p.quiet
+            | You have an unsaved description.
+            a.js-open-inlined-form View it
+            = ' - '
+            a.js-close-inlined-form Discard
     else if description
       h3.card-details-item-title Description
       +viewer

client/components/cards/cardDetails.js

@@ -1,7 +1,3 @@
-// XXX Obviously this shouldn't be a global, but this is currently the only way
-// to share a variable between two files.
-
-
 BlazeComponent.extendComponent({
   template: function() {
     return 'cardDetails';
@@ -80,6 +76,37 @@ BlazeComponent.extendComponent({
   }
 }).register('cardDetails');
 
+// We extends the normal InlinedForm component to support UnsavedEdits draft
+// feature.
+(class extends InlinedForm {
+  _getUnsavedEditKey() {
+    return {
+      fieldName: 'cardDescription',
+      docId: Session.get('currentCard'),
+    }
+  }
+
+  close(isReset = false) {
+    if (this.isOpen.get() && ! isReset) {
+      UnsavedEdits.set(this._getUnsavedEditKey(), this.getValue());
+    }
+    super();
+  }
+
+  reset() {
+    UnsavedEdits.reset(this._getUnsavedEditKey());
+    this.close(true);
+  }
+
+  events() {
+    const parentEvents = InlinedForm.prototype.events()[0];
+    return [{
+      ...parentEvents,
+      'click .js-close-inlined-form': this.reset,
+    }];
+  }
+}).register('inlinedCardDescription');
+
 Template.cardDetailsActionsPopup.events({
   'click .js-members': Popup.open('cardMembers'),
   'click .js-labels': Popup.open('cardLabels'),