image-capture, video-capture, fingerprint, file-upload validation

WebGde/WebContent/WebGde-Widgets/DataInputWidget/generateFields.js

@@ -478,6 +478,7 @@ const inputImageCapture = (key, validation) => {
 		const container2 = document.createElement('div');
 		container.appendChild(container2);
 		container2.classList.add('image-capture');
+		container2.setAttribute('id', `${key}_container`);
 
 		const input = document.createElement('input');
 		input.setAttribute('id', `${key}_attachedMedia`);
@@ -485,6 +486,12 @@ const inputImageCapture = (key, validation) => {
 		input.setAttribute('type', 'file');
 		input.setAttribute('style', 'display: none');
 		input.setAttribute('accept', 'image/*'); // Accept only image files
+		input.addEventListener('change', function(event) {
+			if (event.target.files.length > 0) {
+				container2.classList.remove('input-invalid');
+				container2.classList.add('input-valid');
+			} 
+		});
 
 		const capturedImage = document.createElement('input');
 		capturedImage.setAttribute('id', `${key}_capturedImageData`);
@@ -676,6 +683,7 @@ const inputVideoCapture = (key, validation) => {
 		const container2 = document.createElement('div');
 		container.appendChild(container2);
 		container2.classList.add('image-capture');
+		container2.setAttribute('id', `${key}_container`);
 
 		const input = document.createElement('input');
 		input.setAttribute('id', `${key}_attachedMedia`);
@@ -683,6 +691,12 @@ const inputVideoCapture = (key, validation) => {
 		input.setAttribute('type', 'file');
 		input.setAttribute('style', 'display: none');
 		input.setAttribute('accept', 'image/*, video/*'); // Accept both image and video files
+		input.addEventListener('change', function(event) {
+			if (event.target.files.length > 0) {
+				container2.classList.remove('input-invalid');
+				container2.classList.add('input-valid');
+			} 
+		});
 
 		const capturedImage = document.createElement('input');
 		capturedImage.setAttribute('id', `${key}_capturedImageData`);
@@ -874,6 +888,7 @@ const inputFingerprintCapture = (key, validation) => {
 		const container2 = document.createElement('div');
 		container.appendChild(container2);
 		container2.classList.add('fingerprint-capture');
+		container2.setAttribute('id', `${key}_container`);
 
 		const input = document.createElement('input');
 		input.setAttribute('id', `${key}_attachedMedia`);
@@ -881,6 +896,12 @@ const inputFingerprintCapture = (key, validation) => {
 		input.setAttribute('type', 'file');
 		input.setAttribute('style', 'display: none');
 		input.setAttribute('accept', 'image/*'); // Accept only image files
+		input.addEventListener('change', function(event) {
+			if (event.target.files.length > 0) {
+				container2.classList.remove('input-invalid');
+				container2.classList.add('input-valid');
+			} 
+		});
 
 		const capturedImage = document.createElement('input');
 		capturedImage.setAttribute('id', `${key}_capturedImageData`);
@@ -1146,6 +1167,7 @@ const inputFileUpload = (key, validation) => {
 		const container2 = document.createElement('div');
 		container.appendChild(container2);
 		container2.classList.add('file-upload');
+		container2.setAttribute('id', `${key}_container`);
 
 		const input = document.createElement('input');
 		input.setAttribute('id', `${key}_attachedMedia`);
@@ -1153,7 +1175,14 @@ const inputFileUpload = (key, validation) => {
 		input.setAttribute('type', 'file');
 		input.setAttribute('style', 'display: none');
 		input.setAttribute('accept', '*/*'); // Accept any files
-
+		if (mandatory) {
+			input.addEventListener('change', function(event) {
+				const hasFiles = event.target.files.length > 0;
+				container2.classList.toggle('input-valid', hasFiles);
+				container2.classList.toggle('input-invalid', !hasFiles);
+			});
+		}
+		
 		const capturedImage = document.createElement('input');
 		capturedImage.setAttribute('id', `${key}_capturedImageData`);
 		capturedImage.setAttribute('name', `${key}`);

WebGde/WebContent/WebGde-Widgets/DataInputWidget/validateInput.js

@@ -42,7 +42,11 @@ export const validateInput = (fieldID, value) => {
             case 'datepicker':
                 // console.log('date')
                 return validateDate(validation, value)
-                break
+            case 'image-capture':
+            case 'video-capture':
+            case 'fingerprint':
+            case 'file-upload':
+                return validateMedia(validation, fieldID);           
             default:
                 return { valid: false, error: [`Collection of allowed values for field: ${fieldID} not found`]}
         }
@@ -280,6 +284,27 @@ const validateSpecific = (validation, value) => {
     }
 }
 
+/**
+ * 
+ * @param {*} fieldID 
+ *      Key of input field in schema. Expected to be ID of the element.
+ * @returns 
+ *      validation of given key in schema
+ */
+const validateMedia = (validation, fieldID) => {
+    let errors = [];
+    const { mandatory, fieldLength } = validation
+
+    const inputElement = document.getElementById(`${fieldID}_attachedMedia`);
+	if (mandatory && inputElement.files.length === 0) {
+		errors = [...errors, 'No File Attached!']
+	}
+	return { 
+        valid: errors.length===0,
+        errors
+    };
+}
+
 export const checkValidValues = (fieldID, value) => {
 	try {
 		const validation = getValidation(fieldID);

WebGde/WebContent/WebGde-Widgets/Submit/submit.js

@@ -19,6 +19,7 @@ export const submitForm = async (e) => {
 		let errorMsg = null;
 		let doctype;
 		let section;
+		let keys = [];
 
 		// Validate all elements again
 		for (let element of elements) {
@@ -31,13 +32,11 @@ export const submitForm = async (e) => {
 			if (element.classList.contains('geotag') || element.classList.contains('altitude') || element.classList.contains('direction')) {
 				continue;
 			}			
-			if (type === 'button') continue
 			if (type === 'submit') continue
 			if (type === 'file') continue
 			if (type === 'hidden') continue
 			if (id === 'Radio_List' || element.classList.contains('radioOption')) continue 
             if (id === 'Checkbox_List' || element.classList.contains('checkboxOption')) continue
-            
 			if (id === 'DocType') {
 				doctype = element.options[element.selectedIndex].text;
 				continue;
@@ -57,6 +56,12 @@ export const submitForm = async (e) => {
 
 			// Update display of input field if input is not valid
 			if (!valid) {
+				if (type === 'button'){
+					const fieldMedia = document.getElementById(`${id}_container`);
+					fieldMedia.classList.remove('input-valid');
+					fieldMedia.classList.add('input-invalid');
+					continue
+				}
 				console.log(element);
 				error = true
 				if (type === 'select-one') {
@@ -69,7 +74,7 @@ export const submitForm = async (e) => {
 
 
 			if (!isValidValue) {
-				error = true
+				error = true		
 				const field = document.getElementById(id);
 				field.classList.remove('input-valid');
 				field.classList.add('input-invalid');
@@ -77,6 +82,16 @@ export const submitForm = async (e) => {
 			}
 		}
 
+		// TO-DO Separate validation for attached media (Image, Video, File)
+		for (let key of keys){
+			const inputElement = document.getElementById(`${key}_attachedMedia`);
+			if (inputElement.files.length === 0) {
+				console.log(key + " empty");
+				let emptyMedia = document.getElementsByClassName(key);
+				console.log(emptyMedia[0]);
+			}
+		}
+
 		// Update display of dropdown field if input is not valid
 		const dropdowns = $('.dropdown-input').select2();
 		for (let dropdown of dropdowns) {
@@ -141,6 +156,15 @@ export const submitForm = async (e) => {
 	}
 }
 
+function validateMedia(key){
+	const inputElement = document.getElementById(`${key}_attachedMedia`);
+	if (inputElement.files.length === 0) {
+		console.log(key + " empty");
+		return false;
+	}
+	return true;
+}
+
 export async function completeToNextNode(elementId) {
 	let requestJSON = {
 		"productionOutputUnits": {

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 = "Y"
+export const IS_RETRIEVE_FROM_BPO = "N"
 // 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,8 +30,8 @@ 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 = "Y"
-export const ADD_NEW_OPTION = "Y"
+export const SHOW_ELEMENT_LIST_VIEWER = "N"
+export const ADD_NEW_OPTION = "N"
 
 export const PDF_EXTENSION = ".pdf"
 export const JPG_EXTENSION = ".jpg"

WebGde/WebContent/WebGde-Widgets/sample_schema/schema_sqa.json

 {
   "MEDICAL RECORD" : {
     "PATIENT INFORMATION" : {
-      "thumb_print" : {
-        "fieldLabel" : "Thumb Print",
+      "image_sample" : {
+        "fieldLabel" : "Image Sample",
         "aka" : "field21",
         "validation" : {
-          "collection" : "fingerprint",
+          "collection" : "image-capture",
           "mandatory" : false
         }
       },
-      "patient_image" : {
-        "fieldLabel" : "Patient Image",
-        "aka" : "field1",
+      "video_sample" : {
+        "fieldLabel" : "Video Sample",
+        "aka" : "field22",
         "validation" : {
           "collection" : "video-capture",
           "mandatory" : true
         }
       },
+      "file_upload" : {
+        "fieldLabel" : "File Upload",
+        "aka" : "field1",
+        "validation" : {
+          "collection" : "file-upload",
+          "mandatory" : false
+        }
+      },
       "full_name" : {
         "fieldLabel" : "Full Name (Last, First, M.I)",
         "aka" : "field2",
@@ -47,13 +55,12 @@
           "mandatory" : true
         }
       },
-      "contact_details" : {
-        "fieldLabel" : "Contact Details",
+      "email_address" : {
+        "fieldLabel" : "Email Address",
         "aka" : "field5",
         "validation" : {
           "fieldLength" : 20.0,
-          "collection" : "alphanumeric",
-          "invalidchar" : "`~!@#&$%^*_={}[]:;/\"|\\<>",
+          "collection" : "email",
           "mandatory" : true
         }
       },
@@ -71,7 +78,7 @@
         "aka" : "field7",
         "validation" : {
           "fieldLength" : 10.0,
-          "collection" : "alphanumeric",
+          "collection" : "numeric",
           "mandatory" : true
         }
       }