From c372c1fa13f564e282480cb4859a5901c0597105 Mon Sep 17 00:00:00 2001
From: Michal Kolodziejski <michal.kolodziejski@cern.ch>
Date: Wed, 22 Jul 2015 10:20:42 +0200
Subject: [PATCH] Add folder name suggestions

---
 .gitmodules                                        |  6 +--
 ext_modules/jquery-typeahead                       |  1 +
 ext_modules/selectize.js                           |  1 -
 fabfile.py                                         | 15 +++---
 indico/modules/attachments/forms.py                | 12 +++--
 .../attachments/templates/create_folder.html       |  2 +-
 indico/modules/attachments/util.py                 | 21 ++++++++
 indico/modules/vc/forms.py                         |  6 +--
 indico/modules/vc/views.py                         |  4 +-
 indico/web/assets/bundles.py                       | 11 +---
 indico/web/forms/widgets.py                        | 31 +++++++-----
 indico/web/templates/forms/selectize_widget.html   | 41 ---------------
 indico/web/templates/forms/typeahead_widget.html   | 59 ++++++++++++++++++++++
 13 files changed, 124 insertions(+), 86 deletions(-)
 create mode 160000 ext_modules/jquery-typeahead
 delete mode 160000 ext_modules/selectize.js
 delete mode 100644 indico/web/templates/forms/selectize_widget.html
 create mode 100644 indico/web/templates/forms/typeahead_widget.html

diff --git a/.gitmodules b/.gitmodules
index 1a180c482..efcc9f3c9 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -41,12 +41,12 @@
 [submodule "ext_modules/zeroclipboard"]
 	path = ext_modules/zeroclipboard
 	url = https://github.com/zeroclipboard/zeroclipboard
-[submodule "ext_modules/selectize.js"]
-	path = ext_modules/selectize.js
-	url = https://github.com/brianreavis/selectize.js.git
 [submodule "ext_modules/Jed"]
 	path = ext_modules/Jed
 	url = https://github.com/SlexAxton/Jed.git
 [submodule "ext_modules/dropzone"]
 	path = ext_modules/dropzone
 	url = https://github.com/enyo/dropzone.git
+[submodule "ext_modules/jquery-typeahead"]
+	path = ext_modules/jquery-typeahead
+	url = https://github.com/running-coder/jquery-typeahead.git
diff --git a/ext_modules/jquery-typeahead b/ext_modules/jquery-typeahead
new file mode 160000
index 000000000..65561994d
--- /dev/null
+++ b/ext_modules/jquery-typeahead
@@ -0,0 +1 @@
+Subproject commit 65561994de1e14c2c89847386fd951b792e47524
diff --git a/ext_modules/selectize.js b/ext_modules/selectize.js
deleted file mode 160000
index cff8cd3b7..000000000
--- a/ext_modules/selectize.js
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit cff8cd3b76559bf8e5ce14254d07e719445034c1
diff --git a/fabfile.py b/fabfile.py
index 2e35b8f14..9dc328b03 100644
--- a/fabfile.py
+++ b/fabfile.py
@@ -376,15 +376,14 @@ def install_dropzone_js():
         local('cp dist/dropzone.css {0}/'.format(dest_css_dir))
 
 
-@recipe('selectize.js')
-def install_selectize_js():
-    with lcd(os.path.join(env.ext_dir, 'selectize.js')):
-        dest_js_dir = os.path.join(lib_dir(env.src_dir, 'js'), 'selectize.js/')
-        dest_css_dir = os.path.join(lib_dir(env.src_dir, 'css'), 'selectize.js/')
+@recipe('jquery-typeahead')
+def install_jquery_typeahead():
+    with lcd(os.path.join(env.ext_dir, 'jquery-typeahead')):
+        dest_js_dir = lib_dir(env.src_dir, 'js')
+        dest_css_dir = lib_dir(env.src_dir, 'css')
         local('mkdir -p {0} {1}'.format(dest_js_dir, dest_css_dir))
-        local('cp dist/js/standalone/selectize.js {0}/'.format(dest_js_dir))
-        local('cp dist/css/selectize.css {0}/'.format(dest_css_dir))
-        local('cp dist/css/selectize.default.css {0}/'.format(dest_css_dir))
+        local('cp src/jquery.typeahead.js {0}'.format(dest_js_dir))
+        local('cp src/jquery.typeahead.css {0}'.format(dest_css_dir))
 
 
 # Tasks
diff --git a/indico/modules/attachments/forms.py b/indico/modules/attachments/forms.py
index ddb854b97..aea051bff 100644
--- a/indico/modules/attachments/forms.py
+++ b/indico/modules/attachments/forms.py
@@ -16,21 +16,23 @@
 
 from __future__ import unicode_literals
 
