Fix : dialog issue

johnny990628 · May 22, 2023 · 9a9c358 · 9a9c358
1 parent 6d1a569
commit 9a9c358
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 29 deletions.
diff --git a/src/Components/CustomAlert/CustomAlert.js b/src/Components/CustomAlert/CustomAlert.js
@@ -13,7 +13,7 @@ const CustomAlert = () => {
 
     const Toast = Swal.mixin({
         toast: true,
-        position: 'top-end',
+        position: 'bottom-end',
         showConfirmButton: false,
         timer: 1500,
         timerProgressBar: true,

diff --git a/src/Components/CustomDialog/CustomDialog.js b/src/Components/CustomDialog/CustomDialog.js
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton } from '@mui/material'
 
 import { useSelector, useDispatch } from 'react-redux'
@@ -11,9 +11,24 @@ import CustomForm from '../CustomForm/CustomForm'
 import useStyles from './Style'
 import { Close } from '@mui/icons-material'
 
-const CustomDialog = ({ title, type, mode }) => {
+const CustomDialog = () => {
+    const { type, mode } = useSelector(state => state.dialog)
     const { isOpen, row } = useSelector(state => state.dialog[type])
 
+    const [title, setTitle] = useState('')
+
+    const titleSurface = {
+        patient: '病患',
+        department: '部門',
+        event: '活動',
+        edit: '編輯',
+        create: '新增',
+    }
+
+    useEffect(() => {
+        setTitle(titleSurface[mode] + titleSurface[type])
+    }, [type, mode])
+
     const dispatch = useDispatch()
     const classes = useStyles()
     const theme = useTheme()

diff --git a/src/Components/CustomForm/CustomForm.js b/src/Components/CustomForm/CustomForm.js
@@ -10,7 +10,7 @@ import { closeDialog } from '../../Redux/Slices/Dialog'
 
 import useForm from './useForm'
 
-const CustomForm = ({ type = 'patient', row, mode }) => {
+const CustomForm = ({ type, row, mode }) => {
     const { inputModel, handleChange, handleSubmit, handleUpdate, handleHelperText, errorField } = useForm(type)
     const classes = useStyles()
     const theme = useTheme()

diff --git a/src/Components/CustomNavbar/CustomNavbar.js b/src/Components/CustomNavbar/CustomNavbar.js
@@ -18,8 +18,7 @@ import CustomDialog from '../CustomDialog/CustomDialog'
 
 const CustomNavbar = () => {
     const [event, setEvent] = useState('all')
-    const [type, setType] = useState('patient')
-    const [title, setTitle] = useState('')
+
     const classes = useStyles()
     const dispatch = useDispatch()
     const location = useLocation()
@@ -57,21 +56,7 @@ const CustomNavbar = () => {
     }
 
     const handleOpenDialog = type => {
-        setType(type)
-        switch (type) {
-            case 'patient':
-                setTitle('新增病患')
-                break
-            case 'department':
-                setTitle('新增部門')
-                break
-            case 'event':
-                setTitle('新增活動')
-                break
-            default:
-                break
-        }
-        dispatch(openDialog({ row: {}, type }))
+        dispatch(openDialog({ row: {}, type, mode: 'create' }))
     }
 
     const config = genConfig(user.username)
@@ -154,7 +139,7 @@ const CustomNavbar = () => {
                     </Button>
                 </Box>
             </Toolbar>
-            <CustomDialog title={title} type={type} mode="create" />
+            <CustomDialog />
         </AppBar>
     )
 }

diff --git a/src/Pages/Department/Department.js b/src/Pages/Department/Department.js
@@ -36,7 +36,7 @@ const Department = () => {
                             startIcon={<Edit color="contrast" />}
                             sx={{ fontSize: '1.1rem', color: 'contrast.main' }}
                             onClick={() => {
-                                dispatch(openDialog({ row: row.row.original, type: 'department' }))
+                                dispatch(openDialog({ row: row.row.original, type: 'department', mode: 'edit' }))
                             }}
                         >
                             編輯
@@ -72,7 +72,6 @@ const Department = () => {
                 totalCount={count}
                 GlobalFilter={GlobalFilter}
             />
-            <CustomDialog title="修改部門" type="department" mode="edit" />
         </Box>
     )
 }

diff --git a/src/Pages/Event/Event.js b/src/Pages/Event/Event.js
@@ -76,7 +76,7 @@ const Event = () => {
                         startIcon={<Edit color="contrast" />}
                         sx={{ fontSize: '1.1rem', color: 'contrast.main' }}
                         onClick={() => {
-                            dispatch(openDialog({ row: row.row.original, type: 'event' }))
+                            dispatch(openDialog({ row: row.row.original, type: 'event', mode: 'edit' }))
                         }}
                     >
                         編輯
@@ -118,7 +118,6 @@ const Event = () => {
                 totalCount={count}
                 GlobalFilter={GlobalFilter}
             />
-            <CustomDialog title="修改活動" type="event" mode="edit" />
         </Box>
     )
 }

diff --git a/src/Pages/Patient/Patient.js b/src/Pages/Patient/Patient.js
@@ -38,7 +38,7 @@ const Patient = () => {
                                 startIcon={<Edit color="contrast" />}
                                 sx={{ fontSize: '1.1rem', color: 'contrast.main' }}
                                 onClick={() => {
-                                    dispatch(openDialog({ row: row.row.original, type: 'patient' }))
+                                    dispatch(openDialog({ row: row.row.original, type: 'patient', mode: 'edit' }))
                                 }}
                             >
                                 編輯
@@ -191,7 +191,6 @@ const Patient = () => {
                 totalCount={count}
                 GlobalFilter={GlobalFilter}
             />
-            <CustomDialog title="修改病患" type="patient" mode="edit" />
         </Box>
     )
 }

diff --git a/src/Redux/Slices/Dialog.js b/src/Redux/Slices/Dialog.js
@@ -7,6 +7,8 @@ const initialState = {
     report: { isOpen: false, row: { patient: {}, records: {}, reportID: '' } },
     department: { isOpen: false, row: {} },
     event: { isOpen: false, row: {} },
+    mode: 'create',
+    type: 'patient',
 }
 
 export const fetchReportByReportID = createAsyncThunk('dialog/fetchReportByReportID', async (reportID, thunkAPI) => {
@@ -24,9 +26,11 @@ const dialogSlice = createSlice({
     initialState,
     reducers: {
         openDialog: (state, action) => {
-            const { row, type } = action.payload
+            const { row, type, mode } = action.payload
             state[type].isOpen = true
             state[type].row = row
+            state.mode = mode
+            state.type = type
         },
         closeDialog: (state, action) => {
             const { type } = action.payload