From f7f18a7d1db98a2cb9915726f3deb08e3e0d1d51 Mon Sep 17 00:00:00 2001
From: monterarty <107932619+monterarty@users.noreply.github.com>
Date: Wed, 17 Sep 2025 16:07:58 +0300
Subject: [PATCH] Update dynamicdropdown_multiple.tpl

Update for new listbox-multiple field
---
 .../tv/input/tpl/dynamicdropdown_multiple.tpl | 369 +++++++++++++-----
 1 file changed, 264 insertions(+), 105 deletions(-)

diff --git a/core/components/dynamicdropdowntv/tv/input/tpl/dynamicdropdown_multiple.tpl b/core/components/dynamicdropdowntv/tv/input/tpl/dynamicdropdown_multiple.tpl
index f3035b7..dac4dcb 100644
--- a/core/components/dynamicdropdowntv/tv/input/tpl/dynamicdropdown_multiple.tpl
+++ b/core/components/dynamicdropdowntv/tv/input/tpl/dynamicdropdown_multiple.tpl
@@ -1,144 +1,303 @@
 <input type="hidden" id="original{$ddId}" name="original{$tv->id}" value="{$tv->get('value')|escape}" />
 
-<div id="div_{$ddId}">
 
+<div id="div_{$ddId}">
 </div>
 
-
 <script type="text/javascript">
 // <![CDATA[
 {literal}
