From e47abb3c9a6ffb5c0df17ad86da7cdb716c8efbc Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Mon, 6 Dec 2021 16:56:55 +0100
Subject: [PATCH] fix(ui): checkboxes in form service

---
 app/views/console/database/document.phtml  |  1 +
 app/views/console/functions/function.phtml |  2 +-
 app/views/console/keys/index.phtml         |  4 ++--
 app/views/console/webhooks/index.phtml     |  4 ++--
 public/dist/scripts/app-all.js             |  3 ++-
 public/dist/scripts/app.js                 |  3 ++-
 public/scripts/services/form.js            | 17 ++++++++++++++---
 7 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/app/views/console/database/document.phtml b/app/views/console/database/document.phtml
index da0413e77..3da18656f 100644
--- a/app/views/console/database/document.phtml
+++ b/app/views/console/database/document.phtml
@@ -213,6 +213,7 @@ $logs = $this->getParam('logs', null);
                                                                                 :class="(doc[attr.key].length - 1) === index ? 'margin-bottom' : ''"
                                                                                 type="checkbox"
                                                                                 :name="attr.key"
+                                                                                :value="attr.key"
                                                                                 :checked="doc[attr.key][index]" />
                                                                         </template>
                                                                         <template x-if="attr.type === 'string' && !attr.format">
diff --git a/app/views/console/functions/function.phtml b/app/views/console/functions/function.phtml
index 7554fd62e..39c4a5094 100644
--- a/app/views/console/functions/function.phtml
+++ b/app/views/console/functions/function.phtml
@@ -465,7 +465,7 @@ $usageStatsEnabled = $this->getParam('usageStatsEnabled', true);
                                     <div class="row responsive thin margin-top-small">
                                         <?php foreach ($events as $i => $event): ?>
                                             <div class="col span-6 text-one-liner margin-bottom text-height-large text-size-small" title="<?php echo $event; ?>">
-                                                <input type="checkbox" name="events" data-ls-bind="{{project-function.events}}" id="<?php echo $event; ?>" value="<?php echo $event; ?>" />
+                                                <input type="checkbox" name="events" data-ls-bind="{{project-function.events}}" id="<?php echo $event; ?>" value="<?php echo $event; ?>" data-by-key="true" />
                                                 &nbsp;
                                                 <label class="inline" for="<?php echo $event; ?>"><?php echo $event; ?></label>
                                             </div>
diff --git a/app/views/console/keys/index.phtml b/app/views/console/keys/index.phtml
index 187bc1ccb..8a0ce2c01 100644
--- a/app/views/console/keys/index.phtml
+++ b/app/views/console/keys/index.phtml
@@ -59,7 +59,7 @@ $scopes = $this->getParam('scopes', []);
                             <div class="row responsive thin">
                                 <?php foreach ($scopes as $i => $scope): ?>
                                     <div class="col span-6 text-one-liner margin-bottom text-height-large text-size-small" title="<?php echo $scope; ?>">
-                                        <input data-ls-attrs="id=scope-<?php echo $scope; ?>" type="checkbox" name="scopes" data-ls-bind="{{key.scopes}}" value="<?php echo $scope; ?>" />
+                                        <input data-ls-attrs="id=scope-<?php echo $scope; ?>" type="checkbox" name="scopes" data-ls-bind="{{key.scopes}}" value="<?php echo $scope; ?>" data-by-key="true" />
                                         &nbsp;
                                         <label class="inline" for="scope-<?php echo $scope; ?>"><?php echo $scope; ?></label>
                                     </div>
@@ -162,7 +162,7 @@ $scopes = $this->getParam('scopes', []);
                     <div class="row responsive thin">
                         <?php foreach ($scopes as $i => $scope): ?>
                             <div class="col span-6 text-one-liner margin-bottom text-height-large text-size-small" title="<?php echo $scope; ?>">
-                                <input type="checkbox" name="scopes" id="<?php echo $scope; ?>" value="<?php echo $scope; ?>" />
+                                <input type="checkbox" name="scopes" id="<?php echo $scope; ?>" value="<?php echo $scope; ?>" data-by-key="true" />
                                 &nbsp;
                                 <label class="inline" for="<?php echo $scope; ?>"><?php echo $scope; ?></label>
                             </div>
diff --git a/app/views/console/webhooks/index.phtml b/app/views/console/webhooks/index.phtml
index 72bcd3d00..92ffbf5c4 100644
--- a/app/views/console/webhooks/index.phtml
+++ b/app/views/console/webhooks/index.phtml
@@ -66,7 +66,7 @@ $events = array_keys($this->getParam('events', []));
                             <div class="row responsive thin">
                                 <?php foreach ($events as $i => $event): ?>
                                     <div class="col span-6 text-one-liner margin-bottom text-height-large text-size-small" title="<?php echo $event; ?>">
