[FIX] 取引更新画面のカテゴリ表示不備を修正しました。

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

@@ -297,6 +297,23 @@ public class TransactionController {
 				transactionService.findMoneyRecord(transactionId),
 				CategoryForm.convertFrom(categoryService.findByTransactionId(transactionId)).getTransactionType());
 
+		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_ID, transactionId);
 
 		model.addAttribute(PageReturnAttributeKeyword.TRANSACTION_FORM, transactionForm);
@@ -304,6 +321,8 @@ public class TransactionController {
 		model.addAttribute(PageReturnAttributeKeyword.CATEGORY_FORM_LIST, categoryFormList);
 
 		model.addAttribute(PageReturnAttributeKeyword.TODAY, today);
+		
+		session.setAttribute(SessionKeyword.T_TYPE, transactionForm.getTransactionType());
 
 		return TransitionTargetPageNameKeyword.TRANSACTION_UPDATE_HTML;
 

src/main/resources/templates/transaction_update.html

@@ -83,21 +83,36 @@
                             カテゴリ
                         </label>
 
-                        <select id="categoryId"
+<!--                        <select id="categoryId"-->
-                                class="form-select"
+<!--                                class="form-select"-->
-                                th:field="*{categoryId}"
+<!--                                th:field="*{categoryId}"-->
-								required>
+<!--								required>-->
 
-                            <option value="">
+<!--                            <option value="">-->
-                                選択してください
+<!--                                選択してください-->
-                            </option>
+<!--                            </option>-->
 
-                            <option th:each="category : ${categoryFormList}"
+<!--                            <option th:each="category : ${categoryFormList}"-->
-                                    th:value="${category.categoryId}"
+<!--                                    th:value="${category.categoryId}"-->
-                                    th:text="${category.categoryName}">
+<!--                                    th:text="${category.categoryName}">-->
-                            </option>
+<!--                            </option>-->
 
-                        </select>
+<!--                        </select>-->
+						<select id="categoryId" class="form-select" th:field="*{categoryId}" required>
+
+							<option value="">
+								選択してください
+							</option>
+
+							<option class="expenseListClass" th:each="category : ${expenseList}"
+								th:value="${category.categoryId}" th:text="${category.categoryName}">
+							</option>
+
+							<option class="incomeListClass" th:each="category : ${incomeList}"
+								th:value="${category.categoryId}" th:text="${category.categoryName}">
+							</option>
+
+						</select>
 
                     </div>
 
@@ -141,6 +156,60 @@
     <div th:replace="~{footer :: footer}">
     </div>
 
+	<script inline="javascript">
+		const transactionType = document.getElementById("transactionType");
+		const categoryId = document.getElementById("categoryId");
+
+		const expenseList = document.getElementsByClassName("expenseListClass");
+		const incomeList = document.getElementsByClassName("incomeListClass");
+
+		const tType = '[[${session.tType}]]';
+		
+		if (tType == "0") {
+			transactionType.value = 0;
+		} else if (tType == "1") {
+			transactionType.value = 1;
+		}
+		
+		
+		transactionType.addEventListener("change", function () {
+
+			if (this.value === "0") {
+
+				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 === "1") {
+
+				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>
 
 </html>