<%
/**
 * <pre>
 * @Class Name : listFAQs.jsp
 * 
 * @Description : FAQ 목록 화면 
 * 
 * 
 * @프로젝트명: 지방문화원 통합자료관리시스템 구축사업 (2021)
 *
 * </pre>
 *
 * @ ------------    --------    ---------------------------
 * @ 수정일                     수정자             수정내용
 * @ ------------    --------    ---------------------------
 * @ 2021. 8. 3.     KNKIM       최초 생성
 *
 * 
 * @author 이씨플라자 * DIGITALSHIP KNKIM
 * @since 2021. 8. 3.
 * @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">FAQ</c:set>

 <!DOCTYPE html>
 <html lang="ko">
 <head>
 <title>${pageTitle}</title>

 <!-- GRID -->
 <link type="text/css" rel="stylesheet" href="/nlib/js/jsgrid/nlib-jsgrid.css" />
 <link type="text/css" rel="stylesheet" href="/nlib/js/jsgrid/nlib-jsgrid-theme.css" />
 <script src="/nlib/js/jsgrid/nlib-jsgrid.js"></script>

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

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

                 $("#pageIndex").val(pageIndex);

                 var inputData = {
                           "searchKeyword" : searchKeyword
                         , "pageIndex" : pageIndex
                         , "pageSize": pageSize
                         , "faqType": faqType};
                 
                 
                 //--------------------------------------
                 // 요청 처리 
                 //--------------------------------------
                 $.ajax({
                     type: "post",
                     contentType: "application/json; charset=utf-8",
                     url: reqUrl,
                     dataType: "json",
                     data: JSON.stringify(inputData),
                 }).done(function(response){
                     <%
                     // 그리드 데이터 예시 : 
                     // (1) 페이징 클라이언트에서 수행하는 경우(pageloading = false) : [{ "articleNo": 1, "articleType": "01" }, { "articleNo": 2, "articleType": "02" }]
                     // (2) 페이징 서버에서 수행하는 경우(pageloading = true) : {data: [{...}], itemsCount: 255}
                     %>
                     data.resolve(JSON.parse(response));
                 });
                 return data.promise();
             } // loadData
         },
         
         rowClick: function(args) { // 행 클릭 시, 실행되는 이벤트 함수 
             
             // 클릭된 행의 자료 객체 
             var getData = args.item;
             
             // 추출할 컬럼의 데이터 가져오기 
             var articleNo = getData["articleNo"];
             var selectedRow = $("#jsGrid").find('table tr.jsgrid-selected-row');
             
             // 상세 내용 보기 
             fn_viewDetail(articleNo, selectedRow);
         },
           
         //======================================
         // 그리드 컬럼 정의  (각 요청에 맞게 조정)
         //======================================
         fields: [
             { title:"구분",   name: "articleGubun" , type: "text", width: 100, align: "center"},
             { title:"유형",   name: "faqType"      , type: "text", width: 100, align: "center"},
             { title:"제목",   name: "title"        , type: "text", width: 200, align: "left" }
         ]
     });

     // 페이지 크기 변경시 재조회 
     $("#pageSize").on("change", function(e) {
         fn_searchArticle($("#pageSize").val(), 1);
     });


     // 유형 변경시 재조회 
     $("#faqType").on("change", function(e) {
         fn_searchArticle($("#pageSize").val(), 1);
     });

     // 검색 버튼 클릭 
     $("#btnSearch").on("click", function(e) {
         fn_searchArticle($("#pageSize").val(), 1);
     });
     
     //초기 자료 조회 
     fn_searchArticle();
     
 }); // document ready


 // 선택한 게시글 상세 보기로 이동
 function fn_viewDetail(articleNo, selectedRow) {

	 var $selectedRow = $(selectedRow);
     var reqUrl = "${pageContext.request.contextPath}/board/selectFAQAjax.do";
     
     var searchKeyword  = document.articleForm.searchKeyword.value;
     var pageIndex = $("#pageIndex").val();
     var pageSize  = $("#pageSize").val();
     var faqType  = document.articleForm.faqType.value;
     var inputData = {
               "searchKeyword" : searchKeyword
             , "pageIndex" : pageIndex
             , "pageSize": pageSize
             , "faqType": faqType};
     
     //--------------------------------------
     // 요청 처리 
     //--------------------------------------
     $.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);
         $("#jsGrid").find('table tr.answer').remove();
         //alert("DDDDDDDD remove = " + $("#jsGrid")[0].scrollHeight);
    	 $selectedRow.after("<tr class='answer'><td colspan='3'>" + jsonObj.content
    			 + "<br/>" + jsonObj.content
    			 + "<br/>" + jsonObj.content
    			 + "<br/>" + jsonObj.content
    			 + "<br/>" + jsonObj.content
    			 + "</td></tr>");
    	 //alert("DDDDDDDD add = " + $("#jsGrid")[0].scrollHeight);
    	 //$("#jsGrid").find('table.jsgrid-table.jsgrid-grid-body').height($("#jsGrid").find('table.jsgrid-table')[0].scrollHeight + 100);
     });
     
     $("#jsGrid").closest('.ui-jqgrid-bdiv').width($("#jsGrid").closest('.ui-jqgrid-bdiv').width() + 1);
     
 }

 // 게시글 작성으로 이동
 function fn_newArticle() {
     $("#articleNo").val("");
     $("#articleForm").attr("action", "${pageContext.request.contextPath}/board/insertFAQForm.do");
     $("#articleForm").submit();
 }

 // 그리드 데이터 조회 호출 
 function fn_searchArticle(pageSize, pageIndex) {
     $("#jsGrid").jsGrid("search"
             , {'pageSize'  : (pageSize  ? pageSize  : fn_getIntValue("pageSize", ${pageSize}) ), 
                'pageIndex' : (pageIndex ? pageIndex : fn_getIntValue("pageIndex", 1))
               }
     );
 }
 
 function fn_changeFaqType(selectedFaqType) {
	 
	 $('#faqType').val(selectedFaqType).trigger('change');
 }

 </script>
 </head>

 <body>

 <h1>${pageTitle }</h1>

 메시지 : ${message} 
 &nbsp;<br/>
 <form name="articleForm" id="articleForm"  
       action="${pageContext.request.contextPath}/board/listFAQs.do" 
       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>
     <select name="faqType" id="faqType" title="공지사항 유형">
         <option value="">유형</option>
         <c:forEach var="faqTypeItem" items="${faqTypeCodes}" varStatus="status">
            <option value="<c:out value="${faqTypeItem.code }" />" <c:if test="${faqTypeItem.code == faqType }">selected</c:if> ><c:out value="${faqTypeItem.name }" /></option>
         </c:forEach>
     </select>
     
     <input type="text" name="pageIndex" id="pageIndex" title="페이지번호" value="${pageIndex }" size="5" maxlength="5" />
     <input type="text" name="searchKeyword" id="searchKeyword" title="검색어" value="${searchKeyword }" size="35" maxlength="50" />
     <input type="button" name="btnSearch" id="btnSearch" title="검색버튼" value="검색" />
     
     <br/>
     <a href="javascript:void(0)" onclick="fn_changeFaqType('')" <c:if test="${'' == faqType }"> class="selected" </c:if> >전체</a>
     <c:forEach var="faqTypeItem" items="${faqTypeCodes}" varStatus="status">
        <a href="javascript:void(0)" onclick="fn_changeFaqType('<c:out value="${faqTypeItem.code }" />')" <c:if test="${faqTypeItem.code == faqType }"> class="selected" </c:if> ><c:out value="${faqTypeItem.name }" /></a>
     </c:forEach>
     
          
     <div id="jsGrid" name="jsGrid" style="height: 100%"></div>
     
     
     <input type="text" name="articleNo" id="articleNo" value="" title="선택글번호" readonly />

 </form>

 </body>
 </html>

