From 9d6f6dab2c6b6c99444687f576a322e0f5b9681a Mon Sep 17 00:00:00 2001 From: pacnpal <183241239+pacnpal@users.noreply.github.com> Date: Thu, 13 Feb 2025 12:19:23 -0500 Subject: [PATCH] Refactor park listing templates: implement grid and list view modes, enhance search results rendering, and improve error handling in search functionality --- memory-bank/activeContext.md | 169 +++--------------- parks/templates/parks/park_list.html | 18 +- parks/templates/parks/partials/park_card.html | 58 ++++++ .../parks/partials/park_list_item.html | 62 +------ parks/views.py | 32 ++-- 5 files changed, 112 insertions(+), 227 deletions(-) create mode 100644 parks/templates/parks/partials/park_card.html diff --git a/memory-bank/activeContext.md b/memory-bank/activeContext.md index 13817ff7..8c26f73a 100644 --- a/memory-bank/activeContext.md +++ b/memory-bank/activeContext.md @@ -1,153 +1,28 @@ -# Active Context +# Active Context - Park View Modularization -## Current Project State +**Objective:** Refactor parks view to use reusable card component and implement grid/list view toggle -### Active Components -- Django backend with core apps - - accounts - - analytics - - companies - - core - - designers - - email_service - - history_tracking - - location - - media - - moderation - - parks - - reviews - - rides +**Current Implementation Analysis:** +- Park cards rendered via `park_list_item.html` partial +- Existing layout uses flex-based list structure +- Search functionality uses HTMX for dynamic updates -### Implementation Status -1. Backend Framework - - ✅ Django setup - - ✅ Database models - - ✅ Authentication system - - ✅ Admin interface +**Planned Changes:** +1. **Create `park_card.html` Partial** + - Extract card markup from `park_list_item.html` + - Add responsive grid/list view classes + - Include view mode toggle state -2. Frontend Integration - - ✅ HTMX integration - - ✅ AlpineJS setup - - ✅ Tailwind CSS configuration +2. **View Toggle Implementation** + - Add grid/list toggle UI with HTMX + - Store view preference in cookie/localStorage + - Update CSS for grid (grid-cols) vs list (flex) layouts -3. Core Features - - ✅ User authentication - - ✅ Park management - - ✅ Ride tracking - - ✅ Review system - - ✅ Location services - - ✅ Media handling +3. **Backend Updates** + - Add view_mode parameter to park list view + - Modify context processor to handle layout preference -## Current Focus Areas - -### Active Development -1. Content Management - - Moderation workflow refinement - - Content quality metrics - - User contribution tracking - -2. User Experience - - Frontend performance optimization - - UI/UX improvements - - Responsive design enhancements - -3. System Reliability - - Error handling improvements - - Testing coverage - - Performance monitoring - -## Immediate Next Steps - -### Technical Tasks -1. Testing - - [ ] Increase test coverage - - [ ] Implement integration tests - - [ ] Add performance tests - -2. Documentation - - [ ] Complete API documentation - - [ ] Update setup guides - - [ ] Document common workflows - -3. Performance - - [ ] Optimize database queries - - [ ] Implement caching strategy - - [ ] Improve asset loading - -### Feature Development -1. Content Quality - - [ ] Enhanced moderation tools - - [ ] Automated content checks - - [ ] Media optimization - -2. User Features - - [ ] Profile enhancements - - [ ] Contribution tracking - - [ ] Notification system - -## Known Issues - -### Backend -1. Performance - - Query optimization needed for large datasets - - Caching implementation incomplete - -2. Technical Debt - - Some views need refactoring - - Test coverage gaps - - Documentation updates needed - -### Frontend -1. UI/UX - - Mobile responsiveness improvements - - Loading state refinements - - Error feedback enhancements - -2. Technical - - JavaScript optimization needed - - Asset loading optimization - - Form validation improvements - -## Recent Changes - -### Last Update: 2025-02-12 -- Integrated parks app with site-wide search system - * Added comprehensive filter configuration - * Implemented error handling - * Created both full and quick search interfaces - * See `features/search/park-search.md` for details - -### Previous Update: 2025-02-06 -1. Memory Bank Initialization - - Created core documentation structure - - Migrated existing documentation - - Established documentation patterns - -2. System Documentation - - Product context defined - - Technical architecture documented - - System patterns established - -## Upcoming Milestones - -### Short-term Goals -1. Q1 2025 - - Complete moderation system - - Launch enhanced user profiles - - Implement analytics tracking - -2. Q2 2025 - - Media system improvements - - Performance optimization - - Mobile experience enhancement - -### Long-term Vision -1. Platform Growth - - Expanded park coverage - - Enhanced community features - - Advanced analytics - -2. Technical Evolution - - Architecture scalability - - Feature extensibility - - Performance optimization \ No newline at end of file +**Next Steps:** +- Implement card partial with responsive classes +- Create view toggle component +- Update HTMX handlers to preserve view mode \ No newline at end of file diff --git a/parks/templates/parks/park_list.html b/parks/templates/parks/park_list.html index 05be74c4..ecf867f9 100644 --- a/parks/templates/parks/park_list.html +++ b/parks/templates/parks/park_list.html @@ -20,8 +20,16 @@ {% endblock %} {% block list_header %} +
+ + +
-

