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 and ride model search results templates to utilize Alpine.js for state management. Enhanced selection functionality and improved event handling for better user experience.

Browse Source
This commit is contained in:
pacnpal
2025-09-26 14:23:03 -04:00
parent 851709058f
commit b9377ead37
2 changed files with 94 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
templates/moderation/partials/designer_search_results.html
View File

@@ -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 %} {% 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="selectDesignerForSubmission('{{ designer.id }}', '{{ designer.name|escapejs }}', '{{ submission_id }}')"> @click="selectDesigner('{{ designer.id }}', '{{ designer.name|escapejs }}')">
{{ designer.name }} {{ designer.name }}
</button> </button>
{% endfor %} {% endfor %}
@@ -19,14 +22,18 @@
</div> </div>
<script> <script>
function selectDesignerForSubmission(id, name, submissionId) { document.addEventListener('alpine:init', () => {
// Debug logging Alpine.data('designerSearchResults', (submissionId) => ({
console.log('Selecting designer:', {id, name, submissionId}); submissionId: submissionId,
// Find elements selectDesigner(id, name) {
const designerInput = document.querySelector(`#designer-input-${submissionId}`); // Debug logging
const searchInput = document.querySelector(`#designer-search-${submissionId}`); console.log('Selecting designer:', {id, name, submissionId: this.submissionId});
const resultsDiv = document.querySelector(`#designer-search-results-${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 // Debug logging
console.log('Found elements:', { console.log('Found elements:', {
@@ -48,20 +55,16 @@ function selectDesignerForSubmission(id, name, submissionId) {
} }
// Clear results // Clear results
this.clearResults();
},
clearResults() {
const resultsDiv = document.querySelector(`#designer-search-results-${this.submissionId}`);
if (resultsDiv) { if (resultsDiv) {
resultsDiv.innerHTML = ''; resultsDiv.innerHTML = '';
console.log('Cleared results div'); console.log('Cleared results div');
} }
} }
}));
// 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 = '';
}
});
}); });
</script> </script>

41
templates/moderation/partials/ride_model_search_results.html
View File

@@ -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 %} {% if ride_models %}
{% for model in ride_models %} {% for model in ride_models %}
<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="selectRideModelForSubmission('{{ model.id }}', '{{ model.name|escapejs }}', '{{ submission_id }}')"> @click="selectRideModel('{{ model.id }}', '{{ model.name|escapejs }}')">
{{ model.name }} {{ model.name }}
</button> </button>
{% endfor %} {% endfor %}
@@ -19,14 +22,18 @@
</div> </div>
<script> <script>
function selectRideModelForSubmission(id, name, submissionId) { document.addEventListener('alpine:init', () => {
// Debug logging Alpine.data('rideModelSearchResults', (submissionId) => ({
console.log('Selecting ride model:', {id, name, submissionId}); submissionId: submissionId,
// Find elements selectRideModel(id, name) {
const modelInput = document.querySelector(`#ride-model-input-${submissionId}`); // Debug logging
const searchInput = document.querySelector(`#ride-model-search-${submissionId}`); console.log('Selecting ride model:', {id, name, submissionId: this.submissionId});
const resultsDiv = document.querySelector(`#ride-model-search-results-${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 // Debug logging
console.log('Found elements:', { console.log('Found elements:', {
@@ -48,20 +55,16 @@ function selectRideModelForSubmission(id, name, submissionId) {
} }
// Clear results // Clear results
this.clearResults();
},
clearResults() {
const resultsDiv = document.querySelector(`#ride-model-search-results-${this.submissionId}`);
if (resultsDiv) { if (resultsDiv) {
resultsDiv.innerHTML = ''; resultsDiv.innerHTML = '';
console.log('Cleared results div'); console.log('Cleared results div');
} }
} }
}));
// 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 = '';
}
});
}); });
</script> </script>