From a53c16cfee43e6f98a1a5fd372847cea96fda964 Mon Sep 17 00:00:00 2001
From: Gagan Deep <pandafy.dev@gmail.com>
Date: Wed, 14 Oct 2020 15:31:16 +0530
Subject: [PATCH] [change] Allow multiple jsonschema widgets in one page

Earlier the schema.json was bound to each view. No matter how many
different switcher were present, it was only loading one of them.

With this patch, fetching schema.json is bound to each switcher element.
This allows fetching different JSONSchemas on the same page.
---
 openwisp_controller/config/static/config/js/tabs.js   |  4 ++--
 openwisp_controller/config/static/config/js/widget.js | 10 +++++++---
 openwisp_controller/config/widgets.py                 |  2 ++
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/openwisp_controller/config/static/config/js/tabs.js b/openwisp_controller/config/static/config/js/tabs.js
index a38972ecf..4dd381429 100644
--- a/openwisp_controller/config/static/config/js/tabs.js
+++ b/openwisp_controller/config/static/config/js/tabs.js
@@ -1,6 +1,6 @@
 'use strict';
 django.jQuery(function ($) {
-  
+
   if ($('.add-form').length || !$('#device_form').length) {
     return;
   }
@@ -48,7 +48,7 @@ django.jQuery(function ($) {
       label = $el.find('> fieldset.module > h2, ' +
         '> .tabular > fieldset.module > h2').text();
     tabsContainer.append(
-      '<li><a class="button" href="#' + tabId + '">' + label + '</a></li>'
+      '<li class="'+ label.toLowerCase().replace(' ', '-') +'"><a class="button" href="#' + tabId + '">' + label + '</a></li>'
     );
   });
 
diff --git a/openwisp_controller/config/static/config/js/widget.js b/openwisp_controller/config/static/config/js/widget.js
index 09a35c1d2..e2eb669ff 100644
--- a/openwisp_controller/config/static/config/js/widget.js
+++ b/openwisp_controller/config/static/config/js/widget.js
@@ -1,5 +1,7 @@
 'use strict';
 (function ($) {
+    django._schemas = new Map();
+    django._jsonEditors = new Map();
     var inFullScreenMode = false,
         prevDefaultValues = {},
         defaultValuesUrl = window.location.origin + '/admin/config/device/get-template-default-values/',
@@ -200,7 +202,7 @@
             disable_edit_json: true,
             startval: startval,
             keep_oneof_values: false,
-            show_errors: 'change',
+            show_errors: field.data('show-errors') ? field.data('show-errors'): 'change',
             // if no backend selected use empty schema
             schema: backend ? schemas[backend] : {}
         };
@@ -208,6 +210,7 @@
             $.extend(options, JSON.parse(field.attr("data-options")));
         }
         editor = new JSONEditor(document.getElementById(id), options);
+        django._jsonEditors[id] = editor;
         // initialise advanced json editor here (disable schema validation in VPN admin)
         advancedEditor = initAdvancedEditor(field, value, options.schema, $('#vpn_form').length === 1);
         $advancedEl = $('#advanced_editor');
@@ -330,8 +333,9 @@
     };
 
     var bindLoadUi = function () {
-        $.getJSON(django._jsonSchemaWidgetUrl, function (schemas) {
-            $('.jsoneditor-raw').each(function (i, el) {
+        $('.jsoneditor-raw:not([name*="__prefix__"])').each(function (i, el) {
+            $.getJSON($(el).data('schema-url'), function (schemas) {
+                django._schemas[$(el).data('schema-url')] = schemas;
                 var field = $(el),
                     schema = field.attr("data-schema"),
                     schemaSelector = field.attr("data-schema-selector");
diff --git a/openwisp_controller/config/widgets.py b/openwisp_controller/config/widgets.py
index b586946e7..6e6887bbd 100644
--- a/openwisp_controller/config/widgets.py
+++ b/openwisp_controller/config/widgets.py
@@ -1,6 +1,7 @@
 from django import forms
 from django.contrib.admin.widgets import AdminTextareaWidget
 from django.template.loader import get_template
+from django.urls import reverse
 
 
 class JsonSchemaWidget(AdminTextareaWidget):
@@ -45,5 +46,6 @@ def render(self, name, value, attrs=None, renderer=None):
         attrs = attrs or {}
         attrs['class'] = 'vLargeTextField jsoneditor-raw'
         attrs.update(self.extra_attrs)
+        attrs.update({'data-schema-url': reverse(self.schema_view_name)})
         html += super().render(name, value, attrs, renderer)
         return html