Refactor location widget and park search results templates to utilize Alpine.js for state management. Enhanced search functionality, improved data binding, and streamlined event handling for better user experience.

templates/moderation/partials/location_widget.html

@@ -19,30 +19,60 @@
 }
 </style>
 
-<div class="p-4 bg-white border rounded-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50">
+<div class="p-4 bg-white border rounded-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50"
+     x-data="locationWidget({
+        submissionId: '{{ submission.id }}',
+        initialData: {
+            city: '{{ submission.changes.city|default:"" }}',
+            state: '{{ submission.changes.state|default:"" }}',
+            country: '{{ submission.changes.country|default:"" }}',
+            postal_code: '{{ submission.changes.postal_code|default:"" }}',
+            street_address: '{{ submission.changes.street_address|default:"" }}',
+            latitude: '{{ submission.changes.latitude|default:"" }}',
+            longitude: '{{ submission.changes.longitude|default:"" }}'
+        }
+     })"
+     x-init="init()">
     <h3 class="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-300">Location</h3>
     
-    <div class="location-widget" id="locationWidget-{{ submission.id }}">
+    <div class="location-widget">
         {# Search Form #}
         <div class="relative mb-4">
             <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
                 Search Location
             </label>
             <input type="text" 
-                   id="locationSearch-{{ submission.id }}"
+                   x-model="searchQuery"
+                   @input.debounce.300ms="handleSearch()"
+                   @click.outside="showSearchResults = false"
                    class="relative w-full px-4 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 form-input"
                    placeholder="Search for a location..."
                    autocomplete="off"
                    style="z-index: 10;">
-            <div id="searchResults-{{ submission.id }}"
+            <div x-show="showSearchResults"
+                 x-transition
                  style="position: absolute; top: 100%; left: 0; right: 0; z-index: 1000;"
-                 class="hidden w-full mt-1 overflow-auto bg-white border rounded-md shadow-lg max-h-60 dark:bg-gray-700 dark:border-gray-600">
+                 class="w-full mt-1 overflow-auto bg-white border rounded-md shadow-lg max-h-60 dark:bg-gray-700 dark:border-gray-600">
+                <template x-for="(result, index) in searchResults" :key="index">
+                    <div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600"
+                         @click="selectLocation(result)">
+                        <div class="font-medium text-gray-900 dark:text-white" x-text="result.display_name || result.name || ''"></div>
+                        <div class="text-sm text-gray-500 dark:text-gray-400">
+                            <span x-text="result.address?.city ? result.address.city + ', ' : ''"></span>
+                            <span x-text="result.address?.country || ''"></span>
+                        </div>
+                    </div>
+                </template>
+                <div x-show="searchResults.length === 0 && searchQuery.length > 0" 
+                     class="p-2 text-gray-500 dark:text-gray-400">
+                    No results found
+                </div>
             </div>
         </div>
 
         {# Map Container #}
         <div class="relative mb-4" style="z-index: 1;">
-            <div id="locationMap-{{ submission.id }}" 
+            <div x-ref="mapContainer"
                  class="h-[300px] w-full rounded-lg border border-gray-300 dark:border-gray-600"></div>
         </div>
 
@@ -54,9 +84,8 @@
                 </label>
                 <input type="text" 
                        name="street_address" 
-                       id="streetAddress-{{ submission.id }}"
-                       class="w-full px-4 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 form-input"
-                       value="{{ submission.changes.street_address }}">
+                       x-model="formData.street_address"
+                       class="w-full px-4 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 form-input">
             </div>
             <div>
                 <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
@@ -64,9 +93,8 @@
                 </label>
                 <input type="text" 
                        name="city" 
-                       id="city-{{ submission.id }}"
-                       class="w-full px-4 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 form-input"
-                       value="{{ submission.changes.city }}">
+                       x-model="formData.city"
+                       class="w-full px-4 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 form-input">
             </div>
             <div>
                 <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
@@ -74,9 +102,8 @@
                 </label>
                 <input type="text" 
                        name="state" 
-                       id="state-{{ submission.id }}"
-                       class="w-full px-4 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 form-input"
-                       value="{{ submission.changes.state }}">
+                       x-model="formData.state"
+                       class="w-full px-4 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 form-input">
             </div>
             <div>
                 <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
@@ -84,9 +111,8 @@
                 </label>
                 <input type="text" 
                        name="country" 
-                       id="country-{{ submission.id }}"
-                       class="w-full px-4 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 form-input"
-                       value="{{ submission.changes.country }}">
+                       x-model="formData.country"
+                       class="w-full px-4 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 form-input">
             </div>
             <div>
                 <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
@@ -94,58 +120,49 @@
                 </label>
                 <input type="text" 
                        name="postal_code" 
-                       id="postalCode-{{ submission.id }}"
-                       class="w-full px-4 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 form-input"
-                       value="{{ submission.changes.postal_code }}">
+                       x-model="formData.postal_code"
+                       class="w-full px-4 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 form-input">
             </div>
         </div>
 
         {# Hidden Coordinate Fields #}
         <div class="hidden">
-            <input type="hidden" name="latitude" id="latitude-{{ submission.id }}" value="{{ submission.changes.latitude }}">
-            <input type="hidden" name="longitude" id="longitude-{{ submission.id }}" value="{{ submission.changes.longitude }}">
+            <input type="hidden" name="latitude" x-model="formData.latitude">
+            <input type="hidden" name="longitude" x-model="formData.longitude">
         </div>
     </div>
 </div>
 
 <script>
-document.addEventListener('DOMContentLoaded', function() {
-    let maps = {};
-    let markers = {};
-    const searchInput = document.getElementById('locationSearch-{{ submission.id }}');
-    const searchResults = document.getElementById('searchResults-{{ submission.id }}');
-    let searchTimeout;
+document.addEventListener('alpine:init', () => {
+    Alpine.data('locationWidget', (config) => ({
+        submissionId: config.submissionId,
+        formData: { ...config.initialData },
+        searchQuery: '',
+        searchResults: [],
+        showSearchResults: false,
+        map: null,
+        marker: null,
 
-    // Initialize form fields with existing values
-    const fields = {
-        city: '{{ submission.changes.city|default:"" }}',
-        state: '{{ submission.changes.state|default:"" }}',
-        country: '{{ submission.changes.country|default:"" }}',
-        postal_code: '{{ submission.changes.postal_code|default:"" }}',
-        street_address: '{{ submission.changes.street_address|default:"" }}',
-        latitude: '{{ submission.changes.latitude|default:"" }}',
-        longitude: '{{ submission.changes.longitude|default:"" }}'
-    };
-
-    Object.entries(fields).forEach(([field, value]) => {
-        const element = document.getElementById(`${field}-{{ submission.id }}`);
-        if (element) {
-            element.value = value;
-        }
-    });
-
-    // Set initial search input value if location exists
-    if (fields.street_address || fields.city) {
+        init() {
+            // Set initial search query if location exists
+            if (this.formData.street_address || this.formData.city) {
                 const parts = [
-            fields.street_address,
-            fields.city,
-            fields.state,
-            fields.country
+                    this.formData.street_address,
+                    this.formData.city,
+                    this.formData.state,
+                    this.formData.country
                 ].filter(Boolean);
-        searchInput.value = parts.join(', ');
+                this.searchQuery = parts.join(', ');
             }
 
-    function normalizeCoordinate(value, maxDigits, decimalPlaces) {
+            // Initialize map when component is ready
+            this.$nextTick(() => {
+                this.initMap();
+            });
+        },
+
+        normalizeCoordinate(value, maxDigits, decimalPlaces) {
             if (!value) return null;
             try {
                 const rounded = Number(value).toFixed(decimalPlaces);
@@ -161,11 +178,11 @@ document.addEventListener('DOMContentLoaded', function() {
                 console.error('Coordinate normalization failed:', error);
                 return null;
             }
-    }
+        },
 
-    function validateCoordinates(lat, lng) {
-        const normalizedLat = normalizeCoordinate(lat, 9, 6);
-        const normalizedLng = normalizeCoordinate(lng, 10, 6);
+        validateCoordinates(lat, lng) {
+            const normalizedLat = this.normalizeCoordinate(lat, 9, 6);
+            const normalizedLng = this.normalizeCoordinate(lng, 10, 6);
 
             if (normalizedLat === null || normalizedLng === null) {
                 throw new Error('Invalid coordinate format');
@@ -182,55 +199,61 @@ document.addEventListener('DOMContentLoaded', function() {
             }
 
             return { lat: normalizedLat, lng: normalizedLng };
-    }
+        },
 
-    function initMap() {
-        const submissionId = '{{ submission.id }}';
-        const mapId = `locationMap-${submissionId}`;
-        const mapContainer = document.getElementById(mapId);
-        
-        if (!mapContainer) {
-            console.error(`Map container ${mapId} not found`);
+        initMap() {
+            if (!this.$refs.mapContainer) {
+                console.error('Map container not found');
                 return;
             }
 
             // If map already exists, remove it
-        if (maps[submissionId]) {
-            maps[submissionId].remove();
-            delete maps[submissionId];
-            delete markers[submissionId];
+            if (this.map) {
+                this.map.remove();
+                this.map = null;
+                this.marker = null;
             }
 
             // Create new map
-        maps[submissionId] = L.map(mapId);
+            this.map = L.map(this.$refs.mapContainer);
             
             L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                 attribution: '© OpenStreetMap contributors'
-        }).addTo(maps[submissionId]);
+            }).addTo(this.map);
 
             // Initialize with existing coordinates if available
-        const initialLat = fields.latitude;
-        const initialLng = fields.longitude;
-        
-        if (initialLat && initialLng) {
+            if (this.formData.latitude && this.formData.longitude) {
                 try {
-                const normalized = validateCoordinates(initialLat, initialLng);
-                maps[submissionId].setView([normalized.lat, normalized.lng], 13);
-                addMarker(normalized.lat, normalized.lng);
+                    const normalized = this.validateCoordinates(this.formData.latitude, this.formData.longitude);
+                    this.map.setView([normalized.lat, normalized.lng], 13);
+                    this.addMarker(normalized.lat, normalized.lng);
                 } catch (error) {
                     console.error('Invalid initial coordinates:', error);
-                maps[submissionId].setView([0, 0], 2);
+                    this.map.setView([0, 0], 2);
                 }
             } else {
-            maps[submissionId].setView([0, 0], 2);
+                this.map.setView([0, 0], 2);
             }
 
-        // Handle map clicks - HTMX version
-        maps[submissionId].on('click', function(e) {
-            try {
-                const normalized = validateCoordinates(e.latlng.lat, e.latlng.lng);
+            // Handle map clicks
+            this.map.on('click', (e) => {
+                this.handleMapClick(e.latlng.lat, e.latlng.lng);
+            });
+        },
 
-                // Create a temporary form for HTMX request
+        addMarker(lat, lng) {
+            if (this.marker) {
+                this.marker.remove();
+            }
+            this.marker = L.marker([lat, lng]).addTo(this.map);
+            this.map.setView([lat, lng], 13);
+        },
+
+        async handleMapClick(lat, lng) {
+            try {
+                const normalized = this.validateCoordinates(lat, lng);
+                
+                // Use HTMX for reverse geocoding
                 const tempForm = document.createElement('form');
                 tempForm.style.display = 'none';
                 tempForm.setAttribute('hx-get', '/parks/search/reverse-geocode/');
@@ -241,15 +264,14 @@ document.addEventListener('DOMContentLoaded', function() {
                 tempForm.setAttribute('hx-trigger', 'submit');
                 tempForm.setAttribute('hx-swap', 'none');
                 
-                // Add event listener for HTMX response
-                tempForm.addEventListener('htmx:afterRequest', function(event) {
+                tempForm.addEventListener('htmx:afterRequest', (event) => {
                     if (event.detail.successful) {
                         try {
                             const data = JSON.parse(event.detail.xhr.responseText);
                             if (data.error) {
                                 throw new Error(data.error);
                             }
-                            updateLocation(normalized.lat, normalized.lng, data);
+                            this.updateLocation(normalized.lat, normalized.lng, data);
                         } catch (error) {
                             console.error('Location update failed:', error);
                             alert(error.message || 'Failed to update location. Please try again.');
@@ -258,7 +280,6 @@ document.addEventListener('DOMContentLoaded', function() {
                         console.error('Geocoding request failed');
                         alert('Failed to update location. Please try again.');
                     }
-                    // Clean up temporary form
                     document.body.removeChild(tempForm);
                 });
                 
@@ -269,56 +290,89 @@ document.addEventListener('DOMContentLoaded', function() {
                 console.error('Location update failed:', error);
                 alert(error.message || 'Failed to update location. Please try again.');
             }
-        });
-    }
+        },
 
-    function addMarker(lat, lng) {
-        const submissionId = '{{ submission.id }}';
-        if (markers[submissionId]) {
-            markers[submissionId].remove();
-        }
-        markers[submissionId] = L.marker([lat, lng]).addTo(maps[submissionId]);
-        maps[submissionId].setView([lat, lng], 13);
-    }
-
-    function updateLocation(lat, lng, data) {
+        updateLocation(lat, lng, data) {
             try {
-            const normalized = validateCoordinates(lat, lng);
-            const submissionId = '{{ submission.id }}';
+                const normalized = this.validateCoordinates(lat, lng);
                 
                 // Update coordinates
-            document.getElementById(`latitude-${submissionId}`).value = normalized.lat;
-            document.getElementById(`longitude-${submissionId}`).value = normalized.lng;
+                this.formData.latitude = normalized.lat;
+                this.formData.longitude = normalized.lng;
                 
                 // Update marker
-            addMarker(normalized.lat, normalized.lng);
+                this.addMarker(normalized.lat, normalized.lng);
                 
                 // Update form fields with English names where available
                 const address = data.address || {};
-            document.getElementById(`streetAddress-${submissionId}`).value = 
-                `${address.house_number || ''} ${address.road || address.street || ''}`.trim() || '';
-            document.getElementById(`city-${submissionId}`).value = 
-                address.city || address.town || address.village || '';
-            document.getElementById(`state-${submissionId}`).value = 
-                address.state || address.region || '';
-            document.getElementById(`country-${submissionId}`).value = address.country || '';
-            document.getElementById(`postalCode-${submissionId}`).value = address.postcode || '';
+                this.formData.street_address = `${address.house_number || ''} ${address.road || address.street || ''}`.trim() || '';
+                this.formData.city = address.city || address.town || address.village || '';
+                this.formData.state = address.state || address.region || '';
+                this.formData.country = address.country || '';
+                this.formData.postal_code = address.postcode || '';
 
                 // Update search input
-            const locationString-3 = [
-                document.getElementById(`streetAddress-${submissionId}`).value,
-                document.getElementById(`city-${submissionId}`).value,
-                document.getElementById(`state-${submissionId}`).value,
-                document.getElementById(`country-${submissionId}`).value
-            ].filter(Boolean).join(', ');
-            searchInput.value = locationString;
+                const locationParts = [
+                    this.formData.street_address,
+                    this.formData.city,
+                    this.formData.state,
+                    this.formData.country
+                ].filter(Boolean);
+                this.searchQuery = locationParts.join(', ');
             } catch (error) {
                 console.error('Location update failed:', error);
                 alert(error.message || 'Failed to update location. Please try again.');
             }
+        },
+
+        handleSearch() {
+            const query = this.searchQuery.trim();
+            
+            if (!query) {
+                this.showSearchResults = false;
+                return;
             }
 
-    function selectLocation(result) {
+            // Use HTMX for location search
+            const tempForm = document.createElement('form');
+            tempForm.style.display = 'none';
+            tempForm.setAttribute('hx-get', '/parks/search/location/');
+            tempForm.setAttribute('hx-vals', JSON.stringify({
+                q: query
+            }));
+            tempForm.setAttribute('hx-trigger', 'submit');
+            tempForm.setAttribute('hx-swap', 'none');
+            
+            tempForm.addEventListener('htmx:afterRequest', (event) => {
+                if (event.detail.successful) {
+                    try {
+                        const data = JSON.parse(event.detail.xhr.responseText);
+                        
+                        if (data.results && data.results.length > 0) {
+                            this.searchResults = data.results;
+                            this.showSearchResults = true;
+                        } else {
+                            this.searchResults = [];
+                            this.showSearchResults = true;
+                        }
+                    } catch (error) {
+                        console.error('Search failed:', error);
+                        this.searchResults = [];
+                        this.showSearchResults = false;
+                    }
+                } else {
+                    console.error('Search request failed');
+                    this.searchResults = [];
+                    this.showSearchResults = false;
+                }
+                document.body.removeChild(tempForm);
+            });
+            
+            document.body.appendChild(tempForm);
+            htmx.trigger(tempForm, 'submit');
+        },
+
+        selectLocation(result) {
             if (!result) return;
             
             try {
@@ -329,7 +383,7 @@ document.addEventListener('DOMContentLoaded', function() {
                     throw new Error('Invalid coordinates in search result');
                 }
                 
-            const normalized = validateCoordinates(lat, lon);
+                const normalized = this.validateCoordinates(lat, lon);
                 
                 // Create a normalized address object
                 const address = {
@@ -344,118 +398,14 @@ document.addEventListener('DOMContentLoaded', function() {
                     }
                 };
                 
-            updateLocation(normalized.lat, normalized.lng, address);
-            searchResults.classList.add('hidden');
-            searchInput.value = address.name;
+                this.updateLocation(normalized.lat, normalized.lng, address);
+                this.showSearchResults = false;
+                this.searchQuery = address.name;
             } catch (error) {
                 console.error('Location selection failed:', error);
                 alert(error.message || 'Failed to select location. Please try again.');
             }
         }
-
-    // Handle location search - HTMX version
-    searchInput.addEventListener('input', function() {
-        clearTimeout(searchTimeout);
-        const query = this.value.trim();
-        
-        if (!query) {
-            searchResults.classList.add('hidden');
-            return;
-        }
-
-        searchTimeout = setTimeout(function() {
-            // Create a temporary form for HTMX request
-            const tempForm = document.createElement('form');
-            tempForm.style.display = 'none';
-            tempForm.setAttribute('hx-get', '/parks/search/location/');
-            tempForm.setAttribute('hx-vals', JSON.stringify({
-                q: query
     }));
-            tempForm.setAttribute('hx-trigger', 'submit');
-            tempForm.setAttribute('hx-swap', 'none');
-            
-            // Add event listener for HTMX response
-            tempForm.addEventListener('htmx:afterRequest', function(event) {
-                if (event.detail.successful) {
-                    try {
-                        const data = JSON.parse(event.detail.xhr.responseText);
-                        
-                        if (data.results && data.results.length > 0) {
-                            const resultsHtml = data.results.map((result, index) => `
-                                <div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600"
-                                     data-result-index="${index}">
-                                    <div class="font-medium text-gray-900 dark:text-white">${result.display_name || result.name || ''}</div>
-                                    <div class="text-sm text-gray-500 dark:text-gray-400">
-                                        ${(result.address && result.address.city) ? result.address.city + ', ' : ''}${(result.address && result.address.country) || ''}
-                                    </div>
-                                </div>
-                            `).join('');
-                            
-                            searchResults.innerHTML = resultsHtml;
-                            searchResults.classList.remove('hidden');
-                            
-                            // Store results data
-                            searchResults.dataset.results = JSON.stringify(data.results);
-                            
-                            // Add click handlers
-                            searchResults.querySelectorAll('[data-result-index]').forEach(el => {
-                                el.addEventListener('click', function() {
-                                    const results = JSON.parse(searchResults.dataset.results);
-                                    const result = results[this.dataset.resultIndex];
-                                    selectLocation(result);
-                                });
-                            });
-                        } else {
-                            searchResults.innerHTML = '<div class="p-2 text-gray-500 dark:text-gray-400">No results found</div>';
-                            searchResults.classList.remove('hidden');
-                        }
-                    } catch (error) {
-                        console.error('Search failed:', error);
-                        searchResults.innerHTML = '<div class="p-2 text-red-500 dark:text-red-400">Search failed. Please try again.</div>';
-                        searchResults.classList.remove('hidden');
-                    }
-                } else {
-                    console.error('Search request failed');
-                    searchResults.innerHTML = '<div class="p-2 text-red-500 dark:text-red-400">Search failed. Please try again.</div>';
-                    searchResults.classList.remove('hidden');
-                }
-                // Clean up temporary form
-                document.body.removeChild(tempForm);
-            });
-            
-            document.body.appendChild(tempForm);
-            htmx.trigger(tempForm, 'submit');
-        }, 300);
-    });
-
-    // Hide search results when clicking outside
-    document.addEventListener('click', function(e) {
-        if (!searchResults.contains(e.target) && e.target !== searchInput) {
-            searchResults.classList.add('hidden');
-        }
-    });
-
-    // Initialize map when the element becomes visible
-    const observer = new MutationObserver(function(mutations) {
-        mutations.forEach(function(mutation) {
-            if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
-                const mapContainer = document.getElementById(`locationMap-{{ submission.id }}`);
-                if (mapContainer && window.getComputedStyle(mapContainer).display !== 'none') {
-                    initMap();
-                    observer.disconnect();
-                }
-            }
-        });
-    });
-
-    const mapContainer = document.getElementById(`locationMap-{{ submission.id }}`);
-    if (mapContainer) {
-        observer.observe(mapContainer.parentElement.parentElement, { attributes: true });
-        
-        // Also initialize immediately if the container is already visible
-        if (window.getComputedStyle(mapContainer).display !== 'none') {
-            initMap();
-        }
-    }
 });
 </script>

templates/moderation/partials/manufacturer_search_results.html

@@ -1,9 +1,12 @@
-<div class="w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg dark:bg-gray-700 dark:border-gray-600" style="max-height: 240px; overflow-y: auto;">
+<div class="w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg dark:bg-gray-700 dark:border-gray-600" 
+     style="max-height: 240px; overflow-y: auto;"
+     x-data="manufacturerSearchResults('{{ submission_id }}')"
+     @click.outside="clearResults()">
     {% if manufacturers %}
         {% for manufacturer in manufacturers %}
             <button type="button"
                     class="w-full px-4 py-2 text-left text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-                    onclick="selectManufacturerForSubmission('{{ manufacturer.id }}', '{{ manufacturer.name|escapejs }}', '{{ submission_id }}')">
+                    @click="selectManufacturer('{{ manufacturer.id }}', '{{ manufacturer.name|escapejs }}')">
                 {{ manufacturer.name }}
             </button>
         {% endfor %}
@@ -19,14 +22,18 @@
 </div>
 
 <script>
-function selectManufacturerForSubmission(id, name, submissionId) {
-    // Debug logging
-    console.log('Selecting manufacturer:', {id, name, submissionId});
+document.addEventListener('alpine:init', () => {
+    Alpine.data('manufacturerSearchResults', (submissionId) => ({
+        submissionId: submissionId,
 
-    // Find elements
-    const manufacturerInput = document.querySelector(`#manufacturer-input-${submissionId}`);
-    const searchInput = document.querySelector(`#manufacturer-search-${submissionId}`);
-    const resultsDiv = document.querySelector(`#manufacturer-search-results-${submissionId}`);
+        selectManufacturer(id, name) {
+            // Debug logging
+            console.log('Selecting manufacturer:', {id, name, submissionId: this.submissionId});
+            
+            // Find elements using AlpineJS approach
+            const manufacturerInput = document.querySelector(`#manufacturer-input-${this.submissionId}`);
+            const searchInput = document.querySelector(`#manufacturer-search-${this.submissionId}`);
+            const resultsDiv = document.querySelector(`#manufacturer-search-results-${this.submissionId}`);
             
             // Debug logging
             console.log('Found elements:', {
@@ -48,20 +55,16 @@ function selectManufacturerForSubmission(id, name, submissionId) {
             }
             
             // Clear results
+            this.clearResults();
+        },
+
+        clearResults() {
+            const resultsDiv = document.querySelector(`#manufacturer-search-results-${this.submissionId}`);
             if (resultsDiv) {
                 resultsDiv.innerHTML = '';
                 console.log('Cleared results div');
             }
         }
-
-// Close search results when clicking outside
-document.addEventListener('click', function(e) {
-    const searchResults = document.querySelectorAll('[id^="manufacturer-search-results-"]');
-    searchResults.forEach(function(resultsDiv) {
-        const searchInput = document.querySelector(`#manufacturer-search-${resultsDiv.id.split('-').pop()}`);
-        if (!resultsDiv.contains(e.target) && e.target !== searchInput) {
-            resultsDiv.innerHTML = '';
-        }
-    });
+    }));
 });
 </script>

templates/moderation/partials/park_search_results.html

@@ -1,9 +1,12 @@
-<div class="w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg dark:bg-gray-700 dark:border-gray-600" style="max-height: 240px; overflow-y: auto;">
+<div class="w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg dark:bg-gray-700 dark:border-gray-600" 
+     style="max-height: 240px; overflow-y: auto;"
+     x-data="parkSearchResults('{{ submission_id }}')"
+     @click.outside="clearResults()">
     {% if parks %}
         {% for park in parks %}
             <button type="button"
                     class="w-full px-4 py-2 text-left text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-                    onclick="selectParkForSubmission('{{ park.id }}', '{{ park.name|escapejs }}', '{{ submission_id }}')">
+                    @click="selectPark('{{ park.id }}', '{{ park.name|escapejs }}')">
                 {{ park.name }}
             </button>
         {% endfor %}
@@ -19,14 +22,18 @@
 </div>
 
 <script>
-function selectParkForSubmission(id, name, submissionId) {
-    // Debug logging
-    console.log('Selecting park:', {id, name, submissionId});
+document.addEventListener('alpine:init', () => {
+    Alpine.data('parkSearchResults', (submissionId) => ({
+        submissionId: submissionId,
 
-    // Find elements
-    const parkInput = document.querySelector(`#park-input-${submissionId}`);
-    const searchInput = document.querySelector(`#park-search-${submissionId}`);
-    const resultsDiv = document.querySelector(`#park-search-results-${submissionId}`);
+        selectPark(id, name) {
+            // Debug logging
+            console.log('Selecting park:', {id, name, submissionId: this.submissionId});
+            
+            // Find elements using AlpineJS approach
+            const parkInput = document.querySelector(`#park-input-${this.submissionId}`);
+            const searchInput = document.querySelector(`#park-search-${this.submissionId}`);
+            const resultsDiv = document.querySelector(`#park-search-results-${this.submissionId}`);
             
             // Debug logging
             console.log('Found elements:', {
@@ -48,26 +55,22 @@ function selectParkForSubmission(id, name, submissionId) {
             }
             
             // Clear results
-    if (resultsDiv) {
-        resultsDiv.innerHTML = '';
-        console.log('Cleared results div');
-    }
+            this.clearResults();
             
             // Trigger park areas update
             if (parkInput) {
                 htmx.trigger(parkInput, 'change');
                 console.log('Triggered change event');
             }
-}
+        },
 
-// Close search results when clicking outside
-document.addEventListener('click', function(e) {
-    const searchResults = document.querySelectorAll('[id^="park-search-results-"]');
-    searchResults.forEach(function(resultsDiv) {
-        const searchInput = document.querySelector(`#park-search-${resultsDiv.id.split('-').pop()}`);
-        if (!resultsDiv.contains(e.target) && e.target !== searchInput) {
+        clearResults() {
+            const resultsDiv = document.querySelector(`#park-search-results-${this.submissionId}`);
+            if (resultsDiv) {
                 resultsDiv.innerHTML = '';
+                console.log('Cleared results div');
             }
-    });
+        }
+    }));
 });
 </script>