검색 모달 기능 추가

src/main/webapp/WEB-INF/tiles/tiles.xml

@@ -12,7 +12,7 @@
         <put-attribute name="content" value="" />
     </definition>
 
-    <definition name="*" extends="layout-tiles" template="/WEB-INF/views/base/empty.jsp">
+    <definition name="*" extends="layout-tiles" template="/WEB-INF/views/modal/empty.jsp">
         <put-attribute name="content" value="/WEB-INF/views/modal/{1}.jsp" />
     </definition>
 

src/main/webapp/WEB-INF/views/account/create.jsp

@@ -0,0 +1,89 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
+<!-- 이 안에 내용 복사해서 jsp에 붙여넣기 -->
+<script>
+    /*
+    yes no 모달의 확인 버튼을 누를때 재정의할 function
+
+    yesNoModal.yesFunction = myYesFunction;
+    function myYesFunction(){
+      alert("재정의 됨");
+    }
+    */
+    function showSearchModal(title, val){
+        $("#searchModalLabel").text(title);
+        const data = { name : val};
+        $.ajax({
+            type : 'post',           // 타입 (get, post, put 등등)
+            url : '/account/show_modal',           // 요청할 서버url
+            dataType : 'html',       // 데이터 타입 (html, xml, json, text 등등)
+            data : data,
+            success : function(result) { // 결과 성공 콜백함수
+                $("#search_modal_body").html(result);
+                searchModalBootStrap.show();
+            },
+            error : function(request, status, error) {
+                alert(error)
+            }
+        });
+    }
+</script>
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-12">
+            <div class="mt-5 mb-5 text-center">
+                <h1>사용자 추가</h1>
+            </div>
+            <div>
+                <hr>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-12">
+            <div class="input-group w-50">
+                <span id='account_name_label' class="input-group-text">사용자 명</span>
+                <input name="name" id="account_name" type="text" class="form-control" placeholder="" aria-label="Username" aria-describedby="account_name_label">
+                <span class="me-5"></span>
+                <span id='employee_number_label' class="input-group-text">사번</span>
+                <input id=employee_number" type="text" class="form-control" placeholder="" aria-label="Username" aria-describedby="employee_number_label">
+            </div>
+            <div class="input-group w-50 mt-3">
+                <span id='account_dept_label' class="input-group-text">부서 명</span>
+                <input readonly id="account_dept" type="text" class="form-control" placeholder="" aria-label="Username" aria-describedby="account_dept_label">
+                <button id="btn_dept" type="button" class="btn btn-primary">검색</button>
+                <span class="me-5"></span>
+                <span id='employee_pos_label' class="input-group-text">직책</span>
+                <input readonly id="employee_pos" type="text" class="form-control" placeholder="" aria-label="Username" aria-describedby="employee_number_pos">
+                <button id="btn_pos" type="button" class="btn btn-primary">검색</button>
+            </div>
+            <div class="input-group w-50 mt-3">
+                <span id='account_group_label' class="input-group-text">권한</span>
+                <input readonly id="account_auth_group_name" type="text" class="form-control" placeholder="" aria-label="Username" aria-describedby="account_group_label">
+                <input hidden name="groupAuthorityId" readonly id="groupAuthorityId" type="text" class="form-control" placeholder="" aria-label="Username" aria-describedby="account_group_label">
+                <button id="account_search_button" class="btn-primary btn" onclick="showSearchModal('권한 검색','auth')">검색</button>
+            </div>
+            <div class="input-group w-50 mt-3">
+                <span id='account_email_label' class="input-group-text">이메일</span>
+                <input id="account_email" type="text" class="form-control" placeholder="" aria-label="Username" aria-describedby="account_email_label">
+                <span class="me-5"></span>
+                <span id='employee_telephone_label' class="input-group-text">전화번호</span>
+                <input id=employee_telephone" type="text" class="form-control" placeholder="" aria-label="Username" aria-describedby="employee_telephone_label">
+            </div>
+            <div class="input-group w-50 mt-3">
+                <span id='account_gender_label' class="input-group-text">성별</span>
+                <input id="account_gender" type="text" class="form-control" placeholder="" aria-label="Username" aria-describedby="account_gender_label">
+                <span class="me-5"></span>
+                <span id='employee_birth_label' class="input-group-text">생일</span>
+                <input id="employee_birth" type="date" class="form-control" placeholder="" aria-label="Username" aria-describedby="employee_birth_label">
+            </div>
+        </div>
+    </div>
+    <div class="row mt-4">
+        <div class="col-12">
+            <button class="btn btn-primary" id="btn_confirm">확인</button>
+            <button class="btn btn-danger" id="btn_exit">뒤로</button>
+        </div>
+    </div>
+</div>
+<!-- 이 안에 내용 복사해서 jsp에 붙여넣기 끝 -->

