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

110 lines
4.8 KiB
Plaintext
Raw Permalink 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">
Keep header fixed, and remove footer Now that the navigation is inside the header, and the header is not as tall as it once was, it makes sense to keep it always on the top of the page, scrolling only within <main>, since it is the main menu, and fairly used to switch from screen to screen. I removed the footer because now it would be always visible, and i was a bit weary of having the application name repeated that much. It was there mainly for the version number, that helps me check i installed the application’s latest version on the server, but that role can also be filled with meta tags. Closes #97.
2024-09-05 12:37:30 +00:00
<meta name="application-name" content="Numerus">
<meta name="generator" content="Numerus {{ numerusVersion }}">
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>
Include numerusVersion to CSS and JavaScript’s URIs
2024-01-19 22:09:25 +00:00
<link rel="stylesheet" type="text/css" media="screen" href="/static/numerus.css?v={{ numerusVersion }}">
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>
Add custom elements polyfill I use customized built-in components, extended from any HTML elements (e.g., HTMLDivElement), for product search, multiselect, and tags input fields. The idea is that people that without JavaScript could still use the regular, non-customized, inputs. It turns out, this does not work so well: the CSS assumes that JavaScript is enabled, and web components supported by the browser. If one of these fails, then the controls are unusable—the multiselect is too short, and the tags field accepts invalid characters that the backend does not validate until it fails with a database error. We discovered this because Apple does not implement customized built-in components[0], hence it does not use my JavaScript code and forms, the expenses forms in particular, are almost useless. The way to fix this is to replace the regular inputs with autonomous web components, extended from HTMLElement, using JavaScript, because it would only do so with JavaScript enabled, and the CSS style would only apply to these components, not the regular input fields. However, currently i do not have time to do the proper fix, and have to use a polyfill for Safari to support customized built-in components. Shame. [0]: https://lists.w3.org/Archives/Public/public-webapps/2013OctDec/0801.html
2023-11-11 02:32:03 +00:00
<script type="module" src="/static/custom-elements@1.3.0.min.js"></script>
Include numerusVersion to CSS and JavaScript’s URIs
2024-01-19 22:09:25 +00:00
<script type="module" src="/static/numerus.js?v={{ numerusVersion }}"></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>
Fix body class to show the filters without JavaScript This class must match the one set by the “Filter” button so that when there is no JavaScript filters forms are always visible.
2023-07-14 08:25:39 +00:00
<body class="filters-visible">
Add the very basic styles
2023-01-17 21:28:47 +00:00
<header>
Shrink user menu’s button and application title They were too big now that we have the main navigation in the header. This is part of #98.
2024-09-05 12:23:22 +00:00
<h1><img src="/static/numerus.svg" alt="Numerus" width="168" height="21"></h1>
Remove almost all data-hx-boost attributes Since 16e80b5ae, <body> no longer has overflow, thus no scroll. As a consequence, htmx no longer is able to scroll up <main> when it changes due to the default, implicit `show:true` applied to the request: is calls <main>’s scrollIntoView, however there is nothing to scroll to. I probably could fix it by changing the target of `show`, or even add a `scroll` directive to all boosted links, but at this point i think it is better no not boost links at all, as they do what i want—show the new page from the top—with less markup, plus the browser now show a loading animation, and it is not that slower, too.
2024-09-07 23:29:30 +00:00
<nav aria-label="{{( pgettext "Main" "title" )}}">
Move top-level navigation bar inside body’s header This is mostly to save on vertical space, since the header was almost useless but took a lot of screen real estate.
2024-09-04 10:38:37 +00:00
<ul>
<li><a{{if requestURIMatches (companyURI "/") }} aria-current="page"{{ end }} href="{{ companyURI "/" }}">{{( pgettext "Dashboard" "nav" )}}</a></li>
<li><a{{if requestURIHasPrefix (companyURI "/quotes") }} aria-current="page"{{ end }} href="{{ companyURI "/quotes" }}">{{( pgettext "Quotations" "nav" )}}</a></li>
<li><a{{if requestURIHasPrefix (companyURI "/invoices") }} aria-current="page"{{ end }} href="{{ companyURI "/invoices" }}">{{( pgettext "Invoices" "nav" )}}</a></li>
<li><a{{if requestURIHasPrefix (companyURI "/expenses") }} aria-current="page"{{ end }} href="{{ companyURI "/expenses" }}">{{( pgettext "Expenses" "nav" )}}</a></li>
<li><a{{if requestURIHasPrefix (companyURI "/payments") }} aria-current="page"{{ end }} href="{{ companyURI "/payments" }}">{{( pgettext "Payments" "nav" )}}</a></li>
<li><a{{if requestURIHasPrefix (companyURI "/products") }} aria-current="page"{{ end }} href="{{ companyURI "/products" }}">{{( pgettext "Products" "nav" )}}</a></li>
<li><a{{if requestURIHasPrefix (companyURI "/contacts") }} aria-current="page"{{ end }} href="{{ companyURI "/contacts" }}">{{( pgettext "Contacts" "nav" )}}</a></li>
</ul>
</nav>
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" )}}">
Shrink user menu’s button and application title They were too big now that we have the main navigation in the header. This is part of #98.
2024-09-05 12:23:22 +00:00
<i class="ri-user-6-line ri-2x"></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>
Remove almost all data-hx-boost attributes Since 16e80b5ae, <body> no longer has overflow, thus no scroll. As a consequence, htmx no longer is able to scroll up <main> when it changes due to the default, implicit `show:true` applied to the request: is calls <main>’s scrollIntoView, however there is nothing to scroll to. I probably could fix it by changing the target of `show`, or even add a `scroll` directive to all boosted links, but at this point i think it is better no not boost links at all, as they do what i want—show the new page from the top—with less markup, plus the browser now show a loading animation, and it is not that slower, too.
2024-09-07 23:29:30 +00:00
<ul role="menu" class="action-menu">
Make the menu work as a menu
2023-01-22 21:30:15 +00:00
<li role="presentation">
Remove almost all data-hx-boost attributes Since 16e80b5ae, <body> no longer has overflow, thus no scroll. As a consequence, htmx no longer is able to scroll up <main> when it changes due to the default, implicit `show:true` applied to the request: is calls <main>’s scrollIntoView, however there is nothing to scroll to. I probably could fix it by changing the target of `show`, or even add a `scroll` directive to all boosted links, but at this point i think it is better no not boost links at all, as they do what i want—show the new page from the top—with less markup, plus the browser now show a loading animation, and it is not that slower, too.
2024-09-07 23:29:30 +00:00
<a role="menuitem" href="{{ companyURI "/profile" }}"
data-hx-push-url="false" data-hx-swap="beforeend" 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">
Split the tax details “mega dialog” into separate pages I needed to place the payment accounts section somewhere, and the most logical place seemed to be that dialog, where users can set up company parameters. However, that dialog was already saturated with related, but ultimately independent forms, and adding the account section would make things even worse, specially given that we need to be able to edit those accounts in a separate page. We agreed to separate that dialog into tabs, which means separate pages. When i had everything in a separated page, then i did not know how to actually share the code for the tabs, and decided that, for now, these “tabs” would be items from the profile menu. Same function, different presentation.
2024-08-14 02:08:13 +00:00
<a role="menuitem" href="{{ companyURI "/tax-details" }}">
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>
Split the tax details “mega dialog” into separate pages I needed to place the payment accounts section somewhere, and the most logical place seemed to be that dialog, where users can set up company parameters. However, that dialog was already saturated with related, but ultimately independent forms, and adding the account section would make things even worse, specially given that we need to be able to edit those accounts in a separate page. We agreed to separate that dialog into tabs, which means separate pages. When i had everything in a separated page, then i did not know how to actually share the code for the tabs, and decided that, for now, these “tabs” would be items from the profile menu. Same function, different presentation.
2024-08-14 02:08:13 +00:00
<li role="presentation">
<a role="menuitem" href="{{ companyURI "/invoicing"}}">
<i class="ri-file-paper-2-line"></i>
{{( pgettext "Invoicing and Quoting" "title" )}}
</a>
</li>
<li role="presentation">
<a role="menuitem" href="{{ companyURI "/taxes"}}">
<i class="ri-government-line"></i>
{{( pgettext "Taxes" "title" )}}
</a>
</li>
<li role="presentation">
<a role="menuitem" href="{{ companyURI "/payment-methods"}}">
<i class="ri-money-euro-circle-line"></i>
Rename “Payment method” to “Invoicing method” This is only for user-visible strings; the name from the point of view of code and database remains the same. This is an attempt to force a distinction between payment method, used in invoices, and payment accounts, for payments. Closes #100.
2024-09-06 10:13:27 +00:00
{{( pgettext "Invoicing Methods" "title" )}}
Split the tax details “mega dialog” into separate pages I needed to place the payment accounts section somewhere, and the most logical place seemed to be that dialog, where users can set up company parameters. However, that dialog was already saturated with related, but ultimately independent forms, and adding the account section would make things even worse, specially given that we need to be able to edit those accounts in a separate page. We agreed to separate that dialog into tabs, which means separate pages. When i had everything in a separated page, then i did not know how to actually share the code for the tabs, and decided that, for now, these “tabs” would be items from the profile menu. Same function, different presentation.
2024-08-14 02:08:13 +00:00
</a>
</li>
<li role="presentation">
<a role="menuitem" href="{{ companyURI "/payment-accounts"}}">
<i class="ri-bank-card-2-line"></i>
{{( pgettext "Payment Accounts" "title" )}}
</a>
</li>
Add option to switch to another company This is for users that belong to more than one company. It is just a page with links to the home of each company that the user belongs to. Had to add a second company to the demo data to test it properly, even though i already have unit tests for multicompany, but, you know….
2023-11-06 12:52:34 +00:00
<li role="presentation">
Remove almost all data-hx-boost attributes Since 16e80b5ae, <body> no longer has overflow, thus no scroll. As a consequence, htmx no longer is able to scroll up <main> when it changes due to the default, implicit `show:true` applied to the request: is calls <main>’s scrollIntoView, however there is nothing to scroll to. I probably could fix it by changing the target of `show`, or even add a `scroll` directive to all boosted links, but at this point i think it is better no not boost links at all, as they do what i want—show the new page from the top—with less markup, plus the browser now show a loading animation, and it is not that slower, too.
2024-09-07 23:29:30 +00:00
<a role="menuitem" href="{{ companyURI "/switch-company" }}"
data-hx-push-url="false" data-hx-swap="beforeend" data-hx-boost="true">
Add option to switch to another company This is for users that belong to more than one company. It is just a page with links to the home of each company that the user belongs to. Had to add a second company to the demo data to test it properly, even though i already have unit tests for multicompany, but, you know….
2023-11-06 12:52:34 +00:00
<i class="ri-briefcase-line"></i>
{{( pgettext "Switch Company" "menu" )}}
</a>
</li>
Make the menu work as a menu
2023-01-22 21:30:15 +00:00
<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>
<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>