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

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 (
+    <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>
+  );
+}

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,
-        }, <ListItemText
+        },
-        primary={value}
+        <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>
@@ -69,12 +96,36 @@ function ListCreateUpdateDelete(props) {
                                 <DeleteIcon />   
                             </IconButton>
                         </div>
-                    }
+                    }               
                     >                    
                     </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>
     );
 }

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 (
+        <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;

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 [dense, setDense] = useState(false);
-    const [secondary, setSecondary] = React.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={depth01List} setItemIndex={setDepth01SelectedIndex}/>
-                            <ListCreateUpdateDelete title="총괄위원회" items={[]}/>
+                            <ListCreateUpdateDelete title="총괄위원회" items={depth02List} setItemIndex={setDepth02SelectedIndex}/>
-                            <ListCreateUpdateDelete title="건설기준위원회" items={[]}/>
+                            <ListCreateUpdateDelete title="건설기준위원회" items={depth03List} setItemIndex={setDepth03SelectedIndex}/>
-                            <ListCreateUpdateDelete title="실무위원회" items={[]}/>
+                            <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>