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

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

Browse Source
This commit is contained in:
pacnpal
2025-09-26 14:31:15 -04:00
parent ce382a4361
commit 47c435d2f5
1 changed files with 25 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
templates/rides/partials/ride_model_search_results.html
View File

@@ -1,4 +1,27 @@
<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('rideModelSearchResults', () => ({
selectRideModel(id, name) {
// Update ride model fields using AlpineJS reactive approach
const rideModelInput = this.$el.closest('form').querySelector('#id_ride_model');
const searchInput = this.$el.closest('form').querySelector('#id_ride_model_search');
const resultsDiv = this.$el.closest('form').querySelector('#ride-model-search-results');
if (rideModelInput) rideModelInput.value = id;
if (searchInput) searchInput.value = name;
if (resultsDiv) resultsDiv.innerHTML = '';
// Dispatch custom event for parent component
this.$dispatch('ride-model-selected', { id, name });
}
}));
});
</script>
<div x-data="rideModelSearchResults()"
@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 not manufacturer_id %}
<div class="px-4 py-2 text-gray-700 dark:text-gray-300">
Please select a manufacturer first
@@ -8,7 +31,7 @@
{% for ride_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="selectRideModel('{{ ride_model.id }}', '{{ ride_model.name|escapejs }}')">
@click="selectRideModel('{{ ride_model.id }}', '{{ ride_model.name|escapejs }}')">
{{ ride_model.name }}
{% if ride_model.manufacturer %}
<div class="text-sm text-gray-700 dark:text-gray-300">
@@ -28,11 +51,3 @@
{% endif %}
{% endif %}
</div>
<script>
function selectRideModel(id, name) {
document.getElementById('id_ride_model').value = id;
document.getElementById('id_ride_model_search').value = name;
document.getElementById('ride-model-search-results').innerHTML = '';
}
</script>