게시판 분류관리 편의성 개선 작업 완료.

master
강석 최 2022-01-10 18:22:27 +09:00
parent 14343075dc
commit 4fe795a343
6 changed files with 211 additions and 48 deletions

View File

@ -36,6 +36,7 @@ public class adminController {
mav.addObject("diskInfoList", boardService.getDiskInfoList());
return mav;
}
@GetMapping("/categoryMgt")
public ModelAndView categoryMgt(){
ModelAndView mav = new ModelAndView("admin/categoryMgt");
@ -75,6 +76,13 @@ public class adminController {
return boardCategoryService.selectBoardCategoryListToFindAll();
}
@PostMapping("/insertCategory2")
@ResponseBody
public int insertBoardCategory2(@RequestBody List<BoardCategory> categoryList) {
boardCategoryService.saveBoardCategory(categoryList);
return categoryList.get(0).getDepth();
}
@GetMapping("/userMgt")
public ModelAndView userMgt(UserInfo userInfo) {
ModelAndView mav = new ModelAndView("admin/userMgt");

View File

@ -12,6 +12,7 @@ import org.springframework.transaction.annotation.Transactional;
import java.util.ArrayList;
import java.util.List;
import java.util.Objects;
@Service
@RequiredArgsConstructor
@ -89,4 +90,28 @@ public class BoardCategoryService {
}
return makeFilePath(category.getParentSeq())+"\\"+category.getCategoryName();
}
@Transactional
public void saveBoardCategory(List<BoardCategory> categoryList) {
for(BoardCategory category: categoryList){
switch (category.getStatus()){
case "deleted":
boardCategoryRepository.delete(category);
break;
case "modified":
boardCategoryRepository.save(category);
break;
case "added":
category.setTempSeq(category.getCategorySeq());
category.setCategorySeq(null);
for(BoardCategory temp : categoryList){
if(Objects.equals(temp.getTempSeq(), category.getParentSeq())){
category.setParentSeq(temp.getCategorySeq());
}
}
boardCategoryRepository.saveAndFlush(category);
break;
}
}
}
}

View File

