mirror of
https://github.com/eitchtee/WYGIWYH.git
synced 2026-04-11 03:27:11 +02:00
feat(monthly): turn filter, order and search into a single bar
This commit is contained in:
Herculino Trotta
@@ -44,12 +44,12 @@
|
||||
</div>
|
||||
</div>
|
||||
{# Action buttons#}
|
||||
{# <div class="col-12 col-xl-8">#}
|
||||
{# <c-ui.quick-transactions-buttons#}
|
||||
{# :year="year"#}
|
||||
{# :month="month"#}
|
||||
{# ></c-ui.quick-transactions-buttons>#}
|
||||
{# </div>#}
|
||||
{# <div class="col-12 col-xl-8">#}
|
||||
{# <c-ui.quick-transactions-buttons#}
|
||||
{# :year="year"#}
|
||||
{# :month="month"#}
|
||||
{# ></c-ui.quick-transactions-buttons>#}
|
||||
{# </div>#}
|
||||
</div>
|
||||
{# Monthly summary#}
|
||||
<div class="row gx-xl-4 gy-3">
|
||||
@@ -133,59 +133,101 @@
|
||||
|
||||
</div>
|
||||
<div class="col-12 col-xl-8 order-2 order-xl-1">
|
||||
<div class="row mb-1">
|
||||
<div class="col-sm-6 col-12">
|
||||
{# Filter transactions button #}
|
||||
<button type="button" class="btn btn-sm btn-outline-primary dropdown-toggle" type="button"
|
||||
data-bs-toggle="collapse" data-bs-target="#collapse-filter" aria-expanded="false"
|
||||
aria-controls="collapse-filter">
|
||||
<i class="fa-solid fa-filter fa-fw me-2"></i>{% translate 'Filter transactions' %}
|
||||
|
||||
<div class="my-3">
|
||||
{# Hidden select to hold the order value and preserve the original update trigger #}
|
||||
<select name="order" id="order" class="d-none" _="on change trigger updated on window">
|
||||
<option value="default" {% if order == 'default' %}selected{% endif %}>{% translate 'Default' %}</option>
|
||||
<option value="older" {% if order == 'older' %}selected{% endif %}>{% translate 'Oldest first' %}</option>
|
||||
<option value="newer" {% if order == 'newer' %}selected{% endif %}>{% translate 'Newest first' %}</option>
|
||||
</select>
|
||||
|
||||
{# Main control bar with filter, search, and ordering #}
|
||||
<div class="input-group">
|
||||
|
||||
<button class="btn btn-secondary position-relative" type="button"
|
||||
data-bs-toggle="collapse" data-bs-target="#collapse-filter"
|
||||
aria-expanded="false" aria-controls="collapse-filter" id="filter-button" hx-preserve
|
||||
title="{% translate 'Filter transactions' %}">
|
||||
<i class="fa-solid fa-filter fa-fw"></i>
|
||||
</button>
|
||||
</div>
|
||||
{# Ordering button#}
|
||||
<div class="col-sm-6 col-12 tw:content-center my-3 my-sm-0">
|
||||
<div class="text-sm-end" _="on change trigger updated on window">
|
||||
<label for="order">{% translate "Order by" %}</label>
|
||||
<select
|
||||
class="tw:border-0 tw:focus-visible:outline-0 w-full pe-2 tw:leading-normal text-bg-tertiary tw:font-medium rounded bg-body text-body"
|
||||
name="order" id="order">
|
||||
<option value="default"
|
||||
{% if order == 'default' %}selected{% endif %}>{% translate 'Default' %}</option>
|
||||
<option value="older"
|
||||
{% if order == 'older' %}selected{% endif %}>{% translate 'Oldest first' %}</option>
|
||||
<option value="newer"
|
||||
{% if order == 'newer' %}selected{% endif %}>{% translate 'Newest first' %}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{# Filter transactions form#}
|
||||
<div class="collapse" id="collapse-filter" hx-preserve>
|
||||
<div class="card card-body">
|
||||
<form _="on change or submit or search trigger updated on window end
|
||||
install init_tom_select
|
||||
install init_datepicker"
|
||||
id="filter">
|
||||
{% crispy filter.form %}
|
||||
</form>
|
||||
<button class="btn btn-outline-danger btn-sm"
|
||||
_="on click call #filter.reset() then trigger change on #filter">{% translate 'Clear' %}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="search" class="my-3">
|
||||
<label class="w-100">
|
||||
<input type="search" class="form-control" placeholder="{% translate 'Search' %}" hx-preserve
|
||||
|
||||
{# 2. Search box #}
|
||||
<label for="quick-search">
|
||||
</label>
|
||||
<input type="search"
|
||||
class="form-control"
|
||||
placeholder="{% translate 'Search' %}"
|
||||
hx-preserve
|
||||
id="quick-search"
|
||||
_="on input or search or htmx:afterSwap from window
|
||||
if my value is empty
|
||||
trigger toggle on <.transactions-divider-collapse/>
|
||||
else
|
||||
trigger show on <.transactions-divider-collapse/>
|
||||
end
|
||||
show <.transactions-divider-title/> when my value is empty
|
||||
show <.transaction/> in <#transactions-list/>
|
||||
when its textContent.toLowerCase() contains my value.toLowerCase()">
|
||||
</label>
|
||||
if my value is empty
|
||||
trigger toggle on <.transactions-divider-collapse/>
|
||||
else
|
||||
trigger show on <.transactions-divider-collapse/>
|
||||
end
|
||||
show <.transactions-divider-title/> when my value is empty
|
||||
show <.transaction/> in <#transactions-list/>
|
||||
when its textContent.toLowerCase() contains my value.toLowerCase()">
|
||||
|
||||
{# 3. Order by icon dropdown #}
|
||||
<button class="btn btn-secondary dropdown-toggle dropdown-toggle-no-icon" type="button"
|
||||
data-bs-toggle="dropdown" aria-expanded="false"
|
||||
title="{% translate 'Order by' %}">
|
||||
<i class="fa-solid fa-sort fa-fw"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li>
|
||||
<button class="dropdown-item {% if order == 'default' %}active{% endif %}" type="button"
|
||||
_="on click remove .active from .dropdown-item in the closest <ul/>
|
||||
then add .active to me
|
||||
then set the value of #order to 'default'
|
||||
then trigger change on #order">
|
||||
{% translate 'Default' %}
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="dropdown-item {% if order == 'older' %}active{% endif %}" type="button"
|
||||
_="on click remove .active from .dropdown-item in the closest <ul/>
|
||||
then add .active to me
|
||||
then set the value of #order to 'older'
|
||||
then trigger change on #order">
|
||||
{% translate 'Oldest first' %}
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="dropdown-item {% if order == 'newer' %}active{% endif %}" type="button"
|
||||
_="on click remove .active from .dropdown-item in the closest <ul/>
|
||||
then add .active to me
|
||||
then set the value of #order to 'newer'
|
||||
then trigger change on #order">
|
||||
{% translate 'Newest first' %}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{# Filter transactions form #}
|
||||
<div class="collapse" id="collapse-filter" hx-preserve>
|
||||
<div class="card card-body">
|
||||
<div class="text-end">
|
||||
<button class="btn btn-outline-danger btn-sm tw:w-fit"
|
||||
_="on click call #filter.reset() then trigger change on #filter">{% translate 'Clear' %}</button>
|
||||
</div>
|
||||
|
||||
<form _="on change or submit or search trigger updated on window
|
||||
install init_tom_select
|
||||
install init_datepicker"
|
||||
id="filter" class="mt-3">
|
||||
{% crispy filter.form %}
|
||||
</form>
|
||||
|
||||
<div class="text-end">
|
||||
<button class="btn btn-outline-danger btn-sm tw:w-fit"
|
||||
_="on click call #filter.reset() then trigger change on #filter">{% translate 'Clear' %}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{# Transactions list#}
|
||||
<div id="transactions"
|
||||
|
||||
@@ -49,3 +49,7 @@ $theme-colors: map.merge(
|
||||
.offcanvas-size-sm {
|
||||
--#{$prefix}offcanvas-width: min(95vw, 250px) !important;
|
||||
}
|
||||
|
||||
.dropdown-toggle.dropdown-toggle-no-icon::after {
|
||||
display:none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user