src/main/webapp/WEB-INF/views/account/dept_modal.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <script src="base.js"></script>
+    <link rel="stylesheet" href="base.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+</head>
+<body>
+<script>
+    function onSearchAuth(){
+        //
+    }
+</script>
+<div class="container">
+    <div class="row">
+        <div class="col-12">
+            <h2 class="text-center mt-3">권한 검색</h2>
+            <br>
+            <hr>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-12">
+            <div id="div_auth_search" class="text-end">
+                <select name="search_select" class="form-select d-inline w-10">
+                    <option selected value="10">10</option>
+                    <option value="20">20</option>
+                    <option value="30">30</option>
+                </select>
+                <input id="search_auth_input" type="text" class="w-30 d-inline form-control" placeholder="검색">
+                <button id="search_auth_btn" type="button" class="btn btn-primary" onclick="onSearchAuth()">검색</button>
+            </div>
+        </div>
+        <div class="col-12">
+            <table class="table">
+                <thead class="table-dark">
+                <tr><th>권한명</th><th></th></tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>관리자</td>
+                    <td><button data-tid="1234" class="btn btn-primary">선택</button></td>
+                </tr>
+                <tr>
+                    <td>사원</td>
+                    <td><button data-tid="5678" class="btn btn-primary">선택</button></td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+</body>
+</html>

src/main/webapp/WEB-INF/views/account/list.jsp

@@ -0,0 +1,101 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
+<!-- 이 안에 내용 복사해서 jsp에 붙여넣기 -->
+<link rel="stylesheet" href="authority.css">
+<script>
+    /*
+    yes no 모달의 확인 버튼을 누를때 재정의할 function
+
+    yesNoModal.yesFunction = myYesFunction;
+    function myYesFunction(){
+      alert("재정의 됨");
+    }
+    */
+    $(function() {
+        $("#div_personal_search").hide();
+        $(".nav-item button").on("click", function(obj){
+            const selectedButtonId = $(obj.currentTarget).attr('id');
+            if(selectedButtonId === 'home-tab'){
+                $("#div_group_search").show();
+                $("#div_personal_search").hide();
+            }else{
+                $("#div_group_search").hide();
+                $("#div_personal_search").show();
+            }
+        });
+
+        $(".group_tr").on("click", function(event){
+            read($(event.currentTarget).data("tid"));
+        });
+
+
+
+    });
+
+    function onSearch(isPersonalSearch){
+        let jsonData = {};
+        if(isPersonalSearch){
+            jsonData.searchOption = $("select[name='search_select'] option:selected").val();
+            jsonData.searchValue = $("#search_personal_input").val();
+
+        }else{
+            jsonData.searchValue = $("#search_group_input").val();
+        }
+
+        console.log(JSON.stringify(jsonData));
+    }
+
+    function read(id){
+        $("#formInput").val(id);
+        $("#form").attr("action", "/account/read" );
+        $("#form").trigger("submit");
+
+    }
+
+
+
+</script>
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-12">
+            <div class="mt-5 mb-5 text-center">
+                <h1>그룹 권한 관리</h1><form method="post" action="/account/create"><button class="btn btn-primary" type="submit" id="btn_create">생성</button></form>
+            </div>
+            <div>
+                <hr>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-12">
+            <div class="container">
+                <div class="row">
+                    <div class="col-12">
+                        <table class="table" >
+                            <thead class="table-dark">
+                            <tr><th>사번</th><th>사용자 명</th><th>활성 여부</th></tr>
+                            </thead>
+                            <tbody>
+                            <c:forEach items="${list }" var="dto" varStatus="status">
+                                <tr class="group_tr" data-tid="${dto.id}">
+                                    <td>${dto.employeeNumber}</td>
+                                    <td>${dto.name}</td>
+                                    <td>
+                                    <c:choose>
+                                        <c:when test="${dto.activation}">O</c:when>
+                                        <c:otherwise>X</c:otherwise>
+                                    </c:choose>
+                                    </td>
+                                </tr>
+                            </c:forEach>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<form id="form" method="post">
+    <input name="id" id="formInput" hidden>
+</form>

