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

Trigger filter form on change and search, as well as submit as before 

Changed the invoice number field’s type to search to add the delete icon
on Chromium.  Firefox does not add that icon, but i do not care; it is
still better that type="text".

Had to emit the change event to the numerus-tag field, otherwise the
form would not detect the change.

I also can not use keyup as a trigger because the changed modifier can
not be used in the <form>, as nothing ever changes, i do not know how to
trigger the form from children (i.e., data-hx-trigger on the <input>
does nothing), and i can not trigger for just any keyup, or i would
make the request even if they only moved the cursor with the arrow keys,
which is very confusing as Firefox resets the position (this may be due
the fact that i reload the whole <main>, but still).
This commit is contained in:
jordi fita mas 2023-04-03 12:45:15 +02:00
parent ecfd840f14
commit b6668e72ef
4 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/invoices.go
View File

@ -175,7 +175,7 @@ func newInvoiceFilterForm(ctx context.Context, conn *Conn, locale *Locale, compa
InvoiceNumber: &InputField{
Name: "number",
Label: pgettext("input", "Invoice Number", locale),
Type: "text",
Type: "search",
},
FromDate: &InputField{
Name: "from_date",

2
web/static/numerus.css
View File

@ -314,7 +314,7 @@ main {
margin-top: 2rem;
}
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea {
input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea {
background-color: var(--numerus--background-color);
border: 1px solid var(--numerus--color--black);
border-radius: 0;

8
web/static/numerus.js
View File

@ -347,7 +347,11 @@ class Tags extends HTMLDivElement {
}
rebuild() {
this.input.value = this.tags.join(',');
const newValue = this.tags.join(',');
if (newValue !== this.input.value) {
this.input.value = newValue;
this.input.dispatchEvent(new Event('change', {bubbles: true}));
}
this.tagList.querySelectorAll('.tag').forEach((tag) => tag.remove());
if (this.tags.length === 0) {
this.search.setAttribute('placeholder', this.label.textContent);
@ -421,7 +425,7 @@ htmx.onLoad((target) => {
}
})
htmx.on('htmx:configRequest', function(e) {
htmx.on('htmx:configRequest', function (e) {
const element = e.detail.elt;
if (element && element.nodeName === 'FORM') {
let submitter = e.detail.triggeringEvent.submitter;

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

@ -27,7 +27,7 @@
{{ define "content" }}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.InvoicesIndexPage*/ -}}
<div aria-label="{{( pgettext "Filters" "title" )}}">
<form method="GET" action="{{ companyURI "/invoices"}}" data-hx-target="main" data-hx-boost="true">
<form method="GET" action="{{ companyURI "/invoices"}}" data-hx-target="main" data-hx-boost="true" data-hx-trigger="change,search,submit">
{{ with .Filters }}
{{ template "select-field" .Customer }}
{{ template "select-field" .InvoiceStatus }}