From 26a4235028100dd1db8463eac3d49cf41df1e858 Mon Sep 17 00:00:00 2001 From: GogoVega <92022724+GogoVega@users.noreply.github.com> Date: Mon, 27 Nov 2023 10:55:27 +0100 Subject: [PATCH 1/4] Add support of propty validation msg 4 typeField --- .../@node-red/editor-client/src/js/ui/editor.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js index 0ef3892e7..b7cabd785 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js @@ -237,7 +237,13 @@ RED.editor = (function() { if (defaults[property].hasOwnProperty("format") && defaults[property].format !== "" && input[0].nodeName === "DIV") { value = input.text(); } - var valid = validateNodeProperty(node, defaults, property,value); + const isTypeField = + input.attr("type") === "hidden" && + input.css("display") === "none" && + input.attr("class") !== "red-ui-typedInput" && + input.closest("div").find("input").length >= 2; + input = isTypeField ? input.closest("div").find("input[class='red-ui-typedInput']") : input; + var valid = validateNodeProperty(node, defaults, property, value); if (((typeof valid) === "string") || !valid) { input.addClass("input-error"); input.next(".red-ui-typedInput-container").addClass("input-error"); @@ -245,9 +251,10 @@ RED.editor = (function() { var tooltip = input.data("tooltip"); if (tooltip) { tooltip.setContent(valid); - } - else { - tooltip = RED.popover.tooltip(input, valid); + } else { + const typedInput = input.next(".red-ui-typedInput-container").find(".red-ui-typedInput-input-wrap"); + const target = typedInput.length > 0 ? typedInput : input; + tooltip = RED.popover.tooltip(target, valid); input.data("tooltip", tooltip); } } From 2fc950295c1efed6c45cfed7c0fb7bc29840fe64 Mon Sep 17 00:00:00 2001 From: GogoVega <92022724+GogoVega@users.noreply.github.com> Date: Sat, 2 Dec 2023 13:51:07 +0100 Subject: [PATCH 2/4] Ensure the input is typeField + clean up --- .../editor-client/src/js/ui/editor.js | 25 ++++++++++--------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js index b7cabd785..c91f54ee2 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js @@ -230,28 +230,29 @@ RED.editor = (function() { } } - function validateNodeEditorProperty(node,defaults,property,prefix) { - var input = $("#"+prefix+"-"+property); + function validateNodeEditorProperty(node, defaults, property, prefix) { + let input = $("#"+prefix+"-"+property); if (input.length > 0) { - var value = input.val(); + let value = input.val(); if (defaults[property].hasOwnProperty("format") && defaults[property].format !== "" && input[0].nodeName === "DIV") { value = input.text(); } - const isTypeField = - input.attr("type") === "hidden" && - input.css("display") === "none" && - input.attr("class") !== "red-ui-typedInput" && - input.closest("div").find("input").length >= 2; - input = isTypeField ? input.closest("div").find("input[class='red-ui-typedInput']") : input; - var valid = validateNodeProperty(node, defaults, property, value); + if (input.attr("type") === "hidden") { // Possible typeField + const typedInput = input.closest("div").find("input[class='red-ui-typedInput']"); + const typeField = typedInput.data("noderedTypedInput")?.typeField; + const isTypeField = input.is(typeField); + if (isTypeField) input = typedInput; + } + const valid = validateNodeProperty(node, defaults, property, value); if (((typeof valid) === "string") || !valid) { input.addClass("input-error"); input.next(".red-ui-typedInput-container").addClass("input-error"); if ((typeof valid) === "string") { - var tooltip = input.data("tooltip"); + let tooltip = input.data("tooltip"); if (tooltip) { tooltip.setContent(valid); } else { + // If the input is typed => need the wrap to attach the tooltip const typedInput = input.next(".red-ui-typedInput-container").find(".red-ui-typedInput-input-wrap"); const target = typedInput.length > 0 ? typedInput : input; tooltip = RED.popover.tooltip(target, valid); @@ -261,7 +262,7 @@ RED.editor = (function() { } else { input.removeClass("input-error"); input.next(".red-ui-typedInput-container").removeClass("input-error"); - var tooltip = input.data("tooltip"); + const tooltip = input.data("tooltip"); if (tooltip) { input.data("tooltip", null); tooltip.delete(); From 680bd7915c4d27cc6dcda7d8560e35d14e70fc74 Mon Sep 17 00:00:00 2001 From: GogoVega <92022724+GogoVega@users.noreply.github.com> Date: Sat, 2 Dec 2023 13:57:34 +0100 Subject: [PATCH 3/4] Fix brackets required to pass building --- .../node_modules/@node-red/editor-client/src/js/ui/editor.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js index c91f54ee2..0ae63cfe3 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js @@ -241,7 +241,9 @@ RED.editor = (function() { const typedInput = input.closest("div").find("input[class='red-ui-typedInput']"); const typeField = typedInput.data("noderedTypedInput")?.typeField; const isTypeField = input.is(typeField); - if (isTypeField) input = typedInput; + if (isTypeField) { + input = typedInput; + } } const valid = validateNodeProperty(node, defaults, property, value); if (((typeof valid) === "string") || !valid) { From 235858fe1a8a2d5f7d75465b033da7ecde03b55d Mon Sep 17 00:00:00 2001 From: GogoVega <92022724+GogoVega@users.noreply.github.com> Date: Sun, 2 Jun 2024 17:22:01 +0200 Subject: [PATCH 4/4] Add some comments and ignore if no node validation for the property --- .../editor-client/src/js/ui/editor.js | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js index c2c76d217..32d9967ed 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js @@ -242,6 +242,13 @@ RED.editor = (function() { } } + /** + * Called when an input in the edit box changes. + * + * Marks the input as error (red field) if the input's value is invalid. + * If the validation function returns a String, a tooltip will be attached to the input + * like that the user can see the error message. + */ function validateNodeEditorProperty(node, defaults, property, prefix) { let input = $("#"+prefix+"-"+property); if (input.length > 0) { @@ -249,24 +256,32 @@ RED.editor = (function() { if (defaults[property].hasOwnProperty("format") && defaults[property].format !== "" && input[0].nodeName === "DIV") { value = input.text(); } - if (input.attr("type") === "hidden") { // Possible typeField + // Check if the input is a typeField + if (input.attr("type") === "hidden") { const typedInput = input.closest("div").find("input[class='red-ui-typedInput']"); const typeField = typedInput.data("noderedTypedInput")?.typeField; const isTypeField = input.is(typeField); if (isTypeField) { + // If typeField, must retrieve the typedInput to add the `input-error` class input = typedInput; } } + // If it's a typedInput and the node has no validator for this property, let's validate by typedInput + if (input.hasClass("red-ui-typedInput") && !defaults[property].validate) { + return; + } const valid = validateNodeProperty(node, defaults, property, value); + // If the input is invalid if (((typeof valid) === "string") || !valid) { input.addClass("input-error"); input.next(".red-ui-typedInput-container").addClass("input-error"); if ((typeof valid) === "string") { let tooltip = input.data("tooltip"); if (tooltip) { + // If the input has a tooltip, just modify the content tooltip.setContent(valid); } else { - // If the input is typed => need the wrap to attach the tooltip + // If the input is typed => attach the tooltip to the wrap const typedInput = input.next(".red-ui-typedInput-container").find(".red-ui-typedInput-input-wrap"); const target = typedInput.length > 0 ? typedInput : input; tooltip = RED.popover.tooltip(target, valid);