tandem
/
numerus
2
0
Fork 0
Code Issues 39 Pull Requests Packages Projects 1 Releases 1 Wiki Activity

Toggle filters forms 

I tried this already when i started adding filters, but i tried to use
AlpineJS for that, and could not because it would reset the context each
time i submitted the filters, due to HTMx replacing the whole content.

I realized that the only thing i need is some “flag” to show and hide
the form with CSS.  I do not even need AlpineJS for that, but i used it
anyway because then i can use the x-cloak thing to hidde the toggle
button for users with JavaScript disabled.

Similarly, the body by default has that “flag” set in the markup, and is
removed when AlpineJS is initialized, thus if JavaScript is disabled the
filters form is shown nevertheless.
This commit is contained in:
jordi fita mas 2023-05-24 12:13:09 +02:00
parent 92edbdfc4d
commit 992bbf32a9
8 changed files with 88 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/static/numerus.css
View File

@ -909,13 +909,21 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r
transform: translateY(0); transform: translateY(0);
} }
/* Dashboard */ /* Filters */
.filters { .filters {
display: none;
}
.filters-visible .filters {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
} }
.filters-visible #filters-toggle {
background-color: var(--numerus--header--background-color);
}
/* Dashboard */
#dashboard-filters { #dashboard-filters {
display: flex; display: flex;
} }

2
web/static/numerus.js
View File

