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

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

Browse Source
This commit is contained in:
pacnpal
2025-09-26 14:30:22 -04:00
parent 07ab9f28f2
commit ce382a4361
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/designer_search_results.html
View File

@@ -1,9 +1,32 @@
<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('designerSearchResults', () => ({
selectDesigner(id, name) {
// Update designer fields using AlpineJS reactive approach
const designerInput = this.$el.closest('form').querySelector('#id_designer');
const searchInput = this.$el.closest('form').querySelector('#id_designer_search');
const resultsDiv = this.$el.closest('form').querySelector('#designer-search-results');
if (designerInput) designerInput.value = id;
if (searchInput) searchInput.value = name;
if (resultsDiv) resultsDiv.innerHTML = '';
// Dispatch custom event for parent component
this.$dispatch('designer-selected', { id, name });
}
}));
});
</script>
<div x-data="designerSearchResults()"
@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 designers %} {% if designers %}
{% for designer in designers %} {% for designer in designers %}
<button type="button" <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" 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="selectDesigner('{{ designer.id }}', '{{ designer.name|escapejs }}')"> @click="selectDesigner('{{ designer.id }}', '{{ designer.name|escapejs }}')">
{{ designer.name }} {{ designer.name }}
</button> </button>
{% endfor %} {% endfor %}
@@ -17,11 +40,3 @@
</div> </div>
{% endif %} {% endif %}
</div> </div>
<script>
function selectDesigner(id, name) {
document.getElementById('id_designer').value = id;
document.getElementById('id_designer_search').value = name;
document.getElementById('designer-search-results').innerHTML = '';
}
</script>