+
 from wtforms.ext.sqlalchemy.fields import QuerySelectField
 from wtforms.ext.dateutil.fields import DateField
 from wtforms.fields import BooleanField, TextAreaField
 from wtforms.fields.html5 import URLField
-from wtforms.fields.simple import StringField
+from wtforms.fields.simple import StringField, HiddenField
 from wtforms.validators import DataRequired, Optional
 
 from indico.core.db import db
 from indico.core.db.sqlalchemy.protection import ProtectionMode
 from indico.modules.attachments.models.folders import AttachmentFolder
+from indico.modules.attachments.util import get_default_folder_names
 from indico.util.i18n import _
 from indico.web.forms.base import IndicoForm, generated_data
 from indico.web.forms.fields import PrincipalListField, IndicoSelectMultipleCheckboxField
 from indico.web.forms.validators import UsedIf
-from indico.web.forms.widgets import SwitchWidget
+from indico.web.forms.widgets import SwitchWidget, TypeaheadWidget
 
 
 class AttachmentFormBase(IndicoForm):
@@ -81,7 +83,7 @@ class EditAttachmentLinkForm(AttachmentLinkFormMixin, EditAttachmentFormBase):
 
 
 class AttachmentFolderForm(IndicoForm):
-    title = StringField(_("Name"), [DataRequired()], description=_("The name of the folder."))
+    title = HiddenField(_("Name"), [DataRequired()], description=_("The name of the folder."), widget=TypeaheadWidget())
     description = TextAreaField(_("Description"), description=_("Description of the folder and its content"))
     protected = BooleanField(_("Protected"), widget=SwitchWidget())
     acl = PrincipalListField(_("Grant Access To"), [UsedIf(lambda form, field: form.protected.data)],
@@ -92,6 +94,10 @@ class AttachmentFolderForm(IndicoForm):
                                                    "access them. You can disable this behavior here, hiding the folder "
                                                    "for anyone who does not have permission to access it."))
 
+    def __init__(self, *args, **kwargs):
+        super(AttachmentFolderForm, self).__init__(*args, **kwargs)
+        self.title.choices = [{'name': value} for value in get_default_folder_names()]
+
     @generated_data
     def protection_mode(self):
         return ProtectionMode.protected if self.protected.data else ProtectionMode.inheriting
diff --git a/indico/modules/attachments/templates/create_folder.html b/indico/modules/attachments/templates/create_folder.html
index 275ec9434..8afdac1bf 100644
--- a/indico/modules/attachments/templates/create_folder.html
+++ b/indico/modules/attachments/templates/create_folder.html
@@ -6,7 +6,7 @@
     {{ form_rows(form, fields=('protected', 'acl')) }}
     {{ protection_message | safe }}
     {% call form_footer(attach_form) %}
-        <input class="i-button big highlight" type="submit" value="{% trans %}Submit{% endtrans %}">
+        <input class="i-button big highlight" data-disabled-until-change type="submit" value="{% trans %}Submit{% endtrans %}">
         <button class="i-button big" data-button-back>{% trans %}Cancel{% endtrans %}</button>
     {% endcall %}
     <script>
diff --git a/indico/modules/attachments/util.py b/indico/modules/attachments/util.py
index 90732242b..73d1a1c5a 100644
--- a/indico/modules/attachments/util.py
+++ b/indico/modules/attachments/util.py
@@ -107,3 +107,24 @@ def can_manage_attachments(obj, user):
     if isinstance(obj, SubContribution):
         return can_manage_attachments(obj.getContribution(), user)
     return obj.canModify(user.as_avatar) or obj.getAccessController().canUserSubmit(user.as_avatar)
+
+
+def get_default_folder_names():
+    return [
+        'Agenda',
+        'Document',
+        'Drawings',
+        'List of Actions',
+        'Minutes',
+        'Notes',
+        'Paper',
+        'Pictures',
+        'Poster',
+        'Proceedings',
+        'Recording',
+        'Slides',
+        'Summary',
+        'Text',
+        'Video',
+        'Webcast',
+    ]
diff --git a/indico/modules/vc/forms.py b/indico/modules/vc/forms.py
index fb1930965..dd27381d6 100644
--- a/indico/modules/vc/forms.py
+++ b/indico/modules/vc/forms.py
@@ -35,13 +35,13 @@ from indico.web.flask.util import url_for
 from indico.web.forms.base import IndicoForm, generated_data
 from indico.web.forms.fields import PrincipalListField, IndicoRadioField, EmailListField
 from indico.web.forms.validators import UsedIf, Exclusive
-from indico.web.forms.widgets import JinjaWidget, SwitchWidget, SelectizeWidget
+from indico.web.forms.widgets import JinjaWidget, SwitchWidget, TypeaheadWidget
 
 ROOM_NAME_RE = re.compile(r'[\w\-]+')
 
 
 class VCRoomField(HiddenField):
