Skip to content

W
web-ui
Commit 4e62f742 by Leonard Ambros II
Options

Merge branch 'feature-WG-387' into 'development'

Changed implementation for generating "others" field in options. See merge request !58
parents 2df749bb 72b8e641
Showing with 110 additions and 96 deletions
WebGde/WebContent/WebGde-Widgets/DataInputWidget/generateFields.js
......@@ -466,60 +466,67 @@ const inputChecklist = (key, validation) => {
var dropdownContent = document.createElement('div');
dropdownContent.classList.add('dropdown-content');
dropdown1.appendChild(dropdownContent);
var isOther = false;
// Create the checkboxes for each item
items.forEach(function (item, index) {
var div = document.createElement('div');
div.classList.add('checkbox');
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.name = 'checkboxChoices';
checkbox.value = item;
if (index == 0) checkbox.setAttribute('id', `${key}`);
div.appendChild(checkbox);
var label = document.createTextNode(item);
div.appendChild(label);
dropdownContent.appendChild(div)
if (item.toLowerCase() === "other" || item.toLowerCase() === "others"){
isOther = true;
}else{
var div = document.createElement('div');
div.classList.add('checkbox');
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.name = 'checkboxChoices';
checkbox.value = item;
if (index == 0) checkbox.setAttribute('id', `${key}`);
div.appendChild(checkbox);
var label = document.createTextNode(item);
div.appendChild(label);
dropdownContent.appendChild(div)
}
})
// Create the checkbox dependent on an input text value
var dependentDiv = document.createElement('div');
dependentDiv.classList.add('checkbox');
var dependentCheckbox = document.createElement('input');
dependentCheckbox.type = 'checkbox';
dependentCheckbox.name = 'checkboxChoices';
dependentCheckbox.id = 'checkDP';
dependentCheckbox.value = ''; // Set the value here based on the input text
dependentDiv.appendChild(dependentCheckbox);
var dependentLabel = document.createTextNode('other');
dependentDiv.appendChild(dependentLabel);
dropdownContent.appendChild(dependentDiv);
// Initially hide the input text box
var inputTextBox = document.createElement('input');
inputTextBox.type = 'text';
inputTextBox.id = 'dependentTB';
inputTextBox.style.display = 'none';
inputTextBox.style.padding = '0px';
dropdownContent.appendChild(inputTextBox);
// Add event listener to the "other" checkbox
dependentCheckbox.addEventListener('change', function () {
if (dependentCheckbox.checked) {
inputTextBox.style.display = 'inline-block';
} else {
inputTextBox.style.display = 'none'; // Hide the input text box when "other" checkbox is unchecked
}
// Update the value of the dependentCheckbox when the input value changes
dependentCheckbox.value = inputTextBox.value;
});
if(isOther){
// Create the checkbox dependent on an input text value
var dependentDiv = document.createElement('div');
dependentDiv.classList.add('checkbox');
var dependentCheckbox = document.createElement('input');
dependentCheckbox.type = 'checkbox';
dependentCheckbox.name = 'checkboxChoices';
dependentCheckbox.id = 'checkDP';
dependentCheckbox.value = ''; // Set the value here based on the input text
dependentDiv.appendChild(dependentCheckbox);
var dependentLabel = document.createTextNode('other');
dependentDiv.appendChild(dependentLabel);
dropdownContent.appendChild(dependentDiv);
// Initially hide the input text box
var inputTextBox = document.createElement('input');
inputTextBox.type = 'text';
inputTextBox.id = 'dependentTB';
inputTextBox.style.display = 'none';
inputTextBox.style.padding = '0px';
dropdownContent.appendChild(inputTextBox);
// Add event listener to the "other" checkbox
dependentCheckbox.addEventListener('change', function () {
if (dependentCheckbox.checked) {
inputTextBox.style.display = 'inline-block';
} else {
inputTextBox.style.display = 'none'; // Hide the input text box when "other" checkbox is unchecked
}
// Update the value of the dependentCheckbox when the input value changes
dependentCheckbox.value = inputTextBox.value;
});
inputTextBox.addEventListener("input", event => {
dependentCheckbox.value = event.target.value;
});
inputTextBox.addEventListener("input", event => {
dependentCheckbox.value = event.target.value;
});
}
return dropdown1;
} catch (err) {
......@@ -546,58 +553,64 @@ const inputRadiolist = (key, validation) => {
var dropdownContent = document.createElement('div');
dropdownContent.classList.add('dropdown-content');
dropdown1.appendChild(dropdownContent);
var isOther = false;
// Create radio buttons for each item
items.forEach((item, index) => {
var radioDiv = document.createElement('div');
radioDiv.classList.add('radio-like-checkbox');
var radio = document.createElement('input');
radio.type = 'radio';
radio.name = 'radioChoices';
radio.value = item;
if (index == 0) radio.setAttribute('id', `${key}`);
var label = document.createTextNode(item);
radioDiv.appendChild(radio);
radioDiv.appendChild(label);
dropdownContent.appendChild(radioDiv);
});
// Create the radio button dependent on an input text value
var dependentDiv = document.createElement('div');
dependentDiv.classList.add('radio-like-checkbox');
var dependentRadio = document.createElement('input');
dependentRadio.type = 'radio';
dependentRadio.name = 'radioChoices';
dependentRadio.value = '';
dependentDiv.appendChild(dependentRadio);
var dependentLabel = document.createTextNode('other');
dependentDiv.appendChild(dependentLabel);
dropdownContent.appendChild(dependentDiv);
var inputTextBox = document.createElement('input');
inputTextBox.type = 'text';
inputTextBox.id = 'dependentTB';
inputTextBox.style.display = 'none';
inputTextBox.style.padding = '0px';
dropdownContent.appendChild(inputTextBox);
// Add event listener to the "other" radio button
dependentRadio.addEventListener('change', function () {
if (dependentRadio.checked) {
inputTextBox.style.display = 'inline-block';
} else {
inputTextBox.style.display = 'none'; // Hide the input text box when "other" radio button is unchecked
if (item.toLowerCase() === "other" || item.toLowerCase() === "others"){
isOther = true;
}else{
var radioDiv = document.createElement('div');
radioDiv.classList.add('radio-like-checkbox');
var radio = document.createElement('input');
radio.type = 'radio';
radio.name = 'radioChoices';
radio.value = item;
if (index == 0) radio.setAttribute('id', `${key}`);
var label = document.createTextNode(item);
radioDiv.appendChild(radio);
radioDiv.appendChild(label);
dropdownContent.appendChild(radioDiv);
}
});
if (isOther){
// Create the radio button dependent on an input text value
var dependentDiv = document.createElement('div');
dependentDiv.classList.add('radio-like-checkbox');
var dependentRadio = document.createElement('input');
dependentRadio.type = 'radio';
dependentRadio.name = 'radioChoices';
dependentRadio.value = '';
dependentDiv.appendChild(dependentRadio);
var dependentLabel = document.createTextNode('other');
dependentDiv.appendChild(dependentLabel);
dropdownContent.appendChild(dependentDiv);
var inputTextBox = document.createElement('input');
inputTextBox.type = 'text';
inputTextBox.id = 'dependentTB';
inputTextBox.style.display = 'none';
inputTextBox.style.padding = '0px';
dropdownContent.appendChild(inputTextBox);
// Add event listener to the "other" radio button
dependentRadio.addEventListener('change', function () {
if (dependentRadio.checked) {
inputTextBox.style.display = 'inline-block';
} else {
inputTextBox.style.display = 'none'; // Hide the input text box when "other" radio button is unchecked
}
});
inputTextBox.addEventListener("input", event => {
if (dependentRadio.checked) {
dependentRadio.value = event.target.value;
}
});
inputTextBox.addEventListener("input", event => {
if (dependentRadio.checked) {
dependentRadio.value = event.target.value;
}
});
}
return dropdown1;
} catch (err) {
......@@ -815,6 +828,7 @@ const deconstruct = async (section, container, classAttribute) => {
case 'textarea':
case 'alphanumeric':
case 'alphabet':
case 'email':
input = inputString(key, validation)
break
case 'specific':
......
WebGde/WebContent/WebGde-Widgets/sample_schema/NKTI_Schema.json
......@@ -72,8 +72,8 @@
"aka" : "field9",
"validation" : {
"fieldLength" : 20.0,
"collection" : "dropdown",
"options" : [ "Emergency Room", "Inpatient", "Outpatient" ],
"collection" : "radiolist",
"items" : [ "Emergency Room", "Inpatient", "Outpatient", "others" ],
"mandatory" : true
}
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment