Skip to content

W
web-ui
Commit c7df7bef by Owen Ryan Ang
Options

done implementation of readOnly for all collection types.

parent e5057b0b
Showing with 153 additions and 33 deletions
WebGde/WebContent/WebGde-Widgets/DataInputWidget/config.js
//Data Input Field Config //Data Input Field Config
export var SCHEMA_FILE_PATH = "./WebGde-Widgets/sample_schema/REG-INP.json"; export var SCHEMA_FILE_PATH = "./WebGde-Widgets/sample_schema/DEV_SCHEMA2.json";
//DBLookup Webservice URL //DBLookup Webservice URL
export var DB_URL = "http://localhost:8080/WebGde/svc/gfs-rest/db-lookup" export var DB_URL = "http://localhost:8080/WebGde/svc/gfs-rest/db-lookup"
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/DataInputWidget/generateFields.js
...@@ -348,7 +348,7 @@ const inputString = (key, validation, readOnly) => { ...@@ -348,7 +348,7 @@ const inputString = (key, validation, readOnly) => {
* @returns * @returns
* created input field element * created input field element
*/ */
const inputNumeric = (key, validation) => { const inputNumeric = (key, validation, readOnly) => {
try { try {
const { const {
mandatory, mandatory,
...@@ -364,6 +364,11 @@ const inputNumeric = (key, validation) => { ...@@ -364,6 +364,11 @@ const inputNumeric = (key, validation) => {
input.setAttribute('pattern', '[0-9/-]+') input.setAttribute('pattern', '[0-9/-]+')
input.addEventListener('focusout', handleInput) input.addEventListener('focusout', handleInput)
// add readonly attribute if set to true
if (readOnly) {
input.setAttribute('readonly', 'true');
}
fieldLength ? input.setAttribute('maxLength', `${fieldLength}`) : null fieldLength ? input.setAttribute('maxLength', `${fieldLength}`) : null
mandatory ? input.setAttribute('required', 'true') : null mandatory ? input.setAttribute('required', 'true') : null
...@@ -382,7 +387,7 @@ const inputNumeric = (key, validation) => { ...@@ -382,7 +387,7 @@ const inputNumeric = (key, validation) => {
* @returns * @returns
* created input field element * created input field element
*/ */
const inputDate = (key, validation) => { const inputDate = (key, validation, readOnly) => {
try { try {
const { const {
mandatory, mandatory,
...@@ -395,6 +400,11 @@ const inputDate = (key, validation) => { ...@@ -395,6 +400,11 @@ const inputDate = (key, validation) => {
input.setAttribute('type', 'date') input.setAttribute('type', 'date')
input.addEventListener('focusout', handleInput) input.addEventListener('focusout', handleInput)
// add readonly attribute if set to true
if (readOnly) {
input.setAttribute('readonly', 'true');
}
mandatory ? input.setAttribute('required', 'true') : null mandatory ? input.setAttribute('required', 'true') : null
return input return input
...@@ -502,7 +512,7 @@ const inputDateRange = (key, validation) => { //Input date range is a field main ...@@ -502,7 +512,7 @@ const inputDateRange = (key, validation) => { //Input date range is a field main
* @returns * @returns
* created input field element * created input field element
*/ */
const inputImageCapture = (key, validation) => { const inputImageCapture = (key, validation, readOnly) => {
try { try {
const { const {
mandatory, mandatory,
...@@ -596,7 +606,7 @@ const inputImageCapture = (key, validation) => { ...@@ -596,7 +606,7 @@ const inputImageCapture = (key, validation) => {
* @returns * @returns
* created input field element * created input field element
*/ */
const inputVideoCapture = (key, validation) => { const inputVideoCapture = (key, validation, readOnly) => {
try { try {
const { const {
mandatory, mandatory,
...@@ -809,7 +819,7 @@ const inputVideoCapture = (key, validation) => { ...@@ -809,7 +819,7 @@ const inputVideoCapture = (key, validation) => {
* @returns * @returns
* created input field element * created input field element
*/ */
const inputFingerprintCapture = (key, validation) => { const inputFingerprintCapture = (key, validation, readOnly) => {
try { try {
const { const {
mandatory, mandatory,
...@@ -1007,7 +1017,7 @@ const inputFingerprintCapture = (key, validation) => { ...@@ -1007,7 +1017,7 @@ const inputFingerprintCapture = (key, validation) => {
* @returns * @returns
* created input field element * created input field element
*/ */
const inputAudioUpload = (key, validation) => { const inputAudioUpload = (key, validation, readOnly) => {
try { try {
const { const {
mandatory, mandatory,
...@@ -1095,7 +1105,7 @@ const inputAudioUpload = (key, validation) => { ...@@ -1095,7 +1105,7 @@ const inputAudioUpload = (key, validation) => {
* @returns * @returns
* created input field element * created input field element
*/ */
const inputFileUpload = (key, validation) => { const inputFileUpload = (key, validation, readOnly) => {
try { try {
const { const {
mandatory, mandatory,
...@@ -1331,7 +1341,7 @@ const inputFileUpload = (key, validation) => { ...@@ -1331,7 +1341,7 @@ const inputFileUpload = (key, validation) => {
* created input field element * created input field element
*/ */
const inputChecklist = (key, validation) => { const inputChecklist = (key, validation, readOnly) => {
try { try {
const { mandatory, items } = validation; const { mandatory, items } = validation;
const errorDiv = document.getElementById(`${key}_error`); const errorDiv = document.getElementById(`${key}_error`);
...@@ -1359,16 +1369,22 @@ const inputChecklist = (key, validation) => { ...@@ -1359,16 +1369,22 @@ const inputChecklist = (key, validation) => {
if (index == 0) { if (index == 0) {
checkbox.classList.add("checkboxFirst"); checkbox.classList.add("checkboxFirst");
checkbox.setAttribute('id', `${key}`); checkbox.setAttribute('id', `${key}`);
}
if (readOnly) {
checkbox.onclick = function(event) {
event.preventDefault();
};
}
}
div.appendChild(checkbox); div.appendChild(checkbox);
var label = document.createTextNode(item); var label = document.createTextNode(item);
div.appendChild(label); div.appendChild(label);
dropdownContent.appendChild(div) dropdownContent.appendChild(div);
} }
}) })
if(isOther){ if(isOther && !readOnly){
// Create the checkbox dependent on an input text value // Create the checkbox dependent on an input text value
var dependentDiv = document.createElement('div'); var dependentDiv = document.createElement('div');
dependentDiv.classList.add('checkbox'); dependentDiv.classList.add('checkbox');
...@@ -1435,7 +1451,7 @@ const inputChecklist = (key, validation) => { ...@@ -1435,7 +1451,7 @@ const inputChecklist = (key, validation) => {
* created input field element * created input field element
*/ */
const inputRadiolist = (key, validation) => { const inputRadiolist = (key, validation, readOnly) => {
try { try {
const { mandatory, items } = validation; const { mandatory, items } = validation;
const errorDiv = document.getElementById(`${key}_error`); const errorDiv = document.getElementById(`${key}_error`);
...@@ -1459,19 +1475,25 @@ const inputRadiolist = (key, validation) => { ...@@ -1459,19 +1475,25 @@ const inputRadiolist = (key, validation) => {
radio.type = 'radio'; radio.type = 'radio';
radio.name = `radioChoices_${key}`; radio.name = `radioChoices_${key}`;
radio.classList.add("radioOption"); radio.classList.add("radioOption");
radio.name = `radioChoices_${key}`;
radio.value = item; radio.value = item;
if (index == 0) { if (index == 0) {
radio.classList.add('radioFirst'); radio.classList.add('radioFirst');
radio.setAttribute('id', `${key}`); radio.setAttribute('id', `${key}`);
} }
if (readOnly) {
radio.onclick = function(event) {
event.preventDefault();
};
}
var label = document.createTextNode(item); var label = document.createTextNode(item);
radioDiv.appendChild(radio); radioDiv.appendChild(radio);
radioDiv.appendChild(label); radioDiv.appendChild(label);
dropdownContent.appendChild(radioDiv); dropdownContent.appendChild(radioDiv);
} }
}); });
if (isOther){ if (isOther && !readOnly){
// Create the radio button dependent on an input text value // Create the radio button dependent on an input text value
var dependentDiv = document.createElement('div'); var dependentDiv = document.createElement('div');
dependentDiv.classList.add('radio-like-checkbox'); dependentDiv.classList.add('radio-like-checkbox');
...@@ -1510,6 +1532,7 @@ const inputRadiolist = (key, validation) => { ...@@ -1510,6 +1532,7 @@ const inputRadiolist = (key, validation) => {
}); });
} }
dropdownContent.addEventListener('change', function () { dropdownContent.addEventListener('change', function () {
const radioButtons = document.getElementsByName(`radioChoices_${key}`); const radioButtons = document.getElementsByName(`radioChoices_${key}`);
radioButtons.forEach(radio => { radioButtons.forEach(radio => {
...@@ -1585,12 +1608,11 @@ const inputDropdown = (key, validation, readOnly) => { ...@@ -1585,12 +1608,11 @@ const inputDropdown = (key, validation, readOnly) => {
input.setAttribute('name', `${key}`); input.setAttribute('name', `${key}`);
input.classList.add('dropdown-input'); input.classList.add('dropdown-input');
$(input).select2();
if (readOnly) { if (readOnly) {
input.setAttribute('readonly', 'true'); $(input).prop('disabled', true);
} }
$(input).select2();
$(input).on('select2:select', function (e) { $(input).on('select2:select', function (e) {
// Get the selected value // Get the selected value
...@@ -1624,7 +1646,7 @@ const inputDropdown = (key, validation, readOnly) => { ...@@ -1624,7 +1646,7 @@ const inputDropdown = (key, validation, readOnly) => {
}; };
const inputDbLookup = async (key, validation) => { const inputDbLookup = async (key, validation, readOnly) => {
try { try {
const { mandatory, options } = validation; const { mandatory, options } = validation;
const input = document.createElement('select'); const input = document.createElement('select');
...@@ -1633,6 +1655,11 @@ const inputDbLookup = async (key, validation) => { ...@@ -1633,6 +1655,11 @@ const inputDbLookup = async (key, validation) => {
input.classList.add('dropdown-input'); input.classList.add('dropdown-input');
input.addEventListener('focusout', handleInput); input.addEventListener('focusout', handleInput);
// add readonly attribute if set to true
if (readOnly) {
input.setAttribute('readonly', 'true');
}
input.addEventListener('keydown', function(event) { input.addEventListener('keydown', function(event) {
if (event.keyCode == 9) { if (event.keyCode == 9) {
event.preventDefault(); event.preventDefault();
...@@ -1848,35 +1875,35 @@ const deconstruct = async (section, container, classAttribute) => { ...@@ -1848,35 +1875,35 @@ const deconstruct = async (section, container, classAttribute) => {
input = inputDropdown(key, validation, readOnly) input = inputDropdown(key, validation, readOnly)
break break
case 'numeric': case 'numeric':
input = inputNumeric(key, validation) input = inputNumeric(key, validation, readOnly)
break break
case 'date': case 'date':
case 'datepicker': case 'datepicker':
input = inputDate(key, validation) input = inputDate(key, validation, readOnly)
break break
case 'dblookup': case 'dblookup':
input = await inputDbLookup(key, validation) input = await inputDbLookup(key, validation, readOnly)
break break
case 'image-capture': case 'image-capture':
input = inputImageCapture(key, validation) input = inputImageCapture(key, validation, readOnly)
break break
case 'video-capture': case 'video-capture':
input = inputVideoCapture(key, validation) input = inputVideoCapture(key, validation, readOnly)
break break
case 'fingerprint': case 'fingerprint':
input = inputFingerprintCapture(key, validation) input = inputFingerprintCapture(key, validation, readOnly)
break break
case 'file-upload': case 'file-upload':
input = inputFileUpload(key, validation) input = inputFileUpload(key, validation, readOnly)
break break
case 'audio-upload': case 'audio-upload':
input = inputAudioUpload(key, validation) input = inputAudioUpload(key, validation, readOnly)
break break
case 'checklist': case 'checklist':
input = inputChecklist(key, validation) input = inputChecklist(key, validation, readOnly)
break break
case 'radiolist': case 'radiolist':
input = inputRadiolist(key, validation) input = inputRadiolist(key, validation, readOnly)
break break
case 'timepicker': case 'timepicker':
input = inputTime(key, validation) input = inputTime(key, validation)
......
WebGde/WebContent/WebGde-Widgets/sample_schema/DEV_SCHEMA2.json 0 → 100644
{
"DEV-SCHEMA" : {
"wew" : {
"additional_findings_and_observation" : {
"fieldLabel" : "Additional findings and observation",
"aka" : "field2",
"validation" : {
"fieldLength" : 20.0,
"collection" : "alphanumeric",
"mandatory" : false
},
"readOnly" : true
},
"evr_date" : {
"fieldLabel" : "Date",
"aka" : "field3",
"validation" : {
"fieldLength" : 10.0,
"collection" : "datepicker",
"mandatory" : false
},
"readOnly" : true
},
"email_address" : {
"fieldLabel" : "Email Address",
"aka" : "field4",
"validation" : {
"fieldLength" : 20.0,
"collection" : "email",
"mandatory" : false
},
"readOnly" : true
},
"material_recovery_facility" : {
"fieldLabel" : "Material recovery Facility",
"aka" : "field5",
"validation" : {
"fieldLength" : 1.0,
"collection" : "radiolist",
"items" : [ "Yes", "No", "Not Required/Not Applicable" ],
"mandatory" : false
},
"readOnly" : true
},
"age" : {
"fieldLabel" : "Age",
"aka" : "field6",
"validation" : {
"fieldLength" : 3.0,
"collection" : "numeric",
"mandatory" : false
},
"readOnly" : true
},
"identification_card_presented" : {
"fieldLabel" : "Identification Card Presented",
"aka" : "field7",
"validation" : {
"fieldLength" : 1.0,
"collection" : "dropdown",
"options" : [ "Airman License", "Company ID Card", "Driver's License", "Fishworker's License issued by BFAR", "GSIS Card", "Health or Medical Card", "OWWA E-Card", "Phil Health ID Card", "Philippine Postal ID", "PNP Firearm License Card", "Police Clearance", "PRC ID Card", "School ID Card", "Seafarer's Record Book (SRB)", "Senior Citizen ID", "SSS Card", "Student Permit issued by LTO", "TIN Card", "UMID Card", "Voter's ID" ],
"mandatory" : false
},
"readOnly" : true
},
"nature_of_offense" : {
"fieldLabel" : "Nature of Offense",
"aka" : "field8",
"validation" : {
"fieldLength" : 1.0,
"collection" : "checklist",
"items" : [ "Urinating/Defecating/Indiscriminate Disposal", "Littering", "Dirty Frontage/Surroundings", "Improper Disposal", "Dumping of Grease/Fat/Lard and Oil Residue in Drainage/waterways", "Disposal of Untreated wasteways", "sludge", "chemicals in waterways", "No Trash can in Public Utility Jeep", "Illegal Spillage/Scattering", "Illegal Recycling/Sorting", "Burning of Waste", "No Canvass Cover", "Unsanitized Truck", "No Proper Cleaning/Clearing Materials" ],
"mandatory" : false
},
"readOnly" : true
},
"place" : {
"fieldLabel" : "Place",
"aka" : "field9",
"validation" : {
"fieldLength" : 20.0,
"collection" : "timepicker",
"mandatory" : false
},
"readOnly" : true
}
}
}
}
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/sample_schema/REG-INP.json
...@@ -1546,9 +1546,10 @@ ...@@ -1546,9 +1546,10 @@
"aka" : "field6", "aka" : "field6",
"validation" : { "validation" : {
"fieldLength" : 20.0, "fieldLength" : 20.0,
"collection" : "alphanumeric", "collection" : "datepicker",
"mandatory" : false "mandatory" : false
} },
"readOnly" : true
} }
}, },
"First Inspection" : { "First Inspection" : {
...@@ -1722,7 +1723,7 @@ ...@@ -1722,7 +1723,7 @@
"validation" : { "validation" : {
"fieldLength" : 1.0, "fieldLength" : 1.0,
"collection" : "image-capture", "collection" : "image-capture",
"mandatory" : true "mandatory" : false
} }
}, },
"last_name" : { "last_name" : {
...@@ -1888,7 +1889,8 @@ ...@@ -1888,7 +1889,8 @@
"collection" : "dropdown", "collection" : "dropdown",
"options" : [ "Urinating/Defecating/Indiscriminate Disposal", "Littering", "Dirty Frontage/Surroundings", "Improper Disposal", "Dumping of Grease/Fat/Lard and Oil Residue in Drainage/waterways", "Disposal of Untreated wasteways", "sludge", "chemicals in waterways", "No Trash can in Public Utility Jeep", "Illegal Spillage/Scattering", "Illegal Recycling/Sorting", "Burning of Waste", "No Canvass Cover", "Unsanitized Truck", "No Proper Cleaning/Clearing Materials" ], "options" : [ "Urinating/Defecating/Indiscriminate Disposal", "Littering", "Dirty Frontage/Surroundings", "Improper Disposal", "Dumping of Grease/Fat/Lard and Oil Residue in Drainage/waterways", "Disposal of Untreated wasteways", "sludge", "chemicals in waterways", "No Trash can in Public Utility Jeep", "Illegal Spillage/Scattering", "Illegal Recycling/Sorting", "Burning of Waste", "No Canvass Cover", "Unsanitized Truck", "No Proper Cleaning/Clearing Materials" ],
"mandatory" : false "mandatory" : false
} },
"readOnly" : true
}, },
"other_nature_of_offense" : { "other_nature_of_offense" : {
"fieldLabel" : "Other Nature of Offense", "fieldLabel" : "Other Nature of Offense",
......
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