Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | import { usePatchFestivalNfcMutation } from '@lib/api/mutations';
import { useGetFestivalNfcQuery } from '@lib/api/queries';
import { ManageCreateOrUpdateNFCRegistryDto } from '@uniquegood/realworld-adventure-interface';
import { Form, Input, InputNumber, Modal, ModalProps, message } from 'antd';
import React from 'react';
import GoogleMapComponent from '@lib/components/GoogleMap';
interface ModifyFestivalNfcModalProps {
modalData: ModalProps;
closeModal: () => unknown;
festivalId: string;
nfcRegistryId: string;
}
export default function ModifyFestivalNfcModal({
modalData,
closeModal,
festivalId,
nfcRegistryId
}: ModifyFestivalNfcModalProps) {
const [form] = Form.useForm();
const { data: nfc } = useGetFestivalNfcQuery(festivalId, nfcRegistryId);
const { mutateAsync: patchNfc } = usePatchFestivalNfcMutation(festivalId, nfcRegistryId);
const handleSubmit = async (values: ManageCreateOrUpdateNFCRegistryDto) => {
const { success } = await patchNfc(values);
if (success) {
message.success('NFC를 생성했습니다.');
closeModal();
} else {
message.error('NFC 생성에 실패했습니다.');
}
};
const setInitialValue = () => {
form.setFieldsValue(nfc?.data);
};
React.useEffect(() => {
setInitialValue();
}, [nfc]);
return (
<Modal
{...modalData}
title="NFC 수정"
onOk={form.submit}
okText="확인"
cancelText="닫기"
afterClose={setInitialValue}
>
<Form
form={form}
onFinish={handleSubmit}
labelCol={{ span: 24 }}
wrapperCol={{ span: 24 }}
// eslint-disable-next-line no-template-curly-in-string
validateMessages={{ required: '${label}은(는) 필수로 입력해주세요.' }}
>
<Form.Item name="nfcId" label="고유 ID" rules={[{ required: true }]}>
<Input placeholder="NFC 고유 ID를 입력해주세요." />
</Form.Item>
<Form.Item name="description" label="설명">
<Input placeholder="설명을 입력해주세요." />
</Form.Item>
<Form.Item name="position" label="위치" rules={[{ required: true }]}>
<GoogleMapComponent
initialCenter={{
lat: nfc?.data?.latitude || 37.273958852598,
lng: nfc?.data?.longitude || 127.00836609616198
}}
onCenterChange={(center) => {
form.setFieldsValue({
position: true,
longitude: center.lng,
latitude: center.lat
});
}}
/>
</Form.Item>
<div style={{ display: 'none' }}>
<Form.Item name="longitude" label="경도" rules={[{ required: true }]}>
<InputNumber placeholder="경도를 입력해주세요" />
</Form.Item>
<Form.Item name="latitude" label="위도" rules={[{ required: true }]}>
<InputNumber placeholder="위도를 입력해주세요" />
</Form.Item>
</div>
</Form>
</Modal>
);
}
|