You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

179 lines
7.6 KiB
Plaintext

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
<jsp:include page="/WEB-INF/jsp/include/head.jsp" />
<body>
<!-- Layout wrapper -->
<div class="layout-wrapper layout-content-navbar">
<div class="layout-container">
<jsp:include page="/WEB-INF/jsp/include/userMenus.jsp" />
<!-- Layout container -->
<!-- Layout page -->
<div class="layout-page">
<jsp:include page="/WEB-INF/jsp/include/top.jsp" />
<!-- Content wrapper -->
<div class="content-wrapper">
<!-- Content -->
<div class="container-xxl flex-grow-1 container-p-y">
<%--h4 id="pageTitle" class="fw-bold py-3 mb-4">페이지 제목</h4--%>
<c:set var="prefixName" scope="request">사용자</c:set>
<!-- Page Body -->
<div class="card">
<div class="card-datatable text-nowrap">
<div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
<div class="d-flex flex-row justify-content-between p-3">
<div>
<div class="input-group" id="DataTables_Table_0_length">
<select id="by" onchange="document.getElementById('term').focus();" aria-controls="DataTables_Table_0" class="form-select">
<option value="${infoPrefix}Name">이름</option>
<option value="${infoPrefix}Account">계정</option>
</select>
<input id="term" autofocus type="text" placeholder="조회 조건을 입력하십시오." class="form-control">
</div>
</div>
<div>
<button onclick="search${infoPrefix}s();" class="btn btn-primary">찾기</button>
<button onclick="${infoPrefix}Control.newInfo();" class="btn btn-primary">+ 추가</button>
<button id="btnRemove${infoPrefix}s" onclick="remove${infoPrefix}s();" class="btn btn-primary">- 제거</button>
</div>
</div>
<div class="table-responsive">
<table class="datatables-ajax table table-bordered dataTable no-footer" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info">
<thead>
<tr><th tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 158.828px; text-align:center;"><input onchange="${infoPrefix}Control.select(this.checked);" type="checkbox" class="form-check-input"></th>
<th class="sorting sorting_asc" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Full name: activate to sort column descending" style="width: 223.719px;">계정</th>
<th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Email: activate to sort column ascending" style="width: 146.156px;">이름</th>
<th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 195.688px;">이메일</th>
<th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 160.141px;">전화번호(무선)</th>
<th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="width: 230.469px;">등록일자</th>
</tr>
</thead>
<tbody id="${infoPrefix}List">
</tbody>
<template id="${infoPrefix}Row">
<tr data-key="{USER_ID}">
<td style="text-align:center;"><input value="{USER_ID}" onchange="${infoPrefix}Control.select('{USER_ID}', this.checked);" type="checkbox" class="form-check-input"></td>
<td onclick="${infoPrefix}Control.setCurrent('{USER_ID}')" ondblclick="${infoPrefix}Control.getInfo({})">{USER_ACNT}</td>
<td onclick="${infoPrefix}Control.setCurrent('{USER_ID}')" ondblclick="${infoPrefix}Control.getInfo({})">{USER_NM}</td>
<td onclick="${infoPrefix}Control.setCurrent('{USER_ID}')" ondblclick="${infoPrefix}Control.getInfo({})">{EML_ADRS}</td>
<td onclick="${infoPrefix}Control.setCurrent('{USER_ID}')" ondblclick="${infoPrefix}Control.getInfo({})">{MBL_TELNO}</td>
<td onclick="${infoPrefix}Control.setCurrent('{USER_ID}')" ondblclick="${infoPrefix}Control.getInfo({})">{REG_DT}</td>
</tr>
</template>
<template id="${infoPrefix}NotFound">
<tr class="odd">
<td valign="top" colspan="6" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td>
</tr>
</template>
</table>
</div>
<div class="d-flex flex-row p-3 justify-content-between">
<label id="${infoPrefix}PagingInfo" class="dataTables_info" role="status" aria-live="polite"></label>
<ul id="${infoPrefix}Paging" class="pagination pagination-primary">
</ul>
</div>
</div>
</div>
</div>
<!--/ Page Body -->
<hr class="my-5" />
</div>
<!-- / Content -->
<jsp:include page="/WEB-INF/jsp/include/bottom.jsp" />
<div class="content-backdrop fade"></div>
</div>
<!-- Content wrapper -->
</div>
<!-- / Layout page -->
</div>
</div>
<!-- / Layout wrapper -->
<jsp:include page="/WEB-INF/jsp/include/tail.jsp" />
<script src="<c:url value="/resources/js/base/user.js?${ver}"/>"></script>
<script >
${functions}
${userMenus}
let ${infoPrefix}Control = new UserControl();
function search${infoPrefix}s() {
${infoPrefix}Control.query = {
by:$("#by").val(),
term:$("#term").val()
};
${infoPrefix}Control.load(1);
}
function remove${infoPrefix}s() {
dialog.alert({
content:"선택한 ${prefixName} 정보를 제거하시겠습니까?",
onOK:() => {
${infoPrefix}Control.remove();
}
});
}
function render${infoPrefix}List() {
let ${infoPrefix}List = ${infoPrefix}Control.dataset;
let empty = ${infoPrefix}List.empty;
let trs = empty ?
[document.getElementById("${infoPrefix}NotFound").innerHTML] : <%-- from template#${infoPrefix}NotFound --%>
${infoPrefix}List.inStrings(document.getElementById("${infoPrefix}Row").innerHTML); <%-- from template#${infoPrefix}Row --%>
$("#${infoPrefix}List").html(trs.join());
$("th input[type='checkbox']").prop("checked", false);
}
${infoPrefix}Control.onDatasetChange = obj => {
render${infoPrefix}List();
$("#${infoPrefix}Paging").setPaging({
list:${infoPrefix}Control.dataset,
prefix:${infoPrefix}Control.prefix,
start:obj.${infoPrefix}Start,
totalSize:obj.${infoPrefix}Total,
fetchSize:obj.${infoPrefix}Fetch,
func:"${infoPrefix}Control.load({index})"
});
};
${infoPrefix}Control.onCurrentChange = item => {
if (!item) return;
let key = item.data.USER_ID;
$("#${infoPrefix}List").setCurrentRow(key);
};
${infoPrefix}Control.onSelectionChange = selected => {
let ${infoPrefix}List = ${infoPrefix}Control.dataset;
let keys = selected.map(e => ${infoPrefix}List.getKey(e));
$("#${infoPrefix}List input[type='checkbox']").each(function() {
let checkbox = $(this);
checkbox.prop("checked", keys.includes(checkbox.val()));
});
$("#btnRemove${infoPrefix}s").prop("disabled", keys.length < 1);
};
$("#term").onEnterPress(search${infoPrefix}s);
$(function(){
${onload}
${infoPrefix}Control.setData({
${infoPrefix}List:${userList},
${infoPrefix}Start:${userStart},
${infoPrefix}Fetch:${userFetch},
${infoPrefix}Total:${userTotal}
});
});
</script>
</body>
</html>