DBNT
/
kcscDev
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of http://118.219.150.34:50501/DBNT/kcscDev

thkim
강석 최 2024-01-30 13:10:03 +09:00
parent 47e4fda988 98d2da2e21
commit 3657c16a15
4 changed files with 242 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
egovframe-template-simple-react-contribution/src/components/alert/FormDialog.jsx Normal file
View File

@ -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 (
<React.Fragment>
<Dialog
open={open}
onClose={handleClose}
PaperProps={{
component: 'form',
onSubmit: (event) => {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const formJson = Object.fromEntries(formData.entries());
const email = formJson.email;
console.log(email);
handleClose();
},
}}
>
<DialogTitle>{title}</DialogTitle>
<DialogContent>
<DialogContentText>
{contentText}
</DialogContentText>
{children}
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>취소</Button>
<Button type="submit">저장</Button>
</DialogActions>
</Dialog>
</React.Fragment>
);
}

63
egovframe-template-simple-react-contribution/src/components/list/ListCreateUpdateDelete.jsx
View File

@ -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,
}, <ListItemText
},
<Card fullWidth sx={{ '&': { boxShadow: 'none' } }}>
<CardActionArea fullWidth sx={{ px: 1 }}>
<ListItemText
primary={value}
/>),
key={index}
data-index={index}
onClick={(e) => {onClickListner(e, index);}}
paragraph
/>
</CardActionArea>
</Card>),
);
}
@ -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 (
<Paper>
<Typography sx={{ p: 0 }} variant="h6" component="div">
@ -48,7 +75,7 @@ function ListCreateUpdateDelete(props) {
</Grid>
<Grid item xs={0} md={2} sx={{ pl: 0, '&': {backgroundColor: 'transparent' }}}>
<Item sx={{ p: 0, '&': { boxShadow: 'none', backgroundColor: '#169bd5', borderRadius: '0px'} }}>
<IconButton aria-label="add" sx={{ px: 0, borderRadius: '0px', width: '100%', height: '56px'}}>
<IconButton aria-label="add" sx={{ px: 0, borderRadius: '0px', width: '100%', height: '56px'}} onClick={handleClickOpen}>
<AddIcon sx={{ px: 0, '&': {color: '#ffffff', width: '30px', height: '30px' }}} />
</IconButton>
</Item>
@ -72,9 +99,33 @@ function ListCreateUpdateDelete(props) {
}
>
</ListItem>,
onClickItem
)}
</List>
</Demo>
<FormDialog open={open} setOpen={setOpen} title="위원회 코드 등록" contentText="위원회 코드 항목을 입력해주세요." >
<TextField
autoFocus
required
margin="dense"
id="insert-org-nm"
name="insert-org-nm"
label="명칭"
type="text"
fullWidth
variant="standard"
/>
<TextField
required
margin="dense"
id="insert-org-desc"
name="insert-org-desc"
label="위원회 설명"
type="text"
fullWidth
variant="standard"
/>
</FormDialog>
</Paper>
);
}

66
egovframe-template-simple-react-contribution/src/components/list/ListLabelInputs.jsx Normal file
View File

@ -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 (
<Paper>
<Typography sx={{ p: 0 }} variant="h6" component="div">
<Grid container spacing={0} columns={10} sx={{ '&': { backgroundColor: '#333333', height: '56px'}}}>
<Grid item xs={6} md={10} >
<Item sx={{ px: 0, '&': { boxShadow: 'none', color: '#ffffff', fontWeight: '600', fontSize: '18px', backgroundColor: 'transparent', lineHeight: '40px' }}}>{props.title}</Item>
</Grid>
</Grid>
</Typography>
<Demo>
<List dense={dense}>
{
items &&
Object.entries(items).map(([key, value], index) => (
<ListItem key={index}>
<TextField id="standard-basic" label={key} variant="standard" value={value ? value : ""} inputProps={{ readOnly: true, }} />
</ListItem>
))
}
</List>
</Demo>
</Paper>
);
}
export default ListLabelInputs;

94
egovframe-template-simple-react-contribution/src/pages/admin/config/CommitteeCodeMgt.jsx
View File

@ -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,
},
}}
>
<ListCreateUpdateDelete title="중앙건설기술심의" items={["중앙건설기술심의", "테스트2"]}/>
<ListCreateUpdateDelete title="총괄위원회" items={[]}/>
<ListCreateUpdateDelete title="건설기준위원회" items={[]}/>
<ListCreateUpdateDelete title="실무위원회" items={[]}/>
<ListCreateUpdateDelete title="중앙건설기술심의" items={depth01List} setItemIndex={setDepth01SelectedIndex}/>
<ListCreateUpdateDelete title="총괄위원회" items={depth02List} setItemIndex={setDepth02SelectedIndex}/>
<ListCreateUpdateDelete title="건설기준위원회" items={depth03List} setItemIndex={setDepth03SelectedIndex}/>
<ListCreateUpdateDelete title="실무위원회" items={depth04List} setItemIndex={setDepth04SelectedIndex}/>
</Box>
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
'& > :not(style)': {
mt: 4,
width: 245,
},
}}
>
<ListLabelInputs title="위원회 코드정보" items={summaryArray} />
</Box>
{/* <!--// 본문 --> */}
</div>
</div>