Parks

+

Parks

{% if user.is_authenticated %} Add Park @@ -122,10 +130,8 @@ Browse and filter amusement parks, theme parks, and water parks from around the
{% endblock %} -{% block results_section %} -
- {% for park in parks %} - {% include "parks/partials/park_list_item.html" with park=park %} - {% endfor %} +{% block results_list %} +
+ {% include "parks/partials/park_list_item.html" with parks=parks %}
{% endblock %} \ No newline at end of file diff --git a/parks/templates/parks/partials/park_card.html b/parks/templates/parks/partials/park_card.html new file mode 100644 index 00000000..96498cbd --- /dev/null +++ b/parks/templates/parks/partials/park_card.html @@ -0,0 +1,58 @@ +{% load static %} +{% load filter_utils %} + +
+ + +
+ {% if park.photos.exists %} + {{ park.name }} + {% else %} +
+ {{ park.name|first|upper }} +
+ {% endif %} +
+ +
+

+ {{ park.name }} +

+ +
+ {% with location=park.location.first %} + {% if location %} + {{ location.city }}{% if location.state %}, {{ location.state }}{% endif %}{% if location.country %}, {{ location.country }}{% endif %} + {% else %} + Location unknown + {% endif %} + {% endwith %} +
+ +
+ + {{ park.get_status_display }} + + + {% if park.opening_date %} + + Opened {{ park.opening_date|date:"Y" }} + + {% endif %} + + {% if park.ride_count %} + + {{ park.ride_count }} rides + + {% endif %} + + {% if park.coaster_count %} + + {{ park.coaster_count }} coasters + + {% endif %} +
+
+
diff --git a/parks/templates/parks/partials/park_list_item.html b/parks/templates/parks/partials/park_list_item.html index 5afe06ed..e19a9460 100644 --- a/parks/templates/parks/partials/park_list_item.html +++ b/parks/templates/parks/partials/park_list_item.html @@ -8,67 +8,9 @@
{% else %} -
+
{% for park in object_list|default:parks %} -
- {% if park.photos.exists %} - {{ park.name }} - {% else %} -
- {{ park.name|first|upper }} -
- {% endif %} - -
-

- - {{ park.name }} - -

- -
- {% with location=park.location.first %} - {% if location %} - {{ location.city }}{% if location.state %}, {{ location.state }}{% endif %}{% if location.country %}, {{ location.country }}{% endif %} - {% else %} - Location unknown - {% endif %} - {% endwith %} -
- -
- - {{ park.get_status_display }} - - - {% if park.opening_date %} - - Opened {{ park.opening_date|date:"Y" }} - - {% endif %} - - {% if park.ride_count %} - - {{ park.ride_count }} rides - - {% endif %} - - {% if park.coaster_count %} - - {{ park.coaster_count }} coasters - - {% endif %} -
-
-
+ {% include "parks/partials/park_card.html" with park=park view_mode=view_mode %} {% empty %}
No parks found matching your search. diff --git a/parks/views.py b/parks/views.py index 12f5a6ad..13db9ad6 100644 --- a/parks/views.py +++ b/parks/views.py @@ -55,7 +55,7 @@ def search_parks(request: HttpRequest) -> HttpResponse: try: search_query = request.GET.get('search', '').strip() if not search_query: - return HttpResponse('') # Return empty response for empty query + return HttpResponse('') # Keep empty string for clearing search results queryset = ( Park.objects.select_related('owner') @@ -74,19 +74,15 @@ def search_parks(request: HttpRequest) -> HttpResponse: parks = park_filter.qs[:8] # Limit to 8 suggestions - if not parks: - return HttpResponse( - '
No parks found matching your search.
' - ) - - response = render(request, "parks/partials/park_list_item.html", { - "object_list": parks # Use object_list to match template's for loop + response = render(request, "parks/park_list.html", { + "parks": parks }) response['HX-Trigger'] = 'searchComplete' return response except Exception as e: - response = render(request, "parks/partials/park_list_item.html", { + response = render(request, "parks/park_list.html", { + "parks": [], "error": f"Error performing search: {str(e)}" }) response['HX-Trigger'] = 'searchError' @@ -183,7 +179,13 @@ class ParkListView(HTMXFilterableMixin, ListView): context_object_name = "parks" filter_class = ParkFilter paginate_by = 20 - + + def get_template_names(self) -> list[str]: + """Override to use same template for HTMX and regular requests""" + if self.request.htmx: + return ["parks/partials/park_list_item.html"] + return [self.template_name] + def get_queryset(self) -> QuerySet[Park]: try: return ( @@ -209,14 +211,16 @@ class ParkListView(HTMXFilterableMixin, ListView): def get_context_data(self, **kwargs: Any) -> dict[str, Any]: try: - return super().get_context_data(**kwargs) + context = super().get_context_data(**kwargs) + context['results_template'] = "parks/partials/park_list_item.html" + return context except Exception as e: messages.error(self.request, f"Error applying filters: {str(e)}") - context = { + return { "filter": self.filterset, - "error": "Unable to apply filters. Please try adjusting your criteria." + "error": "Unable to apply filters. Please try adjusting your criteria.", + "results_template": "parks/partials/park_list_item.html" } - return context class ParkDetailView(