| @@ -62,6 +62,55 @@ export function FiDataGrid({ rows, columns, sx, autoHeight, | |||||
| } | } | ||||
| }, []); | }, []); | ||||
| React.useEffect(() => { | |||||
| if (sx) { | |||||
| set_sx(sx); | |||||
| } | |||||
| }, [sx]); | |||||
| React.useEffect(() => { | |||||
| if (hideFooterSelectedRowCount) { | |||||
| setMyHideFooterSelectedRowCount(hideFooterSelectedRowCount); | |||||
| } | |||||
| }, [hideFooterSelectedRowCount]); | |||||
| React.useEffect(() => { | |||||
| if (rowModesModel) { | |||||
| set_rowModesModel(rowModesModel) | |||||
| } | |||||
| }, [rowModesModel]); | |||||
| React.useEffect(() => { | |||||
| if (rows) { | |||||
| set_rows(rows) | |||||
| } | |||||
| }, [rows]); | |||||
| React.useEffect(() => { | |||||
| if (columns) { | |||||
| set_columns(columns) | |||||
| } | |||||
| }, [columns]); | |||||
| React.useEffect(() => { | |||||
| if (pageSizeOptions) { | |||||
| set_pageSizeOptions(pageSizeOptions) | |||||
| } | |||||
| }, [pageSizeOptions]); | |||||
| React.useEffect(() => { | |||||
| if(autoHeight != undefined){ | |||||
| set_autoHeight(autoHeight) | |||||
| } | |||||
| }, [autoHeight]); | |||||
| React.useEffect(() => { | |||||
| if(editMode){ | |||||
| set_editMode(editMode); | |||||
| } | |||||
| }, [editMode]); | |||||
| return ( | return ( | ||||
| <DataGrid | <DataGrid | ||||
| {...props} | {...props} | ||||
| @@ -1,14 +1,12 @@ | |||||
| // material-ui | // material-ui | ||||
| import * as React from 'react'; | import * as React from 'react'; | ||||
| import { | |||||
| DataGrid, | |||||
| } from "@mui/x-data-grid"; | |||||
| import { | import { | ||||
| Stack, | Stack, | ||||
| Typography, | Typography, | ||||
| Button, | Button, | ||||
| Dialog, DialogTitle, DialogContent, DialogActions | Dialog, DialogTitle, DialogContent, DialogActions | ||||
| } from '@mui/material'; | } from '@mui/material'; | ||||
| import {FiDataGrid} from "components/FiDataGrid"; | |||||
| import * as DateUtils from "utils/DateUtils" | import * as DateUtils from "utils/DateUtils" | ||||
| import * as StatusUtils from "./PublicNoteStatusUtils"; | import * as StatusUtils from "./PublicNoteStatusUtils"; | ||||
| import {useNavigate} from "react-router-dom"; | import {useNavigate} from "react-router-dom"; | ||||
| @@ -111,36 +109,19 @@ export default function SubmittedTab({ rows }) { | |||||
| return ( | return ( | ||||
| <> | <> | ||||
| <div style={{ height: 400, width: '100%', padding: 4 }}> | <div style={{ height: 400, width: '100%', padding: 4 }}> | ||||
| <DataGrid | |||||
| <FiDataGrid | |||||
| checkboxSelection | checkboxSelection | ||||
| disableRowSelectionOnClick | disableRowSelectionOnClick | ||||
| rows={rows} | rows={rows} | ||||
| columns={columns} | columns={columns} | ||||
| editMode="row" | |||||
| rowSelectionModel={selectedRowItems} | |||||
| initialState={{ | initialState={{ | ||||
| pagination: { | pagination: { | ||||
| paginationModel: { page: 0, pageSize: 5 }, | paginationModel: { page: 0, pageSize: 5 }, | ||||
| }, | }, | ||||
| }} | }} | ||||
| pageSizeOptions={[5, 10]} | |||||
| autoHeight={true} | |||||
| onRowSelectionModelChange={(newSelection) => { | onRowSelectionModelChange={(newSelection) => { | ||||
| setSelectedRowItems(newSelection); | setSelectedRowItems(newSelection); | ||||
| }} | }} | ||||
| sx={{ | |||||
| boxShadow: 1, | |||||
| border: 1, | |||||
| borderColor: '#DDD', | |||||
| '& .MuiDataGrid-cell': { | |||||
| border: 1, | |||||
| borderColor: "#EEE" | |||||
| }, | |||||
| '& .MuiDataGrid-footerContainer':{ | |||||
| border: 1, | |||||
| borderColor: "#EEE" | |||||
| } | |||||
| }} | |||||
| /> | /> | ||||
| <Button variant="contained" onClick={() => { setIsPopUp(true) }}>付款</Button> | <Button variant="contained" onClick={() => { setIsPopUp(true) }}>付款</Button> | ||||
| </div> | </div> | ||||
| @@ -1,27 +1,23 @@ | |||||
| // material-ui | // material-ui | ||||
| import * as React from 'react'; | import * as React from 'react'; | ||||
| import { | |||||
| DataGrid, | |||||
| } from "@mui/x-data-grid"; | |||||
| import { | import { | ||||
| Button | Button | ||||
| } from '@mui/material'; | } from '@mui/material'; | ||||
| import { useEffect } from "react"; | |||||
| import * as DateUtils from "utils/DateUtils"; | import * as DateUtils from "utils/DateUtils"; | ||||
| import * as StatusUtils from "./PublicNoteStatusUtils"; | import * as StatusUtils from "./PublicNoteStatusUtils"; | ||||
| import {useNavigate} from "react-router-dom"; | import {useNavigate} from "react-router-dom"; | ||||
| import {FiDataGrid} from "components/FiDataGrid"; | |||||
| // ==============================|| EVENT TABLE ||============================== // | // ==============================|| EVENT TABLE ||============================== // | ||||
| export default function SearchPublicNoticeTable({ recordList }) { | export default function SearchPublicNoticeTable({ recordList }) { | ||||
| const [rows, setRows] = React.useState(recordList); | |||||
| const [rowModesModel] = React.useState({}); | |||||
| const [rows, setRows] = React.useState([]); | |||||
| const navigate = useNavigate() | const navigate = useNavigate() | ||||
| const handleDetailClick = (params) => () => { | const handleDetailClick = (params) => () => { | ||||
| navigate('/publicNotice/'+ params.id); | navigate('/publicNotice/'+ params.id); | ||||
| }; | }; | ||||
| useEffect(() => { | |||||
| React.useEffect(() => { | |||||
| setRows(recordList); | setRows(recordList); | ||||
| }, [recordList]); | }, [recordList]); | ||||
| @@ -98,32 +94,14 @@ export default function SearchPublicNoticeTable({ recordList }) { | |||||
| return ( | return ( | ||||
| <div style={{ height: 400, width: '100%' }}> | <div style={{ height: 400, width: '100%' }}> | ||||
| <DataGrid | |||||
| hideFooterSelectedRowCount={true} | |||||
| <FiDataGrid | |||||
| rows={rows} | rows={rows} | ||||
| columns={columns} | columns={columns} | ||||
| editMode="row" | |||||
| rowModesModel={rowModesModel} | |||||
| initialState={{ | initialState={{ | ||||
| pagination: { | pagination: { | ||||
| paginationModel: { page: 0, pageSize: 5 }, | paginationModel: { page: 0, pageSize: 5 }, | ||||
| }, | }, | ||||
| }} | }} | ||||
| pageSizeOptions={[5, 10]} | |||||
| autoHeight | |||||
| sx={{ | |||||
| boxShadow: 1, | |||||
| border: 1, | |||||
| borderColor: '#DDD', | |||||
| '& .MuiDataGrid-cell': { | |||||
| border: 1, | |||||
| borderColor: "#EEE" | |||||
| }, | |||||
| '& .MuiDataGrid-footerContainer':{ | |||||
| border: 1, | |||||
| borderColor: "#EEE" | |||||
| } | |||||
| }} | |||||
| /> | /> | ||||
| </div> | </div> | ||||
| ); | ); | ||||