Add fancy multichoice selector

Fixes #47

3 files changed, 67 insertions, 38 deletions

diff --git a/app/templates/macros/forms.html b/app/templates/macros/forms.html
index a2b75a7..b23711a 100644
--- a/app/templates/macros/forms.html
+++ b/app/templates/macros/forms.html
@@ -1,42 +1,68 @@
 {% macro render_field(field, label=None, label_visible=true, right_url=None, right_label=None) -%}
-    <div class="form-group {% if field.errors %}has-error{% endif %} {{ kwargs.pop('class_', '') }}">
-        {% if field.type != 'HiddenField' and label_visible %}
-            {% if not label %}{% set label=field.label.text %}{% endif %}
-            <label for="{{ field.id }}" class="control-label">{{ label|safe }}</label>
-        {% endif %}
-        {{ field(class_='form-control', **kwargs) }}
-        {% if field.errors %}
-            {% for e in field.errors %}
-                <p class="help-block">{{ e }}</p>
-            {% endfor %}
-        {% endif %}
-    </div>
+	<div class="form-group {% if field.errors %}has-error{% endif %} {{ kwargs.pop('class_', '') }}">
+		{% if field.type != 'HiddenField' and label_visible %}
+			{% if not label %}{% set label=field.label.text %}{% endif %}
+			<label for="{{ field.id }}" class="control-label">{{ label|safe }}</label>
+		{% endif %}
+		{{ field(class_='form-control', **kwargs) }}
+		{% if field.errors %}
+			{% for e in field.errors %}
+				<p class="help-block">{{ e }}</p>
+			{% endfor %}
+		{% endif %}
+	</div>
 {%- endmacro %}
 
+{% macro form_includes() -%}
+	<link href="/static/jquery-ui.min.css" rel="stylesheet" type="text/css">
+	<script src="/static/jquery.min.js"></script>
+	<script src="/static/jquery-ui.min.js"></script>
+	<script src="/static/tagselector.js"></script>
+{% endmacro %}
+
+{% macro render_multiselect_field(field, label=None, label_visible=true, right_url=None, right_label=None) -%}
+	<div class="form-group {% if field.errors %}has-error{% endif %} {{ kwargs.pop('class_', '') }}">
+		{% if field.type != 'HiddenField' and label_visible %}
+			{% if not label %}{% set label=field.label.text %}{% endif %}
+			<label for="{{ field.id }}" class="control-label">{{ label|safe }}</label>
+		{% endif %}
+		<div class="multichoice_selector">
+			<input type="text" placeholder="Start typing to see suggestions">
+			<div class="clearboth"></div>
+		</div>
+		{{ field(class_='form-control', **kwargs) }}
+		{% if field.errors %}
+			{% for e in field.errors %}
+				<p class="help-block">{{ e }}</p>
+			{% endfor %}
+		{% endif %}
+	</div>
+{% endmacro %}
+
 {% macro render_checkbox_field(field, label=None) -%}
-    {% if not label %}{% set label=field.label.text %}{% endif %}
-    <div class="checkbox">
-        <label>
-            {{ field(type='checkbox', **kwargs) }} {{ label }}
-        </label>
-    </div>
+	{% if not label %}{% set label=field.label.text %}{% endif %}
+	<div class="checkbox">
+		<label>
+			{{ field(type='checkbox', **kwargs) }} {{ label }}
+		</label>
+	</div>
 {%- endmacro %}
 
 {% macro render_radio_field(field) -%}
-    {% for value, label, checked in field.iter_choices() %}
-        <div class="radio">
-            <label>
-                <input type="radio" name="{{ field.id }}" id="{{ field.id }}" value="{{ value }}"{% if checked %} checked{% endif %}>
-                {{ label }}
-            </label>
-        </div>
-    {% endfor %}
+	{% for value, label, checked in field.iter_choices() %}
+		<div class="radio">
+			<label>
+				<input type="radio" name="{{ field.id }}" id="{{ field.id }}" value="{{ value }}"{% if checked %} checked{% endif %}>
+				{{ label }}
+			</label>
+		</div>
+	{% endfor %}
 {%- endmacro %}
 
 {% macro render_submit_field(field, label=None, tabindex=None) -%}
-    {% if not label %}{% set label=field.label.text %}{% endif %}
-    {#<button type="submit" class="form-control btn btn-default btn-primary">{{label}}</button>#}
-    <input type="submit" value="{{label}}"
-           {% if tabindex %}tabindex="{{ tabindex }}"{% endif %}
-           >
+	{% if not label %}{% set label=field.label.text %}{% endif %}
+	{#<button type="submit" class="form-control btn btn-default btn-primary">{{label}}</button>#}
+	<input type="submit" value="{{label}}"
+		   {% if tabindex %}tabindex="{{ tabindex }}"{% endif %}
+		   >
 {%- endmacro %}
diff --git a/app/templates/packages/create_edit.html b/app/templates/packages/create_edit.html
index 1ff8e63..fc3715a 100644
--- a/app/templates/packages/create_edit.html
+++ b/app/templates/packages/create_edit.html
@@ -10,7 +10,9 @@
 {% block content %}
 	<h2>Create Package</h2>
 
-	{% from "macros/forms.html" import render_field, render_submit_field %}
+	{% from "macros/forms.html" import render_field, render_submit_field, form_includes, render_multiselect_field %}
+	{{ form_includes() }}
+
 	<form method="POST" action="" class="tableform">
 		{{ form.hidden_tag() }}
 
@@ -20,9 +22,9 @@
 		{{ render_field(form.desc, class_="pkg_meta") }}
 		{{ render_field(form.type, class_="pkg_meta") }}
 		{{ render_field(form.license, class_="pkg_meta") }}
-		{{ render_field(form.tags, class_="pkg_meta") }}
-		{{ render_field(form.harddeps, class_="pkg_meta") }}
-		{{ render_field(form.softdeps, class_="pkg_meta") }}
+		{{ render_multiselect_field(form.tags, class_="pkg_meta") }}
+		{{ render_multiselect_field(form.harddeps, class_="pkg_meta") }}
+		{{ render_multiselect_field(form.softdeps, class_="pkg_meta") }}
 
 		<div class="pkg_wiz_1">
 			<p>Enter the repo URL for the package.
@@ -48,7 +50,6 @@
 	</form>
 
 	{% if enable_wizard %}
-		<script src="/static/jquery.min.js"></script>
 		<script src="/static/url.min.js"></script>
 		<script src="/static/polltask.js"></script>
 		<script src="/static/package_create.js"></script>
diff --git a/app/templates/packages/editrequest_create_edit.html b/app/templates/packages/editrequest_create_edit.html
index db3beb2..d245206 100644
--- a/app/templates/packages/editrequest_create_edit.html
+++ b/app/templates/packages/editrequest_create_edit.html
@@ -5,7 +5,9 @@
 {% endblock %}
 
 {% block content %}
-	{% from "macros/forms.html" import render_field, render_submit_field %}
+	{% from "macros/forms.html" import render_field, render_submit_field, form_includes, render_multiselect_field %}
+	{{ form_includes() }}
+
 	<form method="POST" action="">
 		{{ form.hidden_tag() }}
 
@@ -15,7 +17,7 @@
 		{{ render_field(form.desc) }}
 		{{ render_field(form.type) }}
 		{{ render_field(form.license) }}
-		{{ render_field(form.tags) }}
+		{{ render_multiselect_field(form.tags) }}
 		{{ render_field(form.repo) }}
 		{{ render_field(form.website) }}
 		{{ render_field(form.issueTracker) }}