Port liaison submission/editing to Bootstrap, revamp the select related widget to use select2 rather than the longish popup table

 - Legacy-Id: 8738

Author: OleLaursen

ietf/liaisons/fields.py

@@ -0,0 +1,50 @@
+import json
+
+from django.utils.html import escape
+from django import forms
+from django.core.urlresolvers import reverse as urlreverse
+
+from ietf.liaisons.models import LiaisonStatement
+
+def select2_id_liaison_json(objs):
+    return json.dumps([{ "id": o.pk, "text": escape(o.title) } for o in objs])
+
+class SearchableLiaisonStatementField(forms.IntegerField):
+    """Server-based multi-select field for choosing liaison statements using
+    select2.js."""
+
+    def __init__(self, hint_text="Type in title to search for document", *args, **kwargs):
+        super(SearchableLiaisonStatementField, self).__init__(*args, **kwargs)
+
+        self.widget.attrs["class"] = "select2-field"
+        self.widget.attrs["data-placeholder"] = hint_text
+        self.widget.attrs["data-max-entries"] = 1
+
+    def prepare_value(self, value):
+        if not value:
+            value = None
+        elif isinstance(value, LiaisonStatement):
+            value = value
+        else:
+            value = LiaisonStatement.objects.exclude(approved=None).filter(pk=value).first()
+
+        self.widget.attrs["data-pre"] = select2_id_liaison_json([value] if value else [])
+
+        # doing this in the constructor is difficult because the URL
+        # patterns may not have been fully constructed there yet
+        self.widget.attrs["data-ajax-url"] = urlreverse("ajax_select2_search_liaison_statements")
+
+        return value
+
+    def clean(self, value):
+        value = super(SearchableLiaisonStatementField, self).clean(value)
+
+        if value == None:
+            return None
+
+        obj = LiaisonStatement.objects.filter(pk=value).first()
+        if not obj and self.required:
+            raise forms.ValidationError(u"You must select a value.")
+
+        return obj
+

ietf/liaisons/forms.py

@@ -11,11 +11,13 @@
                                     get_person_for_user, is_secretariat, is_sdo_liaison_manager)
 from ietf.liaisons.utils import IETFHM
 from ietf.liaisons.widgets import (FromWidget, ReadOnlyWidget, ButtonWidget,
-                                   ShowAttachmentsWidget, RelatedLiaisonWidget)
+                                   ShowAttachmentsWidget)
 from ietf.liaisons.models import LiaisonStatement, LiaisonStatementPurposeName
+from ietf.liaisons.fields import SearchableLiaisonStatementField
 from ietf.group.models import Group, Role
 from ietf.person.models import Person, Email
 from ietf.doc.models import Document
+from ietf.utils.fields import DatepickerDateField
 
 
 class LiaisonForm(forms.Form):
@@ -28,8 +30,9 @@ class LiaisonForm(forms.Form):
     technical_contact = forms.CharField(required=False, max_length=255)
     cc1 = forms.CharField(widget=forms.Textarea, label="CC", required=False, help_text='Please insert one email address per line')
     purpose = forms.ChoiceField()
-    deadline_date = forms.DateField(label='Deadline')
-    submitted_date = forms.DateField(label='Submission date', initial=datetime.date.today())
+    related_to = SearchableLiaisonStatementField(label=u'Related Liaison Statement', required=False)
+    deadline_date = DatepickerDateField(date_format="yyyy-mm-dd", picker_settings={"autoclose": "1" }, label='Deadline', required=True)
+    submitted_date = DatepickerDateField(date_format="yyyy-mm-dd", picker_settings={"autoclose": "1" }, label='Submission date', required=True, initial=datetime.date.today())
     title = forms.CharField(label=u'Title')
     body = forms.CharField(widget=forms.Textarea, required=False)
     attachments = forms.CharField(label='Attachments', widget=ShowAttachmentsWidget, required=False)
@@ -40,13 +43,12 @@ class LiaisonForm(forms.Form):
                                                         require=['id_attach_title', 'id_attach_file'],
                                                         required_label='title and file'),
                                     required=False)
