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 152 additions and 32 deletions
WebGde/WebContent/WebGde-Widgets/DataInputWidget/config.js
//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
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) => {
* @returns
* created input field element
*/
const inputNumeric = (key, validation) => {
const inputNumeric = (key, validation, readOnly) => {
try {
const {
mandatory,
......@@ -364,6 +364,11 @@ const inputNumeric = (key, validation) => {
input.setAttribute('pattern', '[0-9/-]+')
input.addEventListener('focusout', handleInput)
// add readonly attribute if set to true
if (readOnly) {
input.setAttribute('readonly', 'true');
}
fieldLength ? input.setAttribute('maxLength', `${fieldLength}`) : null
mandatory ? input.setAttribute('required', 'true') : null
......@@ -382,7 +387,7 @@ const inputNumeric = (key, validation) => {
* @returns
* created input field element
*/
const inputDate = (key, validation) => {
const inputDate = (key, validation, readOnly) => {
try {
const {
mandatory,
......@@ -395,6 +400,11 @@ const inputDate = (key, validation) => {
input.setAttribute('type', 'date')
input.addEventListener('focusout', handleInput)
// add readonly attribute if set to true
if (readOnly) {
input.setAttribute('readonly', 'true');
}
mandatory ? input.setAttribute('required', 'true') : null
return input
......@@ -502,7 +512,7 @@ const inputDateRange = (key, validation) => { //Input date range is a field main
* @returns
* created input field element
*/
const inputImageCapture = (key, validation) => {
const inputImageCapture = (key, validation, readOnly) => {
try {
const {
mandatory,
......@@ -596,7 +606,7 @@ const inputImageCapture = (key, validation) => {
* @returns
* created input field element
*/
const inputVideoCapture = (key, validation) => {
const inputVideoCapture = (key, validation, readOnly) => {
try {
const {
mandatory,
......@@ -809,7 +819,7 @@ const inputVideoCapture = (key, validation) => {
* @returns
* created input field element
*/
const inputFingerprintCapture = (key, validation) => {
const inputFingerprintCapture = (key, validation, readOnly) => {
try {
const {
mandatory,
......@@ -1007,7 +1017,7 @@ const inputFingerprintCapture = (key, validation) => {
* @returns
* created input field element
*/
const inputAudioUpload = (key, validation) => {
const inputAudioUpload = (key, validation, readOnly) => {
try {
const {
mandatory,
......@@ -1095,7 +1105,7 @@ const inputAudioUpload = (key, validation) => {
* @returns
* created input field element
*/
const inputFileUpload = (key, validation) => {
const inputFileUpload = (key, validation, readOnly) => {
try {
const {
mandatory,
......@@ -1331,7 +1341,7 @@ const inputFileUpload = (key, validation) => {
* created input field element
*/
const inputChecklist = (key, validation) => {
const inputChecklist = (key, validation, readOnly) => {
try {
const { mandatory, items } = validation;
const errorDiv = document.getElementById(`${key}_error`);
......@@ -1359,16 +1369,22 @@ const inputChecklist = (key, validation) => {
if (index == 0) {
checkbox.classList.add("checkboxFirst");
checkbox.setAttribute('id', `${key}`);
}
if (readOnly) {
checkbox.onclick = function(event) {
event.preventDefault();
};
}
div.appendChild(checkbox);
var label = document.createTextNode(item);
div.appendChild(label);
dropdownContent.appendChild(div)
dropdownContent.appendChild(div);
}
})
if(isOther){
if(isOther && !readOnly){
// Create the checkbox dependent on an input text value
var dependentDiv = document.createElement('div');
dependentDiv.classList.add('checkbox');
......@@ -1435,7 +1451,7 @@ const inputChecklist = (key, validation) => {
* created input field element
*/
const inputRadiolist = (key, validation) => {
const inputRadiolist = (key, validation, readOnly) => {
try {
const { mandatory, items } = validation;
const errorDiv = document.getElementById(`${key}_error`);
......@@ -1459,19 +1475,25 @@ const inputRadiolist = (key, validation) => {
radio.type = 'radio';
radio.name = `radioChoices_${key}`;
radio.classList.add("radioOption");
radio.name = `radioChoices_${key}`;
radio.value = item;
if (index == 0) {
radio.classList.add('radioFirst');
radio.setAttribute('id', `${key}`);
}
if (readOnly) {
radio.onclick = function(event) {
event.preventDefault();
};
}
var label = document.createTextNode(item);
radioDiv.appendChild(radio);
radioDiv.appendChild(label);
dropdownContent.appendChild(radioDiv);
}
});
if (isOther){
if (isOther && !readOnly){
// Create the radio button dependent on an input text value
var dependentDiv = document.createElement('div');
dependentDiv.classList.add('radio-like-checkbox');
......@@ -1510,6 +1532,7 @@ const inputRadiolist = (key, validation) => {
});
}
dropdownContent.addEventListener('change', function () {
const radioButtons = document.getElementsByName(`radioChoices_${key}`);
radioButtons.forEach(radio => {
......@@ -1585,13 +1608,12 @@ const inputDropdown = (key, validation, readOnly) => {
input.setAttribute('name', `${key}`);
input.classList.add('dropdown-input');
$(input).select2();
if (readOnly) {
input.setAttribute('readonly', 'true');
$(input).prop('disabled', true);
}
$(input).select2();
$(input).on('select2:select', function (e) {
// Get the selected value
var selectedValue = e.params.data.id;
......@@ -1624,7 +1646,7 @@ const inputDropdown = (key, validation, readOnly) => {
};
const inputDbLookup = async (key, validation) => {
const inputDbLookup = async (key, validation, readOnly) => {
try {
const { mandatory, options } = validation;
const input = document.createElement('select');
......@@ -1633,6 +1655,11 @@ const inputDbLookup = async (key, validation) => {
input.classList.add('dropdown-input');
input.addEventListener('focusout', handleInput);
// add readonly attribute if set to true
if (readOnly) {
input.setAttribute('readonly', 'true');
}
input.addEventListener('keydown', function(event) {
if (event.keyCode == 9) {
event.preventDefault();
......@@ -1848,35 +1875,35 @@ const deconstruct = async (section, container, classAttribute) => {
input = inputDropdown(key, validation, readOnly)
break
case 'numeric':
input = inputNumeric(key, validation)
input = inputNumeric(key, validation, readOnly)
break
case 'date':
case 'datepicker':
input = inputDate(key, validation)
input = inputDate(key, validation, readOnly)
break
case 'dblookup':
input = await inputDbLookup(key, validation)
input = await inputDbLookup(key, validation, readOnly)
break
case 'image-capture':
input = inputImageCapture(key, validation)
input = inputImageCapture(key, validation, readOnly)
break
case 'video-capture':
input = inputVideoCapture(key, validation)
input = inputVideoCapture(key, validation, readOnly)
break
case 'fingerprint':
input = inputFingerprintCapture(key, validation)
input = inputFingerprintCapture(key, validation, readOnly)
break
case 'file-upload':
input = inputFileUpload(key, validation)
input = inputFileUpload(key, validation, readOnly)
break
case 'audio-upload':
input = inputAudioUpload(key, validation)
input = inputAudioUpload(key, validation, readOnly)
break
case 'checklist':
input = inputChecklist(key, validation)
input = inputChecklist(key, validation, readOnly)
break
case 'radiolist':
input = inputRadiolist(key, validation)
input = inputRadiolist(key, validation, readOnly)
break
case 'timepicker':
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 @@
"aka" : "field6",
"validation" : {
"fieldLength" : 20.0,
"collection" : "alphanumeric",
"collection" : "datepicker",
"mandatory" : false
}
},
"readOnly" : true
}
},
"First Inspection" : {
......@@ -1722,7 +1723,7 @@
"validation" : {
"fieldLength" : 1.0,
"collection" : "image-capture",
"mandatory" : true
"mandatory" : false
}
},
"last_name" : {
......@@ -1888,7 +1889,8 @@
"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" ],
"mandatory" : false
}
},
"readOnly" : true
},
"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