From 122eed1dbebe0231fc48ed2e47bfd507240e28dd Mon Sep 17 00:00:00 2001
From: Étienne Loks <etienne.loks@iggdrasil.net>
Date: Thu, 19 Mar 2020 13:11:06 +0100
Subject: Autocomplete widget: option to display detail of the current item

---
 .../templates/blocks/JQueryAutocomplete.js         | 10 ++++++++
 ishtar_common/widgets.py                           | 28 ++++++++++++++++------
 scss/custom.scss                                   | 23 +++++++++++++++++-
 3 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/ishtar_common/templates/blocks/JQueryAutocomplete.js b/ishtar_common/templates/blocks/JQueryAutocomplete.js
index 47a5db80b..32351b312 100644
--- a/ishtar_common/templates/blocks/JQueryAutocomplete.js
+++ b/ishtar_common/templates/blocks/JQueryAutocomplete.js
@@ -47,6 +47,16 @@ $(function() {
 
     $('#id_{{field_id}}').change(function(){
         $("#id_select_{{field_id}}").attr('title', $('#id_select_{{field_id}}').val());
+        {% if detail %}
+        var current_val = $('#id_{{field_id}}').val();
+        if (current_val){
+        	var detail_url = "{{detail}}" + current_val + "/";
+	        $.get(detail_url, function(data) {
+				$("#id_{{field_id}}-detail").html(data);
+			});
+        }
+        {% endif %}
+
     });
 
     $('#id_{{field_id}}').change();
diff --git a/ishtar_common/widgets.py b/ishtar_common/widgets.py
index 3410d0824..904036deb 100644
--- a/ishtar_common/widgets.py
+++ b/ishtar_common/widgets.py
@@ -599,7 +599,7 @@ class ModelJQueryAutocompleteField(ModelFieldMixin, forms.CharField):
 class JQueryAutoComplete(forms.TextInput):
     def __init__(self, source, associated_model=None, options=None, attrs=None,
                  new=False, url_new='', multiple=False, limit=None,
-                 dynamic_limit=None, modify=False, tips=""):
+                 dynamic_limit=None, detail=False, modify=False, tips=""):
         """
         Source can be a list containing the autocomplete values or a
         string containing the url used for the request.
@@ -622,6 +622,7 @@ class JQueryAutoComplete(forms.TextInput):
         self.new = new
         self.url_new = url_new
         self.modify = modify
+        self.detail = detail
         self.multiple = multiple
         self.limit = limit or {}
         self.dynamic_limit = dynamic_limit or []
@@ -634,7 +635,7 @@ class JQueryAutoComplete(forms.TextInput):
             return [item.strip() for item in v.split(',') if item.strip()]
         return data.getlist(name, None)
 
-    def render_js(self, field_id):
+    def render_js(self, field_id, current_pk):
         if isinstance(self.source, list):
             source = JSONEncoder().encode(self.source)
         elif isinstance(self.source, str) or isinstance(self.source, str):
@@ -651,7 +652,12 @@ class JQueryAutoComplete(forms.TextInput):
         ]
         dct = {'source': mark_safe(source),
                'field_id': field_id,
+               'safe_field_id': field_id.replace("-", "_"),
                'dynamic_limit': dynamic_limit}
+        if self.detail:
+            model_name = self.associated_model._meta.object_name.lower()
+            url_detail = '/detail-{}/'.format(model_name)
+            dct["detail"] = url_detail
         if self.options:
             dct['options'] = mark_safe('%s' % self.options)
 
@@ -723,7 +729,8 @@ class JQueryAutoComplete(forms.TextInput):
                 """.format(self.tips)
             if self.modify and len(values) == 1:
                 url_modify = 'modify-' + model_name
-                url_modify = reverse(url_modify, args=[values[0]])
+                url_modify = reverse(url_modify, args=[attrs_select['id'],
+                                                       values[0]])
                 new += """
                 <span class="input-group-append">
                 <a href="#" class="modify-button input-group-text"
@@ -749,6 +756,10 @@ class JQueryAutoComplete(forms.TextInput):
                 </span>
                 """.format(url_new, model_name, model_name)
             new += "</div>"
+        detail = ""
+        if self.detail:
+            detail = """<div class="form-control detail-value" id="{}-detail">
+            </div>""".format(attrs_hidden['id'])
 
         old_value = ""
         if has_previous_value:
@@ -776,18 +787,21 @@ class JQueryAutoComplete(forms.TextInput):
             attrs_hidden_previous['id'] += u"_previous"
             old_value += u"<input type='hidden'{}>".format(
                 flatatt(attrs_hidden_previous))
-
-        html += u"""
+        pk = None
+        if values:
+            pk = values[0]
+        html += """
 <input{attrs_select}/>{new}\
 <input type="hidden"{attrs_hidden}/>\
-{old_value}
+{detail}{old_value}
         <script type="text/javascript"><!--//
         {js}//--></script>
         """.format(
             old_value=old_value,
             attrs_select=flatatt(attrs_select),
             attrs_hidden=flatatt(attrs_hidden),
-            js=self.render_js(name), new=new
+            js=self.render_js(name, pk), new=new,
+            detail=detail
         )
         return html
 
diff --git a/scss/custom.scss b/scss/custom.scss
index 596835653..9e7fba25a 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -86,14 +86,35 @@ dd > pre{
 	border-bottom-right-radius: 0;
 }
 
+.detail-value.form-control {
+	border-radius: 0;
+	border-top: 0;
+	height: auto;
+	font-size: 0.9rem;
+	line-height: 1;
+}
+
 .previous-value .form-control,
-.previous-value .btn,
 .previous-value .input-group-text{
 	border-top: 0;
+}
+
+.previous-value .form-control,
+.previous-value .btn,
+.previous-value .input-group-text{
 	border-top-left-radius: 0;
 	border-top-right-radius: 0;
 }
 
+.address{
+	font-family: monospace;
+}
+
+.address span{
+	display: block;
+	padding: 0.1em;
+}
+
 pre {
     white-space: pre-wrap;
 }
-- 
cgit v1.2.3