<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
<style id="selectActionGroupCss">
	#selectActionGroupCss+div tr[data-key='userAction'] > td:nth-child(n+2):nth-child(-n+3),
	#selectActionGroupCss+div tr[data-key='anonymousAction'] > td:nth-child(n+2):nth-child(-n+3) {
		color: red;
	}
</style>
<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="_actionGroupBy" onchange="document.getElementById('_actionGroupTerm').focus();" aria-controls="DataTables_Table_0" class="form-select">
							<option value="${infoPrefix}Name">이름</option>
							<option value="${infoPrefix}ID">아이디</option>
						</select>
						<input id="_actionGroupTerm" autofocus type="text" placeholder="조회 조건을 입력하십시오." class="form-control">
					</div>
				</div>
				<div>
					<button onclick="_search${infoPrefix}s();" class="btn btn-primary">찾기</button>
				</div>
			</div>
			<table class="datatables-ajax table table-bordered dataTable no-footer" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info">
				<thead id="_action${infoPrefix}Thead">
					<tr><th tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="text-align:center;"><input onchange="${infoPrefix}Control.groups.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="">아이디</th>
						<th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Email: activate to sort column ascending" style="">이름</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="">등록일자</th>
					</tr>
                   </thead>
                   <tbody id="_action${infoPrefix}List">
				</tbody>
                  	<template id="_action${infoPrefix}Row">
                  	<tr data-key="{GRP_ID}">
                      <td style="text-align:center;"><input value="{GRP_ID}" onchange="${infoPrefix}Control.groups.select('{GRP_ID}', this.checked);" type="checkbox" class="form-check-input"></td>
                      <td onclick="${infoPrefix}Control.groups.setCurrent('{GRP_ID}')" ondblclick="${infoPrefix}Control.groups.getInfo({})">{GRP_ID}</td>
                      <td onclick="${infoPrefix}Control.groups.setCurrent('{GRP_ID}')" ondblclick="${infoPrefix}Control.groups.getInfo({})">{GRP_NM}</td>
                      <td onclick="${infoPrefix}Control.groups.setCurrent('{GRP_ID}')" ondblclick="${infoPrefix}Control.groups.getInfo({})">{REG_DT}</td>
                   </tr>
                   </template>
                  	<template id="_action${infoPrefix}NotFound">
				<tr class="odd">
					<td valign="top" colspan="4" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td>
				</tr>
                   </template>
			</table>
			<div class="d-flex flex-row p-3 justify-content-between">
				<label id="_action${infoPrefix}PagingInfo" class="dataTables_info" role="status" aria-live="polite"></label>
                 <ul id="_action${infoPrefix}Paging" class="pagination pagination-primary">
                 </ul>
			</div>
		</div>
    </div>
</div>
              <!--/ Page Body -->
<script >
var ${infoPrefix}Control = new ActionGroupControl(false);

function getSelectedActionGroup() {
	let selected = ${infoPrefix}Control.groups.dataset.getKeys("selected");
	if (selected.length < 1)
		return dialog.alert("기능그룹을 선택하십시오.");
	else
		return selected;
}

function _search${infoPrefix}s() {
	${infoPrefix}Control.groups.query = {
		by:$("#_actionGroupBy").val(),
		term:$("#_actionGroupTerm").val()
	};
	${infoPrefix}Control.groups.load(1);
}

${infoPrefix}Control.onGroupListChange = obj => {
	let ${infoPrefix}List = ${infoPrefix}Control.groups.dataset;
	let empty = ${infoPrefix}List.empty;
	
	let trs = empty ?
		[document.getElementById("_action${infoPrefix}NotFound").innerHTML] : <%-- from template#_action${infoPrefix}NotFound --%>
		${infoPrefix}List.inStrings(document.getElementById("_action${infoPrefix}Row").innerHTML); <%-- from template#_action${infoPrefix}Row --%>
	$("#_action${infoPrefix}List").html(trs.join());
	$("#_action${infoPrefix}Thead").find("th input[type='checkbox']").prop("checked", false);

	$("#_action${infoPrefix}Paging").setPaging({
		list:${infoPrefix}Control.groups.dataset,
		prefix:${infoPrefix}Control.groups.prefix,
		start:obj.${infoPrefix}Start,
		totalSize:obj.${infoPrefix}Total,
		fetchSize:obj.${infoPrefix}Fetch,
		func:"${infoPrefix}Control.groups.load({index})"
	});
};

${infoPrefix}Control.onCurrentGroupChange = item => {
	if (!item) return;
	
	let key = item.data.GRP_ID;
	$("#_action${infoPrefix}List").setCurrentRow(key);
};

${infoPrefix}Control.onGroupSelect = selected => {
	let ${infoPrefix}List = ${infoPrefix}Control.groups.dataset;
	let keys = selected.map(e => ${infoPrefix}List.getKey(e));
	$("#_action${infoPrefix}List input[type='checkbox']").each(function() {
		let checkbox = $(this);
		checkbox.prop("checked", keys.includes(checkbox.val()));
	});
};

$("#_actionGroupTerm").onEnterPress(_search${infoPrefix}s);

$(function(){
	${onload}
	${infoPrefix}Control.groups.setData({
		${infoPrefix}List:${groupList},
		${infoPrefix}Start:${groupStart},
		${infoPrefix}Fetch:${groupFetch},
		${infoPrefix}Total:${groupTotal}
	});
});
</script>
