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 @@ - +

Numerus