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

154 lines
7.5 KiB
Plaintext
Raw Normal View History

Add the bare-bones form for invoices
2023-02-11 21:16:48 +00:00
{{ define "title" -}}
{{( pgettext "Invoices" "title" )}}
{{- 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.InvoicesIndexPage*/ -}}
Move data-hx-boost inside the <nav> for quotes and invoices This is because the download button must *not* be boosted, or HTMx would just slap the binary data into the document as is, without downloading it.
2023-07-07 09:16:43 +00:00
<nav data-hx-target="main">
<p data-hx-boost="true">
Add the bare-bones form for invoices
2023-02-11 21:16:48 +00:00
<a href="{{ companyURI "/" }}">{{( pgettext "Home" "title" )}}</a> /
<a>{{( pgettext "Invoices" "title" )}}</a>
</p>
Add button to download many invoices as PDF in a ZIP archive
2023-03-09 11:11:53 +00:00
<form id="batch-form" action="{{ companyURI "/invoices/batch" }}" method="post">
{{ csrfToken }}
<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" }}
Add button to download many invoices as PDF in a ZIP archive
2023-03-09 11:11:53 +00:00
<button type="submit"
name="action" value="download"
>{{( pgettext "Download invoices" "action" )}}</button>
Move data-hx-boost inside the <nav> for quotes and invoices This is because the download button must *not* be boosted, or HTMx would just slap the binary data into the document as is, without downloading it.
2023-07-07 09:16:43 +00:00
<a class="primary button" data-hx-boost="true"
Add button to download many invoices as PDF in a ZIP archive
2023-03-09 11:11:53 +00:00
href="{{ companyURI "/invoices/new" }}">{{( pgettext "New invoice" "action" )}}</a>
</p>
</form>
Add the bare-bones form for invoices
2023-02-11 21:16:48 +00:00
</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 bare-bones form for invoices
2023-02-11 21:16:48 +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 the bare-bones form for invoices
2023-02-11 21:16:48 +00:00
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.InvoicesIndexPage*/ -}}
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 "/invoices"}}"
data-hx-target="main" data-hx-boost="true" data-hx-trigger="change,search,submit"
aria-labelledby="filters-toggle"
>
{{ with .Filters }}
{{ template "select-field" .Customer }}
{{ template "select-field" .InvoiceStatus }}
{{ template "input-field" .FromDate }}
{{ template "input-field" .ToDate }}
{{ template "input-field" .InvoiceNumber }}
{{ template "tags-field" .Tags | addTagsAttr (print `data-conditions="` .TagsCondition.Name `-field"`) }}
{{ template "toggle-field" .TagsCondition }}
{{ end }}
<noscript>
<button type="submit">{{( pgettext "Filter" "action" )}}</button>
</noscript>
</form>
Improve the CSS and general design
2023-05-23 21:13:21 +00:00
<table id="invoice-list">
Add the bare-bones form for invoices
2023-02-11 21:16:48 +00:00
<thead>
<tr>
<th>{{( pgettext "All" "invoice" )}}</th>
<th>{{( pgettext "Date" "title" )}}</th>
<th>{{( pgettext "Invoice Num." "title" )}}</th>
<th>{{( pgettext "Customer" "title" )}}</th>
<th>{{( pgettext "Status" "title" )}}</th>
Add invoice tags I followed the same restrictions as Gitea’s topics, arbitrarily, because if it is enough for repositories it should be for invoices too, apparently.
2023-03-10 13:02:55 +00:00
<th>{{( pgettext "Tags" "title" )}}</th>
Add views to compute taxes and total amount of invoices They are not functions because i need to join them with the main invoice relation, and although possible is a bit more awkward with functions. The taxes have their own relation because i will need them grouped by their name in the PDF, so it will probably be a select for that relation.
2023-02-22 13:39:38 +00:00
<th>{{( pgettext "Amount" "title" )}}</th>
Add the bare-bones form for invoices
2023-02-11 21:16:48 +00:00
<th>{{( pgettext "Download" "title" )}}</th>
Add the context menu with the duplicate option As per the design document.
2023-03-08 10:54:06 +00:00
<th>{{( pgettext "Actions" "title" )}}</th>
Add the bare-bones form for invoices
2023-02-11 21:16:48 +00:00
</tr>
</thead>
<tbody>
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
{{ with .Invoices }}
{{- range $invoice := . }}
<tr>
Add button to download many invoices as PDF in a ZIP archive
2023-03-09 11:11:53 +00:00
{{ $title := .Number | printf (pgettext "Select invoice %v" "action") }}
<td><input type="checkbox" form="batch-form"
name="invoice" value="{{ .Slug }}"
aria-label="{{ $title }}"
title="{{ $title }}"/></td>
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
<td>{{ .Date|formatDate }}</td>
Add filters form for invoices Instead of using links in the invoice tags, that we will replace with a “click-to-edit field”, with Oriol agreed to add a form with filters that includes not only the tags but also dates, customer, status, and the invoice number. This means i now need dynamic SQL, and i do not think this belongs to the database (i.e., no PL/pgSQL function for that). I have looked at query builder libraries for Golang, and did not find anything that suited me: either they wanted to manage not only the SQL query but also all structs, or they managed to confuse Goland’s SQL analyzer. For now, at least, i am using a very simple approach with arrays, that still confuses Goland’s analyzer, but just in a very specific part, which i find tolerable—not that their analyzer is that great to begin with, but that’s a story for another day.
2023-03-29 14:16:31 +00:00
<td><a href="{{ companyURI "/invoices/"}}{{ .Slug }}" data-hx-target="main"
data-hx-boost="true">{{ .Number }}</a></td>
Remove the link to edit contact from the invoice table We agreed with Oriol that this link would only serve to confuse people. I initially added the link because i thought it was a shame to have to navigate to the contact section to look or change the info of a customer that you have an invoice for in front of you. However, it makes little sense to be able to edit the contact from both sections, and we do not have a “view page” for contacts to link to, thus the removal.
2023-03-28 07:50:19 +00:00
<td>{{ .CustomerName }}</td>
Add the “menu” to change invoice statuses
2023-03-07 10:52:09 +00:00
<td>
<details class="invoice-status menu">
<summary class="invoice-status-{{ .Status }}">{{ .StatusLabel }}</summary>
Put new invoice and edit invoice forms into a dialog In this case i have to use the same id for the dialog content in all pages because, for now, there are a couple of forms that need to replace it on submit—the new/edit form and the product selection form. Unfortunately, HTMx does not have support for `formaction` attribute at this point, so i had to use the workaround described in [0]. [0] https://github.com/bigskysoftware/htmx/issues/623
2023-03-31 11:01:26 +00:00
<form action="{{companyURI "/invoices/"}}{{ .Slug }}" method="POST" data-hx-boost="true">
Add the “menu” to change invoice statuses
2023-03-07 10:52:09 +00:00
{{ csrfToken }}
{{ putMethod }}
Add the edit form for invoices I had to change the way /invoices/new and /invoices/batch are handled, because httprouter was not happy with the new POST /invoices/:slug/edit route, claiming that /invoices/:slug conflicts with the previously existing routes. I also could not make it work with the PATCH method, even though i correctly added the patchMethod override function, therefore editing invoices is also weird because i have to take into account the “quick” invoice status change. I use the same form for both new and edit invoices, because the only changes are that we can not edit the invoice date and number, by Oriol’s design, but must be able to change the status; very similar forms.
2023-03-13 14:00:35 +00:00
<input type="hidden" name="quick" value="status">
Add the “menu” to change invoice statuses
2023-03-07 10:52:09 +00:00
<ul role="menu">
{{- range $status, $name := $.InvoiceStatuses }}
{{- if ne $status $invoice.Status }}
Add the context menu with the duplicate option As per the design document.
2023-03-08 10:54:06 +00:00
<li role="presentation">
<button role="menuitem" type="submit"
Add the edit form for invoices I had to change the way /invoices/new and /invoices/batch are handled, because httprouter was not happy with the new POST /invoices/:slug/edit route, claiming that /invoices/:slug conflicts with the previously existing routes. I also could not make it work with the PATCH method, even though i correctly added the patchMethod override function, therefore editing invoices is also weird because i have to take into account the “quick” invoice status change. I use the same form for both new and edit invoices, because the only changes are that we can not edit the invoice date and number, by Oriol’s design, but must be able to change the status; very similar forms.
2023-03-13 14:00:35 +00:00
name="invoice_status" value="{{ $status }}"
Add the context menu with the duplicate option As per the design document.
2023-03-08 10:54:06 +00:00
class="invoice-status-{{ $status }}"
>{{ $name }}</button>
Add the “menu” to change invoice statuses
2023-03-07 10:52:09 +00:00
</li>
{{- end }}
{{- end }}
</ul>
</form>
</details>
</td>
Allow editing invoice tags inline from the index table I use the same pattern as HTMx’s “Click to Edit” example[0], except that my edit form is triggered by submit and by focus out of the tags input. I could not, however, use the standard focus out event because it would also trigger when removing a tag with the mouse, as for a moment the remove button has the focus and the search input dispatches a bubbling focusout. I had to resort to a custom event for that, but i am not happy with it. The autofocus attribute seems to do nothing in this case, so i need to manually change the focus to the new input with JavaScript. However, this means that i can not use the same input ID for all the forms because getElementById would always return the first in document order, changing the focus to that same element and automatically submit the form due to focus out. That’s why in this form i append the invoice’s slug to the input’s ID. Finally, this is the first time i am using an HTMx-only solution and i needed a way to return back just the HTML for the <td>, without <title>, breadcrumbs, or <dialog>. In principle, the template would be the “layout”, but then i would need to modify everything to check whether the template file is empty, or something to that effect, so instead i created a “standalone” template for these cases. [0]: https://htmx.org/examples/click-to-edit/
2023-04-11 08:46:27 +00:00
<td data-hx-get="{{companyURI "/invoices/"}}{{ .Slug }}/tags/edit"
data-hx-target="this"
data-hx-swap="outerHTML"
>
Add invoice tags I followed the same restrictions as Gitea’s topics, arbitrarily, because if it is enough for repositories it should be for invoices too, apparently.
2023-03-10 13:02:55 +00:00
{{- range $index, $tag := .Tags }}
{{- if gt $index 0 }}, {{ end -}}
Add filters form for invoices Instead of using links in the invoice tags, that we will replace with a “click-to-edit field”, with Oriol agreed to add a form with filters that includes not only the tags but also dates, customer, status, and the invoice number. This means i now need dynamic SQL, and i do not think this belongs to the database (i.e., no PL/pgSQL function for that). I have looked at query builder libraries for Golang, and did not find anything that suited me: either they wanted to manage not only the SQL query but also all structs, or they managed to confuse Goland’s SQL analyzer. For now, at least, i am using a very simple approach with arrays, that still confuses Goland’s analyzer, but just in a very specific part, which i find tolerable—not that their analyzer is that great to begin with, but that’s a story for another day.
2023-03-29 14:16:31 +00:00
{{ . }}
Add invoice tags I followed the same restrictions as Gitea’s topics, arbitrarily, because if it is enough for repositories it should be for invoices too, apparently.
2023-03-10 13:02:55 +00:00
{{- end }}
</td>
Add views to compute taxes and total amount of invoices They are not functions because i need to join them with the main invoice relation, and although possible is a bit more awkward with functions. The taxes have their own relation because i will need them grouped by their name in the PDF, so it will probably be a select for that relation.
2023-02-22 13:39:38 +00:00
<td class="numeric">{{ .Total|formatPrice }}</td>
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
{{- $title = .Number | printf (pgettext "Download invoice %s" "action") -}}
Add the “menu” to change invoice statuses
2023-03-07 10:52:09 +00:00
<td class="invoice-download"><a href="{{ companyURI "/invoices/"}}{{ .Slug }}.pdf"
download="{{ .Number}}.pdf"
title="{{( pgettext "Download invoice" "action" )}}"
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
aria-label="{{ $title }}"><i
Convert invoices to PDF with WeasyPrint Although it is possible to just print the invoice from the browser, many people will not even try an assume that they can not create a PDF for the invoice. I thought of using Groff or TeX to create the PDF, but it would mean maintaining two templates in two different systems (HTML and whatever i would use), and would probably look very different, because i do not know Groff or TeX that well. I wish there was a way to tell the browser to print to PDF, and it can be done, but only with the Chrome Protocol to a server-side running Chrome instance. This works, but i would need a Chrome running as a daemon. I also wrote a Qt application that uses QWebEngine to print the PDF, much like wkhtmltopdf, but with support for more recent HTML and CSS standards. Unfortunately, Qt 6.4’s embedded Chromium does not follow break-page-inside as well as WeasyPrint does. To use WeasyPrint, at first i wanted to reach the same URL as the user, passing the cookie to WeasyPrint so that i can access the same invoice as the user, something that can be done with wkhtmltopdf, but WeasyPrint does not have such option. I did it with a custom Python script, but then i need to package and install that script, that is not that much work, but using the Debian-provided script is even less work, and less likely to drift when WeasyPrint changes API. Also, it is unnecessary to do a network round-trip from Go to Python back to Go, because i can already write the invoice HTML as is to WeasyPrint’s stdin.
2023-02-26 16:26:09 +00:00
class="ri-download-line"></i></a></td>
Add the context menu with the duplicate option As per the design document.
2023-03-08 10:54:06 +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
{{- $title = .Number | printf (gettext "Actions for invoice %s") -}}
<summary aria-label="{{ $title }}"><i class="ri-more-line"></i></summary>
Add the context menu with the duplicate option As per the design document.
2023-03-08 10:54:06 +00:00
<ul role="menu" class="action-menu">
Add the edit form for invoices I had to change the way /invoices/new and /invoices/batch are handled, because httprouter was not happy with the new POST /invoices/:slug/edit route, claiming that /invoices/:slug conflicts with the previously existing routes. I also could not make it work with the PATCH method, even though i correctly added the patchMethod override function, therefore editing invoices is also weird because i have to take into account the “quick” invoice status change. I use the same form for both new and edit invoices, because the only changes are that we can not edit the invoice date and number, by Oriol’s design, but must be able to change the status; very similar forms.
2023-03-13 14:00:35 +00:00
<li role="presentation">
Put new invoice and edit invoice forms into a dialog In this case i have to use the same id for the dialog content in all pages because, for now, there are a couple of forms that need to replace it on submit—the new/edit form and the product selection form. Unfortunately, HTMx does not have support for `formaction` attribute at this point, so i had to use the workaround described in [0]. [0] https://github.com/bigskysoftware/htmx/issues/623
2023-03-31 11:01:26 +00:00
<a role="menuitem" href="{{ companyURI "/invoices"}}/{{ .Slug }}/edit"
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
data-hx-target="main" data-hx-boost="true"
Put new invoice and edit invoice forms into a dialog In this case i have to use the same id for the dialog content in all pages because, for now, there are a couple of forms that need to replace it on submit—the new/edit form and the product selection form. Unfortunately, HTMx does not have support for `formaction` attribute at this point, so i had to use the workaround described in [0]. [0] https://github.com/bigskysoftware/htmx/issues/623
2023-03-31 11:01:26 +00:00
>
Add the edit form for invoices I had to change the way /invoices/new and /invoices/batch are handled, because httprouter was not happy with the new POST /invoices/:slug/edit route, claiming that /invoices/:slug conflicts with the previously existing routes. I also could not make it work with the PATCH method, even though i correctly added the patchMethod override function, therefore editing invoices is also weird because i have to take into account the “quick” invoice status change. I use the same form for both new and edit invoices, because the only changes are that we can not edit the invoice date and number, by Oriol’s design, but must be able to change the status; very similar forms.
2023-03-13 14:00:35 +00:00
<i class="ri-edit-line"></i>
{{( pgettext "Edit" "action" )}}
</a>
</li>
Add the context menu with the duplicate option As per the design document.
2023-03-08 10:54:06 +00:00
<li role="presentation">
Show the duplicate invoice form in a dialog Had to add a new hidden field to the form to know whether, when the request is HTMx-triggered, to refresh the page, as i do when duplicating from the index, or redirect the client to the new invoice’s view page, but only if i was duplicating from that same page, not the index. Since i now have to target main when redirecting to the view page, so i had to add a location structure with the required json fields and all that, when “refreshing” i actually tell HTMx to open the index page again, which seems faster, now that i am used to boosted links.
2023-04-04 12:39:55 +00:00
<a role="menuitem" href="{{ companyURI "/invoices/new"}}?duplicate={{ .Slug }}"
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
data-hx-target="main" data-hx-boost="true"
Show the duplicate invoice form in a dialog Had to add a new hidden field to the form to know whether, when the request is HTMx-triggered, to refresh the page, as i do when duplicating from the index, or redirect the client to the new invoice’s view page, but only if i was duplicating from that same page, not the index. Since i now have to target main when redirecting to the view page, so i had to add a location structure with the required json fields and all that, when “refreshing” i actually tell HTMx to open the index page again, which seems faster, now that i am used to boosted links.
2023-04-04 12:39:55 +00:00
>
Add the context menu with the duplicate option As per the design document.
2023-03-08 10:54:06 +00:00
<i class="ri-file-copy-line"></i>
{{( pgettext "Duplicate" "action" )}}
</a>
</li>
</ul>
</details>
</td>
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
</tr>
{{- end }}
{{ else }}
<tr>
Fix invoice’s colspan for the empty index table’s row
2023-05-14 16:47:16 +00:00
<td colspan="9">{{( gettext "No invoices added yet." )}}</td>
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
</tr>
{{ end }}
Add the bare-bones form for invoices
2023-02-11 21:16:48 +00:00
</tbody>
Add total amount for quotes, invoices, and expenses tables We have shown the application to a potential user, and they told us that it would be very useful to have a total in the table’s footer, so that they can verify the amount with the bank’s extracts.
2023-06-20 09:33:28 +00:00
{{ if .Invoices }}
<tfoot>
<tr>
<th scope="row" colspan="6">{{( gettext "Total" )}}</th>
<td class="numeric">{{ .TotalAmount|formatPrice }}</td>
<td colspan="2"></td>
</tr>
</tfoot>
{{ end }}
Add the bare-bones form for invoices
2023-02-11 21:16:48 +00:00
</table>
{{- end }}