starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-04-25 18:19:02 +02:00
Code Issues 14 Packages Projects Releases 10 Wiki Activity

feat: keep natural date collapsible state

Browse Source
This commit is contained in:
Herculino Trotta
2024-10-30 23:53:25 -03:00
parent 0726350b45
commit 4bea55dc63
6 changed files with 30 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/templates/monthly_overview/fragments/list.html
View File

@@ -11,20 +11,28 @@
end
end">
{% for x in transactions_by_date %}
<div x-data="{ isOpen: $persist(true).as('{{ x.grouper|slugify }}-state').using(sessionStorage) }" id="#{{ x.grouper|slugify }}">
<div id="{{ x.grouper|slugify }}"
_="on htmx:afterSettle from #transactions if sessionStorage.getItem(my id) is null then sessionStorage.setItem(my id, 'true')">
<div class="mt-3 mb-1 w-100 tw-text-base border-bottom bg-body">
<a class="text-decoration-none d-inline-block w-100"
role="button"
data-bs-toggle="collapse"
data-bs-target="#{{ x.grouper|slugify }}-collapse"
id="#{{ x.grouper|slugify }}-collapsible"
:aria-expanded="isOpen"
@click="isOpen = !isOpen"
aria-controls="collapseExample">
data-bs-target="#c-{{ x.grouper|slugify }}-collapse"
id="c-{{ x.grouper|slugify }}-collapsible"
aria-expanded="false"
aria-controls="c-{{ x.grouper|slugify }}-collapse">
{{ x.grouper }}
</a>
</div>
<div class="collapse" id="{{ x.grouper|slugify }}-collapse" :class="{ 'show': isOpen }">
<div class="collapse" id="c-{{ x.grouper|slugify }}-collapse"
_="on shown.bs.collapse sessionStorage.setItem(the closest parent @id, 'true')
on hidden.bs.collapse sessionStorage.setItem(the closest parent @id, 'false')
on htmx:afterSettle from #transactions
set state to sessionStorage.getItem(the closest parent @id)
if state is 'true' or state is null
add .show to me
set @aria-expanded of #c-{{ x.grouper|slugify }}-collapsible to true
end">
<div class="d-flex flex-column">
{% for transaction in x.list %}
<c-transaction.item

3
app/templates/monthly_overview/pages/overview.html
View File

@@ -131,8 +131,7 @@
<div id="transactions"
class="show-loading"
hx-get="{% url 'monthly_transactions_list' month=month year=year %}"
hx-trigger="load, updated from:window" hx-include="#filter, #order" hx-ext="alpine-morph" hx-swap="morph" hx-target="#transactions-list">
<div id="transactions-list"></div>
hx-trigger="load, updated from:window" hx-include="#filter, #order">
</div>
</div>
</div>