-    widget = SelectizeWidget()
+    widget = TypeaheadWidget(min_trigger_length=3)
 
     def process_formdata(self, valuelist):
         if valuelist and valuelist[0].isdigit():
@@ -111,7 +111,7 @@ class VCRoomAttachFormBase(VCRoomLinkFormBase):
 
     def __init__(self, *args, **kwargs):
         super(VCRoomAttachFormBase, self).__init__(*args, **kwargs)
-        self.room.search_url = url_for('.manage_vc_rooms_search', self.event, service=kwargs.pop('service'))
+        self.room.widget.search_url = url_for('.manage_vc_rooms_search', self.event, service=kwargs.pop('service'))
 
 
 class VCRoomFormBase(VCRoomLinkFormBase):
diff --git a/indico/modules/vc/views.py b/indico/modules/vc/views.py
index cb7b1dd94..3dda29b61 100644
--- a/indico/modules/vc/views.py
+++ b/indico/modules/vc/views.py
@@ -29,13 +29,11 @@ class WPVCManageEvent(WPVCJinjaMixin, WPConferenceModifBase):
 
     def getCSSFiles(self):
         return (WPConferenceModifBase.getCSSFiles(self) +
-                self._asset_env['vc_sass'].urls() +
-                self._asset_env['selectize_css'].urls())
+                self._asset_env['vc_sass'].urls())
 
     def getJSFiles(self):
         return (WPConferenceModifBase.getJSFiles(self) +
                 self._asset_env['modules_vc_js'].urls() +
-                self._asset_env['selectize_js'].urls() +
                 self._asset_env['zero_clipboard_js'].urls())
 
     def _setActiveSideMenuItem(self):
diff --git a/indico/web/assets/bundles.py b/indico/web/assets/bundles.py
index 9c54e4673..1db0701ba 100644
--- a/indico/web/assets/bundles.py
+++ b/indico/web/assets/bundles.py
@@ -233,13 +233,6 @@ dropzone_css = Bundle('css/lib/dropzone.js/dropzone.css',
                       'sass/custom/_dropzone.scss',
                       filters=('pyscss', 'cssmin'), output='css/dropzone_css_%(version)s.min.css')
 
