You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

119 line
3.8 KiB

  1. // material-ui
  2. import {
  3. Grid,
  4. Typography,
  5. Stack,
  6. // Button
  7. } from '@mui/material';
  8. import MainCard from "components/MainCard";
  9. import { useEffect, useState } from "react";
  10. import axios from "axios";
  11. import { GET_AUDIT_LOG_LIST } from "utils/ApiPathConst";
  12. import * as React from "react";
  13. import * as DateUtils from "utils/DateUtils";
  14. import Loadable from 'components/Loadable';
  15. import { lazy } from 'react';
  16. const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
  17. const SearchForm = Loadable(lazy(() => import('./AuditLogSearchForm')));
  18. const EventTable = Loadable(lazy(() => import('./AuditLogTable')));
  19. import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
  20. const BackgroundHead = {
  21. backgroundImage: `url(${titleBackgroundImg})`,
  22. width: '100%',
  23. height: '100%',
  24. backgroundSize: 'contain',
  25. backgroundRepeat: 'no-repeat',
  26. backgroundColor: '#0C489E',
  27. backgroundPosition: 'right'
  28. }
  29. // ==============================|| DASHBOARD - DEFAULT ||============================== //
  30. const AuditLogPage = () => {
  31. const [record, setRecord] = useState([]);
  32. const [searchCriteria, setSearchCriteria] = React.useState({
  33. modifiedTo: DateUtils.dateValue(new Date()),
  34. modifiedFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)),
  35. });
  36. const [onReady, setOnReady] = useState(false);
  37. const [changelocked, setChangeLocked] = React.useState(false);
  38. React.useLayoutEffect(() => {
  39. getUserList();
  40. }, [changelocked]);
  41. useEffect(() => {
  42. if (record.length > 0) {
  43. setOnReady(true);
  44. }
  45. }, [record]);
  46. React.useLayoutEffect(() => {
  47. getUserList();
  48. }, [searchCriteria]);
  49. function getUserList() {
  50. axios.get(`${GET_AUDIT_LOG_LIST}`,
  51. { params: searchCriteria }
  52. )
  53. .then((response) => {
  54. if (response.status === 200) {
  55. setRecord(response.data);
  56. }
  57. })
  58. .catch(error => {
  59. console.log(error);
  60. return false;
  61. });
  62. }
  63. function applySearch(input) {
  64. setSearchCriteria(input);
  65. }
  66. return (
  67. !onReady ?
  68. <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
  69. <Grid item>
  70. <LoadingComponent />
  71. </Grid>
  72. </Grid>
  73. :
  74. <Grid container sx={{ minHeight: '87vh', backgroundColor: "backgroundColor.default" }} direction="column">
  75. <Grid item xs={12}>
  76. <div style={BackgroundHead}>
  77. <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
  78. <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>Audit Log</Typography>
  79. </Stack>
  80. </div>
  81. </Grid>
  82. {/*row 1*/}
  83. <Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
  84. <SearchForm
  85. applySearch={applySearch}
  86. searchCriteria={searchCriteria}
  87. />
  88. </Grid>
  89. {/*row 2*/}
  90. <Grid item xs={12} md={12} lg={12}>
  91. <MainCard elevation={0}
  92. border={false}
  93. content={false}
  94. >
  95. <EventTable
  96. recordList={record}
  97. setChangeLocked={setChangeLocked}
  98. />
  99. </MainCard>
  100. </Grid>
  101. </Grid>
  102. );
  103. };
  104. export default AuditLogPage;