랜드 소유권 변경
This commit is contained in:
350
src/components/ServiceManage/modal/OwnerChangeModal.js
Normal file
350
src/components/ServiceManage/modal/OwnerChangeModal.js
Normal file
@@ -0,0 +1,350 @@
|
||||
import React, { useState, Fragment, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import Button from '../../common/button/Button';
|
||||
import Loading from '../../common/Loading';
|
||||
|
||||
import {
|
||||
Title,
|
||||
BtnWrapper,
|
||||
SearchBarAlert, SelectInput,
|
||||
} from '../../../styles/Components';
|
||||
|
||||
import {
|
||||
FormInput,
|
||||
FormLabel,
|
||||
MessageWrapper,
|
||||
FormRowGroup,
|
||||
FormStatusBar,
|
||||
FormStatusLabel,
|
||||
FormStatusWarning,
|
||||
FormButtonContainer, FormGroup, FormItemGroup, SubText,
|
||||
} from '../../../styles/ModuleComponents';
|
||||
import { modalTypes } from '../../../assets/data';
|
||||
import { DynamicModal, Modal, SingleDatePicker, SingleTimePicker } from '../../common';
|
||||
import { NONE, TYPE_MODIFY, TYPE_REGISTRY } from '../../../assets/data/adminConstants';
|
||||
import { useModal } from '../../../utils/hook';
|
||||
import { convertKTCDate } from '../../../utils';
|
||||
import { BattleEventModify, BattleEventSingleRegist } from '../../../apis/Battle';
|
||||
import { battleEventStatusType } from '../../../assets/data/types';
|
||||
import { isValidDayRange } from '../../../utils/date';
|
||||
import CheckBox from '../../common/input/CheckBox';
|
||||
import { LandOwnedChangesRegist, UserInfoView } from '../../../apis';
|
||||
|
||||
const OwnerChangeModal = ({ modalType, detailView, handleDetailView, content, setDetailData }) => {
|
||||
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 [isNullValue, setIsNullValue] = useState(false); // 데이터 값 체크
|
||||
const [alertMsg, setAlertMsg] = useState('');
|
||||
|
||||
const [resultData, setResultData] = useState(initData); //데이터 정보
|
||||
|
||||
useEffect(() => {
|
||||
if(content && Object.keys(content).length > 0){
|
||||
setResultData({
|
||||
...resultData,
|
||||
land_id: content.land_id,
|
||||
land_name: content.land_name,
|
||||
building_id: content.building_id,
|
||||
building_name: content.building_name,
|
||||
});
|
||||
}
|
||||
}, [modalType, content]);
|
||||
|
||||
useEffect(() => {
|
||||
if (checkCondition()) {
|
||||
setIsNullValue(false);
|
||||
} else {
|
||||
setIsNullValue(true);
|
||||
}
|
||||
}, [resultData]);
|
||||
|
||||
// 날짜 변경 핸들러
|
||||
const handleStartDateChange = (date) => {
|
||||
if (!date) return;
|
||||
|
||||
const newDate = new Date(date);
|
||||
|
||||
setResultData(prev => ({
|
||||
...prev,
|
||||
reservation_dt: newDate
|
||||
}));
|
||||
};
|
||||
|
||||
// 시간 변경 핸들러
|
||||
const handleStartTimeChange = (time) => {
|
||||
if (!time) return;
|
||||
|
||||
const newDateTime = resultData.reservation_dt
|
||||
? new Date(resultData.reservation_dt)
|
||||
: new Date();
|
||||
|
||||
newDateTime.setHours(
|
||||
time.getHours(),
|
||||
time.getMinutes(),
|
||||
0,
|
||||
0
|
||||
);
|
||||
|
||||
setResultData(prev => ({
|
||||
...prev,
|
||||
reservation_dt: newDateTime
|
||||
}));
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setDetailData({});
|
||||
setResultData(initData);
|
||||
handleDetailView();
|
||||
}
|
||||
|
||||
const handleSubmit = async (type, param = null) => {
|
||||
switch (type) {
|
||||
case "submit":
|
||||
if (!checkCondition()) return;
|
||||
|
||||
|
||||
|
||||
handleModalView('registConfirm');
|
||||
break;
|
||||
case "cancel":
|
||||
handleModalView('cancel');
|
||||
break;
|
||||
case "cancelConfirm":
|
||||
handleModalClose('cancel');
|
||||
handleReset();
|
||||
break;
|
||||
case "user":
|
||||
const guid = resultData.user_guid;
|
||||
if(!guid || guid.length !== 32){
|
||||
setAlertMsg(t('WARNING_GUID_CHECK'))
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
await UserInfoView(token, guid).then(data => {
|
||||
setLoading(false);
|
||||
if(Object.keys(data).length === 0){
|
||||
setAlertMsg(t('WARNING_GUID_CHECK'));
|
||||
setResultData({ ...resultData, user_name: '' })
|
||||
return;
|
||||
}
|
||||
const nickname = data.char_info.character_name;
|
||||
setResultData({ ...resultData, user_name: nickname })
|
||||
}).catch(reason => {
|
||||
setAlertMsg(t('API_FAIL'));
|
||||
});
|
||||
break;
|
||||
case "registConfirm":
|
||||
setLoading(true);
|
||||
|
||||
await LandOwnedChangesRegist(token, resultData).then(data => {
|
||||
setLoading(false);
|
||||
handleModalClose('registConfirm');
|
||||
if(data.result === "SUCCESS") {
|
||||
handleModalView('registComplete');
|
||||
}else if(data.result === "GUID_CHECK"){
|
||||
setAlertMsg(t('WARNING_GUID_CHECK'));
|
||||
}else{
|
||||
setAlertMsg(t('REGIST_FAIL'));
|
||||
}
|
||||
}).catch(reason => {
|
||||
setAlertMsg(t('API_FAIL'));
|
||||
});
|
||||
break;
|
||||
case "registComplete":
|
||||
handleModalClose('registComplete');
|
||||
handleReset();
|
||||
window.location.reload();
|
||||
break;
|
||||
case "warning":
|
||||
setAlertMsg('');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const checkCondition = () => {
|
||||
return (
|
||||
resultData.land_id !== ''
|
||||
&& resultData.land_name !== ''
|
||||
&& resultData.user_guid !== ''
|
||||
&& resultData.user_name !== ''
|
||||
&& (!resultData.is_reserve || (resultData.is_reserve && resultData.reservation_dt !== ''))
|
||||
);
|
||||
};
|
||||
|
||||
const isView = (label) => {
|
||||
switch (label) {
|
||||
case "modify":
|
||||
return modalType === TYPE_MODIFY && (content?.status === battleEventStatusType.stop);
|
||||
case "start_dt":
|
||||
case "repeat":
|
||||
case "registry":
|
||||
return modalType === TYPE_REGISTRY
|
||||
case "end_dt":
|
||||
case "group":
|
||||
case "name":
|
||||
case "config":
|
||||
case "reward":
|
||||
case "round":
|
||||
case "hot":
|
||||
return modalType === TYPE_REGISTRY || (modalType === TYPE_MODIFY &&(content?.status === battleEventStatusType.stop));
|
||||
default:
|
||||
return modalType === TYPE_MODIFY && (content?.status !== battleEventStatusType.stop);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal min="760px" $view={detailView}>
|
||||
<Title $align="center">소유권 변경</Title>
|
||||
<MessageWrapper>
|
||||
<FormRowGroup>
|
||||
{/*<FormItemGroup>*/}
|
||||
{/* <CheckBox*/}
|
||||
{/* label="예약"*/}
|
||||
{/* id="reserve"*/}
|
||||
{/* checked={resultData.is_reserve}*/}
|
||||
{/* setData={e => setResultData({ ...resultData, is_reserve: e.target.checked, reservation_dt: new Date() })}*/}
|
||||
{/* />*/}
|
||||
{/*</FormItemGroup>*/}
|
||||
{resultData.is_reserve && (
|
||||
<>
|
||||
<SingleDatePicker
|
||||
label="발송시간"
|
||||
disabled={!isView('reservation_dt')}
|
||||
dateLabel="발송 일자"
|
||||
onDateChange={handleStartDateChange}
|
||||
selectedDate={resultData?.reservation_dt}
|
||||
/>
|
||||
<SingleTimePicker
|
||||
disabled={!isView('reservation_dt')}
|
||||
selectedTime={resultData?.reservation_dt}
|
||||
onTimeChange={handleStartTimeChange}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
</FormRowGroup>
|
||||
<FormRowGroup><SubText>* 예약 발송 미선택 시 등록과 함께 우편이 즉시 발송됩니다.</SubText></FormRowGroup>
|
||||
<FormRowGroup>
|
||||
<FormLabel>변경 랜드</FormLabel>
|
||||
<FormInput
|
||||
type="text"
|
||||
width='150px'
|
||||
value={resultData?.land_id}
|
||||
readOnly={true}
|
||||
/>
|
||||
<FormInput
|
||||
type="text"
|
||||
width='250px'
|
||||
value={resultData?.land_name}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormRowGroup>
|
||||
<FormRowGroup>
|
||||
<FormLabel>수신 대상</FormLabel>
|
||||
<FormInput
|
||||
type="text"
|
||||
placeholder="guid 입력"
|
||||
width='300px'
|
||||
value={resultData?.user_guid}
|
||||
onChange={e => setResultData({ ...resultData, user_guid: e.target.value })}
|
||||
/>
|
||||
<Button
|
||||
text="확인"
|
||||
theme="primary"
|
||||
type="submit"
|
||||
size="large"
|
||||
width="100px"
|
||||
handleClick={() => handleSubmit('user')}
|
||||
/>
|
||||
</FormRowGroup>
|
||||
<FormRowGroup>
|
||||
<FormLabel>캐릭터명</FormLabel>
|
||||
<FormInput
|
||||
type="text"
|
||||
width='300px'
|
||||
value={resultData?.user_name}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormRowGroup>
|
||||
{!isView() && isNullValue && <SearchBarAlert $marginTop="25px" $align="right">{t('REQUIRED_VALUE_CHECK')}</SearchBarAlert>}
|
||||
</MessageWrapper>
|
||||
|
||||
<BtnWrapper $gap="10px" $marginTop="10px" $marginBottom="20px">
|
||||
<FormButtonContainer $gap="10px">
|
||||
<>
|
||||
<Button text="취소" theme="line" handleClick={() => handleSubmit('cancel')} />
|
||||
<Button
|
||||
type="submit"
|
||||
text={isView('modify') ? "수정" : "등록"}
|
||||
name="등록버튼"
|
||||
theme={
|
||||
checkCondition()
|
||||
? 'primary'
|
||||
: 'disable'
|
||||
}
|
||||
handleClick={() => handleSubmit('submit')}
|
||||
/>
|
||||
</>
|
||||
</FormButtonContainer>
|
||||
</BtnWrapper>
|
||||
</Modal>
|
||||
|
||||
{/* 확인 모달 */}
|
||||
<DynamicModal
|
||||
modalType={modalTypes.confirmOkCancel}
|
||||
view={modalState.registConfirmModal}
|
||||
modalText={isView('modify') ? t('BATTLE_EVENT_UPDATE_CONFIRM') : t('BATTLE_EVENT_REGIST_CONFIRM')}
|
||||
handleSubmit={() => handleSubmit('registConfirm')}
|
||||
handleCancel={() => handleModalClose('registConfirm')}
|
||||
/>
|
||||
{/* 완료 모달 */}
|
||||
<DynamicModal
|
||||
modalType={modalTypes.completed}
|
||||
view={modalState.registCompleteModal}
|
||||
modalText={isView('modify') ? t('UPDATE_COMPLETED') : t('REGIST_COMPLTE')}
|
||||
handleSubmit={() => handleSubmit('registComplete')}
|
||||
/>
|
||||
{/* 취소 모달 */}
|
||||
<DynamicModal
|
||||
modalType={modalTypes.confirmOkCancel}
|
||||
view={modalState.cancelModal}
|
||||
modalText={t('CANCEL_CONFIRM')}
|
||||
handleCancel={() => handleModalClose('cancel')}
|
||||
handleSubmit={() => handleSubmit('cancelConfirm')}
|
||||
/>
|
||||
{/* 경고 모달 */}
|
||||
<DynamicModal
|
||||
modalType={modalTypes.completed}
|
||||
view={alertMsg ? 'view' : 'hidden'}
|
||||
modalText={alertMsg}
|
||||
handleSubmit={() => handleSubmit('warning')}
|
||||
/>
|
||||
{loading && <Loading/>}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const initData = {
|
||||
is_reserve: false,
|
||||
land_id: '',
|
||||
land_name: '',
|
||||
user_guid: '',
|
||||
user_name: '',
|
||||
reservation_dt: ''
|
||||
}
|
||||
|
||||
export default OwnerChangeModal;
|
||||
|
||||
Reference in New Issue
Block a user