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

80 lines
3.4 KiB
Plaintext
Raw Normal View History

Add the bare-bones form for invoices
2023-02-11 21:16:48 +00:00
{{ define "title" -}}
{{( pgettext "New Invoice" "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" -}}
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
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.newInvoicePage*/ -}}
Boost all breadcbrumb links
2023-04-02 14:10:13 +00:00
<nav data-hx-target="main" data-hx-boost="true">
Add the bare-bones form for invoices
2023-02-11 21:16:48 +00:00
<p>
<a href="{{ companyURI "/" }}">{{( pgettext "Home" "title" )}}</a> /
<a href="{{ companyURI "/invoices"}}">{{( pgettext "Invoices" "title" )}}</a> /
<a>{{( pgettext "New Invoice" "title" )}}</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 }}
{{ define "content" }}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.newInvoicePage*/ -}}
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
<section class="dialog-content" id="invoice-dialog-content" data-hx-target="this">
Add the bare-bones form for invoices
2023-02-11 21:16:48 +00:00
<h2>{{(pgettext "New Invoice" "title")}}</h2>
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 method="POST" action="{{ companyURI "/invoices" }}" data-hx-boost="true" data-hx-select="#invoice-dialog-content">
Add the bare-bones form for invoices
2023-02-11 21:16:48 +00:00
{{ csrfToken }}
Show the invoice subtotal, taxes, and total when creating it
2023-02-23 14:31:57 +00:00
{{ with .Form -}}
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
{{ template "hidden-field" .Location }}
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
{{ template "hidden-select-field" .InvoiceStatus }}
Show the invoice subtotal, taxes, and total when creating it
2023-02-23 14:31:57 +00:00
{{ template "select-field" .Customer }}
{{ template "input-field" .Date }}
Start the tag input custom element This is more or less the same as a multiselect, except that now it adds a list of string element that you write into the search element. It is supposed to fetch a list of tag suggestions from the server, but i have not implemented it yet.
2023-03-19 22:11:40 +00:00
{{ template "tags-field" .Tags }}
Add company’s default payment method I had to use a deferrable foreign key because the payment methods have a reference to the company, and the company now a circular reference to payment method.
2023-03-04 21:15:52 +00:00
{{ template "select-field" .PaymentMethod }}
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
{{ template "input-field" .Notes }}
Add the bare-bones form for invoices
2023-02-11 21:16:48 +00:00
Show the invoice subtotal, taxes, and total when creating it
2023-02-23 14:31:57 +00:00
{{- range $product := .Products }}
Use HTMx to add product rows “inline” in the invoice form I actually find more comfortable to select the product from the list presented up until now, but this is mostly because i have very few products and the list is not too long, so the idea is that with JavaScript we will dynamically add an empty product row to the invoice and then use the name field to search the product by name. I have the feeling that i am doing something wrong because i ended up with a lot of HTMx attribute for what i feel is not that much work, but for now it will work. I have added the `Is` field to `InputField` in order to include the `id` attribute to the HTML element, because the HTMLAttributes are attached to the `input`, not the `div`, and i felt like this one should also be a custom element based on div, like all the others. These is not yet any keyboard control to select the search results. I am not happy with having the search of products in a different URL than the index, specially since they use the exact same SQL query and ProductFilter struct, but i did not know how else ask for a different representation without resorting to the more complicated MIME types.
2023-04-24 00:00:38 +00:00
{{ template "invoice-product-form" . }}
Show the invoice subtotal, taxes, and total when creating it
2023-02-23 14:31:57 +00:00
{{- end }}
Add the bare-bones form for invoices
2023-02-11 21:16:48 +00:00
{{- end }}
Use HTMx to add product rows “inline” in the invoice form I actually find more comfortable to select the product from the list presented up until now, but this is mostly because i have very few products and the list is not too long, so the idea is that with JavaScript we will dynamically add an empty product row to the invoice and then use the name field to search the product by name. I have the feeling that i am doing something wrong because i ended up with a lot of HTMx attribute for what i feel is not that much work, but for now it will work. I have added the `Is` field to `InputField` in order to include the `id` attribute to the HTML element, because the HTMLAttributes are attached to the `input`, not the `div`, and i felt like this one should also be a custom element based on div, like all the others. These is not yet any keyboard control to select the search results. I am not happy with having the search of products in a different URL than the index, specially since they use the exact same SQL query and ProductFilter struct, but i did not know how else ask for a different representation without resorting to the more complicated MIME types.
2023-04-24 00:00:38 +00:00
<table id="invoice-summary">
Show the invoice subtotal, taxes, and total when creating it
2023-02-23 14:31:57 +00:00
<tbody>
<tr>
<th scope="row">{{(pgettext "Subtotal" "title")}}</th>
<td class="numeric">{{ .Subtotal | formatPrice }}</td>
</tr>
{{- range $tax := .Taxes }}
<tr>
<th scope="row">{{ index . 0 }}</th>
<td class="numeric">{{ index . 1 | formatPrice }}</td>
</tr>
{{- end }}
<tr>
<th scope="row">{{(pgettext "Total" "title")}}</th>
<td class="numeric">{{ .Total | formatPrice }}</td>
</tr>
</tbody>
</table>
Add the bare-bones form for invoices
2023-02-11 21:16:48 +00:00
<fieldset>
Keep all “new invoice actions” on the same /new URI
2023-02-27 12:13:28 +00:00
<button formnovalidate formaction="{{ companyURI "/invoices/new" }}"
name="action" value="select-products"
Use HTMx to add product rows “inline” in the invoice form I actually find more comfortable to select the product from the list presented up until now, but this is mostly because i have very few products and the list is not too long, so the idea is that with JavaScript we will dynamically add an empty product row to the invoice and then use the name field to search the product by name. I have the feeling that i am doing something wrong because i ended up with a lot of HTMx attribute for what i feel is not that much work, but for now it will work. I have added the `Is` field to `InputField` in order to include the `id` attribute to the HTML element, because the HTMLAttributes are attached to the `input`, not the `div`, and i felt like this one should also be a custom element based on div, like all the others. These is not yet any keyboard control to select the search results. I am not happy with having the search of products in a different URL than the index, specially since they use the exact same SQL query and ProductFilter struct, but i did not know how else ask for a different representation without resorting to the more complicated MIME types.
2023-04-24 00:00:38 +00:00
data-hx-get="{{ companyURI "/invoices/product-form" }}"
data-hx-target="#invoice-summary" data-hx-swap="beforebegin"
data-hx-select="unset"
data-hx-vals="js:{index: document.querySelectorAll('.new-invoice-product').length}"
Add the formnovalidate attribute to update and add products buttons They are to complete the invoice, so it can be in an invalid date, but we do not want to force people to finish all required inputs before they can add products or update quantities, do we? Now had to add the empty option label for customer in all cases, because it could be empty, although that should be done regardless in case someone has a browser that does not validate fields.
2023-02-14 11:55:19 +00:00
type="submit">{{( pgettext "Add products" "action" )}}</button>
Keep all “new invoice actions” on the same /new URI
2023-02-27 12:13:28 +00:00
<button formnovalidate formaction="{{ companyURI "/invoices/new" }}"
Use HTMx to add product rows “inline” in the invoice form I actually find more comfortable to select the product from the list presented up until now, but this is mostly because i have very few products and the list is not too long, so the idea is that with JavaScript we will dynamically add an empty product row to the invoice and then use the name field to search the product by name. I have the feeling that i am doing something wrong because i ended up with a lot of HTMx attribute for what i feel is not that much work, but for now it will work. I have added the `Is` field to `InputField` in order to include the `id` attribute to the HTML element, because the HTMLAttributes are attached to the `input`, not the `div`, and i felt like this one should also be a custom element based on div, like all the others. These is not yet any keyboard control to select the search results. I am not happy with having the search of products in a different URL than the index, specially since they use the exact same SQL query and ProductFilter struct, but i did not know how else ask for a different representation without resorting to the more complicated MIME types.
2023-04-24 00:00:38 +00:00
id="recompute-button"
Keep all “new invoice actions” on the same /new URI
2023-02-27 12:13:28 +00:00
name="action" value="update"
Add the formnovalidate attribute to update and add products buttons They are to complete the invoice, so it can be in an invalid date, but we do not want to force people to finish all required inputs before they can add products or update quantities, do we? Now had to add the empty option label for customer in all cases, because it could be empty, although that should be done regardless in case someone has a browser that does not validate fields.
2023-02-14 11:55:19 +00:00
type="submit">{{( pgettext "Update" "action" )}}</button>
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
<button class="primary" name="action" value="add"
type="submit">{{( pgettext "New invoice" "action" )}}</button>
Add the bare-bones form for invoices
2023-02-11 21:16:48 +00:00
</fieldset>
</form>
</section>
Use HTMx to add product rows “inline” in the invoice form I actually find more comfortable to select the product from the list presented up until now, but this is mostly because i have very few products and the list is not too long, so the idea is that with JavaScript we will dynamically add an empty product row to the invoice and then use the name field to search the product by name. I have the feeling that i am doing something wrong because i ended up with a lot of HTMx attribute for what i feel is not that much work, but for now it will work. I have added the `Is` field to `InputField` in order to include the `id` attribute to the HTML element, because the HTMLAttributes are attached to the `input`, not the `div`, and i felt like this one should also be a custom element based on div, like all the others. These is not yet any keyboard control to select the search results. I am not happy with having the search of products in a different URL than the index, specially since they use the exact same SQL query and ProductFilter struct, but i did not know how else ask for a different representation without resorting to the more complicated MIME types.
2023-04-24 00:00:38 +00:00
<script>
document.body.addEventListener('recompute', function () {
document.getElementById('recompute-button').click();
});
</script>
Add the bare-bones form for invoices
2023-02-11 21:16:48 +00:00
{{- end }}