kcscDev/egovframe-template-simple-react-contribution/src/pages/standardCode/list/StandardCodeList.jsx

import React, {useState, useEffect, useCallback, useRef} from 'react';
import {Link, useLocation, useParams} from 'react-router-dom';

import * as EgovNet from 'api/egovFetch';
import URL from 'constants/url';
import {StandardCodeListModal, StandardCodeListModalTable} from './StandardCodeListModal'
import {AiFillFileMarkdown, AiFillStar} from "react-icons/ai";
import StandardCodeSearchForm from "./StandardCodeSearchForm";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
import Loading from "../../../components/Loading";

function StandardCodeList({}) {
    const {listCode} = useParams();
    const [listData, setListData] = useState([])
    const [listLoading, setListLoading] = useState(true);
    const [filterData, setFilterData] = useState('');
    const [resultCnt, setResultCnt] = useState(0);
    const [remarkCnt, setRemarkCnt] = useState(0);
    const [groupSeq, setGroupSeq] = useState();

    const [show, setShow] = useState(false);
    function close() {
        setShow(false);
    }
    
    function showHandling(e) {
        const param = e.currentTarget.dataset;
        const groupSeq = param.groupSeq;
        console.log(groupSeq);
        EgovNet.requestFetch(
            '/standardCode/codeListModal.do',
            {
                method: "POST",
                headers: {
                    'Content-type': 'application/json'
                },
                body: JSON.stringify(
                    groupSeq
                )
            }, (resp) => {
                console.log(resp + "------------------------resp")
                const body = [];
                const head = [];
                if (resp.length > 0) {
                    resp.forEach(function (item, index) {
                        const formattedDate = item.aplcnBgngYmd.match(/\d{4}-\d{2}-\d{2}/)[0];
                        const url = "https://www.kcsc.re.kr/file/DownloadGrp/" + item.docFileGrpId;
                        body.push(
                            <tr>
                                <td>{formattedDate}</td>
                                <td><a href={url}><AiFillFileMarkdown/></a></td>
                                <td></td>
                            </tr>)
                    })
                    head.push(
                        <tr>
                            <td>년도</td>
                            <td>기준코드</td>
                            <td>신구건설기준비교</td>
                        </tr>
                    )
                }

                setGroupSeq(<StandardCodeListModalTable head={head} content={body}/>);
            }
        )
        setShow(true);
    }

    const retrieveList = useCallback((searchCondition) => {
        setListLoading(true)
        EgovNet.requestFetch('/standardCode/standard-code-list'+EgovNet.convParams(searchCondition),
            {
                method: "GET",
                headers: {
                    'Content-type': 'application/json',
                }
            },
            (resp) => {
                setListData(resp.result.resultList);
                setResultCnt(resp.result.resultCnt.allCnt);
                setRemarkCnt(resp.result.resultCnt.remarkCnt);
                setListLoading(false)
            },
            function (resp) {
                console.log("err response : ", resp);
            }
        );

    }, []);


    return (
        <div className="StandardCodeList container">
            <div className="c_wrap codeListContent">
                <div className="layout">
                    <div className="contents NOTICE_LIST listTableDiv">
                        <StandardCodeSearchForm param={listCode?listCode:'10'} reloadFunction={retrieveList} resultCnt={resultCnt} remarkCnt={remarkCnt}/>
                        <div className="board_list code_list">
                            <div className="head">
                                <span>대분류</span>
                                <span>중분류</span>
                                <span>코드번호</span>
                                <span>코드명</span>
                                <span className={"text-start"}>개정이력</span>
                                <span className={"text-start"}>보기</span>
                                <span>즐겨찾기</span>
                            </div>
                            {
                                listLoading?(<Loading/>):(
                                    <div className="result">
                                        {listData.filter(item => {
                                            if (item.groupNm.includes(filterData)) {
                                                return item
                                            }
                                            return null
                                        }).map(item => {
                                            return (
                                                <div className="list_item List_Codes">
                                                    <div className="mainCategory">{item.mainCategory}</div>
                                                    <div className="middleCategory">{item.middleCategory}</div>
                                                    <div className="kcscCd">{item.kcscCd}</div>
                                                    <div className="groupNm">{item.groupNm}<br/><span className={"text-danger"}>{item.rvsnRemark}</span></div>
                                                    <div className="Revisionhistory">
                                                        <Row className={"justify-content-start"}>
                                                            {item.historyList.filter(history => {
                                                                return history;
                                                            }).map(history => {
                                                                let buttonClass = "btn btn-sm docInfoBtn docInfoActive "
                                                                let pClass = "yearInfo yearInfoActive";
                                                                if(history.docEr === 'E'){
                                                                    buttonClass += "btn-success "
                                                                }else{
                                                                    buttonClass += "btn-primary "
                                                                }
                                                                return (
                                                                    <Col xs={"auto"} className={"px-1"}>
                                                                        <input type="button"
                                                                               className={buttonClass}
                                                                               value={history.docEr==='E'?'제':'개'}
                                                                               onClick={()=>{
                                                                                   /*window.open("/standardCode/viewer/"+history.kcscCd+":"+history.rvsnYmd.split('T')[0]);*/
                                                                               }}
                                                                        />
                                                                        <br/>
                                                                        <p className={pClass}>{history.docYr}</p>
                                                                    </Col>
                                                                )
                                                            })}
                                                        </Row>
                                                    </div>
                                                    <div className="fille">
                                                        <Row className={"justify-content-start"}>
                                                            {item.historyList.filter(history => {
                                                                return history;
                                                            }).map(history => {
                                                                let buttonClass = "btn btn-sm docInfoBtn docInfoActive "
                                                                let pClass = "yearInfo yearInfoActive";
                                                                if(history.docEr === 'E'){
                                                                    buttonClass += "btn-success "
                                                                }else{
                                                                    buttonClass += "btn-primary "
                                                                }
                                                                return (
                                                                    <Col xs={"auto"} className={"px-1"}>
                                                                        <input type="button"
                                                                               className={buttonClass}
                                                                               value={history.docEr==='E'?'제':'개'}
                                                                               onClick={()=>{
                                                                                   window.open("/standardCode/viewer/"+history.kcscCd+":"+history.rvsnYmd.split('T')[0]);
                                                                               }}
                                                                        />
                                                                        <br/>
                                                                        <p className={pClass}>{history.docYr}</p>
                                                                    </Col>
                                                                )
                                                            })}
                                                        </Row>
                                                    </div>
                                                    <div className="star"><AiFillStar/></div>
                                                </div>
                                            )
                                        })}
                                    </div>
                                )
                            }
                        </div>
                        <StandardCodeListModal size={"lg"} show={show} content={groupSeq} onClose={close} title={"개정이력"}/>
                    </div>
                </div>
            </div>
        </div>
    );
}


export default StandardCodeList;