pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-20 03:51:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor manufacturer search results template to utilize Alpine.js for state management. Enhanced manufacturer selection handling and improved event dispatching for better user experience.

Browse Source
This commit is contained in:
pacnpal
2025-09-26 14:29:37 -04:00
parent 40e5cf3162
commit 07ab9f28f2
1 changed files with 31 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
templates/rides/partials/manufacturer_search_results.html
View File

@@ -1,9 +1,38 @@
<div class="absolute z-50 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;">
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('manufacturerSearchResults', () => ({
selectManufacturer(id, name) {
// Update manufacturer fields using AlpineJS reactive approach
const manufacturerInput = this.$el.closest('form').querySelector('#id_manufacturer');
const searchInput = this.$el.closest('form').querySelector('#id_manufacturer_search');
const resultsDiv = this.$el.closest('form').querySelector('#manufacturer-search-results');
if (manufacturerInput) manufacturerInput.value = id;
if (searchInput) searchInput.value = name;
if (resultsDiv) resultsDiv.innerHTML = '';
// Update ride model search to include manufacturer using HTMX
const rideModelSearch = this.$el.closest('form').querySelector('#id_ride_model_search');
if (rideModelSearch) {
rideModelSearch.setAttribute('hx-include', '[name="manufacturer"]');
}
// Dispatch custom event for parent component
this.$dispatch('manufacturer-selected', { id, name });
}
}));
});
</script>
<div x-data="manufacturerSearchResults()"
@click.outside="$el.innerHTML = ''"
class="absolute z-50 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;">
{% 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="selectManufacturer('{{ manufacturer.id }}', '{{ manufacturer.name|escapejs }}')">
@click="selectManufacturer('{{ manufacturer.id }}', '{{ manufacturer.name|escapejs }}')">
{{ manufacturer.name }}
</button>
{% endfor %}
@@ -17,17 +46,3 @@
</div>
{% endif %}
</div>
<script>
function selectManufacturer(id, name) {
document.getElementById('id_manufacturer').value = id;
document.getElementById('id_manufacturer_search').value = name;
document.getElementById('manufacturer-search-results').innerHTML = '';
// Update ride model search to include manufacturer
const rideModelSearch = document.getElementById('id_ride_model_search');
if (rideModelSearch) {
rideModelSearch.setAttribute('hx-include', '[name="manufacturer"]');
}
}
</script>