operationSystem-front/src/pages/UserManage/CaliumRequest.js

import React, { useState, Fragment, useRef } from 'react';
import { useRecoilValue } from 'recoil';
import { useTranslation } from 'react-i18next';
import 'react-datepicker/dist/react-datepicker.css';

import { AnimatedPageWrapper } from '../../components/common/Layout'
import { authList } from '../../store/authList';
import {
	authType,
	commonStatus,
	ViewTitleCountType,
	caliumStatus
} from '../../assets/data';
import { Title, FormWrapper, TableStyle, TableWrapper, PopupMessage } from '../../styles/Components';
import {
	StatusWapper,
	ChargeBtn,
	StatusLabel,
} from '../../styles/ModuleComponents';
import {Button, ExcelDownButton, Pagination, ViewTableInfo} from '../../components/common';
import { convertKTC, truncateText } from '../../utils';
import { CaliumRequestRegistModal } from '../../components/UserManage';
import { CaliumCharge, LogHistory } from '../../apis';
import { useModal, withAuth } from '../../hooks/hook';
import { CommonSearchBar } from '../../components/ServiceManage';
import {
	INITIAL_PAGE_LIMIT,
	LOG_ACTION_FAIL_CALIUM_ECHO,
	STORAGE_BUSINESS_LOG_SEARCH,
} from '../../assets/data/adminConstants';
import { useAlert } from '../../context/AlertProvider';
import { useLoading } from '../../context/LoadingProvider';
import { alertTypes } from '../../assets/data/types';
import useCommonSearchOld from '../../hooks/useCommonSearchOld';
import LogDetailModal from '../../components/common/modal/LogDetailModal';
import { historyTables } from '../../assets/data/data';
import { useNavigate } from 'react-router-dom';

