From 061d63a8add5b2d49275718949058c67c01d23de Mon Sep 17 00:00:00 2001 From: Tim Wundenberg Date: Tue, 19 Aug 2025 22:05:35 +0200 Subject: [PATCH] feat(ui): #111 draft for (unfinished) mobile transaction-ui --- .../template/transaction/transaction.templ | 520 +++++++++--------- static/js/transaction.js | 82 +-- 2 files changed, 291 insertions(+), 311 deletions(-) diff --git a/internal/template/transaction/transaction.templ b/internal/template/transaction/transaction.templ index 97a446b..f432183 100644 --- a/internal/template/transaction/transaction.templ +++ b/internal/template/transaction/transaction.templ @@ -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) { -
-
-
- - - - -
- -
-
- - Page: { getPageNumber(filter.Page) } - +templ Transaction( + items templ.Component, + filter types.TransactionItemsFilter, + accounts []*types.Account, + treasureChests []*types.TreasureChest) { +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + @items -
- - Page: { getPageNumber(filter.Page) } - -
+ + + + + + + + +
} templ TransactionItems(transactions []*types.Transaction, accounts, treasureChests map[uuid.UUID]string) { -
+
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 - } - }} -
-
-
- - - - - - - - - - - - -
- - -
-
+ // {{ + // 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 + // } + // }} + //
+ //
+ //
+ // + // + // + // + // + // + // + // + // + // + // + // + //
+ // + // + //
+ //
} templ TransactionItem(transaction *types.Transaction, accounts, treasureChests map[uuid.UUID]string) { - {{ - background := "bg-gray-50" - if transaction.Error != nil { - background = "bg-yellow-50" - } - }}
-

{ transaction.Timestamp.String() }

-
- if transaction.Error != nil { - @svg.Info() +

{ transaction.Timestamp.String() }

+

+ if transaction.Value < 0 { + - { types.FormatEuros(transaction.Value) } + } else { + + { types.FormatEuros(transaction.Value) } } -

-
-

- if transaction.AccountId != nil { - { accounts[*transaction.AccountId] } - } else { -   - } +

+ + + + + + if transaction.TreasureChestId != nil { +

+ { treasureChests[*transaction.TreasureChestId] }

-

- if transaction.TreasureChestId != nil { - { treasureChests[*transaction.TreasureChestId] } - } else { -   - } -

-
-
-

- if transaction.Party != "" { - { transaction.Party } - } else { -   - } -

-

- if transaction.Description != "" { - { transaction.Description } - } else { -   - } -

-
- if transaction.Value < 0 { -

{ types.FormatEuros(transaction.Value) }

- } else { -

{ types.FormatEuros(transaction.Value) }

} - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
} diff --git a/static/js/transaction.js b/static/js/transaction.js index abd1af7..02d9478 100644 --- a/static/js/transaction.js +++ b/static/js/transaction.js @@ -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"); +// })