Merge branch 'feature-WG-427' into 'feature-ui-update'

WebGde/WebContent/WebGde-Widgets/ElementListWidget/ElementListWidget.css

@@ -150,6 +150,17 @@ body {
 	gap: 2rem;
 }
 
+#search-input {
+	padding: 8px;
+	margin-bottom: 10px;
+	width: 100%;
+	box-sizing: border-box;
+	/* Ensures padding doesn't increase its size */
+	border: 1px solid #ccc;
+	border-radius: 4px;
+}
+
+
 
 
 /* Media Queries */

WebGde/WebContent/WebGde-Widgets/ElementListWidget/ElementListWidget.js

@@ -87,41 +87,26 @@ export class ElementListWidget {
 		this.global.encodeButton.disabled = true;
 		this.global.encodeButton.classList.add("disabled");
 
+		// Create a search input field
+		const searchInput = document.createElement("input");
+		searchInput.placeholder = "Search elements...";
+		searchInput.id = "search-input";
+		searchInput.type = "text";
+		this.global.container.appendChild(searchInput);
+
+		// Event listener for search input
+		searchInput.addEventListener("input", () => {
+			this.applySearchFilter(searchInput.value);
+		});
+
 		// Create an element list container for the elements
 		const elementList = document.createElement("div");
 		elementList.classList.add("element-list");
+		elementList.id = "element-list";
+		this.global.container.appendChild(elementList);
 
-		this.elements.forEach(element => {
-			const elementContainer = document.createElement("div");
-			elementContainer.classList.add("element-container");
-
-			const elementDiv = document.createElement("div");
-			elementDiv.classList.add("element-item");
-
-			const elementIdSpan = document.createElement("span");
-			elementIdSpan.textContent = element.elementId;
-			elementDiv.appendChild(elementIdSpan);
-
-			elementContainer.appendChild(elementDiv);
-			elementList.appendChild(elementContainer);
-
-			// Move the click event listener from the elementDiv to the elementContainer
-			elementContainer.addEventListener("click", () => {
-				if (elementContainer.classList.contains("selected")) {
-					deselectAll();
-				} else {
-					deselectAll();
-					elementContainer.classList.add("selected");
-					this.global.selectedElement = element;
-					this.global.queueIndex = element.queueIndex;  // <-- Update the queueIndex here
-					this.showExtraDetails(element, elementContainer);
-					this.global.encodeButton.disabled = false;
-					this.global.encodeButton.classList.remove("disabled");
-				}
-			});
-		});
-
-		this.global.container.appendChild(elementList);  // Add the wrapped elements to the main container
+		// Populate the list with all elements initially
+		this.applySearchFilter('');
 
 		// Create a parent div for the buttons
 		const buttonContainer = document.createElement("div");
@@ -136,25 +121,22 @@ export class ElementListWidget {
 			}
 		});
 
-
-
 		buttonContainer.appendChild(this.global.encodeButton);
 
-		if (ADD_NEW_OPTION === 'Y'){
+		if (ADD_NEW_OPTION === 'Y') {
 			const newButton = document.createElement("button");
 			newButton.id = "new-btn";
 			newButton.textContent = "NEW";
 			newButton.addEventListener("click", () => this.handleNewClick());
 			buttonContainer.appendChild(newButton);
-	
 			this.global.newButton = newButton;
 		}
 
 		this.global.container.appendChild(buttonContainer);
-
 	}
 
 
+
 	getContainer() {
 		return this.global.container;
 	}
@@ -167,24 +149,77 @@ export class ElementListWidget {
 		return this.global.encodeButton;
 	}
 
+	applySearchFilter(searchQuery) {
+		const filteredElements = this.elements.filter(element =>
+			element.elementId.toLowerCase().includes(searchQuery.toLowerCase()) // Case-insensitive search
+		);
+
+		// Get the element list container
+		const elementList = document.getElementById("element-list");
+		elementList.innerHTML = "";  // Clear existing elements
+
+		// Helper function to deselect all elements and remove their extra details
+		const deselectAll = () => {
+			document.querySelectorAll(".element-container.selected").forEach(el => {
+				el.classList.remove("selected");
+				this.removeExtraDetails(el);
+			});
+			this.global.selectedElement = null;
+			this.global.encodeButton.disabled = true;
+			this.global.encodeButton.classList.add("disabled");
+		};
+
+		// Render filtered elements
+		filteredElements.forEach(element => {
+			const elementContainer = document.createElement("div");
+			elementContainer.classList.add("element-container");
+
+			const elementDiv = document.createElement("div");
+			elementDiv.classList.add("element-item");
+
+			const elementIdSpan = document.createElement("span");
+			elementIdSpan.textContent = element.elementId;
+			elementDiv.appendChild(elementIdSpan);
+
+			elementContainer.appendChild(elementDiv);
+			elementList.appendChild(elementContainer);
+
+			// Click event listener for each element container
+			elementContainer.addEventListener("click", () => {
+				if (elementContainer.classList.contains("selected")) {
+					deselectAll();
+				} else {
+					deselectAll();
+					elementContainer.classList.add("selected");
+					this.global.selectedElement = element;
+					this.global.queueIndex = element.queueIndex; // <-- Update the queueIndex here
+					this.showExtraDetails(element, elementContainer);
+					this.global.encodeButton.disabled = false;
+					this.global.encodeButton.classList.remove("disabled");
+				}
+			});
+		});
+	}
+
+
 
 
 	showExtraDetails(element, elementContainer) {
 		// Remove existing extra details if any
 		this.removeExtraDetails(elementContainer);
-	
+
 		// Check if there are any extra details
 		if (element.extraDetails && Object.keys(element.extraDetails).length > 0) {
 			const displayedKeys = DISPLAYED_DETAILS.split('|'); // Split into an array
-	
+
 			Object.entries(element.extraDetails).forEach(([key, value]) => {
 				if (displayedKeys.includes(key)) { // Check if key is in the array
 					const detailDiv = document.createElement("div");
 					detailDiv.classList.add("detail-item");
-	
+
 					const detailSpan = document.createElement("span");
 					detailSpan.textContent = `${key}: ${value}`;
-	
+
 					detailDiv.appendChild(detailSpan);
 					elementContainer.appendChild(detailDiv);
 				}
@@ -250,13 +285,13 @@ export class ElementListWidget {
 		assignResponse = await assignElementToWorker(this.global.workerId, this.nodeId, this.global.queueIndex, elementId);
 		if (!assignResponse.successful) {
 			assignResponse = await assignReturnedElementToWorker(this.global.workerId, this.nodeId, elementId)
-			if (!assignResponse.successful){
+			if (!assignResponse.successful) {
 				console.error('Failed to assign element to worker:', assignResponse);
 				return;
 			}
 		}
 		// Populate fields if assignment is successful.
-		if(assignResponse.successful){
+		if (assignResponse.successful) {
 			await populateFields();
 		}
 	}
@@ -277,7 +312,7 @@ async function assignElementToWorker(workerId, nodeId, queueIndex, elementId) {
 	return await response.json();
 }
 
-async function assignReturnedElementToWorker(workerId, nodeId, elementId){
+async function assignReturnedElementToWorker(workerId, nodeId, elementId) {
 	const response = await fetch(`${API_ROOT}/workers/${workerId}/nodes/${nodeId}/returned-elements/${elementId}`);
 	return await response.json();
 }

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" //pipe-delimited