assetflow/static/js/searchBox.js

document.getElementById('SearchBoxInput').addEventListener('keyup', handleSearchChange);
document.getElementById('searchForm').addEventListener('submit', handleSearchSubmit);
document.addEventListener('keyup', handleHotKey)
const autocompleteBox = document.getElementById('autocompletBody');
autocompleteBox.style.display = 'none';

currentBestGuessCommand = '';

function handleSearchChange(e) {
	console.log(e.target.value);
	// document.getElementById("SearchBox").setAttribute("data-bs-content", "Search results will show up here soon")

	// return; // No you won't. I'm not done yet.
	// Check if known prefix is used (either > or #)
	if (e.target.value != '') {
		autocompleteBox.style.display = 'block';
		autocompleteBox.innerHTML = 'Search results will show up here soon <br> Trust me <br> Results';
	} else {
		autocompleteBox.style.display = 'none';
	}

	if (e.target.value[0] == '>') {
		// List of valid routes
		urlList = {
			items: { url: '/items?page=1', alias: ['item'] },
			'storage locations': { url: '/manage/storages', alias: ['locations', 'storage'] },
			'storage units': { url: '/manage/storages#storage-unit-tab', alias: ['units'] },
			categories: { url: '/manage/categories', alias: ['category'] }
		};
		autocompleteBox.innerHTML = 'Start typing to search for commands <br> >goto items';
		const args = e.target.value.split(' ');
		console.log(args);
		if (args.length > 1) {
			if (args[0] == '>goto' || args[0] == '>g') {
				console.log('Handling >goto');
				autocompleteBox.innerHTML = 'Start typing to search for commands <br>' + Object.keys(urlList).join('<br>') + '<br>';
				if (args.length >= 2) {
					console.log("Autocomplete for 'goto' command with " + args[1] + " as the second argument")
					// Check if the second argument matches the urlList or any of its aliases
					for (const [key, value] of Object.entries(urlList)) {
						console.log(key, value)
						if (args[1] == key || value.alias.includes(args[1])) {
							// Match found
							console.log('Match found');
							autocompleteBox.innerHTML = `Go to <a href="${value.url}">${key}</a>`;
							currentBestGuessCommand = "open;" + value.url;
							break;
						} else {
							currentBestGuessCommand = '';
						}
					}

				}
			}
		}
	} else if (e.target.value[0] == '#') {
		// Search for SKU
		const searchedSKU = e.target.value.substring(1);
		if(searchedSKU == '') {
			autocompleteBox.innerHTML = 'Start typing to search for commands <br> #SKU';
			return;
		}
		const baseURI = window.location.origin; // move to new fancy route
		const url = baseURI + '/api/v1/search/sku?sku=' + searchedSKU;

		
		$.ajax({
			type: 'get',
			url: url,
			success: function (result) {
				let htmlResult = ""
				result.forEach(element => {
					console.log(element);
					htmlResult += `<a href="/s/${element.SKU}">${element.name}</a><br>`
				});

				autocompleteBox.innerHTML = htmlResult;
			},
			error: function (data) {
				createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong while searching...', "text-bg-danger", autoHideTime = 3000, autoReload = false)
			}
		});
	} else {
		// Search for name
	}
}

function handleSearchSubmit(e) {
	console.log('Search submitted');
	if(currentBestGuessCommand != '') {
		console.log('Submitting command ' + currentBestGuessCommand);
		cmdArgs = currentBestGuessCommand.split(';');
		if(cmdArgs[0] == 'open') {
			// Open the url in the current tab
			setTimeout(() => {

				window.location.replace(cmdArgs[1]);
			}, 200);
			return false;
		}
	}
	return false;
}

function handleHotKey(e) {
	// If c is pressed, focus on the search box
	if(e.key == 'c' && e.altKey && e.ctrlKey) {
		// Show search_modal modal
		bootstrap.Modal.getOrCreateInstance($('#search_modal')).show()
		document.getElementById('SearchBoxInput').focus();
	}
}