응답 관리 그룹 추가

This commit is contained in:
현성필
2025-02-05 16:08:00 +09:00
parent 58b7c43be5
commit 284ae15a67
16 changed files with 694 additions and 3 deletions
@@ -0,0 +1,77 @@
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/default_layout}">
<body>
<section layout:fragment="contentFragment">
<div class="container-fluid mt-2">
<form name="groupForm" id="groupForm"
th:action="${group.id == null}?@{/mgmt/routes/group/register.do}:@{/mgmt/routes/group/update.do}"
th:object='${group}' method="post">
<div class="card col-md">
<div class="card-header">
<h3 th:if="${group.id == null}">API 그룹 등록</h3>
<h3 th:if="${group.id != null}">API 그룹 수정</h3>
</div>
<div class="card-body">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
<input type="hidden" name="id" th:value="${group.id}" th:if="${group.id != null}">
<div class="form-floating mt-2">
<input type="text" class="form-control"
th:classappend="${#fields.hasErrors('id')}? 'is-invalid'"
th:field="*{id}" required th:readonly="${group.id != null}"/>
<label for="id" class="form-label must">그룹 ID</label>
<th:block th:each="err : ${#fields.errors('id')}">
<div th:text="${err}" class="invalid-feedback"></div>
</th:block>
</div>
<div class="form-floating mt-2">
<input type="text" class="form-control"
th:classappend="${#fields.hasErrors('name')}? 'is-invalid'"
th:field="*{name}" required/>
<label for="name" class="form-label must">그룹명</label>
<th:block th:each="err : ${#fields.errors('name')}">
<div th:text="${err}" class="invalid-feedback"></div>
</th:block>
</div>
</div>
<div class="card-footer">
<button type="button" class="btn btn-primary btn_list">
<i class="fa-solid fa-list"></i> 목록
</button>
<button type="button" class="btn btn-primary btn_register">
<i class="fa-sharp fa-solid fa-floppy-disk"></i> 저장
</button>
</div>
</div>
</form>
</div>
</section>
</body>
<th:block layout:fragment="contentScript">
<script>
$(function () {
let fnRegister = document.querySelector(".btn_register");
let fnList = document.querySelector(".btn_list");
fnRegister.addEventListener("click", function (event) {
let form = document.getElementById("groupForm");
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
} else {
form.submit();
}
form.classList.add('was-validated');
});
fnList.addEventListener("click", function () {
location.href = "[[@{/mgmt/routes/group/list_view.do}]]";
});
});
</script>
</th:block>
</html>
@@ -0,0 +1,145 @@
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/default_layout}">
<body>
<section layout:fragment="contentFragment">
<div class="container-fluid">
<div class="card mt-4">
<div class="card-header">
<h5><span style="font-weight: bold">API 그룹 목록</span></h5>
</div>
<div class="card-body">
<div class="d-flex justify-content-between">
<form role="form" class="row g-3" name="searchForm" th:action="@{/mgmt/routes/group/list_view.do}" method="get">
<input name="page" type="hidden" value="1"/>
<div class="col-auto">
<button type="button" class="btn btn-primary btn_delete">
<i class="fa-sharp fa-solid fa-trash"></i> [[#{title.delete}]]
</button>
</div>
<div class="col-auto">
<button type="button" class="btn btn-primary btn_add">
<i class="fa-sharp fa-solid fa-plus"></i> [[#{button.create}]]
</button>
</div>
</form>
</div>
</div>
</div>
<div class="card mt-4">
<div class="card-body">
<form name="listForm">
<input name="id" type="hidden"/>
<input name="checkedIdForDel" type="hidden"/>
<input id="csrf" type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
<table class="table table-hover pt-table">
<colgroup>
<col style="width: 5%;">
<col style="width: 5%;">
<col style="width: 20%;">
<col>
<col style="width: 12%;">
</colgroup>
<thead>
<tr>
<th><div class="text-center">번호</div></th>
<th>
<div class="text-center">
<input type="checkbox" name="checkAll" class="form-check-input" onclick="fncCheckAll()" th:title="#{input.selectAll.title}">
</div>
</th>
<th><div class="text-center">ID</div></th>
<th><div class="text-center">이름</div></th>
<th><div class="text-center">비고</div></th>
</tr>
</thead>
<tbody>
<tr th:each="row, status : ${page.content}">
<td class="text-center" th:text="${page.getNumber() * page.getSize() + status.count}"></td>
<td>
<div class="d-flex justify-content-center">
<input type="checkbox" name="checkField" class="form-check-input" title="선택"/>
<input name="checkId" type="hidden" th:value="${row.id}"/>
</div>
</td>
<td>
<span th:text="${row.id}"></span>
</td>
<td>
<span th:text="${row.name}"></span>
</td>
<td>
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-primary btn-sm me-2" th:onclick="fnSelectItem([[${row.id}]])" th:value="#{button.update}">
<i class="fa-sharp fa-solid fa-edit"></i> [[#{button.update}]]
</button>
</div>
</td>
</tr>
<tr th:if="${page.content.size() == 0}">
<td colspan="5" th:text="#{common.nodata.msg}"></td>
</tr>
</tbody>
</table>
</form>
</div>
<div class="card-footer">
<div th:replace="~{fragment/pagination :: pagination(jsFunction='fn_select_page')}"></div>
</div>
</div>
</div>
</section>
</body>
<th:block layout:fragment="contentScript">
<script>
function fn_select_page(pageNo) {
document.searchForm.page.value = pageNo;
document.searchForm.submit();
}
function fnSelectItem(id) {
location.href = "[[@{/mgmt/routes/group/update_view.do}]]" + "?id=" + id;
}
$(function () {
let fnDelete = document.querySelector(".btn_delete");
let fnAdd = document.querySelector(".btn_add");
fnDelete.addEventListener("click", function () {
var checkField = document.listForm.checkField;
var id = document.listForm.checkId;
var checkedIds = "";
var checkedCount = 0;
if (checkField) {
if (checkField.length > 1) {
for (var i = 0; i < checkField.length; i++) {
if (checkField[i].checked) {
checkedIds += ((checkedCount == 0 ? "" : ",") + id[i].value);
checkedCount++;
}
}
} else {
if (checkField.checked) {
checkedIds = id.value;
}
}
}
if (checkedIds.length > 0) {
if (confirm("[[#{common.delete.msg}]]")) {
document.listForm.checkedIdForDel.value = checkedIds;
document.listForm.method = 'POST';
document.listForm.action = '[[@{/mgmt/routes/group/delete.do}]]';
document.listForm.submit();
}
}
});
fnAdd.addEventListener("click", function () {
location.href = '[[@{/mgmt/routes/group/create_view.do}]]';
});
});
</script>
</th:block>
</html>
@@ -36,6 +36,18 @@
<div th:text="${err}" class="invalid-feedback"></div>
</th:block>
</div>
<div class="form-floating mt-2">
<select class="form-select" name="group" th:value="${mockRoute.group}">
<option value="" th:selected="${#strings.isEmpty(mockRoute.group)}">선택</option>
<!-- 그룹 목록 반복 -->
<option th:each="group : ${groupList}"
th:value="${group.id}"
th:text="${group.name}"
th:selected="${mockRoute.group} == ${group.id}">
</option>
</select>
<label for="group" class="form-label must" >그룹</label>
</div>
<div class="d-flex align-items-center mt-2">
<div class="form-floating col-md-1 me-2">
<select name="method" class="form-select" th:if="${mockRoute.id == null}"
@@ -16,6 +16,18 @@
<div class="d-flex justify-content-between">
<form role="form" class="row g-3" name="searchForm" th:action="@{/mgmt/routes/list_view.do}" method="get" th:object="${modelSearch}">
<input name="page" type="hidden" value="1"/>
<div class="col-auto">
<select class="form-select" name="group" th:value="${modelSearch.group}">
<option value="" th:selected="${#strings.isEmpty(modelSearch.group)}">선택</option>
<!-- 그룹 목록 반복 -->
<option th:each="group : ${groupList}"
th:value="${group.id}"
th:text="${group.name}"
th:selected="${modelSearch.group} == ${group.id}">
</option>
</select>
</div>
<div class="col-auto">
<input class="form-control" name="name" placeholder="이름" type="text" size="35" th:title="#{title.search}+ '' + #{input.input}"
th:value="${modelSearch.name}"
@@ -31,6 +43,9 @@
<div class="col-auto">
<button type="button" class="btn btn-primary btn_add"><i class="fa-sharp fa-solid fa-plus"></i> [[#{button.create}]]</button><!-- 등록 -->
</div>
<div class="col-auto">
<button type="button" class="btn btn-primary btn_add_group"><i class="fa-sharp fa-solid fa-plus"></i>그룹 관리</button><!-- 등록 -->
</div>
</form>
</div>
</div>
@@ -43,6 +58,7 @@
<input id="csrf" type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
<table class="table table-hover pt-table">
<colgroup>
<col style="width: 5%;">
<col style="width: 5%;">
<col style="width: 5%;">
<col style="width: 10%;">
@@ -58,6 +74,7 @@
<input type="checkbox" name="checkAll" class="form-check-input" onclick="fncCheckAll()" th:title="#{input.selectAll.title}">
</div>
</th>
<th><div class="text-center">group</div></th>
<th><div class="text-center">method</div></th>
<th><div class="text-center">path</div></th>
<th><div class="text-center">이름</div></th>
@@ -73,6 +90,14 @@
<input name="checkId" type="hidden" th:value="${row.id}"/>
</div>
</td>
<td>
<div class="d-flex justify-content-center">
<span th:each="group : ${groupList}"
th:if="${group.id} == ${row.group}"
th:text="${group.name}">그룹 미지정</span>
</div>
</td>
<td>
<div class="d-flex justify-content-center">
<span th:text="${row.method}"></span>
@@ -138,6 +163,7 @@
let fnSearch = document.querySelector(".btn_search");
let fnDelete = document.querySelector(".btn_delete");
let fnAdd = document.querySelector(".btn_add");
let fnAddGroup = document.querySelector(".btn_add_group");
fnSearch.addEventListener("click", function () {
document.searchForm.page.value = 1;
@@ -176,6 +202,10 @@
fnAdd.addEventListener("click", function () {
location.href = '[[@{/mgmt/routes/create_view.do}]]';
});
fnAddGroup.addEventListener("click", function () {
location.href = '[[@{/mgmt/routes/group/list_view.do}]]';
});
})
</script>