| @@ -3,6 +3,7 @@ import * as React from 'react'; | |||||
| import {FiDataGrid} from "components/FiDataGrid"; | import {FiDataGrid} from "components/FiDataGrid"; | ||||
| import {useEffect} from "react"; | import {useEffect} from "react"; | ||||
| import * as DateUtils from "utils/DateUtils" | import * as DateUtils from "utils/DateUtils" | ||||
| import { GET_AUDIT_LOG_LIST } from "utils/ApiPathConst"; | |||||
| import {useTheme} from "@emotion/react"; | import {useTheme} from "@emotion/react"; | ||||
| import { | import { | ||||
| // Button, | // Button, | ||||
| @@ -11,13 +12,13 @@ import { | |||||
| } from '@mui/material'; | } from '@mui/material'; | ||||
| // ==============================|| EVENT TABLE ||============================== // | // ==============================|| EVENT TABLE ||============================== // | ||||
| export default function AuditLogTable({recordList}) { | |||||
| const [rows, setRows] = React.useState(recordList); | |||||
| export default function AuditLogTable({searchCriteria}) { | |||||
| const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria); | |||||
| useEffect(() => { | useEffect(() => { | ||||
| setRows(recordList); | |||||
| // console.log(recordList) | |||||
| }, [recordList]); | |||||
| set_searchCriteria(searchCriteria); | |||||
| }, [searchCriteria]); | |||||
| const theme = useTheme(); | const theme = useTheme(); | ||||
| const isMdOrLg = useMediaQuery(theme.breakpoints.up('md')); | const isMdOrLg = useMediaQuery(theme.breakpoints.up('md')); | ||||
| @@ -83,11 +84,13 @@ export default function AuditLogTable({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} | |||||
| // onRowDoubleClick={handleRowDoubleClick} | |||||
| customPageSize={10} | |||||
| getRowHeight={() => 'auto'} | getRowHeight={() => 'auto'} | ||||
| doLoad={{ | |||||
| url: GET_AUDIT_LOG_LIST, | |||||
| params: _searchCriteria | |||||
| }} | |||||
| /> | /> | ||||
| </div> | </div> | ||||
| ); | ); | ||||
| @@ -7,9 +7,6 @@ import { | |||||
| } from '@mui/material'; | } from '@mui/material'; | ||||
| import MainCard from "components/MainCard"; | import MainCard from "components/MainCard"; | ||||
| import { useEffect, useState } from "react"; | import { useEffect, useState } from "react"; | ||||
| import axios from "axios"; | |||||
| import { GET_AUDIT_LOG_LIST } from "utils/ApiPathConst"; | |||||
| import * as React from "react"; | |||||
| import * as DateUtils from "utils/DateUtils"; | import * as DateUtils from "utils/DateUtils"; | ||||
| import Loadable from 'components/Loadable'; | import Loadable from 'components/Loadable'; | ||||
| @@ -31,43 +28,16 @@ const BackgroundHead = { | |||||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | // ==============================|| DASHBOARD - DEFAULT ||============================== // | ||||
| const AuditLogPage = () => { | const AuditLogPage = () => { | ||||
| const [record, setRecord] = useState([]); | |||||
| const [searchCriteria, setSearchCriteria] = React.useState({ | |||||
| const [searchCriteria, setSearchCriteria] = useState({ | |||||
| modifiedTo: DateUtils.dateValue(new Date()), | modifiedTo: DateUtils.dateValue(new Date()), | ||||
| modifiedFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)), | modifiedFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)), | ||||
| }); | }); | ||||
| const [onReady, setOnReady] = useState(false); | const [onReady, setOnReady] = useState(false); | ||||
| const [changelocked, setChangeLocked] = React.useState(false); | |||||
| React.useLayoutEffect(() => { | |||||
| getUserList(); | |||||
| }, [changelocked]); | |||||
| useEffect(() => { | useEffect(() => { | ||||
| if (record.length > 0) { | |||||
| setOnReady(true); | setOnReady(true); | ||||
| } | |||||
| }, [record]); | |||||
| React.useLayoutEffect(() => { | |||||
| getUserList(); | |||||
| }, [searchCriteria]); | }, [searchCriteria]); | ||||
| function getUserList() { | |||||
| axios.get(`${GET_AUDIT_LOG_LIST}`, | |||||
| { params: searchCriteria } | |||||
| ) | |||||
| .then((response) => { | |||||
| if (response.status === 200) { | |||||
| setRecord(response.data); | |||||
| } | |||||
| }) | |||||
| .catch(error => { | |||||
| console.log(error); | |||||
| return false; | |||||
| }); | |||||
| } | |||||
| function applySearch(input) { | function applySearch(input) { | ||||
| setSearchCriteria(input); | setSearchCriteria(input); | ||||
| } | } | ||||
| @@ -104,8 +74,7 @@ const AuditLogPage = () => { | |||||
| content={false} | content={false} | ||||
| > | > | ||||
| <EventTable | <EventTable | ||||
| recordList={record} | |||||
| setChangeLocked={setChangeLocked} | |||||
| searchCriteria={searchCriteria} | |||||
| /> | /> | ||||
| </MainCard> | </MainCard> | ||||
| </Grid> | </Grid> | ||||
| @@ -6,15 +6,16 @@ import { | |||||
| import MainCard from "components/MainCard"; | import MainCard from "components/MainCard"; | ||||
| import * as React from "react"; | import * as React from "react"; | ||||
| import { FiDataGrid } from "components/FiDataGrid"; | import { FiDataGrid } from "components/FiDataGrid"; | ||||
| import { GET_SYS_PARAMS } from "utils/ApiPathConst"; | |||||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | // ==============================|| DASHBOARD - DEFAULT ||============================== // | ||||
| const Table = ({onRowClick, dataList}) => { | |||||
| const [rows, setRows] = React.useState(dataList); | |||||
| const Table = ({onRowClick, searchCriteria}) => { | |||||
| const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria); | |||||
| React.useEffect(() => { | React.useEffect(() => { | ||||
| setRows(dataList); | |||||
| }, [dataList]); | |||||
| set_searchCriteria(searchCriteria); | |||||
| }, [searchCriteria]); | |||||
| const columns = [ | const columns = [ | ||||
| { | { | ||||
| @@ -62,11 +63,14 @@ const Table = ({onRowClick, dataList}) => { | |||||
| <div style={{ width: '100%' }}> | <div style={{ width: '100%' }}> | ||||
| <Box sx={{ backgroundColor: "#fff", ml: 2 }} height='100%'> | <Box sx={{ backgroundColor: "#fff", ml: 2 }} height='100%'> | ||||
| <FiDataGrid | <FiDataGrid | ||||
| rows={rows} | |||||
| columns={columns} | columns={columns} | ||||
| customPageSize={10} | customPageSize={10} | ||||
| getRowHeight={() => 'auto'} | getRowHeight={() => 'auto'} | ||||
| onRowClick={onRowClick} | onRowClick={onRowClick} | ||||
| doLoad={{ | |||||
| url:GET_SYS_PARAMS, | |||||
| params:_searchCriteria | |||||
| }} | |||||
| /> | /> | ||||
| </Box> | </Box> | ||||
| </div> | </div> | ||||
| @@ -7,7 +7,7 @@ import { | |||||
| } from '@mui/material'; | } from '@mui/material'; | ||||
| import * as React from "react"; | import * as React from "react"; | ||||
| import { GET_SYS_PARAMS, } from "utils/ApiPathConst"; | |||||
| import { GET_SYS_PARAMS } from "utils/ApiPathConst"; | |||||
| import Loadable from 'components/Loadable'; | import Loadable from 'components/Loadable'; | ||||
| const Table = Loadable(React.lazy(() => import('./Table'))); | const Table = Loadable(React.lazy(() => import('./Table'))); | ||||
| @@ -32,78 +32,68 @@ const BackgroundHead = { | |||||
| const SystemSetting = () => { | const SystemSetting = () => { | ||||
| const [dataList, setDataList] = React.useState([]); | |||||
| const [searchCriteria, setSearchCriteria] = React.useState({}); | |||||
| const [selectedItem, setSelectedItem] = React.useState({}); | const [selectedItem, setSelectedItem] = React.useState({}); | ||||
| React.useEffect(() => { | |||||
| loadList(); | |||||
| React.useEffect(()=>{ | |||||
| setSearchCriteria({}) | |||||
| }, []); | }, []); | ||||
| const loadList=()=>{ | |||||
| HttpUtils.get({ | |||||
| url: GET_SYS_PARAMS, | |||||
| onSuccess: (responseData)=>{ | |||||
| setDataList(responseData); | |||||
| } | |||||
| }); | |||||
| } | |||||
| const onRowClick=(param)=>{ | |||||
| const onRowClick = (param) => { | |||||
| setSelectedItem(param.row); | setSelectedItem(param.row); | ||||
| } | } | ||||
| const onSave=(param)=>{ | |||||
| const onSave = (param) => { | |||||
| HttpUtils.post({ | HttpUtils.post({ | ||||
| url: GET_SYS_PARAMS+"/update", | |||||
| params:{ | |||||
| url: GET_SYS_PARAMS + "/update", | |||||
| params: { | |||||
| name: param.name, | name: param.name, | ||||
| value: param.value | value: param.value | ||||
| }, | }, | ||||
| onSuccess: ()=>{ | |||||
| onSuccess: () => { | |||||
| notifyActionSuccess(); | notifyActionSuccess(); | ||||
| loadList(); | loadList(); | ||||
| } | } | ||||
| }); | }); | ||||
| } | } | ||||
| return ( | return ( | ||||
| <Grid container sx={{ minHeight: '87vh', backgroundColor: 'backgroundColor.default' }} direction="column" | |||||
| justifyContent="flex-start"> | |||||
| <> | |||||
| <Grid item xs={12}> | |||||
| <div style={BackgroundHead}> | |||||
| <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center"> | |||||
| <Typography ml={15} color='#FFF' variant="h4">System Setting</Typography> | |||||
| </Stack> | |||||
| </div> | |||||
| </Grid> | |||||
| {/*col 1*/} | |||||
| <Grid item xs={12} > | |||||
| <Grid container direction="row" sx={{ p: 2 }} spacing={2} > | |||||
| <Grid item xs={12} md={8} lg={8} > | |||||
| <Box xs={12} sx={{ borderRadius: '10px', backgroundColor: '#fff' }} > | |||||
| <Table | |||||
| dataList={dataList} | |||||
| onRowClick={onRowClick} | |||||
| /> | |||||
| </Box> | |||||
| </Grid> | |||||
| <Grid item xs={12} md={4} lg={4}> | |||||
| <Box xs={12} sx={{ borderRadius: '10px', backgroundColor: '#fff' }}> | |||||
| <Form | |||||
| selectedItem={selectedItem} | |||||
| onSave={onSave} | |||||
| /> | |||||
| </Box> | |||||
| </Grid> | |||||
| <Grid container sx={{ minHeight: '87vh', backgroundColor: 'backgroundColor.default' }} direction="column" | |||||
| justifyContent="flex-start"> | |||||
| <> | |||||
| <Grid item xs={12}> | |||||
| <div style={BackgroundHead}> | |||||
| <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center"> | |||||
| <Typography ml={15} color='#FFF' variant="h4">System Setting</Typography> | |||||
| </Stack> | |||||
| </div> | |||||
| </Grid> | |||||
| {/*col 1*/} | |||||
| <Grid item xs={12} > | |||||
| <Grid container direction="row" sx={{ p: 2 }} spacing={2} > | |||||
| <Grid item xs={12} md={8} lg={8} > | |||||
| <Box xs={12} sx={{ borderRadius: '10px', backgroundColor: '#fff' }} > | |||||
| <Table | |||||
| searchCriteria={searchCriteria} | |||||
| onRowClick={onRowClick} | |||||
| /> | |||||
| </Box> | |||||
| </Grid> | |||||
| <Grid item xs={12} md={4} lg={4}> | |||||
| <Box xs={12} sx={{ borderRadius: '10px', backgroundColor: '#fff' }}> | |||||
| <Form | |||||
| selectedItem={selectedItem} | |||||
| onSave={onSave} | |||||
| /> | |||||
| </Box> | |||||
| </Grid> | </Grid> | ||||
| </Grid> | </Grid> | ||||
| {/*col 2*/} | |||||
| </> | |||||
| </Grid> | |||||
| </Grid> | |||||
| {/*col 2*/} | |||||
| </> | |||||
| </Grid> | |||||
| ); | ); | ||||
| }; | }; | ||||