-selectize_js = rjs_bundle('selectize_js',
-                          'js/lib/selectize.js/selectize.js')
-
-selectize_css = Bundle('css/lib/selectize.js/selectize.css',
-                       'css/lib/selectize.js/selectize.default.css',
-                       filters='cssmin', output='css/selectize_css_%(version)s.min.css')
-
 jquery = rjs_bundle('jquery', *filter(None, [
     'js/lib/underscore.js',
     'js/lib/jquery.js',
@@ -247,6 +240,7 @@ jquery = rjs_bundle('jquery', *filter(None, [
     'js/jquery/jquery-ui.js',
     'js/lib/jquery.multiselect.js',
     'js/lib/jquery.multiselect.filter.js',
+    'js/lib/jquery.typeahead.js',
     'js/jquery/jquery-migrate-silencer.js' if not Config.getInstance().getDebug() else None] +
     namespace('js/jquery',
 
@@ -433,7 +427,6 @@ def register_all_js(env):
     env.register('jqplot_js', jqplot_js)
     env.register('zero_clipboard_js', zero_clipboard_js)
     env.register('dropzone_js', dropzone_js)
-    env.register('selectize_js', selectize_js)
 
     for key, bundle in module_js.iteritems():
         env.register('modules_{}_js'.format(key), bundle)
@@ -450,6 +443,7 @@ def register_all_css(env, main_css_file):
                    'lib/jquery.qtip.css',
                    'lib/jquery.multiselect.css',
                    'lib/jquery.multiselect.filter.css',
+                   'lib/jquery.typeahead.css',
                    'jquery.colorbox.css',
                    'jquery-ui-custom.css',
                    'jquery.qtip-custom.css',
@@ -460,7 +454,6 @@ def register_all_css(env, main_css_file):
     env.register('base_css', base_css)
     env.register('indico_badges_css', indico_badges_css)
     env.register('jqplot_css', jqplot_css)
-    env.register('selectize_css', selectize_css)
     env.register('dropzone_css', dropzone_css)
 
     # SASS/SCSS
diff --git a/indico/web/forms/widgets.py b/indico/web/forms/widgets.py
index ee038db36..712d92493 100644
--- a/indico/web/forms/widgets.py
+++ b/indico/web/forms/widgets.py
@@ -135,27 +135,30 @@ class SyncedInputWidget(JinjaWidget):
             return self.default_widget(field, **kwargs)
 
 
-class SelectizeWidget(JinjaWidget):
+class TypeaheadWidget(JinjaWidget):
     """Renders a selectizer-based widget"""
 
-    def __init__(self):
-        super(SelectizeWidget, self).__init__('forms/selectize_widget.html')
+    def __init__(self, typeahead_options=None, min_trigger_length=0):
+        super(TypeaheadWidget, self).__init__('forms/typeahead_widget.html')
+        self.typeahead_options = typeahead_options or {}
+        self.min_trigger_length = min_trigger_length
 
     def __call__(self, field, **kwargs):
         choices = []
-        if field.data is not None:
-            choices.append({'name': field.data.name, 'id': field.data.id})
+
+        if hasattr(field, 'choices'):
+            choices.extend(field.choices)
 
         options = {
-            'valueField': 'id',
-            'labelField': 'name',
-            'searchField': 'name',
-            'persist': False,
-            'options': choices,
-            'create': False,
-            'maxItems': 1,
-            'closeAfterSelect': True
+            'hint': True,
+            'searchOnFocus': True,
+            'display': 'name',
+            'mustSelectItem': True,
+            'source': {
+                'data': choices
+            }
         }
 
         options.update(kwargs.pop('options', {}))
-        return super(SelectizeWidget, self).__call__(field, options=options)
+        options.update(self.typeahead_options)
+        return super(TypeaheadWidget, self).__call__(field, options=options)
diff --git a/indico/web/templates/forms/selectize_widget.html b/indico/web/templates/forms/selectize_widget.html
deleted file mode 100644
index 93f94bcf5..000000000
--- a/indico/web/templates/forms/selectize_widget.html
+++ /dev/null
@@ -1,41 +0,0 @@
-{% extends 'forms/base_widget.html' %}
-
-
-{% block html %}
-    <div class="form-row" data-tooltip-anchor>
-        <input id="typeahead-{{ field.id }}" id="room-name" class="typeahead" type="text" name="{{ field.name }}"
-               {%- if field.data is not none -%}value="{{ field._value() | tojson }}"{%- endif -%}>
-        <span></span>
-    </div>
-{% endblock %}
-
-
-{% block javascript %}
-    <script>
-        (function() {
-            'use strict';
-
-            var SEARCH_URL = {{ field.search_url | tojson}};
-
-            var params = {
-                load: function(query, callback) {
-                    if (query.length < 3) {
-                        return callback();
-                    }
-                    $.ajax(SEARCH_URL, {
-                        data: {q: query},
-                        cache: false
-                    }).fail(function() {
-                        callback();
-                    }).done(function(res) {
-                        callback(res);
-                    });
-                }
-            };
-
-            _.extend(params, {{ options | tojson }});
-
-            $('#typeahead-{{ field.id }}').selectize(params);
-        })();
-    </script>
-{% endblock %}
diff --git a/indico/web/templates/forms/typeahead_widget.html b/indico/web/templates/forms/typeahead_widget.html
new file mode 100644
index 000000000..842163ea6
--- /dev/null
+++ b/indico/web/templates/forms/typeahead_widget.html
@@ -0,0 +1,59 @@
+{% extends 'forms/base_widget.html' %}
+
+{% block html %}
+    <div class="form-row typeahead-container" data-tooltip-anchor>
+        <div class="typeahead-field">
+            <input id="{{ field.id }}-typeahead" autocomplete="off" class="typeahead" type="text"
+                   {%- if field.data is not none -%}value="{{ field._value() }}"{%- endif -%} name="{{ field.name }}">
+        </div>
+    </div>
+{% endblock %}
+
+{% block javascript %}
+    <script>
+        (function() {
+            'use strict';
+
+
+            {% if field.widget.search_url %}
+                $('#{{ field.id }}-typeahead').removeAttr('name');
+
+                var params = {
+                    minLength: {{ field.widget.min_trigger_length or 0 }},
+                    dynamic: true,
+                    source: {
+                        url: [{
+                            url: {{ field.widget.search_url | tojson }},
+                            data: {
+                                q: {% raw %} '{{query}}' {% endraw %}
+                            }
+                        }],
+                        data: {{ options.source.data | tojson }}
+                    },
+                    callback: {
+                        onClickAfter: function(node, a, item, event) {
+                            if (!item) {
+                                return;
+                            }
+
+                            var field = $('{{ field.id }}-typeahead');
+                            if (!field.length) {
+                                field = $('<input>', {
+                                    type: 'hidden',
+                                    name: {{ field.name | tojson }}
+                                });
+                            }
+
+                            field.val(item['id']);
+                            field.insertAfter($('#{{ field.id }}-typeahead'));
+                        }
+                    }
+                };
+            {% else %}
+                var params = {};
+            {% endif %}
+
+            $('#{{ field.id }}-typeahead').typeahead(_.extend({}, {{ options | tojson }}, params));
+        })();
+    </script>
+{% endblock %}
-- 
2.11.4.GIT