<%@ page language="java" contentType="text/html; charset=utf-8" %>
<%@ page import="java.io.*" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ include file="/jsp/common/include/localemessage.jsp" %>
<%
    response.setHeader("Pragma", "No-cache");
    response.setHeader("Cache-Control", "no-cache");
    response.setHeader("Expires", "0");

%>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <jsp:include page="/jsp/common/include/css.jsp"/>
    <jsp:include page="/jsp/common/include/script.jsp"/>
    <jsp:include page="/jsp/common/include/portal.jsp"/>

    <script language="javascript">
        var url = '<c:url value="/onl/apim/portaluser/portalUserMan.json" />';
        var url_view = '<c:url value="/onl/apim/portaluser/portalUserMan.view" />';
        var select_approvalStatus = "";
        var select_userStatus = "";

        function getGridSelectText(key, value, data) {
            if (!Array.isArray(data) || data.length === 0) {
                return "";
            }

            return data
                .filter(item => item[key] !== undefined && item[value] !== undefined)
                .map(item => String(item[key]) + ":" + String(item[value]))
                .join(';');
        }

        function init() {
            $.ajax({
                type: "POST",
                url: url,
                dataType: "json",
                data: {cmd: 'LIST_INIT_COMBO'},
                success: function (json) {

                    const comboConfigs = [
                        {name: 'searchUserStatus', data: json.userStatusRows},
                        {name: 'searchApprovalStatus', data: json.approvalStatusRows},
                        {name: 'searchOrgId', data: json.orgRows},
                        {name: 'searchRoleCode', data: json.roleCodeRows}
                    ];

                    comboConfigs.forEach(function (config) {
                        new makeOptions("CODE", "NAME")
                            .setObj($("select[name=" + config.name + "]"))
                            .setNoValueInclude(true)
                            .setNoValue("", "<%=localeMessage.getString("combo.all")%>")
                            .setData(config.data)
                            .setFormat(nameOptionFormat).rendering();
                    });

                    setSearchable('searchOrgId');

                    putSelectFromParam();
                    select_approvalStatus = ": ;" + getGridSelectText("CODE", "NAME", json.approvalStatusRows);
                    select_userStatus = ": ;" + getGridSelectText("CODE", "NAME", json.userStatusRows);

                    $('#grid').jqGrid('setColProp', 'approvalStatus', {editoptions: {value: select_approvalStatus}});
                    $('#grid').jqGrid('setColProp', 'userStatus', {editoptions: {value: select_userStatus}});
                    $('#grid').trigger('reloadGrid');

                },
                error: function (e) {
                    alert(e.responseText);
                }
            });
        }

        $(document).ready(function () {
            var gridPostData = getSearchForJqgrid("cmd", "LIST");

            $('#grid').jqGrid({
                datatype: "json",
                mtype: 'POST',
                url: url,
                postData: gridPostData,
                colNames: ['No.',
                    '<%= localeMessage.getString("portalUser.id") %>',
                    '<%= localeMessage.getString("portalUser.orgName") %>',
                    '<%= localeMessage.getString("portalUser.name") %>',
                    '<%= localeMessage.getString("portalUser.userId") %>',
                    <%--'<%= localeMessage.getString("portalUser.mobile") %>',--%>
                    '<%= localeMessage.getString("portalUser.roleName") %>',
                    '<%= localeMessage.getString("portalUser.userStatus") %>',
                    '<%= localeMessage.getString("portalUser.createOn") %>',
                    '<%= localeMessage.getString("portalUser.approvalStatus") %>'
                ],
                colModel: [
                    {name: 'rowNum', align: 'center', width: '30', sortable: false},
                    {name: 'id', align: 'center', key: true, hidden: true},
                    {name: 'portalOrgUIs.orgName', align: 'center', width: "120"},
                    {name: 'userName', align: 'center', width: "80" },
                    {name: 'loginId', align: 'center', width: "150" },
                    // {name: 'mobileNumber', align: 'center', width: "100" },
                    {name: 'roleCodeDescription', align: 'center', width: "80"},
                    {name: 'userStatusDescription', align: 'center', width: "50"},
                    {name: 'createdDate', align: 'center', width: "100", formatter: timeStampFormat},
                    {name: 'approvalStatusDescription', align: 'center', width: "50"}
                ],
                jsonReader: {
                    repeatitems: false
                },
                pager: $('#pager'),
                page: '${param.page}',
                rowNum: '${rmsDefaultRowNum}',
                autoheight: true,
                height: $("#container").height(),
                autowidth: true,
                viewrecords: true,
                rowList: eval('[${rmsDefaultRowList}]'),
                loadComplete: function (d) {
                    var records = $(this).getGridParam('records');
                    var page = $(this).getGridParam('page');
                    var rowNum = $(this).getGridParam('rowNum');
                    var rows = $(this).getDataIDs();
                    var colModel = $(this).getGridParam("colModel");

                    for (var i = 0; i < rows.length; i++) {
                        var number = ((page - 1) * rowNum + i) + 1;
                        // var reverseNumber = records - ((page - 1) * rowNum + i);
                        $(this).setCell(rows[i], 'rowNum', number);
                    }
                    for (var i = 0; i < colModel.length; i++) {
                        $(this).setColProp(colModel[i].name, {sortable: false});
                    }
                },
                ondblClickRow: function (rowId) {
                    var rowData = $(this).getRowData(rowId);
                    var key = rowData['id'];

                    var url2 = url_view;
                    url2 += '?cmd=DETAIL';
                    url2 += '&page=' + $(this).getGridParam("page");
                    url2 += '&returnUrl=' + getReturnUrl();
                    url2 += '&menuId=' + '${param.menuId}';
                    url2 += '&id=' + key;
                    goNav(url2);

                }, loadError: function (jqXHR, textStatus, errorThrown) {
                    if (jqXHR.status == 401) {
                        var location = '<%=request.getContextPath()%>/';
                        comloadError(jqXHR, textStatus, errorThrown, location);
                    }
                }
            });

            init();

            $("#btn_search").click(function () {
                //var searchMobileNumber = $("#searchMobileNumber").val().trim();
                var postData = getSearchForJqgrid("cmd", "LIST");

                $("#grid").setGridParam({url: url, postData: postData, page: 1}).trigger("reloadGrid");
            });

            $("#btn_new").click(function () {
                var url2 = url_view;
                url2 += '?cmd=DETAIL';
                url2 += '&page=' + $("#grid").getGridParam("page");
                url2 += '&returnUrl=' + getReturnUrl();
                url2 += '&menuId=' + '${param.menuId}';
                goNav(url2);
            });

            $("input[name^=search]").keydown(function (key) {
                if (key.keyCode == 13) {
                    $("#btn_search").click();
                }
            });

            $("#startDatepicker").datepicker();
            $("#endDatepicker").datepicker();

            buttonControl();

        });

    </script>
