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
|
|
|
{{ define "title" -}}
|
|
|
|
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.PaymentMethodsPage*/ -}}
|
|
|
|
{{( pgettext "Payment Methods" "title" )}}
|
|
|
|
{{- end }}
|
|
|
|
|
|
|
|
{{ define "breadcrumbs" -}}
|
|
|
|
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.PaymentMethodsPage*/ -}}
|
|
|
|
<nav data-hx-target="main" data-hx-boost="true">
|
|
|
|
<p>
|
|
|
|
<a href="{{ companyURI "/" }}">{{( pgettext "Home" "title" )}}</a> /
|
|
|
|
<a>{{ template "title" . }}</a>
|
|
|
|
</p>
|
|
|
|
</nav>
|
|
|
|
{{- end }}
|
|
|
|
|
|
|
|
{{ define "content" }}
|
|
|
|
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.PaymentMethodsPage*/ -}}
|
|
|
|
<section data-hx-target="main" data-hx-swap="innerHTML show:false">
|
|
|
|
<h2>{{ template "title" . }}</h2>
|
|
|
|
<table>
|
|
|
|
<thead>
|
|
|
|
<tr>
|
2024-08-28 09:10:03 +00:00
|
|
|
<th>{{( pgettext "Default" "title" )}}</th>
|
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
|
|
|
<th>{{( pgettext "Payment Method" "title" )}}</th>
|
|
|
|
<th>{{( pgettext "Instructions" "title" )}}</th>
|
|
|
|
<th></th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
{{ $confirm := ( gettext "Are you sure?" )}}
|
|
|
|
<tbody data-hx-confirm="{{ $confirm }}" data-hx-target="closest tr" data-hx-swap="outerHTML swap:1s">
|
|
|
|
{{ with .PaymentMethods }}
|
|
|
|
{{- range $method := . }}
|
|
|
|
<tr>
|
2024-08-28 09:10:03 +00:00
|
|
|
<td>
|
|
|
|
<span class="description-text"></span>
|
|
|
|
<input type="radio"
|
|
|
|
form="default_payment_form"
|
|
|
|
aria-label="{{ pgettext "Set as default" "action" }}"
|
|
|
|
name="default_payment_id"
|
|
|
|
value="{{ .Id }}"
|
|
|
|
{{ if .IsDefault }} checked{{ end}}
|
|
|
|
>
|
|
|
|
</td>
|
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
|
|
|
<td>{{ .Name }}</td>
|
|
|
|
<td>{{ .Instructions }}</td>
|
|
|
|
<td>
|
|
|
|
<form method="POST" action="{{ companyURI "/payment-methods"}}/{{ .Id }}"
|
|
|
|
data-hx-boost="true">
|
|
|
|
{{ csrfToken }}
|
|
|
|
{{ deleteMethod }}
|
|
|
|
<button class="icon" aria-label="{{( gettext "Delete payment method" )}}"
|
|
|
|
><i class="ri-delete-back-2-line"></i></button>
|
|
|
|
</form>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
{{- end }}
|
|
|
|
{{ else }}
|
|
|
|
<tr>
|
2024-08-28 09:10:03 +00:00
|
|
|
<td colspan="4">{{( gettext "No payment methods added yet." )}}</td>
|
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
|
|
|
</tr>
|
|
|
|
{{ end }}
|
|
|
|
</tbody>
|
2024-08-28 09:10:03 +00:00
|
|
|
{{ if gt (len .PaymentMethods) 1 -}}
|
|
|
|
<tfoot>
|
|
|
|
<tr>
|
|
|
|
<td>
|
|
|
|
<form id="default_payment_form"
|
|
|
|
method="POST"
|
|
|
|
action="{{ companyURI "/payment-methods" }}/default"
|
|
|
|
data-hx-boost="true"
|
|
|
|
>
|
|
|
|
{{ csrfToken }}
|
|
|
|
{{ putMethod }}
|
|
|
|
{{ if .UpdateDefaultError -}}
|
|
|
|
<p>{{ .UpdateDefaultError}}</p>
|
|
|
|
{{- end }}
|
|
|
|
<button>{{( pgettext "Set" "action")}}</button>
|
|
|
|
</form>
|
|
|
|
</td>
|
|
|
|
<td colspan="3"></td>
|
|
|
|
</tr>
|
|
|
|
</tfoot>
|
|
|
|
{{- end }}
|
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
|
|
|
</table>
|
|
|
|
|
|
|
|
<form method="POST" action="{{ companyURI "/payment-methods" }}" data-hx-boost="true">
|
|
|
|
<h3>{{( pgettext "New Payment Method" "title")}}</h3>
|
|
|
|
<fieldset>
|
|
|
|
{{ csrfToken }}
|
|
|
|
{{ with .Form -}}
|
|
|
|
{{ template "input-field" .Name }}
|
|
|
|
{{ template "input-field" .Instructions }}
|
|
|
|
{{- end }}
|
|
|
|
</fieldset>
|
|
|
|
<footer>
|
|
|
|
<button>{{( pgettext "Add new payment method" "action" )}}</button>
|
|
|
|
</footer>
|
|
|
|
</form>
|
|
|
|
</section>
|
|
|
|
{{- end }}
|