-    related_to = forms.ModelChoiceField(LiaisonStatement.objects.all(), label=u'Related Liaison', widget=RelatedLiaisonWidget, required=False)
 
     fieldsets = [('From', ('from_field', 'replyto')),
                  ('To', ('organization', 'to_poc')),
                  ('Other email addresses', ('response_contact', 'technical_contact', 'cc1')),
                  ('Purpose', ('purpose', 'deadline_date')),
-                 ('References', ('related_to', )),
+                 ('Reference', ('related_to', )),
                  ('Liaison Statement', ('title', 'submitted_date', 'body', 'attachments')),
                  ('Add attachment', ('attach_title', 'attach_file', 'attach_button')),
                 ]
@@ -80,7 +82,7 @@ def __init__(self, user, *args, **kwargs):
             self.initial["title"] = self.instance.title
             self.initial["body"] = self.instance.body
             self.initial["attachments"] = self.instance.attachments.all()
-            self.initial["related_to"] = self.instance.related_to_id
+            self.initial["related_to"] = self.instance.related_to
             if "approved" in self.fields:
                 self.initial["approved"] = bool(self.instance.approved)
 

ietf/liaisons/models.py

@@ -49,4 +49,4 @@ def name(self):
         return slugify("liaison" + " " + self.submitted.strftime("%Y-%m-%d") + " " + frm[:50] + " " + to[:50] + " " + self.title[:115])
 
     def __unicode__(self):
-        return self.title or u"<no title>"
+        return self.title

ietf/liaisons/urls.py

@@ -5,7 +5,7 @@
 
 urlpatterns = patterns('',
      (r'^help/$', TemplateView.as_view(template_name='liaisons/help.html')),
-     (r'^help/fields/$', TemplateView.as_view(template_name='liaisons/field_help.html')),
+     url(r'^help/fields/$', TemplateView.as_view(template_name='liaisons/field_help.html'), name="liaisons_field_help"),
      (r'^help/from_ietf/$', TemplateView.as_view(template_name='liaisons/guide_from_ietf.html')),
      (r'^help/to_ietf/$', TemplateView.as_view(template_name='liaisons/guide_to_ietf.html')),
      (r'^managers/$', RedirectView.as_view(url='http://www.ietf.org/liaison/managers.html')),
@@ -18,6 +18,6 @@
      url(r'^for_approval/$', 'liaison_approval_list', name='liaison_approval_list'),
      url(r'^for_approval/(?P<object_id>\d+)/$', 'liaison_approval_detail', name='liaison_approval_detail'),
      url(r'^add/$', 'add_liaison', name='add_liaison'),
-     url(r'^ajax/get_info/$', 'get_info'),
-     url(r'^ajax/liaison_list/$', 'ajax_liaison_list', name='ajax_liaison_list'),
+     url(r'^ajax/get_info/$', 'ajax_get_liaison_info'),
+     url(r'^ajax/select2search/$', 'ajax_select2_search_liaison_statements', name='ajax_select2_search_liaison_statements'),
 )

ietf/liaisons/views.py

@@ -16,6 +16,7 @@
 from ietf.liaisons.forms import liaison_form_factory
 from ietf.liaisons.utils import IETFHM, can_submit_liaison_required, approvable_liaison_statements
 from ietf.liaisons.mails import notify_pending_by_email, send_liaison_by_email
+from ietf.liaisons.fields import select2_id_liaison_json
 
 
 
@@ -44,7 +45,7 @@ def add_liaison(request, liaison=None):
 
 
 @can_submit_liaison_required
-def get_info(request):
+def ajax_get_liaison_info(request):
     person = get_person_for_user(request.user)
 
     to_entity_id = request.GET.get('to_entity_id', None)
@@ -110,14 +111,20 @@ def liaison_list(request):
         "sort": sort,
     }, context_instance=RequestContext(request))
 
-def ajax_liaison_list(request):
-    sort, order_by = normalize_sort(request)
-    liaisons = LiaisonStatement.objects.exclude(approved=None).order_by(order_by)
+def ajax_select2_search_liaison_statements(request):
+    q = [w.strip() for w in request.GET.get('q', '').split() if w.strip()]
 
-    return render_to_response('liaisons/liaison_table.html', {
-        "liaisons": liaisons,
-        "sort": sort,
-    }, context_instance=RequestContext(request))
+    if not q:
+        objs = LiaisonStatement.objects.none()
+    else:
+        qs = LiaisonStatement.objects.exclude(approved=None).all()
+
+        for t in q:
+            qs = qs.filter(title__icontains=t)
+
+        objs = qs.distinct().order_by("-id")[:20]
+
+    return HttpResponse(select2_id_liaison_json(objs), content_type='application/json')
 
 @can_submit_liaison_required
 def liaison_approval_list(request):

