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

import React, {useEffect, useState} from "react";
import {Nav} from "react-bootstrap";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import {Link} from "react-router-dom";
import Button from "react-bootstrap/Button";
import * as EgovNet from "../../../api/egovFetch";

function StandardCodeSearchForm({param, reloadFunction, resultCnt, remarkCnt}){

    const [searchCondition, setSearchCondition] = useState({
        tab: Number(param?.substring(0, 2)),
        category1: param?.substring(2, 4),
        category2: param?.substring(4, 6),
        category3: param?.substring(6, 8),
    });
    const [subTabsVisible, setSubTabsVisible] = useState(false);

    const [cat1SelectOption, setCat1SelectOption] = useState([])
    const [cat2SelectOption, setCat2SelectOption] = useState([])
    const [cat3SelectOption, setCat3SelectOption] = useState([])

    function getSelectBoxOption(groupCd, handler){
        EgovNet.requestFetch(
            '/standardCode/category-option?listCode='+groupCd,
            {
                method: "GET",
                headers: {
                    'Content-type': 'application/json',
                }
            },
            handler,
            function (resp) {
                console.log("err response : ", resp);
            }
        );
    }

    useEffect(() => {
        if(searchCondition.tab){
            if(searchCondition.tab !== 10 && searchCondition.tab !== 20){
                setSubTabsVisible(true)
            }else{
                setSubTabsVisible(false)
            }
        }
        reloadFunction(searchCondition)
    }, [searchCondition]);

    useEffect(() => {
        setSearchCondition({...searchCondition, category1: '', category2: '', category3: ''})
        const groupCd = searchCondition.tab;
        getSelectBoxOption(groupCd, (resp)=>{
            const options = [];
            resp.result.groupList.forEach(function (item, index){
                options.push(<option value={item.groupCurCd}>{item.groupNm}</option>)
            })
            setCat1SelectOption(options)
        })
    }, [searchCondition.tab]);

    useEffect(() => {
        setSearchCondition({...searchCondition, category2: '', category3: ''})
        const groupCd = searchCondition.tab+searchCondition.category1;
        getSelectBoxOption(groupCd, (resp)=>{
            const options = [];
            resp.result.groupList.forEach(function (item, index){
                options.push(<option value={item.groupCurCd}>{item.groupNm}</option>)
            })
            setCat2SelectOption(options)
        })
    }, [searchCondition.category1]);

    useEffect(() => {
        setSearchCondition({...searchCondition, category3: ''})
        const groupCd = searchCondition.tab+searchCondition.category1+searchCondition.category2;
        getSelectBoxOption(groupCd, (resp)=>{
            const options = [];
            resp.result.groupList.forEach(function (item, index){
                options.push(<option value={item.groupCurCd}>{item.groupNm}</option>)
            })
            setCat3SelectOption(options)
        })
    }, [searchCondition.category2]);


    return (
        <>
            <div className="condition">
                <ul>
                    <li className="third_1 L">
                        <div className={`tab ${searchCondition.tab === 10 ? 'active' : ''}`}
                             onClick={() => {setSearchCondition({...searchCondition, tab: 10})}}>설계기준</div>
                    </li>
                    <li className="third_1 L">
                        <div className={`tab ${searchCondition.tab === 20 ? 'active' : ''}`}
                             onClick={() => {setSearchCondition({...searchCondition, tab: 20})}}>표준시방서</div>
                    </li>
                    <li className="third_1 L">
                        <div className={`tab ${[40, 50, 60, 70, 80, 90].includes(searchCondition.tab) ? 'active' : ''}`}
                             onClick={() => {setSearchCondition({...searchCondition, tab: 40})}}>전문시방서</div>
                    </li>
                    <li className="third_1 L">
                        <label className="f_select" htmlFor="sel1">
                            <select id="sel1" title="조건" value={searchCondition.category1}
                                    onChange={(e)=>{setSearchCondition({...searchCondition, category1: e.target.value})}}>
                                <option value="">전체</option>
                                {cat1SelectOption}
                            </select>
                        </label>
                    </li>
                    <li className="third_1 L">
                        <label className="f_select w_306" htmlFor="sel1">
                            <select id="sel2" title="조건" value={searchCondition.category2}
                                    onChange={(e)=>{setSearchCondition({...searchCondition, category2: e.target.value})}}>
                                <option value="">전체</option>
                                {cat2SelectOption}
                            </select>
                        </label>
                    </li>
                    <li className="third_1 L">
                        <label className="f_select w_306" htmlFor="sel1">
                            <select id="sel3" title="조건" value={searchCondition.category3}
                                    onChange={(e)=>{setSearchCondition({...searchCondition, category3: e.target.value})}}>
                                <option value="">전체</option>
                                {cat3SelectOption}
                            </select>
                        </label>
                    </li>
                    <li className="third_1 L">
                        {remarkCnt?(
                            <span>전체 {resultCnt} / <span className={"text-danger"}>{remarkCnt}</span> 건</span>
                        ):(
                            <span>전체 {resultCnt} 건</span>
                        )}

                    </li>
                    <li className="third_1 L">
                        <div className={`tab`}>통합 다운로드</div>
                    </li>
                </ul>
            </div>
            <Row className={"justify-content-between"}>
                <Col>
                    {subTabsVisible && (
                        <Nav className={"tabs"} variant={"tabs"} >
                            <Nav.Item><Nav.Link className={`${searchCondition.tab === 40 ? 'active' : ''}`} onClick={() => {setSearchCondition({...searchCondition, tab: 40})}}>서울특별시</Nav.Link></Nav.Item>
                            <Nav.Item><Nav.Link className={`${searchCondition.tab === 50 ? 'active' : ''}`} onClick={() => {setSearchCondition({...searchCondition, tab: 50})}}>고속도로공사</Nav.Link></Nav.Item>
                            <Nav.Item><Nav.Link className={`${searchCondition.tab === 60 ? 'active' : ''}`} onClick={() => {setSearchCondition({...searchCondition, tab: 60})}}>한국농어촌공사</Nav.Link></Nav.Item>
                            <Nav.Item><Nav.Link className={`${searchCondition.tab === 70 ? 'active' : ''}`} onClick={() => {setSearchCondition({...searchCondition, tab: 70})}}>철도건설공사</Nav.Link></Nav.Item>
                            <Nav.Item><Nav.Link className={`${searchCondition.tab === 80 ? 'active' : ''}`} onClick={() => {setSearchCondition({...searchCondition, tab: 80})}}>LH한국토지주택공사</Nav.Link></Nav.Item>
                            <Nav.Item><Nav.Link className={`${searchCondition.tab === 90 ? 'active' : ''}`} onClick={() => {setSearchCondition({...searchCondition, tab: 90})}}>K-Water</Nav.Link></Nav.Item>
                        </Nav>
                    )}
                </Col>
                <Col xs={"auto"}>
                    <Button href={"/standardCode/info"} size={"sm"} variant={"secondary"}>건설기준코드 안내</Button>
                </Col>
            </Row>
        </>
    );
}

export default StandardCodeSearchForm;