From 992bbf32a9fb3b7807cca4967e78214c003ddb27 Mon Sep 17 00:00:00 2001
From: jordi fita mas
Date: Wed, 24 May 2023 12:13:09 +0200
Subject: [PATCH] Toggle filters forms
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
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.
---
web/static/numerus.css | 16 ++++++++++----
web/static/numerus.js | 2 ++
web/template/app.gohtml | 2 +-
web/template/contacts/index.gohtml | 32 +++++++++++++--------------
web/template/expenses/index.gohtml | 34 ++++++++++++++---------------
web/template/form.gohtml | 6 +++++
web/template/invoices/index.gohtml | 35 +++++++++++++++---------------
web/template/products/index.gohtml | 32 +++++++++++++--------------
8 files changed, 88 insertions(+), 71 deletions(-)
diff --git a/web/static/numerus.css b/web/static/numerus.css
index 039af6f..ee6d835 100644
--- a/web/static/numerus.css
+++ b/web/static/numerus.css
@@ -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: flex;
- gap: 1rem;
+ 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;
}
diff --git a/web/static/numerus.js b/web/static/numerus.js
index 06fb7aa..7a5dbd6 100644
--- a/web/static/numerus.js
+++ b/web/static/numerus.js
@@ -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) => {
diff --git a/web/template/app.gohtml b/web/template/app.gohtml
index f6cdf95..67709f9 100644
--- a/web/template/app.gohtml
+++ b/web/template/app.gohtml
@@ -9,7 +9,7 @@
-
+
diff --git a/web/template/contacts/index.gohtml b/web/template/contacts/index.gohtml
index 9ca7705..1cf6064 100644
--- a/web/template/contacts/index.gohtml
+++ b/web/template/contacts/index.gohtml
@@ -10,6 +10,7 @@
{{( pgettext "Contacts" "title" )}}