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

108 lines
4.7 KiB
Plaintext
Raw Normal View History

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
{{ define "title" -}}
{{ printf ( pgettext "Edit Invoice “%s”" "title" ) .Number }}
{{- 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.editInvoicePage*/ -}}
Boost all breadcbrumb links
2023-04-02 14:10:13 +00:00
<nav data-hx-target="main" data-hx-boost="true">
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
<p>
<a href="{{ companyURI "/" }}">{{( pgettext "Home" "title" )}}</a> /
<a href="{{ companyURI "/invoices"}}">{{( pgettext "Invoices" "title" )}}</a> /
<a>{{ .Number }}</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.editInvoicePage*/ -}}
Improve the CSS and general design
2023-05-23 21:13:21 +00:00
<section id="invoice-dialog-content" data-hx-target="main">
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
<h2>{{ printf (pgettext "Edit Invoice “%s”" "title") .Number }}</h2>
Add attachments to invoices Works exactly the same as for expenses, and this is sometimes convenient for keeping transfer slips from customers and such. I actually did not know where to add the download from this attachment, because if add a column to the index it can easily be confused with the download icon for the actual invoice. Part of #66.
2023-07-12 18:06:53 +00:00
<form enctype="multipart/form-data" method="POST" action="{{ companyURI "/invoices/" }}{{ .Slug }}/edit"
Remove scroll after update quote or invoice form By default, when using hx-boost, HTMx adds the `show:top` modifier to `hx-swap`. This is actually the wanted behaviour in these cases, because it means that you are following a link to a “different” page, and it makes sense to start from the top. However, for quote and invoice forms is a hindrance because you are usually editing the bottom-most product, as new lines are appended, therefore you are all the time having to scroll down to the line. Every. Single. Time. Here i reverted the show:top to just show:false to keep the scroll as is. I also added the show:bottom to the new product button, because that way the window show entirely the new line. I could not use `show:window:bottom`, however, despite appearing in the documentation, because that, somehow, ended up doing the same as `show:window:top`. Not sure if a bug or something i did not understand. Closes #58.
2023-07-04 17:55:58 +00:00
data-hx-boost="true"
data-hx-swap="innerHTML show:false"
>
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
{{ csrfToken }}
{{ with .Form -}}
Use HTMx to delete and restore invoice products It is better that way because it works without JavaScript; if HTMx is not available, it will just use regulars forms. The problem is that most of the submit buttons where using formaction to send the request to a different action, and only one button was the “real” action. Since i could not pass the formaction to invoice-product-form template, i have changed the “default” action to the one with “ancillary” functions. I have to use a different action to remove for each product because i can not pass the index to the backend without JavaScript: it only depends on the button click, that already has a name for the action. Thus, in a way, i have “merged” the action and the index in a single name.
2023-05-28 22:01:11 +00:00
{{ if .RemovedProduct -}}
<div role="alert">
{{ with .RemovedProduct -}}
<p>{{printf (gettext "Product “%s” removed") .Name}}</p>
<button type="submit"
formnovalidate
name="action" value="restore-product"
>{{( pgettext "Undo" "action" )}}</button>
{{ template "hidden-field" .InvoiceProductId }}
{{ template "hidden-field" .ProductId }}
{{ template "hidden-field" .Name }}
{{ template "hidden-field" .Price }}
{{ template "hidden-field" .Quantity }}
{{ template "hidden-field" .Discount }}
{{ template "hidden-field" .Description }}
{{ template "hidden-select-field" .Tax }}
{{- end }}
</div>
{{- end }}
<div class="invoice-data">
{{ template "select-field" .Customer }}
{{ template "hidden-field" .Date }}
{{ template "tags-field" .Tags }}
{{ template "select-field" .PaymentMethod }}
{{ template "select-field" .InvoiceStatus }}
Add attachments to invoices Works exactly the same as for expenses, and this is sometimes convenient for keeping transfer slips from customers and such. I actually did not know where to add the download from this attachment, because if add a column to the index it can easily be confused with the download icon for the actual invoice. Part of #66.
2023-07-12 18:06:53 +00:00
{{ template "file-field" .File }}
Use HTMx to delete and restore invoice products It is better that way because it works without JavaScript; if HTMx is not available, it will just use regulars forms. The problem is that most of the submit buttons where using formaction to send the request to a different action, and only one button was the “real” action. Since i could not pass the formaction to invoice-product-form template, i have changed the “default” action to the one with “ancillary” functions. I have to use a different action to remove for each product because i can not pass the index to the backend without JavaScript: it only depends on the button click, that already has a name for the action. Thus, in a way, i have “merged” the action and the index in a single name.
2023-05-28 22:01:11 +00:00
{{ template "input-field" .Notes }}
</div>
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
{{- 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" . }}
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
{{- end }}
{{- 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">
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
<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>
Improve the CSS and general design
2023-05-23 21:13:21 +00:00
<fieldset class="button-bar">
Use HTMx to delete and restore invoice products It is better that way because it works without JavaScript; if HTMx is not available, it will just use regulars forms. The problem is that most of the submit buttons where using formaction to send the request to a different action, and only one button was the “real” action. Since i could not pass the formaction to invoice-product-form template, i have changed the “default” action to the one with “ancillary” functions. I have to use a different action to remove for each product because i can not pass the index to the backend without JavaScript: it only depends on the button click, that already has a name for the action. Thus, in a way, i have “merged” the action and the index in a single name.
2023-05-28 22:01:11 +00:00
<button formnovalidate
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="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" }}"
Remove scroll after update quote or invoice form By default, when using hx-boost, HTMx adds the `show:top` modifier to `hx-swap`. This is actually the wanted behaviour in these cases, because it means that you are following a link to a “different” page, and it makes sense to start from the top. However, for quote and invoice forms is a hindrance because you are usually editing the bottom-most product, as new lines are appended, therefore you are all the time having to scroll down to the line. Every. Single. Time. Here i reverted the show:top to just show:false to keep the scroll as is. I also added the show:bottom to the new product button, because that way the window show entirely the new line. I could not use `show:window:bottom`, however, despite appearing in the documentation, because that, somehow, ended up doing the same as `show:window:top`. Not sure if a bug or something i did not understand. Closes #58.
2023-07-04 17:55:58 +00:00
data-hx-target="#invoice-summary"
data-hx-swap="beforebegin show:bottom"
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-select="unset"
data-hx-vals="js:{index: document.querySelectorAll('.new-invoice-product').length}"
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
type="submit">{{( pgettext "Add products" "action" )}}</button>
Use HTMx to delete and restore invoice products It is better that way because it works without JavaScript; if HTMx is not available, it will just use regulars forms. The problem is that most of the submit buttons where using formaction to send the request to a different action, and only one button was the “real” action. Since i could not pass the formaction to invoice-product-form template, i have changed the “default” action to the one with “ancillary” functions. I have to use a different action to remove for each product because i can not pass the index to the backend without JavaScript: it only depends on the button click, that already has a name for the action. Thus, in a way, i have “merged” the action and the index in a single name.
2023-05-28 22:01:11 +00:00
<button formnovalidate
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"
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="action" value="update"
type="submit">{{( pgettext "Update" "action" )}}</button>
<button class="primary" name="_method" value="PUT"
Use HTMx to delete and restore invoice products It is better that way because it works without JavaScript; if HTMx is not available, it will just use regulars forms. The problem is that most of the submit buttons where using formaction to send the request to a different action, and only one button was the “real” action. Since i could not pass the formaction to invoice-product-form template, i have changed the “default” action to the one with “ancillary” functions. I have to use a different action to remove for each product because i can not pass the index to the backend without JavaScript: it only depends on the button click, that already has a name for the action. Thus, in a way, i have “merged” the action and the index in a single name.
2023-05-28 22:01:11 +00:00
formaction="{{ companyURI "/invoices" }}/{{ .Slug }}"
Change “Edit Invoice” button to just “Save”
2023-05-23 12:18:26 +00:00
type="submit">{{( pgettext "Save" "action" )}}</button>
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
</fieldset>
</form>
</section>
Improve the CSS and general design
2023-05-23 21:13:21 +00:00
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 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
{{- end }}