init
This commit is contained in:
281
src/pages/ServiceManage/BattleEvent.js
Normal file
281
src/pages/ServiceManage/BattleEvent.js
Normal file
@@ -0,0 +1,281 @@
|
||||
import { useState, Fragment, useRef } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import 'react-datepicker/dist/react-datepicker.css';
|
||||
|
||||
import {
|
||||
BattleConfigView,
|
||||
BattleEventDelete,
|
||||
BattleEventDetailView,
|
||||
BattleEventView,
|
||||
BattleRewardView,
|
||||
} from '../../apis/Battle';
|
||||
|
||||
import { authList } from '../../store/authList';
|
||||
import {
|
||||
authType,
|
||||
modalTypes,
|
||||
landAuctionStatusType,
|
||||
landAuctionStatus,
|
||||
landSize,
|
||||
caliumStatus, commonStatus,
|
||||
} from '../../assets/data';
|
||||
import { Title, FormWrapper, TableStyle, TableWrapper} from '../../styles/Components';
|
||||
import {
|
||||
CheckBox,
|
||||
Button,
|
||||
DynamicModal,
|
||||
Pagination,
|
||||
ViewTableInfo, ExcelDownButton,
|
||||
} from '../../components/common';
|
||||
import { convertKTC, timeDiffMinute } from '../../utils';
|
||||
import { BattleEventModal, LandAuctionModal, LandAuctionSearchBar } from '../../components/ServiceManage';
|
||||
import { INITIAL_PAGE_SIZE, INITIAL_PAGE_LIMIT } from '../../assets/data/adminConstants';
|
||||
import { useDataFetch, useModal, useTable, withAuth } from '../../utils/hook';
|
||||
import { useLandAuctionSearch } from '../../components/ServiceManage/searchBar/LandAuctionSearchBar';
|
||||
import { StatusWapper, StatusLabel } from '../../styles/ModuleComponents';
|
||||
import { battleEventStatus, battleRepeatType } from '../../assets/data/options';
|
||||
import BattleEventSearchBar, {
|
||||
useBattleEventSearch,
|
||||
} from '../../components/ServiceManage/searchBar/BattleEventSearchBar';
|
||||
import { getTimeOnly } from '../../utils/date';
|
||||
|
||||
const BattleEvent = () => {
|
||||
const token = sessionStorage.getItem('token');
|
||||
const userInfo = useRecoilValue(authList);
|
||||
const { t } = useTranslation();
|
||||
const tableRef = useRef(null);
|
||||
|
||||
const [detailData, setDetailData] = useState({});
|
||||
|
||||
const {
|
||||
modalState,
|
||||
handleModalView,
|
||||
handleModalClose
|
||||
} = useModal({
|
||||
detail: 'hidden',
|
||||
deleteConfirm: 'hidden',
|
||||
deleteComplete: 'hidden'
|
||||
});
|
||||
const [alertMsg, setAlertMsg] = useState('');
|
||||
const [modalType, setModalType] = useState('regist');
|
||||
|
||||
const {
|
||||
searchParams,
|
||||
data: dataList,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePageChange,
|
||||
handlePageSizeChange,
|
||||
handleOrderByChange,
|
||||
updateSearchParams
|
||||
} = useBattleEventSearch(token, INITIAL_PAGE_SIZE);
|
||||
|
||||
const {
|
||||
selectedRows,
|
||||
handleSelectRow,
|
||||
isRowSelected
|
||||
} = useTable(dataList?.event_list || [], {mode: 'single'});
|
||||
|
||||
const {
|
||||
data: battleConfigData
|
||||
} = useDataFetch(() => BattleConfigView(token), [token]);
|
||||
|
||||
const {
|
||||
data: battleRewardData
|
||||
} = useDataFetch(() => BattleRewardView(token), [token]);
|
||||
|
||||
const handleModalSubmit = async (type, param = null) => {
|
||||
switch (type) {
|
||||
case "regist":
|
||||
setModalType('regist');
|
||||
handleModalView('detail');
|
||||
break;
|
||||
case "detail":
|
||||
await BattleEventDetailView(token, param).then(data => {
|
||||
setDetailData(data.event_detail);
|
||||
setModalType('modify');
|
||||
handleModalView('detail');
|
||||
});
|
||||
break;
|
||||
case "delete":
|
||||
const date_check = selectedRows.every(row => {
|
||||
const timeDiff = timeDiffMinute(convertKTC(row.auction_start_dt), (new Date));
|
||||
return timeDiff < 3;
|
||||
});
|
||||
if(date_check){
|
||||
setAlertMsg(t('LAND_AUCTION_DELETE_DATE_WARNING'));
|
||||
return;
|
||||
}
|
||||
if(selectedRows[0].status === landAuctionStatusType.auction_start || selectedRows[0].status === landAuctionStatusType.stl_end){
|
||||
setAlertMsg(t('LAND_AUCTION_DELETE_STATUS_WARNING'));
|
||||
return;
|
||||
}
|
||||
handleModalView('deleteConfirm');
|
||||
break;
|
||||
case "deleteConfirm":
|
||||
let list = [];
|
||||
let isChecked = false;
|
||||
|
||||
selectedRows.map(data => {
|
||||
// const row = dataList.list.find(row => row.id === Number(data.id));
|
||||
// if(row.status !== commonStatus.wait) isChecked = true;
|
||||
list.push({
|
||||
id: data.id,
|
||||
});
|
||||
});
|
||||
|
||||
if(isChecked) {
|
||||
setAlertMsg(t('LAND_AUCTION_WARNING_DELETE'))
|
||||
handleModalClose('deleteConfirm');
|
||||
return;
|
||||
}
|
||||
|
||||
await BattleEventDelete(token, list).then(data => {
|
||||
handleModalClose('deleteConfirm');
|
||||
if(data.result === "SUCCESS") {
|
||||
handleModalView('deleteComplete');
|
||||
}else if(data.result === "ERROR_AUCTION_STATUS_IMPOSSIBLE"){
|
||||
setAlertMsg(t('LAND_AUCTION_ERROR_DELETE_STATUS'));
|
||||
}else{
|
||||
setAlertMsg(t('DELETE_FAIL'));
|
||||
}
|
||||
}).catch(reason => {
|
||||
setAlertMsg(t('API_FAIL'));
|
||||
});
|
||||
|
||||
break;
|
||||
case "deleteComplete":
|
||||
handleModalClose('deleteComplete');
|
||||
// fetchData(option);
|
||||
window.location.reload();
|
||||
break;
|
||||
case "warning":
|
||||
setAlertMsg('')
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title>전투시스템 타임 스케줄러</Title>
|
||||
<FormWrapper>
|
||||
<BattleEventSearchBar
|
||||
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} handleOrderBy={handleOrderByChange} handlePageSize={handlePageSizeChange}>
|
||||
<ExcelDownButton tableRef={tableRef} fileName={t('FILE_BATTLE_EVENT')} />
|
||||
{userInfo.auth_list?.some(auth => auth.id === authType.battleEventDelete) && (
|
||||
<Button theme={selectedRows.length === 0 ? 'disable' : 'line'} text="이벤트 중단" handleClick={() => handleModalSubmit('delete')} />
|
||||
)}
|
||||
{userInfo.auth_list?.some(auth => auth.id === authType.battleEventUpdate) && (
|
||||
<Button
|
||||
theme="primary"
|
||||
text="이벤트 등록"
|
||||
type="button"
|
||||
handleClick={e => handleModalSubmit('regist')}
|
||||
/>
|
||||
)}
|
||||
</ViewTableInfo>
|
||||
<TableWrapper>
|
||||
<TableStyle ref={tableRef}>
|
||||
<caption></caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="40"></th>
|
||||
<th width="90">그룹</th>
|
||||
<th width="60">이벤트 ID</th>
|
||||
<th width="150">이벤트명</th>
|
||||
<th width="80">반복</th>
|
||||
<th width="120">이벤트 시작시간</th>
|
||||
<th width="120">이벤트 종료시간</th>
|
||||
<th width="90">이벤트 상태</th>
|
||||
<th width="90">라운드 시간</th>
|
||||
<th width="80">라운드 수</th>
|
||||
<th width="80">핫타임</th>
|
||||
<th width="200">기간 시작일</th>
|
||||
<th width="200">기간 종료일</th>
|
||||
<th width="100">확인 / 수정</th>
|
||||
<th width="150">히스토리</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{dataList?.event_list?.map(battle => (
|
||||
<tr key={battle.row_num}>
|
||||
<td>
|
||||
<CheckBox name={'select'} id={battle.id}
|
||||
setData={(e) => handleSelectRow(e, battle)}
|
||||
checked={isRowSelected(battle.id)} />
|
||||
</td>
|
||||
<td>{battle.group_id}</td>
|
||||
<td>{battle.id}</td>
|
||||
<td>{battle.event_name}</td>
|
||||
<StatusWapper>
|
||||
<StatusLabel $status={battle.repeat_type}>
|
||||
{battleRepeatType.find(data => data.value === battle.repeat_type).name}
|
||||
</StatusLabel>
|
||||
</StatusWapper>
|
||||
<td>{getTimeOnly(battle.event_start_dt)}</td>
|
||||
<td>{battle.end_time}</td>
|
||||
<StatusWapper>
|
||||
<StatusLabel $status={battle.status}>
|
||||
{battleEventStatus.find(data => data.value === battle.status).name}
|
||||
</StatusLabel>
|
||||
</StatusWapper>
|
||||
<td>{battle.round_time}</td>
|
||||
<td>{battle.round_count}</td>
|
||||
<td>{battle.hot_time}</td>
|
||||
<td>{convertKTC(battle.event_start_dt)}</td>
|
||||
<td>{convertKTC(battle.event_end_dt)}</td>
|
||||
<td>
|
||||
<Button theme="line" text="상세보기"
|
||||
handleClick={e => handleModalSubmit('detail', battle.id)} />
|
||||
</td>
|
||||
<td>{battle.update_by}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</TableStyle>
|
||||
</TableWrapper>
|
||||
|
||||
<Pagination postsPerPage={searchParams.pageSize} totalPosts={dataList?.total_all} setCurrentPage={handlePageChange} currentPage={searchParams.currentPage} pageLimit={INITIAL_PAGE_LIMIT} />
|
||||
|
||||
{/*상세*/}
|
||||
<BattleEventModal modalType={modalType} detailView={modalState.detailModal} handleDetailView={() => handleModalClose('detail')} content={detailData} setDetailData={setDetailData} configData={battleConfigData} rewardData={battleRewardData} />
|
||||
|
||||
{/*삭제 확인*/}
|
||||
<DynamicModal
|
||||
modalType={modalTypes.confirmOkCancel}
|
||||
view={modalState.deleteConfirmModal}
|
||||
handleCancel={() => handleModalClose('deleteConfirm')}
|
||||
handleSubmit={() => handleModalSubmit('deleteConfirm')}
|
||||
modalText={t('LAND_AUCTION_SELECT_DELETE')}
|
||||
/>
|
||||
{/*삭제 완료*/}
|
||||
<DynamicModal
|
||||
modalType={modalTypes.completed}
|
||||
view={modalState.deleteCompleteModal}
|
||||
handleSubmit={() => handleModalSubmit('deleteComplete')}
|
||||
modalText={t('DEL_COMPLETE')}
|
||||
/>
|
||||
{/* 경고 모달 */}
|
||||
<DynamicModal
|
||||
modalType={modalTypes.completed}
|
||||
view={alertMsg ? 'view' : 'hidden'}
|
||||
modalText={alertMsg}
|
||||
handleSubmit={() => handleModalSubmit('warning')}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
};
|
||||
|
||||
export default withAuth(authType.battleEventRead)(BattleEvent);
|
||||
Reference in New Issue
Block a user