added more to right quick access
This commit is contained in:
parent
6d547e0585
commit
bf84fcce29
6 changed files with 93 additions and 60 deletions
|
|
@ -39,10 +39,26 @@ func getTransactionsRows(w http.ResponseWriter, req *http.Request) {
|
|||
component.Render(context.Background(), w);
|
||||
}
|
||||
|
||||
func getTransactionQuickAccess(w http.ResponseWriter, req *http.Request) {
|
||||
component := transaction_quick_access();
|
||||
component.Render(context.Background(), w);
|
||||
func getTransactionQuickAccessEntries(w http.ResponseWriter, req *http.Request) {
|
||||
transactions := make([]types.HumanLegibleTransaction, 20)
|
||||
|
||||
// Populate the slice with dummy data (you can replace this with your actual data)
|
||||
for i := 20; i > 0; i-- {
|
||||
transaction := types.HumanLegibleTransaction{
|
||||
Id: i,
|
||||
Amount: fmt.Sprintf("%d.00", (i+1)*100),
|
||||
Description: sql.NullString{String: fmt.Sprintf("Transaction %d", i+1), Valid: true},
|
||||
AccountName: sql.NullString{String: "Savings", Valid: true},
|
||||
Account: 123,
|
||||
Bucket: sql.NullInt64{Int64: int64(i + 100), Valid: true},
|
||||
BucketName: sql.NullString{String: fmt.Sprintf("Bucket %d", i+1), Valid: true},
|
||||
Date: time.Now(),
|
||||
}
|
||||
|
||||
transactions[20 - i] = transaction
|
||||
}
|
||||
component := transaction_quick_access_entries(&transactions);
|
||||
component.Render(context.Background(), w);
|
||||
}
|
||||
|
||||
func getRightPanelQuickAccess(w http.ResponseWriter, req *http.Request) {
|
||||
|
|
|
|||
|
|
@ -57,35 +57,32 @@ templ account_summary_rows(accounts *[]types.TwoIntsItem){
|
|||
}
|
||||
}
|
||||
|
||||
templ transaction_quick_access() {
|
||||
<div id="transaction-quick-access-panel">
|
||||
<div class="t-header">
|
||||
<button
|
||||
class="borderless-btn btn-sm mx-auto c-green ch-teal"
|
||||
style="color: var(--pf-base);"
|
||||
>
|
||||
<i class="" data-feather="plus"></i>
|
||||
Add New
|
||||
</button>
|
||||
<div class="m-auto d-flex">
|
||||
<input id="show-pending-transactions" type="checkbox"></input>
|
||||
<label for="show-pending-transactions">
|
||||
Show Pending
|
||||
</label>
|
||||
templ transaction_quick_access_entries(transactions *[]types.HumanLegibleTransaction) {
|
||||
for _, value := range *transactions {
|
||||
<div class="card-item">
|
||||
<div class="row">
|
||||
<div class="w-50 d-flex">
|
||||
<span class="mx-auto">{strconv.Itoa(value.Id)}</span>
|
||||
</div>
|
||||
<div class="w-50 d-flex">
|
||||
if (len(value.Amount) > 0 && value.Amount[0] == '-') {
|
||||
<span class="mx-auto negative">{value.Amount}</span>
|
||||
} else {
|
||||
<span class="mx-auto positive">+{value.Amount}</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="t-list">
|
||||
<div class="tab-div">
|
||||
<button id="open-draft">
|
||||
<i data-feather="file-plus"></i>
|
||||
</button>
|
||||
<div class="row">
|
||||
<div class="w-50 d-flex">
|
||||
<span class="mx-auto">{value.AccountName.String}</span>
|
||||
</div>
|
||||
<div class="t-list-container">
|
||||
|
||||
<div class="w-50 d-flex">
|
||||
<span class="mx-auto c-surface0">Description</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
templ right_panel_quick_access() {
|
||||
<div id="quick-access-panel">
|
||||
|
|
|
|||
|
|
@ -31,12 +31,12 @@ func WebRouter() http.Handler {
|
|||
r.Get("/transactions", getTransactionsPage)
|
||||
|
||||
r.Get("/components/account_summaries", getAccountSummaries)
|
||||
r.Get("/components/transactions_quick_access", getTransactionQuickAccess)
|
||||
r.Get("/components/right_panel_quick_access", getRightPanelQuickAccess)
|
||||
|
||||
r.Get("/components/data/transaction_table_rows", getTransactionsRows)
|
||||
r.Get("/components/data/expenditure_chart", getExpenditureChart)
|
||||
r.Get("/components/data/account_summary/{accountID}", getAccountSummaryChart)
|
||||
r.Get("/components/data/transaction_quick_access", getTransactionQuickAccessEntries)
|
||||
|
||||
r.Handle("/static/*", http.StripPrefix("/static/", http.FileServer(http.Dir("web/static/"))))
|
||||
return r
|
||||
|
|
|
|||
|
|
@ -49,9 +49,9 @@ nav {
|
|||
}
|
||||
|
||||
#transaction-quick-access-panel {
|
||||
height: 100%;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
height: 60%;
|
||||
|
||||
.t-header {
|
||||
display: flex;
|
||||
|
|
@ -71,9 +71,7 @@ nav {
|
|||
|
||||
.t-list {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
height: inherit;
|
||||
.tab-div {
|
||||
height: 100%;
|
||||
width: 50px;
|
||||
|
|
@ -100,12 +98,19 @@ nav {
|
|||
.t-list-container {
|
||||
overflow-y: scroll;
|
||||
border: 2px solid var(--#{$prefix}-surface1);
|
||||
margin: 5px;
|
||||
margin-left: 0px;
|
||||
background-color: var(--#{$prefix}-base);
|
||||
height: 100%;
|
||||
flex-grow: 1;
|
||||
border-radius: $border-radius;
|
||||
.card-item {
|
||||
border-radius: $border-radius;
|
||||
background-color: var(--#{$prefix}-surface0);
|
||||
margin: 10px;
|
||||
.row {
|
||||
width: 100%;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,17 +49,6 @@ $directions: (
|
|||
padding-bottom: $val;
|
||||
}
|
||||
}
|
||||
.m-auto {
|
||||
margin: auto;
|
||||
}
|
||||
.my-auto {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
$w_h_sizes: (
|
||||
'25': 25%,
|
||||
|
|
@ -124,6 +113,13 @@ $w_h_sizes: (
|
|||
color: var(--#{$prefix}-text) !important;
|
||||
}
|
||||
|
||||
.positive {
|
||||
color: var(--#{$prefix}-green);
|
||||
}
|
||||
.negative {
|
||||
color: var(--#{$prefix}-red);
|
||||
}
|
||||
|
||||
.borderless-btn.btn-sm {
|
||||
padding: 4px 8px 4px 8px;
|
||||
}
|
||||
|
|
@ -184,12 +180,6 @@ table.table-striped {
|
|||
}
|
||||
}
|
||||
}
|
||||
.positive {
|
||||
color: var(--#{$prefix}-green);
|
||||
}
|
||||
.negative {
|
||||
color: var(--#{$prefix}-red);
|
||||
}
|
||||
}
|
||||
|
||||
.popup-menu {
|
||||
|
|
|
|||
|
|
@ -56,13 +56,38 @@
|
|||
{{.InnerHtml}}
|
||||
</div>
|
||||
<div id="right-col">
|
||||
<div id="transaction-quick-access-panel">
|
||||
<div class="t-header">
|
||||
<button
|
||||
class="borderless-btn btn-sm mx-auto c-green ch-teal"
|
||||
style="color: var(--pf-base);"
|
||||
>
|
||||
<i class="" data-feather="plus"></i>
|
||||
Add New
|
||||
</button>
|
||||
<div class="m-auto d-flex">
|
||||
<input id="show-pending-transactions" type="checkbox"></input>
|
||||
<label for="show-pending-transactions">
|
||||
Show Pending
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="t-list">
|
||||
<div class="tab-div">
|
||||
<button id="open-draft">
|
||||
<i data-feather="file-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
id="transactions-quick-access"
|
||||
hx-get="/components/transactions_quick_access"
|
||||
hx-swap="innerHtml swap:0.2s settle:0.2s"
|
||||
class="t-list-container"
|
||||
hx-get="/components/data/transaction_quick_access"
|
||||
hx-trigger="load"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 25%"></div>
|
||||
|
||||
<div
|
||||
class=""
|
||||
|
|
|
|||
Loading…
Reference in a new issue