<%
/**
 * <pre>
 * @Class Name : listInterests.jsp
 * 
 * @Description : 관심 자료를 조회한다.
 * 
 * 
 * @프로젝트명: 지방문화원 통합자료관리시스템 구축사업 (2021)
 *
 * </pre>
 *
 * @ ------------    --------    ---------------------------
 * @ 수정일                     수정자             수정내용
 * @ ------------    --------    ---------------------------
 * @ 2021. 7. 28.    JSYOO       최초 생성
 *
 * 
 * @author 이씨플라자 * DIGITALSHIP JSYOO
 * @since 2021. 7. 28.
 * @version 1.0
 *
 */
 %>
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="validator" uri="http://www.springmodules.org/tags/commons-validator" %>

<c:set var="pageTitle">관심 자료</c:set>

<!DOCTYPE html>
<html>
<head>
<title>${pageTitle}</title>

<!-- GRID -->
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/js/jsgrid/nlib-jsgrid.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/js/jsgrid/nlib-jsgrid-theme.css" />
<script src="${pageContext.request.contextPath}/js/jsgrid/nlib-jsgrid.js"></script>

<script type="text/javaScript" language="javascript">

window.onload = function() {
    //=======================================================
    // 그리드 생성 환경설정 
    //=======================================================
    $("#jsGrid").jsGrid({
        pageSize : $("#pageSize").val(),
        controller: {
            loadData: function (filter) { // 그리드에 데이터를 가져올 때 실팽되는 함수 
                var data = $.Deferred();
                //======================================
                // 요청 정보 구성 : 시작  (각 요청에 맞게 조정)
                //======================================
                var reqUrl = "${pageContext.request.contextPath}/interest/listInterestsAjax.do";
                var pageIndex = ( filter && filter.pageIndex ? filter.pageIndex : $("#pageIndex").val());
                var pageSize  = ( filter && filter.pageSize  ? filter.pageSize  : $("#pageSize").val());

                var mngOrgCd  = $("#mngOrgCd").val();
                
                $("#pageIndex").val(pageIndex);
                
                var inputData = {
                         "mngOrgCd" : mngOrgCd
                        , "pageIndex" : pageIndex
                        , "pageSize": pageSize};
                
                
                //--------------------------------------
                // 요청 처리 
                //--------------------------------------
                $.ajax({
                    type: "post",
                    contentType: "application/json; charset=utf-8",
                    url: reqUrl,
                    dataType: "json",
                    data: JSON.stringify(inputData),
                }).done(function(response){
                	var jsonObj = JSON.parse(response);
                    //$("#itemsCount").val(jsonOjb.itemsCount);
                    console.log(jsonObj.itemsCount);
                    
                    if(jsonObj.itemsCount == undefined) {
                        $("#itemsCount").text("0");
                        $("#searchItemsCount").text("0");
                    }
                    else {
                        $("#itemsCount").text(jsonObj.itemsCount);
                        $("#searchItemsCount").text(jsonObj.itemsCount);
                    }
                    <%
                    // 그리드 데이터 예시 : 
                    // (1) 페이징 클라이언트에서 수행하는 경우(pageloading = false) : [{ "articleNo": 1, "articleType": "01" }, { "articleNo": 2, "articleType": "02" }]
                    // (2) 페이징 서버에서 수행하는 경우(pageloading = true) : {data: [{...}], itemsCount: 255}
                    %>
                    
                    data.resolve(jsonObj);
                });
                return data.promise();
            } // loadData
        },
        
        rowRenderer: function(item) {
            var user = item;
            console.log(item);
            var $check = $("<div style='float:left;width:140px;height:211px;display:flex;align-items:center;justify-content:center;'>").addClass("client-photo")
                .append($("<input type='checkbox' name='interestChk' value=" + item.mbInterestId + ">"))
            var $org = $("<div style='float:left;width:140px;height:211px;display:flex;align-items:center;justify-content:center;'>").addClass("client-photo")
                .append($("<p>" + user.mngOrgNm.capitalize() + "</p>"))
            var $photo = $("<div>").addClass("client-photo").append($("<img>")
                    .attr("src", "data:image/jpeg;base64,[encoded data, 7100 characters]"))
                    .append($("<div><input type='button' style='float:right' value='관심' onclick='deleteInterests(\"single\","+ item.mbInterestId +");'></div>"))
            
            var $info = $("<div>").addClass("client-info")
                .append($("<p>").append($("<strong>").text(user.title.capitalize())))
                .append($("<p>").text("도서간행물 / OO 문화원(2018)"))
                .append($("<p>").text("소장 : OO문화원, OO문화원"))
                .append($("<p>").text("설명이 들어갑니다.설명이 들어갑니다.설명이 들어갑니다.설명이 들어갑니다.설명이 들어갑니다.설명이 들어갑니다.설명이 들어갑니다."))
                .append($("<input type='button' style='float:right' onclick='docView();'>").attr("value","원문보기"))
                .append($('<input type="button" style="float:right" onclick="risShow(\''+user.masterId.capitalize()+'\');">').attr("value","RIS"));

            return $("<tr>").append($("<td>").append($check).append($org).append($photo).append($info));
        },
        rowClick: function(args) { // 행 클릭 시, 실행되는 이벤트 함수 
            
            // 클릭된 행의 자료 객체 
            var getData = args.item;
            
            // 추출할 컬럼의 데이터 가져오기 
            var articleNo = getData["masterId"];
            
        },
        
        //======================================
        // 그리드 컬럼 정의  (각 요청에 맞게 조정)
        //======================================
        fields: [
        	{
                headerTemplate: function() {
                    return $("<input>").attr("type", "checkbox").attr("id","allChk")
                            .on("click", function () {
                                selectAllChk();
                            });
                },
                align: "center",
                width: 50
            },
            { title:"문화원",   name: "masterId"  , type: "text"  , width: 50, align: "center"},
            { title:"자료 정보",   name: "title",      type: "text"  , width: 400, align: "center" },
            /* { title:"관리번호",  name: "ctrlNum",  type: "number", width: 50, align: "center" }, */
            { title:"이용",  name: "rprsThumbUrl",    type: "text", width: 100, align: "center"},
            /* { title:"출판사",  name: "publisher",    type: "text", width: 100, align: "center"} */
            { name: "mngOrgNm", visible: false, width: 0},
            { name: "mbInterestId", visible: false, width: 0}
        ]
    });

    String.prototype.capitalize = function() {
        return this.charAt(0).toUpperCase() + this.slice(1);
    };
    
    // 페이지 크기 변경시 재조회 
    $("#pageSize").on("change", function(e) {
        fn_search_article($("#pageSize").val(), 1);
    });

    // 검색 버튼 클릭 
    $("#btnSearch").on("click", function(e) {
        fn_search_article($("#pageSize").val(), 1);
    });
    
    $("#mngOrgCd").on("change", function(e){
    	fn_search_article($("#pageSize").val(), 1);
    })
    
    //초기 자료 조회 
    fn_search_article();
    
}; // window.onload


