LogView 리팩토링
LogDetailModal 생성 화면별 히스토리(LogDetailModal) 적용
This commit is contained in:
@@ -1,170 +1,106 @@
|
||||
import { Fragment, useState, useEffect } from 'react';
|
||||
import React, { Fragment, useCallback, useState } from 'react';
|
||||
|
||||
import {LogViewSearchBar} from '../../components/ServiceManage';
|
||||
import { Title, FormWrapper, SelectInput, TableInfo, ListCount, ListOption, TableStyle, BtnWrapper, ButtonClose, ModalText } from '../../styles/Components';
|
||||
import Button from '../../components/common/button/Button';
|
||||
import Pagination from '../../components/common/Pagination/Pagination';
|
||||
import Modal from '../../components/common/modal/Modal';
|
||||
|
||||
import LogViewModal from '../../components/UserManage/LogViewModal';
|
||||
|
||||
import { LogViewList } from '../../apis';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { authList } from '../../store/authList';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { logOption } from '../../assets/data';
|
||||
import { convertKTC } from '../../utils';
|
||||
import { CommonSearchBar } from '../../components/ServiceManage';
|
||||
import { Title, FormWrapper } from '../../styles/Components';
|
||||
import { authType } from '../../assets/data';
|
||||
import { useModal, withAuth } from '../../hooks/hook';
|
||||
import { CaliTable } from '../../components/common';
|
||||
import tableInfo from '../../assets/data/pages/historyTable.json';
|
||||
import useEnhancedCommonSearch from '../../hooks/useEnhancedCommonSearch';
|
||||
import FrontPagination from '../../components/common/Pagination/FrontPagination';
|
||||
import { INITIAL_CURRENT_PAGE, INITIAL_PAGE_LIMIT, INITIAL_PAGE_SIZE } from '../../assets/data/adminConstants';
|
||||
import LogDetailModal from '../../components/common/modal/LogDetailModal';
|
||||
|
||||
const LogView = () => {
|
||||
const navigate = useNavigate();
|
||||
const userInfo = useRecoilValue(authList);
|
||||
const [detailData, setDetailData] = useState({});
|
||||
const [currentPage, setCurrentPage] = useState(INITIAL_CURRENT_PAGE);
|
||||
const [displayData, setDisplayData] = useState([]);
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const {
|
||||
modalState,
|
||||
handleModalView,
|
||||
handleModalClose
|
||||
} = useModal({
|
||||
detail: 'hidden',
|
||||
});
|
||||
|
||||
const [stateModal, setStateModal] = useState('hidden');
|
||||
const [dataList, setDataList] = useState([]);
|
||||
const [detailData, setDetailData] = useState('');
|
||||
const [searchData, setSearchData] = useState({});
|
||||
const [orderBy, setOrderBy] = useState('DESC');
|
||||
const [pageSize, setPageSize] = useState('50');
|
||||
const {
|
||||
config,
|
||||
searchParams,
|
||||
data: dataList,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
updateSearchParams,
|
||||
loading
|
||||
} = useEnhancedCommonSearch("historySearch");
|
||||
|
||||
const handleButtonClick = content => {
|
||||
setStateModal('view');
|
||||
setDetailData(content);
|
||||
};
|
||||
const handleClientPageChange = useCallback((slicedData) => {
|
||||
setDisplayData(slicedData);
|
||||
}, []);
|
||||
|
||||
const handleModal = () => {
|
||||
if (stateModal === 'hidden') {
|
||||
setStateModal('view');
|
||||
} else {
|
||||
setStateModal('hidden');
|
||||
const handleAction = async (action, item = null) => {
|
||||
switch (action) {
|
||||
case "detail":
|
||||
handleModalView('detail');
|
||||
setDetailData(item.data);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleOrderBy = e => {
|
||||
const order = e.target.value;
|
||||
setOrderBy(order);
|
||||
fetchData(
|
||||
searchData.searchOption,
|
||||
searchData.data,
|
||||
searchData.logOption,
|
||||
searchData.startDate && new Date(searchData.startDate).toISOString(),
|
||||
searchData.endDate && new Date(searchData.endDate).toISOString(),
|
||||
order,
|
||||
pageSize,
|
||||
);
|
||||
};
|
||||
|
||||
const handlePageSize = e => {
|
||||
const size = e.target.value;
|
||||
setPageSize(size);
|
||||
setCurrentPage(1);
|
||||
fetchData(
|
||||
searchData.searchOption,
|
||||
searchData.data,
|
||||
searchData.logOption,
|
||||
searchData.startDate && new Date(searchData.startDate).toISOString(),
|
||||
searchData.endDate && new Date(searchData.endDate).toISOString(),
|
||||
orderBy,
|
||||
size,
|
||||
1,
|
||||
);
|
||||
};
|
||||
|
||||
const fetchData = async (searchType, searchKey, historyType, startDt, endDt, order, size) => {
|
||||
const token = sessionStorage.getItem('token');
|
||||
setDataList(await LogViewList(token, searchType, searchKey, historyType, startDt, endDt, order ? order : orderBy, size ? size : pageSize, currentPage));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchData(
|
||||
searchData.searchOption,
|
||||
searchData.data,
|
||||
searchData.logOption,
|
||||
searchData.startDate && new Date(searchData.startDate).toISOString(),
|
||||
searchData.endDate && new Date(searchData.endDate).toISOString(),
|
||||
orderBy,
|
||||
pageSize,
|
||||
);
|
||||
}, [currentPage]);
|
||||
|
||||
const handleSearch = (searchType, searchKey, historyType, startDt, endDt) => {
|
||||
fetchData(searchType, searchKey, historyType, startDt, endDt);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{userInfo.auth_list && !userInfo.auth_list.some(auth => auth.id === 5) ? (
|
||||
<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={'view'}>
|
||||
<BtnWrapper $justify="flex-end">
|
||||
<ButtonClose onClick={() => navigate(-1)} />
|
||||
</BtnWrapper>
|
||||
<ModalText $align="center">
|
||||
해당 메뉴에 대한 조회 권한이 없습니다.
|
||||
<br />
|
||||
권한 등급을 변경 후 다시 이용해주세요.
|
||||
</ModalText>
|
||||
<BtnWrapper $gap="10px">
|
||||
<Button text="확인" theme="primary" type="submit" size="large" width="100%" handleClick={() => navigate(-1)} />
|
||||
</BtnWrapper>
|
||||
</Modal>
|
||||
) : (
|
||||
<>
|
||||
<Title>사용 이력 조회</Title>
|
||||
<FormWrapper action="" $flow="row">
|
||||
<LogViewSearchBar handleSearch={handleSearch} resultData={setSearchData} />
|
||||
</FormWrapper>
|
||||
<TableInfo>
|
||||
<ListCount>
|
||||
총 : {dataList && dataList.total} 건 / {dataList && dataList.total_all} 건
|
||||
</ListCount>
|
||||
<ListOption>
|
||||
<SelectInput className="input-select" onChange={e => handleOrderBy(e)}>
|
||||
<option value="DESC">최신일자</option>
|
||||
<option value="ASC">오래된순</option>
|
||||
</SelectInput>
|
||||
<SelectInput className="input-select" onChange={e => handlePageSize(e)}>
|
||||
<option value="50">50개</option>
|
||||
<option value="100">100개</option>
|
||||
</SelectInput>
|
||||
</ListOption>
|
||||
</TableInfo>
|
||||
<TableStyle>
|
||||
<caption></caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="200">일시</th>
|
||||
<th width="200">이름</th>
|
||||
<th width="50%">ID</th>
|
||||
<th width="30%">사용 이력</th>
|
||||
{/* <th width="25%">상세 이력</th> */}
|
||||
<th width="150">상세 보기</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{dataList.list &&
|
||||
dataList.list.map((history, index) => (
|
||||
<Fragment key={index}>
|
||||
<tr>
|
||||
<td>{convertKTC(history.create_dt)}</td>
|
||||
<td>{history.name}</td>
|
||||
<td>{history.mail}</td>
|
||||
<td>{logOption.map(data => data.value === history.history_type && data.name)}</td>
|
||||
<td>
|
||||
<Button theme="line" text="JSON INFO" handleClick={() => handleButtonClick(history.content)} />
|
||||
</td>
|
||||
</tr>
|
||||
</Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</TableStyle>
|
||||
<Pagination postsPerPage={pageSize} totalPosts={dataList && dataList.total_all} setCurrentPage={setCurrentPage} currentPage={currentPage} pageLimit={10} />
|
||||
<Title>사용 이력 조회</Title>
|
||||
|
||||
{/* 조회조건 */}
|
||||
<FormWrapper>
|
||||
<CommonSearchBar
|
||||
config={config}
|
||||
searchParams={searchParams}
|
||||
onSearch={(newParams, executeSearch = true) => {
|
||||
if (executeSearch) {
|
||||
handleSearch(newParams);
|
||||
} else {
|
||||
updateSearchParams(newParams);
|
||||
}
|
||||
}}
|
||||
onReset={handleReset}
|
||||
/>
|
||||
</FormWrapper>
|
||||
|
||||
{/* 조회테이블 */}
|
||||
<CaliTable
|
||||
columns={tableInfo.columns}
|
||||
data={displayData}
|
||||
onAction={(action, item) => handleAction(action, item)}
|
||||
// refProp={tableRef}
|
||||
loading={loading}
|
||||
/>
|
||||
|
||||
{/* 페이징 */}
|
||||
{dataList?.list &&
|
||||
<FrontPagination
|
||||
data={dataList.list}
|
||||
itemsPerPage={INITIAL_PAGE_SIZE}
|
||||
currentPage={currentPage}
|
||||
setCurrentPage={setCurrentPage}
|
||||
pageLimit={INITIAL_PAGE_LIMIT}
|
||||
onPageChange={handleClientPageChange}
|
||||
/>}
|
||||
|
||||
{/* 상세 */}
|
||||
<LogDetailModal
|
||||
viewMode="data"
|
||||
detailView={modalState.detailModal}
|
||||
handleDetailView={() => handleModalClose('detail')}
|
||||
detailData={detailData}
|
||||
title="상세정보"
|
||||
/>
|
||||
|
||||
<LogViewModal stateModal={stateModal} handleModal={handleModal} data={detailData} />
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LogView;
|
||||
export default withAuth(authType.adminLogSearchRead)(LogView);
|
||||
|
||||
Reference in New Issue
Block a user