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

176 lines
8.3 KiB
Plaintext
Raw Permalink Normal View History

Add expenses’ index and add form
2023-05-03 10:46:25 +00:00
{{ define "title" -}}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.expensesIndexPage*/ -}}
{{( pgettext "Expenses" "title" )}}
{{- end }}
{{ define "breadcrumbs" -}}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.expensesIndexPage*/ -}}
Remove almost all data-hx-boost attributes Since 16e80b5ae, <body> no longer has overflow, thus no scroll. As a consequence, htmx no longer is able to scroll up <main> when it changes due to the default, implicit `show:true` applied to the request: is calls <main>’s scrollIntoView, however there is nothing to scroll to. I probably could fix it by changing the target of `show`, or even add a `scroll` directive to all boosted links, but at this point i think it is better no not boost links at all, as they do what i want—show the new page from the top—with less markup, plus the browser now show a loading animation, and it is not that slower, too.
2024-09-07 23:29:30 +00:00
<nav>
<p>
Add expenses’ index and add form
2023-05-03 10:46:25 +00:00
<a href="{{ companyURI "/" }}">{{( pgettext "Home" "title" )}}</a> /
<a>{{( pgettext "Expenses" "title" )}}</a>
</p>
Add option to export the list of quotes, invoices, and expenses to ODS This was requested by a potential user, as they want to be able to do whatever they want to do to these lists with a spreadsheet. In fact, they requested to be able to export to CSV, but, as always, using CSV is a minefield because of Microsoft: since their Excel product is fucking unable to write and read CSV from different locales, even if using the same exact Excel product, i can not also create a CSV file that is guaranteed to work on all locales. If i used the non-standard sep=; thing to tell Excel that it is a fucking stupid application, then proper applications would show that line as a row, which is the correct albeit undesirable behaviour. The solution is to use a spreadsheet file format that does not have this issue. As far as I know, by default Excel is able to read XLSX and ODS files, but i refuse to use the artificially complex, not the actually used in Excel, and lobbied standard that Microsoft somehow convinced ISO to publish, as i am using a different format because of the mess they made, and i do not want to bend over in front of them, so ODS it is. ODS is neither an elegant or good format by any means, but at least i can write them using simple strings, because there is no ODS library in Debian and i am not going to write yet another DEB package for an overengineered package to write a simple table—all i want is to say “here are these n columns, and these m columns; have a good day!”. Part of #51.
2023-07-18 11:29:36 +00:00
<form id="batch-form" action="{{ companyURI "/expenses/batch" }}" method="post">
{{ csrfToken }}
{{ with .Filters }}
{{ template "hidden-select-field" .Contact }}
{{ template "hidden-select-field" .ExpenseStatus }}
{{ template "hidden-field" .FromDate }}
{{ template "hidden-field" .ToDate }}
{{ template "hidden-field" .InvoiceNumber }}
{{ template "hidden-field" .Tags }}
{{ template "hidden-field" .TagsCondition }}
{{ end }}
<p>
{{ template "filters-toggle" }}
<button type="submit"
name="action" value="export"
>{{( pgettext "Export list" "action" )}}</button>
<a class="primary button"
href="{{ companyURI "/expenses/new" }}">{{( pgettext "New expense" "action" )}}</a>
</p>
</form>
Add expenses’ index and add form
2023-05-03 10:46:25 +00:00
</nav>
{{- end }}
{{ define "content" }}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.expensesIndexPage*/ -}}
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 "/expenses"}}"
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 "select-field" .Contact }}
{{ template "select-field" .ExpenseStatus }}
{{ 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 }}
</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 "/expenses" }}" 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 expenses’ index and add form
2023-05-03 10:46:25 +00:00
<table>
<thead>
<tr>
<th>{{( pgettext "Contact" "title" )}}</th>
<th>{{( pgettext "Invoice Date" "title" )}}</th>
<th>{{( pgettext "Invoice Number" "title" )}}</th>
Add expenses statuses We only want two statuses for expense: not yet paid (pending), and paid. Thus, it is a bit different from quotes and invoices, because expenses do not pass throw the “workflow” of created→sent→{pending,paid}. That’s way in this case the status field is already in the new expense form, instead of hidden, and by pending is not equivalent to created but unpaid (i.e., the same status color). With the new select field in the form, the file field no longer can span two columns or it would be alone on the next row. Closes #67.
2023-07-11 13:33:26 +00:00
<th>{{( pgettext "Status" "title" )}}</th>
Moved the link to edit expense from the invoicer’s name to a menu This menu will also have options like delete, and whatever we like to do to expenses, like invoices do.
2023-05-06 09:08:21 +00:00
<th>{{( pgettext "Tags" "title" )}}</th>
Add the base and tax columns to expenses’ index Closes #80
2023-10-02 10:16:50 +00:00
<th class="numeric">{{( pgettext "Amount" "title" )}}</th>
{{ range $class := .TaxClasses -}}
<th class="numeric">{{ . }}</th>
{{ end -}}
<th class="numeric">{{( pgettext "Total" "title" )}}</th>
Swap payments/collections and downloads in invoice/expenses index It makes more sense to have the payment link readily available, given that downloads for expenses are rather uncommon, and, when we implement electronic invoicing, the invoice PDF will be less useful too.
2024-08-26 12:47:22 +00:00
<th>{{( pgettext "Payments" "title" )}}</th>
Moved the link to edit expense from the invoicer’s name to a menu This menu will also have options like delete, and whatever we like to do to expenses, like invoices do.
2023-05-06 09:08:21 +00:00
<th>{{( pgettext "Actions" "title" )}}</th>
Add expenses’ index and add form
2023-05-03 10:46:25 +00:00
</tr>
</thead>
<tbody>
{{ with .Expenses }}
Allow to delete expenses I remove the related taxes and attachments, but keep related payments because i believe it is not likely that deleting a paid expense is what the user wants. If the user wants to do so, she can delete the payments first. Part of #84
2024-09-08 22:08:02 +00:00
{{ $confirm := (gettext "Are you sure you wish to delete this expense?") }}
Add expenses statuses We only want two statuses for expense: not yet paid (pending), and paid. Thus, it is a bit different from quotes and invoices, because expenses do not pass throw the “workflow” of created→sent→{pending,paid}. That’s way in this case the status field is already in the new expense form, instead of hidden, and by pending is not equivalent to created but unpaid (i.e., the same status color). With the new select field in the form, the file field no longer can span two columns or it would be alone on the next row. Closes #67.
2023-07-11 13:33:26 +00:00
{{- range $expense := . }}
Add expenses’ index and add form
2023-05-03 10:46:25 +00:00
<tr>
Moved the link to edit expense from the invoicer’s name to a menu This menu will also have options like delete, and whatever we like to do to expenses, like invoices do.
2023-05-06 09:08:21 +00:00
<td>{{ .InvoicerName }}</td>
Add expenses’ index and add form
2023-05-03 10:46:25 +00:00
<td>{{ .InvoiceDate|formatDate }}</td>
Link from the invoice number in expense index to its edit form If there is no invoice number, then they can use the edit item from the menu, but most expenses do have an invoice, thus this is easier for the most usual case.
2024-08-15 23:44:20 +00:00
<td>
{{- if .InvoiceNumber -}}
<a href="{{ companyURI "/expenses/"}}{{ .Slug }}">{{ .InvoiceNumber }}</a>
{{- end -}}
</td>
Remove the status parameter from add_expense and edit_expense, and forms Users are no longer expected to manually set the status of an expense and, instead, have to add payments to such expense to mark it as partial or paid. That means that the PL/pgSQL functions must not accept a status parameter, the edit and new forms should no longer have a field for the status, and that the expense list should no longer have the “quick edit” for their status. That’s why it no longer should have a pointer cursor, unlike invoice or quote status.
2024-08-13 00:34:21 +00:00
<td class="expense-status-{{ .Status }}">{{ .StatusLabel }}</td>
Add inline tag form for expenses
2023-05-08 10:58:54 +00:00
<td
data-hx-get="{{companyURI "/expenses/"}}{{ .Slug }}/tags/edit"
data-hx-target="this"
data-hx-swap="outerHTML"
>
Add expenses’ index and add form
2023-05-03 10:46:25 +00:00
{{- range $index, $tag := .Tags }}
{{- if gt $index 0 }}, {{ end -}}
{{ . }}
{{- end }}
</td>
<td class="numeric">{{ .Amount | formatPrice }}</td>
Add the base and tax columns to expenses’ index Closes #80
2023-10-02 10:16:50 +00:00
{{ range $class := $.TaxClasses -}}
{{ $tax := index $expense.Taxes $class }}
<td class="numeric">{{ if $tax }}{{ $tax | formatPrice }}{{ end }}</td>
{{- end }}
<td class="numeric">{{ .Total | formatPrice }}</td>
Add expense’s file input to new and edit forms I had to change MethodOverrider to check whether the form is encoded as multipart/form-data or i would not be able to get the method field from forms with files. For now i add the file manually, i.e., outside add_expense and edit_expense PL/pgSQL functions, because it was faster for me, but i will probably add an attach_to_expense function, or something like that, to avoid having the whole ON CONFLICT logic inside Golang—this belongs to the database.
2023-05-14 16:46:16 +00:00
<td class="invoice-download">
Swap payments/collections and downloads in invoice/expenses index It makes more sense to have the payment link readily available, given that downloads for expenses are rather uncommon, and, when we implement electronic invoicing, the invoice PDF will be less useful too.
2024-08-26 12:47:22 +00:00
<a role="menuitem" href="{{ companyURI "/expenses"}}/{{ .Slug }}/payments"
title="{{( gettext "Expense payments" )}}"
aria-label="{{( gettext "Expense payments" )}}"
>
<i class="ri-bank-card-2-line"></i>
</a>
Add expense’s file input to new and edit forms I had to change MethodOverrider to check whether the form is encoded as multipart/form-data or i would not be able to get the method field from forms with files. For now i add the file manually, i.e., outside add_expense and edit_expense PL/pgSQL functions, because it was faster for me, but i will probably add an attach_to_expense function, or something like that, to avoid having the whole ON CONFLICT logic inside Golang—this belongs to the database.
2023-05-14 16:46:16 +00:00
</td>
Moved the link to edit expense from the invoicer’s name to a menu This menu will also have options like delete, and whatever we like to do to expenses, like invoices do.
2023-05-06 09:08: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 := .InvoiceNumber | printf (gettext "Actions for expense %s") -}}
<summary aria-label="{{ $label }}"><i class="ri-more-line"></i></summary>
Remove almost all data-hx-boost attributes Since 16e80b5ae, <body> no longer has overflow, thus no scroll. As a consequence, htmx no longer is able to scroll up <main> when it changes due to the default, implicit `show:true` applied to the request: is calls <main>’s scrollIntoView, however there is nothing to scroll to. I probably could fix it by changing the target of `show`, or even add a `scroll` directive to all boosted links, but at this point i think it is better no not boost links at all, as they do what i want—show the new page from the top—with less markup, plus the browser now show a loading animation, and it is not that slower, too.
2024-09-07 23:29:30 +00:00
<ul role="menu" class="action-menu">
Moved the link to edit expense from the invoicer’s name to a menu This menu will also have options like delete, and whatever we like to do to expenses, like invoices do.
2023-05-06 09:08:21 +00:00
<li role="presentation">
Add a new payments “subsection” for expenses With Oriol we agreed that to add new payments to expenses we should direct users to a separate payments section, much like the general payments but centered around the payments of the given expense. In fact, the only thing i had to do is extract the expense from the URL, and then adjust the base URI to keep things always within the correct section; the rest of the code is shared with the general section.
2024-08-17 03:31:01 +00:00
<a role="menuitem" href="{{ companyURI "/expenses"}}/{{ .Slug }}">
Moved the link to edit expense from the invoicer’s name to a menu This menu will also have options like delete, and whatever we like to do to expenses, like invoices do.
2023-05-06 09:08:21 +00:00
<i class="ri-edit-line"></i>
{{( pgettext "Edit" "action" )}}
</a>
</li>
Swap payments/collections and downloads in invoice/expenses index It makes more sense to have the payment link readily available, given that downloads for expenses are rather uncommon, and, when we implement electronic invoicing, the invoice PDF will be less useful too.
2024-08-26 12:47:22 +00:00
{{ if .OriginalFileName }}
<li role="presentation">
<a role="menuitem"
href="{{ companyURI "/expenses/"}}{{ .Slug }}/download/{{.OriginalFileName}}"
><i class="ri-download-line"></i>
{{ ( pgettext "Download expense attachment" "action" ) }}
</a>
</li>
{{ end }}
Allow to delete expenses I remove the related taxes and attachments, but keep related payments because i believe it is not likely that deleting a paid expense is what the user wants. If the user wants to do so, she can delete the payments first. Part of #84
2024-09-08 22:08:02 +00:00
<li role="presentation">
<form method="POST" action="{{ companyURI "/expenses/"}}{{ .Slug }}"
data-hx-boost="true"
data-hx-target="main"
data-hx-confirm="{{ $confirm }}"
>
{{ csrfToken }}
{{ deleteMethod }}
Add the menuitem role to expense’s delete button
2024-09-09 09:26:28 +00:00
<button class="icon" role="menuitem">
Allow to delete expenses I remove the related taxes and attachments, but keep related payments because i believe it is not likely that deleting a paid expense is what the user wants. If the user wants to do so, she can delete the payments first. Part of #84
2024-09-08 22:08:02 +00:00
<i class="ri-delete-back-2-line"></i>
{{( pgettext "Remove" "action" )}}
</button>
</form>
</li>
Moved the link to edit expense from the invoicer’s name to a menu This menu will also have options like delete, and whatever we like to do to expenses, like invoices do.
2023-05-06 09:08:21 +00:00
</ul>
</details>
</td>
Add expenses’ index and add form
2023-05-03 10:46:25 +00:00
</tr>
{{- end }}
{{ else }}
<tr>
Add the base and tax columns to expenses’ index Closes #80
2023-10-02 10:16:50 +00:00
<td colspan="{{ add 9 (len .TaxClasses) }}">{{( gettext "No expenses added yet." )}}</td>
Add expenses’ index and add form
2023-05-03 10:46:25 +00:00
</tr>
{{ end }}
</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 .Expenses }}
<tfoot>
<tr>
Add the sum of the base and taxes to expenses’ index Expands on #79
2023-10-02 14:36:42 +00:00
<th scope="row" colspan="5">{{( gettext "Total" )}}</th>
<td class="numeric">{{ .SumAmount | formatPrice }}</td>
{{ range $class := $.TaxClasses -}}
{{ $tax := index $.SumTaxes $class }}
<td class="numeric">{{ if $tax }}{{ $tax | formatPrice }}{{ else }}{{ "0.0" | formatPrice }}{{ end }}</td>
{{- end }}
<td class="numeric">{{ .SumTotal | formatPrice }}</td>
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
<td colspan="2"></td>
</tr>
</tfoot>
{{ end }}
Add expenses’ index and add form
2023-05-03 10:46:25 +00:00
</table>
{{- end }}