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

136 lines
6.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*/ -}}
<nav data-hx-boost="true" data-hx-target="main">
<p>
<a href="{{ companyURI "/" }}">{{( pgettext "Home" "title" )}}</a> /
<a>{{( pgettext "Expenses" "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" }}
Add expenses’ index and add form
2023-05-03 10:46:25 +00:00
<a class="primary button"
href="{{ companyURI "/expenses/new" }}">{{( pgettext "New expense" "action" )}}</a>
</p>
</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"
>
{{ with .Filters }}
Rename Customer expense filter to Contact It would be very unusual to have an expense from a customer, and we do not have (yet) a name for supplier or whatever it should be here, so i used the same name we use for the column in the table.
2023-06-20 09:17:07 +00:00
{{ template "select-field" .Contact }}
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
{{ template "select-field" .ExpenseStatus }}
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 "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>
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>
<form action="{{companyURI "/expenses/"}}{{ .Slug }}" enctype="multipart/form-data" method="POST" data-hx-boost="true">
{{ 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 }}