| @@ -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> | ||||