Skip to content

W
web-ui
Commit f9ca2955 by Owen Ryan Ang
Options

fixed bug with fields with "childof" not displaying child field as exp.

parent 800f33d7
Showing with 339 additions and 45 deletions
WebGde/WebContent/WebGde-Widgets/DataInputWidget/ImageCapture/captureImage.js
...@@ -28,7 +28,8 @@ export function processCapture(key, imgFilename, imgFileSize) { ...@@ -28,7 +28,8 @@ export function processCapture(key, imgFilename, imgFileSize) {
// File name // File name
const fileName = document.createElement('div'); const fileName = document.createElement('div');
fileName.classList.add('file-name') fileName.classList.add('file-name');
fileName.id = `${key}_fname`;
fileName.textContent = imgFilename; fileName.textContent = imgFilename;
detailsContainer.appendChild(fileName); detailsContainer.appendChild(fileName);
......
WebGde/WebContent/WebGde-Widgets/DataInputWidget/config.js
//Data Input Field Config //Data Input Field Config
export var SCHEMA_FILE_PATH = "./WebGde-Widgets/sample_schema/de_schema.json"; export var SCHEMA_FILE_PATH = "./WebGde-Widgets/sample_schema/dev_schema_childof.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
...@@ -144,13 +144,10 @@ export async function generateFields(inputSchema, containerId) { ...@@ -144,13 +144,10 @@ export async function generateFields(inputSchema, containerId) {
createSection('Section', container, doctypes, underscoredValue); createSection('Section', container, doctypes, underscoredValue);
container = await deconstruct(doctypes[key], container, underscoredKey); container = await deconstruct(doctypes[key], container, underscoredKey);
// const submit = document.createElement('input')
// submit.classList.add("submitButtons");
// submit.classList.add(underscoredKey);
// submit.type = 'submit'
// container.appendChild(submit)
break; break;
} }
const dropdowns = $('.dropdown-input').select2();
}); });
$(document.body).on("change", "#Section", async function() { $(document.body).on("change", "#Section", async function() {
...@@ -164,19 +161,16 @@ export async function generateFields(inputSchema, containerId) { ...@@ -164,19 +161,16 @@ export async function generateFields(inputSchema, containerId) {
sessionStorage.setItem("currentSection", underscoredKey); sessionStorage.setItem("currentSection", underscoredKey);
container = await deconstruct(schema[sessionStorage.getItem("currentDoctype").replaceAll("_", " ")][this.value], container, underscoredKey) container = await deconstruct(schema[sessionStorage.getItem("currentDoctype").replaceAll("_", " ")][this.value], container, underscoredKey)
// const submit = document.createElement('input') const dropdowns = $('.dropdown-input').select2();
// submit.classList.add("submitButtons");
// submit.classList.add(underscoredKey);
// submit.type = 'submit'
// container.appendChild(submit)
}); });
// add handler event handler for dropdown // add handler event handler for dropdown
// separate handler is used to fit with the library used 'select2' // separate handler is used to fit with the library used 'select2'
$(document.body).ready(function () { $(document.body).ready(function () {
// Initialize Select2 // Initialize Select2
const dropdowns = $('.dropdown-input').select2(); const dropdowns = $('.dropdown-input').select2({
focus: false
});
// Remove the first two elements from the dropdowns array // Remove the first two elements from the dropdowns array
dropdowns.splice(0, 2); dropdowns.splice(0, 2);
...@@ -184,7 +178,7 @@ export async function generateFields(inputSchema, containerId) { ...@@ -184,7 +178,7 @@ export async function generateFields(inputSchema, containerId) {
// Attach event handlers // Attach event handlers
$('.dropdown-input').select2().on('select2:open', () => { $('.dropdown-input').select2().on('select2:open', () => {
// Focus on the search field when the dropdown is opened // Focus on the search field when the dropdown is opened
document.querySelector('.select2-search__field').focus(); // document.querySelector('.select2-search__field').focus();
// Set the background color to yellow // Set the background color to yellow
document.querySelector('.select2-container--open').firstChild.firstChild.style.backgroundColor = 'yellow'; document.querySelector('.select2-container--open').firstChild.firstChild.style.backgroundColor = 'yellow';
...@@ -1879,6 +1873,7 @@ const deconstruct = async (section, container, classAttribute) => { ...@@ -1879,6 +1873,7 @@ const deconstruct = async (section, container, classAttribute) => {
inputContainer.appendChild(input) inputContainer.appendChild(input)
} }
//keys na drop down //keys na drop down
const section1KeysWithOptions = Object.keys(section).filter(key => { const section1KeysWithOptions = Object.keys(section).filter(key => {
const validation = section[key]["validation"]; const validation = section[key]["validation"];
...@@ -1892,7 +1887,10 @@ const deconstruct = async (section, container, classAttribute) => { ...@@ -1892,7 +1887,10 @@ const deconstruct = async (section, container, classAttribute) => {
keysInSection.push(key); keysInSection.push(key);
} }
} }
const selectElement = document.getElementById(section1KeysWithOptions); var selectId = '';
var selectedValue = '';
const selectElement = $('.dropdown-input');
const selectElementId = $('.select2-hidden-accessible');
// Function to show or hide elements based on childof value // Function to show or hide elements based on childof value
function showHideElements(section) { function showHideElements(section) {
// Iterate through the keysInSection array // Iterate through the keysInSection array
...@@ -1901,26 +1899,49 @@ const deconstruct = async (section, container, classAttribute) => { ...@@ -1901,26 +1899,49 @@ const deconstruct = async (section, container, classAttribute) => {
var childInput = document.getElementById(element); var childInput = document.getElementById(element);
var parentInput = childInput.parentNode; var parentInput = childInput.parentNode;
var grandParentInput = parentInput.parentNode; var grandParentInput = parentInput.parentNode;
const parentValues = section[element]["parentvalue"]; const parentValues = section[element]["parentvalue"];
if (parentValues.includes(selectElement.value)) { const childOf = section[element]["childof"];
grandParentInput.style.display = "flex"; if(childOf === selectId){
childInput.setAttribute("required", "required"); if (parentValues.includes(selectedValue)) {
childInput.style.display = "block"; grandParentInput.style.display = "flex";
} else { childInput.setAttribute("required", "required");
grandParentInput.style.display = "none"; childInput.style.display = "block";
childInput.removeAttribute("required"); } else {
childInput.style.display = "none"; grandParentInput.style.display = "none";
childInput.removeAttribute("required");
childInput.style.display = "none";
}
} }
} }
} }
// Initial execution of showHideElements to apply the initial state
showHideElements(section); // Replace "SECTION1" with the desired section key
//logic for show hide //logic for show hide
if (selectElement) { // get id of element that triggered select
selectElement.addEventListener("change", function() { selectElementId.on('select2:select', function (event) {
showHideElements(section); selectId = $(this).attr('id');
}); console.log('select Id:' + selectId);
});
// get value of selected option
selectElement.on('select2:select', function (event) {
selectedValue = event.params.data.id;
console.log('selected value: ' + selectedValue);
showHideElements(section);
});
// hide by default
for (const key in keysInSection) {
const element = keysInSection[key];
var childInput = document.getElementById(element);
var parentInput = childInput.parentNode;
var grandParentInput = parentInput.parentNode;
grandParentInput.style.display = "none";
childInput.removeAttribute("required");
childInput.style.display = "none";
} }
return container return container
} catch (err) { } catch (err) {
throw err throw err
......
WebGde/WebContent/WebGde-Widgets/DataInputWidget/validateInput.js
...@@ -40,10 +40,10 @@ export const validateInput = (fieldID, value) => { ...@@ -40,10 +40,10 @@ export const validateInput = (fieldID, value) => {
return validateNumeric(validation, value) return validateNumeric(validation, value)
case 'timepicker': case 'timepicker':
return validateTime(validation, value) return validateTime(validation, value)
case 'date':
case 'daterange': case 'daterange':
return validateDateRange(validation, value) return validateDateRange(validation, value)
case 'datepicker': case 'datepicker':
case 'date':
// console.log('date') // console.log('date')
return validateDate(validation, value) return validateDate(validation, value)
case 'image-capture': case 'image-capture':
...@@ -333,18 +333,18 @@ const validateMedia = (validation, fieldID) => { ...@@ -333,18 +333,18 @@ const validateMedia = (validation, fieldID) => {
let errors = []; let errors = [];
const { mandatory } = validation const { mandatory } = validation
const inputElement = document.getElementById(`${fieldID}_attachedMedia`); const inputElement = document.getElementById(`${fieldID}_thumbnail`);
const inputFilename = document.getElementById(`${fieldID}_fname`); const inputFilename = document.getElementById(`${fieldID}_fname`);
// Check if both inputElement and inputFilename are null // Check if both inputElement and inputFilename are null
if (!inputElement || !inputFilename) { if (mandatory && (!inputElement || !inputFilename)) {
return { return {
valid: false, valid: false,
errors: ['No file attached.'] errors: ['No file attached.']
}; };
} }
if (mandatory && inputElement.files.length === 0 && inputFilename.textContent.trim() === '') { if (mandatory && !inputElement.src && inputElement.src.trim() === '' && inputFilename.textContent.trim() === '') {
errors = [...errors, 'No File Attached.'] errors = [...errors, 'No File Attached.']
} }
return { return {
......
WebGde/WebContent/WebGde-Widgets/LoadingModal/LoadingModalStyle.css
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1; z-index: 50;
background-color: rgba(0,0,0, .5); background-color: rgba(0,0,0, .5);
} }
...@@ -59,7 +59,7 @@ top: -50px; ...@@ -59,7 +59,7 @@ top: -50px;
width: 95px; width: 95px;
height: 95px; height: 95px;
border-radius: 50%; border-radius: 50%;
z-index: 9; z-index: 51;
background: #fff; background: #fff;
padding: 3px; padding: 3px;
text-align: center; text-align: center;
......
WebGde/WebContent/WebGde-Widgets/config.js
...@@ -21,7 +21,7 @@ export const IS_RETRIEVE_FROM_GFS = "N" ...@@ -21,7 +21,7 @@ export const IS_RETRIEVE_FROM_GFS = "N"
export const INVALID_KEYS = "F1,F2,F3,F4,F5,F6,F7,F8,F9,F10,F11,F12,PrintScreen,ScrollLock,Pause,PageUp,PageDown,Insert,Delete,Control" export const INVALID_KEYS = "F1,F2,F3,F4,F5,F6,F7,F8,F9,F10,F11,F12,PrintScreen,ScrollLock,Pause,PageUp,PageDown,Insert,Delete,Control"
//BPO CONFIG //BPO CONFIG
export const IS_RETRIEVE_FROM_BPO = "N" export const IS_RETRIEVE_FROM_BPO = "Y"
// export const BPO_URL = "http://35.171.20.94:8080/bpo-sqa/" // export const BPO_URL = "http://35.171.20.94:8080/bpo-sqa/"
// export const CURRENT_NODE = "Web GDE" // export const CURRENT_NODE = "Web GDE"
export let BPO_URL = DOMAIN + "bpo/"; export let BPO_URL = DOMAIN + "bpo/";
...@@ -30,7 +30,7 @@ export let CURRENT_NODE = "" ...@@ -30,7 +30,7 @@ export let CURRENT_NODE = ""
export const ENCODING_PASS = "PASS1" export const ENCODING_PASS = "PASS1"
export const NEXT_NODE = "Complete" export const NEXT_NODE = "Complete"
export const EXCEPTION_NODE = "Exception" export const EXCEPTION_NODE = "Exception"
export const SHOW_ELEMENT_LIST_VIEWER = "N" export const SHOW_ELEMENT_LIST_VIEWER = "Y"
export const ADD_NEW_OPTION = "N" export const ADD_NEW_OPTION = "N"
export const DISPLAYED_DETAILS = "Address|Cassandra_Key|GFS_Loc" //pipe-delimited export const DISPLAYED_DETAILS = "Address|Cassandra_Key|GFS_Loc" //pipe-delimited
......
WebGde/WebContent/WebGde-Widgets/sample_schema/dev_schema.json
...@@ -13,7 +13,114 @@ ...@@ -13,7 +13,114 @@
}, },
"Middle Name": { "Middle Name": {
"fieldLabel": "Middle Name", "fieldLabel": "Middle Name",
"aka": "field72", "aka": "field8",
"validation": {
"fieldLength": 50,
"collection": "alphanumeric",
"invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>",
"mandatory": false
}
},
"Civil_Status": {
"fieldLabel": "Civil Status",
"aka": "field9",
"source": "s",
"validation": {
"fieldLength": 15,
"collection": "dropdown",
"options": [
"Single",
"Married",
"Widowed"
],
"mandatory": false
}
},
"Checkbox_List": {
"fieldLabel": "Checkbox List",
"aka": "field10",
"source": "s",
"validation": {
"collection": "checklist",
"items": [
"sample-item1",
"sample-item2",
"sample-item3",
"sample-item4",
"sample-item5",
"other"
],
"mandatory": false
}
},
"Radio_List": {
"fieldLabel": "Radio List",
"aka": "field11",
"source": "s",
"validation": {
"collection": "radiolist",
"items": [
"sample-item1",
"sample-item2",
"sample-item3",
"sample-item4",
"sample-item5"
],
"mandatory": false
}
},
"Time": {
"fieldLabel": "Time",
"aka": "field12",
"validation": {
"collection": "timepicker",
"mandatory": false
}
},
"Date": {
"fieldLabel": "Date",
"aka": "field13",
"validation": {
"fieldLength": 20,
"collection": "datepicker",
"validdate": "past",
"mandatory": false
}
},
"Image1":{
"fieldLabel": "Image1",
"aka": "field14",
"validation": {
"collection": "image-capture",
"mandatory": false
}
},
"Test": {
"fieldLabel": "Test",
"aka": "field15",
"validation": {
"fieldLength": 30,
"collection": "alphanumeric",
"invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>",
"mandatory": false
}
}
}
},"SAMPLE FIELDS 2": {
"Doctype 1": {
"First Name": {
"fieldLabel": "First Name",
"aka": "field16",
"validation": {
"fieldLength": 50,
"collection": "alphanumeric",
"invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>",
"mandatory": true
}
},
"Middle Name": {
"fieldLabel": "Middle Name",
"aka": "field17",
"validation": { "validation": {
"fieldLength": 50, "fieldLength": 50,
"collection": "alphanumeric", "collection": "alphanumeric",
...@@ -23,7 +130,7 @@ ...@@ -23,7 +130,7 @@
}, },
"Civil_Status": { "Civil_Status": {
"fieldLabel": "Civil Status", "fieldLabel": "Civil Status",
"aka": "field28", "aka": "field18",
"source": "s", "source": "s",
"validation": { "validation": {
"fieldLength": 15, "fieldLength": 15,
...@@ -38,7 +145,7 @@ ...@@ -38,7 +145,7 @@
}, },
"Checkbox_List": { "Checkbox_List": {
"fieldLabel": "Checkbox List", "fieldLabel": "Checkbox List",
"aka": "field16", "aka": "field19",
"source": "s", "source": "s",
"validation": { "validation": {
"collection": "checklist", "collection": "checklist",
...@@ -55,7 +162,7 @@ ...@@ -55,7 +162,7 @@
}, },
"Radio_List": { "Radio_List": {
"fieldLabel": "Radio List", "fieldLabel": "Radio List",
"aka": "field4", "aka": "field20",
"source": "s", "source": "s",
"validation": { "validation": {
"collection": "radiolist", "collection": "radiolist",
...@@ -71,7 +178,7 @@ ...@@ -71,7 +178,7 @@
}, },
"Time": { "Time": {
"fieldLabel": "Time", "fieldLabel": "Time",
"aka": "field5", "aka": "field21",
"validation": { "validation": {
"collection": "timepicker", "collection": "timepicker",
"mandatory": true "mandatory": true
...@@ -79,10 +186,11 @@ ...@@ -79,10 +186,11 @@
}, },
"Date": { "Date": {
"fieldLabel": "Date", "fieldLabel": "Date",
"aka": "field5", "aka": "field22",
"validation": { "validation": {
"fieldLength": 20, "fieldLength": 20,
"collection": "datepicker", "collection": "datepicker",
"validdate": "past",
"mandatory": true "mandatory": true
} }
}, },
...@@ -96,7 +204,7 @@ ...@@ -96,7 +204,7 @@
}, },
"Test": { "Test": {
"fieldLabel": "Test", "fieldLabel": "Test",
"aka": "field712", "aka": "field23",
"validation": { "validation": {
"fieldLength": 30, "fieldLength": 30,
"collection": "alphanumeric", "collection": "alphanumeric",
......
WebGde/WebContent/WebGde-Widgets/sample_schema/dev_schema_childof.json 0 → 100644
{
"MEDICAL RECORD" : {
"PATIENT INFORMATION" : {
"name" : {
"fieldLabel" : "Full Name (Last, First, M.I)",
"aka" : "field1",
"validation" : {
"fieldLength" : 50.0,
"collection" : "alphabet",
"invalidchar" : "`~!@#&$%^*_={}[]:;/\"|\\<>0123456789",
"mandatory" : true
}
},
"address" : {
"fieldLabel" : "Address",
"aka" : "field2",
"validation" : {
"fieldLength" : 50.0,
"collection" : "alphanumeric",
"invalidchar" : "`~!@#&$%^*_={}[]:;/\"|\\<>0123456789",
"mandatory" : false
}
},
"symptoms" : {
"fieldLabel" : "Symptoms Experienced",
"aka" : "field3",
"validation" : {
"fieldLength" : 51.0,
"collection" : "checklist",
"items" : [ "Cough", "Fever", "Sore Throat", "Other" ],
"mandatory" : false
}
},
"birthdate" : {
"fieldLabel" : "Birth Date",
"aka" : "field4",
"validation" : {
"fieldLength" : 52.0,
"collection" : "datepicker",
"mandatory" : false
}
},
"illness_date" : {
"fieldLabel" : "Start of Symptoms",
"aka" : "field5",
"validation" : {
"fieldLength" : 53.0,
"collection" : "date",
"mandatory" : false
},
"childof" : "symptoms",
"parentvalue" : [ "Cough", "Fever", "Sore Throat", "Other" ]
},
"direction" : {
"fieldLabel" : "Current Direction",
"aka" : "field6",
"validation" : {
"fieldLength" : 54.0,
"collection" : "direction",
"mandatory" : false
}
},
"payment_method" : {
"fieldLabel" : "Payment Method",
"aka" : "field7",
"validation" : {
"fieldLength" : 55.0,
"collection" : "dropdown",
"options" : [ "Cash", "Bank", "Gcash" ],
"mandatory" : false
}
},
"email" : {
"fieldLabel" : "Email Address",
"aka" : "field8",
"validation" : {
"fieldLength" : 56.0,
"collection" : "email",
"mandatory" : false
},
"childof" : "payment_method",
"parentvalue" : [ "Bank", "Gcash" ]
},
"payment_method2" : {
"fieldLabel" : "Payment Method",
"aka" : "field7",
"validation" : {
"fieldLength" : 55.0,
"collection" : "dropdown",
"options" : [ "Cash", "Bank", "Gcash" ],
"mandatory" : false
}
},
"email2" : {
"fieldLabel" : "Email Address2",
"aka" : "field8",
"validation" : {
"fieldLength" : 56.0,
"collection" : "email",
"mandatory" : false
},
"childof" : "payment_method2",
"parentvalue" : [ "Bank", "Gcash" ]
},
"fingerprint" : {
"fieldLabel" : "Fingerprint",
"aka" : "field9",
"validation" : {
"fieldLength" : 57.0,
"collection" : "fingerprint",
"mandatory" : false
}
},
"geotag" : {
"fieldLabel" : "Geotag",
"aka" : "field10",
"validation" : {
"fieldLength" : 58.0,
"collection" : "geotag",
"mandatory" : false
}
},
"patient_image" : {
"fieldLabel" : "Patient Image",
"aka" : "field11",
"validation" : {
"fieldLength" : 59.0,
"collection" : "image-capture",
"mandatory" : false
}
},
"phone_number" : {
"fieldLabel" : "Phone Number",
"aka" : "field12",
"validation" : {
"fieldLength" : 60.0,
"collection" : "numeric",
"mandatory" : false
}
},
"gender" : {
"fieldLabel" : "Gender",
"aka" : "field13",
"validation" : {
"fieldLength" : 61.0,
"collection" : "radiolist",
"items" : [ "M", "F", "Other" ],
"mandatory" : false
}
},
"time" : {
"fieldLabel" : "Time",
"aka" : "field16",
"validation" : {
"fieldLength" : 64.0,
"collection" : "timepicker",
"mandatory" : false
}
}
}
}
}
\ No newline at end of file
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