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

74 lines
2.7 KiB
Plaintext
Raw Normal View History

Add the simplest possible web server to test login This is a very rough test to actually check the login function outside pgTAP; it is very ugly, in both design and code, and (i hope) does not reflect future quality. I was about to use Echo[0] as a “web framework”, but something feels wrong when using a framework with Go—i do not know what. I actually tried it and was even more put off by the JSON-formatted logger that can not be disabled; i was already losing control of the application! I created the folder following the apparently de facto guidelines for Go projects, and i see no problem with mixing Go’s folders with Sqitch’s: both are part of the same application and there are not conflicts. [0]: https://echo.labstack.com/ [1]: https://github.com/golang-standards/project-layout
2023-01-13 19:43:42 +00:00
<!doctype html>
Add custom function to get the current locale from templates This is just to set the correct `lang` attribute on the HTML, so that text readers can do its job and the `(optional)` suffix of labels gets the correct ”translation”.
2023-01-31 14:45:51 +00:00
<html lang="{{ currentLocale }}">
Add the simplest possible web server to test login This is a very rough test to actually check the login function outside pgTAP; it is very ugly, in both design and code, and (i hope) does not reflect future quality. I was about to use Echo[0] as a “web framework”, but something feels wrong when using a framework with Go—i do not know what. I actually tried it and was even more put off by the JSON-formatted logger that can not be disabled; i was already losing control of the application! I created the folder following the apparently de facto guidelines for Go projects, and i see no problem with mixing Go’s folders with Sqitch’s: both are part of the same application and there are not conflicts. [0]: https://echo.labstack.com/ [1]: https://github.com/golang-standards/project-layout
2023-01-13 19:43:42 +00:00
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
Move page titles to their respective templates I have been thinking about that, and it does not make that much sense to have the titles in the Go source anymore: most of them are static text that i have to remember to set in the controller each time, and when the time come i have to face a dynamic title i am sure i will manage with only the template capabilities—worst comes worst, i can always define a function. On the other hand, there is no way i can define a template without its title and i know that everytime that template is used, no matter what controller rendered it, it will always have that title.
2023-01-31 12:07:17 +00:00
<title>{{ template "title" . }} — Numerus</title>
Add the very basic styles
2023-01-17 21:28:47 +00:00
<link rel="stylesheet" type="text/css" media="screen" href="/static/numerus.css">
Update HTMx version to 1.9.2 I was hit with a couple of bugs: hx-on not properly de-initializing, with a workaround in 43fffb68 and properly fixed with version 1.9.2; and elements with naked hx-trigger did not work with hx-boost, as i do for the tag inline form, fixed in 1.9.1. The other bug fixed in 1.9.1, play well with other libraries that also use the window.onpopstate, did not affect me, i believe.
2023-04-29 14:20:13 +00:00
<script src="/static/htmx@1.9.2.min.js"></script>
Reimplement the multiselect as a custom element What i really set off on was to refactor the multiselect’s x-data context to a separate JavaScript file. I did not see the need at first, thinking that it would not matter because it was used only in a template and i was not duplicating the code in my files. However, i then realized that having the context in the template means the visitor has to download it each and every time it accesses a form with a multiselect, even if nothing changed, and, worse, it would download it multiple times if there were many multiselect controls. It makes more sense to put all that into a file that the browser would only download and parse once, if the proper caching is set. Once i realized that, it was a shame that AlpineJS has no way to do the same for the HTML structure[0], for the exact same reasons: not wanting to download many times the same extra <template> and other markup required to build the control for JavaScript users. And then i remembered that this is supposed to be custom element’s main selling point. At first i tried to create a shadow DOW to replace the <select> with the same <div> and <ul> that i used with Alpine, but it turns out that <select> is not one of the allowed elements that can have a shadow root attached[0]. Therefore, i changed the custom element to extend the <div> for the <select> and <label> instead—the same element that had the x-init context—, but i would have to define or include all the styles inside the shadow DOM, and bring the lang attribute, for it to look like it did before. Out with the shadow DOM, and modify the <div>’s contents instead. At this point the code was so far removed from the declarative way that AlpineJS promotes that i did not see much value on using it, except for its reactivity. But, given that this is such a small component, at the end decided to write it all in plain JavaScript. It is more code, at least looking only at the code i had to write, but i love how i only have to add an is="numerus-multiselect" attribute to HTML for it to work. [0]: https://github.com/alpinejs/alpine/discussions/1205 [1]: https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow
2023-03-17 13:55:12 +00:00
<script type="module" src="/static/numerus.js"></script>
Add a SnackBar to show HTMx errors We do not have any design yet for errors and other notifications, so i followed material design, for now, since we already kind of use their input fields design. This time i decided to use AlpineJS because there is not that much HTML code, and the transitioning is way easier to do in AlpineJS than it would be with plain JavaScript—not to mention the bugs i would introduce.
2023-03-25 00:56:26 +00:00
<script defer src="/static/alpinejs@3.12.0.min.js"></script>
Add the simplest possible web server to test login This is a very rough test to actually check the login function outside pgTAP; it is very ugly, in both design and code, and (i hope) does not reflect future quality. I was about to use Echo[0] as a “web framework”, but something feels wrong when using a framework with Go—i do not know what. I actually tried it and was even more put off by the JSON-formatted logger that can not be disabled; i was already losing control of the application! I created the folder following the apparently de facto guidelines for Go projects, and i see no problem with mixing Go’s folders with Sqitch’s: both are part of the same application and there are not conflicts. [0]: https://echo.labstack.com/ [1]: https://github.com/golang-standards/project-layout
2023-01-13 19:43:42 +00:00
</head>
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
<body class="show-filters">
Add the very basic styles
2023-01-17 21:28:47 +00:00
<header>
<h1><img src="/static/numerus.svg" alt="Numerus" width="261" height="33"></h1>
Add the “menu” to change invoice statuses
2023-03-07 10:52:09 +00:00
<details id="profile-menu" 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
<summary aria-label="{{( gettext "Profile menu" )}}">
Change menu’s and profile icon Eventually, we will allow people to upload their own profile images, but until then we’ll use a “generic” profile icon instead of the closed icon, that means nothing to users. We wanted to have the same icon for that menu than for the Account item, but the one we used until now did not look inside the round button for the menu, thus we changed the two. Related to #55.
2023-07-02 17:49:03 +00:00
<i class="ri-user-6-line ri-3x"></i>
Implement profile menu with <details> It works better than with the weird hover behaviour i could do in CSS, and it already has most of the aria roles needed. The only tricky part is to allow closing it by clicking anywhere else, that is done by “extending” the <summary> to the whole screen, with a lower z-index than the menu but higher than the rest of controls, that way we force people to click on that summary.
2023-01-23 17:52:18 +00:00
</summary>
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
<ul role="menu" class="action-menu" data-hx-push-url="false" data-hx-swap="beforeend">
Make the menu work as a menu
2023-01-22 21:30:15 +00:00
<li role="presentation">
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
<a role="menuitem" href="{{ companyURI "/profile" }}" data-hx-boost="true">
Change menu’s and profile icon Eventually, we will allow people to upload their own profile images, but until then we’ll use a “generic” profile icon instead of the closed icon, that means nothing to users. We wanted to have the same icon for that menu than for the Account item, but the one we used until now did not look inside the round button for the menu, thus we changed the two. Related to #55.
2023-07-02 17:49:03 +00:00
<i class="ri-user-6-line"></i>
Add the company relation and read-only form to edit I do not have more time to update the update to the company today, but i believe this is already a good amount of work for a commit. The company is going to be used for row level security, as users will only have access to the data from companies they are granted access, by virtue of being in the company_user relation. I did not know how add a row level security policy to the company_user because i needed the to select on the same relation and this is not allowed, because it would create an infinite loop. Had to add the vat, pg_libphonenumber, and uri extensions in order to validate VAT identification numbers, phone numbers, and URIs, repectively. These libraries are not in Debian, but i created packages for them all in https://dev.tandem.ws/tandem.
2023-01-24 20:46:07 +00:00
{{( pgettext "Account" "menu" )}}
</a>
</li>
<li role="presentation">
Show the tax details form in a dialog using HTMx
2023-03-21 10:58:54 +00:00
<a role="menuitem" href="{{ companyURI "/tax-details" }}" data-hx-boost="true">
Add the company relation and read-only form to edit I do not have more time to update the update to the company today, but i believe this is already a good amount of work for a commit. The company is going to be used for row level security, as users will only have access to the data from companies they are granted access, by virtue of being in the company_user relation. I did not know how add a row level security policy to the company_user because i needed the to select on the same relation and this is not allowed, because it would create an infinite loop. Had to add the vat, pg_libphonenumber, and uri extensions in order to validate VAT identification numbers, phone numbers, and URIs, repectively. These libraries are not in Debian, but i created packages for them all in https://dev.tandem.ws/tandem.
2023-01-24 20:46:07 +00:00
<i class="ri-vip-diamond-line"></i>
{{( pgettext "Tax Details" "menu" )}}
Implement profile menu with <details> It works better than with the weird hover behaviour i could do in CSS, and it already has most of the aria roles needed. The only tricky part is to allow closing it by clicking anywhere else, that is done by “extending” the <summary> to the whole screen, with a lower z-index than the menu but higher than the rest of controls, that way we force people to click on that summary.
2023-01-23 17:52:18 +00:00
</a>
Make the menu work as a menu
2023-01-22 21:30:15 +00:00
</li>
<li role="presentation">
Implement profile menu with <details> It works better than with the weird hover behaviour i could do in CSS, and it already has most of the aria roles needed. The only tricky part is to allow closing it by clicking anywhere else, that is done by “extending” the <summary> to the whole screen, with a lower z-index than the menu but higher than the rest of controls, that way we force people to click on that summary.
2023-01-23 17:52:18 +00:00
<form method="POST" action="/logout">
Add cross-request forgery detection I use the ten first digits of the cookie’s hash, that i believe it is not a problem, has the advantage of not expiring until the user logs out, and using a per user session token is explicitly allowed by OWASP[0]. [0]: https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#synchronizer-token-pattern
2023-02-02 10:39:34 +00:00
{{ csrfToken }}
Implement profile menu with <details> It works better than with the weird hover behaviour i could do in CSS, and it already has most of the aria roles needed. The only tricky part is to allow closing it by clicking anywhere else, that is done by “extending” the <summary> to the whole screen, with a lower z-index than the menu but higher than the rest of controls, that way we force people to click on that summary.
2023-01-23 17:52:18 +00:00
<button type="submit" role="menuitem">
<i class="ri-logout-circle-line"></i>
{{( pgettext "Logout" "action" )}}
</button>
</form>
Make the menu work as a menu
2023-01-22 21:30:15 +00:00
</li>
Add the very basic styles
2023-01-17 21:28:47 +00:00
</ul>
Implement profile menu with <details> It works better than with the weird hover behaviour i could do in CSS, and it already has most of the aria roles needed. The only tricky part is to allow closing it by clicking anywhere else, that is done by “extending” the <summary> to the whole screen, with a lower z-index than the menu but higher than the rest of controls, that way we force people to click on that summary.
2023-01-23 17:52:18 +00:00
</details>
Add the very basic styles
2023-01-17 21:28:47 +00:00
</header>
Boost the main navigation links with HTMx I am not sure if, at the end, all pages that now use mustRenderAppTemplate will be replaced with mustRenderMainTemplate, but for now i keep them separate to know which routes are already “boosted”.
2023-03-23 09:55:02 +00:00
<nav aria-label="{{( pgettext "Main" "title" )}}" data-hx-target="main" data-hx-boost="true">
Add the contact relation and a rough first form
2023-01-29 14:14:31 +00:00
<ul>
Add nav link to dashboard
2023-01-31 12:29:56 +00:00
<li><a href="{{ companyURI "/" }}">{{( pgettext "Dashboard" "nav" )}}</a></li>
Add HTTP controller and view to add quotes It still does not support quotes without contact or payment.
2023-06-07 14:35:31 +00:00
<li><a href="{{ companyURI "/quotes" }}">{{( pgettext "Quotations" "nav" )}}</a></li>
Add the bare-bones form for invoices
2023-02-11 21:16:48 +00:00
<li><a href="{{ companyURI "/invoices" }}">{{( pgettext "Invoices" "nav" )}}</a></li>
Add expenses’ index and add form
2023-05-03 10:46:25 +00:00
<li><a href="{{ companyURI "/expenses" }}">{{( pgettext "Expenses" "nav" )}}</a></li>
Add products section There is still some issues with the price field, because for now it is in cents, but do not have time now to fix that.
2023-02-04 10:32:39 +00:00
<li><a href="{{ companyURI "/products" }}">{{( pgettext "Products" "nav" )}}</a></li>
Rename Customer to Contact That section is intended for both customers and suppliers, collectively called “contacts”.
2023-02-01 09:14:26 +00:00
<li><a href="{{ companyURI "/contacts" }}">{{( pgettext "Contacts" "nav" )}}</a></li>
Add the contact relation and a rough first form
2023-01-29 14:14:31 +00:00
</ul>
</nav>
Add the very basic styles
2023-01-17 21:28:47 +00:00
<main>
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
{{- template "breadcrumbs" . }}
Use “layouts” for the common HTML between pages Had to call xgettext on Go source files because now the title comes from there, as i assume i will have titles like "Invoice #INVxxxx" that have to come from the database that the template does not know.
2023-01-22 20:41:50 +00:00
{{- template "content" . }}
Add the very basic styles
2023-01-17 21:28:47 +00:00
</main>
Add the simplest possible web server to test login This is a very rough test to actually check the login function outside pgTAP; it is very ugly, in both design and code, and (i hope) does not reflect future quality. I was about to use Echo[0] as a “web framework”, but something feels wrong when using a framework with Go—i do not know what. I actually tried it and was even more put off by the JSON-formatted logger that can not be disabled; i was already losing control of the application! I created the folder following the apparently de facto guidelines for Go projects, and i see no problem with mixing Go’s folders with Sqitch’s: both are part of the same application and there are not conflicts. [0]: https://echo.labstack.com/ [1]: https://github.com/golang-standards/project-layout
2023-01-13 19:43:42 +00:00
</body>
Add a SnackBar to show HTMx errors We do not have any design yet for errors and other notifications, so i followed material design, for now, since we already kind of use their input fields design. This time i decided to use AlpineJS because there is not that much HTML code, and the transitioning is way easier to do in AlpineJS than it would be with plain JavaScript—not to mention the bugs i would introduce.
2023-03-25 00:56:26 +00:00
<div x-data="snackbar">
<div x-show="show"
@click="dismiss"
x-cloak
x-transition:enter="enter"
x-transition:enter-start="start"
x-transition:enter-end="end"
x-transition:leave="leave"
x-transition:leave-start="start"
x-transition:leave-end="end"
role="alert">
<p x-text="toast"></p>
</div>
</div>
Add the simplest possible web server to test login This is a very rough test to actually check the login function outside pgTAP; it is very ugly, in both design and code, and (i hope) does not reflect future quality. I was about to use Echo[0] as a “web framework”, but something feels wrong when using a framework with Go—i do not know what. I actually tried it and was even more put off by the JSON-formatted logger that can not be disabled; i was already losing control of the application! I created the folder following the apparently de facto guidelines for Go projects, and i see no problem with mixing Go’s folders with Sqitch’s: both are part of the same application and there are not conflicts. [0]: https://echo.labstack.com/ [1]: https://github.com/golang-standards/project-layout
2023-01-13 19:43:42 +00:00
</html>