diff --git a/egovframe-template-simple-react-contribution/src/components/alert/FormDialog.jsx b/egovframe-template-simple-react-contribution/src/components/alert/FormDialog.jsx new file mode 100644 index 0000000..30b570a --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/components/alert/FormDialog.jsx @@ -0,0 +1,51 @@ +import * as React from 'react'; +import Button from '@mui/material/Button'; + +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import DialogTitle from '@mui/material/DialogTitle'; + +export default function FormDialog( {open, setOpen, title, contentText, children} ) { + + const handleClickOpen = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + + return ( + + { + event.preventDefault(); + const formData = new FormData(event.currentTarget); + const formJson = Object.fromEntries(formData.entries()); + const email = formJson.email; + console.log(email); + handleClose(); + }, + }} + > + {title} + + + {contentText} + + {children} + + + + + + + + ); +} \ No newline at end of file diff --git a/egovframe-template-simple-react-contribution/src/components/list/ListCreateUpdateDelete.jsx b/egovframe-template-simple-react-contribution/src/components/list/ListCreateUpdateDelete.jsx index f32dfd5..f98ba48 100644 --- a/egovframe-template-simple-react-contribution/src/components/list/ListCreateUpdateDelete.jsx +++ b/egovframe-template-simple-react-contribution/src/components/list/ListCreateUpdateDelete.jsx @@ -1,6 +1,7 @@ import React from 'react'; import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; +import Card from '@mui/material/Card'; +import { CardActionArea } from '@mui/material'; import Paper from '@mui/material/Paper'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; @@ -11,15 +12,28 @@ import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import DeleteIcon from '@mui/icons-material/Delete'; import AddIcon from '@mui/icons-material/Add'; +import TextField from '@mui/material/TextField'; + +import FormDialog from '../../components/alert/FormDialog'; -function generate(items, element) { - return items.map((value) => + +function generate(items, element, onClickListner) { + return items.map((value, index) => React.cloneElement(element, { key: value, - }, ), + }, + + + {onClickListner(e, index);}} + paragraph + /> + + ), ); } @@ -39,6 +53,19 @@ function ListCreateUpdateDelete(props) { const [dense, setDense] = React.useState(false); + const [open, setOpen] = React.useState(false); + + const handleClickOpen = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + + const onClickItem = (e, index) => { + props.setItemIndex(index); + }; return ( @@ -48,7 +75,7 @@ function ListCreateUpdateDelete(props) { - + @@ -69,12 +96,36 @@ function ListCreateUpdateDelete(props) { - } + } > , + onClickItem )} + + + + ); } diff --git a/egovframe-template-simple-react-contribution/src/components/list/ListLabelInputs.jsx b/egovframe-template-simple-react-contribution/src/components/list/ListLabelInputs.jsx new file mode 100644 index 0000000..44e06c6 --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/components/list/ListLabelInputs.jsx @@ -0,0 +1,66 @@ +import React, { useState, useEffect } from 'react'; +import { styled } from '@mui/material/styles'; +import Paper from '@mui/material/Paper'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import Grid from '@mui/material/Grid'; +import Typography from '@mui/material/Typography'; +import TextField from '@mui/material/TextField'; + + +const Demo = styled('div')(({ theme }) => ({ + backgroundColor: theme.palette.background.paper, +})); + +const Item = styled(Paper)(({ theme }) => ({ + backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + ...theme.typography.body2, + padding: theme.spacing(1), + textAlign: 'center', + color: theme.palette.text.secondary, +})); + +function ListLabelInputs(props) { + + const [dense, setDense] = useState(false); + + const [items, setItems] = useState(false); + + useEffect(function () { + setItems(props.items); + console.log( props.items ); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [props]); + + useEffect(function () { + console.log( items ); + // eslint-disable-next-line react-hooks/exhaustive-deps + + }, [items]); + + return ( + + + + + {props.title} + + + + + + { + items && + Object.entries(items).map(([key, value], index) => ( + + + + )) + } + + + + ); +} + +export default ListLabelInputs; \ No newline at end of file diff --git a/egovframe-template-simple-react-contribution/src/pages/admin/config/CommitteeCodeMgt.jsx b/egovframe-template-simple-react-contribution/src/pages/admin/config/CommitteeCodeMgt.jsx index 2c19b68..1c1656b 100644 --- a/egovframe-template-simple-react-contribution/src/pages/admin/config/CommitteeCodeMgt.jsx +++ b/egovframe-template-simple-react-contribution/src/pages/admin/config/CommitteeCodeMgt.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import { Link } from 'react-router-dom'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; @@ -21,37 +21,61 @@ import DeleteIcon from '@mui/icons-material/Delete'; import AddIcon from '@mui/icons-material/Add'; import AddBoxOutlinedIcon from '@mui/icons-material/AddBoxOutlined'; + + + import ListCreateUpdateDelete from '../../../components/list/ListCreateUpdateDelete' +import ListLabelInputs from '../../../components/list/ListLabelInputs' + import URL from 'constants/url'; import { default as EgovLeftNav } from 'components/leftmenu/EgovLeftNavAdmin'; -function generate(element) { - return [0, 1, 2].map((value) => - React.cloneElement(element, { - key: value, - }), - ); -} - -const Demo = styled('div')(({ theme }) => ({ - backgroundColor: theme.palette.background.paper, - })); - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: theme.palette.text.secondary, -})); - function CommitteeCodeMgt(props) { - const [dense, setDense] = React.useState(false); - const [secondary, setSecondary] = React.useState(false); + const [dense, setDense] = useState(false); + const [secondary, setSecondary] = useState(false); + + const [depth01List, setDepth01List] = useState(["중앙건설기술심의", "테스트2"]); + const [depth02List, setDepth02List] = useState(["123", "테스트2"]); + const [depth03List, setDepth03List] = useState(["다람쥐", "쳇바퀴"]); + const [depth04List, setDepth04List] = useState(["임시 텍스트", "text"]); + const [summaryArray, setSummaryArray] = useState({}); + + const [depth01SelectedIndex, setDepth01SelectedIndex] = React.useState(); + const [depth02SelectedIndex, setDepth02SelectedIndex] = React.useState(); + const [depth03SelectedIndex, setDepth03SelectedIndex] = React.useState(); + const [depth04SelectedIndex, setDepth04SelectedIndex] = React.useState(); + + useEffect(function () { + setSummaryArray( + { + "중앙건설기술심의" : depth01List[depth01SelectedIndex], + "총괄위원회" : depth02List[depth02SelectedIndex], + "건설기준위원회" : depth03List[depth03SelectedIndex], + "실무위원회" : depth04List[depth04SelectedIndex], + } + ); + console.log(`${depth01List[depth01SelectedIndex]}[${depth01SelectedIndex}]`); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ + depth01List, + depth02List, + depth03List, + depth04List, + depth01SelectedIndex, + depth02SelectedIndex, + depth03SelectedIndex, + depth04SelectedIndex]); + + useEffect(function () { + console.log( summaryArray ); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [summaryArray]); + + const Location = React.memo(function Location() { return ( @@ -88,17 +112,31 @@ function CommitteeCodeMgt(props) { sx={{ display: 'flex', flexWrap: 'wrap', + justifyContent: 'space-between', '& > :not(style)': { - m: 1, + mt: 4, width: 245, }, }} > - - - - + + + + + :not(style)': { + mt: 4, + width: 245, + }, + }} + > + + + {/* */}