Refactor designer and ride model search results templates to utilize Alpine.js for state management. Enhanced selection functionality and improved event handling for better user experience.

templates/moderation/partials/designer_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="designerSearchResults('{{ submission_id }}')"
+     @click.outside="clearResults()">
     {% if designers %}
         {% for designer in designers %}
             <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="selectDesignerForSubmission('{{ designer.id }}', '{{ designer.name|escapejs }}', '{{ submission_id }}')">
+                    @click="selectDesigner('{{ designer.id }}', '{{ designer.name|escapejs }}')">
                 {{ designer.name }}
             </button>
         {% endfor %}
@@ -19,49 +22,49 @@
 </div>
 
 <script>
-function selectDesignerForSubmission(id, name, submissionId) {
-    // Debug logging
-    console.log('Selecting designer:', {id, name, submissionId});
-    
-    // Find elements
-    const designerInput = document.querySelector(`#designer-input-${submissionId}`);
-    const searchInput = document.querySelector(`#designer-search-${submissionId}`);
-    const resultsDiv = document.querySelector(`#designer-search-results-${submissionId}`);
-    
-    // Debug logging
-    console.log('Found elements:', {
-        designerInput: designerInput?.id,
-        searchInput: searchInput?.id,
-        resultsDiv: resultsDiv?.id
-    });
-    
-    // Update hidden input
-    if (designerInput) {
-        designerInput.value = id;
-        console.log('Updated designer input value:', designerInput.value);
-    }
-    
-    // Update search input
-    if (searchInput) {
-        searchInput.value = name;
-        console.log('Updated search input value:', searchInput.value);
-    }
-    
-    // Clear results
-    if (resultsDiv) {
-        resultsDiv.innerHTML = '';
-        console.log('Cleared results div');
-    }
-}
+document.addEventListener('alpine:init', () => {
+    Alpine.data('designerSearchResults', (submissionId) => ({
+        submissionId: submissionId,
 
-// Close search results when clicking outside
-document.addEventListener('click', function(e) {
-    const searchResults = document.querySelectorAll('[id^="designer-search-results-"]');
-    searchResults.forEach(function(resultsDiv) {
-        const searchInput = document.querySelector(`#designer-search-${resultsDiv.id.split('-').pop()}`);
-        if (!resultsDiv.contains(e.target) && e.target !== searchInput) {
-            resultsDiv.innerHTML = '';
+        selectDesigner(id, name) {
+            // Debug logging
+            console.log('Selecting designer:', {id, name, submissionId: this.submissionId});
+            
+            // Find elements using AlpineJS approach
+            const designerInput = document.querySelector(`#designer-input-${this.submissionId}`);
+            const searchInput = document.querySelector(`#designer-search-${this.submissionId}`);
+            const resultsDiv = document.querySelector(`#designer-search-results-${this.submissionId}`);
+            
+            // Debug logging
+            console.log('Found elements:', {
+                designerInput: designerInput?.id,
+                searchInput: searchInput?.id,
+                resultsDiv: resultsDiv?.id
+            });
+            
+            // Update hidden input
+            if (designerInput) {
+                designerInput.value = id;
+                console.log('Updated designer input value:', designerInput.value);
+            }
+            
+            // Update search input
+            if (searchInput) {
+                searchInput.value = name;
+                console.log('Updated search input value:', searchInput.value);
+            }
+            
+            // Clear results
+            this.clearResults();
+        },
+
+        clearResults() {
+            const resultsDiv = document.querySelector(`#designer-search-results-${this.submissionId}`);
+            if (resultsDiv) {
+                resultsDiv.innerHTML = '';
+                console.log('Cleared results div');
+            }
         }
-    });
+    }));
 });
 </script>

templates/moderation/partials/ride_model_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="rideModelSearchResults('{{ submission_id }}')"
+     @click.outside="clearResults()">
     {% if ride_models %}
         {% for model in ride_models %}
             <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="selectRideModelForSubmission('{{ model.id }}', '{{ model.name|escapejs }}', '{{ submission_id }}')">
+                    @click="selectRideModel('{{ model.id }}', '{{ model.name|escapejs }}')">
                 {{ model.name }}
             </button>
         {% endfor %}
@@ -19,49 +22,49 @@
 </div>
 
 <script>
-function selectRideModelForSubmission(id, name, submissionId) {
-    // Debug logging
-    console.log('Selecting ride model:', {id, name, submissionId});
-    
-    // Find elements
-    const modelInput = document.querySelector(`#ride-model-input-${submissionId}`);
-    const searchInput = document.querySelector(`#ride-model-search-${submissionId}`);
-    const resultsDiv = document.querySelector(`#ride-model-search-results-${submissionId}`);
-    
-    // Debug logging
-    console.log('Found elements:', {
-        modelInput: modelInput?.id,
-        searchInput: searchInput?.id,
-        resultsDiv: resultsDiv?.id
-    });
-    
-    // Update hidden input
-    if (modelInput) {
-        modelInput.value = id;
-        console.log('Updated ride model input value:', modelInput.value);
-    }
-    
-    // Update search input
-    if (searchInput) {
-        searchInput.value = name;
-        console.log('Updated search input value:', searchInput.value);
-    }
-    
-    // Clear results
-    if (resultsDiv) {
-        resultsDiv.innerHTML = '';
-        console.log('Cleared results div');
-    }
-}
+document.addEventListener('alpine:init', () => {
+    Alpine.data('rideModelSearchResults', (submissionId) => ({
+        submissionId: submissionId,
 
-// Close search results when clicking outside
-document.addEventListener('click', function(e) {
-    const searchResults = document.querySelectorAll('[id^="ride-model-search-results-"]');
-    searchResults.forEach(function(resultsDiv) {
-        const searchInput = document.querySelector(`#ride-model-search-${resultsDiv.id.split('-').pop()}`);
-        if (!resultsDiv.contains(e.target) && e.target !== searchInput) {
-            resultsDiv.innerHTML = '';
+        selectRideModel(id, name) {
+            // Debug logging
+            console.log('Selecting ride model:', {id, name, submissionId: this.submissionId});
+            
+            // Find elements using AlpineJS approach
+            const modelInput = document.querySelector(`#ride-model-input-${this.submissionId}`);
+            const searchInput = document.querySelector(`#ride-model-search-${this.submissionId}`);
+            const resultsDiv = document.querySelector(`#ride-model-search-results-${this.submissionId}`);
+            
+            // Debug logging
+            console.log('Found elements:', {
+                modelInput: modelInput?.id,
+                searchInput: searchInput?.id,
+                resultsDiv: resultsDiv?.id
+            });
+            
+            // Update hidden input
+            if (modelInput) {
+                modelInput.value = id;
+                console.log('Updated ride model input value:', modelInput.value);
+            }
+            
+            // Update search input
+            if (searchInput) {
+                searchInput.value = name;
+                console.log('Updated search input value:', searchInput.value);
+            }
+            
+            // Clear results
+            this.clearResults();
+        },
+
+        clearResults() {
+            const resultsDiv = document.querySelector(`#ride-model-search-results-${this.submissionId}`);
+            if (resultsDiv) {
+                resultsDiv.innerHTML = '';
+                console.log('Cleared results div');
+            }
         }
-    });
+    }));
 });
 </script>