pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-23 06:11:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

Implement search functionality improvements: optimize database queries, enhance service layer, and update frontend interactions

Browse Source
This commit is contained in:
pacnpal
2025-02-21 10:31:49 -05:00
parent 8c85b2afd4
commit 645a74a4c3
4 changed files with 262 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
search/templates/search/components/filter_form.html
View File

@@ -1,16 +1,21 @@
{% load static %}
{% load filter_utils %}
<div class="filter-container bg-white rounded-lg shadow p-4" x-data="{ open: false }">
<div class="filter-container" x-data="{ open: false }">
{# Mobile Filter Toggle #}
<div class="lg:hidden">
<button @click="open = !open" type="button" class="w-full flex items-center justify-between p-2 text-gray-400 hover:text-gray-500">
<span class="font-medium text-gray-900">Filters</span>
<span class="ml-6 flex items-center">
<svg class="w-5 h-5" x-show="!open" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 6L16 12H4L10 6Z"/>
</svg>
<svg class="w-5 h-5" x-show="open" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 14L4 8H16L10 14Z"/>
<div class="lg:hidden bg-white rounded-lg shadow p-4 mb-4">
<button @click="open = !open" type="button" class="w-full flex items-center justify-between p-2">
<span class="font-medium text-gray-900">
<span class="mr-2">
<svg class="w-5 h-5 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
</svg>
</span>
Filter Options
</span>
<span class="text-gray-500">
<svg class="w-5 h-5 transition-transform duration-200" :class="{'rotate-180': open}" fill="currentColor" viewBox="0 0 20 20">
<path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"></path>
</svg>
</span>
</button>
@@ -18,20 +23,23 @@
{# Filter Form #}
<form hx-get="{{ request.path }}"
hx-trigger="change delay:500ms, submit"
hx-trigger="change delay:500ms"
hx-target="#results-container"
hx-push-url="true"
class="mt-4 lg:mt-0"
class="space-y-6"
x-show="open || $screen('lg')"
x-transition>
{# Active Filters Summary #}
{% if applied_filters %}
<div class="bg-blue-50 p-4 rounded-lg mb-4">
<div class="bg-blue-50 rounded-lg p-4 shadow-sm border border-blue-100">
<div class="flex justify-between items-center">
<h3 class="text-sm font-medium text-blue-800">Active Filters</h3>
<div>
<h3 class="text-sm font-medium text-blue-800">Active Filters</h3>
<p class="text-xs text-blue-600 mt-1">{{ applied_filters|length }} filter{{ applied_filters|length|pluralize }} applied</p>
</div>
<a href="{{ request.path }}"
class="text-sm text-blue-600 hover:text-blue-500"
class="text-sm font-medium text-blue-600 hover:text-blue-500 hover:underline"
hx-get="{{ request.path }}"
hx-target="#results-container"
hx-push-url="true">
@@ -42,21 +50,35 @@
{% endif %}
{# Filter Groups #}
<div class="space-y-4">
<div class="bg-white rounded-lg shadow divide-y divide-gray-200">
{% for fieldset in filter.form|groupby_filters %}
<div class="border-b border-gray-200 pb-4">
<h3 class="text-sm font-medium text-gray-900 mb-3">{{ fieldset.name }}</h3>
<div class="space-y-3">
<div class="p-6" x-data="{ expanded: true }">
{# Group Header #}
<button type="button"
@click="expanded = !expanded"
class="w-full flex justify-between items-center text-left">
<h3 class="text-lg font-medium text-gray-900">{{ fieldset.name }}</h3>
<svg class="w-5 h-5 text-gray-500 transform transition-transform duration-200"
:class="{'rotate-180': !expanded}"
fill="currentColor"
viewBox="0 0 20 20">
<path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/>
</svg>
</button>
{# Group Content #}
<div class="mt-4 space-y-4" x-show="expanded" x-collapse>
{% for field in fieldset.fields %}
<div>
<label for="{{ field.id_for_label }}" class="text-sm text-gray-600">
<div class="filter-field">
<label for="{{ field.id_for_label }}"
class="block text-sm font-medium text-gray-700 mb-1">
{{ field.label }}
</label>
<div class="mt-1">
{{ field }}
{{ field|add_field_classes }}
</div>
{% if field.help_text %}
<p class="mt-1 text-xs text-gray-500">{{ field.help_text }}</p>
<p class="mt-1 text-sm text-gray-500">{{ field.help_text }}</p>
{% endif %}
</div>
{% endfor %}
@@ -65,17 +87,25 @@
{% endfor %}
</div>
{# Submit Button - Only visible on mobile #}
<div class="mt-4 lg:hidden">
{# Mobile Apply Button #}
<div class="lg:hidden">
<button type="submit"
class="w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
class="w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-150 ease-in-out">
Apply Filters
</button>
</div>
</form>
</div>
{% block extra_scripts %}
{# Add Alpine.js for mobile menu toggle if not already included #}
{# Required Scripts #}
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
{% endblock %}
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('filterForm', () => ({
expanded: true,
toggle() {
this.expanded = !this.expanded
}
}))
})
</script>