fix : 그리드 스타일 정리
parent
6083caf307
commit
11dd7f273a
@ -0,0 +1,200 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
|
||||
import _ from 'lodash';
|
||||
import getYear from 'date-fns/getYear';
|
||||
|
||||
// material-ui
|
||||
import { GridActionsCellItem } from '@mui/x-data-grid';
|
||||
import { Divider, FormControl, Grid, InputAdornment, Link, MenuItem, OutlinedInput, Select } from '@mui/material';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
|
||||
// assets
|
||||
import { IconSearch } from '@tabler/icons';
|
||||
|
||||
// berry ui
|
||||
import MainCard from 'ui-component/cards/MainCard';
|
||||
|
||||
// project imports
|
||||
import MuiDataGrid from 'views/form/MuiDataGrid';
|
||||
import xitCmm from 'commons/XitCmm';
|
||||
import { findParkings } from 'apis/parking';
|
||||
import InputLabel from '../../../ui-component/extended/Form/InputLabel';
|
||||
|
||||
const ResidentReview = () => {
|
||||
const isInit = useRef(true);
|
||||
const year = getYear(new Date());
|
||||
console.log(typeof year);
|
||||
const years = _.range(year, year - 14, -1);
|
||||
|
||||
const [selectedYear, setSelectedYear] = useState(year);
|
||||
const [searchTxt, setSearchTxt] = useState('');
|
||||
|
||||
const [totalCount, setTotalCount] = useState(0);
|
||||
const [rowsState, setRowsState] = useState({
|
||||
page: 0,
|
||||
pageSize: 20,
|
||||
rows: []
|
||||
// loading: false
|
||||
});
|
||||
const removeSimsa = useCallback(
|
||||
(row) => () => {
|
||||
// setTimeout(() => {
|
||||
// setRowsState((prevRows) => prevRows.filter((row) => row.rowId !== rowId));
|
||||
// });
|
||||
xitCmm.alertParam(`삭제대상<br>${JSON.stringify(row)}`);
|
||||
console.log(row);
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const openModalDetails = () => {};
|
||||
|
||||
/*
|
||||
ms_maincode : '민원코드'
|
||||
ms_seq : '접수번호'
|
||||
ms_carnum : '차량번호'
|
||||
ms_year : '년도'
|
||||
ms_chasu : '차수'
|
||||
ms_sdate : '심사시작일시'
|
||||
ms_startsi : '심사시작시간'
|
||||
ms_edate : '심사종료일시'
|
||||
ms_cdate : '심사마감일시'
|
||||
ms_closesi : '심사마감시간'
|
||||
ms_wdate : '단속일자'
|
||||
ms_pos : '단속장소'
|
||||
ms_result : '결과코드'
|
||||
ms_jbtime : '단속시간'
|
||||
*/
|
||||
const columns = [
|
||||
// { headerName: 'rowId', field: 'rowId' },
|
||||
{ headerName: '심의차수', headerAlign: 'center', field: 'msChasu' },
|
||||
{ headerName: '심사건수', headerAlign: 'center', field: 'cnt' },
|
||||
{
|
||||
headerName: '심사기간',
|
||||
headerAlign: 'center',
|
||||
field: 'msDate',
|
||||
minWidth: 180,
|
||||
description: '심사기간',
|
||||
valueGetter: (params) => `${params.row.msSdate} ~ ${params.row.msEdate}`,
|
||||
renderCell: (params) => (
|
||||
// <Link underline="hover" href="/parking/details" rel="noopener">
|
||||
<Link
|
||||
underline="hover"
|
||||
// onClick={() => navigate(`/parking/details?msChasu=${params.msChasu}&msSdate=${params.msSdate}&msEdate=${params.msEdate}`)}
|
||||
onClick={openModalDetails}
|
||||
data-target="modalDetails"
|
||||
rel="noopener"
|
||||
>
|
||||
{/* <Link underline="hover" href="#" onClick={() => <ModalDetails />}> */}
|
||||
{/* <Link underline="hover" onClick={() => <ModalDetails />}> */}
|
||||
{params.value}
|
||||
</Link>
|
||||
// <ModalDetails />
|
||||
)
|
||||
},
|
||||
{
|
||||
headerName: '심사마감일시',
|
||||
headerAlign: 'center',
|
||||
field: 'msCdate',
|
||||
type: 'dateTime',
|
||||
minWidth: 125,
|
||||
valueGetter: (params) => `${params.row.msCdate} ${params.row.msClosesi}`
|
||||
},
|
||||
{ headerName: '상태', field: 'msResult', renderCell: (params) => <>{params.row.msResult === '1' ? '진행중' : '심사완료'}</> },
|
||||
{
|
||||
headerName: '삭제',
|
||||
headerAlign: 'center',
|
||||
field: 'actions',
|
||||
type: 'actions',
|
||||
width: 80,
|
||||
getActions: (params) => [<GridActionsCellItem icon={<DeleteIcon />} label="Delete" onClick={removeSimsa(params.row)} />]
|
||||
}
|
||||
];
|
||||
|
||||
const search = useCallback(() => {
|
||||
const params = {
|
||||
page: rowsState.page,
|
||||
size: rowsState.pageSize
|
||||
};
|
||||
|
||||
findParkings({ ...params, msYear: selectedYear, msChasu: searchTxt }).then((response) => {
|
||||
if (response && response.data) {
|
||||
setTotalCount(response.count);
|
||||
setRowsState((prevState) => ({ ...prevState, rows: response.data }));
|
||||
// apiRef.current.forceUpdate(); // .updateRowData([]);
|
||||
// apiRef.current.updateRowData([]);
|
||||
}
|
||||
});
|
||||
}, [rowsState.page, rowsState.pageSize, selectedYear, searchTxt]);
|
||||
|
||||
const handleSearch = async (event) => {
|
||||
if (!selectedYear) return;
|
||||
|
||||
if (event.type === 'keydown' && event.key === 'Enter') {
|
||||
const newString = event?.target.value;
|
||||
setSearchTxt(newString);
|
||||
search();
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isInit.current) {
|
||||
isInit.current = false;
|
||||
return;
|
||||
}
|
||||
search();
|
||||
// }, [rowsState.page, rowsState.pageSize, selectedYear, searchTxt]);
|
||||
}, [search]);
|
||||
|
||||
return (
|
||||
<MainCard>
|
||||
<Grid container spacing={2} alignItems="center">
|
||||
<Grid item xs={12}>
|
||||
<Grid container spacing={1}>
|
||||
<Grid item xs={2}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel required>심의 년도</InputLabel>
|
||||
<Select
|
||||
size="small"
|
||||
id="reviewYear"
|
||||
name="reviewYear"
|
||||
defaultValue={year}
|
||||
onChange={(e) => setSelectedYear(e.target.value)}
|
||||
>
|
||||
{years.map((year, idx) => (
|
||||
<MenuItem key={idx} value={year}>
|
||||
{year}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<OutlinedInput
|
||||
required
|
||||
placeholder="심의차수"
|
||||
onKeyDown={handleSearch}
|
||||
size="small"
|
||||
autoComplete
|
||||
autoFocus
|
||||
endAdornment={
|
||||
<InputAdornment position="end">
|
||||
<IconSearch stroke={1.5} size="1rem" />
|
||||
</InputAdornment>
|
||||
}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
<MuiDataGrid columns={columns} rowsState={rowsState} totalCount={totalCount} setRowsState={setRowsState} />
|
||||
</MainCard>
|
||||
);
|
||||
};
|
||||
export default ResidentReview;
|
||||
Loading…
Reference in New Issue