</head>
<body>
<div class="right_box">
    <div class="content_top">
        <ul class="path">
            <li><a href="#">${rmsMenuPath}</a></li>
        </ul>
    </div><!-- end content_top -->
    <div class="content_middle" id="content_middle">
        <div class="search_wrap">
            <button type="button" class="cssbtn" id="btn_new" level="W"><i
                    class="material-icons">add</i> <%= localeMessage.getString("button.new") %>
            </button>
            <button type="button" class="cssbtn" id="btn_search" level="R"><i
                    class="material-icons">search</i> <%= localeMessage.getString("button.search") %>
            </button>
        </div>
        <div class="title"><%= localeMessage.getString("portalUser.title") %>
        </div>

        <table class="search_condition" cellspacing=0;>
            <tbody>
            <tr>
                <th style="width:10%; min-width:100px;"><%= localeMessage.getString("portalUser.orgName") %>
                </th>
                <td>
                    <div class="select-style">
                        <select name="searchOrgId" value="${param.searchOrgId}"></select>
                    </div>
                </td>
                <th style="width:10%; min-width:100px;"><%= localeMessage.getString("portalUser.roleName") %>
                </th>
                <td>
                    <div class="select-style">
                        <select name="searchRoleCode" value="${param.searchRoleCode}"></select>
                    </div>
                </td>
                <th><%= localeMessage.getString("portalUser.userStatus") %>
                </th>
                <td>
                    <div class="select-style">
                        <select type="text" name="searchUserStatus" value="${param.searchUserStatus}"></select>
                    </div>
                </td>
            </tr>
            <tr>
                <th style="width:10%; min-width:100px;"><%= localeMessage.getString("portalUser.name") %>
                </th>
                <td><input type="text" name="searchUserName"></td>

                <th style="width:10%; min-width:100px;">
                    <%= localeMessage.getString("portalUser.userId") %>
                </th>
                <td><input type="text" name="searchUserId" value="${param.searchUserId}"></td>
                <th style="width:10%; min-width:100px;"><%= localeMessage.getString("portalUser.mobileNumber") %>
                </th>
                <td><input type="text" name="searchMobileNumber" value="${param.searchMobileNumber}"></td>
            </tr>
            <%--<tr>
                <th><%= localeMessage.getString("portalUser.approvalStatus") %></th>
                <td>
                    <div class="select-style">
                        <select type="text" name="searchApprovalStatus" value="${param.searchApprovalStatus}"></select>
                    </div>
                </td>
                <th ><%= localeMessage.getString("portalUser.createOn")%></th>
                <td>
                    <input type="text" name="searchStartYYYYMMDD" id="startDatepicker" readonly="readonly" value="" size="10" style="width:160px;">
                     ~ <input type="text" name="searchEndYYYYMMDD" value="" id="endDatepicker" size="10" readonly="readonly" style="width:160px;">
                    <input type="hidden" name="searchStartDate" value="" style="width:0px;">
                    <input type="hidden" name="searchEndDate" value="" style="width:0px;">
                </td>
            </tr>	--%>
            </tbody>
        </table>

        <table id="grid"></table>
        <div id="pager"></div>

    </div><!-- end content_middle -->
</div><!-- end right_box -->
</body>
</html>