+Ext.onReady(function() {
+    var selectElement = Ext.get('tv{/literal}{$tv->id}{literal}');
 
-MODx.combo.{/literal}{$ddId}{literal} = function(config) {
-    config = config || {};
-    Ext.applyIf(config,{{/literal}
-        name: '{$ddId}'
-        ,id: 'select_{$ddId}'
-        ,width: 400
-        ,hiddenName: 'tv{$tv->id}'
+    // Create SuperBoxSelect with remote store
+    var fld = new Ext.ux.form.SuperBoxSelect({{/literal}
+        id: 'select_{$ddId}'
+        ,name: '{$ddId}'
+        ,hiddenName: 'tv{$tv->id}[]'
         ,renderTo: 'div_{$ddId}'
         ,triggerAction: 'all'
         ,mode: 'remote'
-        ,children: Ext.util.JSON.decode('{$children}')
-        ,parents: Ext.util.JSON.decode('{$parents}')          
-        {if $params.title},title: '{$params.title}'{/if}
-        {if $params.listWidth},listWidth: {$params.listWidth}{/if}
+        ,extraItemCls: 'x-tag'
+        ,expandBtnCls: 'x-form-trigger'
+        ,clearBtnCls: 'x-form-trigger'
+        ,width: 400
+        ,displayField: 'name'
+        ,valueField: 'id'
+        ,resizable: true
+        {if $params.allowBlank == 1 || $params.allowBlank == 'true'}
+        ,allowBlank: true
+        {else}
+        ,allowBlank: false
+        {/if}
+        {if $params.title}
+        ,title: '{$params.title}'
+        {/if}
+        {if $params.listWidth}
+        ,listWidth: {$params.listWidth}
+        {/if}
         ,maxHeight: {if $params.maxHeight}{$params.maxHeight}{else}300{/if}
         {if $params.typeAhead}
-            ,editable: true
-            ,typeAhead: true
-            ,typeAheadDelay: {if $params.typeAheadDelay && $params.typeAheadDelay != ''}{$params.typeAheadDelay}{else}250{/if}
+        ,typeAhead: true
+        ,typeAheadDelay: {if $params.typeAheadDelay && $params.typeAheadDelay != ''}{$params.typeAheadDelay}{else}250{/if}
+        ,editable: true
         {else}
-            ,editable: false
-            ,typeAhead: false
+        ,typeAhead: false
         {/if}
         {if $params.listEmptyText}
-            ,listEmptyText: '{$params.listEmptyText}'
+        ,listEmptyText: '{$params.listEmptyText}'
         {/if}
-        ,forceSelection: {if $params.forceSelection && $params.forceSelection != 'false'}true{else}false{/if}
-        ,initiated: false
-        ,allowBlank: {if $params.allowBlank == 1 || $params.allowBlank == 'true'}true{else}false{/if}
-		,resizable: false
-        ,pageSize: 0		
-        ,url: {$connector_path}
-        ,fields: ['id','name']
-        ,displayField: 'name'
-        ,valueField: 'id'
+        ,allowAddNewData: {if $params.forceSelection && $params.forceSelection != 'false'}false{else}true{/if}
+        ,addNewDataOnBlur: true
         {if $params.valueDelimiter}
-            ,valueDelimiter: '{$params.valueDelimiter}'
-        {/if}        
-        ,clearOnRefresh: {if $params.clearOnRefresh == 1 || $params.clearOnRefresh == 'true'}true{else}false{/if} 
+        ,valueDelimiter: '{$params.valueDelimiter}'
+        {else}
+        ,valueDelimiter: ','
+        {/if}
+        ,clearOnRefresh: {if $params.clearOnRefresh == 1 || $params.clearOnRefresh == 'true'}true{else}false{/if}
+        ,stackItems: true
+        ,msgTarget: 'under'
+        ,forceFormValue: false
+        ,children: Ext.util.JSON.decode('{$children}')
+        ,parents: Ext.util.JSON.decode('{$parents}')
         {literal}
         ,baseParams: {
-		    action: '{/literal}{$action}{literal}'
-            ,resource_id: '{/literal}{$resource.id}{literal}' 
-            ,object_id: '{/literal}{$object_id}{literal}'
-            ,tvname: '{/literal}{{$tv->name}}{literal}' 	 	            
+            action: '{/literal}{$action}{literal}',
+            resource_id: '{/literal}{$resource.id}{literal}',
+            object_id: '{/literal}{$object_id}{literal}',
+            tvname: '{/literal}{$tv->name}{literal}'
         }
         ,store: new Ext.data.JsonStore({
-                        id:'id',
-                        autoLoad: true,
-                        root:'results',
-                        fields: ['name', 'id'],
-                        remoteSort: true,
-                        url: {$connector_path},
-                        baseParams:{
-                            action: '{/literal}{$action}{literal}'
-                            ,resource_id: '{/literal}{$resource.id}{literal}' 
-                            ,object_id : '{/literal}{$object_id}{literal}'
-                            ,tvname : '{/literal}{{$tv->name}}{literal}' 	                            
+            id: 'id',
+            autoLoad: false,
+            root: 'results',
+            fields: ['name', 'id'],
+            remoteSort: true,
+            url: {/literal}{$connector_path}{literal},
+            baseParams: {
+                action: '{/literal}{$action}{literal}'
+                ,resource_id: '{/literal}{$resource.id}{literal}'
+                ,object_id: '{/literal}{$object_id}{literal}'
+                ,tvname: '{/literal}{$tv->name}{literal}'
+            },
+            listeners: {
+                'load': {
+                    fn: function(store, records, options) {
+                        // Force refresh dropdown after data load
+                        if (this.rendered) {
+                            this.doLayout();
+                        }
+                    },
+                    scope: this
+                }
+            }
+        })
+        ,listeners: {
+            'select': {
+                fn: function(comp) {
+                    comp.refreshChildren(true);
+                    MODx.fireResourceFormChange();
+                }
+            }
+            ,'render': {
+                fn: function(comp) {
+                    // Copy exact initSelect logic from working template
+                    var parent_field = null;
+                    var parents = comp.parents || [];
+                    for(var i = 0; i < parents.length; i++) {
+                        var parent = parents[i];
+                        parent_field = Ext.get('original' + parent);
+                        if (parent_field) {
+                            // Update both baseParams like in working template
+                            comp.baseParams[parent] = parent_field.dom.value;
+                            comp.store.baseParams[parent] = parent_field.dom.value;
+                        }
+                    }
+                    comp.store.load({
+                        callback: function() {
+                            var originalValue = Ext.get('{/literal}original{$ddId}{literal}').dom.value;
+                            if (originalValue) {
+                                var values = originalValue.split(comp.valueDelimiter || ',');
+                                comp.setValue(values);
+                            }
                         },
-                        listeners: {
-                            'load': {fn:function(store, records, options ) {
-                                //this.hiddenName = config.paramHiddenName;
-                                //this.setWidth('350');
-                                }
-                            },scope : this                        
-                        }   
-                    }) 
-        
-        ,listeners: { 
-		    'select': {fn:this.selectOption,scope:this}
-            ,'render': {fn:this.initSelect,scope:this}
-		}
+                        scope: comp
+                    });
+                }
+            }
+            ,'beforeadditem': {fn: MODx.fireResourceFormChange, scope: this}
+            ,'newitem': {fn: function(bs,v,f) {
+                var item = {};
+                item[bs.valueField] = v;
+                item[bs.displayField] = v;
+                bs.addNewItem(item);
+                MODx.fireResourceFormChange();
+                return true;
+            }, scope: this}
+            ,'beforeremoveitem': {fn: MODx.fireResourceFormChange, scope: this}
+            ,'clear': {fn: MODx.fireResourceFormChange, scope: this}
+        }
+        ,reload: function() {
+            this.store.load({
+                callback: function() {
+                    if (this.clearOnRefresh) {
+                        this.setValue('');
+                    }
+                    this.refreshChildren(true);
+                },
+                scope: this
+            });
+        }
+        ,refreshChildren: function(reload) {
+            var ddSelect = null;
+            for(var i = 0; i < this.children.length; i++) {
+                var child = this.children[i];
+                ddSelect = Ext.getCmp('select_' + child);
+                if(typeof(ddSelect) != "undefined" && ddSelect !== null) {
+                    if (ddSelect.store && ddSelect.store.baseParams) {
+                        ddSelect.store.baseParams.{/literal}{$ddId}{literal} = this.getValue();
+                    }
+                    if (reload && typeof ddSelect.reload === 'function') {
+                        ddSelect.reload();
+                    }
+                }
+            }
+        }
     });
-    MODx.combo.{/literal}{$ddId}{literal}.superclass.constructor.call(this,config);
-};
-Ext.extend(MODx.combo.{/literal}{$ddId}{literal},Ext.ux.form.SuperBoxSelect,{
-	selectOption: function() {
-        this.refreshChildren(true);
-        MODx.fireResourceFormChange();	         
-        
-	}
-    ,reload: function() {
-        this.store.load({
-            callback: function() {
-                if (this.clearOnRefresh){
-                    this.setValue('');
+
+    // Register component and add to form
+    Ext.reg('modx-combo-{/literal}{$ddId}{literal}', Ext.ux.form.SuperBoxSelect);
+    Ext.getCmp('modx-panel-resource').getForm().add(fld);
+
+    // Create a refresh function that updates all parent parameters (like initSelect in working template)
+    fld.refreshFromParents = function() {
+        var parent_field = null;
+        var parentComponent = null;
+        var params = {};
+        for(var j = 0; j < this.parents.length; j++) {
+            var parent = this.parents[j];
+
+            // Try to get value from parent component first
+            parentComponent = Ext.getCmp('select_' + parent);
+            if (parentComponent && typeof parentComponent.getValue === 'function') {
+                var value = parentComponent.getValue();
+                this.baseParams[parent] = value;
+                this.store.baseParams[parent] = value;
+                params[parent] = value;
+            } else {
+                // Fallback to original field
+                parent_field = Ext.get('original' + parent);
+                if (parent_field) {
+                    var value = parent_field.dom.value;
+                    this.baseParams[parent] = value;
+                    this.store.baseParams[parent] = value;
+                    params[parent] = value;
                 }
-                this.refreshChildren(true);
-            },scope:this
-       });
-	}
-    ,refreshChildren: function(reload) {
+            }
+        }
+        this.setValue(''); // Clear current selection
+        this.store.load();
+    };
+
+    // Setup parent field listeners for cascading updates
+    var parents = fld.parents || [];
+    for(var i = 0; i < parents.length; i++) {
+        var parentName = parents[i];
+        var parentCmp = Ext.getCmp('select_' + parentName);
+        if (parentCmp) {
+            parentCmp.on('select', function() {
+                fld.refreshFromParents();
+            });
+        }
+    }
+
+    // Override refreshChildren to work exactly like in working template
+    fld.refreshChildren = function(reload) {
         var ddSelect = null;
-        for(i = 0; i <  this.children.length; i++) {
- 		    child = this.children[i];
-            ddSelect = Ext.getCmp('select_'+child);
-            if(typeof(ddSelect) != "undefined"){
+        for(var i = 0; i < this.children.length; i++) {
+            var child = this.children[i];
+            ddSelect = Ext.getCmp('select_' + child);
+            if(typeof(ddSelect) != "undefined") {
+                // Copy exact logic from working template
                 ddSelect.baseParams.{/literal}{$ddId}{literal} = this.getValue();
-                if (reload){
+                ddSelect.store.baseParams.{/literal}{$ddId}{literal} = this.getValue();
+                if (reload) {
                     ddSelect.reload();
                 }
             }
         }
-	}    
-    ,initSelect: function() {
-        var parent_field = null;
-        for(i = 0; i <  this.parents.length; i++) {
- 		    parent = this.parents[i];
-            parent_field = Ext.get('original'+parent);
-            if (parent_field){
-                this.store.baseParams[parent] = parent_field.dom.value;
+    };
+
+    // Ensure getValue() returns correct format for legacy components
+    var originalGetValue = fld.getValue;
+    fld.getValue = function() {
+        var value = originalGetValue.call(this);
+        if (Ext.isArray(value)) {
+            return value.join(this.valueDelimiter || ',');
+        }
+        return value;
+    };
+
+    // Global listener for any field changes that might affect us
+    Ext.getCmp('modx-panel-resource').on('actioncomplete', function(form, action) {
+        if (action.type === 'load') {
+            // Form loaded, refresh our field
+            setTimeout(function() {
+                fld.refreshFromParents();
+            }, 100);
+        }
+    });
+
+    // Listen for changes in original fields (hidden fields that store values)
+    var lastParentValues = {};
+    var checkParentChanges = function() {
+        var hasChanges = false;
+        for(var j = 0; j < fld.parents.length; j++) {
+            var parent = fld.parents[j];
+            var parent_field = Ext.get('original' + parent);
+            if (parent_field) {
+                var currentValue = parent_field.dom.value;
+                var lastValue = lastParentValues[parent];
+                if (currentValue !== lastValue) {
+                    lastParentValues[parent] = currentValue;
+                    hasChanges = true;
+                }
             }
         }
-        this.store.load({
-            callback: function() {
-                this.setValue(Ext.get('{/literal}original{$ddId}{literal}').dom.value);
-            },scope:this
-       });
-	}
+        if (hasChanges) {
+            fld.refreshFromParents();
+        }
+    };
 
-});
-Ext.reg('modx-combo-{/literal}{$ddId}{literal}',MODx.combo.{/literal}{$ddId}{literal});
-Ext.onReady(function() {
-    var fld = MODx.load({
-        xtype: 'modx-combo-{/literal}{$ddId}{literal}'
+    // Initialize last values
+    for(var j = 0; j < fld.parents.length; j++) {
+        var parent = fld.parents[j];
+        var parent_field = Ext.get('original' + parent);
+        if (parent_field) {
+            lastParentValues[parent] = parent_field.dom.value;
+        }
+    }
 
+    // Check for parent changes periodically (fallback for legacy components)
+    var intervalId = setInterval(checkParentChanges, 500);
+
+    // Initialize parent values at startup (like initSelect in working template)
+    var parent_field = null;
+    for(var j = 0; j < fld.parents.length; j++) {
+        var parent = fld.parents[j];
+        parent_field = Ext.get('original' + parent);
+        if (parent_field) {
+            fld.baseParams[parent] = parent_field.dom.value;
+        }
+    }
+
+    fld.on('destroy', function() {
+        fld.baseParams = null;
+        if (intervalId) {
+            clearInterval(intervalId);
+        }
     });
-    
-    Ext.getCmp('modx-panel-resource').getForm().add(fld);
-    {/literal}
 });
+{/literal}
 // ]]>
-</script>
\ No newline at end of file
+</script>