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

98 lines
4.0 KiB
Plaintext
Raw Normal View History

Move page titles to their respective templates I have been thinking about that, and it does not make that much sense to have the titles in the Go source anymore: most of them are static text that i have to remember to set in the controller each time, and when the time come i have to face a dynamic title i am sure i will manage with only the template capabilities—worst comes worst, i can always define a function. On the other hand, there is no way i can define a template without its title and i know that everytime that template is used, no matter what controller rendered it, it will always have that title.
2023-01-31 12:07:17 +00:00
{{ define "title" -}}
Add breadcrumbs
2023-02-03 12:58:10 +00:00
{{( pgettext "Contacts" "title" )}}
Move page titles to their respective templates I have been thinking about that, and it does not make that much sense to have the titles in the Go source anymore: most of them are static text that i have to remember to set in the controller each time, and when the time come i have to face a dynamic title i am sure i will manage with only the template capabilities—worst comes worst, i can always define a function. On the other hand, there is no way i can define a template without its title and i know that everytime that template is used, no matter what controller rendered it, it will always have that title.
2023-01-31 12:07:17 +00:00
{{- end }}
Show the profile form in a dialog using HTMx Had to split the actual page content and the breadcrumbs because they do not belong in a dialog. However, i had to change all templates to do that.
2023-03-20 12:09:52 +00:00
{{ define "breadcrumbs" -}}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.ContactsIndexPage*/ -}}
Move back most dialogs to regular (but still boosted) pages With Oriol agreed that adding or editing invoices, products, and contacts is not just a “user interruption” but the main flow of the program, and, as such, it is not correct to use dialogs for these. More importantly, it was harder to concentrate, specially with the more involved form of invoices, because of all the “noise” behind the dialog.
2023-04-25 13:28:55 +00:00
<nav data-hx-boost="true" data-hx-target="main">
<p>
Add breadcrumbs
2023-02-03 12:58:10 +00:00
<a href="{{ companyURI "/" }}">{{( pgettext "Home" "title" )}}</a> /
<a>{{( pgettext "Contacts" "title" )}}</a>
</p>
<p>
Toggle filters forms 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.
2023-05-24 10:13:09 +00:00
{{ template "filters-toggle" }}
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
<a class="button"
href="{{ companyURI "/contacts/import" }}">{{( pgettext "Import" "action" )}}</a>
Add breadcrumbs
2023-02-03 12:58:10 +00:00
<a class="primary button"
href="{{ companyURI "/contacts/new" }}">{{( pgettext "New contact" "action" )}}</a>
</p>
</nav>
Show the profile form in a dialog using HTMx Had to split the actual page content and the breadcrumbs because they do not belong in a dialog. However, i had to change all templates to do that.
2023-03-20 12:09:52 +00:00
{{- end }}
Add the contact relation and a rough first form
2023-01-29 14:14:31 +00:00
Show the profile form in a dialog using HTMx Had to split the actual page content and the breadcrumbs because they do not belong in a dialog. However, i had to change all templates to do that.
2023-03-20 12:09:52 +00:00
{{ define "content" }}
Add products section There is still some issues with the price field, because for now it is in cents, but do not have time now to fix that.
2023-02-04 10:32:39 +00:00
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.ContactsIndexPage*/ -}}
Toggle filters forms 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.
2023-05-24 10:13:09 +00:00
<form class="filters" method="GET" action="{{ companyURI "/contacts"}}"
data-hx-target="main"
data-hx-boost="true"
data-hx-trigger="change,search,submit"
aria-labelledby="filters-toggle"
>
Add reset button to filters I want this button, as well as the submit button, to be on a row below the filters’ input, especially for quotes and invoices, that have the most filters and looks weird with the button wedged in. Thus, i added a <fieldset> around all the filters. Closes #69
2023-07-16 18:56:11 +00:00
<fieldset>
{{ with .Filters }}
{{ template "input-field" .Name }}
{{ template "tags-field" .Tags | addTagsAttr (print `data-conditions="` .TagsCondition.Name `-field"`) }}
{{ template "toggle-field" .TagsCondition }}
{{ end }}
</fieldset>
Toggle filters forms 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.
2023-05-24 10:13:09 +00:00
<noscript>
<button type="submit">{{( pgettext "Filter" "action" )}}</button>
</noscript>
Add reset button to filters I want this button, as well as the submit button, to be on a row below the filters’ input, especially for quotes and invoices, that have the most filters and looks weird with the button wedged in. Thus, i added a <fieldset> around all the filters. Closes #69
2023-07-16 18:56:11 +00:00
{{ if .Filters.HasValue }}
<a href="{{ companyURI "/contacts" }}" class="button">{{( pgettext "Reset" "action" )}}</a>
{{ end }}
Toggle filters forms 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.
2023-05-24 10:13:09 +00:00
</form>
Add breadcrumbs
2023-02-03 12:58:10 +00:00
<table>
<thead>
<tr>
Updated contacts’ table heading to read Contact instead of Customer
2023-06-20 09:34:00 +00:00
<th>{{( pgettext "Contact" "title" )}}</th>
Add breadcrumbs
2023-02-03 12:58:10 +00:00
<th>{{( pgettext "Email" "title" )}}</th>
<th>{{( pgettext "Phone" "title" )}}</th>
Add tags for contacts too With Oriol we agreed that contacts should have tags, too, and that the “tag pool”, as it were, should be shared with the one for invoices (and all future tags we might add). I added the contact_tag relation and tag_contact function, just like with invoices, and then realized that the SQL queries that Go had to execute were becoming “complex” enough: i had to get not only the slug, but the contact id to call tag_contact, and all inside a transaction. Therefore, i opted to create the add_contact and edit_contact functions, that mirror those for invoice and products, so now each “major” section has these functions. They also simplified a bit the handling of the VATIN and phone numbers, because it is now encapsuled inside the PL/pgSQL function and Go does not know how to assemble the parts.
2023-03-26 00:32:53 +00:00
<th>{{( pgettext "Tags" "title" )}}</th>
Add the actions menu to products and contacts
2023-05-11 21:32:21 +00:00
<th>{{( pgettext "Actions" "title" )}}</th>
Add breadcrumbs
2023-02-03 12:58:10 +00:00
</tr>
</thead>
Boost contact’s tag links to update <main> with the filtered list
2023-03-27 07:40:24 +00:00
<tbody>
Add breadcrumbs
2023-02-03 12:58:10 +00:00
{{ with .Contacts }}
Add products section There is still some issues with the price field, because for now it is in cents, but do not have time now to fix that.
2023-02-04 10:32:39 +00:00
{{- range $contact := . }}
Add breadcrumbs
2023-02-03 12:58:10 +00:00
<tr>
Wrap filter buttons with <noscript> Since forms are already submitted on change, Oriol does not like the idea of having a useless button around breaking the form grid.
2023-05-23 12:34:46 +00:00
<td><a href="{{ companyURI "/contacts/"}}{{ .Slug }}" data-hx-target="main"
data-hx-boost="true">{{ .Name }}</a></td>
Add breadcrumbs
2023-02-03 12:58:10 +00:00
<td><a href="mailto:{{ .Email }}">{{ .Email }}</a></td>
<td><a href="tel:{{ .Phone }}">{{ .Phone }}</a></td>
Add contact’s inline form for tags
2023-05-12 09:32:39 +00:00
<td
data-hx-get="{{companyURI "/contacts/"}}{{ .Slug }}/tags/edit"
data-hx-target="this"
data-hx-swap="outerHTML"
>
Add tags for contacts too With Oriol we agreed that contacts should have tags, too, and that the “tag pool”, as it were, should be shared with the one for invoices (and all future tags we might add). I added the contact_tag relation and tag_contact function, just like with invoices, and then realized that the SQL queries that Go had to execute were becoming “complex” enough: i had to get not only the slug, but the contact id to call tag_contact, and all inside a transaction. Therefore, i opted to create the add_contact and edit_contact functions, that mirror those for invoice and products, so now each “major” section has these functions. They also simplified a bit the handling of the VATIN and phone numbers, because it is now encapsuled inside the PL/pgSQL function and Go does not know how to assemble the parts.
2023-03-26 00:32:53 +00:00
{{- range $index, $tag := .Tags }}
{{- if gt $index 0 }}, {{ end -}}
Add contact’s inline form for tags
2023-05-12 09:32:39 +00:00
{{ . }}
Add tags for contacts too With Oriol we agreed that contacts should have tags, too, and that the “tag pool”, as it were, should be shared with the one for invoices (and all future tags we might add). I added the contact_tag relation and tag_contact function, just like with invoices, and then realized that the SQL queries that Go had to execute were becoming “complex” enough: i had to get not only the slug, but the contact id to call tag_contact, and all inside a transaction. Therefore, i opted to create the add_contact and edit_contact functions, that mirror those for invoice and products, so now each “major” section has these functions. They also simplified a bit the handling of the VATIN and phone numbers, because it is now encapsuled inside the PL/pgSQL function and Go does not know how to assemble the parts.
2023-03-26 00:32:53 +00:00
{{- end }}
</td>
Add the actions menu to products and contacts
2023-05-11 21:32:21 +00:00
<td class="actions">
<details class="menu">
Add aria-label to <summary> without text content Using Orca or similar accessibility tools, it was not possible to understand what these “menus” were intended for because they had only icons without any alternative text, thus nothing to speak aloud with.
2023-07-06 09:49:36 +00:00
{{- $label := .Name | printf (gettext "Actions for contact %s") -}}
<summary aria-label="{{ $label }}"><i class="ri-more-line"></i></summary>
Add the actions menu to products and contacts
2023-05-11 21:32:21 +00:00
<ul role="menu" class="action-menu">
<li role="presentation">
<a role="menuitem" href="{{ companyURI "/contacts"}}/{{ .Slug }}"
data-hx-target="main" data-hx-boost="true"
>
<i class="ri-edit-line"></i>
{{( pgettext "Edit" "action" )}}
</a>
</li>
</ul>
</details>
</td>
Add breadcrumbs
2023-02-03 12:58:10 +00:00
</tr>
{{- end }}
{{ else }}
<tr>
Remove the “all” columns from products and contacts That column was supposed to have a checkbox for batch operations, but we do not have any operation that would like to perform to many products or contacts at the same time. For now, at least.
2023-05-23 12:21:04 +00:00
<td colspan="5">{{( gettext "No contacts added yet." )}}</td>
Add breadcrumbs
2023-02-03 12:58:10 +00:00
</tr>
{{ end }}
</tbody>
</table>
Add the contact relation and a rough first form
2023-01-29 14:14:31 +00:00
{{- end }}