Recount-Server/web/templates/transactions.templ

102 lines
4.3 KiB
Text

package templates
templ TransactionsPage(userID int, accounts *[]string) {
<title>Transactions</title>
<div class="d-flex-col mx-4 h-100" data-main-body="true">
<div class="c-crust row cr-all p-5" style="height: fit-content">
<button
class="borderless-btn dropdown-button"
aria-describedby="filter-popup"
data-dropdown-target="filter-popup"
data-dropdown-direction="bottom-start"
data-dropdown-motion="expand-down"
>
<i class="" data-feather="filter"></i>
<span class="ms-3 my-auto">Add Filter</span>
</button>
<div class="popup-menu" id="filter-popup" role="tooltip" style="display:none;">
<div class="d-flex p-3">
<select class="select-swapout select">
<option data-select-div="filter-accounts">Account</option>
<option data-select-div="filter-two-inputs">Amount</option>
<option data-select-div="filter-two-inputs">Date</option>
<option data-select-div="filter-contains">Description</option>
<option data-select-div="filter-two-inputs">ID</option>
</select>
<div id="filter-two-inputs" class="d-flex" style="display: none;">
<input type="text"></input>
<select class="ms-2 select">
<option>></option>
<option>=</option>
<option>{"<"}</option>
</select>
<input class="ms-2" type="text"></input>
</div>
<div id="filter-contains" class="d-flex" style="display: none;">
<select class="ms-2 select">
<option>Contains</option>
<option>Does Not Contain</option>
</select>
<input class="ms-2" type="text"></input>
</div>
<div id="filter-accounts" class="d-flex">
<select class="ms-2 select">
<option>=</option>
</select>
<select class="ms-2 select">
for _, value := range *accounts {
<option>{value}</option>
}
</select>
</div>
<button
class="cr-all ms-3 borderless-btn btn-sm btn-c-invert c-green"
>Add
</button>
</div>
</div>
<button class="ms-5 borderless-btn">
<span class="my-auto mx-3">No Filters</span>
</button>
</div>
<div class="row mt-5">
<table class="card-table table table-striped cr-all">
<colgroup>
<col style="width: 2%"></col>
<col style="width: 15%"></col>
<col style="width: 30%"></col>
<col style="width: 15%"></col>
<col style="width: 3%"></col>
<col style="width: 1%"></col>
</colgroup>
<thead>
<tr>
<td>
</td>
<td>
<div class="d-flex">
<span class="my-auto me-0">
ID
</span>
<i class="my-auto ms-0 me-auto" data-feather="chevron-up"></i>
</div>
</td>
<td>Account</td>
<td>Date</td>
<td></td>
<td class="t-e" style="width:auto">Amount</td>
</tr>
</thead>
<tbody
hx-trigger="load delay:0.25s"
hx-get="/components/data/transaction_table_rows"
hx-params=""
>
</tbody>
</table>
</div>
</div>
}