kcscDev/egovframe-template-simple-react-contribution/src/pages/admin/config/baseCode/ParentCodeDiv.jsx

import React, { useState, useEffect, useCallback } from 'react';
import * as EgovNet from "api/egovFetch";
import {Container} from "react-bootstrap";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Form from 'react-bootstrap/Form'
import Button from "react-bootstrap/Button";
import { FaRegHandPointRight } from "react-icons/fa";
import CODE from "../../../../constants/code";

function ParentCodeDiv({getCodeItem}){

    const [codeGrpRow, setCodeGrpRow] = useState();

    const getCodeGrp = useCallback(()=>{
        EgovNet.requestFetch(
            '/admin/config/code-grp',
            {
                method: "GET"
            },
            (resp) => {
                const codeGrpList = resp.result.codeGrpList;
                const grpTag = [];
                codeGrpList.forEach(function (item, index){
                    grpTag.push(
                        <Row className={"py-2 border-bottom"}>
                            <Form.Control type={"hidden"} className={"grpCd"} defaultValue={item.grpCd}/>
                            <Col xs={3}>
                                <FaRegHandPointRight className={"selectIcon d-none"}/>&nbsp;
                                <a href={"#"} onClick={(e)=>{codeGrpChoose(e, item.grpCd)}} data-grpcd={item.grpCd}>{item.grpCd}</a>
                            </Col>
                            <Col xs={5}><Form.Control type={"text"} size={"sm"} className={"grpCdNm"} defaultValue={item.grpCdNm}/></Col>
                            <Col xs={2}><Button variant={"danger"} size={"sm"} onClick={(e)=>{modifyCodeGrp(e, "remove")}}>삭제</Button></Col>
                            <Col xs={2}><Button variant={"primary"} size={"sm"} onClick={(e)=>{modifyCodeGrp(e, "modify")}}>수정</Button></Col>
                        </Row>
                    )
                })
                setCodeGrpRow(grpTag);
            },
            function (resp) {
                console.log("err response : ", resp);
            }
        );
    });

    useEffect(() => {
        getCodeGrp();
    }, []);

    function codeGrpChoose(e, grpCd){
        document.querySelectorAll(".selectIcon").forEach(function (item){
            item.classList.value = 'selectIcon d-none'
        })
        e.target.parentElement.querySelector(".selectIcon").classList.value = "selectIcon"
        getCodeItem(grpCd)
    }

    function addCodeGrp(){
        const grpCd =  document.querySelector("#grpCd");
        const grpCdNm =  document.querySelector("#grpCdNm");
        if(!grpCd.value){
            alert("코드 그룹을 입력해주세요.")
        }else{
            EgovNet.requestFetch(
                '/admin/config/code-grp',
                {
                    method: "POST",
                    headers: {
                        'Content-type': 'application/json'
                    },
                    body: JSON.stringify({
                        grpCd: grpCd.value,
                        grpCdNm: grpCdNm.value
                    })
                },
                (resp) => {
                    switch (resp.resultCode) {
                        case Number(CODE.RCV_SUCCESS):
                            grpCd.value = "";
                            grpCdNm.value = "";
                            getCodeGrp();
                            getCodeItem();
                            break;
                        case Number(CODE.RCV_ERROR_SAVE)||Number(CODE.RCV_ERROR_AUTH):
                            alert(resp.resultMessage);
                            break;
                    }
                },
                function (resp) {
                    console.log("err response : ", resp);
                }
            );
        }

    }

    function modifyCodeGrp(e, action){
        const row = e.target.parentElement.parentElement;
        const codeGrp = {
            grpCd: row.querySelector(".grpCd").value,
            grpCdNm: row.querySelector(".grpCdNm").value,
            useYn: action==="modify"?'Y':'N'
        }
        EgovNet.requestFetch(
            '/admin/config/code-grp',
            {
                method: "PUT",
                headers: {
                    'Content-type': 'application/json'
                },
                body: JSON.stringify(codeGrp)
            },
            (resp) => {
                switch (resp.resultCode) {
                    case Number(CODE.RCV_SUCCESS):
                        getCodeGrp();
                        getCodeItem();
                        break;
                    case Number(CODE.RCV_ERROR_SAVE)||Number(CODE.RCV_ERROR_AUTH):
                        alert(resp.resultMessage);
                        break;
                }
            },
            function (resp) {
                console.log("err response : ", resp);
            }
        );

    }

    return (
        <Container className={"pt-3"} >
            <Row className={"py-2 bg-light border-bottom"}>
                <Col xs={3}>코드그룹</Col>
                <Col xs={5}>코드그룹명</Col>
                <Col xs={2}>삭제</Col>
                <Col xs={2}>수정</Col>
            </Row>
            {codeGrpRow}
            <Row className={"py-1"}>
                <Col xs={3}>
                    <Form.Control type={"text"} id={"grpCd"} placeholder={"코드그룹"} size={"sm"}/>
                </Col>
                <Col xs={5}>
                    <Form.Control type={"text"} id={"grpCdNm"} placeholder={"코드그룹명"} size={"sm"}/>
                </Col>
                <Col xs={{span:2, offset:2}}><Button type={"button"} variant={"primary"} size={"sm"} onClick={addCodeGrp}>등록</Button></Col>
            </Row>
        </Container>
    );
}

export default ParentCodeDiv;