152 行
6.4 KiB
React
152 行
6.4 KiB
React
|
import React, { useEffect, useState } from 'react';
|
|||
|
import axios from 'axios';
|
|||
|
import { makeStyles } from '@material-ui/styles';
|
|||
|
import { ToastContainer, toast } from 'react-toastify';
|
|||
|
import 'react-toastify/dist/ReactToastify.css';
|
|||
|
const useStyles = makeStyles(theme => ({
|
|||
|
show: {
|
|||
|
display: 'block',
|
|||
|
},
|
|||
|
hide: {
|
|||
|
display: 'none',
|
|||
|
},
|
|||
|
}));
|
|||
|
|
|||
|
export default function ModalSettingNotify({show, meetingId}){
|
|||
|
const classes = useStyles();
|
|||
|
const [unapprovel, setUnapprovel ] = useState(null);
|
|||
|
const [approvel, setApprovel ] = useState(null);
|
|||
|
const [isApprovel, setIsApprovel ] = useState(false);
|
|||
|
|
|||
|
useEffect(() => {
|
|||
|
axios.get(`/api/children/listOfMeetingNotifyApprovel/${meetingId}`, {params: { meeting_id: meetingId }}).then((response) => {
|
|||
|
if(response.data.status_code==200){
|
|||
|
console.log(response.data.params);
|
|||
|
setApprovel(response.data.params);
|
|||
|
} else if(response.data.status_code==400){
|
|||
|
//TODO
|
|||
|
}
|
|||
|
});
|
|||
|
}, []);
|
|||
|
|
|||
|
useEffect(() => {
|
|||
|
axios.get(`/api/children/listOfMeetingNotifyUnapprovel/${meetingId}`, {params: { meeting_id: meetingId }}).then((response) => {
|
|||
|
if(response.data.status_code==200){
|
|||
|
console.log(response.data.params);
|
|||
|
setUnapprovel(response.data.params);
|
|||
|
} else if(response.data.status_code==400){
|
|||
|
//TODO
|
|||
|
}
|
|||
|
});
|
|||
|
}, []);
|
|||
|
|
|||
|
async function settingNotify(meetingId) {
|
|||
|
// const formdata = new FormData();
|
|||
|
// formdata.append('meeting_id', meetingId);
|
|||
|
// axios.post('/api/meetings/registerFavorite', formdata).then((response) => {})
|
|||
|
console.log(meetingId);
|
|||
|
toast.success("SMSの送信に成功しました!", {
|
|||
|
position: "top-center",
|
|||
|
autoClose: 5000,
|
|||
|
className:"bg-success",
|
|||
|
hideProgressBar: true,
|
|||
|
closeOnClick: true,
|
|||
|
pauseOnHover: true,
|
|||
|
draggable: false,
|
|||
|
progress: undefined,
|
|||
|
style:{ color: '#ffffff', opacity: 0.95}
|
|||
|
});
|
|||
|
};
|
|||
|
|
|||
|
return (
|
|||
|
<div className={`modal-area modal-up65 ${show ? classes.show : classes.hide}`} >
|
|||
|
<div className="modal-bg"></div>
|
|||
|
<div className="modal-box">
|
|||
|
<ToastContainer />
|
|||
|
<div className="modal-wrap">
|
|||
|
<div className="modal-tab-area">
|
|||
|
<div onClick={e => {setIsApprovel(false); }} className={`modal-tab-label ${isApprovel ? "" : "is-active"}`}><span>未承知</span></div>
|
|||
|
<div onClick={e => {setIsApprovel(true); }} className={`modal-tab-label ${!isApprovel ? "" : "is-active"}`}><span>承知済み</span></div>
|
|||
|
</div>
|
|||
|
|
|||
|
<div className="modal-content-area">
|
|||
|
<div className={ `modal-content ${!isApprovel ? "is-active" : ""}` } style={{border:"none"}} id="item01">
|
|||
|
{ unapprovel?.map((item, index) => {
|
|||
|
return (
|
|||
|
<div className="modal-content-item">
|
|||
|
<div className="user-wrap">
|
|||
|
<a href={`/c-account/profile/detail/${item.id}`} >
|
|||
|
<div className="user-avatar">
|
|||
|
<img alt="name" className="avatar-img" src={item.image} />
|
|||
|
</div>
|
|||
|
<p className="user-name">{item.last_name} {item.first_name}</p>
|
|||
|
</a>
|
|||
|
</div>
|
|||
|
<div className="p-notification-btn">
|
|||
|
<a onClick={e => settingNotify(item.id)} className="btn-default btn-yellow btn-notification btn-r3 btn-h30 btn-w100p btn-fz14">
|
|||
|
<span>通知</span>
|
|||
|
</a>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
)
|
|||
|
})}
|
|||
|
<div className="modal-content-item">
|
|||
|
<div className="user-wrap">
|
|||
|
<a href={`/c-account/profile/detail/1`} >
|
|||
|
<div className="user-avatar">
|
|||
|
<img alt="name" className="avatar-img" src="../../../assets/img/avatar/avatar-sample03@2x.png" />
|
|||
|
</div>
|
|||
|
<p className="user-name">Data test 1</p>
|
|||
|
</a>
|
|||
|
</div>
|
|||
|
<div className="p-notification-btn">
|
|||
|
<a onClick={e => settingNotify(1)} className="btn-default btn-yellow btn-notification btn-r3 btn-h30 btn-w100p btn-fz14">
|
|||
|
<span>通知</span>
|
|||
|
</a>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
<div className={ `modal-content ${isApprovel ? "is-active" : ""}` } style={{border:"none"}} id="item02">
|
|||
|
{ approvel?.map((item, index) => {
|
|||
|
return (
|
|||
|
<div className="modal-content-item">
|
|||
|
<div className="user-wrap">
|
|||
|
<a href={`/c-account/profile/detail/${item.id}`} >
|
|||
|
<div className="user-avatar">
|
|||
|
<img alt="name" className="avatar-img" src={item.image} />
|
|||
|
</div>
|
|||
|
<p className="user-name">{item.last_name} {item.first_name}</p>
|
|||
|
</a>
|
|||
|
</div>
|
|||
|
<div className="p-notification-btn">
|
|||
|
<a onClick={e => settingNotify(item.id)} className="btn-default btn-yellow btn-notification btn-r3 btn-h30 btn-w100p btn-fz14">
|
|||
|
<span>通知</span>
|
|||
|
</a>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
)
|
|||
|
})}
|
|||
|
<div className="modal-content-item">
|
|||
|
<div className="user-wrap">
|
|||
|
<a href={`/c-account/profile/detail/2`} >
|
|||
|
<div className="user-avatar">
|
|||
|
<img alt="name" className="avatar-img" src="../../../assets/img/avatar/avatar-sample03@2x.png" />
|
|||
|
</div>
|
|||
|
<p className="user-name">Data test 2</p>
|
|||
|
</a>
|
|||
|
</div>
|
|||
|
<div className="p-notification-btn">
|
|||
|
<a onClick={e => settingNotify(2)} className="btn-default btn-yellow btn-notification btn-r3 btn-h30 btn-w100p btn-fz14">
|
|||
|
<span>通知</span>
|
|||
|
</a>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
)
|
|||
|
}
|
|||
|
|