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 330 additions and 36 deletions
WebGde/WebContent/WebGde-Widgets/DataInputWidget/ImageCapture/captureImage.js
......@@ -28,7 +28,8 @@ export function processCapture(key, imgFilename, imgFileSize) {
// File name
const fileName = document.createElement('div');
fileName.classList.add('file-name')
fileName.classList.add('file-name');
fileName.id = `${key}_fname`;
fileName.textContent = imgFilename;
detailsContainer.appendChild(fileName);
......
WebGde/WebContent/WebGde-Widgets/DataInputWidget/config.js
//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
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) {
createSection('Section', container, doctypes, underscoredValue);
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;
}
const dropdowns = $('.dropdown-input').select2();
});
$(document.body).on("change", "#Section", async function() {
......@@ -164,19 +161,16 @@ export async function generateFields(inputSchema, containerId) {
sessionStorage.setItem("currentSection", underscoredKey);
container = await deconstruct(schema[sessionStorage.getItem("currentDoctype").replaceAll("_", " ")][this.value], container, underscoredKey)
// const submit = document.createElement('input')
// submit.classList.add("submitButtons");
// submit.classList.add(underscoredKey);
// submit.type = 'submit'
// container.appendChild(submit)
const dropdowns = $('.dropdown-input').select2();
});
// add handler event handler for dropdown
// separate handler is used to fit with the library used 'select2'
$(document.body).ready(function () {
// Initialize Select2
const dropdowns = $('.dropdown-input').select2();
const dropdowns = $('.dropdown-input').select2({
focus: false
});
// Remove the first two elements from the dropdowns array
dropdowns.splice(0, 2);
......@@ -184,7 +178,7 @@ export async function generateFields(inputSchema, containerId) {
// Attach event handlers
$('.dropdown-input').select2().on('select2:open', () => {
// 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
document.querySelector('.select2-container--open').firstChild.firstChild.style.backgroundColor = 'yellow';
......@@ -1879,6 +1873,7 @@ const deconstruct = async (section, container, classAttribute) => {
inputContainer.appendChild(input)
}
//keys na drop down
const section1KeysWithOptions = Object.keys(section).filter(key => {
const validation = section[key]["validation"];
......@@ -1892,7 +1887,10 @@ const deconstruct = async (section, container, classAttribute) => {
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 showHideElements(section) {
// Iterate through the keysInSection array
......@@ -1901,8 +1899,11 @@ const deconstruct = async (section, container, classAttribute) => {
var childInput = document.getElementById(element);
var parentInput = childInput.parentNode;
var grandParentInput = parentInput.parentNode;
const parentValues = section[element]["parentvalue"];
if (parentValues.includes(selectElement.value)) {
const childOf = section[element]["childof"];
if(childOf === selectId){
if (parentValues.includes(selectedValue)) {
grandParentInput.style.display = "flex";
childInput.setAttribute("required", "required");
childInput.style.display = "block";
......@@ -1913,14 +1914,34 @@ const deconstruct = async (section, container, classAttribute) => {
}
}
}
// Initial execution of showHideElements to apply the initial state
showHideElements(section); // Replace "SECTION1" with the desired section key
}
//logic for show hide
if (selectElement) {
selectElement.addEventListener("change", function() {
// get id of element that triggered select
selectElementId.on('select2:select', function (event) {
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
} catch (err) {
throw err
......
WebGde/WebContent/WebGde-Widgets/DataInputWidget/validateInput.js
......@@ -40,10 +40,10 @@ export const validateInput = (fieldID, value) => {
return validateNumeric(validation, value)
case 'timepicker':
return validateTime(validation, value)
case 'date':
case 'daterange':
return validateDateRange(validation, value)
case 'datepicker':
case 'date':
// console.log('date')
return validateDate(validation, value)
case 'image-capture':
......@@ -333,18 +333,18 @@ const validateMedia = (validation, fieldID) => {
let errors = [];
const { mandatory } = validation
const inputElement = document.getElementById(`${fieldID}_attachedMedia`);
const inputElement = document.getElementById(`${fieldID}_thumbnail`);
const inputFilename = document.getElementById(`${fieldID}_fname`);
// Check if both inputElement and inputFilename are null
if (!inputElement || !inputFilename) {
if (mandatory && (!inputElement || !inputFilename)) {
return {
valid: false,
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.']
}
return {
......
WebGde/WebContent/WebGde-Widgets/LoadingModal/LoadingModalStyle.css
......@@ -5,7 +5,7 @@
left: 0;
width: 100%;
height: 100%;
z-index: 1;
z-index: 50;
background-color: rgba(0,0,0, .5);
}
......@@ -59,7 +59,7 @@ top: -50px;
width: 95px;
height: 95px;
border-radius: 50%;
z-index: 9;
z-index: 51;
background: #fff;
padding: 3px;
text-align: center;
......
WebGde/WebContent/WebGde-Widgets/config.js
......@@ -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"
//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 CURRENT_NODE = "Web GDE"
export let BPO_URL = DOMAIN + "bpo/";
......@@ -30,7 +30,7 @@ export let CURRENT_NODE = ""
export const ENCODING_PASS = "PASS1"
export const NEXT_NODE = "Complete"
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 DISPLAYED_DETAILS = "Address|Cassandra_Key|GFS_Loc" //pipe-delimited
......
WebGde/WebContent/WebGde-Widgets/sample_schema/dev_schema.json
......@@ -13,7 +13,114 @@
},
"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": {
"fieldLength": 50,
"collection": "alphanumeric",
......@@ -23,7 +130,7 @@
},
"Civil_Status": {
"fieldLabel": "Civil Status",
"aka": "field28",
"aka": "field18",
"source": "s",
"validation": {
"fieldLength": 15,
......@@ -38,7 +145,7 @@
},
"Checkbox_List": {
"fieldLabel": "Checkbox List",
"aka": "field16",
"aka": "field19",
"source": "s",
"validation": {
"collection": "checklist",
......@@ -55,7 +162,7 @@
},
"Radio_List": {
"fieldLabel": "Radio List",
"aka": "field4",
"aka": "field20",
"source": "s",
"validation": {
"collection": "radiolist",
......@@ -71,7 +178,7 @@
},
"Time": {
"fieldLabel": "Time",
"aka": "field5",
"aka": "field21",
"validation": {
"collection": "timepicker",
"mandatory": true
......@@ -79,10 +186,11 @@
},
"Date": {
"fieldLabel": "Date",
"aka": "field5",
"aka": "field22",
"validation": {
"fieldLength": 20,
"collection": "datepicker",
"validdate": "past",
"mandatory": true
}
},
......@@ -96,7 +204,7 @@
},
"Test": {
"fieldLabel": "Test",
"aka": "field712",
"aka": "field23",
"validation": {
"fieldLength": 30,
"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