From 60342277964802a68710fe659b559c99ffc69cf1 Mon Sep 17 00:00:00 2001 From: pacnpal <183241239+pacnpal@users.noreply.github.com> Date: Mon, 10 Feb 2025 23:35:58 -0500 Subject: [PATCH] Implement RideUpdateView and refactor search suggestion handling for improved modularity and error management --- rides/views.py | 13 ++ templates/rides/partials/search_script.html | 142 +++++++++++--------- 2 files changed, 91 insertions(+), 64 deletions(-) diff --git a/rides/views.py b/rides/views.py index 68f2dbdb..a559b1fe 100644 --- a/rides/views.py +++ b/rides/views.py @@ -1,4 +1,17 @@ # Keep all imports and previous classes up to RideCreateView +from django.contrib.auth.mixins import LoginRequiredMixin +from django.contrib.contenttypes.models import ContentType +from django.shortcuts import get_object_or_404 +from django.urls import reverse +from django.views.generic import UpdateView +from companies.models import Manufacturer +from designers.models import Designer +from moderation.mixins import EditSubmissionMixin +from apps.parks.mixins.base import ParkContextRequired # type: ignore +from moderation.models import EditSubmission +from parks.models import Park +from rides.forms import RideForm # type: ignore +from .models import Ride, RideModel class RideUpdateView(LoginRequiredMixin, ParkContextRequired, EditSubmissionMixin, UpdateView): """View for updating an existing ride""" diff --git a/templates/rides/partials/search_script.html b/templates/rides/partials/search_script.html index 84d6bb80..315953ba 100644 --- a/templates/rides/partials/search_script.html +++ b/templates/rides/partials/search_script.html @@ -116,53 +116,10 @@ document.addEventListener('alpine:init', () => { const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout try { - const parkSlug = document.querySelector('input[name="park_slug"]')?.value; - const url = `/rides/search-suggestions/?q=${encodeURIComponent(this.searchQuery)}${parkSlug ? '&park_slug=' + parkSlug : ''}`; - - const response = await fetch(url, { - signal: controller.signal, - headers: { - 'X-Request-ID': requestId.toString() - } - }); - - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - - const html = await response.text(); - - // Only update if this is still the most recent request - if (requestId === this.lastRequestId && this.searchQuery === document.getElementById('search').value) { - const suggestionsEl = document.getElementById('search-suggestions'); - suggestionsEl.innerHTML = html; - this.showSuggestions = html.trim() ? true : false; - - // Set proper ARIA attributes - const searchInput = document.getElementById('search'); - searchInput.setAttribute('aria-expanded', this.showSuggestions.toString()); - searchInput.setAttribute('aria-controls', 'search-suggestions'); - if (this.showSuggestions) { - suggestionsEl.setAttribute('role', 'listbox'); - suggestionsEl.querySelectorAll('button').forEach(btn => { - btn.setAttribute('role', 'option'); - }); - } - } + const response = await this.fetchSuggestions(controller, requestId); + await this.handleSuggestionResponse(response, requestId); } catch (error) { - if (error.name === 'AbortError') { - console.warn('Search suggestion request timed out or cancelled'); - } else { - console.error('Error fetching suggestions:', error); - if (requestId === this.lastRequestId) { - const suggestionsEl = document.getElementById('search-suggestions'); - suggestionsEl.innerHTML = ` - `; - this.showSuggestions = true; - } - } + this.handleSuggestionError(error, requestId); } finally { clearTimeout(timeoutId); if (this.currentRequest === controller) { @@ -171,6 +128,64 @@ document.addEventListener('alpine:init', () => { } }, + async fetchSuggestions(controller, requestId) { + const parkSlug = document.querySelector('input[name="park_slug"]')?.value; + const url = `/rides/search-suggestions/?q=${encodeURIComponent(this.searchQuery)}${parkSlug ? '&park_slug=' + parkSlug : ''}`; + + const response = await fetch(url, { + signal: controller.signal, + headers: { + 'X-Request-ID': requestId.toString() + } + }); + + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + return response; + }, + + async handleSuggestionResponse(response, requestId) { + const html = await response.text(); + + if (requestId === this.lastRequestId && this.searchQuery === document.getElementById('search').value) { + const suggestionsEl = document.getElementById('search-suggestions'); + suggestionsEl.innerHTML = html; + this.showSuggestions = Boolean(html.trim()); + + this.updateAriaAttributes(suggestionsEl); + } + }, + + updateAriaAttributes(suggestionsEl) { + const searchInput = document.getElementById('search'); + searchInput.setAttribute('aria-expanded', this.showSuggestions.toString()); + searchInput.setAttribute('aria-controls', 'search-suggestions'); + if (this.showSuggestions) { + suggestionsEl.setAttribute('role', 'listbox'); + suggestionsEl.querySelectorAll('button').forEach(btn => { + btn.setAttribute('role', 'option'); + }); + } + }, + + handleSuggestionError(error, requestId) { + if (error.name === 'AbortError') { + console.warn('Search suggestion request timed out or cancelled'); + return; + } + + console.error('Error fetching suggestions:', error); + if (requestId === this.lastRequestId) { + const suggestionsEl = document.getElementById('search-suggestions'); + suggestionsEl.innerHTML = ` + `; + this.showSuggestions = true; + } + }, + // Handle input changes with debounce async handleInput() { clearTimeout(this.suggestionTimeout); @@ -277,24 +292,6 @@ document.addEventListener('alpine:init', () => { } })); }); - - - -