“Integrate” the tags’ condition into the input field

We have reconsidered the toggle thing and instead moved the selection
into a little menu on top of the input, like the input’s label does à
la Material Design.

I just moved the checkboxes into a new details, that works as a menu,
but i had to add the type="search" to the existing input in the tags
field, or the CSS would style the checkboxes as well.

I do not do anything when the checkbox selection changes because that
already triggers a POST to the server that returns the new HTML with
the checkbox changed, and the JavaScript only has to retrieve that new
structure, exactly as it does in the initial rendering.

Since we want to add a little description to the options, i no longer
can use the same SelectOption in ToggleField, even though i could have
reused the Group element, but that felt wrong.
This commit is contained in:
jordi fita mas 2023-04-16 19:01:11 +02:00
parent 46fe90c867
commit 149557e42e
8 changed files with 196 additions and 83 deletions

View File

@ -262,12 +262,18 @@ type ToggleField struct {
Name string Name string
Label string Label string
Selected string Selected string
FirstOption *SelectOption FirstOption *ToggleOption
SecondOption *SelectOption SecondOption *ToggleOption
Attributes []template.HTMLAttr Attributes []template.HTMLAttr
Errors []error Errors []error
} }
type ToggleOption struct {
Value string
Label string
Description string
}
func (field *ToggleField) FillValue(r *http.Request) { func (field *ToggleField) FillValue(r *http.Request) {
field.Selected = strings.TrimSpace(r.FormValue(field.Name)) field.Selected = strings.TrimSpace(r.FormValue(field.Name))
if field.Selected != field.FirstOption.Value && field.Selected != field.SecondOption.Value { if field.Selected != field.FirstOption.Value && field.Selected != field.SecondOption.Value {

View File

@ -190,11 +190,15 @@ func newInvoiceFilterForm(ctx context.Context, conn *Conn, locale *Locale, compa
Name: "tags_condition", Name: "tags_condition",
Label: pgettext("input", "Tags Condition", locale), Label: pgettext("input", "Tags Condition", locale),
Selected: "and", Selected: "and",
FirstOption: &SelectOption{ FirstOption: &ToggleOption{
Value: "and", Label: pgettext("tag condition", "All", locale), Value: "and",
Label: pgettext("tag condition", "All", locale),
Description: gettext("Invoices must have all the specified labels.", locale),
}, },
SecondOption: &SelectOption{ SecondOption: &ToggleOption{
Value: "or", Label: pgettext("tag condition", "Any", locale), Value: "or",
Label: pgettext("tag condition", "Any", locale),
Description: gettext("Invoices must have at least one of the specified labels.", locale),
}, },
}, },
} }

View File

@ -8,7 +8,7 @@ msgid ""
msgstr "" msgstr ""
"Project-Id-Version: numerus\n" "Project-Id-Version: numerus\n"
"Report-Msgid-Bugs-To: jordi@tandem.blog\n" "Report-Msgid-Bugs-To: jordi@tandem.blog\n"
"POT-Creation-Date: 2023-04-15 20:39+0200\n" "POT-Creation-Date: 2023-04-16 18:48+0200\n"
"PO-Revision-Date: 2023-01-18 17:08+0100\n" "PO-Revision-Date: 2023-01-18 17:08+0100\n"
"Last-Translator: jordi fita mas <jordi@tandem.blog>\n" "Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
"Language-Team: Catalan <ca@dodds.net>\n" "Language-Team: Catalan <ca@dodds.net>\n"
@ -456,49 +456,49 @@ msgstr "No podeu deixar la contrasenya en blanc."
msgid "Invalid user or password." msgid "Invalid user or password."
msgstr "Nom dusuari o contrasenya incorrectes." msgstr "Nom dusuari o contrasenya incorrectes."
#: pkg/products.go:204 pkg/invoices.go:728 #: pkg/products.go:204 pkg/invoices.go:732
msgctxt "input" msgctxt "input"
msgid "Name" msgid "Name"
msgstr "Nom" msgstr "Nom"
#: pkg/products.go:210 pkg/invoices.go:733 #: pkg/products.go:210 pkg/invoices.go:737
msgctxt "input" msgctxt "input"
msgid "Description" msgid "Description"
msgstr "Descripció" msgstr "Descripció"
#: pkg/products.go:215 pkg/invoices.go:737 #: pkg/products.go:215 pkg/invoices.go:741
msgctxt "input" msgctxt "input"
msgid "Price" msgid "Price"
msgstr "Preu" msgstr "Preu"
#: pkg/products.go:225 pkg/invoices.go:763 #: pkg/products.go:225 pkg/invoices.go:767
msgctxt "input" msgctxt "input"
msgid "Taxes" msgid "Taxes"
msgstr "Imposts" msgstr "Imposts"
#: pkg/products.go:231 pkg/invoices.go:187 pkg/invoices.go:578 #: pkg/products.go:231 pkg/invoices.go:187 pkg/invoices.go:582
#: pkg/invoices.go:960 pkg/contacts.go:267 #: pkg/invoices.go:964 pkg/contacts.go:267
msgctxt "input" msgctxt "input"
msgid "Tags" msgid "Tags"
msgstr "Etiquetes" msgstr "Etiquetes"
#: pkg/products.go:250 pkg/profile.go:92 pkg/invoices.go:802 #: pkg/products.go:250 pkg/profile.go:92 pkg/invoices.go:806
msgid "Name can not be empty." msgid "Name can not be empty."
msgstr "No podeu deixar el nom en blanc." msgstr "No podeu deixar el nom en blanc."
#: pkg/products.go:251 pkg/invoices.go:803 #: pkg/products.go:251 pkg/invoices.go:807
msgid "Price can not be empty." msgid "Price can not be empty."
msgstr "No podeu deixar el preu en blanc." msgstr "No podeu deixar el preu en blanc."
#: pkg/products.go:252 pkg/invoices.go:804 #: pkg/products.go:252 pkg/invoices.go:808
msgid "Price must be a number greater than zero." msgid "Price must be a number greater than zero."
msgstr "El preu ha de ser un número major a zero." msgstr "El preu ha de ser un número major a zero."
#: pkg/products.go:254 pkg/invoices.go:812 #: pkg/products.go:254 pkg/invoices.go:816
msgid "Selected tax is not valid." msgid "Selected tax is not valid."
msgstr "Heu seleccionat un impost que no és vàlid." msgstr "Heu seleccionat un impost que no és vàlid."
#: pkg/products.go:255 pkg/invoices.go:813 #: pkg/products.go:255 pkg/invoices.go:817
msgid "You can only select a tax of each class." msgid "You can only select a tax of each class."
msgstr "Només podeu seleccionar un impost de cada classe." msgstr "Només podeu seleccionar un impost de cada classe."
@ -606,7 +606,7 @@ msgstr "La confirmació no és igual a la contrasenya."
msgid "Selected language is not valid." msgid "Selected language is not valid."
msgstr "Heu seleccionat un idioma que no és vàlid." msgstr "Heu seleccionat un idioma que no és vàlid."
#: pkg/invoices.go:160 pkg/invoices.go:561 #: pkg/invoices.go:160 pkg/invoices.go:565
msgctxt "input" msgctxt "input"
msgid "Customer" msgid "Customer"
msgstr "Client" msgstr "Client"
@ -615,7 +615,7 @@ msgstr "Client"
msgid "All customers" msgid "All customers"
msgstr "Tots els clients" msgstr "Tots els clients"
#: pkg/invoices.go:166 pkg/invoices.go:555 #: pkg/invoices.go:166 pkg/invoices.go:559
msgctxt "input" msgctxt "input"
msgid "Invoice Status" msgid "Invoice Status"
msgstr "Estat de la factura" msgstr "Estat de la factura"
@ -644,95 +644,103 @@ msgctxt "input"
msgid "Tags Condition" msgid "Tags Condition"
msgstr "Condició de les etiquetes" msgstr "Condició de les etiquetes"
#: pkg/invoices.go:194 #: pkg/invoices.go:195
msgctxt "tag condition" msgctxt "tag condition"
msgid "All" msgid "All"
msgstr "Totes" msgstr "Totes"
#: pkg/invoices.go:197 #: pkg/invoices.go:196
msgid "Invoices must have all the specified labels."
msgstr "Les factures han de tenir totes les etiquetes."
#: pkg/invoices.go:200
msgctxt "tag condition" msgctxt "tag condition"
msgid "Any" msgid "Any"
msgstr "Qualsevol" msgstr "Qualsevol"
#: pkg/invoices.go:401 #: pkg/invoices.go:201
msgid "Invoices must have at least one of the specified labels."
msgstr "Les factures han de tenir com a mínim una de les etiquetes."
#: pkg/invoices.go:405
msgid "Select a customer to bill." msgid "Select a customer to bill."
msgstr "Escolliu un client a facturar." msgstr "Escolliu un client a facturar."
#: pkg/invoices.go:500 #: pkg/invoices.go:504
msgid "invoices.zip" msgid "invoices.zip"
msgstr "factures.zip" msgstr "factures.zip"
#: pkg/invoices.go:506 pkg/invoices.go:946 #: pkg/invoices.go:510 pkg/invoices.go:950
msgid "Invalid action" msgid "Invalid action"
msgstr "Acció invàlida." msgstr "Acció invàlida."
#: pkg/invoices.go:567 #: pkg/invoices.go:571
msgctxt "input" msgctxt "input"
msgid "Invoice Date" msgid "Invoice Date"
msgstr "Data de factura" msgstr "Data de factura"
#: pkg/invoices.go:573 #: pkg/invoices.go:577
msgctxt "input" msgctxt "input"
msgid "Notes" msgid "Notes"
msgstr "Notes" msgstr "Notes"
#: pkg/invoices.go:583 #: pkg/invoices.go:587
msgctxt "input" msgctxt "input"
msgid "Payment Method" msgid "Payment Method"
msgstr "Mètode de pagament" msgstr "Mètode de pagament"
#: pkg/invoices.go:620 #: pkg/invoices.go:624
msgid "Selected invoice status is not valid." msgid "Selected invoice status is not valid."
msgstr "Heu seleccionat un estat de factura que no és vàlid." msgstr "Heu seleccionat un estat de factura que no és vàlid."
#: pkg/invoices.go:621 #: pkg/invoices.go:625
msgid "Selected customer is not valid." msgid "Selected customer is not valid."
msgstr "Heu seleccionat un client que no és vàlid." msgstr "Heu seleccionat un client que no és vàlid."
#: pkg/invoices.go:622 #: pkg/invoices.go:626
msgid "Invoice date can not be empty." msgid "Invoice date can not be empty."
msgstr "No podeu deixar la data de la factura en blanc." msgstr "No podeu deixar la data de la factura en blanc."
#: pkg/invoices.go:623 #: pkg/invoices.go:627
msgid "Invoice date must be a valid date." msgid "Invoice date must be a valid date."
msgstr "La data de facturació ha de ser vàlida." msgstr "La data de facturació ha de ser vàlida."
#: pkg/invoices.go:625 #: pkg/invoices.go:629
msgid "Selected payment method is not valid." msgid "Selected payment method is not valid."
msgstr "Heu seleccionat un mètode de pagament que no és vàlid." msgstr "Heu seleccionat un mètode de pagament que no és vàlid."
#: pkg/invoices.go:718 pkg/invoices.go:723 #: pkg/invoices.go:722 pkg/invoices.go:727
msgctxt "input" msgctxt "input"
msgid "Id" msgid "Id"
msgstr "Identificador" msgstr "Identificador"
#: pkg/invoices.go:746 #: pkg/invoices.go:750
msgctxt "input" msgctxt "input"
msgid "Quantity" msgid "Quantity"
msgstr "Quantitat" msgstr "Quantitat"
#: pkg/invoices.go:754 #: pkg/invoices.go:758
msgctxt "input" msgctxt "input"
msgid "Discount (%)" msgid "Discount (%)"
msgstr "Descompte (%)" msgstr "Descompte (%)"
#: pkg/invoices.go:801 #: pkg/invoices.go:805
msgid "Product ID can not be empty." msgid "Product ID can not be empty."
msgstr "No podeu deixar lidentificador del producte en blanc." msgstr "No podeu deixar lidentificador del producte en blanc."
#: pkg/invoices.go:806 #: pkg/invoices.go:810
msgid "Quantity can not be empty." msgid "Quantity can not be empty."
msgstr "No podeu deixar la quantitat en blanc." msgstr "No podeu deixar la quantitat en blanc."
#: pkg/invoices.go:807 #: pkg/invoices.go:811
msgid "Quantity must be a number greater than zero." msgid "Quantity must be a number greater than zero."
msgstr "La quantitat ha de ser un número major a zero." msgstr "La quantitat ha de ser un número major a zero."
#: pkg/invoices.go:809 #: pkg/invoices.go:813
msgid "Discount can not be empty." msgid "Discount can not be empty."
msgstr "No podeu deixar el descompte en blanc." msgstr "No podeu deixar el descompte en blanc."
#: pkg/invoices.go:810 #: pkg/invoices.go:814
msgid "Discount must be a percentage between 0 and 100." msgid "Discount must be a percentage between 0 and 100."
msgstr "El descompte ha de ser un percentatge entre 0 i 100." msgstr "El descompte ha de ser un percentatge entre 0 i 100."

View File

@ -7,7 +7,7 @@ msgid ""
msgstr "" msgstr ""
"Project-Id-Version: numerus\n" "Project-Id-Version: numerus\n"
"Report-Msgid-Bugs-To: jordi@tandem.blog\n" "Report-Msgid-Bugs-To: jordi@tandem.blog\n"
"POT-Creation-Date: 2023-04-15 20:39+0200\n" "POT-Creation-Date: 2023-04-16 18:48+0200\n"
"PO-Revision-Date: 2023-01-18 17:45+0100\n" "PO-Revision-Date: 2023-01-18 17:45+0100\n"
"Last-Translator: jordi fita mas <jordi@tandem.blog>\n" "Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
"Language-Team: Spanish <es@tp.org.es>\n" "Language-Team: Spanish <es@tp.org.es>\n"
@ -456,49 +456,49 @@ msgstr "No podéis dejar la contraseña en blanco."
msgid "Invalid user or password." msgid "Invalid user or password."
msgstr "Nombre de usuario o contraseña inválido." msgstr "Nombre de usuario o contraseña inválido."
#: pkg/products.go:204 pkg/invoices.go:728 #: pkg/products.go:204 pkg/invoices.go:732
msgctxt "input" msgctxt "input"
msgid "Name" msgid "Name"
msgstr "Nombre" msgstr "Nombre"
#: pkg/products.go:210 pkg/invoices.go:733 #: pkg/products.go:210 pkg/invoices.go:737
msgctxt "input" msgctxt "input"
msgid "Description" msgid "Description"
msgstr "Descripción" msgstr "Descripción"
#: pkg/products.go:215 pkg/invoices.go:737 #: pkg/products.go:215 pkg/invoices.go:741
msgctxt "input" msgctxt "input"
msgid "Price" msgid "Price"
msgstr "Precio" msgstr "Precio"
#: pkg/products.go:225 pkg/invoices.go:763 #: pkg/products.go:225 pkg/invoices.go:767
msgctxt "input" msgctxt "input"
msgid "Taxes" msgid "Taxes"
msgstr "Impuestos" msgstr "Impuestos"
#: pkg/products.go:231 pkg/invoices.go:187 pkg/invoices.go:578 #: pkg/products.go:231 pkg/invoices.go:187 pkg/invoices.go:582
#: pkg/invoices.go:960 pkg/contacts.go:267 #: pkg/invoices.go:964 pkg/contacts.go:267
msgctxt "input" msgctxt "input"
msgid "Tags" msgid "Tags"
msgstr "Etiquetes" msgstr "Etiquetes"
#: pkg/products.go:250 pkg/profile.go:92 pkg/invoices.go:802 #: pkg/products.go:250 pkg/profile.go:92 pkg/invoices.go:806
msgid "Name can not be empty." msgid "Name can not be empty."
msgstr "No podéis dejar el nombre en blanco." msgstr "No podéis dejar el nombre en blanco."
#: pkg/products.go:251 pkg/invoices.go:803 #: pkg/products.go:251 pkg/invoices.go:807
msgid "Price can not be empty." msgid "Price can not be empty."
msgstr "No podéis dejar el precio en blanco." msgstr "No podéis dejar el precio en blanco."
#: pkg/products.go:252 pkg/invoices.go:804 #: pkg/products.go:252 pkg/invoices.go:808
msgid "Price must be a number greater than zero." msgid "Price must be a number greater than zero."
msgstr "El precio tiene que ser un número mayor a cero." msgstr "El precio tiene que ser un número mayor a cero."
#: pkg/products.go:254 pkg/invoices.go:812 #: pkg/products.go:254 pkg/invoices.go:816
msgid "Selected tax is not valid." msgid "Selected tax is not valid."
msgstr "Habéis escogido un impuesto que no es válido." msgstr "Habéis escogido un impuesto que no es válido."
#: pkg/products.go:255 pkg/invoices.go:813 #: pkg/products.go:255 pkg/invoices.go:817
msgid "You can only select a tax of each class." msgid "You can only select a tax of each class."
msgstr "Solo podéis escoger un impuesto de cada clase." msgstr "Solo podéis escoger un impuesto de cada clase."
@ -606,7 +606,7 @@ msgstr "La confirmación no corresponde con la contraseña."
msgid "Selected language is not valid." msgid "Selected language is not valid."
msgstr "Habéis escogido un idioma que no es válido." msgstr "Habéis escogido un idioma que no es válido."
#: pkg/invoices.go:160 pkg/invoices.go:561 #: pkg/invoices.go:160 pkg/invoices.go:565
msgctxt "input" msgctxt "input"
msgid "Customer" msgid "Customer"
msgstr "Cliente" msgstr "Cliente"
@ -615,7 +615,7 @@ msgstr "Cliente"
msgid "All customers" msgid "All customers"
msgstr "Todos los clientes" msgstr "Todos los clientes"
#: pkg/invoices.go:166 pkg/invoices.go:555 #: pkg/invoices.go:166 pkg/invoices.go:559
msgctxt "input" msgctxt "input"
msgid "Invoice Status" msgid "Invoice Status"
msgstr "Estado de la factura" msgstr "Estado de la factura"
@ -644,95 +644,103 @@ msgctxt "input"
msgid "Tags Condition" msgid "Tags Condition"
msgstr "Condición de las etiquetas" msgstr "Condición de las etiquetas"
#: pkg/invoices.go:194 #: pkg/invoices.go:195
msgctxt "tag condition" msgctxt "tag condition"
msgid "All" msgid "All"
msgstr "Todas" msgstr "Todas"
#: pkg/invoices.go:197 #: pkg/invoices.go:196
msgid "Invoices must have all the specified labels."
msgstr "Las facturas deben tener todas las etiquetas."
#: pkg/invoices.go:200
msgctxt "tag condition" msgctxt "tag condition"
msgid "Any" msgid "Any"
msgstr "Cualquiera" msgstr "Cualquiera"
#: pkg/invoices.go:401 #: pkg/invoices.go:201
msgid "Invoices must have at least one of the specified labels."
msgstr "Las facturas debent tener como mínimo una de las etiquetas."
#: pkg/invoices.go:405
msgid "Select a customer to bill." msgid "Select a customer to bill."
msgstr "Escoged un cliente a facturar." msgstr "Escoged un cliente a facturar."
#: pkg/invoices.go:500 #: pkg/invoices.go:504
msgid "invoices.zip" msgid "invoices.zip"
msgstr "facturas.zip" msgstr "facturas.zip"
#: pkg/invoices.go:506 pkg/invoices.go:946 #: pkg/invoices.go:510 pkg/invoices.go:950
msgid "Invalid action" msgid "Invalid action"
msgstr "Acción inválida." msgstr "Acción inválida."
#: pkg/invoices.go:567 #: pkg/invoices.go:571
msgctxt "input" msgctxt "input"
msgid "Invoice Date" msgid "Invoice Date"
msgstr "Fecha de factura" msgstr "Fecha de factura"
#: pkg/invoices.go:573 #: pkg/invoices.go:577
msgctxt "input" msgctxt "input"
msgid "Notes" msgid "Notes"
msgstr "Notas" msgstr "Notas"
#: pkg/invoices.go:583 #: pkg/invoices.go:587
msgctxt "input" msgctxt "input"
msgid "Payment Method" msgid "Payment Method"
msgstr "Método de pago" msgstr "Método de pago"
#: pkg/invoices.go:620 #: pkg/invoices.go:624
msgid "Selected invoice status is not valid." msgid "Selected invoice status is not valid."
msgstr "Habéis escogido un estado de factura que no es válido." msgstr "Habéis escogido un estado de factura que no es válido."
#: pkg/invoices.go:621 #: pkg/invoices.go:625
msgid "Selected customer is not valid." msgid "Selected customer is not valid."
msgstr "Habéis escogido un cliente que no es válido." msgstr "Habéis escogido un cliente que no es válido."
#: pkg/invoices.go:622 #: pkg/invoices.go:626
msgid "Invoice date can not be empty." msgid "Invoice date can not be empty."
msgstr "No podéis dejar la fecha de la factura en blanco." msgstr "No podéis dejar la fecha de la factura en blanco."
#: pkg/invoices.go:623 #: pkg/invoices.go:627
msgid "Invoice date must be a valid date." msgid "Invoice date must be a valid date."
msgstr "La fecha de factura debe ser válida." msgstr "La fecha de factura debe ser válida."
#: pkg/invoices.go:625 #: pkg/invoices.go:629
msgid "Selected payment method is not valid." msgid "Selected payment method is not valid."
msgstr "Habéis escogido un método de pago que no es válido." msgstr "Habéis escogido un método de pago que no es válido."
#: pkg/invoices.go:718 pkg/invoices.go:723 #: pkg/invoices.go:722 pkg/invoices.go:727
msgctxt "input" msgctxt "input"
msgid "Id" msgid "Id"
msgstr "Identificador" msgstr "Identificador"
#: pkg/invoices.go:746 #: pkg/invoices.go:750
msgctxt "input" msgctxt "input"
msgid "Quantity" msgid "Quantity"
msgstr "Cantidad" msgstr "Cantidad"
#: pkg/invoices.go:754 #: pkg/invoices.go:758
msgctxt "input" msgctxt "input"
msgid "Discount (%)" msgid "Discount (%)"
msgstr "Descuento (%)" msgstr "Descuento (%)"
#: pkg/invoices.go:801 #: pkg/invoices.go:805
msgid "Product ID can not be empty." msgid "Product ID can not be empty."
msgstr "No podéis dejar el identificador de producto en blanco." msgstr "No podéis dejar el identificador de producto en blanco."
#: pkg/invoices.go:806 #: pkg/invoices.go:810
msgid "Quantity can not be empty." msgid "Quantity can not be empty."
msgstr "No podéis dejar la cantidad en blanco." msgstr "No podéis dejar la cantidad en blanco."
#: pkg/invoices.go:807 #: pkg/invoices.go:811
msgid "Quantity must be a number greater than zero." msgid "Quantity must be a number greater than zero."
msgstr "La cantidad tiene que ser un número mayor a cero." msgstr "La cantidad tiene que ser un número mayor a cero."
#: pkg/invoices.go:809 #: pkg/invoices.go:813
msgid "Discount can not be empty." msgid "Discount can not be empty."
msgstr "No podéis dejar el descuento en blanco." msgstr "No podéis dejar el descuento en blanco."
#: pkg/invoices.go:810 #: pkg/invoices.go:814
msgid "Discount must be a percentage between 0 and 100." msgid "Discount must be a percentage between 0 and 100."
msgstr "El descuento tiene que ser un porcentaje entre 0 y 100." msgstr "El descuento tiene que ser un porcentaje entre 0 y 100."

View File

@ -669,7 +669,7 @@ main > nav {
background: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .4);
} }
[is="numerus-multiselect"] .tags input, [is="numerus-tags"] .tags input { [is="numerus-multiselect"] .tags input, [is="numerus-tags"] .tags input[type="search"] {
flex: 1; flex: 1;
width: 100%; width: 100%;
border: 0; border: 0;
@ -678,6 +678,8 @@ main > nav {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
appearance: none; appearance: none;
padding: 0;
min-width: initial;
} }
[is="numerus-multiselect"] .options { [is="numerus-multiselect"] .options {
@ -700,6 +702,50 @@ main > nav {
background-color: var(--numerus--color--light-gray); background-color: var(--numerus--color--light-gray);
} }
[is="numerus-tags"] details {
background-color: var(--numerus--background-color);
position: absolute;
right: 2rem;
top: -.9rem;
font-size: 0.8em;
padding: 0 0.5em;
}
[is="numerus-tags"] details summary {
display: revert;
}
[is="numerus-tags"] [role="menu"] {
min-width: 27em;
}
[is="numerus-tags"] [role="menu"] li {
display: inline-flex;
flex-direction: column;
justify-content: center;
font-size: 1.6rem;
padding: 0.25em 0.5em;
}
[is="numerus-tags"] [role="menu"] li + li {
margin-top: 0.75em;
}
[is="numerus-tags"] [role="menu"] label {
color: var(--numerus--text-color);
font-size: 1em;
background-color: inherit;
position: initial;
pointer-events: initial;
cursor: pointer;
gap: 0.5em;
}
[is="numerus-tags"] [role="menu"] label[title]::after {
content: attr(title);
display: block;
}
/* Modal */ /* Modal */
dialog { dialog {
margin: auto; margin: auto;

View File

@ -389,12 +389,47 @@ class Tags extends HTMLDivElement {
this.tagList.append(this.search); this.tagList.append(this.search);
this.search.id = this.input.id; this.search.id = this.input.id;
this.input.removeAttribute('id'); this.input.removeAttribute('id');
this.search.setAttribute('type', 'search');
this.input.setAttribute('aria-hidden', 'true'); this.input.setAttribute('aria-hidden', 'true');
this.search.setAttribute('spellcheck', 'false'); this.search.setAttribute('spellcheck', 'false');
this.search.setAttribute('autocomplete', 'false'); this.search.setAttribute('autocomplete', 'false');
// Must come after the search input // Must come after the search input
this.tagList.append(this.label); this.tagList.append(this.label);
const conditionsId = this.input.dataset.conditions;
if (conditionsId !== "") {
const conditions = document.getElementById(conditionsId);
if (conditions) {
const details = document.createElement('details');
details.classList.add('menu');
this.tagList.append(details);
const summary = document.createElement('summary');
details.append(summary);
const ul = document.createElement('ul');
ul.setAttribute('role', 'menu');
details.append(ul);
const options = conditions.querySelectorAll('label');
if (options && options.length > 0) {
summary.textContent = options[0].textContent.trim();
}
for (const option of options) {
const li = document.createElement('li');
li.setAttribute('role', 'presentation');
li.append(option);
ul.append(li);
const checkbox = option.querySelector('input');
if (checkbox && checkbox.checked) {
summary.textContent = option.textContent.trim();
}
}
conditions.remove();
}
}
} }
removeTags() { removeTags() {

View File

@ -95,11 +95,17 @@
{{ define "toggle-field" -}} {{ define "toggle-field" -}}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.ToggleField*/ -}} {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.ToggleField*/ -}}
<fieldset class="input{{ if .Errors }} has-errors{{ end }}" is="numerus-toggle"> <fieldset id="{{ .Name}}-field" class="input{{ if .Errors }} has-errors{{ end }}" is="numerus-toggle">
<legend>{{ .Label }}</legend> <legend>{{ .Label }}</legend>
<label><input type="radio" name="{{ .Name }}" value="{{ .FirstOption.Value }}" <label title="{{.FirstOption.Description }}">
{{ if eq .Selected .FirstOption.Value }}checked{{ end }}> {{ .FirstOption.Label }}</label> <input type="radio" name="{{ .Name }}" value="{{ .FirstOption.Value }}"
<label><input type="radio" name="{{ .Name }}" value="{{ .SecondOption.Value }}" {{ if eq .Selected .FirstOption.Value }}checked{{ end }}>
{{ if eq .Selected .SecondOption.Value }}checked{{ end }}> {{ .SecondOption.Label }}</label> {{ .FirstOption.Label }}
</label>
<label title="{{ .SecondOption.Description }}">
<input type="radio" name="{{ .Name }}" value="{{ .SecondOption.Value }}"
{{ if eq .Selected .SecondOption.Value }}checked{{ end }}>
{{ .SecondOption.Label }}
</label>
</fieldset> </fieldset>
{{- end }} {{- end }}

View File

@ -35,7 +35,7 @@
{{ template "input-field" .FromDate }} {{ template "input-field" .FromDate }}
{{ template "input-field" .ToDate }} {{ template "input-field" .ToDate }}
{{ template "input-field" .InvoiceNumber }} {{ template "input-field" .InvoiceNumber }}
{{ template "tags-field" .Tags }} {{ template "tags-field" .Tags | addTagsAttr (print `data-conditions="` .TagsCondition.Name `-field"`) }}
{{ template "toggle-field" .TagsCondition }} {{ template "toggle-field" .TagsCondition }}
{{ end }} {{ end }}
<button type="submit">{{( pgettext "Filter" "action" )}}</button> <button type="submit">{{( pgettext "Filter" "action" )}}</button>