From b76be8f38ac7d21681dc91661498ddca863b64cd Mon Sep 17 00:00:00 2001
From: s-choi <choi-suyeong@iij.ad.jp>
Date: Mon, 28 Sep 2026 11:11:28 +0900
Subject: [PATCH] =?UTF-8?q?[FIX]=20=E5=8F=8E=E6=94=AF=E7=99=BB=E9=8C=B2?=
 =?UTF-8?q?=E3=81=AE=E9=9A=9B=E3=80=81=E5=8F=8E=E6=94=AF=E9=A0=85=E7=9B=AE?=
 =?UTF-8?q?=E3=82=92=E5=88=86=E3=81=91=E3=81=BE=E3=81=97=E3=81=9F=E3=80=82?=
 =?UTF-8?q?=E9=87=91=E9=A1=8D=E3=81=AE=E6=9C=80=E5=B0=91=E9=A1=8D=E3=81=AF?=
 =?UTF-8?q?1=E5=86=86=E3=81=AB=E8=A8=AD=E5=AE=9A=E3=81=97=E3=81=BE?=
 =?UTF-8?q?=E3=81=97=E3=81=9F=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../controller/TransactionController.java     |  20 +-
 .../templates/transaction_create.html         | 186 ++++++++++--------
 2 files changed, 123 insertions(+), 83 deletions(-)

diff --git a/src/main/java/com/example/demo/app/presentation/controller/TransactionController.java b/src/main/java/com/example/demo/app/presentation/controller/TransactionController.java
index ce0319e..009acc8 100644
--- a/src/main/java/com/example/demo/app/presentation/controller/TransactionController.java
+++ b/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);
@@ -408,7 +426,7 @@ public class TransactionController {
 
 		} else {
 			final String MESSAGE = "目標を設定してください";
-			
+
 			model.addAttribute(PageReturnAttributeKeyword.ACHIEVEMENT_RATE, MESSAGE);
 
 			model.addAttribute(PageReturnAttributeKeyword.CURRENT_AMOUNT, MESSAGE);
diff --git a/src/main/resources/templates/transaction_create.html b/src/main/resources/templates/transaction_create.html
index 8ad421c..115ae4f 100644
--- a/src/main/resources/templates/transaction_create.html
+++ b/src/main/resources/templates/transaction_create.html
@@ -15,127 +15,149 @@
 
 	<div class="main-container">
 
-	    <h1 class="page-title">
-	        取引登録
-	    </h1>
+		<h1 class="page-title">
+			取引登録
+		</h1>
 
-	    <div class="card shadow-sm">
+		<div class="card shadow-sm">
 
-	        <div class="card-body">
+			<div class="card-body">
 
-	            <form th:action="@{/transaction/create}"
-	                  th:object="${transactionForm}"
-	                  method="post">
+				<form th:action="@{/transaction/create}" th:object="${transactionForm}" method="post">
 
 					<div class="mb-3">
-				      <label for="transactionDate"
-					         class="form-label">
-							 日付
-					  </label>
-				      <input type="date" 
-					         id="transactionDate" 
-							 class="form-select"
-							 name="transactionDate" 
-							 th:value="*{transactionDate}"
-							 required>
+						<label for="transactionDate" class="form-label">
+							日付
+						</label>
+						<input type="date" id="transactionDate" class="form-select" name="transactionDate"
+							th:value="*{transactionDate}" required>
 					</div>
 
-	                <div class="mb-3">
+					<div class="mb-3">
 
-	                    <label for="transactionType"
-	                           class="form-label">
-	                        収入・支出
-	                    </label>
+						<label for="transactionType" class="form-label">
+							収入・支出
+						</label>
 
-	                    <select id="transactionType"
-	                            class="form-select"
-	                            th:field="*{transactionType}"  
-								required>
+						<select id="transactionType" class="form-select" th:field="*{transactionType}" required>
 
-	                        <option value="">
-	                            選択してください
-	                        </option>
+							<option value="">
+								選択してください
+							</option>
 
-	                        <option value="1">
-	                            支出
-	                        </option>
+							<option value="1">
+								支出
+							</option>
 
-	                        <option value="2">
-	                            収入
-	                        </option>
+							<option value="2">
+								収入
+							</option>
 
-	                    </select>
+						</select>
 
-	                </div>
+					</div>
 
-	                <div class="mb-3">
+					<div class="mb-3">
 
-	                    <label for="categoryId"
-	                           class="form-label">
-	                        カテゴリ
-	                    </label>
+						<label for="categoryId" class="form-label">
+							カテゴリ
+						</label>
 
-	                    <select id="categoryId"
-	                            class="form-select"
-	                            th:field="*{categoryId}"  
-								required>
+						<select id="categoryId" class="form-select" th:field="*{categoryId}" required>
 
-	                        <option value="">
-	                            選択してください
-	                        </option>
+							<option value="">
+								選択してください
+							</option>
 
-	                        <option th:each="category : ${categoryFormList}"
-	                                th:value="${category.categoryId}"
-	                                th:text="${category.categoryName}">
-	                        </option>
+							<option class="expenseListClass" th:each="category : ${expenseList}"
+								th:value="${category.categoryId}" th:text="${category.categoryName}">
+							</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"
-	                           class="form-label">
-	                        金額
-	                    </label>
+					<div class="mb-3">
 
-	                    <input type="number"
-	                           id="amount"
-	                           class="form-control"
-	                           th:field="*{amount}"
-	                           min="0"
-							   max="100000000"
-	                           placeholder="金額を入力してください"  
-							   required>
+						<label for="amount" class="form-label">
+							金額
+						</label>
 
-	                </div>
+						<input type="number" id="amount" class="form-control" th:field="*{amount}" min="1"
+							max="100000000" placeholder="金額を入力してください" required>
 
-	                <input type="hidden"
-	                       name="today"
-	                       th:value="${today}">
+					</div>
 
-	                <div class="d-grid">
+					<input type="hidden" name="today" th:value="${today}">
 
-	                    <button type="submit"
-	                            class="btn btn-primary">
+					<div class="d-grid">
 
-	                        登録
+						<button type="submit" class="btn btn-primary">
 
-	                    </button>
+							登録
 
-	                </div>
+						</button>
 
-	            </form>
+					</div>
 
-	        </div>
+				</form>
 
-	    </div>
+			</div>
+
+		</div>
 
 	</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>