From 3f23fc06ccd16b04fb40ffc79c1627ed2589344b Mon Sep 17 00:00:00 2001
From: Christian Glatthard <christian.glatthard@students.fhnw.ch>
Date: Tue, 11 Aug 2015 22:50:17 +0200
Subject: [PATCH] make select input fields searchable

---
 ipynbsrv/web/templates/web/base_generic.html  | 16 +++-
 .../web/collaborationgroups/index.html        |  1 +
 .../collaborationgroups/modal_addusers.html   | 20 ++--
 .../web/containers/modal_create.html          | 14 +--
 .../templates/web/images/modal_create.html    | 14 +--
 .../web/notifications/modal_create.html       | 92 +++++++++++--------
 .../templates/web/shares/modal_addgroups.html | 17 ++--
 .../templates/web/shares/modal_addusers.html  | 21 +++--
 ipynbsrv/web/views/collaborationgroups.py     |  2 -
 9 files changed, 114 insertions(+), 83 deletions(-)

diff --git a/ipynbsrv/web/templates/web/base_generic.html b/ipynbsrv/web/templates/web/base_generic.html
index a3e24e0..b601ad1 100644
--- a/ipynbsrv/web/templates/web/base_generic.html
+++ b/ipynbsrv/web/templates/web/base_generic.html
@@ -18,10 +18,24 @@
 <script src="{% static 'bower_components/jquery/dist/jquery.min.js' %}"></script>
 <script src="{% static 'bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
 <script src="{% static 'js/bootstrap-multiselect.js' %}"></script>
-<script>
+<script type="text/javascript">
 $(function () {
     $('[data-tooltip]').tooltip();
 });
+
+$(document).ready(function() {
+    $('.enableMultiselectCaseInsensitiveFiltering').multiselect({
+        enableCaseInsensitiveFiltering: true,
+        includeSelectAllOption: true,
+        selectAllValue: 'select-all-value',
+        disableIfEmpty: true
+    });
+
+    $('.enableCaseInsensitiveFiltering').multiselect({
+        enableCaseInsensitiveFiltering: true,
+        disableIfEmpty: true
+    });
+});
 </script>
 {% block js %}{% endblock %}
 </html>