src/main/webapp/WEB-INF/views/base/layout.jsp

@@ -23,7 +23,7 @@
 <!-- body -->
 <!-- 스크립트 부분 안건들여도됨-->
 <script>
-
+    let searchModalBootStrap;
     $(function(){
         //네비게이션 관련
         const $listNavLink = $("a.nav-link");
@@ -71,17 +71,11 @@
         */
         //yes no 모달 관련 끝
         //검색 팝업 모달 관련
-        const searchModalBootStrap = new bootstrap.Modal("#search_modal");
+        searchModalBootStrap = new bootstrap.Modal("#search_modal");
         $("#search_modal_show_button").on("click", function(){
             searchModalBootStrap.show();
         });
 
-        /*
-        * 검색 팝업 모달 닫는 함수
-        */
-        function hideSearchModal(){
-            searchModalBootStrap.hide();
-        }
 
 
         //검색 팝업 모달 관련 끝
@@ -90,6 +84,13 @@
         //네비게이션 쪽 아이콘만들어 주는 함수
         feather.replace();
     });
+    /*
+       * 검색 팝업 모달 닫는 함수
+       */
+    function hideSearchModal(){
+        searchModalBootStrap.hide();
+    }
+
     function yesNoModalTextDefine(title, body){
         yesNoModal.title = title;
         yesNoModal.body = body;

src/main/webapp/WEB-INF/views/modal/account.jsp

@@ -0,0 +1,31 @@
+<%@ page contentType="text/html; charset=UTF-8"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
+<script>
+    function onButtonClick(tag){
+        const $tag = $(tag);
+        const id = $tag.data("tid");
+        const
+    }
+</script>
+<div class="container">
+    <div class="row">
+        <div class="col-12">
+            <table class="table" >
+                <thead class="table-dark">
+                <tr><th>번호</th><th>권한 명</th><th>선택</th></tr>
+                </thead>
+                <tbody>
+                <c:forEach items="${list }" var="dto" varStatus="status">
+                    <c:if test="${dto.isGroupAuthority == true and dto.activation == true}">
+                        <tr class="group_authority_tr">
+                            <td>${status.count}</td>
+                            <td>${dto.name}</td>
+                            <td><button data-tid="${dto.id}" data-tname="${dto.name}" class="btn-primary btn" onclick="onButtonClick(this)">선택</button></td>
+                        </tr>
+                    </c:if>
+                </c:forEach>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>

src/main/webapp/WEB-INF/views/modal/auth.jsp

@@ -0,0 +1,49 @@
+<%@ page contentType="text/html; charset=UTF-8"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
+<script>
+    function onSearchAuth(){
+        //
+    }
+
+    function onSelectAuth(tag){
+        const $tag = $(tag);
+        const tid = $tag.data('tid');
+        const name = $tag.data('tname');
+
+        $("#account_auth_group_name").val(name);
+        $("#groupAuthorityId").val(tid);
+        hideSearchModal();
+    }
+</script>
+<div class="container">
+    <div class="row">
+        <div class="col-12">
+            <div id="div_auth_search" class="text-end">
+                <select name="search_select" class="form-select d-inline w-10">
+                    <option selected value="10">10</option>
+                    <option value="20">20</option>
+                    <option value="30">30</option>
+                </select>
+                <input id="search_auth_input" type="text" class="w-30 d-inline form-control" placeholder="검색">
+                <button id="search_auth_btn" type="button" class="btn btn-primary" onclick="onSearchAuth()">검색</button>
+            </div>
+        </div>
+        <div class="col-12">
+            <table class="table">
+                <thead class="table-dark">
+                <tr><th>권한명</th><th></th></tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>관리자</td>
+                    <td><button data-tid="1234" data-tname="관리자" class="btn btn-primary" onclick="onSelectAuth(this)">선택</button></td>
+                </tr>
+                <tr>
+                    <td>사원</td>
+                    <td><button data-tid="5678"data-tname="사원" class="btn btn-primary" onclick="onSelectAuth(this)">선택</button></td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>