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

159 lines
7.3 KiB
Plaintext
Raw 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*/ -}}
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
<nav data-hx-target="main">
<p data-hx-boost="true">
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"
data-hx-boost="true"
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 expenses’ index and add form
2023-05-03 10:46:25 +00:00
<th>{{( pgettext "Amount" "title" )}}</th>
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
<th>{{( pgettext "Download" "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 }}
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>
<td>{{ .InvoiceNumber }}</td>
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
<td>
<details class="expense-status menu">
<summary class="expense-status-{{ .Status }}">{{ .StatusLabel }}</summary>
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
<form action="{{companyURI "/expenses/"}}{{ .Slug }}" enctype="multipart/form-data"
method="POST" data-hx-boost="true">
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
{{ csrfToken }}
{{ putMethod }}
<input type="hidden" name="quick" value="status">
<ul role="menu">
{{- range $status, $name := $.ExpenseStatuses }}
{{- if ne $status $expense.Status }}
<li role="presentation">
<button role="menuitem" type="submit"
name="expense_status" value="{{ $status }}"
class="expense-status-{{ $status }}"
>{{ $name }}</button>
</li>
{{- end }}
{{- end }}
</ul>
</form>
</details>
</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 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">
{{ if .OriginalFileName }}
<a href="{{ companyURI "/expenses/"}}{{ .Slug }}/download/{{.OriginalFileName}}"
title="{{( pgettext "Download expense attachment" "action" )}}"
aria-label="{{( pgettext "Download expense attachment" "action" )}}"><i
class="ri-download-line"></i></a>
{{ end }}
</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>
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 role="menu" class="action-menu">
<li role="presentation">
<a role="menuitem" href="{{ companyURI "/expenses"}}/{{ .Slug }}"
data-hx-target="main" data-hx-boost="true"
>
<i class="ri-edit-line"></i>
{{( pgettext "Edit" "action" )}}
</a>
</li>
</ul>
</details>
</td>
Add expenses’ index and add form
2023-05-03 10:46:25 +00:00
</tr>
{{- end }}
{{ else }}
<tr>
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
<td colspan="7">{{( 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>
<th scope="row" colspan="5">{{( gettext "Total" )}}</th>
<td class="numeric">{{ .TotalAmount|formatPrice }}</td>
<td colspan="2"></td>
</tr>
</tfoot>
{{ end }}
Add expenses’ index and add form
2023-05-03 10:46:25 +00:00
</table>
{{- end }}