111 行
3.7 KiB
React
111 行
3.7 KiB
React
![]() |
import React, { useEffect, useState } from 'react';
|
||
|
import {
|
||
|
Box,
|
||
|
Dialog,
|
||
|
DialogActions,
|
||
|
DialogContent,
|
||
|
DialogContentText,
|
||
|
DialogTitle,
|
||
|
Slide,
|
||
|
Button,
|
||
|
IconButton,
|
||
|
Divider,
|
||
|
Stack,
|
||
|
Typography
|
||
|
} from '@mui/material';
|
||
|
import { LoadingButton } from '@material-ui/lab';
|
||
|
import axios from 'axios';
|
||
|
|
||
|
|
||
|
const Transition = React.forwardRef(function Transition(props, ref) {
|
||
|
return <Slide direction="up" ref={ref} {...props} />;
|
||
|
});
|
||
|
|
||
|
|
||
|
export default function ModalEditMemo({ show, content, handleClose, handleUpdateMemo, meetingId}){
|
||
|
|
||
|
|
||
|
const [edit_flag, setEditFlag] = useState(false);
|
||
|
const [memo, setMemo] = useState('');
|
||
|
const [submit, setSubmit] = useState(false);
|
||
|
const [_422errors, set422Errors] = useState({memo:''})
|
||
|
|
||
|
|
||
|
const handleEdit = () => {
|
||
|
setEditFlag(!edit_flag);
|
||
|
setMemo(content ? content : '');
|
||
|
}
|
||
|
|
||
|
const handleSubmit = () => {
|
||
|
setSubmit(true);
|
||
|
set422Errors({memo:''});
|
||
|
const post = { memo: memo, meeting_id: meetingId};
|
||
|
axios.put('/api/fathers/meetings/updateMemo', post)
|
||
|
.then(res=>{
|
||
|
setSubmit(false);
|
||
|
if(res.data.status_code == 422){
|
||
|
set422Errors(res.data.error_messages);
|
||
|
}
|
||
|
else{
|
||
|
setEditFlag(false);
|
||
|
handleUpdateMemo(res, memo);
|
||
|
}
|
||
|
})
|
||
|
}
|
||
|
|
||
|
const handleMClose = () => {
|
||
|
setEditFlag(false);
|
||
|
set422Errors({memo:''});
|
||
|
handleClose();
|
||
|
}
|
||
|
|
||
|
return (
|
||
|
<Dialog
|
||
|
open={show}
|
||
|
TransitionComponent={Transition}
|
||
|
keepMounted
|
||
|
aria-describedby="alert-dialog-slide-description"
|
||
|
onClose={handleMClose}
|
||
|
>
|
||
|
<DialogTitle sx={{padding:'20px 10px',textAlign:'center', borderBottom:'1px solid rgb(239 236 236)'}}>
|
||
|
<span className="ft-18 text-center font-weight-bold">メモ</span>
|
||
|
</DialogTitle>
|
||
|
<Box sx={{ p:'15px', pb:'15px'}}>
|
||
|
<Box id="alert-dialog-slide-description">
|
||
|
{
|
||
|
edit_flag &&
|
||
|
<textarea value={ memo } onChange={e=>setMemo(e.target.value)} style={{ height: '175px', borderRadius:5 }} className={`${ _422errors.memo && 'is-invalid c-input__target'} `} />
|
||
|
}
|
||
|
{
|
||
|
(edit_flag && _422errors.memo) &&
|
||
|
<span className="l-alert__text--error ft-16 ft-md-14">
|
||
|
{_422errors.memo}
|
||
|
</span>
|
||
|
}
|
||
|
{
|
||
|
!edit_flag &&
|
||
|
<Typography component='p' sx={{ minHeight:'175px', whiteSpace:'pre-wrap', bgcolor:'#F0F0F0', p:'15px' }} className="ft-16 text-black">
|
||
|
{content ? content : '未入力'}
|
||
|
</Typography>
|
||
|
}
|
||
|
</Box>
|
||
|
</Box>
|
||
|
<DialogActions style={{justifyContent:'space-evenly', padding:'18px 10px', borderTop:'1px solid rgb(239 236 236)'}}>
|
||
|
<Button onClick={handleEdit} size="small">
|
||
|
<span className="ft-16 font-weight-bold text-black">
|
||
|
{ !edit_flag ? '編集' : '削除'}
|
||
|
</span>
|
||
|
</Button>
|
||
|
<LoadingButton variant="text"
|
||
|
onClick={handleSubmit}
|
||
|
loading={submit}
|
||
|
disabled={!edit_flag}
|
||
|
size="small">
|
||
|
<span className={`ft-16 font-weight-bold ${!submit && edit_flag ? 'text-black' : 'text-gray'}`}>更新</span>
|
||
|
</LoadingButton>
|
||
|
</DialogActions>
|
||
|
</Dialog>
|
||
|
)
|
||
|
}
|
||
|
|