Add option to create new collection from the collection menu (#225)

frontend/vre/collection/select-collection.view.js

@@ -1,6 +1,8 @@
+import _ from 'lodash';
 import Backbone from 'backbone';
 import { AggregateView } from '../core/view.js';
 
+import { vreChannel } from '../radio.js';
 import optionDBTemplate from './select-collection-option.view.mustache';
 import selectDBTemplate from './select-collection.view.mustache';
 
@@ -40,11 +42,29 @@ export var SelectCollectionView = AggregateView.extend({
     className: 'dropdown',
     subview: CollectionOptionView,
     container: 'ul',
+    events: {
+        'submit .dropdown-menu form': 'createCollection',
+    },
     initialize: function() {
         this.initItems().render().initCollectionEvents();
     },
     renderContainer: function() {
-        this.$el.html(this.template());
+        this.$el.html(this.template(this));
+        return this;
+    },
+    placeItems: function() {
+        this._container.prepend(_.map(this.items, 'el'));
         return this;
     },
+    createCollection: function(event) {
+        event.preventDefault();
+        var project = vreChannel.request('projects:current');
+        var input = this.$('.dropdown-menu form input');
+        var name = input.val();
+        this.collection.create({
+            name: name,
+            project: project.get('name'),
+        });
+        input.val('');
+    },
 });

frontend/vre/collection/select-collection.view.mustache

@@ -1,4 +1,24 @@
 <a href="" class="dropdown-toggle" data-toggle="dropdown"
     id="collection-menu-title" aria-haspopup="true" aria-expanded="false">Collections <span class="caret"></span>
 </a>
-<ul class="dropdown-menu"></ul>
+<ul class="dropdown-menu">
+    <li role=separator class="divider"></li>
+    <li>
+        <form class="form-inline">
+            <div class="form-group">
+                 <label for=collection-name-{{&cid}} class="sr-only">
+                      Name
+                 </label>
+                 <input
+                     type=text
+                     id=collection-name-{{&cid}}
+                     placeholder="Name"
+                     class="form-control"
+                 >
+            </div>
+            <button type=submit class="btn btn-primary btn-sm" aria-label="Create">
+                <span class="glyphicon glyphicon-plus" aria-hidden=true></span>
+            </button>
+        </form>
+    </li>
+</ul>

frontend/vre/css/style.css

@@ -53,6 +53,11 @@ form.form-inline.inline-editor {
     display: inline-block;
 }
 
+.dropdown-menu > li > form {
+    padding: 3px 20px;
+    width: max-content;
+}
+
 @media (prefers-color-scheme: dark) {
     html {
         filter: invert(1) hue-rotate(180deg) contrast(0.9) brightness(0.9);