@ -1,12 +1,115 @@
const categoryList = []
let categoryList = []
let maxSeq = 0;
$(function (){
getCategoryList();
})
$(document).on('click', '.categoryTr', function (){
const chooseTr = $(this)
chooseTr.parent().find(".trCheckBox").prop("checked", false);
chooseTr.find(".trCheckBox").prop("checked", true);
setCategoryTable(Number(chooseTr.attr("data-depth"))+1, Number(chooseTr.attr("data-categoryseq")));
})
$(document).on('change', '.categoryName', function (){
const categoryInfo = $(this).parents("tr");
const changedName = this.value;
if(changedName !== categoryInfo.attr("data-categoryname")){
categoryList.forEach(function (category){
if(category.categorySeq === Number(categoryInfo.attr("data-categoryseq"))){
category.categoryName = changedName;
if(category.status !== "added"){
category.status = "modified";
}
}
})
categoryInfo[0].className += "bg-warning bg-opacity-25";
}
})
$(document).on('click', '.addCategoryBtn', function (){
const depth = Number($(this).attr("data-depth"));
const parentCategory = $("#depth"+(depth-1)+"Tbody").find(".trCheckBox:checked").parents("tr");
if(parentCategory.attr("data-status")==="deleted"){
alert("삭제될 상위 분류에는 추가할 수 없습니다.");
}else{
const parentSeq = parentCategory.attr("data-categoryseq");
categoryList.push({
categorySeq: maxSeq++,
parentSeq: depth===1?null:Number(parentSeq),
categoryName: "신규",
depth: depth,
status: "added"
})
setCategoryTable(depth, depth===1?null:Number(parentSeq));
}
})
$(document).on('click', '.copyCategory', function (){
const copyInfo = $(this).parents("tr")
if(confirm(copyInfo.attr("data-categoryname")+"을 복사하시겠습니까?")){
const depth = Number(copyInfo.attr("data-depth"));
const parentSeq = copyInfo.attr("data-parentseq");
const lastSeq = maxSeq++;
let copyList = [{
categorySeq: lastSeq,
parentSeq: depth===1?null:Number(parentSeq),
categoryName: "복사된 분류",
depth: depth,
status: "added"
}];
copyList = copyList.concat(getCopyData(depth+1, Number(copyInfo.attr("data-categoryseq")), lastSeq));
categoryList = categoryList.concat(copyList);
setCategoryTable(depth, depth===1?null:Number(parentSeq));
$("[data-categoryseq="+copyInfo.attr("data-categoryseq")+"]").find(".trCheckBox").click();
}
})
$(document).on('click', '.deleteCategory', function (){
const categoryInfo = $(this).parents("tr");
const categorySeq = categoryInfo.attr("data-categoryseq");
if(categoryInfo.attr("data-status") !== "deleted"){
if(confirm("선택된 분류와 하위 분류를 삭제하시겠습니까?")){
statusChange("deleted", Number(categorySeq));
}
}else{
if(confirm("삭제를 취소 하시겠습니까?")){
statusChange("saved", Number(categorySeq));
}
}
const parentSeq = categoryInfo.attr("data-parentseq");
setCategoryTable(Number(categoryInfo.attr("data-depth")), parentSeq!=="null"?Number(parentSeq):null);
$("[data-categoryseq="+categorySeq+"]").find(".trCheckBox").prop("checked", true);
})
$(document).on('click', '#saveCategoryBtn', function (){
const saveList = [];
categoryList.forEach(function (category){
// 변경 내용이 없는 분류, 추가 되었으면서 삭제된 분류 제외
if(category.status !== "saved" &&
!(category.status === "deleted" && category.originalName === undefined)){
saveList.push(category);
}
})
if(saveList.length !== 0) {
if (confirm(saveList.length + "건을 저장하시겠습니까?")) {
$.ajax({
type : 'POST',
url : "/admin/insertCategory2",
data : JSON.stringify(saveList),
contentType: 'application/json',
beforeSend: function (xhr){
xhr.setRequestHeader($("[name='_csrf_header']").val(), $("[name='_csrf']").val());
},
success : function(data) {
alert("저장되었습니다.");
sessionReload();
},
error : function(xhr, status) {
}
})
}
}else{
alert("저장 대상이 없습니다.");
}
})
function getCategoryList(){
$.ajax({
url: '/admin/getCategoryList',
@ -17,11 +120,12 @@ function getCategoryList(){
categorySeq: category.categorySeq,
parentSeq: category.parentSeq,
categoryName: category.categoryName,
originalName: category.categoryName,
depth: category.depth,
status: "saved",
})
if(maxSeq<category.categorySeq){
maxSeq = category.categorySeq
if(maxSeq<=category.categorySeq){
maxSeq = category.categorySeq+1
}
})
setCategoryTable(1, null);
@ -36,15 +140,42 @@ function setCategoryTable(depth, parentSeq){
let tbody = "";
const tableData = getTableData(categoryList, depth, parentSeq);
tableData.forEach(function (data){
tbody += "<tr class='categoryTr' data-depth='"+data.depth+"' " +
"data-categoryseq='"+data.categorySeq+"' data-parentseq='"+data.parentSeq+"'>";
tbody += "<td></td>"
tbody += "<td>"+data.categoryName+"</td>"
let statusColor = "";
switch (data.status){
case "modified": statusColor = "bg-warning bg-opacity-25"; break;
case "added": statusColor = "bg-success bg-opacity-25"; break;
case "deleted": statusColor = "bg-danger bg-opacity-25"; break;
}
tbody += "<tr class='categoryTr "+statusColor+"' data-categoryseq='"+data.categorySeq+"'" +
" data-parentseq='"+data.parentSeq+"' data-depth='"+data.depth+"'" +
" data-categoryname='"+data.categoryName+"' data-status='"+data.status+"'>";
tbody += "<td><input type='checkbox' class='trCheckBox'></td>"
tbody += "<td><input type='text' class='form-control form-control-sm categoryName' value='"+data.categoryName+"' "+(data.status==="deleted"?"readonly":"")+"></td>"
tbody += "<td><a href='#' class='copyCategory'><i class='bi bi-journals text-success'></i></a></td>";
tbody += "<td><a href='#' class='deleteCategory'><i class='bi bi-x-square text-danger'></i></a></td>";
tbody += "</tr>";
})
clearChildTable(depth);
$("#depth"+depth+"Tbody").append(tbody);
}
function getCopyData(depth, parentSeq, lastSeq){
let copyList = getTableData(categoryList, depth, parentSeq);
let childList = [];
copyList.forEach(function (category){
const tempList = getCopyData(category.depth+1, category.categorySeq)
category.categorySeq = maxSeq++;
category.parentSeq = lastSeq;
category.status = "added";
tempList.forEach(function (child){
child.parentSeq = category.categorySeq;
child.categorySeq = maxSeq++;
child.status = "added";
})
childList = childList.concat(tempList);
})
copyList = copyList.concat(childList);
return copyList;
}
function getTableData(categoryList, depth, parentSeq){
@ -68,3 +199,20 @@ function clearChildTable(depth){
$("#depth"+i+"Tbody").empty();
}
}
function statusChange(status, categorySeq){
categoryList.forEach(function (category){
if(category.categorySeq === categorySeq){
if(status==="saved" && category.originalName===undefined){
category.status = "added";
}else if(status==="saved" && category.originalName !== category.categoryName){
category.status = "modified";
}else{
category.status = status;
}
}
if(category.parentSeq === categorySeq){
statusChange(status, category.categorySeq)
}
})
}

View File

@ -19,11 +19,13 @@
<div class="row justify-content-start">
<div class="col-auto m-3 p-3 border">
<div class="row-cols-6" id="depth1Div">
<table class="table table-striped">
<table class="table table-hover">
<thead data-depth="1">
<tr>
<th></th>
<th>대분류</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody id="depth1Tbody">
@ -34,18 +36,17 @@
<div class="col-auto">
<input type="button" class="btn btn-success addCategoryBtn" value="추가" data-depth="1">
</div>
<div class="col-auto">
<input type="button" class="btn btn-danger deleteCategoryBtn" value="삭제" data-depth="1">
</div>
</div>
</div>
<div class="col-auto m-3 p-3 border">
<div class="row-cols-6" id="depth2Div">
<table class="table table-striped">
<table class="table table-hover">
<thead>
<tr>
<th></th>
<th>연도</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody id="depth2Tbody">
@ -56,18 +57,17 @@
<div class="col-auto">
<input type="button" class="btn btn-success addCategoryBtn" value="추가" data-depth="2">
</div>
<div class="col-auto">
<input type="button" class="btn btn-danger deleteCategoryBtn" value="삭제" data-depth="2">
</div>
</div>
</div>
<div class="col-auto m-3 p-3 border">
<div class="row-cols-6" id="depth3Div">
<table class="table table-striped">
<table class="table table-hover">
<thead>
<tr>
<th></th>
<th>중분류</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody id="depth3Tbody">
@ -78,18 +78,17 @@
<div class="col-auto">
<input type="button" class="btn btn-success addCategoryBtn" value="추가" data-depth="3">
</div>
<div class="col-auto">
<input type="button" class="btn btn-danger deleteCategoryBtn" value="삭제" data-depth="3">
</div>
</div>
</div>
<div class="col-auto m-3 p-3 border">
<div class="row-cols-6" id="depth4Div">
<table class="table table-striped">
<table class="table table-hover">
<thead>
<tr>
<th></th>
<th>소분류</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody id="depth4Tbody">
@ -100,9 +99,6 @@
<div class="col-auto">
<input type="button" class="btn btn-success addCategoryBtn" value="추가" data-depth="4">
</div>
<div class="col-auto">
<input type="button" class="btn btn-danger deleteCategoryBtn" value="삭제" data-depth="4">
</div>
</div>
</div>
</div>
@ -110,22 +106,5 @@
</div>
</div>
</main>
<div style="display: none;">
<table>
<tbody id="appendTr">
<tr>
<td>
<input type="hidden" class="categorySeq">
<input type="checkbox" class="trCheckBox">
</td>
<td>
<input type="hidden" class="parentSeq">
<input type="hidden" class="depth">
<input type="text" class="form-control categoryName">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</html>

View File

@ -5,7 +5,7 @@
<div class="mx-3 pt-3" th:fragment="leftMenuFragment">
<div sec:authorize="hasRole('ROLE_ADMIN')">
<div class="list-group py-2">
<a href="/admin/categoryMgt" class="list-group-item list-group-item-action">게시판 분류 관리</a>
<!--<a href="/admin/categoryMgt" class="list-group-item list-group-item-action">게시판 분류 관리</a>-->
<a href="/admin/categoryMgt2" class="list-group-item list-group-item-action">게시판 분류 관리</a>
<a href="/admin/userMgt" class="list-group-item list-group-item-action">사용자 관리</a>
<a href="/info/modifyRequestList" class="list-group-item list-group-item-action">수정 요청</a>

View File

@ -40,15 +40,18 @@
const positionList = '[[${session.positionList}]]';
const departmentList = '[[${session.departmentList}]]';
const categoryList = '[[${session.categoryList}]]';
if(!positionList && !departmentList && !categoryList){
$.ajax({
url: '/refreshSession',
type: 'GET',
success: function(){location.reload();},
error:function(){}
});
if(!positionList && !departmentList && !categoryList) {
sessionReload()
}
})
function sessionReload(){
$.ajax({
url: '/refreshSession',
type: 'GET',
success: function(){location.reload();},
error:function(){}
});
}
</script>
</th:block>
</head>