triv: #26869 Initializing trees on afterSwap event (#215)

* triv: #26869 Initializing trees on afterSwap event

* triv: #26869 Initializing trees on afterSwap event

* triv: #26869 Initializing trees on afterSwap event

Author: LuboZ

src/django_smartbase_admin/static/sb_admin/src/js/main.js

@@ -32,7 +32,7 @@ import Autocomplete from "./autocomplete"
 import StaticAutocomplete from "./static_autocomplete"
 import ChoicesJS from "./choices"
 import TextTags from "./text_tags"
-import { ensureFilterForms, setCookie, setDropdownLabel, shouldProcessAfterSwap } from "./utils"
+import { SBADMIN_INIT_TREES_EVENT, ensureFilterForms, setCookie, setDropdownLabel, shouldProcessAfterSwap } from "./utils"
 import Multiselect from "./multiselect"
 import Radio from "./radio"
 import "./inline_paginator"
@@ -82,6 +82,7 @@ class Main {
                 this.initTooltips(target)
                 this.syncEmptyFieldsets(target)
                 this.scheduleScrollToFirstErrorField(target)
+                document.dispatchEvent(new CustomEvent(SBADMIN_INIT_TREES_EVENT, {detail: {target: target}}))
             }
             window.htmx.on("htmx:afterSwap", (event) => {
                 if (!shouldProcessAfterSwap(event)) {

src/django_smartbase_admin/static/sb_admin/src/js/tree_widget.js

@@ -1,4 +1,5 @@
 import {sanitizeHtml} from './sanitize'
+import {SBADMIN_INIT_TREES_EVENT} from './utils'
 
 const loadValue = function ($inputEl, treeWidgetData, treeInstance) {
     let value = $inputEl.val()
@@ -373,8 +374,8 @@ const loadValue = function ($inputEl, treeWidgetData, treeInstance) {
             })
         }
 
-        const initAllTrees = function () {
-            $('.js-tree-widget').each(function (index, element) {
+        const initAllTrees = function (root = document) {
+            $(root).find('.js-tree-widget').addBack('.js-tree-widget').each(function (index, element) {
                 const $treeEl = $(element)
                 if ($treeEl.hasClass('fancytree-container') || element.closest('.djn-empty-form')) {
                     return
@@ -393,15 +394,20 @@ const loadValue = function ($inputEl, treeWidgetData, treeInstance) {
         }
         initAllTrees()
 
-        document.addEventListener('formset:added', () => {
-            initAllTrees()
+        document.addEventListener('formset:added', (event) => {
+            initAllTrees(event.target)
+        })
+
+        document.addEventListener(SBADMIN_INIT_TREES_EVENT, (event) => {
+            initAllTrees(event.detail && event.detail.target)
         })
 
         const queryBuilderEl$ = $(".query-builder-advanced")
         queryBuilderEl$.on("afterCreateRuleInput.queryBuilder", function () {
+            const builder = this
             setTimeout(() => {
                 //next tick
-                initAllTrees()
+                initAllTrees(builder)
             }, 0)
         })
     })

src/django_smartbase_admin/static/sb_admin/src/js/utils.js

@@ -1,5 +1,7 @@
 import {sanitizeHtml} from './sanitize'
 
+export const SBADMIN_INIT_TREES_EVENT = 'SBAdminInitTrees'
+
 export const createIcon = (iconId, classes = ['w-24', 'h-24']) => {
     const svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
     svgEl.classList.add(...classes)