@ -712,6 +712,8 @@ htmx.on('closeModal', () => {
}); });
htmx.on(document, 'alpine:init', () => { htmx.on(document, 'alpine:init', () => {
document.body.classList.remove('show-filters');
Alpine.data('snackbar', () => ({ Alpine.data('snackbar', () => ({
show: false, toast: "", toasts: [], timeoutId: null, init() { show: false, toast: "", toasts: [], timeoutId: null, init() {
htmx.on('htmx:error', (error) => { htmx.on('htmx:error', (error) => {

2
web/template/app.gohtml
View File

@ -9,7 +9,7 @@
<script type="module" src="/static/numerus.js"></script> <script type="module" src="/static/numerus.js"></script>
<script defer src="/static/alpinejs@3.12.0.min.js"></script> <script defer src="/static/alpinejs@3.12.0.min.js"></script>
</head> </head>
<body> <body class="show-filters">
<header> <header>
<h1><img src="/static/numerus.svg" alt="Numerus" width="261" height="33"></h1> <h1><img src="/static/numerus.svg" alt="Numerus" width="261" height="33"></h1>
<details id="profile-menu" class="menu"> <details id="profile-menu" class="menu">

4
web/template/contacts/index.gohtml
View File

@ -10,6 +10,7 @@
<a>{{( pgettext "Contacts" "title" )}}</a> <a>{{( pgettext "Contacts" "title" )}}</a>
</p> </p>
<p> <p>
{{ template "filters-toggle" }}
<a class="primary button" <a class="primary button"
href="{{ companyURI "/contacts/new" }}">{{( pgettext "New contact" "action" )}}</a> href="{{ companyURI "/contacts/new" }}">{{( pgettext "New contact" "action" )}}</a>
</p> </p>
@ -18,11 +19,11 @@
{{ define "content" }} {{ define "content" }}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.ContactsIndexPage*/ -}} {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.ContactsIndexPage*/ -}}
<div aria-label="{{( pgettext "Filters" "title" )}}">
<form class="filters" method="GET" action="{{ companyURI "/contacts"}}" <form class="filters" method="GET" action="{{ companyURI "/contacts"}}"
data-hx-target="main" data-hx-target="main"
data-hx-boost="true" data-hx-boost="true"
data-hx-trigger="change,search,submit" data-hx-trigger="change,search,submit"
aria-labelledby="filters-toggle"
> >
{{ with .Filters }} {{ with .Filters }}
{{ template "input-field" .Name }} {{ template "input-field" .Name }}
@ -33,7 +34,6 @@
<button type="submit">{{( pgettext "Filter" "action" )}}</button> <button type="submit">{{( pgettext "Filter" "action" )}}</button>
</noscript> </noscript>
</form> </form>
</div>
<table> <table>
<thead> <thead>
<tr> <tr>

4
web/template/expenses/index.gohtml
View File

@ -11,6 +11,7 @@
<a>{{( pgettext "Expenses" "title" )}}</a> <a>{{( pgettext "Expenses" "title" )}}</a>
</p> </p>
<p> <p>
{{ template "filters-toggle" }}
<a class="primary button" <a class="primary button"
href="{{ companyURI "/expenses/new" }}">{{( pgettext "New expense" "action" )}}</a> href="{{ companyURI "/expenses/new" }}">{{( pgettext "New expense" "action" )}}</a>
</p> </p>
@ -19,9 +20,9 @@
{{ define "content" }} {{ define "content" }}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.expensesIndexPage*/ -}} {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.expensesIndexPage*/ -}}
<div aria-label="{{( pgettext "Filters" "title" )}}">
<form class="filters" method="GET" action="{{ companyURI "/expenses"}}" <form class="filters" method="GET" action="{{ companyURI "/expenses"}}"
data-hx-target="main" data-hx-boost="true" data-hx-trigger="change,search,submit" data-hx-target="main" data-hx-boost="true" data-hx-trigger="change,search,submit"
aria-labelledby="filters-toggle"
> >
{{ with .Filters }} {{ with .Filters }}
{{ template "select-field" .Customer }} {{ template "select-field" .Customer }}
@ -35,7 +36,6 @@
<button type="submit">{{( pgettext "Filter" "action" )}}</button> <button type="submit">{{( pgettext "Filter" "action" )}}</button>
</noscript> </noscript>
</form> </form>
</div>
<table> <table>
<thead> <thead>
<tr> <tr>

6
web/template/form.gohtml
View File

@ -159,3 +159,9 @@
{{ template "select-field" .Tax }} {{ template "select-field" .Tax }}
</fieldset> </fieldset>
{{- end }} {{- end }}
{{ define "filters-toggle" -}}
<button id="filters-toggle" x-cloak x-data="{}"
@click="document.body.classList.toggle('filters-visible')"
type="button">{{(pgettext "Filters" "action")}}</button>
{{- end }}

9
web/template/invoices/index.gohtml
View File

@ -13,6 +13,7 @@
<form id="batch-form" action="{{ companyURI "/invoices/batch" }}" method="post"> <form id="batch-form" action="{{ companyURI "/invoices/batch" }}" method="post">
{{ csrfToken }} {{ csrfToken }}
<p> <p>
{{ template "filters-toggle" }}
<button type="submit" <button type="submit"
name="action" value="download" name="action" value="download"
>{{( pgettext "Download invoices" "action" )}}</button> >{{( pgettext "Download invoices" "action" )}}</button>
@ -25,9 +26,10 @@
{{ define "content" }} {{ define "content" }}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.InvoicesIndexPage*/ -}} {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.InvoicesIndexPage*/ -}}
<div aria-label="{{( pgettext "Filters" "title" )}}"> <form class="filters" method="GET" action="{{ companyURI "/invoices"}}"
<form class="filters" method="GET" action="{{ companyURI "/invoices"}}" data-hx-target="main" data-hx-boost="true" data-hx-target="main" data-hx-boost="true" data-hx-trigger="change,search,submit"
data-hx-trigger="change,search,submit"> aria-labelledby="filters-toggle"
>
{{ with .Filters }} {{ with .Filters }}
{{ template "select-field" .Customer }} {{ template "select-field" .Customer }}
{{ template "select-field" .InvoiceStatus }} {{ template "select-field" .InvoiceStatus }}
@ -41,7 +43,6 @@
<button type="submit">{{( pgettext "Filter" "action" )}}</button> <button type="submit">{{( pgettext "Filter" "action" )}}</button>
</noscript> </noscript>
</form> </form>
</div>
<table id="invoice-list"> <table id="invoice-list">
<thead> <thead>
<tr> <tr>

4
web/template/products/index.gohtml
View File

@ -10,6 +10,7 @@
<a>{{( pgettext "Products" "title" )}}</a> <a>{{( pgettext "Products" "title" )}}</a>
</p> </p>
<p> <p>
{{ template "filters-toggle" }}
<a class="primary button" <a class="primary button"
href="{{ companyURI "/products/new" }}">{{( pgettext "New product" "action" )}}</a> href="{{ companyURI "/products/new" }}">{{( pgettext "New product" "action" )}}</a>
</p> </p>
@ -18,11 +19,11 @@
{{ define "content" }} {{ define "content" }}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.productsIndexPage*/ -}} {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.productsIndexPage*/ -}}
<div aria-label="{{( pgettext "Filters" "title" )}}">
<form class="filters" method="GET" action="{{ companyURI "/products"}}" <form class="filters" method="GET" action="{{ companyURI "/products"}}"
data-hx-target="main" data-hx-target="main"
data-hx-boost="true" data-hx-boost="true"
data-hx-trigger="change,search,submit" data-hx-trigger="change,search,submit"
aria-labelledby="filters-toggle"
> >
{{ with .Filters }} {{ with .Filters }}
{{ template "input-field" .Name }} {{ template "input-field" .Name }}
@ -33,7 +34,6 @@
<button type="submit">{{( pgettext "Filter" "action" )}}</button> <button type="submit">{{( pgettext "Filter" "action" )}}</button>
</noscript> </noscript>
</form> </form>
</div>
<table> <table>
<thead> <thead>
<tr> <tr>