All files / lib/pages/FestivalNfc/Modal CreateFestivalNfcModal.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { usePostFestivalNfcMutation } from '@lib/api/mutations';
import { ManageCreateOrUpdateNFCRegistryDto } from '@uniquegood/realworld-adventure-interface';
import { Form, Input, InputNumber, Modal, ModalProps, message } from 'antd';
import GoogleMapComponent from '@lib/components/GoogleMap';
 
interface CreateFestivalNfcModalProps {
  modalData: ModalProps;
  closeModal: () => unknown;
  festivalId: string;
}
 
export default function CreateFestivalNfcModal({
  modalData,
  closeModal,
  festivalId
}: CreateFestivalNfcModalProps) {
  const [form] = Form.useForm();
 
  const { mutateAsync: createNfc } = usePostFestivalNfcMutation(festivalId);
 
  const handleSubmit = async (values: ManageCreateOrUpdateNFCRegistryDto) => {
    const { success } = await createNfc(values);
 
    if (success) {
      message.success('NFC를 생성했습니다.');
      closeModal();
    } else {
      message.error('NFC 생성에 실패했습니다.');
    }
  };
 
  return (
    <Modal {...modalData} title="NFC 생성" onOk={form.submit} okText="확인" cancelText="닫기">
      <Form
        form={form}
        onFinish={handleSubmit}
        labelCol={{ span: 24 }}
        wrapperCol={{ span: 24 }}
        // eslint-disable-next-line no-template-curly-in-string
        validateMessages={{ required: '${label}은(는) 필수로 입력해주세요.' }}
        preserve={false}
      >
        <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="위치">
          <GoogleMapComponent
            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>
  );
}