<%@ 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 data-doctx="user" class="d-flex flex-column flex-grow-1"><!-- Page Body -->
        <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 class="d-flex flex-grow-1 me-5">
					<div class="input-group me-3 w-px-400">
						<select name="by" onchange="userCtrl.find('name', 'term').focus();" class="form-select">
							<option value="userName">이름</option>
							<option value="userAccount">계정</option>
						</select>
						<input name="term" autofocus type="text" placeholder="조회 조건을 입력하십시오." class="form-control">
						
					</div>
					<label for="userStatus" class="form-label fw-bold px-3 d-flex flex-wrap align-content-center justify-content-center">상태</label>
					<select name="status" class="form-select">
						<option value="">전체</option>
						<option value="A">신청</option>
						<option value="P">승인</option>
						<option value="D">삭제</option>
					</select>
					<label for="type" class="form-label fw-bold px-3 d-flex flex-wrap align-content-center justify-content-center">접속구분</label>
					<select name="type" class="form-select">
						<option value="">전체</option>
						<c:forEach items="${CMN009List}" var="item">
							<option value="${item.code}">${item.value}</option>
						</c:forEach>
					</select>
				</div>
				<div>
					<button onclick="userCtrl.search();" class="btn btn-primary">찾기</button>
					<button onclick="userCtrl.newInfo();" class="btn btn-primary">+ 추가</button>
					<button onclick="userCtrl.removeUsers();" class="btn btn-primary enable-onfound">- 제거</button>
				</div>
			</div>
			<div class="table-responsive">
				<table class="datatables-ajax table table-bordered dataTable no-footer">
					<thead name="userThead">
						<tr><th tabindex="0" style="width: 158.828px; text-align:center;"><input onchange="userCtrl.select(this.checked);" type="checkbox" class="form-check-input"></th>
							<th class="sorting" style="width: 146.156px;">상태</th>
							<th class="sorting" style="width: 146.156px;">사용자구분</th>
							<th class="sorting" style="width: 146.156px;">기관</th>
							<th class="sorting sorting_asc" aria-sort="ascending" style="width: 223.719px;">계정</th>
							<th class="sorting" style="width: 146.156px;">이름</th>
                            <th class="sorting" style="width: 146.156px;">부서</th>
							<th class="sorting" style="width: 195.688px;">이메일</th>
							<th class="sorting" style="width: 160.141px;">전화번호(유선)</th>
							<th class="sorting" style="width: 230.469px;">등록일자</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="userCtrl.select('{USER_ID}', this.checked);" type="checkbox" class="form-check-input"></td>
	                       <td {onclick} {ondblclick}>{STTS_NM}</td>
	                       <td {onclick} {ondblclick}>{USER_SE_NM}</td>
	                       <td {onclick} {ondblclick}>{INST_NM}</td>
	                       <td {onclick} {ondblclick}>{USER_ACNT}</td>
	                       <td {onclick} {ondblclick}>{USER_NM}</td>
	                       <td {onclick} {ondblclick}>{DEPT_NM}</td>
	                       <td {onclick} {ondblclick}>{EML_ADRS}</td>
	                       <td {onclick} {ondblclick}>{TELNO}</td>
	                       <td {onclick} {ondblclick}>{REG_DT}</td>
	                    </tr>
                    </template>
                   	<template name="userNotFound">
					<tr class="odd">
						<td valign="top" colspan="10" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td>
					</tr>
                    </template>
				</table>
			</div>
			<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>
              <!--/ Page Body -->
<script >
var userCtrl = newUserControl();

userCtrl.search = () => {
	userCtrl.query = {
		by: userCtrl.find('name', "by").value,
		term: userCtrl.find('name', "term").value,
		status: userCtrl.find('name', "status").value,
		type: userCtrl.find('name', "type").value,
	};
	
	if(userCtrl.query.by == "userAccount"){
		userCtrl.query.term = userCtrl.query.term.toUpperCase();
	}
	
	userCtrl.load(1);
}

userCtrl.removeUsers= () => {
	dialog.alert({
		content:"선택한 ${prefixName} 정보를 제거하시겠습니까?",
		onOK:() => {
			userCtrl.remove();
		}
	});
}

userCtrl.renderList = () => {
	let userList = userCtrl.dataset;
	let empty = userList.empty;
	
	let trs = empty ?
			[userCtrl.find("name", "userNotFound").innerHTML] : <%-- from template#userNotFound --%>
			userList.inStrings(
				userCtrl.find('name', "userRow").innerHTML, <%-- from template#userRow --%>
				(str, dataItem) => str
					.replace(/{onclick}=""/gi, 'onclick="userCtrl.setCurrent(\'' + dataItem.getValue("USER_ID") + '\');"')
					.replace(/{ondblclick}=""/gi, 'ondblclick="userCtrl.getInfo(\'' + dataItem.getValue("USER_ID") + '\')"')
			);
	userCtrl.find('name', "userList").innerHTML = trs.join("");
	userCtrl.find("[name='userThead'] th input[type='checkbox']").checked = false;
}

userCtrl.onDatasetChange = obj => {
	userCtrl.renderList();

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

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

userCtrl.onSelectionChange = selected => {
	let userList = userCtrl.dataset;
	let keys = selected.map(e => userList.getKey(e));
	
	userCtrl.findAll("[name='userList'] input[type='checkbox']")
		.forEach(node => {
			node.checked = keys.includes(node.value);
		});
	
	userCtrl.findAll(".enable-onfound")
		.forEach(node => {
			node.disabled = keys.length < 1;
		});
};

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

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