finish packaging $lib; add validate, backroom packages

2025-04-13 18:52:59 -06:00
parent 298ce6954b
commit d3bf5a61c0
3 changed files with 103 additions and 0 deletions
--- a/complete.ts
+++ b/complete.ts
@@ -0,0 +1,78 @@
+import { validateInput } from '@repo/validate';
+
+export class AddressComplete {
+	private primary?: HTMLInputElement;
+	address2?: HTMLInputElement;
+	city?: HTMLInputElement;
+	province?: HTMLInputElement;
+	postalCode?: HTMLInputElement;
+	country?: HTMLInputElement;
+
+	bind(primary: HTMLInputElement) {
+		this.primary = primary;
+		addListener(this.primary, this);
+	}
+}
+
+const addListener = (node: HTMLInputElement, completer: AddressComplete) => {
+	const googleOptions: google.maps.places.AutocompleteOptions = {
+		// componentRestrictions: { country: ['ca'] },
+		fields: ['address_components'],
+		strictBounds: false
+	};
+
+	const autocomplete = new google.maps.places.Autocomplete(node, googleOptions);
+
+	autocomplete.addListener('place_changed', () => {
+		let address1 = '';
+		let postalCode = '';
+
+		const place = autocomplete.getPlace();
+		// Sort each component
+		for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) {
+			const componentType = component.types[0];
+
+			switch (componentType) {
+				case 'street_number': {
+					address1 = `${component.long_name} ${address1}`;
+					break;
+				}
+				case 'route': {
+					address1 += component.short_name;
+					break;
+				}
+				case 'postal_code': {
+					postalCode = `${component.long_name}${postalCode}`;
+					break;
+				}
+				case 'postal_code_suffix': {
+					postalCode = `${postalCode}-${component.long_name}`;
+					break;
+				}
+				case 'locality': {
+					if (completer.city) completer.city.value = component.long_name;
+					break;
+				}
+				case 'administrative_area_level_1': {
+					// completer.province?.setValStr(component.short_name);
+					if (completer.province) completer.province.value = component.short_name;
+					break;
+				}
+				case 'country': {
+					// completer.country?.setValStr(component.short_name);
+					if (completer.country) completer.country.value = component.short_name;
+					break;
+				}
+			}
+		}
+
+		node.value = address1;
+		if (completer.postalCode) completer.postalCode.value = postalCode;
+		completer.address2?.focus();
+
+		// Trigger rechecks on each field
+		validateInput(node);
+		if (completer.city !== undefined) validateInput(completer.city);
+		if (completer.postalCode !== undefined) validateInput(completer.postalCode);
+	});
+};