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

81
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 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}`);
// Debug logging // Find elements using AlpineJS approach
console.log('Found elements:', { const designerInput = document.querySelector(`#designer-input-${this.submissionId}`);
designerInput: designerInput?.id, const searchInput = document.querySelector(`#designer-search-${this.submissionId}`);
searchInput: searchInput?.id, const resultsDiv = document.querySelector(`#designer-search-results-${this.submissionId}`);
resultsDiv: resultsDiv?.id
});
// Update hidden input // Debug logging
if (designerInput) { console.log('Found elements:', {
designerInput.value = id; designerInput: designerInput?.id,
console.log('Updated designer input value:', designerInput.value); searchInput: searchInput?.id,
} resultsDiv: resultsDiv?.id
});
// Update search input // Update hidden input
if (searchInput) { if (designerInput) {
searchInput.value = name; designerInput.value = id;
console.log('Updated search input value:', searchInput.value); console.log('Updated designer input value:', designerInput.value);
} }
// Clear results // Update search input
if (resultsDiv) { if (searchInput) {
resultsDiv.innerHTML = ''; searchInput.value = name;
console.log('Cleared results div'); console.log('Updated search input value:', searchInput.value);
} }
}
// Close search results when clicking outside // Clear results
document.addEventListener('click', function(e) { this.clearResults();
const searchResults = document.querySelectorAll('[id^="designer-search-results-"]'); },
searchResults.forEach(function(resultsDiv) {
const searchInput = document.querySelector(`#designer-search-${resultsDiv.id.split('-').pop()}`); clearResults() {
if (!resultsDiv.contains(e.target) && e.target !== searchInput) { const resultsDiv = document.querySelector(`#designer-search-results-${this.submissionId}`);
resultsDiv.innerHTML = ''; if (resultsDiv) {
resultsDiv.innerHTML = '';
console.log('Cleared results div');
}
} }
}); }));
}); });
</script> </script>

81
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 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}`);
// Debug logging // Find elements using AlpineJS approach
console.log('Found elements:', { const modelInput = document.querySelector(`#ride-model-input-${this.submissionId}`);
modelInput: modelInput?.id, const searchInput = document.querySelector(`#ride-model-search-${this.submissionId}`);
searchInput: searchInput?.id, const resultsDiv = document.querySelector(`#ride-model-search-results-${this.submissionId}`);
resultsDiv: resultsDiv?.id
});
// Update hidden input // Debug logging
if (modelInput) { console.log('Found elements:', {
modelInput.value = id; modelInput: modelInput?.id,
console.log('Updated ride model input value:', modelInput.value); searchInput: searchInput?.id,
} resultsDiv: resultsDiv?.id
});
// Update search input // Update hidden input
if (searchInput) { if (modelInput) {
searchInput.value = name; modelInput.value = id;
console.log('Updated search input value:', searchInput.value); console.log('Updated ride model input value:', modelInput.value);
} }
// Clear results // Update search input
if (resultsDiv) { if (searchInput) {
resultsDiv.innerHTML = ''; searchInput.value = name;
console.log('Cleared results div'); console.log('Updated search input value:', searchInput.value);
} }
}
// Close search results when clicking outside // Clear results
document.addEventListener('click', function(e) { this.clearResults();
const searchResults = document.querySelectorAll('[id^="ride-model-search-results-"]'); },
searchResults.forEach(function(resultsDiv) {
const searchInput = document.querySelector(`#ride-model-search-${resultsDiv.id.split('-').pop()}`); clearResults() {
if (!resultsDiv.contains(e.target) && e.target !== searchInput) { const resultsDiv = document.querySelector(`#ride-model-search-results-${this.submissionId}`);
resultsDiv.innerHTML = ''; if (resultsDiv) {
resultsDiv.innerHTML = '';
console.log('Cleared results div');
}
} }
}); }));
}); });
</script> </script>