ietf/liaisons/widgets.py

@@ -1,12 +1,9 @@
 from django.conf import settings
-from django.core.urlresolvers import reverse as urlreverse
 from django.db.models.query import QuerySet
-from django.forms.widgets import Select, Widget, TextInput
+from django.forms.widgets import Select, Widget
 from django.utils.safestring import mark_safe
 from django.utils.html import conditional_escape
 
-from ietf.liaisons.models import LiaisonStatement
-
 
 class FromWidget(Select):
 
@@ -28,7 +25,7 @@ def render(self, name, value, attrs=None, choices=()):
             value = option[0]
             text = option[1]
             base = u'<input type="hidden" value="%s" id="id_%s" name="%s" />%s' % (conditional_escape(value), conditional_escape(name), conditional_escape(name), conditional_escape(text))
-        base += u' (<a class="from_mailto" href="">' + conditional_escape(self.submitter) + u'</a>)'
+        base += u' <a class="from_mailto form-control" href="">' + conditional_escape(self.submitter) + u'</a>'
         if self.full_power_on:
             base += '<div style="display: none;" class="reducedToOptions">'
             for from_code in self.full_power_on:
@@ -40,9 +37,8 @@ def render(self, name, value, attrs=None, choices=()):
 
 
 class ReadOnlyWidget(Widget):
-
     def render(self, name, value, attrs=None):
-        html = u'<div id="id_%s">%s</div>' % (conditional_escape(name), conditional_escape(value or ''))
+        html = u'<div id="id_%s" class="form-control" style="height: auto; min-height: 34px;">%s</div>' % (conditional_escape(name), conditional_escape(value or ''))
         return mark_safe(html)
 
 
@@ -63,49 +59,20 @@ def render(self, name, value, attrs=None):
                 html += u'<span style="display: none" class="attachRequiredField">%s</span>' % conditional_escape(i)
             required_str = u'Please fill in %s to attach a new file' % conditional_escape(self.required_label)
             html += u'<span style="display: none" class="attachDisabledLabel">%s</span>' % conditional_escape(required_str)
-        html += u'<input type="button" class="addAttachmentWidget" value="%s" />' % conditional_escape(self.label)
+        html += u'<input type="button" class="addAttachmentWidget btn btn-primary btn-sm" value="%s" />' % conditional_escape(self.label)
         return mark_safe(html)
 
 
 class ShowAttachmentsWidget(Widget):
 
     def render(self, name, value, attrs=None):
         html = u'<div id="id_%s">' % name
-        html += u'<span style="display: none" class="showAttachmentsEmpty">No files attached</span>'
-        html += u'<div class="attachedFiles">'
+        html += u'<span style="display: none" class="showAttachmentsEmpty form-control" style="height: auto; min-height: 34px;">No files attached</span>'
+        html += u'<div class="attachedFiles form-control" style="height: auto; min-height: 34px;">'
         if value and isinstance(value, QuerySet):
             for attachment in value:
                 html += u'<a class="initialAttach" href="%s%s">%s</a><br />' % (settings.LIAISON_ATTACH_URL, conditional_escape(attachment.external_url), conditional_escape(attachment.title))
         else:
             html += u'No files attached'
         html += u'</div></div>'
         return mark_safe(html)
-
-
-class RelatedLiaisonWidget(TextInput):
-
-    def render(self, name, value, attrs=None):
-        if not value:
-            value = ''
-            title = ''
-            noliaison = 'inline'
-            deselect = 'none'
-        else:
-            liaison = LiaisonStatement.objects.get(pk=value)
-            title = liaison.title
-            if not title:
-                attachments = liaison.attachments.all()
-                if attachments:
-                    title = attachments[0].title
-                else:
-                    title = 'Liaison #%s' % liaison.pk
-            noliaison = 'none'
-            deselect = 'inline'
-        html = u'<span class="noRelated" style="display: %s;">No liaison selected</span>' % conditional_escape(noliaison)
-        html += u'<span class="relatedLiaisonWidgetTitle">%s</span>' % conditional_escape(title)
-        html += u'<input type="hidden" name="%s" class="relatedLiaisonWidgetValue" value="%s" /> ' % (conditional_escape(name), conditional_escape(value))
-        html += u'<span style="display: none;" class="listURL">%s</span> ' % urlreverse('ajax_liaison_list')
-        html += u'<div style="display: none;" class="relatedLiaisonWidgetDialog" id="related-dialog" title="Select a liaison"></div> '
-        html += '<input type="button" id="id_%s" value="Select liaison" /> ' % conditional_escape(name)
-        html += '<input type="button" style="display: %s;" id="id_no_%s" value="Deselect liaison" />' % (conditional_escape(deselect), conditional_escape(name))
-        return mark_safe(html)

