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

src/main/java/com/example/demo/app/presentation/controller/TransactionController.java

@@ -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.CATEGORY_FORM_LIST, categoryFormList);

src/main/resources/templates/transaction_create.html

@@ -23,34 +23,23 @@
 
 			<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">
-				      <label for="transactionDate"
+						<label for="transactionDate" class="form-label">
-					         class="form-label">
 							日付
 						</label>
-				      <input type="date" 
+						<input type="date" id="transactionDate" class="form-select" name="transactionDate"
-					         id="transactionDate" 
+							th:value="*{transactionDate}" required>
-							 class="form-select"
-							 name="transactionDate" 
-							 th:value="*{transactionDate}"
-							 required>
 					</div>
 
 					<div class="mb-3">
 
-	                    <label for="transactionType"
+						<label for="transactionType" class="form-label">
-	                           class="form-label">
 							収入・支出
 						</label>
 
-	                    <select id="transactionType"
+						<select id="transactionType" class="form-select" th:field="*{transactionType}" required>
-	                            class="form-select"
-	                            th:field="*{transactionType}"  
-								required>
 
 							<option value="">
 								選択してください
@@ -70,23 +59,22 @@
 
 					<div class="mb-3">
 
-	                    <label for="categoryId"
+						<label for="categoryId" class="form-label">
-	                           class="form-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>
 
-	                        <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 class="incomeListClass" th:each="category : ${incomeList}"
+								th:value="${category.categoryId}" th:text="${category.categoryName}">
 							</option>
 
 						</select>
@@ -95,30 +83,20 @@
 
 					<div class="mb-3">
 
-	                    <label for="amount"
+						<label for="amount" class="form-label">
-	                           class="form-label">
 							金額
 						</label>
 
-	                    <input type="number"
+						<input type="number" id="amount" class="form-control" th:field="*{amount}" min="1"
-	                           id="amount"
+							max="100000000" placeholder="金額を入力してください" required>
-	                           class="form-control"
-	                           th:field="*{amount}"
-	                           min="0"
-							   max="100000000"
-	                           placeholder="金額を入力してください"  
-							   required>
 
 					</div>
 
-	                <input type="hidden"
+					<input type="hidden" name="today" th:value="${today}">
-	                       name="today"
-	                       th:value="${today}">
 
 					<div class="d-grid">
 
-	                    <button type="submit"
+						<button type="submit" class="btn btn-primary">
-	                            class="btn btn-primary">
 
 							登録
 
@@ -136,6 +114,50 @@
 
 	<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>