add modal_confirm

backend/public/css/app.css

@@ -12262,6 +12262,7 @@ a {
 
 .css-1t1j96h-MuiPaper-root-MuiDialog-paper {
   border-radius: 20px !important;
+  min-width: 300px;
 }
 
 .meeting-item:last-child {

backend/resources/js/admin/child/detail.jsx

@@ -2,26 +2,13 @@ import React, { useEffect, useState } from 'react';
 import { useHistory, Link } from 'react-router-dom';
 import axios from 'axios';
 
-import { LoadingButton } from '@material-ui/lab';
 import { CircularProgress  } from '@material-ui/core';
 import IconButton from "@material-ui/core/IconButton";
 import PhotoCameraOutlinedIcon from '@mui/icons-material/PhotoCameraOutlined';
 
-import Button from '@mui/material/Button';
-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';
-
 import Alert from '../../component/alert';
-
-
-const Transition = React.forwardRef(function Transition(props, ref) {
-    return <Slide direction="up" ref={ref} {...props} />;
-  });
-  
+import ModalConfirm from '../../component/modal_confirm';
+ 
 
 
 const ChildDetail = (props) => {
@@ -91,7 +78,7 @@ const ChildDetail = (props) => {
         setOpen(false);
     };
     
-    async function handleDelete() {
+    async function handleAcceptDelete() {
         try {
             setSubmit(true);
             axios.delete(`/api/admin/children/delete/${props.match.params?.child_id}`)
@@ -214,29 +201,13 @@ const ChildDetail = (props) => {
                 </section>   
             </div>
         </div>
-        <Dialog
-            open={open}
-            TransitionComponent={Transition}
-            keepMounted
-            aria-describedby="alert-dialog-slide-description"
-        >
-            <DialogContent style={{width:'290px', padding:'25px 25px 10px'}}>
-                <DialogContentText id="alert-dialog-slide-description" style={{fontSize:'20px', textAlign:'center'}}>
-                    本当に削除してもよろしいでしょうか？
-                </DialogContentText>
-            </DialogContent>
-            <DialogActions style={{justifyContent:'space-evenly', padding:'0 20px 20px 20px'}}>
-                <Button onClick={closeModal} size="small">
-                    <span className="ft-20 text-black">いいえ</span>
-                </Button>
-                <LoadingButton variant="text"
-                    onClick={handleDelete}
-                    loading={submit}
-                    size="small">
-                    <span className={`ft-20 ${!submit && 'text-black'}`}>はい</span>
-                </LoadingButton>
-            </DialogActions>
-        </Dialog>
+        <ModalConfirm 
+          show={open} 
+          message={"本当に削除しても\nよろしいでしょうか？"}
+          handleClose={closeModal} 
+          handleAccept={handleAcceptDelete} 
+          loading={submit}
+        />
         {
             _400error && <Alert type="fail" hide={()=>set400Error('')}>{_400error}</Alert>
         } 

backend/resources/js/admin/meeting/detail.jsx

@@ -2,28 +2,12 @@ import React, { useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom'
 import moment from 'moment';
 import axios from 'axios';
-
-import { LoadingButton } from '@material-ui/lab';
 import { CircularProgress  } from '@material-ui/core';
 
-import Button from '@mui/material/Button';
-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';
-
 import Alert from '../../component/alert';
 import ModalPdf from '../../component/pdf/modal_pdf';
 import ModalMemo from '../../component/modal_memo';
-import { minWidth } from '@material-ui/system';
-
-
-const Transition = React.forwardRef(function Transition(props, ref) {
-  return <Slide direction="up" ref={ref} {...props} />;
-});
-
+import ModalConfirm from '../../component/modal_confirm';
 
 
 const MeetingDetail = (props) => {
@@ -73,7 +57,7 @@ const MeetingDetail = (props) => {
     setOpen(false);
   };
 
-  async function handleAccept() {
+  async function handleAcceptDelete() {
     try {
       setSubmit(true);
       axios.delete(`/api/admin/meetings/delete/${props.match.params?.meeting_id}`)
@@ -223,29 +207,13 @@ const MeetingDetail = (props) => {
             </div>
           </div>
         </div>
-        <Dialog
-            open={open}
-            TransitionComponent={Transition}
-            keepMounted
-            aria-describedby="alert-dialog-slide-description"
-        >
-            <DialogContent style={{width:'290px', padding:'25px 10px 10px 10px'}}>
-                <DialogContentText id="alert-dialog-slide-description" style={{fontSize:'20px', textAlign:'center'}}>
-                  本当に削除しても<br/>よろしいでしょうか？
-                </DialogContentText>
-            </DialogContent>
-            <DialogActions style={{justifyContent:'space-evenly', padding:'0 20px 20px 20px'}}>
-              <Button onClick={closeModal} size="small">
-                  <span className="ft-20 text-black">いいえ</span>
-              </Button>
-              <LoadingButton variant="text"
-                onClick={handleAccept}
-                loading={submit}
-                size="small">
-                  <span className={`ft-20 ${!submit && 'text-black'}`}>はい</span>
-              </LoadingButton>
-            </DialogActions>
-        </Dialog>
+        <ModalConfirm 
+          show={open} 
+          message={"本当に削除しても\nよろしいでしょうか？"}
+          handleClose={closeModal} 
+          handleAccept={handleAcceptDelete} 
+          loading={submit}
+        />
         {
           _400error && <Alert type="fail" hide={()=>set400Error('')}>{_400error}</Alert>
         } 

backend/resources/js/admin/parent/detail.jsx

@@ -7,15 +7,8 @@ import { CircularProgress  } from '@material-ui/core';
 import IconButton from "@material-ui/core/IconButton";
 import PhotoCameraOutlinedIcon from '@mui/icons-material/PhotoCameraOutlined';
 
-import Button from '@mui/material/Button';
-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';
-
 import Alert from '../../component/alert';
+import ModalConfirm from '../../component/modal_confirm';
 
 
 const Transition = React.forwardRef(function Transition(props, ref) {
@@ -91,7 +84,7 @@ const ParentDetail = (props) => {
         setOpen(false);
     };
     
-    async function handleDelete() {
+    async function handleAcceptDelete() {
         try {
             setSubmit(true);
             axios.delete(`/api/admin/fathers/delete/${props.match.params?.father_id}`)
@@ -205,29 +198,13 @@ const ParentDetail = (props) => {
                 </section>   
             </div>
         </div>
-        <Dialog
-            open={open}
-            TransitionComponent={Transition}
-            keepMounted
-            aria-describedby="alert-dialog-slide-description"
-        >
-            <DialogContent style={{width:'290px', padding:'25px 25px 10px'}}>
-                <DialogContentText id="alert-dialog-slide-description" style={{fontSize:'20px', textAlign:'center'}}>
-                    本当に削除してもよろしいでしょうか？
-                </DialogContentText>
-            </DialogContent>
-            <DialogActions style={{justifyContent:'space-evenly', padding:'0 20px 20px 20px'}}>
-                <Button onClick={closeModal} size="small">
-                    <span className="ft-20 text-black">いいえ</span>
-                </Button>
-                <LoadingButton variant="text"
-                    onClick={handleDelete}
-                    loading={submit}
-                    size="small">
-                    <span className={`ft-20 ${!submit && 'text-black'}`}>はい</span>
-                </LoadingButton>
-            </DialogActions>
-        </Dialog>
+        <ModalConfirm 
+          show={open} 
+          message={"本当に削除しても\nよろしいでしょうか？"}
+          handleClose={closeModal} 
+          handleAccept={handleAcceptDelete} 
+          loading={submit}
+        />
         {
             _400error && <Alert type="fail" hide={()=>set400Error('')}>{_400error}</Alert>
         } 

backend/resources/js/child/meeting/detail.jsx

@@ -1,32 +1,17 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
-import { useHistory, useLocation, Link } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { CircularProgress  } from '@material-ui/core';
-import { LoadingButton } from '@material-ui/lab';
 
 import Notification from '../notification';
 import moment from 'moment';
-
-import Button from '@mui/material/Button';
-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';
-
 import Alert from '../../component/alert';
 import ModalPdf from '../../component/pdf/modal_pdf';
 import ModalMemo from '../../component/modal_memo';
-
-const Transition = React.forwardRef(function Transition(props, ref) {
-    return <Slide direction="up" ref={ref} {...props} />;
-  });
-  
+import ModalConfirm from '../../component/modal_confirm';
 
 const MeetingDetail = (props) => {
 
-    const history = useHistory();
     const [notice, setNotice] = useState(localStorage.getItem('notice'));
     const [loaded, setLoaded] = useState(false);
     const [meeting, setMeeting] = useState(null);
@@ -206,30 +191,12 @@ const MeetingDetail = (props) => {
                     : <p className="text-center mt-5 ft-18">データが存在しません。</p>
                 )
             }
-            <Dialog
-                open={showConfirm}
-                TransitionComponent={Transition}
-                keepMounted
-                aria-describedby="alert-dialog-slide-description"
-                onClose={e=>setShowConfirm(false)}
-            >
-                <DialogContent style={{width:'290px', padding:'25px 10px 10px'}}>
-                    <DialogContentText id="alert-dialog-slide-description" className="text-center">
-                        <span className="ft-16 text-black">一度承知したら元に戻せません。<br/>よろしいでしょうか。</span>
-                    </DialogContentText>
-                </DialogContent>
-                <DialogActions style={{justifyContent:'space-evenly', padding:'0 20px 20px 20px'}}>
-                    <Button onClick={e=>setShowConfirm(false)} size="small">
-                        <span className="ft-16 font-weight-bold text-black">いいえ</span>
-                    </Button>
-                    <LoadingButton variant="text"
-                        onClick={handleApprovalRegister}
-                        loading={submit}
-                        size="small">
-                        <span className={`ft-16 font-weight-bold ${!submit && 'text-black'}`}>はい</span>
-                    </LoadingButton>
-                </DialogActions>
-            </Dialog>
+            <ModalConfirm 
+            show={showConfirm} 
+            message={"一度承知したら元に戻せません。\nよろしいでしょうか。"}
+            handleClose={()=>setShowConfirm(false)} 
+            handleAccept={handleApprovalRegister} 
+            loading={submit}/>
             {
                 _400error && <Alert type="fail" hide={()=>set400Error('')}>{_400error}</Alert>
             } 

backend/resources/js/child/meeting/index.jsx

@@ -5,7 +5,6 @@ import moment from 'moment';
 import { CircularProgress  } from '@material-ui/core';
 
 import Notification from '../notification';
-
 import Alert from '../../component/alert';
 import InfiniteScroll from "react-infinite-scroll-component";
 

backend/resources/js/component/alert.jsx

@@ -10,7 +10,7 @@ const Alert = (props) => {
               let timer = setTimeout(()=>{
                 clearTimeout(timer);
                 if(props.hide)  props.hide();
-            }, 4000)
+            }, 3000)
         },[]);
 
 	return (

backend/resources/js/component/modal_confirm.jsx

@@ -1,32 +1,46 @@
 import React, { useEffect, useState } from 'react';
-import { makeStyles } from '@material-ui/styles';
 
-const useStyles = makeStyles(theme => ({
-    show: {
-        display: 'block',
-    },
-    hide: {
-        display: 'none',
-    },
-}));
+import Button from '@mui/material/Button';
+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';
+import { LoadingButton } from '@material-ui/lab';
 
-export default function ModalConfirm({ show, message, handleClose, handleAccept }){
-    const classes = useStyles();
+
+const Transition = React.forwardRef(function Transition(props, ref) {
+    return <Slide direction="up" ref={ref} {...props} />;
+});
+
+
+export default function ModalMemo({ show, message, handleClose, handleAccept, loading }){
 	return (
-        <div className={`modal-area modal-01 ${show ? classes.show : classes.hide}`} >
-            <div className="modal-bg"></div>
-            <div className="modal-wrap">
-            <p className="modal-ttl" style={{ whiteSpace: 'pre-wrap' }}>{message}</p>
-            <ul className="modal-answer">
-                <li>
-                    <a className="close-modal" onClick={handleClose} >いいえ</a>
-                </li>
-                <li>
-                    <a onClick={handleAccept} >はい</a>
-                </li>
-            </ul>
-            </div>
-        </div>
+        <Dialog
+            open={show}
+            TransitionComponent={Transition}
+            keepMounted
+            aria-describedby="alert-dialog-slide-description"
+            onClose={handleClose}
+        >
+            <DialogContent style={{padding:'35px 10px 10px'}}>
+                <DialogContentText id="alert-dialog-slide-description" className="text-center">
+                    <span className="ft-16 text-black" style={{ whiteSpace: 'pre-wrap' }}>{message}</span>
+                </DialogContentText>
+            </DialogContent>
+            <DialogActions style={{justifyContent:'space-evenly', padding:'0 10px 30px 10px'}}>
+                <Button onClick={handleClose} size="small">
+                    <span className="ft-16 font-weight-bold text-black">いいえ</span>
+                </Button>
+                <LoadingButton variant="text"
+                    onClick={handleAccept}
+                    loading={loading}
+                    size="small">
+                    <span className={`ft-16 font-weight-bold ${!loading && 'text-black'}`}>はい</span>
+                </LoadingButton>
+            </DialogActions>
+        </Dialog>
 	)
 }
 

backend/resources/js/parent/meeting/detail.jsx

@@ -16,9 +16,10 @@ const MeetingDetail = (props) => {
 
   const history = useHistory();
   const [loaded, setLoaded] = useState(false);
+  const [submit, setSubmit] = useState(false);
   const [ notice, setNotice] = useState(localStorage.getItem('notice'));
   
-  const [show, setShow] = useState(false);
+  const [showConfirm, setShowConfirm] = useState(false);
   const [showArea, setShowArea] = useState(false);
   const [showMemo, setShowMemo] = useState(false);
   const [showNotify, setShowNotify] = useState(false);
@@ -56,15 +57,15 @@ const MeetingDetail = (props) => {
     });
   }, []);
 
-  async function showModal() {
-    setShow(true);
+  async function showModalConfirm() {
+    setShowConfirm(true);
   };
 
-  async function handleClose() {
-    setShow(false);
+  async function handleCloseConfirm() {
+    setShowConfirm(false);
   };
 
-  async function handleAccept() {
+  async function handleAcceptDelete() {
     try {
       axios.delete(`/api/meetings/delete/${props.match.params?.id}`)
         .then(response => {
@@ -199,7 +200,7 @@ const MeetingDetail = (props) => {
                               className="btn-default btn-yellow btn-pdf btn-r8 btn-h48">編集</Link>
                         </li>
                         <li className="p-article-btn__item">
-                          <a onClick={showModal} className="btn-default btn-yellow btn-pdf btn-r8 btn-h48">削除</a>
+                          <a onClick={showModalConfirm} className="btn-default btn-yellow btn-pdf btn-r8 btn-h48">削除</a>
                         </li>
                         <li className="p-article-btn__item">
                           <Link to='/p-account/meeting/new'
@@ -285,10 +286,11 @@ const MeetingDetail = (props) => {
           handleClose={handleCloseMemo} 
         />
         <ModalConfirm 
-          show={show} 
+          show={showConfirm} 
           message={"本当に削除しても\nよろしいでしょうか？"}
-          handleClose={handleClose} 
-          handleAccept={handleAccept} 
+          handleClose={handleCloseConfirm} 
+          handleAccept={handleAcceptDelete} 
+          loading={submit}
         />
         <ModalConfirm 
           show={showNotify} 

backend/resources/sass/layouts/_main.scss

@@ -144,6 +144,7 @@ a{
 
 .css-1t1j96h-MuiPaper-root-MuiDialog-paper{
   border-radius: 20px !important;
+  min-width: 300px;
 }
 
 .meeting-item{