Merge pull request #4455 from Laravel-Backpack/js-fields-subfields-parent

JS fields - Added `parent` on subfields instead of `subfieldHolder`

Author: tabacitu

src/resources/views/crud/inc/form_fields_script.blade.php

@@ -11,7 +11,7 @@ class CrudField {
             this.name = name;
 
             // get the input/textarea/select that has that field name
-            this.$input = $('input[name="'+this.name+'"], textarea[name="'+this.name+'"], select[name="'+this.name+'"], select[name="'+this.name+'[]"]').first();
+            this.$input = $(`input[name="${this.name}"], textarea[name="${this.name}"], select[name="${this.name}"], select[name="${this.name}[]"]`).first();
 
             // get the field wraper
             this.wrapper = this.inputWrapper;
@@ -47,7 +47,7 @@ class CrudField {
             // otherwise, try to find the input using other selectors
             if (this.$input.length === 0) {
                 // try searching for the field with the corresponding bp-field-name
-                input = this.wrapper.find('input[bp-field-name="'+this.name+'"], textarea[bp-field-name="'+this.name+'"], select[bp-field-name="'+this.name+'"], select[bp-field-name="'+this.name+'[]"]').first();
+                input = this.wrapper.find(`input[bp-field-name="${this.name}"], textarea[bp-field-name="${this.name}"], select[bp-field-name="${this.name}"], select[bp-field-name="${this.name}[]"]`).first();
 
                 // if not input found yet, just get the first input in that wrapper
                 if (input.length === 0) {
@@ -78,11 +78,8 @@ class CrudField {
             const fieldChanged = (event, values) => bindedClosure(this, event, values);
 
             if(this.isSubfield) {
-                window.crud.subfieldsCallbacks = window.crud.subfieldsCallbacks ?? [];
-                window.crud.subfieldsCallbacks[this.subfieldHolder] = window.crud.subfieldsCallbacks[this.subfieldHolder] ?? [];
-                if(!window.crud.subfieldsCallbacks[this.subfieldHolder].some( callbacks => callbacks['fieldName'] === this.name )) {
-                    window.crud.subfieldsCallbacks[this.subfieldHolder].push({closure: closure, field: this});
-                }
+                window.crud.subfieldsCallbacks[this.parent.name] ??= [];
+                window.crud.subfieldsCallbacks[this.parent.name].push({ closure, field: this });
                 return this;
             }
 
@@ -96,15 +93,12 @@ class CrudField {
 
         change() {
             if(this.isSubfield) {
-                if(typeof window.crud.subfieldsCallbacks[this.subfieldHolder].length !== 'undefined') {
-                    window.crud.subfieldsCallbacks[this.subfieldHolder].forEach(item => {
-                        item.triggerChange = true;
-                    });
-                }
-                return this;
+                window.crud.subfieldsCallbacks[this.parent.name]?.forEach(callback => callback.triggerChange = true);
+            } else {
+                this.$input.trigger(`change`);
             }
 
-            this.$input.trigger(`change`);
+            return this;
         }
 
         show(value = true) {
@@ -149,10 +143,12 @@ class CrudField {
         subfield(name, rowNumber = false) {
             let subfield = new CrudField(this.name);
             subfield.name = name;
+
             if(!rowNumber) {
                 subfield.isSubfield = true;
-                subfield.subfieldHolder = this.name;
-            }else{
+                subfield.subfieldHolder = this.name; // deprecated
+                subfield.parent = this;
+            } else {
                 subfield.rowNumber = rowNumber;
                 subfield.wrapper = $(`[data-repeatable-identifier="${this.name}"][data-row-number="${rowNumber}"]`).find(`[bp-field-wrapper][bp-field-name$="${name}"]`);
                 subfield.$input = subfield.wrapper.find(`[data-repeatable-input-name$="${name}"][bp-field-main-input]`);
@@ -174,10 +170,13 @@ class CrudField {
     window.crud = {
         ...window.crud,
 
+        // Subfields callbacks holder
+        subfieldsCallbacks: [],
+
         // Create a field from a given name
         field: name => new CrudField(name),
 
         // Create all fields from a given name list
         fields: names => names.map(window.crud.field),
     };
-</script>
+</script>