const CaliumRequest = () => {
	const token = sessionStorage.getItem('token');
	const userInfo = useRecoilValue(authList);
	const { t } = useTranslation();
	const { showModal, showToast } = useAlert();
	const {withLoading} = useLoading();
	const navigate = useNavigate();

	const tableRef = useRef(null);
	const [historyData, setHistoryData] = useState({});

	const {
		modalState,
		handleModalView,
		handleModalClose
	} = useModal({
		register: 'hidden',
		history: 'hidden'
	});

	const {
		config,
		searchParams,
		data: dataList,
		handleSearch,
		handleReset,
		handlePageChange,
		handlePageSizeChange,
		handleOrderByChange,
		updateSearchParams,
		configLoaded
	} = useCommonSearchOld("caliumRequestSearch");

	const handleSubmit = async (type, param = null) => {
		switch (type) {
			case "history":
				const params = {};
				params.db_type = "MYSQL"
				params.sql_id = param.id;
				params.table_name = historyTables.caliumRequest

				await LogHistory(token, params).then(data => {
					setHistoryData(data);
					handleModalView('history');
				});
				break;
			case "detail":
				showModal(param, {
					type: alertTypes.info
				});
				break;
			case "chargedConfirm":
				const select = {id: param.id, count: param.count};
				showModal('CALIUM_CHARGE_CONFIRM', {
					type: alertTypes.confirm,
					onConfirm: () => handleSubmit('charged', select)
				});
				break;
			case "charged":
				await withLoading( async () => {
					return await CaliumCharge(token, param);
				}).then(data => {
					if(data.result === "SUCCESS") {
						showToast('CHARGE_COMPLTED', {type: alertTypes.success});
					}else if(data.result === "ERROR_CALIUM_FINISH") {
						showToast('CHARGE_FINISH_FAIL', {type: alertTypes.error});
					}else{
						showToast('CHARGE_FAIL', {type: alertTypes.error});
					}
				}).catch(error => {
					showToast('API_FAIL', {type: alertTypes.error});
				}).finally(() =>{
					handleSearch(updateSearchParams);
				});
				break;
			case "logMove":
				const searchParams = {
					action: LOG_ACTION_FAIL_CALIUM_ECHO,
					start_dt: (() => {
						const date = new Date();
						date.setDate(date.getDate() - 1);
						return date;
					})(),
					end_dt: (() => {
						const date = new Date();
						date.setDate(date.getDate() - 1);
						return date;
					})(),
				};

				// 복사한 데이터를 세션 스토리지에 저장
				sessionStorage.setItem(STORAGE_BUSINESS_LOG_SEARCH, JSON.stringify(searchParams));
				navigate('/datamanage/businesslogview');
				break;
		}
	}

	return (
		<AnimatedPageWrapper>
			<Title>칼리움 사용 수량 요청</Title>
			<FormWrapper>
				<CommonSearchBar
					config={config}
					searchParams={searchParams}
					onSearch={(newParams, executeSearch = true) => {
						if (executeSearch) {
							handleSearch(newParams);
						} else {
							updateSearchParams(newParams);
						}
					}}
					onReset={handleReset}
				/>
			</FormWrapper>
			<ViewTableInfo
				total={dataList?.total}
				total_all={dataList?.total_all}
				fail_count={dataList?.failCount}
				handleOrderBy={handleOrderByChange}
				handlePageSize={handlePageSizeChange}
				countType={ViewTitleCountType.calium}
				onFailCountClick={() => handleSubmit('logMove')}
			>
				<ExcelDownButton tableRef={tableRef} fileName={t('FILE_CALIUM_REQUEST')} />
				{userInfo.auth_list && userInfo.auth_list.some(auth => auth.id === authType.eventUpdate) && (
					<Button
						theme="primary"
						text="요청 등록"
						type="button"
						handleClick={e => {
							e.preventDefault();
							handleModalView('register');
						}}
					/>
				)}
			</ViewTableInfo>
			<TableWrapper>
				<TableStyle ref={tableRef}>
					<caption></caption>
					<thead>
					<tr>
						{/*<th width="80">번호</th>*/}
						<th width="210">요청 일시</th>
						<th width="140">요청 부서</th>
						<th width="100">요청자</th>
						<th>요청 사유</th>
						<th width="80">요청수량</th>
						<th width="160">진행상태</th>
						<th width="210">최종 처리일시</th>
						<th width="200">히스토리</th>
					</tr>
					</thead>
					<tbody>
						{dataList?.list?.map(calium => (
								<Fragment key={calium.row_num}>
									<tr>
										{/*<td>{calium.row_num}</td>*/}
										<td>{convertKTC(calium.create_dt)}</td>
										<td>{calium.dept}</td>
										<td>{calium.create_by}</td>
										<td>
											<PopupMessage onClick={e => handleSubmit('detail', calium.content)}>
												{truncateText(calium.content)}
											</PopupMessage>
										</td>
										<td>{calium.count}</td>
										<StatusWapper>
											<StatusLabel
												$status={calium.status}>{caliumStatus.map(data => data.value === calium.status && data.name)}</StatusLabel>
											{calium.status === commonStatus.complete && userInfo.auth_list?.some(auth => auth.id === authType.eventUpdate) && calium.create_by === userInfo.name &&
												<ChargeBtn onClick={() => handleSubmit('chargedConfirm', {
													id: calium.id,
													count: calium.count,
												})}>충전</ChargeBtn>
											}
										</StatusWapper>
										<td>{convertKTC(calium.state_time)}</td>
										<td><Button theme="line" text="히스토리"
													handleClick={e => handleSubmit('history', calium)} />
										</td>
									</tr>
								</Fragment>
						))}
					</tbody>
				</TableStyle>
			</TableWrapper>

			<Pagination
				postsPerPage={searchParams.pageSize}
				totalPosts={dataList?.total_all}
				setCurrentPage={handlePageChange}
				currentPage={searchParams.currentPage}
				pageLimit={INITIAL_PAGE_LIMIT}
			/>

			<CaliumRequestRegistModal
				registView={modalState.registerModal}
				setRegistView={() => {
					handleModalClose('register');
					handleSearch(updateSearchParams);
				}}
				userInfo={userInfo}
			/>

			<LogDetailModal
				viewMode="changed"
				detailView={modalState.historyModal}
				handleDetailView={() => handleModalClose('history')}
				changedData={historyData}
				title="히스토리"
			/>

		</AnimatedPageWrapper>
	);
};

export default withAuth(authType.caliumRequestRead)(CaliumRequest);