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 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

91
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,49 +22,49 @@
</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
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');
}
}
// Close search results when clicking outside selectDesigner(id, name) {
document.addEventListener('click', function(e) { // Debug logging
const searchResults = document.querySelectorAll('[id^="designer-search-results-"]'); console.log('Selecting designer:', {id, name, submissionId: this.submissionId});
searchResults.forEach(function(resultsDiv) {
const searchInput = document.querySelector(`#designer-search-${resultsDiv.id.split('-').pop()}`); // Find elements using AlpineJS approach
if (!resultsDiv.contains(e.target) && e.target !== searchInput) { const designerInput = document.querySelector(`#designer-input-${this.submissionId}`);
resultsDiv.innerHTML = ''; 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> </script>

91
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,49 +22,49 @@
</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
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');
}
}
// Close search results when clicking outside selectRideModel(id, name) {
document.addEventListener('click', function(e) { // Debug logging
const searchResults = document.querySelectorAll('[id^="ride-model-search-results-"]'); console.log('Selecting ride model:', {id, name, submissionId: this.submissionId});
searchResults.forEach(function(resultsDiv) {
const searchInput = document.querySelector(`#ride-model-search-${resultsDiv.id.split('-').pop()}`); // Find elements using AlpineJS approach
if (!resultsDiv.contains(e.target) && e.target !== searchInput) { const modelInput = document.querySelector(`#ride-model-input-${this.submissionId}`);
resultsDiv.innerHTML = ''; 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> </script>