[FIX] PAYROLL: Fix showing python code in filing status

payroll/templates/payroll/tax/tax_bracket_view.html

@@ -2,7 +2,7 @@
 {% if messages %}
     <div class="oh-alert-container">
         {% for message in messages %}
-            <div class="oh-alert oh-alert--animated {{message.tags}}">{{ message }}</div>
+            <div class="oh-alert oh-alert--animated {{ message.tags }}">{{ message }}</div>
         {% endfor %}
     </div>
 {% endif %}
@@ -65,50 +65,72 @@
         </div>
     </div>
 {% else %}
-<iframe frameBorder="0" height="450px" id="oc-editor{{filing_status.pk}}"
-    src="https://onecompiler.com/embed/python?codeChangeEvent=true&hideNew=true&hideNewFileOption=true&hideStdin=true&hideTitle=true&listenToEvents=true&availableLanguages=false&theme=dark"
-    width="100%">
+<div class="col-lg-12 d-flex flex-row-reverse p-2 d-none">
+    <button type="submit" class="oh-btn oh-btn--secondary" id="oc-editor-button{{ filing_status.pk }}">
+        {% trans "Save" %}
+    </button>
+</div>
+<iframe frameBorder="0" height="450px" id="oc-editor{{ filing_status.pk }}"
+        src="https://onecompiler.com/embed/python?codeChangeEvent=true&hideNew=true&hideNewFileOption=true&hideStdin=true&hideTitle=true&listenToEvents=true&availableLanguages=false&theme=dark"
+        width="100%">
 </iframe>
 <script>
-    var iFrame = document.getElementById('oc-editor{{filing_status.pk}}');
+    var iFrame = document.getElementById('oc-editor{{ filing_status.pk }}');
+    var saveDiv = document.querySelector('#oc-editor-button{{ filing_status.pk }}').parentElement;
+    var saveBtn = document.getElementById('oc-editor-button{{ filing_status.pk }}');
+
+    var initialCode = `{{ filing_status.python_code|escapejs }}`;
+    var latestCode = initialCode;
 
-    // Make sure the iframe is fully loaded before sending the postMessage
     iFrame.onload = function () {
-        // Populate the code in the OneCompiler editor
-        iFrame.contentWindow.postMessage({
-            eventType: 'populateCode',
-            language: 'python',
-            files: [
-                {
-                    "name": "federal_tax.py",
-                    "content": `{{filing_status.python_code|safe}}`
-                }
-            ]
-        }, "*");
+        setTimeout(function () {
+            iFrame.contentWindow.postMessage({
+                eventType: 'populateCode',
+                language: 'python',
+                files: [
+                    {
+                        "name": "federal_tax.py",
+                        "content": initialCode
+                    }
+                ]
+            }, "*");
 
-        // Trigger the code to run
-        iFrame.contentWindow.postMessage({
-            eventType: 'triggerRun'
-        }, "*");
+            // Trigger run after injecting code
+            setTimeout(function () {
+                iFrame.contentWindow.postMessage({
+                    eventType: 'triggerRun'
+                }, "*");
+            }, 500);
+        }, 500);
     };
+
     window.onmessage = function (e) {
         if (e.data && e.data.language) {
-            code = e.data.files[0].content
-            $.ajax({
-                type: "post",
-                url: "{% url 'update-py-code' filing_status.pk %}",
-                data: {
-                    csrfmiddlewaretoken: getCookie("csrftoken"),
-                    code: code,
-                },
-                success: function (response) {
+            var code = e.data.files[0].content;
 
+            if (code !== latestCode) {
+                latestCode = code;
+                if (latestCode !== initialCode) {
+                    saveDiv.classList.remove("d-none");
                 }
-            });
-
-            // handle the e.data which contains the code object
+            }
         }
     };
 
+    saveBtn.addEventListener("click", function () {
+        $.ajax({
+            type: "post",
+            url: "{% url 'update-py-code' filing_status.pk %}",
+            data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                code: latestCode,
+            },
+            success: function () {
+                initialCode = latestCode;
+                $('#reloadMessagesButton').click();
+                saveDiv.classList.add("d-none");
+            }
+        });
+    });
 </script>
 {% endif %}

payroll/views/tax_views.py

@@ -297,4 +297,5 @@ def update_py_code(request, pk):
     if not filing.python_code == code:
         filing.python_code = code
         filing.save()
+        messages.success(request, _("Python code saved successfully!"))
     return JsonResponse({"message": "success"})