diff --git a/ipynbsrv/web/templates/web/collaborationgroups/index.html b/ipynbsrv/web/templates/web/collaborationgroups/index.html
index 77dd0cc..965d107 100644
--- a/ipynbsrv/web/templates/web/collaborationgroups/index.html
+++ b/ipynbsrv/web/templates/web/collaborationgroups/index.html
@@ -115,6 +115,7 @@ <h1>Groups</h1>
     $('[data-toggle="modal"]').click(function (e) {
         var btn   = $(e.target);
         var modal = btn.data('target');
+        //bootstrap_multiselect_init();
 
         switch (modal) {
             case "#modal-share-adduser": {
diff --git a/ipynbsrv/web/templates/web/collaborationgroups/modal_addusers.html b/ipynbsrv/web/templates/web/collaborationgroups/modal_addusers.html
index 4827a46..81d3fa6 100644
--- a/ipynbsrv/web/templates/web/collaborationgroups/modal_addusers.html
+++ b/ipynbsrv/web/templates/web/collaborationgroups/modal_addusers.html
@@ -12,16 +12,16 @@ <h4 class="modal-title">Add users</h4>
                 <div class="modal-body">
 
                     <div class="form-group">
-                        <label for="recipient">Members</label>
-                            {% for user in users %}
-                                {% if user.backend_user and user.backend_user.id not in group.member_ids %}
-                                <div class="checkbox">
-                                  <label><input name="users" type="checkbox" value="{{ user.id }}">{{ user.username }}</label>
-                                </div>
-                                {% endif %}
-
-                            {% endfor %}
-                        </select>
+                        <label for="users">Members</label>
+                        <div class="select">
+                            <select class="enableMultiselectCaseInsensitiveFiltering" multiple="multiple" name="users">
+                                {% for user in users %}
+                                    {% if user.backend_user and user.backend_user.id not in group.member_ids %}
+                                        <option value="{{ user.id }}">{{ user.username }}</option>
+                                    {% endif %}
+                                {% endfor %}
+                            </select>
+                        </div>
                     </div>
                 </div>
                 <div class="modal-footer">
diff --git a/ipynbsrv/web/templates/web/containers/modal_create.html b/ipynbsrv/web/templates/web/containers/modal_create.html
index 32c2f7c..0eb0299 100644
--- a/ipynbsrv/web/templates/web/containers/modal_create.html
+++ b/ipynbsrv/web/templates/web/containers/modal_create.html
@@ -20,12 +20,14 @@ <h4 class="modal-title">New container</h4>
                     </div>
                     <div class="form-group">
                         <label for="image">Image</label>
-                        <select name="image_id" class="form-control" required>
-                            <option></option>
-                            {% for img in images %}
-                                <option value="{{ img.id }}">{{ img.friendly_name }}</option>
-                            {% endfor %}
-                        </select>
+                        <div class="select">
+	                        <select name="image_id" class="form-control enableCaseInsensitiveFiltering" required>
+	                            <option>None</option>
+	                            {% for img in images %}
+	                                <option value="{{ img.id }}">{{ img.friendly_name }}</option>
+	                            {% endfor %}
+	                        </select>
+	                    </div>
                     </div>
                 </div>
                 <div class="modal-footer">
diff --git a/ipynbsrv/web/templates/web/images/modal_create.html b/ipynbsrv/web/templates/web/images/modal_create.html
index 865e5d3..3ba0380 100644
--- a/ipynbsrv/web/templates/web/images/modal_create.html
+++ b/ipynbsrv/web/templates/web/images/modal_create.html
@@ -12,12 +12,14 @@ <h4 class="modal-title">New image</h4>
                 <div class="modal-body">
                     <div class="form-group">
                         <label for="ct_id">Base container</label>
-                        <select name="ct_id" class="form-control" required>
-                            <option></option>
-                            {% for ct in containers %}
-                                <option value="{{ ct.id }}"{% if ct == selected %} selected{% endif %}>{{ ct.name }}</option>
-                            {% endfor %}
-                        </select>
+                        <div class="select">
+	                        <select name="ct_id" class="form-control enableCaseInsensitiveFiltering" required>
+	                            <option>None</option>
+	                            {% for ct in containers %}
+	                                <option value="{{ ct.id }}"{% if ct == selected %} selected{% endif %}>{{ ct.name }}</option>
+	                            {% endfor %}
+	                        </select>
+	                    </div>
                     </div>
                     <div class="form-group">
                         <label for="img_name">Name</label>
diff --git a/ipynbsrv/web/templates/web/notifications/modal_create.html b/ipynbsrv/web/templates/web/notifications/modal_create.html
index fe8c67d..e8a7811 100644
--- a/ipynbsrv/web/templates/web/notifications/modal_create.html
+++ b/ipynbsrv/web/templates/web/notifications/modal_create.html
@@ -12,73 +12,85 @@ <h4 class="modal-title">New notification</h4>
                 <div class="modal-body">
                     <div class="form-group">
                         <label for="receiver_groups">Receiving Group</label>
-                        <select class="form-control" name="receiver_groups">
-                            <option></option>
-                            {% for group in groups %}
-                                {% if not group.is_single_user_group %}
-                                    <option value="{{ group.id }}">{{ group.name }}</option>
-                                {% endif %}
-                            {% endfor %}
-                        </select>
+                        <div class="select">
+	                        <select class="form-control enableCaseInsensitiveFiltering" name="receiver_groups">
+	                        <option>None</option>
+	                            {% for group in groups %}
+	                                {% if not group.is_single_user_group %}
+	                                    <option value="{{ group.id }}">{{ group.name }}</option>
+	                                {% endif %}
+	                            {% endfor %}
+	                        </select>
+	                    </div>
                     </div>
                     <div class="form-group">
                         <label for="type">Notification Type</label>
-                        <select class="form-control" name="notification_type">
-                            <option></option>
-                            {% for n1, n2 in notification_types %}
-                                <option value="{{ n1 }}">{{ n2 }}</option>
+                        <div class="select">
+	                        <select class="form-control enableCaseInsensitiveFiltering" name="notification_type">
+	                        	<option>None</option>
+	                            {% for n1, n2 in notification_types %}
+	                                <option value="{{ n1 }}">{{ n2 }}</option>
 
-                            {% endfor %}
-                        </select>
+	                            {% endfor %}
+	                        </select>
+	                    </div>
 
                     </div>
                     <div class="form-group">
                         <label for="type">Container</label>
-                        <select class="form-control" name="container">
-                            <option></option>
-                            {% for c in containers %}
-                                <option value="{{ c.id }}">{{ c.name }}</option>
+                        <div class="select">
+	                        <select class="form-control enableCaseInsensitiveFiltering" name="container">
+	                            <option>None</option>
+	                            {% for c in containers %}
+	                                <option value="{{ c.id }}">{{ c.name }}</option>
 
-                            {% endfor %}
-                        </select>
+	                            {% endfor %}
+	                        </select>
+	                    </div>
 
                     </div>
 
                     <div class="form-group">
                         <label for="type">Container Image</label>
-                        <select class="form-control" name="container_image">
-                            <option></option>
-                            {% for ci in container_images %}
-                                <option value="{{ ci.id }}">{{ ci.name }}</option>
+                        <div class="select">
+	                        <select class="form-control enableCaseInsensitiveFiltering" name="container_image">
+	                            <option>None</option>
+	                            {% for ci in container_images %}
+	                                <option value="{{ ci.id }}">{{ ci.name }}</option>
 
-                            {% endfor %}
-                        </select>
+	                            {% endfor %}
+	                        </select>
+	                    </div>
 
                     </div>
 
 
                     <div class="form-group">
                         <label for="type">Group</label>
-                        <select class="form-control" name="group">
-                            <option></option>
-                            {% for g in groups %}
-                                {% if not group.is_single_user_group %}
-                                    <option value="{{ g.id }}">{{ g.name }}</option>
-                                {% endif %}
-                            {% endfor %}
-                        </select>
+                        <div class="select">
+	                        <select class="form-control enableCaseInsensitiveFiltering" name="group">
+	                            <option>None</option>
+	                            {% for g in groups %}
+	                                {% if not group.is_single_user_group %}
+	                                    <option value="{{ g.id }}">{{ g.name }}</option>
+	                                {% endif %}
+	                            {% endfor %}
+	                        </select>
+	                    </div>
 
                     </div>
 
                     <div class="form-group">
                         <label for="type">Share</label>
-                        <select class="form-control" name="share">
-                            <option></option>
-                            {% for s in shares %}
-                                <option value="{{ s.id }}">{{ s.name }}</option>
+                        <div class="select">
+	                        <select class="form-control enableCaseInsensitiveFiltering" name="share">
+	                            <option>None</option>
+	                            {% for s in shares %}
+	                                <option value="{{ s.id }}">{{ s.name }}</option>
 
-                            {% endfor %}
-                        </select>
+	                            {% endfor %}
+	                        </select>
+	                    </div>
 
                     </div>
 
diff --git a/ipynbsrv/web/templates/web/shares/modal_addgroups.html b/ipynbsrv/web/templates/web/shares/modal_addgroups.html
index 82bb457..3732cf5 100644
--- a/ipynbsrv/web/templates/web/shares/modal_addgroups.html
+++ b/ipynbsrv/web/templates/web/shares/modal_addgroups.html
@@ -11,17 +11,18 @@ <h4 class="modal-title">Add share user</h4>
                 {% csrf_token %}
                 <input id="modal-share-adduser_id" type="hidden" name="id" value="{{ id }}">
                 <div class="modal-body">
+
                     <div class="form-group">
                         <label for="access_groups">Groups</label>
-                            {% for group in groups %}
+                        <div class="select">
+                            <select class="enableMultiselectCaseInsensitiveFiltering" multiple="multiple" name="access_groups">
+                                {% for group in groups %}
                                 {% if group not in share.access_groups and not group.is_single_user_group %}
-                                <div class="checkbox">
-                                  <label><input name="access_groups" type="checkbox" value="{{ group.id }}">{{ group.name }}</label>
-                                </div>
-                                {% endif %}
-
-                            {% endfor %}
-                        </select>
+                                        <option value="{{ group.id }}">{{ group.name }}</option>
+                                    {% endif %}
+                                {% endfor %}
+                            </select>
+                        </div>
                     </div>
 
                 </div>
diff --git a/ipynbsrv/web/templates/web/shares/modal_addusers.html b/ipynbsrv/web/templates/web/shares/modal_addusers.html
index 49f6aae..b0998d4 100644
--- a/ipynbsrv/web/templates/web/shares/modal_addusers.html
+++ b/ipynbsrv/web/templates/web/shares/modal_addusers.html
@@ -11,19 +11,20 @@ <h4 class="modal-title">Add share user</h4>
                 {% csrf_token %}
                 <input id="modal-share-adduser_id" type="hidden" name="id" value="{{ id }}">
                 <div class="modal-body">
-                    <div class="form-group">
-                        <label for="recipient">Users</label>
-                            {% for user in users %}
+
+                <div class="form-group">
+                        <label for="access_groups">Groups</label>
+                        <div class="select">
+                            <select class="enableMultiselectCaseInsensitiveFiltering" multiple="multiple" name="access_groups">
+                                {% for user in users %}
                                 {% if user.backend_user.collab_group %}
-                                    {% if user.backend_user.collab_group not in share.access_groups %}
-                                    <div class="checkbox">
-                                      <label><input name="access_groups" type="checkbox" value="{{ user.backend_user.collab_group.id }}">{{ user.backend_user.collab_group.name }}</label>
-                                    </div>
+                                    {% if user.backend_user.collab_group not in share.access_groups and user != request.user %}
+                                        <option value="{{ user.backend_user.collab_group.id }}">{{ user.backend_user.collab_group.name }}</option>
                                     {% endif %}
                                 {% endif %}
-
-                            {% endfor %}
-                        </select>
+                                {% endfor %}
+                            </select>
+                        </div>
                     </div>
                 </div>
                 <div class="modal-footer">
diff --git a/ipynbsrv/web/views/collaborationgroups.py b/ipynbsrv/web/views/collaborationgroups.py
index 3132c4a..8848f82 100644
--- a/ipynbsrv/web/views/collaborationgroups.py
+++ b/ipynbsrv/web/views/collaborationgroups.py
@@ -190,8 +190,6 @@ def add_members(request):
     users = request.POST.getlist('users')
     group_id = request.POST.get('group_id')
 
-    print(users)
-
     client = get_httpclient_instance(request)
 
     user_list = []