diff --git a/src/Components/CustomDialog/Style.js b/src/Components/CustomDialog/Style.js index 2ad21fc..ea4c5f4 100644 --- a/src/Components/CustomDialog/Style.js +++ b/src/Components/CustomDialog/Style.js @@ -2,7 +2,7 @@ import { makeStyles } from '@mui/styles' const useStyles = makeStyles(theme => ({ dialogPaper: { - backgroundColor: theme.palette.background.secondary, + backgroundColor: theme.palette.background.opaque, }, })) diff --git a/src/Components/CustomNavbar/CustomNavbar.js b/src/Components/CustomNavbar/CustomNavbar.js index 58c6030..d17a3f3 100644 --- a/src/Components/CustomNavbar/CustomNavbar.js +++ b/src/Components/CustomNavbar/CustomNavbar.js @@ -15,6 +15,7 @@ import { apiGetCookie } from '../../Axios/Cookie' import { openDialog } from '../../Redux/Slices/Dialog' import CustomDialog from '../CustomDialog/CustomDialog' +import { fetchDashboard } from '../../Redux/Slices/Dashboard' const CustomNavbar = () => { const [event, setEvent] = useState('all') @@ -39,6 +40,9 @@ const CustomNavbar = () => { case '/report': dispatch(scheduleTrigger()) break + case '/': + dispatch(fetchDashboard()) + break default: break } diff --git a/src/Components/LittleTable/LittleTable.js b/src/Components/LittleTable/LittleTable.js index 03564d8..abcfb74 100644 --- a/src/Components/LittleTable/LittleTable.js +++ b/src/Components/LittleTable/LittleTable.js @@ -28,7 +28,15 @@ const LittleTable = ({ title, rows, cols, route }) => { {cols.map(col => ( - {row[col.accessor]} + {col.type === 'text' && row[col.accessor]} + {col.type === 'datetime' && ( + + {new Date(row[col.accessor]).toLocaleDateString()} + + {new Date(row[col.accessor]).toLocaleTimeString()} + + + )} ))} diff --git a/src/Pages/Home/Home.js b/src/Pages/Home/Home.js index 0cab7c7..6791d1a 100644 --- a/src/Pages/Home/Home.js +++ b/src/Pages/Home/Home.js @@ -6,7 +6,7 @@ import { useDispatch, useSelector } from 'react-redux' import Progressbar from '../../Components/Progressbar/Progressbar' import useStyles from './Style' import LittleTable from '../../Components/LittleTable/LittleTable' -import { fetchDashboard, fetchDepartment } from '../../Redux/Slices/Dashboard' +import { fetchDashboard } from '../../Redux/Slices/Dashboard' import { DayPicker } from 'react-day-picker' import { format, isValid, addDays } from 'date-fns' import { zhTW } from 'date-fns/locale' @@ -15,7 +15,8 @@ const Home = () => { const classes = useStyles() const dispatch = useDispatch() const theme = useTheme() - const { patients, reports, schedules, count, departments } = useSelector(state => state.dashboard) + const { patients, waitExaminationSchedule, finishSchedule, count } = useSelector(state => state.dashboard) + const { departments } = useSelector(state => state.department4List) const isComputer = useMediaQuery(theme.breakpoints.up('xl')) const [selectDepartment, setSelectDepartment] = useState('all') const [date, setDate] = useState(new Date()) @@ -23,33 +24,27 @@ const Home = () => { const patientCol = useMemo( () => [ - { accessor: 'id', Header: '身分證字號' }, - { accessor: 'name', Header: '姓名' }, - { accessor: 'gender', Header: '性別' }, + { accessor: 'id', Header: '身分證字號', type: 'text' }, + { accessor: 'name', Header: '姓名', type: 'text' }, + { accessor: 'gender', Header: '性別', type: 'text' }, ], [] ) - const scheduleCol = useMemo( + const waitScheduleCol = useMemo( () => [ - { accessor: 'patientID', Header: '身分證字號' }, - { accessor: 'procedureCode', Header: '病例代碼' }, + { accessor: 'patientID', Header: '身分證字號', type: 'text' }, + { accessor: 'createdAt', Header: '排程時間', type: 'datetime' }, ], [] ) - const reportCol = useMemo( + const finishScheduleCol = useMemo( () => [ - { accessor: 'patientID', Header: '身分證字號' }, - { accessor: 'blood', Header: '抽血編號' }, - { accessor: 'procedureCode', Header: '病例代碼' }, - { accessor: 'status', Header: '狀態' }, + { accessor: 'patientID', Header: '身分證字號', type: 'text' }, + { accessor: 'updatedAt', Header: '完成時間', type: 'datetime' }, ], [] ) - useEffect(() => { - dispatch(fetchDepartment()) - }, []) - useEffect(() => { const [dateFrom, dateTo] = [date.toLocaleDateString(), new Date(addDays(date, 1)).toLocaleDateString()] const department = selectDepartment === 'all' ? null : selectDepartment @@ -105,12 +100,12 @@ const Home = () => { - + - + @@ -126,7 +121,7 @@ const Home = () => { - {isComputer && ( + {/* {isComputer && ( @@ -156,16 +151,16 @@ const Home = () => { - )} + )} */} - + - + diff --git a/src/Redux/Slices/Dashboard.js b/src/Redux/Slices/Dashboard.js index 10ab840..8c345ed 100644 --- a/src/Redux/Slices/Dashboard.js +++ b/src/Redux/Slices/Dashboard.js @@ -1,32 +1,20 @@ import { createAsyncThunk, createSlice } from '@reduxjs/toolkit' -import { apiGetDashboard, apiGetDashboardByDepartmentID } from '../../Axios/Dashboard' -import { apiGetDepartments } from '../../Axios/Department' +import { apiGetDashboard } from '../../Axios/Dashboard' import { tokenExpirationHandler } from '../../Utils/ErrorHandle' -export const fetchDashboard = createAsyncThunk('dashboard/fetchDashboard', async ({ dateFrom, dateTo, department }, thunkAPI) => { +export const fetchDashboard = createAsyncThunk('dashboard/fetchDashboard', async (_, thunkAPI) => { try { - const response = department - ? await apiGetDashboardByDepartmentID(department, { dateFrom, dateTo, limit: 5 }) - : await apiGetDashboard({ dateFrom, dateTo, limit: 5 }) - const { patients, reports, schedules, count } = response.data + const response = await apiGetDashboard({ limit: 5 }) + const { patients, waitExaminationSchedule, finishSchedule, count } = response.data - return { patients: patients, reports: reports, schedules: schedules, count: count } + return { patients, waitExaminationSchedule, finishSchedule, count } } catch (e) { thunkAPI.dispatch(tokenExpirationHandler(e.response)) return thunkAPI.rejectWithValue() } }) -export const fetchDepartment = createAsyncThunk('dashboard/fetchDepartment', async (_, thunkAPI) => { - try { - const departments = await apiGetDepartments({ limit: 100, offset: 0, sort: 'createdAt', desc: -1 }) - return { departments: departments.data.results } - } catch (e) { - thunkAPI.dispatch(tokenExpirationHandler(e.response)) - return thunkAPI.rejectWithValue() - } -}) -const initialState = { patients: [], reports: [], schedules: [], departments: [], count: { patient: 0, report: 0, schedule: 0 } } +const initialState = { patients: [], waitExamintionSchedule: [], finishSchedule: [], count: { patient: 0, waitExamination: 0, finish: 0 } } const dashboardSlice = createSlice({ name: 'dashboard', initialState, @@ -36,13 +24,7 @@ const dashboardSlice = createSlice({ return { ...state, ...action.payload } }, [fetchDashboard.rejected]: (state, action) => { - return { ...initialState, departments: state.departments } - }, - [fetchDepartment.fulfilled]: (state, action) => { - return { ...state, ...action.payload } - }, - [fetchDepartment.rejected]: (state, action) => { - return { ...initialState, departments: [] } + return initialState }, }, })