2021-12-18 16:05:52 +09:00
|
|
|
import React, { useRef, useEffect, useState } from 'react';
|
2022-01-13 20:11:18 +09:00
|
|
|
import { Link, useNavigate, useParams } from 'react-router-dom';
|
2021-12-22 05:32:06 +09:00
|
|
|
|
2021-11-17 14:47:53 +09:00
|
|
|
import moment from 'moment';
|
2021-12-31 12:33:35 +09:00
|
|
|
import Notification from '../../component/notification';
|
2021-11-17 19:32:05 +09:00
|
|
|
import ModalConfirm from '../../component/modal_confirm';
|
|
|
|
import Alert from '../../component/alert';
|
2021-12-22 05:32:06 +09:00
|
|
|
import PageLoader from '../../component/page_loader';
|
2021-10-05 00:35:47 +09:00
|
|
|
|
2022-01-05 02:47:36 +09:00
|
|
|
const ParentChildDetail = () => {
|
2021-10-05 00:35:47 +09:00
|
|
|
|
2022-01-04 17:44:38 +09:00
|
|
|
const navigator = useNavigate();
|
2022-01-05 02:47:36 +09:00
|
|
|
const params = useParams();
|
2022-01-04 17:44:38 +09:00
|
|
|
|
2021-11-17 14:47:53 +09:00
|
|
|
const [notice, setNotice] = useState(localStorage.getItem('notice'));
|
|
|
|
const [loaded, setLoaded] = useState(false);
|
2021-11-17 19:32:05 +09:00
|
|
|
const [show_delete, setShowDelete] = useState(false);
|
|
|
|
const [submit, setSubmit] = useState(false);
|
2021-11-18 18:44:21 +09:00
|
|
|
const [child, setChild] = useState(null);
|
2021-11-17 19:32:05 +09:00
|
|
|
const [_400error, set400Error] = useState('');
|
2021-11-30 18:31:50 +09:00
|
|
|
const [_404error, set404Error] = useState('');
|
2022-01-13 20:11:18 +09:00
|
|
|
const [_success, setSuccess] = useState('');
|
2021-11-17 19:32:05 +09:00
|
|
|
|
2021-12-31 12:54:47 +09:00
|
|
|
const father_id = localStorage.getItem('kiki_acc_id');
|
2022-01-05 02:47:36 +09:00
|
|
|
const child_id = params?.child_id;
|
2021-12-18 16:05:52 +09:00
|
|
|
const isMountedRef = useRef(true);
|
|
|
|
|
2021-12-30 13:57:05 +09:00
|
|
|
useEffect( async () => {
|
2021-12-18 16:05:52 +09:00
|
|
|
isMountedRef.current = false;
|
2022-01-08 17:09:58 +09:00
|
|
|
let mounted = true;
|
2021-11-17 14:47:53 +09:00
|
|
|
setLoaded(false);
|
2021-12-30 13:57:05 +09:00
|
|
|
await axios.get('/api/fathers/children/detail/'+child_id, {params:{father_id: father_id}})
|
|
|
|
.then(response => {
|
2022-01-08 17:09:58 +09:00
|
|
|
if(!mounted) return;
|
|
|
|
|
2021-12-30 13:57:05 +09:00
|
|
|
setLoaded(true);
|
|
|
|
setNotice(response.data.notice);
|
|
|
|
if(response.data.status_code==200){
|
|
|
|
setChild(response.data.params);
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
set400Error("失敗しました。");
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch(err=>{
|
2022-01-08 17:09:58 +09:00
|
|
|
if(!mounted) return;
|
2021-12-30 13:57:05 +09:00
|
|
|
setLoaded(true);
|
|
|
|
setNotice(err.response.data.notice);
|
|
|
|
if(err.response.status==404){
|
|
|
|
set404Error(err.response.data.message);
|
|
|
|
}
|
|
|
|
})
|
2022-01-08 17:09:58 +09:00
|
|
|
|
|
|
|
return function cleanup() {
|
|
|
|
mounted = false
|
|
|
|
}
|
2021-11-17 14:47:53 +09:00
|
|
|
},[]);
|
2021-10-01 17:45:39 +09:00
|
|
|
|
2021-11-17 14:47:53 +09:00
|
|
|
//-------------------------------------------------------------
|
|
|
|
useEffect(()=>{
|
|
|
|
var navbar_list = document.getElementsByClassName("mypage-nav-list__item");
|
|
|
|
for(let i=0; i<navbar_list.length; i++)
|
|
|
|
navbar_list[i].classList.remove('nav-active');
|
|
|
|
document.getElementsByClassName("-child")[0].classList.add('nav-active');
|
|
|
|
},[]);
|
2021-11-17 19:32:05 +09:00
|
|
|
|
|
|
|
//---------------------------------------------------------------
|
2021-12-30 13:57:05 +09:00
|
|
|
const handleAcceptDelete = async () => {
|
2021-11-17 19:32:05 +09:00
|
|
|
setSubmit(true);
|
2021-12-30 13:57:05 +09:00
|
|
|
await axios.delete(`/api/fathers/relations/deleteRelationChild/${child_id}`)
|
|
|
|
.then(response => {
|
|
|
|
setSubmit(false);
|
|
|
|
setShowDelete(false);
|
|
|
|
setNotice(response.data.notice);
|
|
|
|
switch(response.data.status_code){
|
|
|
|
case 200: {
|
2022-01-04 17:44:38 +09:00
|
|
|
navigator('/p-account/child', { state: "子の削除に成功しました。" });
|
2021-12-30 13:57:05 +09:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
case 400: set400Error('子の削除に失敗しました。'); break;
|
2021-11-17 19:32:05 +09:00
|
|
|
}
|
2021-12-30 13:57:05 +09:00
|
|
|
});
|
2021-11-17 19:32:05 +09:00
|
|
|
};
|
2021-11-17 14:47:53 +09:00
|
|
|
|
2021-10-01 17:45:39 +09:00
|
|
|
return (
|
2021-11-17 14:47:53 +09:00
|
|
|
<div className="l-content">
|
|
|
|
<div className="l-content-w560">
|
|
|
|
<div className="l-content__ttl">
|
|
|
|
<div className="l-content__ttl__left">
|
|
|
|
<h2>子詳細</h2>
|
2021-10-01 17:45:39 +09:00
|
|
|
</div>
|
2021-11-17 14:47:53 +09:00
|
|
|
<Notification notice={notice}/>
|
|
|
|
</div>
|
2021-10-03 02:08:39 +09:00
|
|
|
|
2021-11-17 14:47:53 +09:00
|
|
|
<div className="l-content-wrap">
|
|
|
|
{
|
2021-12-22 05:32:06 +09:00
|
|
|
!loaded && <PageLoader/>
|
2021-11-17 14:47:53 +09:00
|
|
|
}
|
|
|
|
{
|
2021-11-18 18:44:21 +09:00
|
|
|
loaded && child &&
|
2021-11-17 14:47:53 +09:00
|
|
|
<section className="profile-container">
|
|
|
|
<div className="profile-wrap">
|
|
|
|
<div className="profile-content">
|
|
|
|
<div className="profile-thumb">
|
|
|
|
<img src={child.image} className="profile-image" alt="child-image" />
|
|
|
|
</div>
|
2021-11-30 08:06:29 +09:00
|
|
|
<p className="profile-name ft-xs-16">{`${child.last_name} ${child.first_name}`}</p>
|
2021-11-17 14:47:53 +09:00
|
|
|
<div className="profile-info ft-xs-17">
|
|
|
|
<div className="profile-info__item">
|
|
|
|
<p className="profile-info__icon">
|
|
|
|
<img src="/assets/img/icon/building.svg" alt="会社名"/>
|
|
|
|
</p>
|
2021-12-01 06:24:21 +09:00
|
|
|
<p className="txt">{child.company ? child.company: '未入力'}</p>
|
2021-11-17 14:47:53 +09:00
|
|
|
</div>
|
|
|
|
<div className="profile-info__item">
|
|
|
|
<p className="profile-info__icon">
|
|
|
|
<img src="/assets/img/icon/calendar.svg" alt="日付" />
|
|
|
|
</p>
|
2021-11-17 19:32:05 +09:00
|
|
|
<p className="txt">{ moment(child.father_relations?.hire_at).format('YYYY/MM/DD') || '' }</p>
|
2021-11-17 14:47:53 +09:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="p-profile-btn">
|
2021-11-17 19:32:05 +09:00
|
|
|
<Link to={`/p-account/child/edit/hire-date/${child_id}`}
|
|
|
|
data-v-ade1d018="kikikanri"
|
2021-11-17 14:47:53 +09:00
|
|
|
className="btn-default btn-yellow btn-profile btn-r8 btn-h52">
|
|
|
|
<span>入社日を変更</span>
|
2021-11-17 19:32:05 +09:00
|
|
|
</Link>
|
2021-11-17 14:47:53 +09:00
|
|
|
</div>
|
|
|
|
<div className="p-profile-txtLink">
|
2021-11-18 16:38:41 +09:00
|
|
|
<a className="btn-default btn-password btn-r8 btn-h30"
|
|
|
|
onClick={e=>setShowDelete(true)}>
|
|
|
|
<span className="ft-xs-16">削除する</span>
|
|
|
|
</a>
|
2021-11-17 14:47:53 +09:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-11-17 19:32:05 +09:00
|
|
|
<ModalConfirm
|
|
|
|
show={show_delete}
|
|
|
|
message={"全てのミーティングの情報から\n消えますがよろしいでしょうか?"}
|
|
|
|
handleClose={()=>setShowDelete(false)}
|
|
|
|
handleAccept={handleAcceptDelete}
|
|
|
|
loading={submit}
|
|
|
|
/>
|
2021-11-17 14:47:53 +09:00
|
|
|
</section>
|
|
|
|
}
|
2021-10-01 17:45:39 +09:00
|
|
|
</div>
|
2021-11-17 19:32:05 +09:00
|
|
|
{ _400error && <Alert type="fail" hide={()=>set400Error('')}>{_400error}</Alert> }
|
2021-11-17 23:56:11 +09:00
|
|
|
{ _success && <Alert type="success" hide={()=>setSuccess('')}>{_success}</Alert> }
|
2021-11-30 18:31:50 +09:00
|
|
|
{ _404error &&
|
|
|
|
<Alert type="fail" hide={()=>{
|
|
|
|
set404Error('');
|
2022-01-04 17:44:38 +09:00
|
|
|
navigator('/p-account/child', {state: ''});
|
2021-11-30 18:31:50 +09:00
|
|
|
}}>
|
|
|
|
{_404error}
|
|
|
|
</Alert>
|
|
|
|
}
|
2021-10-01 17:45:39 +09:00
|
|
|
</div>
|
2021-10-03 02:08:39 +09:00
|
|
|
</div>
|
2021-11-17 14:47:53 +09:00
|
|
|
)
|
2021-10-01 17:45:39 +09:00
|
|
|
}
|
|
|
|
|
2021-11-17 14:47:53 +09:00
|
|
|
|
|
|
|
|
2021-10-31 12:26:19 +09:00
|
|
|
export default ParentChildDetail;
|