Improving the formatting using Tailwind CSS (#15)

* added makefile for simple development

* More additions to make file and Makefile reference in README

* cleaning up readme

* cleaning up readme

* cleaning up readme

* cleaning up readme

* changes to go files?

* refactoring templ files and prettifying

* adding base template and rendered HTML files

* css change

* cleanup

* cleanupV2

.gitignore

@@ -23,3 +23,10 @@ go.work
 # esteanes 20240929 - expense manager executable
 expense-manager
 
+# node related files and directories
+node_modules/
+package-lock.json
+package.json
+
+# temporary directory which air uses
+tmp/

Makefile

@@ -5,7 +5,6 @@ tailwind-watch:
 	npx tailwindcss -i ./static/css/input.css -o ./static/css/output.css --watch 
 templ-watch:
 	templ generate --watch 
-
 air:
 	air 
 watch:

datafetcher/functions/functions.go

@@ -2,5 +2,5 @@ package functions
 
 const (
 	AccountIdQueryParam      = "accountId"
-	TransactionNumQueryParam = "numTransaction"
+	TransactionNumQueryParam = "numTransactions"
 )

datafetcher/handlers/accounts.go

@@ -33,20 +33,19 @@ func (h *AccountHandler) Get(w http.ResponseWriter, r *http.Request) {
 	w.Header().Set("Content-Type", "text/html charset=utf-8")
 	filterOwnershipType := upclient.OwnershipTypeEnum("INDIVIDUAL")
 	accountChannel := make(chan upclient.AccountResource, 10)
-	clonedChannels := Clone(accountChannel, 2)
-	accountChannel1 := <-clonedChannels
-	accountChannel2 := <-clonedChannels
 	go h.GetAccounts(accountChannel, filterOwnershipType)
 
-	templ.Handler(templates.Accounts(accountChannel1, accountChannel2), templ.WithStreaming()).ServeHTTP(w, r)
+	templ.Handler(templates.Accounts("Account Information", accountChannel, true), templ.WithStreaming()).ServeHTTP(w, r)
 }
 
 func (h *AccountHandler) GetAccounts(accountChannel chan upclient.AccountResource, ownershipType upclient.OwnershipTypeEnum) {
 	defer close(accountChannel)
 	resp, r2, err := h.UpClient.AccountsAPI.AccountsGet(h.UpAuth).PageSize(h.MaxPageSize).FilterOwnershipType(ownershipType).Execute()
 	if err != nil {
 		h.Log.Println(fmt.Sprintf("Error when calling `AccountsAPI.AccountsGet`: %s\n", err))
-		h.Log.Println(fmt.Sprintf("Full HTTP response: %v\n", r2))
+		if r2 != nil {
+			h.Log.Println(fmt.Sprintf("Full HTTP response: %v\n", r2))
+		}
 		h.Log.Println("Unable to get account information")
 	}
 

datafetcher/handlers/transactions.go

@@ -49,7 +49,7 @@ func (h *TransactionsHandler) Get(w http.ResponseWriter, r *http.Request) {
 	}
 	accountsChannel := make(chan upclient.AccountResource)
 	go h.AccountHandler.GetAccounts(accountsChannel, upclient.OwnershipTypeEnum("INDIVIDUAL"))
-	templ.Handler(templates.Transactions(transactionsChannel, accountsChannel), templ.WithStreaming()).ServeHTTP(w, r)
+	templ.Handler(templates.Transactions("Transactions", transactionsChannel, accountsChannel, strconv.Itoa(int(numTransactions))), templ.WithStreaming()).ServeHTTP(w, r)
 
 }
 func (h *TransactionsHandler) getTransactionsForAllAccounts(transactionsChannel chan upclient.TransactionResource, numTransactions int32) {
@@ -70,8 +70,9 @@ func (h *TransactionsHandler) getTransactionsForAllAccounts(transactionsChannel
 		resp, r2, err := getRequest.Execute()
 		if err != nil {
 			h.Log.Println(fmt.Sprintf("Error when calling `TransactionsAPI.TransactionsGet``: %s\n", err))
-			h.Log.Println(fmt.Sprintf("Full HTTP response: %s\n", r2.Body))
-			h.Log.Println(r2.Body)
+			if r2 != nil {
+				h.Log.Println(fmt.Sprintf("Full HTTP response: %s\n", r2.Body))
+			}
 			return
 		}
 		pageAfter = resp.Links.Next.Get()
@@ -108,8 +109,9 @@ func (h *TransactionsHandler) getTransactionsForSpecifiedAccount(transactionsCha
 		resp, r2, err := getRequest.Execute()
 		if err != nil {
 			h.Log.Println(fmt.Sprintf("Error when calling `TransactionsAPI.TransactionsGet``: %s\n", err))
-			h.Log.Println(fmt.Sprintf("Full HTTP response: %s\n", r2.Body))
-			h.Log.Println(r2.Body)
+			if r2 != nil {
+				h.Log.Println(fmt.Sprintf("Full HTTP response: %s\n", r2.Body))
+			}
 			return
 		}
 		pageAfter = resp.Links.Next.Get()

datafetcher/templates/accounts.templ

@@ -6,53 +6,38 @@ import (
 	"strings"
 )
 
-templ AccountDetails(accounts <-chan upclient.AccountResource) {
-	<h1 class="text-4xl">Accounts - Details</h1>
-	<ul>
-		for account := range accounts {
-			@templ.Flush() {
-				<div>
-					<h2 class="text-xl font-bold">{ account.Attributes.DisplayName }</h2>
-					<p>Account Type: { strings.ToTitle(string(account.Attributes.AccountType)) }</p>
-					<p>Balance: { account.Attributes.Balance.CurrencyCode } { account.Attributes.Balance.Value }</p>
-					<p>Created At: { account.Attributes.CreatedAt.String() }</p>
-					<p>Id: { account.Id }</p>
+templ AccountButtons(accounts <-chan upclient.AccountResource, isExtendedInfo bool) {
+	for account := range accounts {
+		@templ.Flush() {
+			<form action="/transactions" method="GET" class="h-full w-full">
+				<input type="hidden" name={ functions.AccountIdQueryParam } value={ account.Id }/>
+				<div class="p-6 border border-gray-300 rounded-lg bg-gray-50 hover:bg-yellow-400 cursor-pointer" onclick="this.closest('form').submit()">
+					<h2 class="text-xl text-center font-bold mb-4">{ account.Attributes.DisplayName }</h2>
+					<p><span class="font-bold">Account Type:</span> { strings.ToTitle(string(account.Attributes.AccountType)) }</p>
+					<p><span class="font-bold">Balance:</span> { account.Attributes.Balance.CurrencyCode } { account.Attributes.Balance.Value }</p>
+					if isExtendedInfo {
+						<p><span class="font-bold">Id:</span> { account.Id }</p>
+						<p><span class="font-bold">Created At:</span> { account.Attributes.CreatedAt.String() }</p>
+					}
 				</div>
-				<hr/>
-			}
+			</form>
 		}
-	</ul>
+	}
 }
 
-templ AccountButtons(accounts <-chan upclient.AccountResource) {
-	<h1 class="text-4xl">Accounts</h1>
-	<ul>
-		<form action="/transactions" method="GET">
-			<button type="submit">All accounts</button>
-		</form>
-		for account := range accounts {
-			@templ.Flush() {
-				<form action="/transactions" method="GET">
-					<button type="submit" name={ functions.AccountIdQueryParam } value={ account.Id }>{ account.Attributes.DisplayName } { account.Attributes.Balance.Value } { account.Attributes.Balance.CurrencyCode }</button>
-				</form>
+templ AccountDetails(accounts <-chan upclient.AccountResource, isExtendedInfo bool) {
+	<div class="flex items-center justify-center min-h-screen bg-gray-100">
+		<div class="container mx-auto p-8 bg-gradient-to-r from-orange-50 to-orange-200 shadow-lg rounded-lg">
+			<h1 class="text-4xl font-bold text-center mb-8">Accounts - Details</h1>
+			@GridOrganiser() {
+				@AccountButtons(accounts, isExtendedInfo)
 			}
-		}
-	</ul>
+		</div>
+	</div>
 }
 
-templ Accounts(accounts1 <-chan upclient.AccountResource, accounts2 <-chan upclient.AccountResource) {
-	<!DOCTYPE html>
-	<html lang="en">
-		<head>
-			<meta charset="UTF-8"/>
-			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-			<script src="https://unpkg.com/[email protected]"></script>
-			<link rel="stylesheet" href="/static/css/output.css"/>
-			<title>Accounts</title>
-		</head>
-		<body>
-			@AccountButtons(accounts2)
-			@AccountDetails(accounts1)
-		</body>
-	</html>
+templ Accounts(title string, accounts <-chan upclient.AccountResource, isExtendedInfo bool) {
+	@Base(title) {
+		@AccountDetails(accounts, isExtendedInfo)
+	}
 }