2021-12-18 16:05:52 +09:00
|
|
|
|
import React, { useRef, useEffect, useState } from 'react';
|
2021-11-16 10:29:32 +09:00
|
|
|
|
import { useHistory, Link } from 'react-router-dom';
|
2021-10-10 23:08:06 +09:00
|
|
|
|
import axios from 'axios';
|
2021-11-16 02:31:44 +09:00
|
|
|
|
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';
|
|
|
|
|
import Slide from '@mui/material/Slide';
|
2021-11-16 14:36:47 +09:00
|
|
|
|
import { CircularProgress } from '@material-ui/core';
|
2021-11-16 10:29:32 +09:00
|
|
|
|
|
|
|
|
|
import Alert from '../component/alert';
|
2021-11-16 02:36:35 +09:00
|
|
|
|
|
2021-10-10 23:08:06 +09:00
|
|
|
|
|
2021-11-16 02:31:44 +09:00
|
|
|
|
const Transition = React.forwardRef(function Transition(props, ref) {
|
|
|
|
|
return <Slide direction="up" ref={ref} {...props} />;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default function ModalSettingNotify({show, handleClose, meetingId}){
|
|
|
|
|
|
|
|
|
|
const [unapproval, setUnapproval ] = useState([]);
|
|
|
|
|
const [approval, setApproval ] = useState([]);
|
|
|
|
|
const [isApproval, setIsApproval ] = useState(false);
|
2021-11-16 10:29:32 +09:00
|
|
|
|
const [_success, setSuccess] = useState('');
|
2021-11-16 11:59:25 +09:00
|
|
|
|
const [_400error, set400Error] = useState('');
|
2021-11-16 14:36:47 +09:00
|
|
|
|
const [loaded1, setLoaded1] = useState(false);
|
|
|
|
|
const [loaded2, setLoaded2] = useState(false);
|
|
|
|
|
const [loaded, setLoaded] = useState(false);
|
2021-10-10 23:08:06 +09:00
|
|
|
|
|
2021-12-18 16:05:52 +09:00
|
|
|
|
const isMountedRef = useRef(true);
|
|
|
|
|
|
2021-10-10 23:08:06 +09:00
|
|
|
|
useEffect(() => {
|
2021-12-18 16:05:52 +09:00
|
|
|
|
isMountedRef.current = false;
|
2021-11-16 14:36:47 +09:00
|
|
|
|
setLoaded1(false);
|
2021-11-16 02:31:44 +09:00
|
|
|
|
axios.get('/api/fathers/meeting/approvals/listChildrenOfApprovel', {params: { meeting_id: meetingId }})
|
|
|
|
|
.then((response) => {
|
2021-11-16 14:36:47 +09:00
|
|
|
|
setLoaded1(true);
|
2021-10-10 23:08:06 +09:00
|
|
|
|
if(response.data.status_code==200){
|
2021-11-16 02:31:44 +09:00
|
|
|
|
setApproval(response.data.params);
|
|
|
|
|
}
|
2021-10-10 23:08:06 +09:00
|
|
|
|
});
|
2021-11-16 14:36:47 +09:00
|
|
|
|
setLoaded2(false);
|
2021-11-16 02:31:44 +09:00
|
|
|
|
axios.get('/api/fathers/meeting/approvals/listChildrenOfUnapprovel', {params: { meeting_id: meetingId }})
|
|
|
|
|
.then((response) => {
|
2021-11-16 14:36:47 +09:00
|
|
|
|
setLoaded2(true);
|
2021-10-10 23:08:06 +09:00
|
|
|
|
if(response.data.status_code==200){
|
2021-11-16 02:31:44 +09:00
|
|
|
|
setUnapproval(response.data.params);
|
2021-10-10 23:08:06 +09:00
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}, []);
|
2021-11-16 11:59:25 +09:00
|
|
|
|
|
2021-12-18 16:05:52 +09:00
|
|
|
|
|
2021-11-16 14:36:47 +09:00
|
|
|
|
useEffect(()=>{
|
|
|
|
|
setLoaded(loaded1 && loaded2);
|
|
|
|
|
},[loaded1, loaded2]);
|
|
|
|
|
|
2021-12-18 16:05:52 +09:00
|
|
|
|
|
2021-12-16 09:40:24 +09:00
|
|
|
|
const settingNotify = (email) => {
|
2021-11-16 11:59:25 +09:00
|
|
|
|
const formdata = new FormData();
|
2021-12-16 09:40:24 +09:00
|
|
|
|
formdata.append('email', JSON.stringify(new Array(email)));
|
2021-11-16 11:59:25 +09:00
|
|
|
|
formdata.append('meeting_id', meetingId);
|
2021-12-16 08:19:54 +09:00
|
|
|
|
axios.post('/api/fathers/meetingNotification ', formdata)
|
2021-11-16 11:59:25 +09:00
|
|
|
|
.then(response=>{
|
|
|
|
|
switch(response.data.status_code){
|
2021-12-16 09:40:24 +09:00
|
|
|
|
case 200: setSuccess('通知に成功しました!'); break;
|
|
|
|
|
case 400: set400Error('通知に失敗しました。'); break;
|
2021-11-16 11:59:25 +09:00
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
2021-10-10 23:08:06 +09:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
2021-11-16 02:31:44 +09:00
|
|
|
|
<Dialog
|
|
|
|
|
open={show}
|
|
|
|
|
TransitionComponent={Transition}
|
|
|
|
|
keepMounted
|
|
|
|
|
aria-describedby="alert-dialog-slide-description"
|
|
|
|
|
onClose={handleClose}
|
|
|
|
|
id="SettingNotifyModal"
|
|
|
|
|
>
|
|
|
|
|
<DialogTitle className="px-0 pt-3">
|
|
|
|
|
<div className="modal-tab-area ft-16">
|
|
|
|
|
<div onClick={e => {setIsApproval(false); }} className={`modal-tab-label ${isApproval ? "" : "is-active"}`}><span>未承知</span></div>
|
|
|
|
|
<div onClick={e => {setIsApproval(true); }} className={`modal-tab-label ${!isApproval ? "" : "is-active"}`}><span>承知済み</span></div>
|
|
|
|
|
</div>
|
|
|
|
|
</DialogTitle>
|
2021-11-16 14:36:47 +09:00
|
|
|
|
<DialogContent className="position-relative">
|
|
|
|
|
{
|
2021-11-30 10:19:13 +09:00
|
|
|
|
!loaded && <CircularProgress className="modal-css-loader"/>
|
2021-11-16 14:36:47 +09:00
|
|
|
|
}
|
|
|
|
|
{
|
|
|
|
|
loaded &&
|
|
|
|
|
<>
|
|
|
|
|
<div className={ `modal-content border-0 ${!isApproval ? "is-active" : ""}` } id="item01">
|
|
|
|
|
{
|
|
|
|
|
unapproval.length > 0 ?
|
|
|
|
|
unapproval.map((item, ki) =>
|
|
|
|
|
<div className="modal-content-item" key={ki}>
|
|
|
|
|
<div className="user-wrap">
|
|
|
|
|
<Link to={`/p-account/child/detail/${item.child.id}`} >
|
|
|
|
|
<div className="user-avatar">
|
|
|
|
|
<img alt="name" className="avatar-img" src={item.child.image} />
|
|
|
|
|
</div>
|
2021-11-30 08:06:29 +09:00
|
|
|
|
<p className="user-name">{item.child.last_name} {item.child.first_name}</p>
|
2021-11-16 14:36:47 +09:00
|
|
|
|
</Link>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="p-notification-btn">
|
2021-12-16 09:40:24 +09:00
|
|
|
|
<a onClick={e => settingNotify(item.child.email)} className="btn-default btn-yellow btn-notification btn-r3 btn-h30 btn-w100p btn-fz14">
|
2021-11-16 14:36:47 +09:00
|
|
|
|
<span>通知</span>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
2021-10-10 23:08:06 +09:00
|
|
|
|
</div>
|
2021-11-16 14:36:47 +09:00
|
|
|
|
)
|
|
|
|
|
: <p className="text-center py-2 ft-xs-15">データはありません。</p>
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|
<div className={ `modal-content border-0 ${isApproval ? "is-active" : ""}` } id="item02">
|
|
|
|
|
{
|
|
|
|
|
approval.length > 0 ?
|
|
|
|
|
approval?.map((item, kj) =>
|
|
|
|
|
<div className="modal-content-item" key={kj}>
|
|
|
|
|
<div className="user-wrap">
|
|
|
|
|
<Link to={`/p-account/child/detail/${item.child.id}`} >
|
|
|
|
|
<div className="user-avatar">
|
|
|
|
|
<img alt="name" className="avatar-img" src={item.child.image} />
|
|
|
|
|
</div>
|
|
|
|
|
<p className="user-name">{item.child.first_name} {item.child.last_name}</p>
|
|
|
|
|
</Link>
|
|
|
|
|
</div>
|
2021-10-10 23:08:06 +09:00
|
|
|
|
</div>
|
2021-11-16 14:36:47 +09:00
|
|
|
|
)
|
|
|
|
|
: <p className="text-center py-2 ft-xs-15">データはありません。</p>
|
|
|
|
|
}
|
|
|
|
|
</div>
|
2021-11-16 20:08:46 +09:00
|
|
|
|
{ _400error && <Alert type="fail" hide={()=>set400Error('')}>{_400error}</Alert> }
|
|
|
|
|
{ _success && <Alert type="success" hide={()=>setSuccess('')}>{_success}</Alert>}
|
2021-11-16 14:36:47 +09:00
|
|
|
|
</>
|
|
|
|
|
}
|
2021-11-16 02:31:44 +09:00
|
|
|
|
</DialogContent>
|
|
|
|
|
</Dialog>
|
2021-10-10 23:08:06 +09:00
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|