-                                        <input type="checkbox" name="events" data-ls-bind="{{webhook.events}}" id="update-<?php echo $event; ?>" value="<?php echo $event; ?>" />
+                                        <input type="checkbox" name="events" data-ls-bind="{{webhook.events}}" id="update-<?php echo $event; ?>" value="<?php echo $event; ?>" data-by-key="true" />
                                         &nbsp;
                                         <label class="inline" for="update-<?php echo $event; ?>"><?php echo $event; ?></label>
                                     </div>
@@ -188,7 +188,7 @@ $events = array_keys($this->getParam('events', []));
                     <div class="row responsive thin">
                         <?php foreach ($events as $i => $event): ?>
                             <div class="col span-6 text-one-liner margin-bottom text-height-large text-size-small" title="<?php echo $event; ?>">
-                                <input type="checkbox" name="events" id="add-<?php echo $event; ?>" value="<?php echo $event; ?>" />
+                                <input type="checkbox" name="events" id="add-<?php echo $event; ?>" value="<?php echo $event; ?>" data-by-key="true" />
                                 &nbsp;
                                 <label class="inline" for="add-<?php echo $event; ?>"><?php echo $event; ?></label>
                             </div>
diff --git a/public/dist/scripts/app-all.js b/public/dist/scripts/app-all.js
index cbddd2d61..00b0ccd64 100644
--- a/public/dist/scripts/app-all.js
+++ b/public/dist/scripts/app-all.js
@@ -3565,7 +3565,8 @@ else{if(!Array.isArray(json[name])){json[name]=[];}
 json[name].push({});ref=json[name][json[name].length-1];}}
 else if(undefined!==element.value){if('SELECT'===element.tagName&&element.children>0){json[name]=element.children[element.selectedIndex].value;}
 else if('radio'===type){if(element.checked){json[name]=element.value;}}
-else if('checkbox'===type){if(Array.isArray(json[name])){json[name].push(element.checked);}else{json[name]=element.checked;}}
+else if('checkbox'===type){const byKey=!!element.getAttribute('data-by-key');if(byKey){if(!Array.isArray(json[name])){json[name]=[];}
+if(element.checked){json[name].push(element.value);}}else{if(Array.isArray(json[name])){json[name].push(element.checked);}else{json[name]=element.checked;}}}
 else if('file'===type){json[name]=element.files[0];}
 else if(undefined!==element.value){if((json[name]!==undefined)&&(!Array.isArray(json[name]))){json[name]=[json[name]];}
 if(Array.isArray(json[name])){json[name].push(element.value);}
diff --git a/public/dist/scripts/app.js b/public/dist/scripts/app.js
index c7eb1c9ee..401dc9f0c 100644
--- a/public/dist/scripts/app.js
+++ b/public/dist/scripts/app.js
@@ -631,7 +631,8 @@ else{if(!Array.isArray(json[name])){json[name]=[];}
 json[name].push({});ref=json[name][json[name].length-1];}}
 else if(undefined!==element.value){if('SELECT'===element.tagName&&element.children>0){json[name]=element.children[element.selectedIndex].value;}
 else if('radio'===type){if(element.checked){json[name]=element.value;}}
-else if('checkbox'===type){if(Array.isArray(json[name])){json[name].push(element.checked);}else{json[name]=element.checked;}}
+else if('checkbox'===type){const byKey=!!element.getAttribute('data-by-key');if(byKey){if(!Array.isArray(json[name])){json[name]=[];}
+if(element.checked){json[name].push(element.value);}}else{if(Array.isArray(json[name])){json[name].push(element.checked);}else{json[name]=element.checked;}}}
 else if('file'===type){json[name]=element.files[0];}
 else if(undefined!==element.value){if((json[name]!==undefined)&&(!Array.isArray(json[name]))){json[name]=[json[name]];}
 if(Array.isArray(json[name])){json[name].push(element.value);}
diff --git a/public/scripts/services/form.js b/public/scripts/services/form.js
index c0f033ec1..6e7e1c3fc 100644
--- a/public/scripts/services/form.js
+++ b/public/scripts/services/form.js
@@ -90,10 +90,21 @@
                         }
                     }
                     else if ('checkbox' === type) { // Checkbox
-                        if (Array.isArray(json[name])) {
-                            json[name].push(element.checked);
+                        const byKey = !!element.getAttribute('data-by-key');
+                        if (byKey) {
+                            if (!Array.isArray(json[name])) {
+                                json[name] = [];
+                            }
+
+                            if (element.checked) {
+                                json[name].push(element.value);
+                            }
                         } else {
-                            json[name] = element.checked;
+                            if (Array.isArray(json[name])) {
+                                json[name].push(element.checked);
+                            } else {
+                                json[name] = element.checked;
+                            }
                         }
                     }
                     else if ('file' === type) { // File upload