x/spend-sparrow
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Compare commits

base: x:6881a64691db8d38e814d5faf7ad68a7aee2b698
Branches Tags
x:prod x:fix/lint-errors x:fix/linting x:111-transaction-ui
...
compare: x:111-transaction-ui
Branches Tags
x:prod x:fix/lint-errors x:fix/linting x:111-transaction-ui

1 Commits
6881a64691 ... 111-transa

Author SHA1 Message Date
Tim Wundenberg
061d63a8ad feat(ui): #111 draft for (unfinished) mobile transaction-ui
All checks were successful
Build Docker Image / Build-Docker-Image (push) Successful in 6m43s
Details
2025-08-24 15:35:00 +02:00
2 changed files with 291 additions and 311 deletions
Expand all files Collapse all files

520
internal/template/transaction/transaction.templ
View File

@@ -1,94 +1,97 @@
package transaction package transaction
import "fmt" import "fmt"
import "time"
import "spend-sparrow/internal/template/svg"
import "spend-sparrow/internal/types" import "spend-sparrow/internal/types"
import "github.com/google/uuid" import "github.com/google/uuid"
templ Transaction(items templ.Component, filter types.TransactionItemsFilter, accounts []*types.Account, treasureChests []*types.TreasureChest) { templ Transaction(
<div class="max-w-6xl mt-10 mx-auto"> items templ.Component,
<div class="flex items-center gap-4"> filter types.TransactionItemsFilter,
<form accounts []*types.Account,
id="transactionFilterForm" treasureChests []*types.TreasureChest) {
hx-get="/transaction" <div class="">
hx-target="#transaction-items" <div class="">
hx-push-url="true" <!-- <form -->
hx-trigger="change" <!-- id="transactionFilterForm" -->
> <!-- hx-get="/transaction" -->
<select name="account-id" class="bg-white input"> <!-- hx-target="#transaction-items" -->
<option value="">- Filter Acount -</option> <!-- hx-push-url="true" -->
for _, account := range accounts { <!-- hx-trigger="change" -->
<option <!-- > -->
value={ account.Id.String() } <!-- <select name="account-id" class=""> -->
selected?={ filter.AccountId == account.Id.String() } <!-- <option value="">- Filter Acount -</option> -->
>{ account.Name }</option> <!-- for _, account := range accounts { -->
} <!-- <option -->
</select> <!-- value={ account.Id.String() } -->
<select name="treasure-chest-id" class="bg-white input"> <!-- selected?={ filter.AccountId == account.Id.String() } -->
<option value="">- Filter Treasure Chest -</option> <!-- >{ account.Name }</option> -->
for _, parent := range treasureChests { <!-- } -->
if parent.ParentId == nil { <!-- </select> -->
<optgroup label={ parent.Name }> <!-- <select name="treasure-chest-id" class=""> -->
for _, child := range treasureChests { <!-- <option value="">- Filter Treasure Chest -</option> -->
if child.ParentId != nil && *child.ParentId == parent.Id { <!-- for _, parent := range treasureChests { -->
<option <!-- if parent.ParentId == nil { -->
value={ child.Id.String() } <!-- <optgroup label={ parent.Name }> -->
selected?={ filter.TreasureChestId == child.Id.String() } <!-- for _, child := range treasureChests { -->
>{ child.Name }</option> <!-- if child.ParentId != nil && *child.ParentId == parent.Id { -->
} <!-- <option -->
} <!-- value={ child.Id.String() } -->
</optgroup> <!-- selected?={ filter.TreasureChestId == child.Id.String() } -->
} <!-- >{ child.Name }</option> -->
} <!-- } -->
</select> <!-- } -->
<select name="error" class="bg-white input"> <!-- </optgroup> -->
<option value="">- Filter Error -</option> <!-- } -->
<option <!-- } -->
value="true" <!-- </select> -->
selected?={ filter.Error == "true" } <!-- <select name="error" class=""> -->
>Has Errors</option> <!-- <option value="">- Filter Error -</option> -->
<option <!-- <option -->
value="false" <!-- value="true" -->
selected?={ filter.Error == "false" } <!-- selected?={ filter.Error == "true" } -->
>Has no Errors</option> <!-- >Has Errors</option> -->
</select> <!-- <option -->
<input id="page" name="page" type="hidden" value={ filter.Page }/> <!-- value="false" -->
</form> <!-- selected?={ filter.Error == "false" } -->
<button <!-- >Has no Errors</option> -->
hx-get="/transaction/new" <!-- </select> -->
hx-target="#transaction-items" <!-- <input id="page" name="page" type="hidden" value={ filter.Page }/> -->
hx-swap="afterbegin" <!-- </form> -->
class="button button-primary ml-auto px-2 flex items-center gap-2 justify-center" <!-- <button -->
> <!-- hx-get="/transaction/new" -->
@svg.Plus() <!-- hx-target="#transaction-items" -->
<p>New Transaction</p> <!-- hx-swap="afterbegin" -->
</button> <!-- class="" -->
</div> <!-- > -->
<div class="flex justify-end items-center gap-5 mt-5"> <!-- @svg.Plus() -->
<button id="pagePrev1" class="text-2xl p-2 text-yellow-700 font-black hover:bg-gray-200 rounded-lg decoration-yellow-400 decoration-[0.25rem] hover:underline"> <!-- <p>New Transaction</p> -->
&lt; <!-- </button> -->
</button>
<span class="text-gray-400 text-sm">Page: <span class="text-gray-800 text-xl" id="page1">{ getPageNumber(filter.Page) }</span></span>
<button id="pageNext1" class="text-2xl p-2 text-yellow-700 font-black hover:bg-gray-200 rounded-lg decoration-yellow-400 decoration-[0.25rem] hover:underline">
&gt;
</button>
</div> </div>
<!-- <div class=""> -->
<!-- <button id="pagePrev1" class=""> -->
<!-- &lt; -->
<!-- </button> -->
<!-- <span class="">Page: <span class="" id="page1">{ getPageNumber(filter.Page) }</span></span> -->
<!-- <button id="pageNext1" class=""> -->
<!-- &gt; -->
<!-- </button> -->
<!-- </div> -->
@items @items
<div class="flex justify-end items-center gap-5 mt-5"> <!-- <div class=""> -->
<button id="pagePrev2" class="text-2xl p-2 text-yellow-700 font-black hover:bg-gray-200 rounded-lg decoration-yellow-400 decoration-[0.25rem] hover:underline"> <!-- <button id="pagePrev2" class=""> -->
&lt; <!-- &lt; -->
</button> <!-- </button> -->
<span class="text-gray-400 text-sm">Page: <span class="text-gray-800 text-xl" id="page2">{ getPageNumber(filter.Page) }</span></span> <!-- <span class="">Page: <span class="" id="page2">{ getPageNumber(filter.Page) }</span></span> -->
<button id="pageNext2" class="text-2xl p-2 text-yellow-700 font-black hover:bg-gray-200 rounded-lg decoration-yellow-400 decoration-[0.25rem] hover:underline"> <!-- <button id="pageNext2" class=""> -->
&gt; <!-- &gt; -->
</button> <!-- </button> -->
</div> <!-- </div> -->
</div> </div>
} }
templ TransactionItems(transactions []*types.Transaction, accounts, treasureChests map[uuid.UUID]string) { templ TransactionItems(transactions []*types.Transaction, accounts, treasureChests map[uuid.UUID]string) {
<div id="transaction-items" class="my-6"> <div id="transaction-items" class="flex flex-col gap-8">
for _, transaction := range transactions { for _, transaction := range transactions {
@TransactionItem(transaction, accounts, treasureChests) @TransactionItem(transaction, accounts, treasureChests)
} }
@@ -96,209 +99,186 @@ templ TransactionItems(transactions []*types.Transaction, accounts, treasureChes
} }
templ EditTransaction(transaction *types.Transaction, accounts []*types.Account, treasureChests []*types.TreasureChest) { templ EditTransaction(transaction *types.Transaction, accounts []*types.Account, treasureChests []*types.TreasureChest) {
{{ // {{
var ( // var (
timestamp time.Time // timestamp time.Time
//
id string // id string
cancelUrl string // cancelUrl string
) // )
party := "" // party := ""
description := "" // description := ""
accountId := "" // accountId := ""
value := "0.00" // value := "0.00"
treasureChestId := "" // treasureChestId := ""
if transaction == nil { // if transaction == nil {
timestamp = time.Now().UTC().Truncate(time.Minute) // timestamp = time.Now().UTC().Truncate(time.Minute)
//
id = "new" // id = "new"
cancelUrl = "/empty" // cancelUrl = "/empty"
} else { // } else {
timestamp = transaction.Timestamp.UTC().Truncate(time.Minute) // timestamp = transaction.Timestamp.UTC().Truncate(time.Minute)
party = transaction.Party // party = transaction.Party
description = transaction.Description // description = transaction.Description
if transaction.AccountId != nil { // if transaction.AccountId != nil {
accountId = transaction.AccountId.String() // accountId = transaction.AccountId.String()
} // }
if transaction.TreasureChestId != nil { // if transaction.TreasureChestId != nil {
treasureChestId = transaction.TreasureChestId.String() // treasureChestId = transaction.TreasureChestId.String()
} // }
value = formatFloat(transaction.Value) // value = formatFloat(transaction.Value)
//
id = transaction.Id.String() // id = transaction.Id.String()
cancelUrl = "/transaction/" + id // cancelUrl = "/transaction/" + id
} // }
}} // }}
<div id="transaction" class="border-1 border-gray-300 w-full my-4 p-4 bg-gray-50 rounded-lg"> // <div id="transaction" class="">
<form // <form
hx-post={ "/transaction/" + id } // hx-post={ "/transaction/" + id }
hx-target="closest #transaction" // hx-target="closest #transaction"
hx-swap="outerHTML" // hx-swap="outerHTML"
class="text-xl flex justify-end gap-4 items-center" // class=""
> // >
<div class="grid grid-cols-[auto_auto] items-center gap-4 mr-auto"> // <div class="">
<label for="timestamp" class="text-sm text-gray-500">Transaction Date</label> // <label for="timestamp" class="">Transaction Date</label>
<input // <input
autofocus // autofocus
name="timestamp" // name="timestamp"
type="date" // type="date"
value={ timestamp.String() } // value={ timestamp.String() }
class="bg-white input datetime" // class=""
/> // />
<label for="party" class="text-sm text-gray-500">Party</label> // <label for="party" class="">Party</label>
<input // <input
name="party" // name="party"
type="text" // type="text"
value={ party } // value={ party }
class="mr-auto bg-white input" // class=""
/> // />
<label for="description" class="text-sm text-gray-500">Description</label> // <label for="description" class="">Description</label>
<input // <input
name="description" // name="description"
type="text" // type="text"
value={ description } // value={ description }
class="mr-auto bg-white input" // class=""
/> // />
<label for="value" class="text-sm text-gray-500">Value (€)</label> // <label for="value" class="">Value (€)</label>
<input // <input
name="value" // name="value"
step="0.01" // step="0.01"
type="number" // type="number"
value={ value } // value={ value }
class="bg-white input" // class=""
/> // />
<label for="account-id" class="text-sm text-gray-500">Account</label> // <label for="account-id" class="">Account</label>
<select // <select
name="account-id" // name="account-id"
class="bg-white input" // class=""
> // >
<option value="">-</option> // <option value="">-</option>
for _, account := range accounts { // for _, account := range accounts {
<option selected?={ account.Id.String() == accountId } value={ account.Id.String() }>{ account.Name }</option> // <option selected?={ account.Id.String() == accountId } value={ account.Id.String() }>{ account.Name }</option>
} // }
</select> // </select>
<label for="treasure-chest-id" class="text-sm text-gray-500">Treasure Chest</label> // <label for="treasure-chest-id" class="">Treasure Chest</label>
<select name="treasure-chest-id" class="bg-white input"> // <select name="treasure-chest-id" class="">
<option value="">- Filter Treasure Chest -</option> // <option value="">- Filter Treasure Chest -</option>
for _, parent := range treasureChests { // for _, parent := range treasureChests {
if parent.ParentId == nil { // if parent.ParentId == nil {
<optgroup label={ parent.Name }> // <optgroup label={ parent.Name }>
for _, child := range treasureChests { // for _, child := range treasureChests {
if child.ParentId != nil && *child.ParentId == parent.Id { // if child.ParentId != nil && *child.ParentId == parent.Id {
<option // <option
value={ child.Id.String() } // value={ child.Id.String() }
selected?={ treasureChestId == child.Id.String() } // selected?={ treasureChestId == child.Id.String() }
>{ child.Name }</option> // >{ child.Name }</option>
} // }
} // }
</optgroup> // </optgroup>
} // }
} // }
</select> // </select>
</div> // </div>
<button type="submit" class="button button-neglect px-1 flex items-center gap-2"> // <button type="submit" class="">
@svg.Save() // @svg.Save()
<span> // <span>
Save // Save
</span> // </span>
</button> // </button>
<button // <button
hx-get={ cancelUrl } // hx-get={ cancelUrl }
hx-target="closest #transaction" // hx-target="closest #transaction"
hx-swap="outerHTML" // hx-swap="outerHTML"
class="button button-neglect px-1 flex items-center gap-2" // class=""
> // >
<span class="h-4 w-4"> // <span class="">
@svg.Cancel() // @svg.Cancel()
</span> // </span>
<span> // <span>
Cancel // Cancel
</span> // </span>
</button> // </button>
</form> // </form>
</div> // </div>
} }
templ TransactionItem(transaction *types.Transaction, accounts, treasureChests map[uuid.UUID]string) { templ TransactionItem(transaction *types.Transaction, accounts, treasureChests map[uuid.UUID]string) {
{{
background := "bg-gray-50"
if transaction.Error != nil {
background = "bg-yellow-50"
}
}}
<div <div
id="transaction" id="transaction"
class={ "mt-4 border-1 grid grid-cols-[auto_auto_1fr_1fr_auto_auto_auto_auto] gap-4 items-center text-xl border-gray-300 w-full p-4 rounded-lg " + background } class="grid grid-cols-[1fr_auto]"
if transaction.Error != nil { if transaction.Error != nil {
title={ *transaction.Error } title={ *transaction.Error }
} }
> >
<p class="mr-auto datetime">{ transaction.Timestamp.String() }</p> <p class="datetime">{ transaction.Timestamp.String() }</p>
<div class="w-6"> <p class="text-2xl flex items-center col-start-2 row-start-1 row-end-3 align-center">
if transaction.Error != nil { if transaction.Value < 0 {
@svg.Info() <span class="text-red-700">- { types.FormatEuros(transaction.Value) }</span>
} else {
<span class="text-green-700">+ { types.FormatEuros(transaction.Value) }</span>
} }
</div> </p>
<div> <!-- if transaction.AccountId != nil { -->
<p class="text-sm text-gray-500"> <!-- <p class="col-start-1"> -->
if transaction.AccountId != nil { <!-- { accounts[*transaction.AccountId] } -->
{ accounts[*transaction.AccountId] } <!-- </p> -->
} else { <!-- } -->
&nbsp; if transaction.TreasureChestId != nil {
} <p class="col-start-1">
{ treasureChests[*transaction.TreasureChestId] }
</p> </p>
<p class="text-sm text-gray-500">
if transaction.TreasureChestId != nil {
{ treasureChests[*transaction.TreasureChestId] }
} else {
&nbsp;
}
</p>
</div>
<div>
<p class="text-sm text-gray-500">
if transaction.Party != "" {
{ transaction.Party }
} else {
&nbsp;
}
</p>
<p class="text-sm text-gray-500">
if transaction.Description != "" {
{ transaction.Description }
} else {
&nbsp;
}
</p>
</div>
if transaction.Value < 0 {
<p class="mr-8 min-w-22 text-right text-red-700">{ types.FormatEuros(transaction.Value) }</p>
} else {
<p class="mr-8 w-22 text-right text-green-700">{ types.FormatEuros(transaction.Value) }</p>
} }
<button <!-- if transaction.Party != "" { -->
hx-get={ "/transaction/" + transaction.Id.String() + "?edit=true" } <!-- <p class="col-start-1"> -->
hx-target="closest #transaction" <!-- { transaction.Party } -->
hx-swap="outerHTML" <!-- </p> -->
class="button button-neglect px-1 flex items-center gap-2" <!-- } -->
> <!-- if transaction.Description != "" { -->
@svg.Edit() <!-- <p class="col-start-1"> -->
<span> <!-- { transaction.Description } -->
Edit <!-- </p> -->
</span> <!-- } -->
</button> <!-- <div class="col-start-2 col-end-3 flex gap-10 justify-end"> -->
<button <!-- <button -->
hx-delete={ "/transaction/" + transaction.Id.String() } <!-- hx-get={ "/transaction/" + transaction.Id.String() + "?edit=true" } -->
hx-target="closest #transaction" <!-- hx-target="closest #transaction" -->
hx-swap="outerHTML" <!-- hx-swap="outerHTML" -->
hx-confirm="Are you sure you want to delete this transaction?" <!-- class="flex items-center gap-2" -->
class="button button-neglect px-1 flex items-center gap-2" <!-- > -->
> <!-- @svg.Edit() -->
@svg.Delete() <!-- Edit -->
<span> <!-- </button> -->
Delete <!-- <button -->
</span> <!-- hx-delete={ "/transaction/" + transaction.Id.String() } -->
</button> <!-- hx-target="closest #transaction" -->
<!-- hx-swap="outerHTML" -->
<!-- hx-confirm="Are you sure you want to delete this transaction?" -->
<!-- class="flex items-center gap-2" -->
<!-- > -->
<!-- @svg.Delete() -->
<!-- Delete -->
<!-- </button> -->
<!-- </div> -->
</div> </div>
} }

82
static/js/transaction.js
View File

@@ -1,43 +1,43 @@
document.addEventListener("DOMContentLoaded", () => { // document.addEventListener("DOMContentLoaded", () => {
if (!page || !page1 || !pagePrev1 || !pageNext1 || !page2 || !pagePrev2 || !pageNext2 || !transactionFilterForm) { // if (!page || !page1 || !pagePrev1 || !pageNext1 || !page2 || !pagePrev2 || !pageNext2 || !transactionFilterForm) {
return; // return;
} // }
//
//
const scrollToTop = function() { // const scrollToTop = function() {
window.scrollTo(0, 0); // window.scrollTo(0, 0);
}; // };
const incPage = function() { // const incPage = function() {
const currPage = Number(page.value); // const currPage = Number(page.value);
var nextPage = currPage // var nextPage = currPage
if (currPage > 1) { // if (currPage > 1) {
nextPage -= 1; // nextPage -= 1;
page.value = nextPage; // page.value = nextPage;
transactionFilterForm.dispatchEvent(new Event('change')); // transactionFilterForm.dispatchEvent(new Event('change'));
} // }
page1.textContent = nextPage; // page1.textContent = nextPage;
page2.textContent = nextPage; // page2.textContent = nextPage;
scrollToTop(); // scrollToTop();
}; // };
const decPage = function() { // const decPage = function() {
const currPage = Number(page.value); // const currPage = Number(page.value);
var nextPage = currPage + 1; // var nextPage = currPage + 1;
page.value = nextPage; // page.value = nextPage;
transactionFilterForm.dispatchEvent(new Event('change')); // transactionFilterForm.dispatchEvent(new Event('change'));
page1.textContent = nextPage; // page1.textContent = nextPage;
page2.textContent = nextPage; // page2.textContent = nextPage;
scrollToTop(); // scrollToTop();
}; // };
//
//
//
pagePrev1.addEventListener("click", incPage); // pagePrev1.addEventListener("click", incPage);
pagePrev2.addEventListener("click", incPage); // pagePrev2.addEventListener("click", incPage);
//
pageNext1.addEventListener("click", decPage); // pageNext1.addEventListener("click", decPage);
pageNext2.addEventListener("click", decPage); // pageNext2.addEventListener("click", decPage);
//
console.log("initialized pagination"); // console.log("initialized pagination");
}) // })