@@ -5,17 +5,19 @@ import { FiDataGrid } from "components/FiDataGrid"; | |||||
import EditIcon from '@mui/icons-material/Edit'; | import EditIcon from '@mui/icons-material/Edit'; | ||||
import { useEffect } from "react"; | import { useEffect } from "react"; | ||||
import { useNavigate } from "react-router-dom"; | import { useNavigate } from "react-router-dom"; | ||||
import {GET_EMAIL_LIST} from "utils/ApiPathConst"; | |||||
// ==============================|| EVENT TABLE ||============================== // | // ==============================|| EVENT TABLE ||============================== // | ||||
export default function EmailTemplateTable({ recordList }) { | |||||
const [rows, setRows] = React.useState(recordList); | |||||
export default function EmailTemplateTable({ responseData }) { | |||||
const [_responseData, set_responseData] = React.useState(responseData); | |||||
const navigate = useNavigate() | const navigate = useNavigate() | ||||
useEffect(() => { | useEffect(() => { | ||||
setRows(recordList); | |||||
}, [recordList]); | |||||
set_responseData(responseData); | |||||
}, [responseData]); | |||||
const handleEditClick = (id) => () => { | const handleEditClick = (id) => () => { | ||||
navigate('/setting/emailTemplate/' + id); | navigate('/setting/emailTemplate/' + id); | ||||
@@ -91,11 +93,14 @@ export default function EmailTemplateTable({ recordList }) { | |||||
return ( | return ( | ||||
<div style={{ height: "fit-content", width: '100%' }}> | <div style={{ height: "fit-content", width: '100%' }}> | ||||
<FiDataGrid | <FiDataGrid | ||||
rows={rows} | |||||
columns={columns} | columns={columns} | ||||
customPageSize={5} | |||||
customPageSize={10} | |||||
onRowDoubleClick={handleRowDoubleClick} | onRowDoubleClick={handleRowDoubleClick} | ||||
getRowHeight={() => 'auto'} | getRowHeight={() => 'auto'} | ||||
doLoad={{ | |||||
url:GET_EMAIL_LIST, | |||||
params: _responseData | |||||
}} | |||||
/> | /> | ||||
</div> | </div> | ||||
); | ); |
@@ -5,9 +5,7 @@ import { | |||||
Stack, | Stack, | ||||
Button, | Button, | ||||
} from '@mui/material'; | } from '@mui/material'; | ||||
import * as UrlUtils from "utils/ApiPathConst"; | |||||
import * as React from "react"; | import * as React from "react"; | ||||
import * as HttpUtils from "utils/HttpUtils"; | |||||
import Loadable from 'components/Loadable'; | import Loadable from 'components/Loadable'; | ||||
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); | const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); | ||||
@@ -25,33 +23,25 @@ const BackgroundHead = { | |||||
backgroundPosition: 'right' | backgroundPosition: 'right' | ||||
} | } | ||||
import { useNavigate } from "react-router"; | import { useNavigate } from "react-router"; | ||||
import {PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst"; | |||||
import {ThemeProvider} from "@emotion/react"; | |||||
import { PNSPS_LONG_BUTTON_THEME } from "../../../themes/buttonConst"; | |||||
import { ThemeProvider } from "@emotion/react"; | |||||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | // ==============================|| DASHBOARD - DEFAULT ||============================== // | ||||
const Index = () => { | const Index = () => { | ||||
const [record, setRecord] = React.useState([]); | |||||
const [responseData, setResponseData] = React.useState({}); | |||||
const [onReady, setOnReady] = React.useState(false); | const [onReady, setOnReady] = React.useState(false); | ||||
const navigate = useNavigate() | const navigate = useNavigate() | ||||
React.useLayoutEffect(() => { | React.useLayoutEffect(() => { | ||||
loadForm(); | |||||
setResponseData({}); | |||||
}, []); | }, []); | ||||
React.useLayoutEffect(() => { | React.useLayoutEffect(() => { | ||||
setOnReady(true); | setOnReady(true); | ||||
}, [record]); | |||||
}, [responseData]); | |||||
const loadForm = () => { | |||||
HttpUtils.get({ | |||||
url: UrlUtils.GET_EMAIL_LIST, | |||||
onSuccess: (responseData) => { | |||||
setRecord(responseData); | |||||
} | |||||
}); | |||||
} | |||||
return ( | return ( | ||||
!onReady ? | !onReady ? | ||||
@@ -62,7 +52,7 @@ const Index = () => { | |||||
</Grid> | </Grid> | ||||
: | : | ||||
( | ( | ||||
<Grid container sx={{ minHeight: '87vh', backgroundColor: 'backgroundColor.default' }} direction="column" justifyContent="flex-start" alignItems="center" > | |||||
<Grid container sx={{ minHeight: '87vh', backgroundColor: 'backgroundColor.default' }} direction="column" justifyContent="flex-start" alignItems="center" > | |||||
<Grid item xs={12} width="100%"> | <Grid item xs={12} width="100%"> | ||||
<div style={BackgroundHead} width="100%"> | <div style={BackgroundHead} width="100%"> | ||||
<Stack direction="row" height='70px'> | <Stack direction="row" height='70px'> | ||||
@@ -77,24 +67,24 @@ const Index = () => { | |||||
content={false} | content={false} | ||||
> | > | ||||
<EmailTemplateTable | <EmailTemplateTable | ||||
recordList={record} | |||||
responseData={responseData} | |||||
/> | /> | ||||
</MainCard> | </MainCard> | ||||
</Grid> | </Grid> | ||||
<Grid container direction="row" | <Grid container direction="row" | ||||
justifyContent="space-between" | justifyContent="space-between" | ||||
alignItems="center"> | alignItems="center"> | ||||
<Grid item xs={3} md={3} sx={{ mb:3, ml: 3, mr: 1 }}> | |||||
<Grid item xs={3} md={3} sx={{ mb: 3, ml: 3, mr: 1 }}> | |||||
<ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}> | <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}> | ||||
<Button | |||||
variant="contained" | |||||
onClick={()=>{navigate('/setting/emailTemplate/-1')}} | |||||
startIcon={<AddCircleOutlineIcon/>} | |||||
> | |||||
<Button | |||||
variant="contained" | |||||
onClick={() => { navigate('/setting/emailTemplate/-1') }} | |||||
startIcon={<AddCircleOutlineIcon />} | |||||
> | |||||
New Email Template | |||||
New Email Template | |||||
</Button> | |||||
</Button> | |||||
</ThemeProvider> | </ThemeProvider> | ||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
@@ -1,23 +1,19 @@ | |||||
// material-ui | |||||
import * as React from 'react'; | import * as React from 'react'; | ||||
// import { GridActionsCellItem, } from "@mui/x-data-grid"; | |||||
import { FiDataGrid } from "components/FiDataGrid"; | import { FiDataGrid } from "components/FiDataGrid"; | ||||
// import EditIcon from '@mui/icons-material/Edit'; | |||||
import { useEffect } from "react"; | |||||
import { dateStr } from "utils/DateUtils"; | import { dateStr } from "utils/DateUtils"; | ||||
// import { useNavigate } from "react-router-dom"; | |||||
import {GET_ISSUE} from "utils/ApiPathConst"; | |||||
// ==============================|| EVENT TABLE ||============================== // | // ==============================|| EVENT TABLE ||============================== // | ||||
export default function GazetteIssueTable({ recordList }) { | |||||
const [rows, setRows] = React.useState(recordList); | |||||
export default function GazetteIssueTable({ searchCriteria }) { | |||||
const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria); | |||||
// const navigate = useNavigate() | |||||
React.useEffect(() => { | |||||
set_searchCriteria(searchCriteria); | |||||
}, [searchCriteria]); | |||||
useEffect(() => { | |||||
// console.log(recordList) | |||||
setRows(recordList); | |||||
}, [recordList]); | |||||
const columns = [ | const columns = [ | ||||
{ | { | ||||
@@ -88,11 +84,14 @@ export default function GazetteIssueTable({ recordList }) { | |||||
return ( | return ( | ||||
<div style={{ height: "fit-content", width: '100%' }}> | <div style={{ height: "fit-content", width: '100%' }}> | ||||
<FiDataGrid | <FiDataGrid | ||||
rows={rows} | |||||
columns={columns} | columns={columns} | ||||
customPageSize={20} | |||||
customPageSize={10} | |||||
// onRowDoubleClick={handleRowDoubleClick} | // onRowDoubleClick={handleRowDoubleClick} | ||||
getRowHeight={() => 'auto'} | getRowHeight={() => 'auto'} | ||||
doLoad={{ | |||||
url: GET_ISSUE, | |||||
params: _searchCriteria, | |||||
}} | |||||
/> | /> | ||||
</div> | </div> | ||||
); | ); |
@@ -35,13 +35,11 @@ import { notifySaveSuccess } from 'utils/CommonFunction'; | |||||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | // ==============================|| DASHBOARD - DEFAULT ||============================== // | ||||
const Index = () => { | const Index = () => { | ||||
const [record, setRecord] = React.useState([]); | |||||
const [comboData, setComboData] = React.useState([]); | const [comboData, setComboData] = React.useState([]); | ||||
const [holidayComboData, setHolidayComboData] = React.useState([]); | const [holidayComboData, setHolidayComboData] = React.useState([]); | ||||
const [onReady, setOnReady] = React.useState(false); | const [onReady, setOnReady] = React.useState(false); | ||||
const [onSearchReady, setOnSearchReady] = React.useState(false); | const [onSearchReady, setOnSearchReady] = React.useState(false); | ||||
const [onExportReady, setOnExportReady] = React.useState(false); | const [onExportReady, setOnExportReady] = React.useState(false); | ||||
// const navigate = useNavigate() | |||||
const [searchCriteria, setSearchCriteria] = React.useState({ | const [searchCriteria, setSearchCriteria] = React.useState({ | ||||
year: dateStr_Year(new Date()), | year: dateStr_Year(new Date()), | ||||
// dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)), | // dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)), | ||||
@@ -61,24 +59,9 @@ const Index = () => { | |||||
React.useEffect(() => { | React.useEffect(() => { | ||||
// console.log(searchCriteria) | // console.log(searchCriteria) | ||||
setOnSearchReady(false) | setOnSearchReady(false) | ||||
loadForm(); | |||||
loadCombo(); | |||||
}, [searchCriteria]); | }, [searchCriteria]); | ||||
function loadForm() { | |||||
HttpUtils.get({ | |||||
url: UrlUtils.GET_ISSUE, | |||||
params: searchCriteria, | |||||
onSuccess: (responseData) => { | |||||
// console.log(comboData) | |||||
setRecord(responseData); | |||||
if (comboData.length == 0) { | |||||
loadCombo(); | |||||
}else{ | |||||
setOnSearchReady(true) | |||||
} | |||||
} | |||||
}); | |||||
} | |||||
function loadCombo() { | function loadCombo() { | ||||
HttpUtils.get({ | HttpUtils.get({ | ||||
@@ -246,7 +229,7 @@ const Index = () => { | |||||
content={false} | content={false} | ||||
> | > | ||||
<GazetteIssueTable | <GazetteIssueTable | ||||
recordList={record} | |||||
searchCriteria={searchCriteria} | |||||
/> | /> | ||||
</MainCard> | </MainCard> | ||||
</Grid> | </Grid> | ||||