Skip to content

Commit

Permalink
fix widget not showing in layout manager; bump version
Browse files Browse the repository at this point in the history
  • Loading branch information
@luisthieme
luisthieme committed Jul 22, 2024
1 parent ed17eab commit c182e39
Show file tree
Hide file tree
Showing 5 changed files with 345 additions and 321 deletions.
322 changes: 173 additions & 149 deletions nodes/dynamic-form.html
View file
Original file line number Diff line number Diff line change
@@ -1,168 +1,192 @@
<script type="text/javascript">
RED.nodes.registerType('dynamic-form', {
category: 'ProcessCube UI',
color: '#00aed7',
defaults: {
name: { value: "" },
group: { type: 'ui-group', required: true },
order: { value: 0 },
options: {
value: [{ label: ''}],
validate: function (v) {
const unique = new Set(v.map(function (o) { return o.label }));
return v.length === unique.size;
}
},
waiting_title: { value: "Waiting for Warten auf den Usertask..." },
waiting_info: { value: "Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist." },
width: {
value: 0,
validate: function (v) {
const width = v || 0
const currentGroup = $('#node-input-group').val() || this.group
const groupNode = RED.nodes.node(currentGroup)
const valid = !groupNode || +width <= +groupNode.width
$('#node-input-size').toggleClass('input-error', !valid)
return valid
}
},
height: { value: 0 },
outputs: { value: 1}
RED.nodes.registerType("ui-dynamic-form", {
category: "ProcessCube UI",
color: "#00aed7",
defaults: {
name: { value: "" },
group: { type: "ui-group", required: true },
order: { value: 0 },
options: {
value: [{ label: "" }],
validate: function (v) {
const unique = new Set(
v.map(function (o) {
return o.label;
})
);
return v.length === unique.size;
},
inputs: 1,
outputs: 1,
outputLabels: function(index) {
return this.options[index].label
},
waiting_title: { value: "Waiting for Warten auf den Usertask..." },
waiting_info: {
value:
"Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist.",
},
width: {
value: 0,
validate: function (v) {
const width = v || 0;
const currentGroup = $("#node-input-group").val() || this.group;
const groupNode = RED.nodes.node(currentGroup);
const valid = !groupNode || +width <= +groupNode.width;
$("#node-input-size").toggleClass("input-error", !valid);
return valid;
},
icon: "file.svg",
label: function() {
return this.name || "dynamic-form";
},
oneditprepare: function () {
$('#node-input-size').elementSizer({
width: '#node-input-width',
height: '#node-input-height',
group: '#node-input-group'
});
},
height: { value: 0 },
outputs: { value: 1 },
},
inputs: 1,
outputs: 1,
outputLabels: function (index) {
return this.options[index].label;
},
icon: "file.svg",
label: function () {
return this.name || "dynamic-form";
},
oneditprepare: function () {
$("#node-input-size").elementSizer({
width: "#node-input-width",
height: "#node-input-height",
group: "#node-input-group",
});

function generateOption(i, option) {
const container = $('<li/>', {
style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;'
});
function generateOption(i, option) {
const container = $("<li/>", {
style:
"background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;",
});

// Create input fields for value and label
const row = $('<div/>').appendTo(container);
$('<input/>', {
class: 'node-input-option-label',
type: 'text',
style: 'margin-left:7px; width:calc(100% - 48px);',
placeholder: 'Label',
value: option.label
}).appendTo(row).typedInput({
type: 'str', types: ['str']
});
// Create input fields for value and label
const row = $("<div/>").appendTo(container);
$("<input/>", {
class: "node-input-option-label",
type: "text",
style: "margin-left:7px; width:calc(100% - 48px);",
placeholder: "Label",
value: option.label,
})
.appendTo(row)
.typedInput({
type: "str",
types: ["str"],
});

// $('<input/>', {
// class: 'node-input-option-condition',
// type: 'text',
// style: 'margin-left:7px; width:calc(50% - 32px);',
// placeholder: 'Condition',
// value: option.condition
// }).appendTo(row).typedInput({
// type: 'str', types: ['str']
// });
// $('<input/>', {
// class: 'node-input-option-condition',
// type: 'text',
// style: 'margin-left:7px; width:calc(50% - 32px);',
// placeholder: 'Condition',
// value: option.condition
// }).appendTo(row).typedInput({
// type: 'str', types: ['str']
// });

// Create delete button for the option
const finalSpan = $('<span/>', { style: 'float:right; margin-right:8px;' }).appendTo(row);
const deleteButton = $('<a/>', { href: '#', class: 'editor-button editor-button-small', style: 'margin-top:7px; margin-left:5px;' }).appendTo(finalSpan);
$('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton);
// Create delete button for the option
const finalSpan = $("<span/>", {
style: "float:right; margin-right:8px;",
}).appendTo(row);
const deleteButton = $("<a/>", {
href: "#",
class: "editor-button editor-button-small",
style: "margin-top:7px; margin-left:5px;",
}).appendTo(finalSpan);
$("<i/>", { class: "fa fa-remove" }).appendTo(deleteButton);

deleteButton.click(function () {
container.css({ background: 'var(--red-ui-secondary-background-inactive, #fee)' });
container.fadeOut(300, function () {
$(this).remove();
});
});
deleteButton.click(function () {
container.css({
background: "var(--red-ui-secondary-background-inactive, #fee)",
});
container.fadeOut(300, function () {
$(this).remove();
});
});

$('#node-input-option-container').append(container);
}
$("#node-input-option-container").append(container);
}

$('#node-input-add-option').click(function () {
generateOption($('#node-input-option-container').children().length + 1, {});
$('#node-input-option-container-div').scrollTop($('#node-input-option-container-div').get(0).scrollHeight);
});
$("#node-input-add-option").click(function () {
generateOption(
$("#node-input-option-container").children().length + 1,
{}
);
$("#node-input-option-container-div").scrollTop(
$("#node-input-option-container-div").get(0).scrollHeight
);
});

for (let i = 0; i < this.options.length; i++) {
const option = this.options[i];
generateOption(i + 1, option);
}
for (let i = 0; i < this.options.length; i++) {
const option = this.options[i];
generateOption(i + 1, option);
}

$('#node-input-option-container').sortable({
axis: 'y',
handle: '.node-input-option-handle',
cursor: 'move'
});
},
oneditsave: function () {
const options = $('#node-input-option-container').children();
const node = this;
node.options = [];
options.each(function (i) {
const option = $(this);
const o = {
label: option.find('.node-input-option-label').val(),
// condition: option.find('.node-input-option-condition').val()
};
$("#node-input-option-container").sortable({
axis: "y",
handle: ".node-input-option-handle",
cursor: "move",
});
},
oneditsave: function () {
const options = $("#node-input-option-container").children();
const node = this;
node.options = [];
options.each(function (i) {
const option = $(this);
const o = {
label: option.find(".node-input-option-label").val(),
// condition: option.find('.node-input-option-condition').val()
};

node.options.push(o);
});
node.options.push(o);
});

this.outputs = node.options.length || 1
},
});
this.outputs = node.options.length || 1;
},
});
</script>

<script type="text/html" data-template-name="dynamic-form">
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
<div class="form-row">
<label for="node-input-group"><i class="fa fa-table"></i> Group</label>
<input type="text" id="node-input-group">
</div>
<div class="form-row">
<label><i class="fa fa-object-group"></i> <span data-i18n="dynamic-form.label.size"></label>
<input type="hidden" id="node-input-width">
<input type="hidden" id="node-input-height">
<button class="editor-button" id="node-input-size"></button>
</div>
<script type="text/html" data-template-name="ui-dynamic-form">
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
<div class="form-row">
<label for="node-input-group"><i class="fa fa-table"></i> Group</label>
<input type="text" id="node-input-group">
</div>
<div class="form-row">
<label><i class="fa fa-object-group"></i> <span data-i18n="ui-dynamic-form.label.size"></label>
<input type="hidden" id="node-input-width">
<input type="hidden" id="node-input-height">
<button class="editor-button" id="node-input-size"></button>
</div>

<div class="form-row form-row-flex node-input-option-container-row" style="margin-bottom: 0px;width: 100%">
<label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Actions</label>
<div id="node-input-option-container-div" style="box-sizing:border-box; border-radius:5px; height:257px; padding:5px; border:1px solid var(--red-ui-form-input-border-color, #ccc); overflow-y:scroll; display:inline-block; width: 70%;">
<span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
<ol id="node-input-option-container" style="list-style-type:none; margin:0;"></ol>
</div>
<a
data-html="true"
title="Dynamic Property: Send 'msg.options' in order to override this property."
class="red-ui-button ui-node-popover-title"
style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
<i style="font-family: ui-serif;">fx</i>
</a>
</div>
<!-- Add Option Button -->
<div class="form-row">
<a href="#" class="editor-button editor-button-small" id="node-input-add-option" style="margin-top:4px; margin-left:103px;"><i class="fa fa-plus"></i> <span>action</span></a>
</div>
<div class="form-row form-row-flex node-input-option-container-row" style="margin-bottom: 0px;width: 100%">
<label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Actions</label>
<div id="node-input-option-container-div" style="box-sizing:border-box; border-radius:5px; height:257px; padding:5px; border:1px solid var(--red-ui-form-input-border-color, #ccc); overflow-y:scroll; display:inline-block; width: 70%;">
<span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
<ol id="node-input-option-container" style="list-style-type:none; margin:0;"></ol>
</div>
<a
data-html="true"
title="Dynamic Property: Send 'msg.options' in order to override this property."
class="red-ui-button ui-node-popover-title"
style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
<i style="font-family: ui-serif;">fx</i>
</a>
</div>
<!-- Add Option Button -->
<div class="form-row">
<a href="#" class="editor-button editor-button-small" id="node-input-add-option" style="margin-top:4px; margin-left:103px;"><i class="fa fa-plus"></i> <span>action</span></a>
</div>

<div class="form-row">
<label for="node-input-waiting_title"><i class="fa fa-hand"></i>Title for waiting text.</label>
<input type="text" id="node-input-waiting_title">
</div>
<div class="form-row">
<label for="node-input-waiting_info"><i class="fa fa-hand"></i>Text for waiting text.</label>
<input type="text" id="node-input-waiting_info">
</div>
<div class="form-row">
<label for="node-input-waiting_title"><i class="fa fa-hand"></i>Title for waiting text.</label>
<input type="text" id="node-input-waiting_title">
</div>
<div class="form-row">
<label for="node-input-waiting_info"><i class="fa fa-hand"></i>Text for waiting text.</label>
<input type="text" id="node-input-waiting_info">
</div>
</script>
Loading

0 comments on commit c182e39

Please sign in to comment.