|
|
@@ -0,0 +1,208 @@ |
|
|
|
// material-ui |
|
|
|
import { |
|
|
|
Grid, |
|
|
|
Typography, |
|
|
|
Stack, |
|
|
|
Button, |
|
|
|
Dialog, DialogTitle, DialogContent, DialogActions, |
|
|
|
} from '@mui/material'; |
|
|
|
import * as UrlUtils from "utils/ApiPathConst"; |
|
|
|
import * as React from "react"; |
|
|
|
import * as HttpUtils from "utils/HttpUtils"; |
|
|
|
|
|
|
|
import Loadable from 'components/Loadable'; |
|
|
|
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); |
|
|
|
const HolidayTable = Loadable(React.lazy(() => import('pages/Holiday/Search_GLD/DataGrid'))) |
|
|
|
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' |
|
|
|
// import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'; |
|
|
|
import MainCard from 'components/MainCard'; |
|
|
|
const SearchForm = Loadable(React.lazy(() => import('./SearchForm'))); |
|
|
|
|
|
|
|
const BackgroundHead = { |
|
|
|
backgroundImage: `url(${titleBackgroundImg})`, |
|
|
|
width: '100%', |
|
|
|
height: '100%', |
|
|
|
backgroundSize: 'contain', |
|
|
|
backgroundRepeat: 'no-repeat', |
|
|
|
backgroundColor: '#0C489E', |
|
|
|
backgroundPosition: 'right' |
|
|
|
} |
|
|
|
// import { useNavigate } from "react-router"; |
|
|
|
import {PNSPS_LONG_BUTTON_THEME} from "themes/buttonConst"; |
|
|
|
import {ThemeProvider} from "@emotion/react"; |
|
|
|
import { dateStr_Year } from "utils/DateUtils"; |
|
|
|
import { notifySaveSuccess } from 'utils/CommonFunction'; |
|
|
|
|
|
|
|
// ==============================|| DASHBOARD - DEFAULT ||============================== // |
|
|
|
|
|
|
|
const Index = () => { |
|
|
|
|
|
|
|
const [record, setRecord] = React.useState([]); |
|
|
|
const [onReady, setOnReady] = React.useState(false); |
|
|
|
// const navigate = useNavigate() |
|
|
|
const [searchCriteria, setSearchCriteria] = React.useState({ |
|
|
|
dateFrom: dateStr_Year(new Date()), |
|
|
|
// dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)), |
|
|
|
}); |
|
|
|
const [attachments, setAttachments] = React.useState([]); |
|
|
|
const [wait, setWait] = React.useState(false); |
|
|
|
const [isWarningPopUp, setIsWarningPopUp] = React.useState(false); |
|
|
|
const [warningText, setWarningText] = React.useState(""); |
|
|
|
|
|
|
|
React.useLayoutEffect(() => { |
|
|
|
loadForm(); |
|
|
|
}, []); |
|
|
|
|
|
|
|
React.useLayoutEffect(() => { |
|
|
|
setOnReady(true); |
|
|
|
}, [record]); |
|
|
|
|
|
|
|
const loadForm = () => { |
|
|
|
HttpUtils.get({ |
|
|
|
url: UrlUtils.GET_HOLIDAY, |
|
|
|
onSuccess: (responseData) => { |
|
|
|
console.log(dateStr_Year(new Date())) |
|
|
|
setRecord(responseData); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
function applySearch(input) { |
|
|
|
setSearchCriteria(input); |
|
|
|
} |
|
|
|
|
|
|
|
React.useEffect(() => { |
|
|
|
if (!attachments || attachments.length <= 0) { |
|
|
|
setAttachments([]); |
|
|
|
return; |
|
|
|
} |
|
|
|
importHoliday(); |
|
|
|
}, [attachments]); |
|
|
|
|
|
|
|
const readFile = (event) => { |
|
|
|
let file = event.target.files[0]; |
|
|
|
if (file) { |
|
|
|
if (!file.name.toLowerCase().substr(file.name.length - 5).includes(".xlsx")) { |
|
|
|
setWarningText("Please upload a valid file (File format: .xlsx)."); |
|
|
|
setIsWarningPopUp(true); |
|
|
|
document.getElementById("uploadFileBtn").value = ""; |
|
|
|
return; |
|
|
|
} |
|
|
|
file['id'] = attachments.length; |
|
|
|
setAttachments([ |
|
|
|
...attachments, |
|
|
|
file |
|
|
|
]); |
|
|
|
document.getElementById("uploadFileBtn").value = ""; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const importHoliday = () => { |
|
|
|
setWait(true); |
|
|
|
if (!attachments || attachments.length <= 0) { |
|
|
|
setWarningText("Please upload file."); |
|
|
|
setSaving(false); |
|
|
|
return; |
|
|
|
} |
|
|
|
HttpUtils.postWithFiles({ |
|
|
|
url: UrlUtils.POST_HOLIDAY, |
|
|
|
files: attachments, |
|
|
|
onSuccess: () => { |
|
|
|
notifySaveSuccess() |
|
|
|
setWait(false); |
|
|
|
setAttachments([]); |
|
|
|
loadForm(); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
return ( |
|
|
|
!onReady ? |
|
|
|
<Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center"> |
|
|
|
<Grid item> |
|
|
|
<LoadingComponent /> |
|
|
|
</Grid> |
|
|
|
</Grid> |
|
|
|
: |
|
|
|
( |
|
|
|
<Grid container sx={{minHeight: '87vh', backgroundColor: 'backgroundColor.default'}} direction="column" justifyContent="flex-start" alignItems="center" > |
|
|
|
<Grid item xs={12} width="100%"> |
|
|
|
<div style={BackgroundHead} width="100%"> |
|
|
|
<Stack direction="row" height='70px'> |
|
|
|
<Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>Holiday Setting</Typography> |
|
|
|
</Stack> |
|
|
|
</div> |
|
|
|
</Grid> |
|
|
|
<Grid item xs={12} md={12} lg={12} width="100%"> |
|
|
|
<Stack direction="row" justifyContent="flex-start" alignItems="center" sx={{ml:2,mt:1}} > |
|
|
|
<ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}> |
|
|
|
<input |
|
|
|
id="uploadFileBtn" |
|
|
|
name="file" |
|
|
|
type="file" |
|
|
|
accept=".xlsx" |
|
|
|
style={{ display: 'none' }} |
|
|
|
disabled={wait} |
|
|
|
onChange={(event) => { |
|
|
|
readFile(event) |
|
|
|
}} |
|
|
|
/> |
|
|
|
<label htmlFor="uploadFileBtn"> |
|
|
|
<Button |
|
|
|
component="span" |
|
|
|
variant="contained" |
|
|
|
size="large" |
|
|
|
disabled={wait} |
|
|
|
> |
|
|
|
<Typography variant="h5">Upload Files</Typography> |
|
|
|
</Button> |
|
|
|
</label> |
|
|
|
</ThemeProvider> |
|
|
|
</Stack> |
|
|
|
</Grid> |
|
|
|
{/*row 1*/} |
|
|
|
<Grid item xs={12} md={12} lg={12} width="100%"> |
|
|
|
<SearchForm |
|
|
|
applySearch={applySearch} |
|
|
|
// generateXML={generateXML} |
|
|
|
searchCriteria={searchCriteria} |
|
|
|
/> |
|
|
|
</Grid> |
|
|
|
{/*row 2*/} |
|
|
|
<Grid item xs={12} md={12} lg={12} width="100%"> |
|
|
|
<MainCard elevation={0} |
|
|
|
border={false} |
|
|
|
content={false} |
|
|
|
> |
|
|
|
<HolidayTable |
|
|
|
recordList={record} |
|
|
|
/> |
|
|
|
</MainCard> |
|
|
|
</Grid> |
|
|
|
<div> |
|
|
|
<Dialog |
|
|
|
open={isWarningPopUp} |
|
|
|
onClose={() => setIsWarningPopUp(false)} |
|
|
|
PaperProps={{ |
|
|
|
sx: { |
|
|
|
minWidth: '40vw', |
|
|
|
maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' }, |
|
|
|
maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' } |
|
|
|
} |
|
|
|
}} |
|
|
|
> |
|
|
|
<DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle> |
|
|
|
<DialogContent style={{ display: 'flex', }}> |
|
|
|
<Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography> |
|
|
|
</DialogContent> |
|
|
|
<DialogActions> |
|
|
|
<Button onClick={() => setIsWarningPopUp(false)}><Typography variant="h5">OK</Typography></Button> |
|
|
|
</DialogActions> |
|
|
|
</Dialog> |
|
|
|
</div> |
|
|
|
</Grid > |
|
|
|
) |
|
|
|
); |
|
|
|
}; |
|
|
|
|
|
|
|
export default Index; |