Skip to content

Commit

Permalink
fixed respect user layout preference in media list view and HTMX targets
Browse files Browse the repository at this point in the history
  • Loading branch information
@FuzzyGrim
FuzzyGrim committed Feb 11, 2025
1 parent e0963fa commit 404fb09
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 24 deletions.
12 changes: 7 additions & 5 deletions src/app/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,11 +66,12 @@ def media_list(request, media_type):
if request.GET:
layout_request = request.GET.get("layout", layout_user)
filter_form = FilterForm(request.GET, layout=layout_request)
if filter_form.is_valid() and layout_request != layout_user:
request.user.set_layout(media_type, layout_request)
else:
logger.error(filter_form.errors.as_json())
else:
if layout_request != layout_user:
if filter_form.is_valid():
request.user.set_layout(media_type, layout_request)
else:
logger.error(filter_form.errors.as_json())
else: # first time access
filter_form = FilterForm(layout=layout_user)

status_filter = request.GET.get("status", "all")
Expand All @@ -94,6 +95,7 @@ def media_list(request, media_type):
"media_type": media_type,
"media_list": media_page,
"current_page": page,
"user_layout": layout_user,
}

if request.headers.get("HX-Request"):
Expand Down
38 changes: 19 additions & 19 deletions src/templates/app/components/filter_bar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<h3 class="text-light">{{ media_type|media_type_readable_plural }}</h3>

