From: Magnus Hagander <magnus@hagander.net>
Date: Tue, 9 Oct 2018 18:31:30 +0000 (+0200)
Subject: Add backend form support for dynamic previews
X-Git-Tag: FINAL_PY2~93
X-Git-Url: http://git.postgresql.org/gitweb/static/%7B%7Bpgdulink%28?a=commitdiff_plain;h=d13a8dfda9e0094bf106260acdceb7626c8bc670;p=pgeu-web.git

Add backend form support for dynamic previews

This makes it possible to add a preview of a field that makes an AJAX
call to the backend to get the contents.
---

diff --git a/postgresqleu/confreg/backendforms.py b/postgresqleu/confreg/backendforms.py
index 61508ad..c7d705d 100644
--- a/postgresqleu/confreg/backendforms.py
+++ b/postgresqleu/confreg/backendforms.py
@@ -37,6 +37,7 @@ class BackendForm(ConcurrentProtectedModelForm):
 	selectize_multiple_fields = None
 	json_fields = None
 	markdown_fields = []
+	dynamic_preview_fields = []
 	vat_fields = {}
 	verbose_field_names = {}
 	exclude_date_validators = []
diff --git a/postgresqleu/confreg/backendviews.py b/postgresqleu/confreg/backendviews.py
index 83ec20a..2f8e7a8 100644
--- a/postgresqleu/confreg/backendviews.py
+++ b/postgresqleu/confreg/backendviews.py
@@ -54,6 +54,16 @@ def backend_process_form(request, urlname, formclass, id, cancel_url='../', save
 	if not formclass.Meta.fields:
 		raise Exception("This view only works if fields are explicitly listed")
 
+	if request.GET.get('fieldpreview', ''):
+		f = request.GET.get('fieldpreview')
+		if not f in formclass.dynamic_preview_fields:
+			raise Http404()
+
+		try:
+			return HttpResponse(formclass.get_dynamic_preview(f, request.GET.get('previewval', ''), id), content_type='text/plain')
+		except Exception:
+			return HttpResponse('', content_type='text/plain')
+
 	nopostprocess = False
 	newformdata = None
 
diff --git a/template/confreg/admin_backend_form.html b/template/confreg/admin_backend_form.html
index 870ac82..0ec3fff 100644
--- a/template/confreg/admin_backend_form.html
+++ b/template/confreg/admin_backend_form.html
@@ -27,7 +27,6 @@ function backend_showdown_preview(id) {
 
    var w = $('<div class="admin_markdownpreview"><legend>Markdown preview</legend><div class="admin_markdownpreview_contents"></div></div>').insertAfter(e);
    var p = w.find('div.admin_markdownpreview_contents');
-   console.log(p);
 
    function update() {
       p.html(mdconverter.makeHtml(e.val()));
@@ -39,6 +38,32 @@ function backend_showdown_preview(id) {
    });
 }
 {%endif%}
+{%if form.dynamic_preview_fields%}
+function backend_dynamic_preview(id) {
+   var e = $('#id_' + id);
+
+   var w = $('<div class="admin_dynamicpreview"><legend>Preview</legend><div class="admin_dynamicpreview_contents"></div></div>').insertAfter(e);
+   var p = w.find('div.admin_dynamicpreview_contents');
+
+   function update() {
+      $.get('?fieldpreview=' + id + '&previewval=' + encodeURIComponent(e.val()), function(v) {
+         p.text(v);
+      });
+   }
+
+   update();
+
+   e.keyup(function() {
+      /* Rate-limit the updating to once per second, since it causes a backend call */
+      if (e.current_timeout) {
+         clearTimeout(e.current_timeout);
+      }
+      e.current_timeout = setTimeout(function() {
+         update();
+      }, 1000);
+   });
+}
+{%endif%}
 
 $(function() {
 {%for f,lookup in form.selectize_multiple_fields.items%}
@@ -67,6 +92,10 @@ $(function() {
    backend_showdown_preview('id_{{f}}');
 {%endfor%}
 
+{%for f in form.dynamic_preview_fields%}
+   backend_dynamic_preview('{{f}}');
+{%endfor%}
+
 {%for f in form.json_fields%}
 $('#id_{{f}}').addClass('jsoneditor');
 {%endfor%}