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

Compare commits

merge into: x:prod
Branches Tags
x:prod x:fix/lint-errors x:fix/linting x:111-transaction-ui
...
pull from: x:111-transaction-ui
Branches Tags
x:prod x:fix/lint-errors x:fix/linting x:111-transaction-ui

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

82
static/js/transaction.js
View File

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