Implement the address selector using addressfield.jquery

opentech/apply/funds/blocks.py

@@ -10,8 +10,14 @@ from wagtail.wagtailcore.blocks import StaticBlock
 
 from tinymce.widgets import TinyMCE
 
-from opentech.apply.stream_forms.blocks import FormFieldsBlock, FormFieldBlock, TextFieldBlock
+from opentech.apply.stream_forms.blocks import (
+    FormFieldsBlock,
+    FormFieldBlock,
+    OptionalFormFieldBlock,
+    TextFieldBlock,
+)
 from opentech.apply.categories.blocks import CategoryQuestionBlock
+from .widgets import AddressWidget
 
 
 def find_duplicates(items):
@@ -41,8 +47,17 @@ class RichTextFieldBlock(TextFieldBlock):
         icon = 'form'
 
 
+class AddressFieldBlock(OptionalFormFieldBlock):
+    widget = AddressWidget
+
+    class Meta:
+        label = _('Address')
+        icon = 'home'
+
+
 class CustomFormFieldsBlock(FormFieldsBlock):
     rich_text = RichTextFieldBlock(group=_('Fields'))
+    address = AddressFieldBlock(group=_('Fields'))
     category = CategoryQuestionBlock(group=_('Custom'))
 
     def __init__(self, *args, **kwargs):

opentech/apply/funds/static/address_form.js

+(function ($) {
+    // On document ready, instantiate the plugin.
+    $(document).ready(function formReady() {
+        // Initialize jquery.validate (optional).
+        // $('#address-example').validate({});
+
+        // Initialize jquery.addressfield.
+        $('.form div.address').addressfield({
+            json: '/static/addressfield.min.json',
+            fields: {
+                country: "[name='country']",
+                thoroughfare: "[name='address_1']",
+                premise: "[name='address_2']",
+                locality: "[name='locality']",
+                localityname: "[name='city']",
+                administrativearea: "[name='state']",
+                postalcode: "[name='zip']"
+            }
+        });
+    });
+})(jQuery);

opentech/apply/funds/widgets.py

+from django import forms
+
+from django_countries.widgets import CountrySelectWidget
+from django_countries import countries
+
+
+class KeepOwnAttrsWidget(forms.Widget):
+    def get_context(self, name, value, attrs):
+        name = self.attrs.pop('name') or name
+        attrs.update(self.attrs)
+        return super().get_context(name, value, attrs)
+
+
+class CountrySelectWithChoices(KeepOwnAttrsWidget, CountrySelectWidget):
+    def __init__(self, *args, **kwargs):
+        kwargs['choices'] = countries
+        super().__init__(*args, **kwargs)
+
+
+class KeepAttrsTextInput(KeepOwnAttrsWidget, forms.TextInput):
+    pass
+
+
+class NestedMultiWidget(forms.MultiWidget):
+    def __init__(self, *args, **kwargs):
+        widgets = [
+            widget(attrs={'name': field}) for field, widget in self.components.items()
+        ]
+        super().__init__(widgets, *args, **kwargs)
+
+    def decompress(self, value):
+        if value:
+            return [value.get(field) for field in self.components.keys()]
+        return [None] * len(self.components)
+
+    def value_from_datadict(self, data, files, name):
+        return {
+            widget.value_from_datadict(data, files, name + '_%s' % i)
+            for i, widget in enumerate(self.widgets)
+        }
+
+
+
+class LocalityWidget(NestedMultiWidget):
+    components = {
+        'city': KeepAttrsTextInput,
+        'state': KeepAttrsTextInput,
+        'zip': KeepAttrsTextInput,
+    }
+
+
+
+class AddressWidget(NestedMultiWidget):
+    components = {
+        'country': CountrySelectWithChoices,
+        'address_1': KeepAttrsTextInput,
+        'address_2': KeepAttrsTextInput,
+        'locality': LocalityWidget,
+    }
+
+    class Media:
+        js = (
+            "http://code.jquery.com/jquery-3.3.1.min.js",
+            'https://cdn.jsdelivr.net/npm/jquery.addressfield@1.1.0/dist/jquery.addressfield.js',
+            "address_form.js",
+            )
+
+    def __init__(self, *args, **kwargs):
+        attrs = kwargs.get('attrs', dict())
+        attrs['class'] = 'address'
+        kwargs['attrs'] = attrs
+        super().__init__(*args, **kwargs)

opentech/templates/django/forms/widgets/multiwidget.html

+<div {% include "django/forms/widgets/attrs.html" %}>{% spaceless %}{% for widget in widget.subwidgets %}{% include widget.template_name %}{% endfor %}{% endspaceless %}</div>

requirements.txt

@@ -3,6 +3,7 @@ wagtail==1.13.1
 psycopg2==2.7.3.1
 Pillow==4.3.0
 django-extensions==1.7.4
+django-countries==5.1
 Werkzeug==0.11.11
 stellar==0.4.3
 django-tinymce4-lite==1.7.0