tandem
/
numerus
2
0
Fork 0
Code Issues 37 Pull Requests Packages Projects 1 Releases 1 Wiki Activity
numerus/web/template/form.gohtml

183 lines
7.6 KiB
Plaintext
Raw Normal View History

Add the bare-bones form for invoices
2023-02-11 21:16:48 +00:00
{{ define "hidden-field" -}}
Add the form to add products to an invoice and create invoices too Still missing: the invoice number, that requires more tables and possibly a PL/pgSQL function to do it properly.
2023-02-12 20:06:48 +00:00
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.InputField*/ -}}
<input type="hidden" name="{{ .Name }}"
Add the bare-bones form for invoices
2023-02-11 21:16:48 +00:00
{{- range $attribute := .Attributes }} {{$attribute}} {{ end }}
Add the form to add products to an invoice and create invoices too Still missing: the invoice number, that requires more tables and possibly a PL/pgSQL function to do it properly.
2023-02-12 20:06:48 +00:00
value="{{ .Val }}">
Add the bare-bones form for invoices
2023-02-11 21:16:48 +00:00
{{- end }}
Validate profile form and use templates for fields Let’s start first with a non-fancy validation method with just if conditionals instead of bringing yet another complicated library. I hope i do not regret it. I wanted to move all the input field to a template because all that gobbledygook with the .input div and repeating the label in the placeholder was starting to annoy me. Now with error messages was even more concerning. I did not know whether the label should be a part of the input fields or something that the template should do. At the end i decided that it makes more sense to be part of the input field because in the error messages i use that same label, thus the template does not have a say in that, and, besides, it was just easier to write the template. The same with the error messages: i’ve seen frameworks that have a map with the field’s id/name to the error slice, but then it would be a bit harder to write the template. I added AddError functions instead of just using append inside the validator function, and have a local variable for whether it all went OK, because i was worried that i would leave out the `ok = false` in some conditions. I had started writing “constructors” functions for InputField and SelectField, but then had to add other methods to change the required field and who knows what else, and in the end it was easier to just construct the field inline.
2023-01-31 14:40:12 +00:00
{{ define "input-field" -}}
Add the form to add products to an invoice and create invoices too Still missing: the invoice number, that requires more tables and possibly a PL/pgSQL function to do it properly.
2023-02-12 20:06:48 +00:00
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.InputField*/ -}}
Validate profile form and use templates for fields Let’s start first with a non-fancy validation method with just if conditionals instead of bringing yet another complicated library. I hope i do not regret it. I wanted to move all the input field to a template because all that gobbledygook with the .input div and repeating the label in the placeholder was starting to annoy me. Now with error messages was even more concerning. I did not know whether the label should be a part of the input fields or something that the template should do. At the end i decided that it makes more sense to be part of the input field because in the error messages i use that same label, thus the template does not have a say in that, and, besides, it was just easier to write the template. The same with the error messages: i’ve seen frameworks that have a map with the field’s id/name to the error slice, but then it would be a bit harder to write the template. I added AddError functions instead of just using append inside the validator function, and have a local variable for whether it all went OK, because i was worried that i would leave out the `ok = false` in some conditions. I had started writing “constructors” functions for InputField and SelectField, but then had to add other methods to change the required field and who knows what else, and in the end it was easier to just construct the field inline.
2023-01-31 14:40:12 +00:00
<div class="input {{ if .Errors }}has-errors{{ end }}">
Add template for InputField of type textarea
2023-02-07 14:28:22 +00:00
{{ if eq .Type "textarea" }}
Allow multiple taxes, and even not tax, for products It seems that we do not agree en whether the IRPF tax should be something of the product or the contact, so we decided to make the product have multiple taxes, just in case, and if only one is needed, then users can just select one; no need to limit to one.
2023-02-08 12:47:36 +00:00
<textarea name="{{ .Name }}" id="{{ .Name }}-field"
Add template for InputField of type textarea
2023-02-07 14:28:22 +00:00
{{- range $attribute := .Attributes }} {{$attribute}} {{ end }}
Allow multiple taxes, and even not tax, for products It seems that we do not agree en whether the IRPF tax should be something of the product or the contact, so we decided to make the product have multiple taxes, just in case, and if only one is needed, then users can just select one; no need to limit to one.
2023-02-08 12:47:36 +00:00
{{ if .Required }}required="required"{{ end }} placeholder="{{ .Label }}"
>{{ .Val }}</textarea>
Add template for InputField of type textarea
2023-02-07 14:28:22 +00:00
{{ else }}
<input type="{{ .Type }}" name="{{ .Name }}" id="{{ .Name }}-field"
{{- range $attribute := .Attributes }} {{$attribute}} {{ end }}
{{ if .Required }}required="required"{{ end }} value="{{ .Val }}" placeholder="{{ .Label }}">
{{ end }}
Validate profile form and use templates for fields Let’s start first with a non-fancy validation method with just if conditionals instead of bringing yet another complicated library. I hope i do not regret it. I wanted to move all the input field to a template because all that gobbledygook with the .input div and repeating the label in the placeholder was starting to annoy me. Now with error messages was even more concerning. I did not know whether the label should be a part of the input fields or something that the template should do. At the end i decided that it makes more sense to be part of the input field because in the error messages i use that same label, thus the template does not have a say in that, and, besides, it was just easier to write the template. The same with the error messages: i’ve seen frameworks that have a map with the field’s id/name to the error slice, but then it would be a bit harder to write the template. I added AddError functions instead of just using append inside the validator function, and have a local variable for whether it all went OK, because i was worried that i would leave out the `ok = false` in some conditions. I had started writing “constructors” functions for InputField and SelectField, but then had to add other methods to change the required field and who knows what else, and in the end it was easier to just construct the field inline.
2023-01-31 14:40:12 +00:00
<label for="{{ .Name }}-field">{{ .Label }}</label>
Use a “proper” struct for the login form Similar to the profile form, the login form now parses and validates itself, with the InputField structs that the templates expect. I realized that i was doing more work than necessary when parsing fields fro the profile form because i was repeating the operation and the field name, so now it is a function of InputField. This time i needed extra attributes for the login form. I am not sure that the Go source code needs to know about HTML attributes, but it was the easiest way to pass them to the template.
2023-02-01 10:02:32 +00:00
{{- if .Errors }}
Validate profile form and use templates for fields Let’s start first with a non-fancy validation method with just if conditionals instead of bringing yet another complicated library. I hope i do not regret it. I wanted to move all the input field to a template because all that gobbledygook with the .input div and repeating the label in the placeholder was starting to annoy me. Now with error messages was even more concerning. I did not know whether the label should be a part of the input fields or something that the template should do. At the end i decided that it makes more sense to be part of the input field because in the error messages i use that same label, thus the template does not have a say in that, and, besides, it was just easier to write the template. The same with the error messages: i’ve seen frameworks that have a map with the field’s id/name to the error slice, but then it would be a bit harder to write the template. I added AddError functions instead of just using append inside the validator function, and have a local variable for whether it all went OK, because i was worried that i would leave out the `ok = false` in some conditions. I had started writing “constructors” functions for InputField and SelectField, but then had to add other methods to change the required field and who knows what else, and in the end it was easier to just construct the field inline.
2023-01-31 14:40:12 +00:00
<ul>
{{- range $error := .Errors }}
<li>{{ . }}</li>
{{- end }}
</ul>
Use a “proper” struct for the login form Similar to the profile form, the login form now parses and validates itself, with the InputField structs that the templates expect. I realized that i was doing more work than necessary when parsing fields fro the profile form because i was repeating the operation and the field name, so now it is a function of InputField. This time i needed extra attributes for the login form. I am not sure that the Go source code needs to know about HTML attributes, but it was the easiest way to pass them to the template.
2023-02-01 10:02:32 +00:00
{{- end }}
Validate profile form and use templates for fields Let’s start first with a non-fancy validation method with just if conditionals instead of bringing yet another complicated library. I hope i do not regret it. I wanted to move all the input field to a template because all that gobbledygook with the .input div and repeating the label in the placeholder was starting to annoy me. Now with error messages was even more concerning. I did not know whether the label should be a part of the input fields or something that the template should do. At the end i decided that it makes more sense to be part of the input field because in the error messages i use that same label, thus the template does not have a say in that, and, besides, it was just easier to write the template. The same with the error messages: i’ve seen frameworks that have a map with the field’s id/name to the error slice, but then it would be a bit harder to write the template. I added AddError functions instead of just using append inside the validator function, and have a local variable for whether it all went OK, because i was worried that i would leave out the `ok = false` in some conditions. I had started writing “constructors” functions for InputField and SelectField, but then had to add other methods to change the required field and who knows what else, and in the end it was easier to just construct the field inline.
2023-01-31 14:40:12 +00:00
</div>
{{- end }}
Add the form to add products to an invoice and create invoices too Still missing: the invoice number, that requires more tables and possibly a PL/pgSQL function to do it properly.
2023-02-12 20:06:48 +00:00
{{ 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 }}
Validate profile form and use templates for fields Let’s start first with a non-fancy validation method with just if conditionals instead of bringing yet another complicated library. I hope i do not regret it. I wanted to move all the input field to a template because all that gobbledygook with the .input div and repeating the label in the placeholder was starting to annoy me. Now with error messages was even more concerning. I did not know whether the label should be a part of the input fields or something that the template should do. At the end i decided that it makes more sense to be part of the input field because in the error messages i use that same label, thus the template does not have a say in that, and, besides, it was just easier to write the template. The same with the error messages: i’ve seen frameworks that have a map with the field’s id/name to the error slice, but then it would be a bit harder to write the template. I added AddError functions instead of just using append inside the validator function, and have a local variable for whether it all went OK, because i was worried that i would leave out the `ok = false` in some conditions. I had started writing “constructors” functions for InputField and SelectField, but then had to add other methods to change the required field and who knows what else, and in the end it was easier to just construct the field inline.
2023-01-31 14:40:12 +00:00
{{ define "select-field" -}}
Add the form to add products to an invoice and create invoices too Still missing: the invoice number, that requires more tables and possibly a PL/pgSQL function to do it properly.
2023-02-12 20:06:48 +00:00
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.SelectField*/ -}}
Move the multiselect “component” to the select-field template I had in the product edit page only because it was easier to test there while i was developing it, but it is something that should be done for all select[multiple], of course. I removed the whole x-cloak thing because i am not sure what would happen if i do something wrong and Alpine can not initialize the multiselect; probably show nothing to the user. Now it shows the native select a fraction of a second, but if i fuck it up at least the user can still use the app.
2023-03-15 10:44:18 +00:00
<div class="input{{ if .Errors }} has-errors{{ end }}"
{{- if .Multiple }}
Improve multiselect’s usability with keyboard handling Had to replace the tags <ul> with a div with an input, so that the browser can focus the keywoard there. For now i do not have a focus-within CSS rule because we do no yet have a style for focus highlight. I have replaced the template for-loop to fill the options with the JavaScript equivalent for two reasons. The first is that GoLand is very stupid and can not handle that templating code inside the JavaScript function and complains of non-existing problemes all the time. The second is that, taking advantage of the input, i now have filtering of options and have to remove accents from the label and convert it to lowercase into a separate property just for that. I could do that with a Go function, but it is something that i also have to do for the input’s value when it changes, therefore i am forced to use JavaScript and, if i am already using it for one string, it makes no sense to have duplicate functionality in Go code. The control still has missing aria attributes, and the list of options is not yet navigable with the keyboard.
2023-03-16 11:52:44 +00:00
@focusin.window="! $el.contains($event.target) && close() "
@click.away="close()"
Move the multiselect “component” to the select-field template I had in the product edit page only because it was easier to test there while i was developing it, but it is something that should be done for all select[multiple], of course. I removed the whole x-cloak thing because i am not sure what would happen if i do something wrong and Alpine can not initialize the multiselect; probably show nothing to the user. Now it shows the native select a fraction of a second, but if i fuck it up at least the user can still use the app.
2023-03-15 10:44:18 +00:00
x-data="{
Improve multiselect’s usability with keyboard handling Had to replace the tags <ul> with a div with an input, so that the browser can focus the keywoard there. For now i do not have a focus-within CSS rule because we do no yet have a style for focus highlight. I have replaced the template for-loop to fill the options with the JavaScript equivalent for two reasons. The first is that GoLand is very stupid and can not handle that templating code inside the JavaScript function and complains of non-existing problemes all the time. The second is that, taking advantage of the input, i now have filtering of options and have to remove accents from the label and convert it to lowercase into a separate property just for that. I could do that with a Go function, but it is something that i also have to do for the input’s value when it changes, therefore i am forced to use JavaScript and, if i am already using it for one string, it makes no sense to have duplicate functionality in Go code. The control still has missing aria attributes, and the list of options is not yet navigable with the keyboard.
2023-03-16 11:52:44 +00:00
options: [],
name: '',
filter: '',
Move the multiselect “component” to the select-field template I had in the product edit page only because it was easier to test there while i was developing it, but it is something that should be done for all select[multiple], of course. I removed the whole x-cloak thing because i am not sure what would happen if i do something wrong and Alpine can not initialize the multiselect; probably show nothing to the user. Now it shows the native select a fraction of a second, but if i fuck it up at least the user can still use the app.
2023-03-15 10:44:18 +00:00
open: false,
init() {
Improve multiselect’s usability with keyboard handling Had to replace the tags <ul> with a div with an input, so that the browser can focus the keywoard there. For now i do not have a focus-within CSS rule because we do no yet have a style for focus highlight. I have replaced the template for-loop to fill the options with the JavaScript equivalent for two reasons. The first is that GoLand is very stupid and can not handle that templating code inside the JavaScript function and complains of non-existing problemes all the time. The second is that, taking advantage of the input, i now have filtering of options and have to remove accents from the label and convert it to lowercase into a separate property just for that. I could do that with a Go function, but it is something that i also have to do for the input’s value when it changes, therefore i am forced to use JavaScript and, if i am already using it for one string, it makes no sense to have duplicate functionality in Go code. The control still has missing aria attributes, and the list of options is not yet navigable with the keyboard.
2023-03-16 11:52:44 +00:00
const select = $el.querySelector('select');
this.name = select.name;
for (const option of select.options) {
this.options.push({
value: option.value,
label: option.innerText,
search: this.normalize(option.innerText),
selected: option.getAttribute('selected') !== null,
});
}
select.remove();
const template = $el.querySelector('template');
const input = template.content.querySelector('input');
const label = $el.querySelector('label');
input.after(label);
},
selected() {
return this.options.filter(option => option.selected);
},
normalize(s) {
return s.normalize('NFD').replace(/\p{Diacritic}/gu, '').toLowerCase();
},
unselected() {
const filter = this.normalize(this.filter);
return this.options.filter(option => !option.selected && (filter === '' || option.search.includes(filter)));
},
empty() {
return this.selected().length === 0;
},
selectOption(option) {
option.selected = true;
this.filter = '';
},
selectFirst() {
if (!this.open) {
return;
}
const all = this.unselected();
if (all.length === 0) {
return;
}
this.selectOption(all[0]);
},
unselectLast() {
if (this.filter !== '') {
return;
}
const all = this.selected();
if (all.length === 0) {
return;
}
all[all.length - 1].selected = false;
},
toggle() {
if (this.open) {
return this.close();
}
this.open = true;
},
close() {
this.open = false;
Move the multiselect “component” to the select-field template I had in the product edit page only because it was easier to test there while i was developing it, but it is something that should be done for all select[multiple], of course. I removed the whole x-cloak thing because i am not sure what would happen if i do something wrong and Alpine can not initialize the multiselect; probably show nothing to the user. Now it shows the native select a fraction of a second, but if i fuck it up at least the user can still use the app.
2023-03-15 10:44:18 +00:00
},
}"
{{- end -}}
>
Handle tax details and new tax forms with structs and validation I implemented the Valuer and Scanner interfaces to InputField and SelectField for better passing values between the database and Go. I had a conflict with the Value name and renamed the struct member to Val. I also had to change the attributes array to be of type template.HTMLAttr or html/template would replace `form="newtax"` attribute to `zgotmplz="newtax"` because it deems it “unsafe”. I do not like having to use template.HTMLAttr when assigning values, but i do not know what else i can do now.
2023-02-01 13:15:02 +00:00
<select id="{{ .Name }}-field" name="{{ .Name }}"
Allow optional select with empty label This is not yet necessary, but the empty label is because i do not want to select a default tax for products—at least, not without a setting for it. Since i need to add the required attribute now to select, because otherwise the browser would allow sending that empty value, i did not want to do it unconditionally, just in case.
2023-02-05 13:06:33 +00:00
{{- range $attribute := .Attributes }} {{$attribute}} {{ end -}}
Add grouping for form’s select field We will only allow to select a tax from each of the tax classes, but the user needs to know what class each tax belongs to, and grouping the taxes by class in the select helps with that.
2023-03-01 10:40:23 +00:00
{{ if .Multiple }} multiple="multiple"{{ end -}}
{{ if .Required }} required="required"{{ end -}}
Handle tax details and new tax forms with structs and validation I implemented the Valuer and Scanner interfaces to InputField and SelectField for better passing values between the database and Go. I had a conflict with the Value name and renamed the struct member to Val. I also had to change the attributes array to be of type template.HTMLAttr or html/template would replace `form="newtax"` attribute to `zgotmplz="newtax"` because it deems it “unsafe”. I do not like having to use template.HTMLAttr when assigning values, but i do not know what else i can do now.
2023-02-01 13:15:02 +00:00
>
Allow optional select with empty label This is not yet necessary, but the empty label is because i do not want to select a default tax for products—at least, not without a setting for it. Since i need to add the required attribute now to select, because otherwise the browser would allow sending that empty value, i did not want to do it unconditionally, just in case.
2023-02-05 13:06:33 +00:00
{{- with .EmptyLabel }}
<option value="">{{ . }}</option>
{{- end}}
Add grouping for form’s select field We will only allow to select a tax from each of the tax classes, but the user needs to know what class each tax belongs to, and grouping the taxes by class in the select helps with that.
2023-03-01 10:40:23 +00:00
{{- $withinGroup := "" -}}
Allow optional select with empty label This is not yet necessary, but the empty label is because i do not want to select a default tax for products—at least, not without a setting for it. Since i need to add the required attribute now to select, because otherwise the browser would allow sending that empty value, i did not want to do it unconditionally, just in case.
2023-02-05 13:06:33 +00:00
{{- range $option := .Options }}
Add grouping for form’s select field We will only allow to select a tax from each of the tax classes, but the user needs to know what class each tax belongs to, and grouping the taxes by class in the select helps with that.
2023-03-01 10:40:23 +00:00
{{- if ne .Group $withinGroup }}
{{- if ne $withinGroup "" }}
</optgroup>
{{ end }}
<optgroup label="{{ .Group }}">
{{- $withinGroup = .Group -}}
{{ end }}
Allow optional select with empty label This is not yet necessary, but the empty label is because i do not want to select a default tax for products—at least, not without a setting for it. Since i need to add the required attribute now to select, because otherwise the browser would allow sending that empty value, i did not want to do it unconditionally, just in case.
2023-02-05 13:06:33 +00:00
<option value="{{ .Value }}"
Allow multiple taxes, and even not tax, for products It seems that we do not agree en whether the IRPF tax should be something of the product or the contact, so we decided to make the product have multiple taxes, just in case, and if only one is needed, then users can just select one; no need to limit to one.
2023-02-08 12:47:36 +00:00
{{- if $.IsSelected .Value }} selected="selected"{{ end }}>{{ .Label }}</option>
Add grouping for form’s select field We will only allow to select a tax from each of the tax classes, but the user needs to know what class each tax belongs to, and grouping the taxes by class in the select helps with that.
2023-03-01 10:40:23 +00:00
{{- end }}
{{- if ne $withinGroup "" }}
</optgroup>
Allow optional select with empty label This is not yet necessary, but the empty label is because i do not want to select a default tax for products—at least, not without a setting for it. Since i need to add the required attribute now to select, because otherwise the browser would allow sending that empty value, i did not want to do it unconditionally, just in case.
2023-02-05 13:06:33 +00:00
{{- end }}
Validate profile form and use templates for fields Let’s start first with a non-fancy validation method with just if conditionals instead of bringing yet another complicated library. I hope i do not regret it. I wanted to move all the input field to a template because all that gobbledygook with the .input div and repeating the label in the placeholder was starting to annoy me. Now with error messages was even more concerning. I did not know whether the label should be a part of the input fields or something that the template should do. At the end i decided that it makes more sense to be part of the input field because in the error messages i use that same label, thus the template does not have a say in that, and, besides, it was just easier to write the template. The same with the error messages: i’ve seen frameworks that have a map with the field’s id/name to the error slice, but then it would be a bit harder to write the template. I added AddError functions instead of just using append inside the validator function, and have a local variable for whether it all went OK, because i was worried that i would leave out the `ok = false` in some conditions. I had started writing “constructors” functions for InputField and SelectField, but then had to add other methods to change the required field and who knows what else, and in the end it was easier to just construct the field inline.
2023-01-31 14:40:12 +00:00
</select>
Move the multiselect “component” to the select-field template I had in the product edit page only because it was easier to test there while i was developing it, but it is something that should be done for all select[multiple], of course. I removed the whole x-cloak thing because i am not sure what would happen if i do something wrong and Alpine can not initialize the multiselect; probably show nothing to the user. Now it shows the native select a fraction of a second, but if i fuck it up at least the user can still use the app.
2023-03-15 10:44:18 +00:00
{{- if .Multiple }}
<template x-if="true">
<div class="multiselect">
Improve multiselect’s usability with keyboard handling Had to replace the tags <ul> with a div with an input, so that the browser can focus the keywoard there. For now i do not have a focus-within CSS rule because we do no yet have a style for focus highlight. I have replaced the template for-loop to fill the options with the JavaScript equivalent for two reasons. The first is that GoLand is very stupid and can not handle that templating code inside the JavaScript function and complains of non-existing problemes all the time. The second is that, taking advantage of the input, i now have filtering of options and have to remove accents from the label and convert it to lowercase into a separate property just for that. I could do that with a Go function, but it is something that i also have to do for the input’s value when it changes, therefore i am forced to use JavaScript and, if i am already using it for one string, it makes no sense to have duplicate functionality in Go code. The control still has missing aria attributes, and the list of options is not yet navigable with the keyboard.
2023-03-16 11:52:44 +00:00
<div class="tags" :class="{'empty': empty()}"
@click="toggle()"
>
<template x-for="option in selected()">
<div class="tag">
<input type="hidden" :name="name" :value="option.value">
Move the multiselect “component” to the select-field template I had in the product edit page only because it was easier to test there while i was developing it, but it is something that should be done for all select[multiple], of course. I removed the whole x-cloak thing because i am not sure what would happen if i do something wrong and Alpine can not initialize the multiselect; probably show nothing to the user. Now it shows the native select a fraction of a second, but if i fuck it up at least the user can still use the app.
2023-03-15 10:44:18 +00:00
<span x-text="option.label"></span>
<button type="button" @click.stop="option.selected = false">×</button>
Improve multiselect’s usability with keyboard handling Had to replace the tags <ul> with a div with an input, so that the browser can focus the keywoard there. For now i do not have a focus-within CSS rule because we do no yet have a style for focus highlight. I have replaced the template for-loop to fill the options with the JavaScript equivalent for two reasons. The first is that GoLand is very stupid and can not handle that templating code inside the JavaScript function and complains of non-existing problemes all the time. The second is that, taking advantage of the input, i now have filtering of options and have to remove accents from the label and convert it to lowercase into a separate property just for that. I could do that with a Go function, but it is something that i also have to do for the input’s value when it changes, therefore i am forced to use JavaScript and, if i am already using it for one string, it makes no sense to have duplicate functionality in Go code. The control still has missing aria attributes, and the list of options is not yet navigable with the keyboard.
2023-03-16 11:52:44 +00:00
</div>
Move the multiselect “component” to the select-field template I had in the product edit page only because it was easier to test there while i was developing it, but it is something that should be done for all select[multiple], of course. I removed the whole x-cloak thing because i am not sure what would happen if i do something wrong and Alpine can not initialize the multiselect; probably show nothing to the user. Now it shows the native select a fraction of a second, but if i fuck it up at least the user can still use the app.
2023-03-15 10:44:18 +00:00
</template>
Improve multiselect’s usability with keyboard handling Had to replace the tags <ul> with a div with an input, so that the browser can focus the keywoard there. For now i do not have a focus-within CSS rule because we do no yet have a style for focus highlight. I have replaced the template for-loop to fill the options with the JavaScript equivalent for two reasons. The first is that GoLand is very stupid and can not handle that templating code inside the JavaScript function and complains of non-existing problemes all the time. The second is that, taking advantage of the input, i now have filtering of options and have to remove accents from the label and convert it to lowercase into a separate property just for that. I could do that with a Go function, but it is something that i also have to do for the input’s value when it changes, therefore i am forced to use JavaScript and, if i am already using it for one string, it makes no sense to have duplicate functionality in Go code. The control still has missing aria attributes, and the list of options is not yet navigable with the keyboard.
2023-03-16 11:52:44 +00:00
<input id="{{ .Name }}-field" :placeholder="empty() && '{{ .Label }}'" x-model="filter"
@input="open = true"
@keydown.escape="close()"
@keydown.prevent.enter="selectFirst()"
@keydown.backspace="unselectLast()"
>
</div>
Move the multiselect “component” to the select-field template I had in the product edit page only because it was easier to test there while i was developing it, but it is something that should be done for all select[multiple], of course. I removed the whole x-cloak thing because i am not sure what would happen if i do something wrong and Alpine can not initialize the multiselect; probably show nothing to the user. Now it shows the native select a fraction of a second, but if i fuck it up at least the user can still use the app.
2023-03-15 10:44:18 +00:00
<ul class="options" x-show.transition="open">
Improve multiselect’s usability with keyboard handling Had to replace the tags <ul> with a div with an input, so that the browser can focus the keywoard there. For now i do not have a focus-within CSS rule because we do no yet have a style for focus highlight. I have replaced the template for-loop to fill the options with the JavaScript equivalent for two reasons. The first is that GoLand is very stupid and can not handle that templating code inside the JavaScript function and complains of non-existing problemes all the time. The second is that, taking advantage of the input, i now have filtering of options and have to remove accents from the label and convert it to lowercase into a separate property just for that. I could do that with a Go function, but it is something that i also have to do for the input’s value when it changes, therefore i am forced to use JavaScript and, if i am already using it for one string, it makes no sense to have duplicate functionality in Go code. The control still has missing aria attributes, and the list of options is not yet navigable with the keyboard.
2023-03-16 11:52:44 +00:00
<template x-for="option in unselected()">
Move the multiselect “component” to the select-field template I had in the product edit page only because it was easier to test there while i was developing it, but it is something that should be done for all select[multiple], of course. I removed the whole x-cloak thing because i am not sure what would happen if i do something wrong and Alpine can not initialize the multiselect; probably show nothing to the user. Now it shows the native select a fraction of a second, but if i fuck it up at least the user can still use the app.
2023-03-15 10:44:18 +00:00
<li
x-text="option.label"
Improve multiselect’s usability with keyboard handling Had to replace the tags <ul> with a div with an input, so that the browser can focus the keywoard there. For now i do not have a focus-within CSS rule because we do no yet have a style for focus highlight. I have replaced the template for-loop to fill the options with the JavaScript equivalent for two reasons. The first is that GoLand is very stupid and can not handle that templating code inside the JavaScript function and complains of non-existing problemes all the time. The second is that, taking advantage of the input, i now have filtering of options and have to remove accents from the label and convert it to lowercase into a separate property just for that. I could do that with a Go function, but it is something that i also have to do for the input’s value when it changes, therefore i am forced to use JavaScript and, if i am already using it for one string, it makes no sense to have duplicate functionality in Go code. The control still has missing aria attributes, and the list of options is not yet navigable with the keyboard.
2023-03-16 11:52:44 +00:00
@click.stop="selectOption(option)"
Move the multiselect “component” to the select-field template I had in the product edit page only because it was easier to test there while i was developing it, but it is something that should be done for all select[multiple], of course. I removed the whole x-cloak thing because i am not sure what would happen if i do something wrong and Alpine can not initialize the multiselect; probably show nothing to the user. Now it shows the native select a fraction of a second, but if i fuck it up at least the user can still use the app.
2023-03-15 10:44:18 +00:00
></li>
</template>
</ul>
</div>
</template>
{{ end -}}
Validate profile form and use templates for fields Let’s start first with a non-fancy validation method with just if conditionals instead of bringing yet another complicated library. I hope i do not regret it. I wanted to move all the input field to a template because all that gobbledygook with the .input div and repeating the label in the placeholder was starting to annoy me. Now with error messages was even more concerning. I did not know whether the label should be a part of the input fields or something that the template should do. At the end i decided that it makes more sense to be part of the input field because in the error messages i use that same label, thus the template does not have a say in that, and, besides, it was just easier to write the template. The same with the error messages: i’ve seen frameworks that have a map with the field’s id/name to the error slice, but then it would be a bit harder to write the template. I added AddError functions instead of just using append inside the validator function, and have a local variable for whether it all went OK, because i was worried that i would leave out the `ok = false` in some conditions. I had started writing “constructors” functions for InputField and SelectField, but then had to add other methods to change the required field and who knows what else, and in the end it was easier to just construct the field inline.
2023-01-31 14:40:12 +00:00
<label for="{{ .Name }}-field">{{ .Label }}</label>
Handle tax details and new tax forms with structs and validation I implemented the Valuer and Scanner interfaces to InputField and SelectField for better passing values between the database and Go. I had a conflict with the Value name and renamed the struct member to Val. I also had to change the attributes array to be of type template.HTMLAttr or html/template would replace `form="newtax"` attribute to `zgotmplz="newtax"` because it deems it “unsafe”. I do not like having to use template.HTMLAttr when assigning values, but i do not know what else i can do now.
2023-02-01 13:15:02 +00:00
{{- if .Errors }}
Validate profile form and use templates for fields Let’s start first with a non-fancy validation method with just if conditionals instead of bringing yet another complicated library. I hope i do not regret it. I wanted to move all the input field to a template because all that gobbledygook with the .input div and repeating the label in the placeholder was starting to annoy me. Now with error messages was even more concerning. I did not know whether the label should be a part of the input fields or something that the template should do. At the end i decided that it makes more sense to be part of the input field because in the error messages i use that same label, thus the template does not have a say in that, and, besides, it was just easier to write the template. The same with the error messages: i’ve seen frameworks that have a map with the field’s id/name to the error slice, but then it would be a bit harder to write the template. I added AddError functions instead of just using append inside the validator function, and have a local variable for whether it all went OK, because i was worried that i would leave out the `ok = false` in some conditions. I had started writing “constructors” functions for InputField and SelectField, but then had to add other methods to change the required field and who knows what else, and in the end it was easier to just construct the field inline.
2023-01-31 14:40:12 +00:00
<ul>
{{- range $error := .Errors }}
<li>{{ . }}</li>
{{- end }}
</ul>
Handle tax details and new tax forms with structs and validation I implemented the Valuer and Scanner interfaces to InputField and SelectField for better passing values between the database and Go. I had a conflict with the Value name and renamed the struct member to Val. I also had to change the attributes array to be of type template.HTMLAttr or html/template would replace `form="newtax"` attribute to `zgotmplz="newtax"` because it deems it “unsafe”. I do not like having to use template.HTMLAttr when assigning values, but i do not know what else i can do now.
2023-02-01 13:15:02 +00:00
{{- end }}
Validate profile form and use templates for fields Let’s start first with a non-fancy validation method with just if conditionals instead of bringing yet another complicated library. I hope i do not regret it. I wanted to move all the input field to a template because all that gobbledygook with the .input div and repeating the label in the placeholder was starting to annoy me. Now with error messages was even more concerning. I did not know whether the label should be a part of the input fields or something that the template should do. At the end i decided that it makes more sense to be part of the input field because in the error messages i use that same label, thus the template does not have a say in that, and, besides, it was just easier to write the template. The same with the error messages: i’ve seen frameworks that have a map with the field’s id/name to the error slice, but then it would be a bit harder to write the template. I added AddError functions instead of just using append inside the validator function, and have a local variable for whether it all went OK, because i was worried that i would leave out the `ok = false` in some conditions. I had started writing “constructors” functions for InputField and SelectField, but then had to add other methods to change the required field and who knows what else, and in the end it was easier to just construct the field inline.
2023-01-31 14:40:12 +00:00
</div>
{{- end }}