<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
<c:set var="prefixName" scope="request">사용자</c:set>
<div class="card" data-doctx="select-user"><!-- Page Body -->
    <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 name="by" onchange="userSelector.find('term').focus();" aria-controls="DataTables_Table_0" class="form-select">
							<option value="userName">이름</option>
							<option value="userAccount">계정</option>
						</select>
						<input name="term" autofocus type="text" placeholder="조회 조건을 입력하십시오." class="form-control">
					</div>
				</div>
				<div>
					<button onclick="userSelector.search();" class="btn btn-primary">찾기</button>
				</div>
			</div>
			<table class="datatables-ajax table table-bordered dataTable no-footer" >
				<thead name="userThead">
					<tr><th tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="text-align:center;"><input onchange="userSelector.dataset.select(this.checked);" type="checkbox" class="form-check-input"></th>
						<th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" >시군구명</th>
                        <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" >기관명</th>
                        <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" >부서명</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" >계정</th>
                        <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" >이름</th>
                        <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" >등록일자</th>
					</tr>
                   </thead>
                   <tbody name="userList">
					</tbody>
                  	<template name="userRow">
                  	<tr data-key="{USER_ID}">
                      <td style="text-align:center;"><input value="{USER_ID}" onchange="userSelector.dataset.select('{USER_ID}', this.checked);" type="checkbox" class="form-check-input"></td>
                      <td onclick="userSelector.setCurrent('{USER_ID}')" ondblclick="userSelector.getInfo({})">{SGG_NM}</td>
                      <td onclick="userSelector.setCurrent('{USER_ID}')" ondblclick="userSelector.getInfo({})">{INST_NM}</td>
                      <td onclick="userSelector.setCurrent('{USER_ID}')" ondblclick="userSelector.getInfo({})">{DEPT_NM}</td>
                      <td onclick="userSelector.setCurrent('{USER_ID}')" ondblclick="userSelector.getInfo({})">{USER_ACNT}</td>
                      <td onclick="userSelector.setCurrent('{USER_ID}')" ondblclick="userSelector.getInfo({})">{USER_NM}</td>
                      <td onclick="userSelector.setCurrent('{USER_ID}')" ondblclick="userSelector.getInfo({})">{REG_DT}</td>
                   </tr>
                   </template>
                  	<template name="userNotFound">
				<tr class="odd">
					<td valign="top" colspan="7" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td>
				</tr>
                   </template>
			</table>
			<div class="d-flex flex-row p-3 justify-content-between">
				<label name="userPagingInfo" class="dataTables_info" role="status" aria-live="polite"></label>
                 <ul name="userPaging" class="pagination pagination-primary">
                 </ul>
			</div>
		</div>
    </div>
</div><!--/ Page Body -->
<script >
var userSelector = newUserControl("[data-doctx='select-user']");
$(userSelector.doctx[0]).parent().parent().parent().addClass("modal-xl");
function getSelectedUser() {
	let selected = userSelector.dataset.getKeys("selected");
	if (selected.length < 1)
		return dialog.alert("사용자를 선택하십시오.");
	else
		return selected;
}

userSelector.search = () => {
	userSelector.query = {
		by: userSelector.find("name","by").value,
		term: userSelector.find("name","term").value
	};
	userSelector.load(1);
}

userSelector.onDatasetChange = obj => {
	let list = userSelector.dataset;
	let empty = list.empty;
	
	let trs = empty ?
		[userSelector.find("name","userNotFound").innerHTML] :
		list.inStrings(userSelector.find("name","userRow").innerHTML);
	userSelector.find("name","userList").innerHTML = trs.join("");
	userSelector.find("[name='userThead'] th input[type='checkbox']").checked = false;

	$(userSelector.selector("[name='userPaging']")).setPaging({
		list: list,
		prefix: userSelector.prefix,
		start: obj.userStart,
		totalSize: obj.userTotal,
		fetchSize: obj.userFetch,
		func:"userSelector.load({index})"
	});
};

userSelector.onCurrentChange = item => {
	if (!item) return;
	
	let key = item.data.USER_ID;
	$(userSelector.selector("[name='userList']")).setCurrentRow(key);
};

userSelector.onSelectionChange = selected => {
	let list = userSelector.dataset;
	let keys = selected.map(e => list.getKey(e));
	$(userSelector.selector("[name='userList'] input[type='checkbox']")).each(function() {
		let checkbox = $(this);
		checkbox.prop("checked", keys.includes(checkbox.val()));
	});
};

$(userSelector.selector("[name='term']")).onEnterPress(userSelector.search);

$(function(){
	${onload}
	userSelector.setData({
		userList:${userList},
		userStart:${userStart},
		userFetch:${userFetch},
		userTotal:${userTotal}
	});
});
//# sourceURL=select-user.jsp
</script>