From 04c75a82565dc91152dbd961e2f531966255b5a8 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Wed, 27 Oct 2021 18:54:57 +0200
Subject: [PATCH] fix(ui): required fields now are properly set in DOM

---
 app/views/console/database/document.phtml | 14 +++++++-------
 gulpfile.js                               |  2 +-
 public/scripts/views/forms/required.js    | 15 +++++++++++++++
 3 files changed, 23 insertions(+), 8 deletions(-)
 create mode 100644 public/scripts/views/forms/required.js

diff --git a/app/views/console/database/document.phtml b/app/views/console/database/document.phtml
index 80937c989..64ad89eaa 100644
--- a/app/views/console/database/document.phtml
+++ b/app/views/console/database/document.phtml
@@ -189,19 +189,19 @@ $logs = $this->getParam('logs', null);
 </div>
 
 <script type="text/html" id="template-string">
-    <textarea data-forms-text-resize data-forms-text-direction data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}},required={{attribute.required}}" data-ls-bind="{{project-document|documentAttribute}}"></textarea>
+    <textarea data-forms-text-resize data-forms-text-direction data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}}" data-forms-required="{{attribute.required}}" data-ls-bind="{{project-document|documentAttribute}}"></textarea>
 </script>
 
 <script type="text/html" id="template-string-array">
-    <textarea data-forms-text-resize data-forms-text-direction data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}},required={{attribute.required}}" data-ls-bind="{{project-document|documentAttribute}}"></textarea>
+    <textarea data-forms-text-resize data-forms-text-direction data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}}" data-forms-required="{{attribute.required}}" data-ls-bind="{{project-document|documentAttribute}}"></textarea>
 </script>
 
 <script type="text/html" id="template-integer">
-    <input type="number" step="1" data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}},required={{attribute.required}}" data-ls-bind="{{project-document|documentAttribute}}" data-cast-to="integer" />
+    <input type="number" step="1" data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}}" data-forms-required="{{attribute.required}}" data-ls-bind="{{project-document|documentAttribute}}" data-cast-to="integer" />
 </script>
 
 <script type="text/html" id="template-double">
-    <input type="number" step="0.01" data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}},required={{attribute.required}}" data-ls-bind="{{project-document|documentAttribute}}" data-cast-to="float" />
+    <input type="number" step="0.01" data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}}" data-forms-required="{{attribute.required}}" data-ls-bind="{{project-document|documentAttribute}}" data-cast-to="float" />
 </script>
 
 <script type="text/html" id="template-boolean">
@@ -209,13 +209,13 @@ $logs = $this->getParam('logs', null);
 </script>
 
 <script type="text/html" id="template-url">
-    <input type="url" data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}},required={{attribute.required}}" data-ls-bind="{{project-document|documentAttribute}}" />
+    <input type="url" data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}}" data-forms-required="{{attribute.required}}" data-ls-bind="{{project-document|documentAttribute}}" />
 </script>
 
 <script type="text/html" id="template-email">
-    <input type="email" data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}},required={{attribute.required}}" data-ls-bind="{{project-document|documentAttribute}}" />
+    <input type="email" data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}}" data-forms-required="{{attribute.required}}" data-ls-bind="{{project-document|documentAttribute}}" />
 </script>
 
 <script type="text/html" id="template-ip">
-    <input type="text" data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}},required={{attribute.required}}" data-ls-bind="{{project-document|documentAttribute}}" pattern="((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))" title="Enter a valid IPV4 or IPV6 address" />
+    <input type="text" data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}}" data-forms-required="{{attribute.required}}" data-ls-bind="{{project-document|documentAttribute}}" pattern="((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))" title="Enter a valid IPV4 or IPV6 address" />
 </script>
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index 56af95c66..5f745cc56 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -41,7 +41,6 @@ const configApp  = {
 
         'public/scripts/views/forms/clone.js',
         'public/scripts/views/forms/add.js',
-        'public/scripts/views/forms/condition.js',
         'public/scripts/views/forms/chart.js',
         'public/scripts/views/forms/chart-bar.js',
         'public/scripts/views/forms/code.js',
@@ -60,6 +59,7 @@ const configApp  = {
         'public/scripts/views/forms/oauth-apple.js',
         'public/scripts/views/forms/password-meter.js',
         'public/scripts/views/forms/pell.js',
+        'public/scripts/views/forms/required.js',
         'public/scripts/views/forms/remove.js',
         'public/scripts/views/forms/run.js',
         'public/scripts/views/forms/select-all.js',
diff --git a/public/scripts/views/forms/required.js b/public/scripts/views/forms/required.js
new file mode 100644
index 000000000..2d9184e30
--- /dev/null
+++ b/public/scripts/views/forms/required.js
@@ -0,0 +1,15 @@
+(function(window) {
+  "use strict";
+
+  window.ls.container.get("view").add({
+    selector: "data-forms-required",
+    controller: function(element, expression) {
+      const isRequired = expression.parse(element.getAttribute('data-forms-required')) === "true";
+      if (isRequired) {
+        element.setAttribute("required", true);
+      } else {
+        element.removeAttribute("disabled");
+      }
+    }
+  });
+})(window);