event > rewardEvent 변경
월드이벤트(event) 추가
This commit is contained in:
311
src/components/modal/EventModal.js
Normal file
311
src/components/modal/EventModal.js
Normal file
@@ -0,0 +1,311 @@
|
||||
import React, { useState, Fragment, useEffect, useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import Button from '../common/button/Button';
|
||||
|
||||
import {
|
||||
Title,
|
||||
BtnWrapper,
|
||||
SearchBarAlert,
|
||||
} from '../../styles/Components';
|
||||
|
||||
import {
|
||||
FormStatusBar,
|
||||
FormStatusLabel,
|
||||
FormStatusWarning,
|
||||
FormButtonContainer,
|
||||
} from '../../styles/ModuleComponents';
|
||||
import { DetailLayout, Modal} from '../common';
|
||||
import { TYPE_MODIFY, TYPE_REGISTRY } from '../../assets/data/adminConstants';
|
||||
import { convertKTCDate } from '../../utils';
|
||||
import {
|
||||
opCommonStatus,
|
||||
} from '../../assets/data/options';
|
||||
import { alertTypes, commonStatus } from '../../assets/data/types';
|
||||
import { useAlert } from '../../context/AlertProvider';
|
||||
import { useLoading } from '../../context/LoadingProvider';
|
||||
import { EventModify, EventSingleRegist } from '../../apis';
|
||||
|
||||
const EventModal = ({ modalType, detailView, handleDetailView, content, setDetailData, eventActionData }) => {
|
||||
const { t } = useTranslation();
|
||||
const token = sessionStorage.getItem('token');
|
||||
const { showToast, showModal } = useAlert();
|
||||
const {withLoading} = useLoading();
|
||||
|
||||
const [isNullValue, setIsNullValue] = useState(false);
|
||||
const [resultData, setResultData] = useState(initData);
|
||||
|
||||
useEffect(() => {
|
||||
if(modalType === TYPE_MODIFY && content && Object.keys(content).length > 0){
|
||||
setResultData({
|
||||
id: content.id,
|
||||
title: content.title,
|
||||
global_event_action_id: content.global_event_action_id,
|
||||
personal_event_action_id: content.personal_event_action_id,
|
||||
status: content.status,
|
||||
max_point: content.max_point,
|
||||
start_dt: convertKTCDate(content.start_dt),
|
||||
end_dt: convertKTCDate(content.end_dt)
|
||||
});
|
||||
}
|
||||
}, [modalType, content]);
|
||||
|
||||
useEffect(() => {
|
||||
if (checkCondition()) {
|
||||
setIsNullValue(false);
|
||||
} else {
|
||||
setIsNullValue(true);
|
||||
}
|
||||
}, [resultData]);
|
||||
|
||||
const opEventActionMode = useMemo(() => {
|
||||
return eventActionData?.map(item => ({
|
||||
value: item.id,
|
||||
name: `${item.description}(${item.id})`
|
||||
})) || [];
|
||||
}, [eventActionData]);
|
||||
|
||||
const handleReset = () => {
|
||||
setDetailData({});
|
||||
setResultData(initData);
|
||||
handleDetailView();
|
||||
}
|
||||
|
||||
const handleSubmit = async (type, param = null) => {
|
||||
switch (type) {
|
||||
case "submit":
|
||||
if (!checkCondition()) return;
|
||||
|
||||
const minAllowedTime = new Date(new Date().getTime() + 10 * 60000);
|
||||
const startDt = resultData.start_dt;
|
||||
const endDt = resultData.end_dt;
|
||||
// if (modalType === TYPE_REGISTRY && startDt < minAllowedTime) {
|
||||
// showToast('BATTLE_EVENT_MODAL_START_DT_WARNING', {type: alertTypes.warning});
|
||||
// return;
|
||||
// }
|
||||
// if(resultData.repeat_type !== 'NONE' && !isValidDayRange(startDt, endDt)) {
|
||||
// showToast('BATTLE_EVENT_MODAL_START_DT_WARNING', {type: alertTypes.warning});
|
||||
// return;
|
||||
// }
|
||||
//
|
||||
// //화면에 머물면서 상태는 안바꼈을 경우가 있기에 시작시간 지났을경우 차단
|
||||
// if (modalType === TYPE_REGISTRY && startDt < new Date()) {
|
||||
// showToast('BATTLE_EVENT_MODAL_START_DT_WARNING', {type: alertTypes.warning});
|
||||
// return;
|
||||
// }
|
||||
|
||||
showModal(isView('modify') ? 'BATTLE_EVENT_UPDATE_CONFIRM' : 'BATTLE_EVENT_REGIST_CONFIRM', {
|
||||
type: alertTypes.confirm,
|
||||
onConfirm: () => handleSubmit('registConfirm')
|
||||
});
|
||||
|
||||
break;
|
||||
case "registConfirm":
|
||||
|
||||
const params = {
|
||||
...resultData
|
||||
};
|
||||
|
||||
if(isView('modify')){
|
||||
await withLoading( async () => {
|
||||
return await EventModify(token, content?.id, params);
|
||||
}).then(data => {
|
||||
if(data.result === "SUCCESS") {
|
||||
showToast('UPDATE_COMPLETED', {type: alertTypes.success});
|
||||
}else{
|
||||
showToast('UPDATE_FAIL', {type: alertTypes.error});
|
||||
}
|
||||
}).catch(reason => {
|
||||
showToast('API_FAIL', {type: alertTypes.error});
|
||||
}).finally(() => {
|
||||
handleReset();
|
||||
});
|
||||
}
|
||||
else{
|
||||
await withLoading( async () => {
|
||||
return await EventSingleRegist(token, params);
|
||||
}).then(data => {
|
||||
if(data.result === "SUCCESS") {
|
||||
showToast('REGIST_COMPLTE', {type: alertTypes.success});
|
||||
}else{
|
||||
showToast('REGIST_FAIL', {type: alertTypes.error});
|
||||
}
|
||||
}).catch(reason => {
|
||||
showToast('API_FAIL', {type: alertTypes.error});
|
||||
}).finally(() => {
|
||||
handleReset();
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const checkCondition = () => {
|
||||
return (
|
||||
resultData.start_dt !== ''
|
||||
&& resultData.end_dt !== ''
|
||||
&& resultData.title !== ''
|
||||
&& resultData.global_event_action_id > 0
|
||||
&& resultData.personal_event_action_id > 0
|
||||
);
|
||||
};
|
||||
|
||||
const isView = (label) => {
|
||||
switch (label) {
|
||||
case "modify":
|
||||
return modalType === TYPE_MODIFY && (content?.status === commonStatus.wait);
|
||||
case "registry":
|
||||
case "mode":
|
||||
return modalType === TYPE_REGISTRY
|
||||
case "start_dt":
|
||||
case "end_dt":
|
||||
case "max_point":
|
||||
case "name":
|
||||
return modalType === TYPE_REGISTRY || (modalType === TYPE_MODIFY &&(content?.status === commonStatus.wait));
|
||||
default:
|
||||
return modalType === TYPE_MODIFY && (content?.status !== commonStatus.wait);
|
||||
}
|
||||
}
|
||||
|
||||
const itemGroups = [
|
||||
{
|
||||
items: [
|
||||
{
|
||||
row: 0,
|
||||
col: 0,
|
||||
colSpan: 2,
|
||||
type: 'text',
|
||||
key: 'title',
|
||||
label: '이벤트명',
|
||||
disabled: !isView('name'),
|
||||
width: '300px',
|
||||
},
|
||||
{
|
||||
row: 1,
|
||||
col: 0,
|
||||
colSpan: 2,
|
||||
type: 'date',
|
||||
key: 'start_dt',
|
||||
label: '시작일시',
|
||||
disabled: !isView('start_dt'),
|
||||
format: 'YYYY-MM-DD HH:mm',
|
||||
width: '200px',
|
||||
showTime: true
|
||||
},
|
||||
{
|
||||
row: 1,
|
||||
col: 2,
|
||||
colSpan: 2,
|
||||
type: 'date',
|
||||
key: 'end_dt',
|
||||
label: '종료일시',
|
||||
disabled: !isView('end_dt'),
|
||||
format: 'YYYY-MM-DD HH:mm',
|
||||
width: '200px',
|
||||
showTime: true
|
||||
},
|
||||
{
|
||||
row: 4,
|
||||
col: 0,
|
||||
colSpan: 2,
|
||||
type: 'select',
|
||||
key: 'global_event_action_id',
|
||||
label: '기여도 이벤트 모드',
|
||||
disabled: !isView('mode'),
|
||||
width: '150px',
|
||||
options: opEventActionMode
|
||||
},
|
||||
{
|
||||
row: 4,
|
||||
col: 2,
|
||||
colSpan: 2,
|
||||
type: 'number',
|
||||
key: 'max_point',
|
||||
label: '기여도 목표점수',
|
||||
disabled: !isView('max_point'),
|
||||
width: '150px'
|
||||
},
|
||||
{
|
||||
row: 5,
|
||||
col: 0,
|
||||
colSpan: 2,
|
||||
type: 'select',
|
||||
key: 'personal_event_action_id',
|
||||
label: '개인제작 이벤트 모드',
|
||||
disabled: !isView('mode'),
|
||||
width: '150px',
|
||||
options: opEventActionMode
|
||||
},
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal min="760px" $view={detailView}>
|
||||
<Title $align="center">{isView('registry') ? "통합 이벤트 등록" : isView('modify') ? "통합 이벤트 수정" : "통합 이벤트 상세"}</Title>
|
||||
<DetailLayout
|
||||
itemGroups={itemGroups}
|
||||
formData={resultData}
|
||||
onChange={setResultData}
|
||||
disabled={false}
|
||||
columnCount={4}
|
||||
/>
|
||||
{!isView() && isNullValue && <SearchBarAlert $marginTop="25px" $align="right">{t('REQUIRED_VALUE_CHECK')}</SearchBarAlert>}
|
||||
<BtnWrapper $gap="10px" $marginTop="10px">
|
||||
<FormStatusBar>
|
||||
<FormStatusLabel>
|
||||
현재상태: {opCommonStatus.find(data => data.value === content?.status)?.name || "등록"}
|
||||
</FormStatusLabel>
|
||||
<FormStatusWarning>
|
||||
{isView('registry') ? '' : t('EVENT_MODAL_STATUS_WARNING')}
|
||||
</FormStatusWarning>
|
||||
</FormStatusBar>
|
||||
<FormButtonContainer $gap="5px">
|
||||
{isView() ?
|
||||
<Button
|
||||
text="확인"
|
||||
name="확인버튼"
|
||||
theme="line"
|
||||
handleClick={() => handleReset()}
|
||||
/>
|
||||
:
|
||||
<>
|
||||
<Button
|
||||
text="취소"
|
||||
theme="line"
|
||||
handleClick={() => showModal('CANCEL_CONFIRM', {
|
||||
type: alertTypes.confirm,
|
||||
onConfirm: () => handleReset()
|
||||
})}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
text={isView('modify') ? "수정" : "등록"}
|
||||
name="등록버튼"
|
||||
theme={
|
||||
checkCondition()
|
||||
? 'primary'
|
||||
: 'disable'
|
||||
}
|
||||
handleClick={() => handleSubmit('submit')}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
</FormButtonContainer>
|
||||
</BtnWrapper>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const initData = {
|
||||
title: '',
|
||||
start_dt: '',
|
||||
end_dt: '',
|
||||
global_event_action_id: '',
|
||||
personal_event_action_id: '',
|
||||
max_point: 0
|
||||
}
|
||||
|
||||
export default EventModal;
|
||||
|
||||
Reference in New Issue
Block a user