feat(ui): #111 draft for (unfinished) mobile transaction-ui
All checks were successful
Build Docker Image / Build-Docker-Image (push) Successful in 6m43s
All checks were successful
Build Docker Image / Build-Docker-Image (push) Successful in 6m43s
This commit is contained in:
@@ -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">
|
||||
<
|
||||
</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">
|
||||
>
|
||||
</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=""> -->
|
||||
<!-- < -->
|
||||
<!-- </button> -->
|
||||
<!-- <span class="">Page: <span class="" id="page1">{ getPageNumber(filter.Page) }</span></span> -->
|
||||
<!-- <button id="pageNext1" class=""> -->
|
||||
<!-- > -->
|
||||
<!-- </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">
|
||||
<
|
||||
</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">
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
<!-- <div class=""> -->
|
||||
<!-- <button id="pagePrev2" class=""> -->
|
||||
<!-- < -->
|
||||
<!-- </button> -->
|
||||
<!-- <span class="">Page: <span class="" id="page2">{ getPageNumber(filter.Page) }</span></span> -->
|
||||
<!-- <button id="pageNext2" class=""> -->
|
||||
<!-- > -->
|
||||
<!-- </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()
|
||||
}
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500">
|
||||
if transaction.AccountId != nil {
|
||||
{ accounts[*transaction.AccountId] }
|
||||
} else {
|
||||
|
||||
}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500">
|
||||
if transaction.TreasureChestId != nil {
|
||||
{ treasureChests[*transaction.TreasureChestId] }
|
||||
} else {
|
||||
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500">
|
||||
if transaction.Party != "" {
|
||||
{ transaction.Party }
|
||||
} else {
|
||||
|
||||
}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500">
|
||||
if transaction.Description != "" {
|
||||
{ transaction.Description }
|
||||
} else {
|
||||
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<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 {
|
||||
<p class="mr-8 min-w-22 text-right text-red-700">{ types.FormatEuros(transaction.Value) }</p>
|
||||
<span class="text-red-700">- { types.FormatEuros(transaction.Value) }</span>
|
||||
} else {
|
||||
<p class="mr-8 w-22 text-right text-green-700">{ types.FormatEuros(transaction.Value) }</p>
|
||||
<span class="text-green-700">+ { types.FormatEuros(transaction.Value) }</span>
|
||||
}
|
||||
<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>
|
||||
</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>
|
||||
}
|
||||
<!-- 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>
|
||||
}
|
||||
|
||||
|
||||
@@ -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");
|
||||
// })
|
||||
|
||||
|
||||
Reference in New Issue
Block a user