[FIX] 収支登録の際、収支項目を分けました。金額の最少額は1円に設定しました。

This commit is contained in:
s-choi
2026-09-28 11:11:28 +09:00
parent 47185d8f26
commit b76be8f38a
2 changed files with 123 additions and 83 deletions

View File

@@ -218,6 +218,24 @@ public class TransactionController {
} }
} }
List<CategoryForm> expenseList = new ArrayList<CategoryForm>();
List<CategoryForm> incomeList = new ArrayList<CategoryForm>();
for (CategoryForm categoryForm : categoryFormList) {
if (categoryForm.getTransactionType() == 0) {
expenseList.add(categoryForm);
} else {
incomeList.add(categoryForm);
}
}
model.addAttribute(PageReturnAttributeKeyword.EXPENSE_LIST, expenseList);
model.addAttribute(PageReturnAttributeKeyword.INCOME_LIST, incomeList);
model.addAttribute(PageReturnAttributeKeyword.TRANSACTION_FORM, transactionForm); model.addAttribute(PageReturnAttributeKeyword.TRANSACTION_FORM, transactionForm);
model.addAttribute(PageReturnAttributeKeyword.CATEGORY_FORM_LIST, categoryFormList); model.addAttribute(PageReturnAttributeKeyword.CATEGORY_FORM_LIST, categoryFormList);

View File

@@ -15,127 +15,149 @@
<div class="main-container"> <div class="main-container">
<h1 class="page-title"> <h1 class="page-title">
取引登録 取引登録
</h1> </h1>
<div class="card shadow-sm"> <div class="card shadow-sm">
<div class="card-body"> <div class="card-body">
<form th:action="@{/transaction/create}" <form th:action="@{/transaction/create}" th:object="${transactionForm}" method="post">
th:object="${transactionForm}"
method="post">
<div class="mb-3"> <div class="mb-3">
<label for="transactionDate" <label for="transactionDate" class="form-label">
class="form-label"> 日付
日付 </label>
</label> <input type="date" id="transactionDate" class="form-select" name="transactionDate"
<input type="date" th:value="*{transactionDate}" required>
id="transactionDate"
class="form-select"
name="transactionDate"
th:value="*{transactionDate}"
required>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="transactionType" <label for="transactionType" class="form-label">
class="form-label"> 収入・支出
収入・支出 </label>
</label>
<select id="transactionType" <select id="transactionType" class="form-select" th:field="*{transactionType}" required>
class="form-select"
th:field="*{transactionType}"
required>
<option value=""> <option value="">
選択してください 選択してください
</option> </option>
<option value="1"> <option value="1">
支出 支出
</option> </option>
<option value="2"> <option value="2">
収入 収入
</option> </option>
</select> </select>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="categoryId" <label for="categoryId" class="form-label">
class="form-label"> カテゴリ
カテゴリ </label>
</label>
<select id="categoryId" <select id="categoryId" class="form-select" th:field="*{categoryId}" required>
class="form-select"
th:field="*{categoryId}"
required>
<option value=""> <option value="">
選択してください 選択してください
</option> </option>
<option th:each="category : ${categoryFormList}" <option class="expenseListClass" th:each="category : ${expenseList}"
th:value="${category.categoryId}" th:value="${category.categoryId}" th:text="${category.categoryName}">
th:text="${category.categoryName}"> </option>
</option>
</select> <option class="incomeListClass" th:each="category : ${incomeList}"
th:value="${category.categoryId}" th:text="${category.categoryName}">
</option>
</div> </select>
<div class="mb-3"> </div>
<label for="amount" <div class="mb-3">
class="form-label">
金額
</label>
<input type="number" <label for="amount" class="form-label">
id="amount" 金額
class="form-control" </label>
th:field="*{amount}"
min="0"
max="100000000"
placeholder="金額を入力してください"
required>
</div> <input type="number" id="amount" class="form-control" th:field="*{amount}" min="1"
max="100000000" placeholder="金額を入力してください" required>
<input type="hidden" </div>
name="today"
th:value="${today}">
<div class="d-grid"> <input type="hidden" name="today" th:value="${today}">
<button type="submit" <div class="d-grid">
class="btn btn-primary">
登録 <button type="submit" class="btn btn-primary">
</button> 登録
</div> </button>
</form> </div>
</div> </form>
</div> </div>
</div>
</div> </div>
<div th:replace="~{footer :: footer}"></div> <div th:replace="~{footer :: footer}"></div>
<script>
const transactionType = document.getElementById("transactionType");
const categoryId = document.getElementById("categoryId");
const expenseList = document.getElementsByClassName("expenseListClass");
const incomeList = document.getElementsByClassName("incomeListClass");
transactionType.addEventListener("change", function () {
if (this.value === "1") {
for (let i = 0; i < expenseList.length; i++) {
expenseList[i].style.display = "";
}
for (let i = 0; i < incomeList.length; i++) {
incomeList[i].style.display = "none";
}
} else if (this.value === "2") {
for (let i = 0; i < expenseList.length; i++) {
expenseList[i].style.display = "none";
}
for (let i = 0; i < incomeList.length; i++) {
incomeList[i].style.display = "";
}
} else {
for (let i = 0; i < expenseList.length; i++) {
expenseList[i].style.display = "none";
}
for (let i = 0; i < incomeList.length; i++) {
incomeList[i].style.display = "none";
}
}
categoryId.value = "";
});
</script>
</body> </body>