Merge pull request #542 from Cadasta/enhancement/#441

Resolve #441: Improve relationship party selection widget

cadasta/core/static/css/main.scss

@@ -1177,8 +1177,7 @@ img.org-logo, img#org-logo {
   }
 }
 
-button#add-contact,
-button#add-party { // below contacts table and party table
+button#add-contact { // below contacts table
   padding: 0;
 }
 
@@ -1324,7 +1323,7 @@ div.add-btn-btm { // add party link at bottom of table
       min-width: 100px;
     }
   }
-  button#add-contact, button#add-party {
+  button#add-contact {
     background: transparent;
     color: $link-color !important;
     border: 0;
@@ -1380,3 +1379,38 @@ tr.contacts-error {
     background: $alert-warning-bg;
   }
 }
+
+/* =Party selection widget
+-------------------------------------------------------------- */
+
+#select-party {
+  label {
+    display: block;
+  }
+  #party-select {
+    width: 100%;
+  }
+  .select2 {
+    display: block;
+    margin: 0.5em 0;
+    width: 100%;
+  }
+  #add-party {
+    padding: 6px 18px;
+    .glyphicon {
+      opacity: 0.5;
+      padding-right: 8px;
+    }
+  }
+}
+
+.select2-container {
+  .party-name {
+    display: block;
+  }
+  .party-type {
+    display: block;
+    font-size: 0.85em;
+    opacity: 0.75;
+  }
+}

cadasta/spatial/tests/test_widgets.py

@@ -12,21 +12,22 @@ def test_render(self):
 
         widget = SelectPartyWidget(project=project)
         rendered = widget.render(name='name', value='value')
-        assert '<input type="hidden" name="name" value="value">' in rendered
-        assert ('<tr data-id="' + party_1.id + '"><td>' + party_1.name + ''
-                '</td><td>' + party_1.get_type_display() + '</td><tr>'
-                in rendered)
-        assert ('<tr data-id="' + party_2.id + '"><td>' + party_2.name + ''
-                '</td><td>' + party_2.get_type_display() + '</td><tr>'
-                in rendered)
+        assert ('<select id="party-select" name="name">' in rendered)
+        assert ('<option value="' + party_1.id + '" data-type="'
+                '' + party_1.get_type_display() + '">' + party_1.name + ''
+                '</option>' in rendered)
+        assert ('<option value="' + party_2.id + '" data-type="'
+                '' + party_2.get_type_display() + '">' + party_2.name + ''
+                '</option>' in rendered)
 
 
 class NewEntityWidgetTest(TestCase):
     def test_render_value(self):
         widget = NewEntityWidget()
         expected = (
-            '<button class="btn btn-link"'
-            '        id="add-party" type="button">Add party</button>'
+            '<button class="btn btn-default" id="add-party" type="button">'
+            '<span class="glyphicon glyphicon-plus" aria-hidden="true">'
+            '</span> Add party</button>'
             '<input id="new_entity_field" type="hidden"'
             '       name="name" value="value">'
         )
@@ -36,8 +37,9 @@ def test_render_value(self):
     def test_render_no_value(self):
         widget = NewEntityWidget()
         expected = (
-            '<button class="btn btn-link"'
-            '        id="add-party" type="button">Add party</button>'
+            '<button class="btn btn-default" id="add-party" type="button">'
+            '<span class="glyphicon glyphicon-plus" aria-hidden="true">'
+            '</span> Add party</button>'
             '<input id="new_entity_field" type="hidden"'
             '       name="name" value="">'
         )

cadasta/spatial/widgets.py

@@ -1,4 +1,5 @@
 from django.forms.widgets import HiddenInput
+from django.utils.translation import ugettext as _
 from party.models import Party
 
 
@@ -9,26 +10,15 @@ def __init__(self, project, *args, **kwargs):
 
     def render(self, name, value, attrs={}):
         prj_parties = Party.objects.filter(project_id=self.project)
-        parties = ['<tr data-id="' + p.id + '"><td>' + p.name + '</td>'
-                   '<td>' + p.get_type_display() + '</td><tr>'
+        parties = ['<option value="' + p.id + '" data-type="' +
+                   p.get_type_display() + '">' + p.name + '</option>'
                    for p in prj_parties]
 
         return (
-            '<table class="table" id="select-list">'
-            '  <thead>'
-            '    <tr>'
-            '      <th>Party</th>'
-            '      <th>Type</th>'
-            '    </tr>'
-            '  </thead>'
-            '  <tbody>'
-            '    {parties}'
-            '  </tbody>'
-            '</table>'
-            '<input type="hidden" name="{name}" value="{value}">'
-        ).format(parties=''.join(parties),
-                 name=name,
-                 value=value or '')
+            '<select id="party-select" name="{name}">'
+            '{parties}'
+            '</select>'
+        ).format(parties=''.join(parties), name=name)
 
 
 class NewEntityWidget(HiddenInput):
@@ -37,10 +27,14 @@ class Media:
 
     def render(self, name, value, attrs={}):
         html = (
-            '<button class="btn btn-link"'
-            '        id="add-party" type="button">Add party</button>'
+            '<button class="btn btn-default" id="add-party" type="button">'
+            '<span class="glyphicon glyphicon-plus" aria-hidden="true">'
+            '</span> {button_text}</button>'
             '<input id="new_entity_field" type="hidden"'
             '       name="{name}" value="{value}">'
         )
+        button_text = _("Add party")
 
-        return html.format(name=name, value=(value if value else ''))
+        return html.format(name=name,
+                           value=(value if value else ''),
+                           button_text=button_text)

cadasta/templates/spatial/relationship_add.html

@@ -4,8 +4,33 @@
 
 {% block page_title %}Add new relationship | {% endblock %}
 
+{% block extra_head %}
+{{ block.super }}
+<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
+{% endblock %}
+
 {% block location_extra_script %}
   {{ form.media }}
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
+  <script>
+$(document).ready(function() {
+  var template = function(party) {
+    if (!party.id) {
+      return party.text;
+    }
+    return $(
+      '<div class="party-option">' +
+      '<strong class="party-name">' + party.text + '</strong>' +
+      '<span class="party-type">' + party.element.dataset.type + '</span>' +
+      '</div>'
+    );
+  };
+  $("#party-select").select2({
+    minimumResultsForSearch: 6,
+    templateResult: template,
+  });
+});
+  </script>
 {% endblock %}
 
 {% block form_modal %}
@@ -26,11 +51,10 @@ <h3 class="modal-title">{% trans "Add new relationship" %}</h3>
 
             <h4 class="step">{% trans "1. Connected party" %}</h4>
             <div id="select-party" class="clearfix">
-              <label>Choose a party to connect to this location</label>
+              <label>{% trans "Choose an existing party to connect to this location" %}</label>
               {% render_field form.id class+="form-control" %}
-              <div class="add-btn-btm clearfix">
-                {% render_field form.new_entity class+="form-control" %}
-              </div>
+              <label>{% trans "Or add a new party" %}</label>
+              {% render_field form.new_entity class+="form-control" %}
             </div>
 
             <div id="new-item" class="clearfix{% if not form.new_entity.value %} hidden{% endif %}">