// 그리드 데이터 조회 호출 
function fn_search_article(pageSize, pageIndex) {
    $("#jsGrid").jsGrid("search"
            , {'pageSize' : (pageSize  ? pageSize  : fn_getIntValue("pageSize", ${searchCollection.pageSize})), 
               'pageIndex': (pageIndex ? pageIndex : fn_getIntValue("pageIndex", ${searchCollection.pageIndex}))
               }
    );
}

function selectAll(){
    if($("#allChk").is(":checked") == false)
    {
    	$("#allChk").attr("checked", true);
    	selectAllChk();
    }else if($("#allChk").is(":checked") == true)
    {
    	$("#allChk").attr("checked", false);
    	selectAllChk();
    }
}

<% //체크박스로 전체선택 %>
function selectAllChk(){
	if($("#allChk").is(":checked") == false)
	{
		$("input:checkbox[name = 'interestChk']").attr("checked", false);
	}else if($("#allChk").is(":checked") == true)
	{
        $("input:checkbox[name = 'interestChk']").attr("checked", true);
	}
}

function deleteInterests(type,mbInterestId){
	var mbInterestIdArray = [];
	
	<% //체크박스를 이용한 삭제 %>
    if(type=="multiple")
    {
        if($("input:checkbox[name=interestChk]:checked").length==0)
        {
          alert("선택된 관심자료가 없습니다.");
          return false;
        }
         $("input:checkbox[name=interestChk]").each(function(){
                if($(this).is(":checked") == true) {
                	mbInterestIdArray.push($(this).val());
                }
        });
    }
    else if(type=="single")
    {
    	<% //관심버튼을 이용한 삭제 %>
    	mbInterestIdArray.push(mbInterestId);
    }
    
	if(!confirm("삭제하시겠습니까?"))
	{
		return false;		
	}
	
   
   $.ajax({
       url : "${pageContext.request.contextPath}/interest/deleteInterests.ajax",
       type : "POST",
       async: false,
       data : {"mbInterestIdList" : mbInterestIdArray},
       success : function(){
    	   alert("선택하신 관심자료가 삭제되었습니다.");
    	   fn_search_article($("#pageSize").val(), 1);
    	   
       },error : function(){
       }
   });
   
}
</script>
</head>

<body>
<style>
    .client-photo { float: left; margin: 0 20px 0 10px; }
    .client-photo img { border-radius: 50%; border: 1px solid #ddd; }
    .client-info { margin-top: 10px; }
    .client-info p { line-height: 25px; }
    
</style>
<h1>${pageTitle }</h1>

<div name="listResult" id="listResult">
 총 <span name="itemsCount" id="itemsCount"></span>건<br>
</div>

<form name="interestsForm" id="interestsForm"  
      method="post"> 
    
    <%-- <!-- 검색조건 -->
    <select name="pageSize" id="pageSize" title="목록에 보여줄 글 개수">
        <c:forEach var="pageSizeItem" items="${pageSizeCodes}" varStatus="status">
           <option value="<c:out value="${pageSizeItem.code }" />" <c:if test="${pageSizeItem.code == pageSize }">selected</c:if> ><c:out value="${pageSizeItem.name }" /></option>
        </c:forEach>
    </select> --%>
    <input type="text" name="pageSize" id="pageSize" value="${searchCollection.pageSize }" />
    <input type="text" name="pageIndex" id="pageIndex" title="페이지번호" value="${searchCollection.pageIndex }" size="5" maxlength="5" />
    <select style="float:right;" name="mngOrgCd" id="mngOrgCd">
            <option value="">문화원 전체</option>
        <c:forEach var="deptList" items="${deptList }">
            <option value="${deptList.orgCd }" >${deptList.deptNm }</option>
        </c:forEach>
     </select>     
    <div id="jsGrid" name="jsGrid" style="height: 100%"></div>
    <input type="button" value="전체선택" onclick="selectAll();"  />
    <input type="button" value="선택삭제" onclick="deleteInterests('multiple','');" />
    <input type="button" value="관심자료 추가 " onclick="insertInterest('UR-76B306FA93274993B5FD53FBDF7FA12D');" />
    <input type="hidden" id="masterId" name="masterId">
    <input type="hidden" id="title" name="title">
</form>

</body>
</html>
