🐛 Edit existing connection, fix flow control bugs

Author: imlucas

src/connect/connect-form-view.js

@@ -1,4 +1,3 @@
-var app = require('ampersand-app');
 var FormView = require('ampersand-form-view');
 var InputView = require('./input-view');
 var Connection = require('../models/connection');
@@ -9,6 +8,11 @@ require('bootstrap/js/popover');
 require('bootstrap/js/tooltip');
 
 var ConnectFormView = FormView.extend({
+  props: {
+    connection_id: {
+      type: 'string'
+    }
+  },
   namespace: 'ConnectFormView',
   /**
    * callback when user hits submit (or presses enter). Run some general checks here
@@ -17,6 +21,9 @@ var ConnectFormView = FormView.extend({
    * @param {Object} obj     contains the clean()'ed up data from the form.
    */
   submitCallback: function(obj) {
+    if (this.connection_id !== '') {
+      obj._id = this.connection_id;
+    }
     debug('form submitted', obj);
     this.parent.onFormSubmitted(new Connection(obj));
   },

src/connect/index.js

@@ -189,6 +189,14 @@ var ConnectView = View.extend({
   onAuthTabClicked: function(evt) {
     this.authMethod = $(evt.target).data('method');
   },
+  createNewConnection: function() {
+    debug('new connection requested');
+    this.reset();
+    this.form.connection_id = '';
+    this.form.reset();
+    this.authMethod = null;
+    this.authOpen = false;
+  },
 
   /**
    * Triggers when the auth methods has changed (or set back to null)
@@ -221,21 +229,15 @@ var ConnectView = View.extend({
    * a list item like in `./sidebar`.
    *
    * @param {Connection} model
-   * @param {Object} [options]
-   * @option {Boolean} close - Close the connect dialog on success [Default: `false`].
    * @api public
    */
-  connect: function(model, options) {
-    options = _.defaults(options || {}, {
-      close: false
-    });
-
+  connect: function(model) {
     app.statusbar.show();
 
     debug('testing credentials are usable...');
     model.test(function(err) {
       if (!err) {
-        this.onConnectionSuccessful(model, options);
+        this.onConnectionSuccessful(model);
         return;
       }
 
@@ -256,7 +258,7 @@ var ConnectView = View.extend({
           this.onError(new Error('Could not connect to MongoDB.'), model);
           return;
         }
-        this.onConnectionSuccessful(model, options);
+        this.onConnectionSuccessful(model);
       }.bind(this));
     }.bind(this));
   },
@@ -266,13 +268,12 @@ var ConnectView = View.extend({
    * view using it.
    *
    * @param {Connection} model
-   * @param {Object} [options]
    * @api private
    */
-  onConnectionSuccessful: function(model, options) {
-    options = _.defaults(options, {
-      close: true
-    });
+  onConnectionSuccessful: function(model) {
+    app.statusbar.hide();
+    this.form.connection_id = '';
+
     /**
      * The save method will handle calling the correct method
      * of the sync being used by the model, whether that's
@@ -301,9 +302,7 @@ var ConnectView = View.extend({
       message: ''
     }), 500);
 
-    if (options.close) {
-      setTimeout(window.close, 1000);
-    }
+    setTimeout(window.close, 1000);
   },
   /**
    * If there is a validation or connection error show a nice message.
@@ -350,6 +349,7 @@ var ConnectView = View.extend({
 
     if (!model.isValid()) {
       this.onError(model.validationError);
+      return;
     }
 
     this.connect(model);
@@ -363,7 +363,7 @@ var ConnectView = View.extend({
    * @api public
    */
   onConnectionSelected: function(model) {
-    // If the new model has auth, expand the auth options container
+    // If the new model has auth, expand the auth settings container
     // and select the correct tab.
     this.authMethod = model.auth_mechanism;
 
@@ -385,6 +385,8 @@ var ConnectView = View.extend({
     debug('Populating form fields with keys', keys);
     var values = _.pick(model, keys);
 
+    this.form.connection_id = model.getId();
+
     // Populates the form from values in the model.
     this.form.setValues(values);
   },

src/connect/sidebar.jade

@@ -1,6 +1,11 @@
 div
   .sidebar.panel
     .panel-heading(style='padding: 10px;')
-      .panel-title Saved Connections
-    ul.list-group(data-hook='connection-list', style='top: 32px;')
+      .panel-title Recent Connections
+    ul.list-group(data-hook='connection-list', style='top: 32px;position: initial;')
+    ul.list-group(data-hook='connection-list-controls', style='top: initial;')
+      li.list-group-item
+        a(href="#new-connection", data-hook="new-connection")
+          i.fa.fa-fw.fa-plus
+          | New Connection
   .sidebar-bg

src/connect/sidebar.js

@@ -46,10 +46,10 @@ var SidebarItemView = View.extend({
   },
   template: require('./connection.jade'),
   onClick: function(event) {
-    this.parent.onItemClick(event, this.model);
+    this.parent.onItemClick(event, this);
   },
   onDoubleClick: function(event) {
-    this.parent.onItemDoubleClick(event, this.model);
+    this.parent.onItemDoubleClick(event, this);
   },
   onCloseClick: function(event) {
     event.stopPropagation();
@@ -69,20 +69,44 @@ var SidebarItemView = View.extend({
  * Renders all existing connections as list in the sidebar.
  */
 var SidebarView = View.extend({
+  session: {
+    active_item_view: {
+      type: 'state'
+    }
+  },
+  events: {
+    'click a[data-hook=new-connection]': 'onNewConnectionClick'
+  },
   namespace: 'SidebarView',
   template: require('./sidebar.jade'),
   render: function() {
     this.renderWithTemplate();
     this.renderCollection(this.collection, SidebarItemView, this.queryByHook('connection-list'));
   },
-  onItemClick: function(event, model) {
+  onNewConnectionClick: function(event) {
     event.stopPropagation();
     event.preventDefault();
-    this.parent.onConnectionSelected(model);
+
+    if (this.active_item_view) {
+      this.active_item_view.el.classList.remove('active');
+      this.active_item_view = null;
+    }
+    this.parent.createNewConnection();
+  },
+  onItemClick: function(event, view) {
+    event.stopPropagation();
+    event.preventDefault();
+    if (this.active_item_view) {
+      this.active_item_view.el.classList.remove('active');
+    }
+
+    this.active_item_view = view;
+    this.active_item_view.el.classList.add('active');
+    this.parent.onConnectionSelected(view.model);
   },
-  onItemDoubleClick: function(event, model) {
-    this.onItemClick(event, model);
-    this.parent.connect(model);
+  onItemDoubleClick: function(event, view) {
+    this.onItemClick(event, view);
+    this.parent.connect(view.model);
   }
 });
 

src/models/connection-collection.js

@@ -7,7 +7,9 @@ var restMixin = require('ampersand-collection-rest-mixin');
 module.exports = Collection.extend(lodashMixin, restMixin, {
   namespace: 'ConnectionCollection',
   model: Connection,
-  comparator: 'last_used',
+  comparator: function(model) {
+    return -model.last_used;
+  },
   mainIndex: '_id',
   sync: connectionSync
 });