frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4627 from GogoVega/button-add-config-node

Browse Source 
Separate the "add new config-node" option into a new (+) button
This commit is contained in:
Nick O'Leary 2024-04-04 16:11:52 +01:00 committed by GitHub
commit d396f50a9a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 47 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
packages/node_modules/@node-red/editor-client/src/js/ui/editor.js vendored
View File

@ -341,8 +341,9 @@ RED.editor = (function() {
nodeValue = node[property]
}
const buttonId = `${prefix}-lookup-${property}`
const selectId = prefix + '-' + property
const addBtnId = `${prefix}-btn-${property}-add`;
const editBtnId = `${prefix}-btn-${property}-edit`;
const selectId = prefix + '-' + property;
const input = $(`#${selectId}`);
if (input.length === 0) {
return;
@ -365,40 +366,68 @@ RED.editor = (function() {
select.css({
'flex-grow': 1
});
updateConfigNodeSelect(property, type, nodeValue, prefix, filter);
const disableButton = function(disabled) {
btn.prop( "disabled", !!disabled)
btn.toggleClass("disabled", !!disabled)
}
// create the edit button
const btn = $('<a id="' + buttonId + '" class="red-ui-button"><i class="fa fa-pencil"></i></a>')
const editButton = $('<a id="' + editBtnId + '" class="red-ui-button"><i class="fa fa-pencil"></i></a>')
.css({ "margin-left": "10px" })
.appendTo(outerWrap);
RED.popover.tooltip(editButton, RED._('editor.editConfig', { type }));
// create the add button
const addButton = $('<a id="' + addBtnId + '" class="red-ui-button"><i class="fa fa-plus"></i></a>')
.css({ "margin-left": "10px" })
.appendTo(outerWrap);
RED.popover.tooltip(addButton, RED._('editor.addNewConfig', { type }));
const disableButton = function(button, disabled) {
$(button).prop("disabled", !!disabled)
$(button).toggleClass("disabled", !!disabled)
};
// add the click handler
btn.on("click", function (e) {
addButton.on("click", function (e) {
if (addButton.prop("disabled")) { return }
showEditConfigNodeDialog(property, type, "_ADD_", prefix, node);
e.preventDefault();
});
editButton.on("click", function (e) {
const selectedOpt = select.find(":selected")
if (selectedOpt.data('env')) { return } // don't show the dialog for env vars items (MVP. Future enhancement: lookup the env, if present, show the associated edit dialog)
if (btn.prop("disabled")) { return }
if (editButton.prop("disabled")) { return }
showEditConfigNodeDialog(property, type, selectedOpt.val(), prefix, node);
e.preventDefault();
});
// dont permit the user to click the button if the selected option is an env var
select.on("change", function () {
const selectedOpt = select.find(":selected")
const selectedOpt = select.find(":selected");
const optionsLength = select.find("option").length;
if (selectedOpt?.data('env')) {
disableButton(true)
disableButton(addButton, true);
disableButton(editButton, true);
// disable the edit button if no options available
} else if (optionsLength === 1 && selectedOpt.val() === "_ADD_") {
disableButton(addButton, false);
disableButton(editButton, true);
} else if (selectedOpt.val() === "") {
disableButton(addButton, false);
disableButton(editButton, true);
} else {
disableButton(false)
disableButton(addButton, false);
disableButton(editButton, false);
}
});
var label = "";
var configNode = RED.nodes.node(nodeValue);
if (configNode) {
label = RED.utils.getNodeLabel(configNode, configNode.id);
}
input.val(label);
}
@ -892,7 +921,12 @@ RED.editor = (function() {
}
}
select.append('<option value="_ADD_"'+(value===""?" selected":"")+'>'+RED._("editor.addNewType", {type:label})+'</option>');
if (!configNodes.length) {
select.append('<option value="_ADD_" selected>' + RED._("editor.addNewType", { type: label }) + '</option>');
} else {
select.append('<option value="">' + RED._("editor.inputs.none") + '</option>');
}
window.setTimeout(function() { select.trigger("change");},50);
}
}