reload collections, and spin button

Author: Thomas Rueckstiess

package.json

@@ -30,7 +30,8 @@
       "ampersand-state",
       "scout-server",
       "glob",
-      "electron-squirrel-startup"
+      "electron-squirrel-startup",
+      "ipc"
     ]
   },
   "fonts": [

src/sidebar/instance-properties.jade

@@ -10,5 +10,5 @@ div.instance-properties
     span.num-collections
       strong(data-hook='num-collections')
       |  Collections
-    button.refresh-collections
-      i.fa.fa-repeat
+    button.refresh-collections(data-hook='refresh-button')
+      i.fa(data-hook='refresh-icon')

src/sidebar/instance-properties.js

@@ -1,6 +1,7 @@
 var View = require('ampersand-view');
 var app = require('ampersand-app');
 // var debug = require('debug')('scout:sidebar:instace-properties');
+var _ = require('lodash');
 
 var InstancePropertiesView = module.exports = View.extend({
   template: require('./instance-properties.jade'),
@@ -9,7 +10,11 @@ var InstancePropertiesView = module.exports = View.extend({
     version: 'string',
     numDatabases: 'number',
     numCollections: 'number',
-    instance: 'state'
+    instance: 'state',
+    is_fetching: {
+      type: 'boolean',
+      default: true
+    }
   },
   bindings: {
     'instance.host.hostname': {
@@ -27,14 +32,31 @@ var InstancePropertiesView = module.exports = View.extend({
     numDatabases: {
       type: 'text',
       hook: 'num-databases'
+    },
+    is_fetching: {
+      type: 'booleanClass',
+      hook: 'refresh-icon',
+      yes: ['fa-refresh', 'fa-spin'],
+      no: 'fa-repeat'
     }
   },
+  events: {
+    'click button[data-hook=refresh-button]': 'onRefreshButtonClicked'
+  },
   initialize: function() {
     this.listenTo(app.instance, 'sync', this.onInstanceFetched);
   },
   onInstanceFetched: function() {
+    // delay switching the spinner back to static for 500ms, otherwise the reload is not noticable
+    _.delay(function() {
+      this.is_fetching = false;
+    }.bind(this), 500);
     this.numDatabases = app.instance.databases.length;
     this.numCollections = app.instance.collections.length;
+  },
+  onRefreshButtonClicked: function() {
+    app.instance.fetch();
+    this.is_fetching = true;
   }
 });