numerus/web/template/form.gohtml

202 lines
8.4 KiB
Plaintext
Raw Normal View History

2023-02-11 21:16:48 +00:00
{{ define "hidden-field" -}}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.InputField*/ -}}
<input type="hidden" name="{{ .Name }}"
2023-02-11 21:16:48 +00:00
{{- range $attribute := .Attributes }} {{$attribute}} {{ end }}
value="{{ .String }}">
2023-02-11 21:16:48 +00:00
{{- end }}
{{ define "input-field" -}}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.InputField*/ -}}
<div class="input{{ if .Errors }} has-errors{{ end }}"{{ if .Is }} is="{{ .Is }}"{{ end }}>
{{ if eq .Type "textarea" }}
<textarea name="{{ .Name }}" id="{{ .Name }}-field"
{{- range $attribute := .Attributes }} {{$attribute}} {{ end }}
{{ if .Required }}required="required"{{ end }} placeholder="{{ .Label }}"
>{{ .Val }}</textarea>
{{ else }}
<input type="{{ .Type }}" name="{{ .Name }}" id="{{ .Name }}-field"
{{- range $attribute := .Attributes }} {{$attribute}} {{ end }}
{{ if .Required }}required="required"{{ end }} value="{{ .Val }}" placeholder="{{ .Label }}">
{{ end }}
<label for="{{ .Name }}-field">{{ .Label }}</label>
{{- if .Errors }}
<ul>
{{- range $error := .Errors }}
<li>{{ . }}</li>
{{- end }}
</ul>
{{- end }}
</div>
{{- end }}
{{ define "file-field" -}}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.FileField*/ -}}
<div class="input{{ if .Errors }} has-errors{{ end }}">
Allow importing contacts from Holded This allows to import an Excel file exported from Holded, because it is our own user case. When we have more customers, we will give out an Excel template file to fill out. Why XLSX files instead of CSV, for instance? First, because this is the output from Holded, but even then we would have more trouble with CSV than with XLSX because of Microsoft: they royally fucked up interoperability when decided that CSV files, the files that only other applications or programmers see, should be “localized”, and use a comma or a **semicolon** to separate a **comma** separated file depending on the locale’s decimal separator. This is ridiculous because it means that CSV files created with an Excel in USA uses comma while the same Excel but with a French locale expects the fields to be separated by semicolon. And for no good reason, either. Since they fucked up so bad, decided to add a non-standard “meta” field to specify the separator, writing a `sep=,` in the first line, but this only works for reading, because saving the same file changes the separator back to the locale-dependent character and removes the “meta” field. And since everyone expects to open spreadsheet with Excel, i can not use CSV if i do not want a bunch of support tickets telling me that the template is all in a single line. I use an extremely old version of a xlsx reading library for golang[0] because it is already available in Debian repositories, and the only thing i want from it is to convert the convoluted XML file into a string array. Go is only responsible to read the file and dump its contents into a temporary table, so that it can execute the PL/pgSQL function that will actually move that data to the correct relations, much like add_contact does but in batch. In PostgreSQL version 16 they added a pg_input_is_valid function that i would use to test whether input values really conform to domains, but i will have to wait for Debian to pick up the new version. Meanwhile, i use a couple of temporary functions, in lieu of nested functions support in PostgreSQL. Part of #45 [0]: https://github.com/tealeg/xlsx
2023-07-02 22:05:47 +00:00
<input type="file" name="{{ .Name }}" id="{{ .Name }}-field" placeholder="{{ .Label }}"{{ if .Required}} required="required"{{ end }}>
<label for="{{ .Name }}-field">{{ .Label }}{{ if gt .MaxSize 0 }} {{printf (pgettext "(Max. %s)" "input") (.MaxSize|humanizeBytes) }}{{ end }}</label>
{{- if .Errors }}
<ul>
{{- range $error := .Errors }}
<li>{{ . }}</li>
{{- end }}
</ul>
{{- end }}
</div>
{{- end }}
{{ define "tags-field" -}}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.InputField*/ -}}
<div class="input {{ if .Errors }}has-errors{{ end }}" is="numerus-tags">
<input type="text" name="{{ .Name }}" id="{{ .Name }}-field"
{{- range $attribute := .Attributes }} {{$attribute}} {{ end }}
{{ if .Required }}required="required"{{ end }} value="{{ .String }}" placeholder="{{ .Label }}">
<label for="{{ .Name }}-field">{{ .Label }}</label>
{{- if .Errors }}
<ul>
{{- range $error := .Errors }}
<li>{{ . }}</li>
{{- end }}
</ul>
{{- end }}
</div>
{{- end }}
{{ define "hidden-select-field" -}}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.SelectField*/ -}}
{{- range $selected := .Selected }}
<input type="hidden" name="{{ $.Name }}"
{{- range $attribute := $.Attributes }} {{$attribute}} {{ end }}
value="{{ . }}">
{{- end }}
{{- end }}
{{ define "select-field" -}}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.SelectField*/ -}}
Reimplement the multiselect as a custom element What i really set off on was to refactor the multiselect’s x-data context to a separate JavaScript file. I did not see the need at first, thinking that it would not matter because it was used only in a template and i was not duplicating the code in my files. However, i then realized that having the context in the template means the visitor has to download it each and every time it accesses a form with a multiselect, even if nothing changed, and, worse, it would download it multiple times if there were many multiselect controls. It makes more sense to put all that into a file that the browser would only download and parse once, if the proper caching is set. Once i realized that, it was a shame that AlpineJS has no way to do the same for the HTML structure[0], for the exact same reasons: not wanting to download many times the same extra <template> and other markup required to build the control for JavaScript users. And then i remembered that this is supposed to be custom element’s main selling point. At first i tried to create a shadow DOW to replace the <select> with the same <div> and <ul> that i used with Alpine, but it turns out that <select> is not one of the allowed elements that can have a shadow root attached[0]. Therefore, i changed the custom element to extend the <div> for the <select> and <label> instead—the same element that had the x-init context—, but i would have to define or include all the styles inside the shadow DOM, and bring the lang attribute, for it to look like it did before. Out with the shadow DOM, and modify the <div>’s contents instead. At this point the code was so far removed from the declarative way that AlpineJS promotes that i did not see much value on using it, except for its reactivity. But, given that this is such a small component, at the end decided to write it all in plain JavaScript. It is more code, at least looking only at the code i had to write, but i love how i only have to add an is="numerus-multiselect" attribute to HTML for it to work. [0]: https://github.com/alpinejs/alpine/discussions/1205 [1]: https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow
2023-03-17 13:55:12 +00:00
<div class="input{{ if .Errors }} has-errors{{ end }}"{{ if .Multiple }} is="numerus-multiselect"{{ end -}}>
<select id="{{ .Name }}-field" name="{{ .Name }}"
{{- range $attribute := .Attributes }} {{$attribute}} {{ end -}}
{{ if .Multiple }} multiple="multiple"{{ end -}}
{{ if .Required }} required="required"{{ end -}}
>
{{- with .EmptyLabel }}
<option value="">{{ . }}</option>
{{- end}}
{{- $withinGroup := "" -}}
{{- range $option := .Options }}
{{- if ne .Group $withinGroup }}
{{- if ne $withinGroup "" }}
</optgroup>
{{ end }}
<optgroup label="{{ .Group }}">
{{- $withinGroup = .Group -}}
{{ end }}
<option value="{{ .Value }}"
{{- if $.IsSelected .Value }} selected="selected"{{ end }}>{{ .Label }}</option>
{{- end }}
{{- if ne $withinGroup "" }}
</optgroup>
{{- end }}
</select>
<label for="{{ .Name }}-field">{{ .Label }}</label>
{{- if .Errors }}
<ul>
{{- range $error := .Errors }}
<li>{{ . }}</li>
{{- end }}
</ul>
{{- end }}
</div>
{{- end }}
{{ define "toggle-field" -}}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.ToggleField*/ -}}
<fieldset id="{{ .Name}}-field" class="input{{ if .Errors }} has-errors{{ end }}" is="numerus-toggle">
<legend>{{ .Label }}</legend>
<label title="{{.FirstOption.Description }}">
<input type="radio" name="{{ .Name }}" value="{{ .FirstOption.Value }}"
{{ if eq .Selected .FirstOption.Value }}checked{{ end }}>
{{ .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>
{{- end }}
{{ define "radio-field" -}}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.RadioField*/ -}}
<fieldset id="{{ .Name}}-field" class="input radio{{ if .Errors }} has-errors{{ end }}">
<legend>{{ .Label }}</legend>
{{- range $option := .Options }}
<label><input type="radio" name="{{$.Name}}" value="{{.Value}}" {{- if $.IsSelected .Value }} checked="checked"{{ end }}> {{.Label}}</label>
{{- end }}
{{- if .Errors }}
<ul>
{{- range $error := .Errors }}
<li>{{ . }}</li>
{{- end }}
</ul>
{{- end }}
</fieldset>
{{- end }}
Split contact relation into tax_details, phone, web, and email We need to have contacts with just a name: we need to assign freelancer’s quote as expense linked the government, but of course we do not have a phone or email for that “contact”, much less a VATIN or other tax details. It is also interesting for other expenses-only contacts to not have to input all tax details, as we may not need to invoice then, thus are useless for us, but sometimes it might be interesting to have them, “just in case”. Of course, i did not want to make nullable any of the tax details required to generate an invoice, otherwise we could allow illegal invoices. Therefore, that data had to go in a different relation, and invoice’s foreign key update to point to that relation, not just customer, or we would again be able to create invalid invoices. We replaced the contact’s trade name with just name, because we do not need _three_ names for a contact, but we _do_ need two: the one we use to refer to them and the business name for tax purposes. The new contact_phone, contact_web, and contact_email relations could be simply a nullable field, but i did not see the point, since there are not that many instances where i need any of this data. Now company.taxDetailsForm is no longer “the same as contactForm with some extra fields”, because i have to add a check whether the user needs to invoice the contact, to check that the required values are there. I have an additional problem with the contact form when not using JavaScript: i must set the required field to all tax details fields to avoid the “(optional)” suffix, and because they _are_ required when that checkbox is enabled, but i can not set them optional when the check is unchecked. My solution for now is to ignore the form validation, and later i will add some JavaScript that adds the validation again, so it will work in all cases.
2023-06-30 19:32:48 +00:00
{{ define "check-field" -}}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.CheckField*/ -}}
<input id="{{ .Name }}-field" type="checkbox" name="{{.Name}}"{{ if .Checked}} checked="checked"{{ end }}{{ if .Required }} required="required"{{ end }}>
<label for="{{ .Name }}-field">{{.Label }}</label>
{{- end }}
{{ define "invoice-product-form" -}}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.invoiceProductForm*/ -}}
<fieldset class="new-invoice-product"
data-hx-select="unset"
data-hx-vals='{"index": {{ .Index }}}'
data-hx-include="[name='product.quantity.{{ .Index }}']"
>
<button type="submit" class="icon delete-product"
formnovalidate
name="action" value="remove-product.{{ .Index }}"
aria-label="{{( gettext "Delete product from invoice" )}}"
><i class="ri-delete-back-2-line"></i></button>
{{ template "hidden-field" .InvoiceProductId }}
{{ template "hidden-field" .ProductId }}
{{ template "input-field" .Name }}
{{ template "input-field" .Price }}
{{ template "input-field" .Quantity }}
{{ template "input-field" .Discount }}
{{ template "input-field" .Description | addInputAttr `rows="1"`}}
{{ template "select-field" .Tax }}
</fieldset>
{{- end }}
{{ define "quote-product-form" -}}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.quoteProductForm*/ -}}
<fieldset class="new-quote-product"
data-hx-select="unset"
data-hx-vals='{"index": {{ .Index }}}'
data-hx-include="[name='product.quantity.{{ .Index }}']"
>
<button type="submit" class="icon delete-product"
formnovalidate
name="action" value="remove-product.{{ .Index }}"
aria-label="{{( gettext "Delete product from quotation" )}}"
><i class="ri-delete-back-2-line"></i></button>
{{ template "hidden-field" .QuoteProductId }}
{{ template "hidden-field" .ProductId }}
{{ template "input-field" .Name }}
{{ template "input-field" .Price }}
{{ template "input-field" .Quantity }}
{{ template "input-field" .Discount }}
{{ template "input-field" .Description | addInputAttr `rows="1"`}}
{{ 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 }}