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

Compare commits

base: tandem:79ec3ae4d687e79d3239bcb2217abff89012dc45
Branches Tags
tandem:master
tandem:v1.1
tandem:v1
tandem:v0
..
compare: tandem:992bbf32a9fb3b7807cca4967e78214c003ddb27
Branches Tags
tandem:master
tandem:v1.1
tandem:v1
tandem:v0

3 Commits
79ec3ae4d6 ... 992bbf32a9

Author SHA1 Message Date
jordi fita mas 992bbf32a9 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.
 2023-05-24 12:13:09 +02:00
jordi fita mas 92edbdfc4d Reindent numerus.css with IntelliJ 2023-05-24 12:06:03 +02:00
jordi fita mas e68eb52578 Don’t show the “(optional)” label for filter inputs 
It adds nothing, as all input fields for filters show be optional.
 2023-05-24 11:41:48 +02:00
8 changed files with 117 additions and 100 deletions
Show Stats Expand all files Collapse all files

24
web/static/numerus.css
View File

@ -374,15 +374,15 @@ input.width-2x {
color: var(--numerus--color--red);
}
[lang="en"] textarea:not([required]) + label::after,
[lang="en"] input:not([required]) + label::after,
[lang="en"] select:not([required]) + label::after {
[lang="en"] form:not(.filters) textarea:not([required]) + label::after,
[lang="en"] form:not(.filters) input:not([required]) + label::after,
[lang="en"] form:not(.filters) select:not([required]) + label::after {
content: " (optional)"
}
[lang="ca"] textarea:not([required]) + label::after, [lang="es"] textarea:not([required]) + label::after,
[lang="ca"] input:not([required]) + label::after, [lang="es"] input:not([required]) + label::after,
[lang="ca"] select:not([required]) + label::after, [lang="es"] select:not([required]) + label::after {
[lang="ca"] form:not(.filters) textarea:not([required]) + label::after, [lang="es"] form:not(.filters) textarea:not([required]) + label::after,
[lang="ca"] form:not(.filters) input:not([required]) + label::after, [lang="es"] form:not(.filters) input:not([required]) + label::after,
[lang="ca"] form:not(.filters) select:not([required]) + label::after, [lang="es"] form:not(.filters) select:not([required]) + label::after {
content: " (opcional)"
}
@ -909,13 +909,21 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r
transform: translateY(0);
}
/* Dashboard */
/* Filters */
.filters {
display: none;
}
.filters-visible .filters {
display: flex;
gap: 1rem;
}
.filters-visible #filters-toggle {
background-color: var(--numerus--header--background-color);
}
/* Dashboard */
#dashboard-filters {
display: flex;
}

2
web/static/numerus.js
View File

@ -712,6 +712,8 @@ htmx.on('closeModal', () => {
});
htmx.on(document, 'alpine:init', () => {
document.body.classList.remove('show-filters');
Alpine.data('snackbar', () => ({
show: false, toast: "", toasts: [], timeoutId: null, init() {
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 defer src="/static/alpinejs@3.12.0.min.js"></script>
</head>
<body>
<body class="show-filters">
<header>
<h1><img src="/static/numerus.svg" alt="Numerus" width="261" height="33"></h1>
<details id="profile-menu" class="menu">

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

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

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

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

6
web/template/form.gohtml
View File

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

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

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