Bug 1139148 - Save bug data offline

lib/app.js

@@ -32,7 +32,6 @@ App.prototype.init = function() {
       this.emit('login', details.login);
       this.emit('init');
     }.bind(this)).catch(function() {
-      localStorage.user = '';
       this.emit('logout');
       this.emit('init');
     }.bind(this));

lib/views/create-bug.js

@@ -1,20 +1,28 @@
 'use strict';
 
 var filesize = require('filesize');
+var localforage = require('localforage');
 
 var tpl = require('../template.js');
 var utils = require('../utils.js');
 var conf = require('../config.js');
 
 var form;
-var attachments = [];
+
+var KEY = 'bugData';
+
+var bug = {
+  summary: null,
+  description: null,
+  attachments: []
+};
 
 function value(selector) {
   return document.querySelector(selector).value.trim();
 }
 
 function deleteAttachment(e) {
-  attachments = attachments.filter(function(file) {
+  bug.attachments = bug.attachments.filter(function(file) {
     return file.name !== e.target.dataset.name;
   });
   drawAttachments();
@@ -37,7 +45,7 @@ function previewAttachment(file) {
 function drawAttachments() {
   tpl.read('/views/attachment-row.tpl').then(function(row) {
     var frag = document.createDocumentFragment();
-    attachments.map(function(file) {
+    bug.attachments.map(function(file) {
       var types = ['image/png', 'image/jpg', 'image/jpeg'];
       var dom = row.cloneNode(true);
       var a = dom.querySelector('a');
@@ -74,11 +82,12 @@ function inputChanged(e) {
     var reader = new FileReader();
     reader.onload = (function(theFile) {
       return function(e) {
-        attachments.push({
+        bug.attachments.push({
           name: theFile.name,
           type: theFile.type,
           data: e.target.result.split(',')[1]
         });
+        bugChanged();
         drawAttachments();
       }
     })(file);
@@ -92,17 +101,41 @@ function addAttachments(blobs, names) {
     var reader = new window.FileReader();
     reader.readAsDataURL(blob);
     reader.onloadend = function() {
-      attachments.push({
+      bug.attachments.push({
         name: names[i],
         type: blob.type,
         data: reader.result
       });
+      bugChanged();
       drawAttachments();
     }
   });
 }
 
 
+var timeout;
+function bugChanged() {
+  if (timeout) {
+    clearTimeout(timeout);
+  }
+  timeout = setTimeout(updateBugData, 1000);
+}
+
+
+function updateBugData() {
+  bug.summary = value('#summary');
+  bug.description = value('#description');
+  localforage.setItem(KEY, bug);
+}
+
+
+function updateFromBugData(el) {
+  el.querySelector('#summary').value = bug.summary;
+  el.querySelector('#description').value = bug.description;
+  drawAttachments();
+}
+
+
 function formSubmitted(e) {
 
   e.preventDefault();
@@ -114,24 +147,26 @@ function formSubmitted(e) {
     component: ((conf.version === 1) ? 'Gaia' : value('#component')),
     op_sys: 'All',
     platform: 'All',
-    summary: value('#summary'),
-    description: value('#description'),
+    summary: bug.summary,
+    description: bug.description,
     version: 'unspecified'
   }).then(function(result) {
     var id = result.id;
     var self = this;
     function createAttachments() {
-      if (!attachments.length) {
-        dialog.close();
-        utils.toaster('Bug Submitted');
-        if (conf.version === 1) {
-          self.app.page('/create/');
-        } else {
-          self.app.page('/bug/' + result.id);
-        }
+      if (!bug.attachments.length) {
+        localforage.setItem(KEY, null).then(function() {
+          dialog.close();
+          utils.toaster('Bug Submitted');
+          if (conf.version === 1) {
+            self.app.page('/create/');
+          } else {
+            self.app.page('/bug/' + result.id);
+          }
+        });
         return;
       }
-      var file = attachments.pop();
+      var file = bug.attachments.pop();
       self.app.bugzilla.createAttachment(id, {
         ids: [id],
         data: file.data,
@@ -158,22 +193,31 @@ function CreateBug(app) {
 };
 
 CreateBug.prototype.render = function(ctx) {
-  return tpl.read('/views/create_bug.tpl').then((function(_form) {
-
+  var self = this;
+  return tpl.read('/views/create_bug.tpl').then(function(_form) {
     form = _form;
-
-    if (this.app.activity) {
-      addAttachments(this.app.activity.data.blobs, this.app.activity.data.filenames);
-      this.app.activity = null;
+    return localforage.getItem(KEY);
+  }).then(function(data) {
+
+    // Activity data overrides locally stored data for now
+    var activity = self.app.activity;
+    if (activity) {
+      addAttachments(activity.data.blobs, activity.data.filenames);
+      self.app.activity = null;
+    } else if (data) {
+      bug = data;
+      updateFromBugData(form);
     }
 
     [].forEach.call(form.querySelectorAll('input[type=file]'), function(file) {
-      file.addEventListener('change', inputChanged.bind(this));
+      file.addEventListener('change', inputChanged.bind(self));
     });
-    form.addEventListener('submit', formSubmitted.bind(this));
+
+    form.addEventListener('input', bugChanged);
+    form.addEventListener('submit', formSubmitted.bind(self));
 
     return form;
-  }).bind(this));
+  });
 };
 
 module.exports = function (app) {

package.json

@@ -29,6 +29,7 @@
     "mocha": "^2.1.0",
     "wd": "^0.3.11",
     "envify": "^3.3.1",
-    "filesize": "^3.1.2"
+    "filesize": "^3.1.2",
+    "localforage": "^1.2.2"
   }
 }