데이터 초기화 화면 추가
This commit is contained in:
257
src/pages/UserManage/DataInitView.js
Normal file
257
src/pages/UserManage/DataInitView.js
Normal file
@@ -0,0 +1,257 @@
|
||||
import React, { useState, Fragment, useMemo } from 'react';
|
||||
import Button from '../../components/common/button/Button';
|
||||
import Loading from '../../components/common/Loading';
|
||||
|
||||
import {
|
||||
Title,
|
||||
SelectInput,
|
||||
TableStyle,
|
||||
TableWrapper,
|
||||
TableActionButton,
|
||||
TableDetailRow,
|
||||
TableDetailContainer,
|
||||
TableDetailFlex,
|
||||
TableDetailColumn,
|
||||
DetailTableInfo,
|
||||
} from '../../styles/Components';
|
||||
|
||||
import { modalTypes } from '../../assets/data';
|
||||
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
FormLabel,
|
||||
FormRowGroup, MessageWrapper,
|
||||
} from '../../styles/ModuleComponents';
|
||||
import { authType } from '../../assets/data';
|
||||
import { useModal, withAuth } from '../../utils/hook';
|
||||
import { DynamicModal, TopButton } from '../../components/common';
|
||||
import { opInitDataType, opSuccessType } from '../../assets/data/options';
|
||||
import { InitData } from '../../apis/Data';
|
||||
import DataInitSearchBar, { useDataInitSearch } from '../../components/ServiceManage/searchBar/DataInitSearchBar';
|
||||
|
||||
const DataInitView = () => {
|
||||
const { t } = useTranslation();
|
||||
const token = sessionStorage.getItem('token');
|
||||
|
||||
const [loading, setLoading] = useState(false); // 로딩 창
|
||||
const {
|
||||
modalState,
|
||||
handleModalView,
|
||||
handleModalClose
|
||||
} = useModal({
|
||||
cancel: 'hidden',
|
||||
registConfirm: 'hidden',
|
||||
registComplete: 'hidden'
|
||||
});
|
||||
|
||||
const [alertMsg, setAlertMsg] = useState('');
|
||||
|
||||
const [resultData, setResultData] = useState(initData); //데이터 정보
|
||||
const [expandedRows, setExpandedRows] = useState({});
|
||||
|
||||
const {
|
||||
searchParams,
|
||||
loading: dataLoading,
|
||||
data: dataList,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
updateSearchParams
|
||||
} = useDataInitSearch(token, 500, setAlertMsg);
|
||||
|
||||
const toggleRowExpand = (index) => {
|
||||
setExpandedRows(prev => ({
|
||||
...prev,
|
||||
[index]: !prev[index]
|
||||
}));
|
||||
};
|
||||
|
||||
const tableHeaders = useMemo(() => {
|
||||
return [
|
||||
{ id: 'logTime', label: '일시', width: '100px' },
|
||||
{ id: 'key', label: '키', width: '150px' },
|
||||
{ id: 'dataType', label: '초기화대상', width: '80px' },
|
||||
{ id: 'tranId', label: '트랜잭션ID', width: '150px' },
|
||||
{ id: 'success', label: '성공여부', width: '60px' },
|
||||
{ id: 'message', label: '작업메시지', width: '300px' },
|
||||
{ id: 'details', label: '상세정보', width: '100px' },
|
||||
// { id: 'recovery', label: '복구', width: '100px' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
const renderDetailData = (data) => {
|
||||
if (!data || typeof data !== 'object') return <></>;
|
||||
|
||||
return (
|
||||
<DetailTableInfo>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colSpan="2">정보</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{Object.entries(data).map(([key, value]) => (
|
||||
<tr key={`${key}`}>
|
||||
<td>{key}</td>
|
||||
<td>
|
||||
{typeof value === 'object' && value !== null
|
||||
? JSON.stringify(value)
|
||||
: String(value)
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</DetailTableInfo>
|
||||
);
|
||||
};
|
||||
|
||||
const handleSubmit = async (type, param = null) => {
|
||||
switch (type) {
|
||||
case "submit":
|
||||
handleModalView('registConfirm');
|
||||
break;
|
||||
case "registConfirm":
|
||||
setLoading(true);
|
||||
|
||||
await InitData(token, resultData).then(data => {
|
||||
setLoading(false);
|
||||
handleModalClose('registConfirm');
|
||||
if(data.result === "SUCCESS") {
|
||||
handleModalView('registComplete');
|
||||
}else{
|
||||
setAlertMsg(t('REGIST_FAIL'));
|
||||
}
|
||||
}).catch(reason => {
|
||||
setLoading(false);
|
||||
handleModalClose('registConfirm');
|
||||
setAlertMsg(t('API_FAIL'));
|
||||
});
|
||||
|
||||
break;
|
||||
case "registComplete":
|
||||
dataReset();
|
||||
handleModalClose('registComplete');
|
||||
break;
|
||||
case "warning":
|
||||
setAlertMsg('');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const dataReset = () => {
|
||||
setResultData(initData);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title>데이터 초기화</Title>
|
||||
<MessageWrapper>
|
||||
<FormRowGroup>
|
||||
<FormLabel>초기화 대상</FormLabel>
|
||||
<SelectInput value={resultData?.init_data_type} onChange={e => setResultData({ ...resultData, init_data_type: e.target.value })} width="150px">
|
||||
{opInitDataType.map((data, index) => (
|
||||
<option key={index} value={data.value}>
|
||||
{data.name}
|
||||
</option>
|
||||
))}
|
||||
</SelectInput>
|
||||
<Button
|
||||
text="초기화"
|
||||
theme={'primary'}
|
||||
type="submit"
|
||||
size="large"
|
||||
width="100px"
|
||||
handleClick={() => handleSubmit('submit')}
|
||||
/>
|
||||
</FormRowGroup>
|
||||
</MessageWrapper>
|
||||
<MessageWrapper>
|
||||
<DataInitSearchBar
|
||||
searchParams={searchParams}
|
||||
onSearch={(newParams, executeSearch = true) => {
|
||||
if (executeSearch) {
|
||||
handleSearch(newParams);
|
||||
} else {
|
||||
updateSearchParams(newParams);
|
||||
}
|
||||
}}
|
||||
onReset={handleReset}
|
||||
/>
|
||||
</MessageWrapper>
|
||||
<TableWrapper>
|
||||
<TableStyle>
|
||||
<thead>
|
||||
<tr>
|
||||
{tableHeaders.map(header => (
|
||||
<th key={header.id} width={header.width}>{header.label}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{dataList?.init_list?.map((item, index) => (
|
||||
<Fragment key={index}>
|
||||
<tr>
|
||||
<td>{item.timestamp}</td>
|
||||
<td>{item.key}</td>
|
||||
<td>{opInitDataType.find(type => type.value === item.initDataType)?.name}</td>
|
||||
<td>{item.tranId}</td>
|
||||
<td>{opSuccessType.find(type => type.value === item.success)?.name}</td>
|
||||
<td>{item.message}</td>
|
||||
<td>
|
||||
<TableActionButton onClick={() => toggleRowExpand(index)}>
|
||||
{expandedRows[index] ? '접기' : '상세보기'}
|
||||
</TableActionButton>
|
||||
</td>
|
||||
</tr>
|
||||
{expandedRows[index] && (
|
||||
<TableDetailRow>
|
||||
<td colSpan={tableHeaders.length}>
|
||||
<TableDetailContainer>
|
||||
<TableDetailFlex>
|
||||
<TableDetailColumn>
|
||||
{renderDetailData(item.data)}
|
||||
</TableDetailColumn>
|
||||
</TableDetailFlex>
|
||||
</TableDetailContainer>
|
||||
</td>
|
||||
</TableDetailRow>
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</TableStyle>
|
||||
</TableWrapper>
|
||||
|
||||
{/* 확인 모달 */}
|
||||
<DynamicModal
|
||||
modalType={modalTypes.confirmOkCancel}
|
||||
view={modalState.registConfirmModal}
|
||||
modalText={t('DATA_INIT_CONFIRM',{data:opInitDataType.find(type => type.value === resultData.init_data_type).name})}
|
||||
handleSubmit={() => handleSubmit('registConfirm')}
|
||||
handleCancel={() => handleModalClose('registConfirm')}
|
||||
/>
|
||||
{/* 완료 모달 */}
|
||||
<DynamicModal
|
||||
modalType={modalTypes.completed}
|
||||
view={modalState.registCompleteModal}
|
||||
modalText={t('INIT_COMPLTE')}
|
||||
handleSubmit={() => handleSubmit('registComplete')}
|
||||
/>
|
||||
{/* 경고 모달 */}
|
||||
<DynamicModal
|
||||
modalType={modalTypes.completed}
|
||||
view={alertMsg ? 'view' : 'hidden'}
|
||||
modalText={alertMsg}
|
||||
handleSubmit={() => setAlertMsg('')}
|
||||
/>
|
||||
{loading && <Loading/>}
|
||||
<TopButton />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default withAuth(authType.levelMaster)(DataInitView);
|
||||
|
||||
const initData = {
|
||||
init_data_type: 'None'
|
||||
}
|
||||
Reference in New Issue
Block a user