141 行
6.8 KiB
JavaScript
141 行
6.8 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
||
import ReactDOM from 'react-dom';
|
||
import axios from 'axios';
|
||
|
||
import Notification from '../../component/notification';
|
||
import ModalYesNo from '../../component/modal_yesno';
|
||
import Alert from '../../component/alert';
|
||
|
||
const MeetingDetail = () => {
|
||
|
||
const [alertStatus, setAlertStatus] = useState('');
|
||
const [modalStatus, setModalStatus] = useState(false);
|
||
|
||
useEffect(
|
||
() => {
|
||
const formdata = new FormData();
|
||
let child_id = 1;
|
||
|
||
// axios.get('/api/meetings/listOfNonApprovalOfChild', {child_id: child_id})
|
||
// .then(response => {
|
||
// if(response.data.status_code==200){
|
||
// // window.location.href = '/register/c-account/complete';
|
||
// }
|
||
// else if(response.data.status_code==400){
|
||
// // window.location.href = '/register/c-account/error';
|
||
// }
|
||
// else if(response.data.status_code==500){
|
||
// // window.location.href = '/unknown-error';
|
||
// }
|
||
// })
|
||
// .catch(err=>console.log(err))
|
||
},[]
|
||
);
|
||
|
||
const showAlert = () => {
|
||
|
||
setAlertStatus(true);
|
||
let timer = setTimeout(()=>{
|
||
clearTimeout(timer);
|
||
setAlertStatus(false);
|
||
}, 4000)
|
||
}
|
||
|
||
const showModal = () => {
|
||
setModalStatus(true);
|
||
}
|
||
|
||
const hideModal = () => {
|
||
setModalStatus(false);
|
||
}
|
||
|
||
return (
|
||
<div className="l-content-w560">
|
||
<div className="l-content__ttl">
|
||
<div className="l-content__ttl__left">
|
||
<h2>ミーティング詳細</h2>
|
||
<div className="p-consent-btn">
|
||
<button className="btn-default btn-yellow btn-consent btn-shadow btn-r8 btn-h42 btn-fz14" onClick={showModal}>
|
||
<span>承認</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<Notification/>
|
||
</div>
|
||
|
||
<div className="l-content-wrap">
|
||
<div className="p-article p-article-single">
|
||
<div className="p-article-wrap">
|
||
<article className="p-article__body">
|
||
<div className="p-article__content">
|
||
<p className="meeting-label">未承知</p>
|
||
<h3 className="meeting-ttl">ミーティングタイトルミーティングタイトルミミーティングタイトルミーティングタイトルミ</h3>
|
||
<time dateTime="2021-07-30" className="meeting-time">
|
||
<span className="meeting-date">2021/7/21</span>
|
||
</time>
|
||
<div className="user-wrap user-sm">
|
||
<a href="">
|
||
<div className="user-avatar">
|
||
<img alt="name" className="avatar-img" src="/assets/img/avatar/avatar-sample03@2x.png"/>
|
||
</div>
|
||
<p className="user-name text-grey">田中 達也</p>
|
||
</a>
|
||
<div className="user-advice-btn">
|
||
<a className="btn-default btn-yellow btn-pdf btn-r8 btn-h45 btn-fz14">
|
||
<span>親に電話で相談</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-article__context">
|
||
<div className="p-file-list">
|
||
<div className="p-file-for">
|
||
<figure><img src="/assets/img/dummy/post-dummy01.jpg" alt=""/></figure>
|
||
</div>
|
||
<div className="p-file-nav">
|
||
<figure><img src="/assets/img/dummy/post-dummy01.jpg" alt=""/></figure>
|
||
<figure><img src="/assets/img/dummy/post-dummy02.jpg" alt=""/></figure>
|
||
<figure><img src="/assets/img/dummy/post-dummy03.jpg" alt=""/></figure>
|
||
<figure><img src="/assets/img/dummy/post-dummy04.jpg" alt=""/></figure>
|
||
<figure><img src="/assets/img/dummy/post-dummy05.jpg" alt=""/></figure>
|
||
<figure><img src="/assets/img/dummy/post-dummy01.jpg" alt=""/></figure>
|
||
<figure><img src="/assets/img/dummy/post-dummy02.jpg" alt=""/></figure>
|
||
<figure><img src="/assets/img/dummy/post-dummy03.jpg" alt=""/></figure>
|
||
<figure><img src="/assets/img/dummy/post-dummy04.jpg" alt=""/></figure>
|
||
<figure><img src="/assets/img/dummy/post-dummy05.jpg" alt=""/></figure>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-article__pdf">
|
||
<div className="p-article__pdf__btn mr-0">
|
||
<a href="/assets/img/dummy/sample.pdf" className="btn-default btn-yellow btn-pdf btn-r8 btn-h60 h-xs-45-px" target="_blank">
|
||
<span>PDFを確認する</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<p className="p-article__txt">ミーティング詳細ミーティング詳細ミーティング詳細ミーティング詳細ミーティング詳細ミーティングミーティング詳細ミーティング。</p>
|
||
<p className="p-article__txt">ミーティング詳細ミーティング詳細ミーティング詳細ミーティング詳細ミーティング詳細ミーティングミーティング詳細ミーティング。</p>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{ alertStatus == 'success' && <Alert type="success">承認しました。</Alert> }
|
||
{ alertStatus == 'failed' && <Alert type="fail">失敗しました。</Alert> }
|
||
|
||
{
|
||
modalStatus &&
|
||
<ModalYesNo hideModal={hideModal}>
|
||
一度承知したら元に戻せません。<br/>よろしいでしょうか。
|
||
</ModalYesNo>
|
||
}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
|
||
|
||
export default MeetingDetail; |