<div class="filter-bar d-flex gap-2 align-items-center justify-content-between mt-3 mb-4"
x-data="{ status: '{{ request.GET.status|default:'all' }}', sort: '{{ request.GET.sort|default:'score' }}', layout: '{{ request.GET.layout|default:'grid' }}' }">
x-data="{ status: '{{ request.GET.status|default:'all' }}', sort: '{{ request.GET.sort|default:'score' }}', layout: '{{ request.GET.layout|default:user_layout }}' }">
<!-- Hidden inputs for state -->
<input type="hidden" name="status" x-model="status">
<input type="hidden" name="sort" x-model="sort">
Expand All @@ -20,8 +20,8 @@ <h3 class="text-light">{{ media_type|media_type_readable_plural }}</h3>
name="search"
value="{{ request.GET.search }}"
hx-get="{% url 'medialist' media_type %}"
hx-trigger="keyup changed delay:500ms"
hx-target="{% if request.GET.layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-trigger="keyup changed delay:300ms"
hx-target="{% if request.GET.layout|default:user_layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-include="[name='status'],[name='sort'],[name='layout']">
</div>
</div>
Expand All @@ -35,13 +35,13 @@ <h3 class="text-light">{{ media_type|media_type_readable_plural }}</h3>
<i class="bi bi-funnel-fill"></i>
Status
</button>
<ul class="dropdown-menu dropdown-menu-dark">
<ul class="dropdown-menu">
<li>
<a class="dropdown-item"
:class="{ 'active': status === 'all' }"
@click="status = 'all'"
hx-get="{% url 'medialist' media_type %}"
hx-target="{% if request.GET.layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-target="{% if request.GET.layout|default:user_layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-include="[name='search'],[name='sort'],[name='layout']"
hx-vals='{"status": "all"}'>All</a>
</li>
Expand All @@ -53,7 +53,7 @@ <h3 class="text-light">{{ media_type|media_type_readable_plural }}</h3>
:class="{ 'active': status === 'completed' }"
@click="status = 'completed'"
hx-get="{% url 'medialist' media_type %}"
hx-target="{% if request.GET.layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-target="{% if request.GET.layout|default:user_layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-include="[name='search'],[name='sort'],[name='layout']"
hx-vals='{"status": "completed"}'>Completed</a>
</li>
Expand All @@ -62,7 +62,7 @@ <h3 class="text-light">{{ media_type|media_type_readable_plural }}</h3>
:class="{ 'active': status === 'in progress' }"
@click="status = 'in progress'"
hx-get="{% url 'medialist' media_type %}"
hx-target="{% if request.GET.layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-target="{% if request.GET.layout|default:user_layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-include="[name='search'],[name='sort'],[name='layout']"
hx-vals='{"status": "in progress"}'>In Progress</a>
</li>
Expand All @@ -71,7 +71,7 @@ <h3 class="text-light">{{ media_type|media_type_readable_plural }}</h3>
:class="{ 'active': status === 'repeating' }"
@click="status = 'repeating'"
hx-get="{% url 'medialist' media_type %}"
hx-target="{% if request.GET.layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-target="{% if request.GET.layout|default:user_layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-include="[name='search'],[name='sort'],[name='layout']"
hx-vals='{"status": "repeating"}'>Repeating</a>
</li>
Expand All @@ -80,7 +80,7 @@ <h3 class="text-light">{{ media_type|media_type_readable_plural }}</h3>
:class="{ 'active': status === 'planning' }"
@click="status = 'planning'"
hx-get="{% url 'medialist' media_type %}"
hx-target="{% if request.GET.layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-target="{% if request.GET.layout|default:user_layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-include="[name='search'],[name='sort'],[name='layout']"
hx-vals='{"status": "planning"}'>Planning</a>
</li>
Expand All @@ -89,7 +89,7 @@ <h3 class="text-light">{{ media_type|media_type_readable_plural }}</h3>
:class="{ 'active': status === 'paused' }"
@click="status = 'paused'"
hx-get="{% url 'medialist' media_type %}"
hx-target="{% if request.GET.layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-target="{% if request.GET.layout|default:user_layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-include="[name='search'],[name='sort'],[name='layout']"
hx-vals='{"status": "paused"}'>Paused</a>
</li>
Expand All @@ -98,7 +98,7 @@ <h3 class="text-light">{{ media_type|media_type_readable_plural }}</h3>
:class="{ 'active': status === 'dropped' }"
@click="status = 'dropped'"
hx-get="{% url 'medialist' media_type %}"
hx-target="{% if request.GET.layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-target="{% if request.GET.layout|default:user_layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-include="[name='search'],[name='sort'],[name='layout']"
hx-vals='{"status": "dropped"}'>Dropped</a>
</li>
Expand All @@ -113,13 +113,13 @@ <h3 class="text-light">{{ media_type|media_type_readable_plural }}</h3>
<i class="bi bi-sort-down"></i>
Sort
</button>
<ul class="dropdown-menu dropdown-menu-dark">
<ul class="dropdown-menu">
<li>
<a class="dropdown-item"
:class="{ 'active': sort === 'score' }"
@click="sort = 'score'"
hx-get="{% url 'medialist' media_type %}"
hx-target="{% if request.GET.layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-target="{% if request.GET.layout|default:user_layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-include="[name='search'],[name='status'],[name='layout']"
hx-vals='{"sort": "score"}'>Score</a>
</li>
Expand All @@ -128,7 +128,7 @@ <h3 class="text-light">{{ media_type|media_type_readable_plural }}</h3>
:class="{ 'active': sort === 'title' }"
@click="sort = 'title'"
hx-get="{% url 'medialist' media_type %}"
hx-target="{% if request.GET.layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-target="{% if request.GET.layout|default:user_layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-include="[name='search'],[name='status'],[name='layout']"
hx-vals='{"sort": "title"}'>Title</a>
</li>
Expand All @@ -137,7 +137,7 @@ <h3 class="text-light">{{ media_type|media_type_readable_plural }}</h3>
:class="{ 'active': sort === 'progress' }"
@click="sort = 'progress'"
hx-get="{% url 'medialist' media_type %}"
hx-target="{% if request.GET.layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-target="{% if request.GET.layout|default:user_layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-include="[name='search'],[name='status'],[name='layout']"
hx-vals='{"sort": "progress"}'>Progress</a>
</li>
Expand All @@ -146,7 +146,7 @@ <h3 class="text-light">{{ media_type|media_type_readable_plural }}</h3>
:class="{ 'active': sort === 'repeats' }"
@click="sort = 'repeats'"
hx-get="{% url 'medialist' media_type %}"
hx-target="{% if request.GET.layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-target="{% if request.GET.layout|default:user_layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-include="[name='search'],[name='status'],[name='layout']"
hx-vals='{"sort": "repeats"}'>Repeats</a>
</li>
Expand All @@ -155,7 +155,7 @@ <h3 class="text-light">{{ media_type|media_type_readable_plural }}</h3>
:class="{ 'active': sort === 'start_date' }"
@click="sort = 'start_date'"
hx-get="{% url 'medialist' media_type %}"
hx-target="{% if request.GET.layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-target="{% if request.GET.layout|default:user_layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-include="[name='search'],[name='status'],[name='layout']"
hx-vals='{"sort": "start_date"}'>Start Date</a>
</li>
Expand All @@ -164,7 +164,7 @@ <h3 class="text-light">{{ media_type|media_type_readable_plural }}</h3>
:class="{ 'active': sort === 'end_date' }"
@click="sort = 'end_date'"
hx-get="{% url 'medialist' media_type %}"
hx-target="{% if request.GET.layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-target="{% if request.GET.layout|default:user_layout == 'list' %}tbody{% else %}.grid{% endif %}"
hx-include="[name='search'],[name='status'],[name='layout']"
hx-vals='{"sort": "end_date"}'>End Date</a>
</li>
Expand All @@ -174,7 +174,7 @@ <h3 class="text-light">{{ media_type|media_type_readable_plural }}</h3>
<div class="btn-group" role="group">
<a href="{% url 'medialist' media_type %}?{% if request.GET.search %}search={{ request.GET.search }}&{% endif %}{% if request.GET.status %}status={{ request.GET.status }}&{% endif %}{% if request.GET.sort %}sort={{ request.GET.sort }}&{% endif %}layout=grid"
class="btn border-secondary"
:class="{ 'btn-primary': layout !== 'list' }"
:class="{ 'btn-primary': layout === 'grid' }"
@click="layout = 'grid'">
<i class="bi bi-grid-3x3-gap-fill"></i>
</a>
Expand Down

0 comments on commit 404fb09

Please sign in to comment.