ietf/templates/liaisons/edit.html

@@ -1,34 +1,65 @@
-{% extends "base.html" %}
-{# Copyright The IETF Trust 2007, All Rights Reserved #}
-{% load ietf_filters %}
+{% extends "ietf.html" %}
+
+{% load bootstrap3 %}
+
 {% block title %}{% if liaison %}Edit liaison: {{ liaison }}{% else %}Send Liaison Statement{% endif %}{% endblock %}
 
 {% block pagehead %}
-<link rel="stylesheet" type="text/css" href="/css/liaisons.css"></link>
-<link rel="stylesheet" type="text/css" href="/css/jquery-ui-themes/jquery-ui-1.8.11.custom.css"></link>
+  <link rel="stylesheet" href="/facelift/css/lib/datepicker3.css"></link>
+  <link rel="stylesheet" href="/facelift/css/lib/select2.css">
+  <link rel="stylesheet" href="/facelift/css/lib/select2-bootstrap.css">
 {% endblock %}
 
 {% block content %}
+
 <h1>{% if liaison %}Edit liaison: {{ liaison }}{% else %}Send Liaison Statement{% endif %}</h1>
 
+{% bootstrap_messages %}
+
+{% if form.errors %}
+  <div class="alert alert-danger">
+    <p>There were errors in the submitted form -- see below. Please correct these and resubmit.</p>
+  </div>
+{% endif %}
+
+{% bootstrap_form_errors form %}
+
 <noscript class="js-info">
-This page depends on Javascript being enabled to work properly. Please enable Javascript and reload the page.
+  This page depends on Javascript being enabled to work properly. Please enable Javascript and reload the page.
 </noscript>
 
 {% if not liaison %}
-<ul>
-  <li>If you wish to submit your liaison statement by e-mail, then please send it to <a href="mailto:statements@ietf.org">statements@ietf.org</a></li>
-  <li>Fields marked with <span class="fieldRequired">*</span> are required. For detailed descriptions of the fields see <a href="/liaison/help/fields/">Field help</a></li>
-</ul>
+  <p class="help-block">If you wish to submit your liaison statement by e-mail, then please send it to <a href="mailto:statements@ietf.org">statements@ietf.org</a></p>
+
+  <p class="help-block">Fields marked with <label class="required"></label> are required. For detailed descriptions of the fields see the <a href="{% url "liaisons_field_help" %}">field help</a>.</p>
 {% endif %}
 
-{# Replace the form expansion with an include as a temporary workaround for missing CSRF tokens #}
-{# {{ form }} #}
-{% include "liaisons/liaisonform.html" %}
+<form role="form" class="liaisons form-horizontal" method="post" enctype="multipart/form-data" data-ajax-info-url="{% url "ietf.liaisons.views.ajax_get_liaison_info" %}">{% csrf_token %}
+
+  {% for fieldset in form.get_fieldsets %}
+    <h2>{{ fieldset.name }}</h2>
+
+    {% for field in fieldset.fields %}
+      {% bootstrap_field field layout="horizontal" %}
+    {% endfor %}
+  {% endfor %}
+
+  {% buttons %}
+  <a class="btn btn-danger pull-right" href="{% url "liaison_list" %}">Cancel</a>
+
+  {% if not liaison %}
+    <button name="send" type="submit" class="btn btn-primary">Send and post</button>
+    <button name="post_only" type="submit" class="btn btn-default">Post only</button>
+  {% else %}
+    <button name="save" type="submit" class="btn btn-primary">Save</button>
+  {% endif %}
+  {% endbuttons %}
+</form>
 
 {% endblock %}
 
 {% block js %}
-  <script type="text/javascript" src="/js/jquery-ui-1.9.0.custom/minified/jquery-ui.custom.min.js"></script>
-  <script type="text/javascript" src="/js/liaisons.js"></script>
+  <script src="/facelift/js/lib/bootstrap-datepicker.js"></script>
+  <script src="/facelift/js/lib/select2-3.5.2.min.js"></script>
+  <script src="/facelift/js/liaisons.js"></script>
 {% endblock %}