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

src/main/java/com/dbnt/kcgfilemanager/controller/adminController.java

@@ -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");

src/main/java/com/dbnt/kcgfilemanager/service/BoardCategoryService.java

@@ -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;
+      }
+    }
+  }
 }

src/main/resources/static/js/admin/categoryMgt2.js

@@ -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){
+        if(maxSeq<=category.categorySeq){
-          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+"' " +
+    let statusColor = "";
-        "data-categoryseq='"+data.categorySeq+"' data-parentseq='"+data.parentSeq+"'>";
+    switch (data.status){
-    tbody += "<td></td>"
+      case "modified": statusColor = "bg-warning bg-opacity-25"; break;
-    tbody += "<td>"+data.categoryName+"</td>"
+      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){
@@ -67,4 +198,21 @@ function clearChildTable(depth){
   for(let i=depth; i<=4; i++){
     $("#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)
+    }
+  })
 }

src/main/resources/templates/admin/categoryMgt2.html

@@ -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>

src/main/resources/templates/fragments/leftMenu.html

@@ -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>

src/main/resources/templates/layout/layout.html

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