Handle collections of checkboxes as data arrays

Author: Lustmored

src/LiveComponent/assets/dist/live_controller.js

@@ -953,14 +953,26 @@ function buildSearchParams(searchParams, data) {
     return searchParams;
 }
 
-function setDeepData(data, propertyPath, value) {
+function setDeepData(data, propertyPath, value, modelValue = null) {
     const finalData = JSON.parse(JSON.stringify(data));
     let currentLevelData = finalData;
     const parts = propertyPath.split('.');
     for (let i = 0; i < parts.length - 1; i++) {
         currentLevelData = currentLevelData[parts[i]];
     }
     const finalKey = parts[parts.length - 1];
+    if (currentLevelData instanceof Array) {
+        if (null === value) {
+            const index = currentLevelData.indexOf(modelValue);
+            if (index > -1) {
+                currentLevelData.splice(index, 1);
+            }
+        }
+        else {
+            currentLevelData.push(value);
+        }
+        return finalData;
+    }
     if (typeof currentLevelData !== 'object') {
         const lastPart = parts.pop();
         throw new Error(`Cannot set data-model="${propertyPath}". They parent "${parts.join(',')}" data does not appear to be an object (it's "${currentLevelData}"). Did you forget to add exposed={"${lastPart}"} to its LiveProp?`);
@@ -1126,9 +1138,9 @@ class default_1 extends Controller {
             }
             throw new Error(`The update() method could not be called for "${clonedElement.outerHTML}": the element must either have a "data-model" or "name" attribute set to the model name.`);
         }
-        this.$updateModel(model, value, shouldRender, element.hasAttribute('name') ? element.getAttribute('name') : null);
+        this.$updateModel(model, value, shouldRender, element.hasAttribute('name') ? element.getAttribute('name') : null, {}, element.hasAttribute('value') ? element.getAttribute('value') : null);
     }
-    $updateModel(model, value, shouldRender = true, extraModelName = null, options = {}) {
+    $updateModel(model, value, shouldRender = true, extraModelName = null, options = {}, modelValue = null) {
         const directives = parseDirectives(model);
         if (directives.length > 1) {
             throw new Error(`The data-model="${model}" format is invalid: it does not support multiple directives (i.e. remove any spaces).`);
@@ -1151,9 +1163,10 @@ class default_1 extends Controller {
                 modelName,
                 extraModelName: normalizedExtraModelName,
                 value,
+                modelValue
             });
         }
-        this.dataValue = setDeepData(this.dataValue, modelName, value);
+        this.dataValue = setDeepData(this.dataValue, modelName, value, modelValue);
         directive.modifiers.forEach((modifier => {
             switch (modifier.name) {
                 default:
@@ -1470,7 +1483,7 @@ class default_1 extends Controller {
         }
         this.$updateModel(foundModelName, event.detail.value, false, null, {
             dispatch: false
-        });
+        }, event.detail.modelValue);
     }
     _shouldChildLiveElementUpdate(fromEl, toEl) {
         if (!fromEl.dataset.originalData) {

src/LiveComponent/assets/src/live_controller.ts

@@ -216,7 +216,7 @@ export default class extends Controller {
             throw new Error(`The update() method could not be called for "${clonedElement.outerHTML}": the element must either have a "data-model" or "name" attribute set to the model name.`);
         }
 
-        this.$updateModel(model, value, shouldRender, element.hasAttribute('name') ? element.getAttribute('name') : null);
+        this.$updateModel(model, value, shouldRender, element.hasAttribute('name') ? element.getAttribute('name') : null, {}, element.hasAttribute('value') ? element.getAttribute('value') : null);
     }
 
     /**
@@ -235,8 +235,9 @@ export default class extends Controller {
      * @param {boolean} shouldRender Whether a re-render should be triggered
      * @param {string|null} extraModelName Another model name that this might go by in a parent component.
      * @param {Object} options Options include: {bool} dispatch
+     * @param {any} modelValue Original HTML element value (for handling collection checkbox fields)
      */
-    $updateModel(model: string, value: any, shouldRender = true, extraModelName: string | null = null, options: any = {}) {
+    $updateModel(model: string, value: any, shouldRender = true, extraModelName: string | null = null, options: any = {}, modelValue: any = null) {
         const directives = parseDirectives(model);
         if (directives.length > 1) {
             throw new Error(`The data-model="${model}" format is invalid: it does not support multiple directives (i.e. remove any spaces).`);
@@ -267,6 +268,7 @@ export default class extends Controller {
                 modelName,
                 extraModelName: normalizedExtraModelName,
                 value,
+                modelValue
             });
         }
 
@@ -283,7 +285,7 @@ export default class extends Controller {
         // Then, then modify the data-model="post.title" field. In theory,
         // we should be smart enough to convert the post data - which is now
         // the string "4" - back into an array with [id=4, title=new_title].
-        this.dataValue = setDeepData(this.dataValue, modelName, value);
+        this.dataValue = setDeepData(this.dataValue, modelName, value, modelValue);
 
         directive.modifiers.forEach((modifier => {
             switch (modifier.name) {
@@ -713,7 +715,8 @@ export default class extends Controller {
             null,
             {
                 dispatch: false
-            }
+            },
+            event.detail.modelValue
         );
     }
 

src/LiveComponent/assets/src/set_deep_data.ts

@@ -1,5 +1,5 @@
 // post.user.username
-export function setDeepData(data, propertyPath, value) {
+export function setDeepData(data, propertyPath, value, modelValue = null) {
     // cheap way to deep clone simple data
     const finalData = JSON.parse(JSON.stringify(data));
 
@@ -14,6 +14,21 @@ export function setDeepData(data, propertyPath, value) {
     // now finally change the key on that deeper object
     const finalKey = parts[parts.length - 1];
 
+    // if currentLevelData is an array we are in a collection situation
+    // we need to handle addition and removal of values from it to send
+    // back only required data
+    if (currentLevelData instanceof Array) {
+        if (null === value) {
+            const index = currentLevelData.indexOf(modelValue);
+            if (index > -1) {
+                currentLevelData.splice(index, 1);
+            }
+        } else {
+            currentLevelData.push(value);
+        }
+        return finalData;
+    }
+
     // make sure the currentLevelData is an object, not a scalar
     // if it is, it means the initial data didn't know that sub-properties
     // could be exposed. Or, you're just trying to set some deep