kcscDev/egovframe-template-simple-react-contribution/src/components/list/ListCreateUpdateDelete.jsx

import React from 'react';
import { styled } from '@mui/material/styles';
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';
import EditIcon from '@mui/icons-material/Edit';
import ListItemText from '@mui/material/ListItemText';
import IconButton from '@mui/material/IconButton';
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, onClickListner) {
    return items.map((value, index) => 
        React.cloneElement(element, {
            key: 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>),
    );
}

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 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">
            <Grid container spacing={0} columns={10} sx={{ '&': { backgroundColor: '#333333', height: '56px'}}}>
                <Grid item xs={6} md={8} >
                    <Item sx={{ px: 0, '&': { boxShadow: 'none', color: '#ffffff', fontWeight: '600', fontSize: '18px', backgroundColor: 'transparent', lineHeight: '40px' }}}>{props.title}</Item>
                </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'}} onClick={handleClickOpen}>                               
                            <AddIcon sx={{ px: 0, '&': {color: '#ffffff', width: '30px', height: '30px' }}} />
                        </IconButton>
                    </Item>
                </Grid>                                    
            </Grid>
            </Typography>
            <Demo>
                <List dense={dense}>
                {generate(
                    props.items,                    
                    <ListItem
                    secondaryAction={
                        <div>                                                
                            <IconButton sx={{ mx: 0 }} edge="start" aria-label="edit">                                                
                                <EditIcon />
                            </IconButton>
                            <IconButton edge="end" aria-label="delete">                                                
                                <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>
    );
}

export default ListCreateUpdateDelete;