SMATEC-FRONTEND/src/pages/Manager/Device/components/EditDeviceModal.tsx

import { useIntl } from '@umijs/max';
import { Form, Input, Modal } from 'antd';
import React, { useEffect } from 'react';

interface Props {
  visible: boolean;
  device: MasterModel.Thing | null;
  onCancel: () => void;
  onSubmit: (values: MasterModel.Thing) => void;
}

const EditDeviceModal: React.FC<Props> = ({
  visible,
  device,
  onCancel,
  onSubmit,
}) => {
  const [form] = Form.useForm();
  const intl = useIntl();

  useEffect(() => {
    if (device) {
      form.setFieldsValue({
        name: device.name,
        external_id: device?.metadata?.external_id,
        address: device?.metadata?.address,
      });
    } else {
      form.resetFields();
    }
  }, [device, form]);

  const handleFinish = (values: {
    name: string;
    external_id: string;
    address?: string;
  }) => {
    const payload: MasterModel.Thing = {
      ...device,
      name: values.name,
      metadata: {
        ...(device?.metadata || {}),
        external_id: values.external_id,
        address: values.address,
      },
    };

    onSubmit(payload);
  };

  return (
    <Modal
      title={intl.formatMessage({
        id: 'master.devices.update.title',
        defaultMessage: 'Update device',
      })}
      open={visible}
      onCancel={onCancel}
      onOk={() => form.submit()}
      okText={intl.formatMessage({
        id: 'master.devices.ok',
        defaultMessage: 'OK',
      })}
      cancelText={intl.formatMessage({
        id: 'master.devices.cancel',
        defaultMessage: 'Cancel',
      })}
      destroyOnClose
    >
      <Form
        form={form}
        layout="vertical"
        onFinish={handleFinish}
        preserve={false}
      >
        <Form.Item
          name="name"
          label={intl.formatMessage({
            id: 'master.devices.name',
            defaultMessage: 'Name',
          })}
          rules={[
            {
              required: true,
              message: intl.formatMessage({
                id: 'master.devices.name.required',
                defaultMessage: 'Please enter device name',
              }),
            },
          ]}
        >
          <Input
            placeholder={intl.formatMessage({
              id: 'master.devices.name.placeholder',
              defaultMessage: 'Enter device name',
            })}
          />
        </Form.Item>

        <Form.Item
          name="external_id"
          label={intl.formatMessage({
            id: 'master.devices.external_id',
            defaultMessage: 'External ID',
          })}
          rules={[
            {
              required: true,
              message: intl.formatMessage({
                id: 'master.devices.external_id.required',
                defaultMessage: 'Please enter external ID',
              }),
            },
          ]}
        >
          <Input
            placeholder={intl.formatMessage({
              id: 'master.devices.external_id.placeholder',
              defaultMessage: 'Enter external ID',
            })}
          />
        </Form.Item>

        <Form.Item
          name="address"
          label={intl.formatMessage({
            id: 'master.devices.address',
            defaultMessage: 'Address',
          })}
          rules={[
            {
              required: true,
              message: intl.formatMessage({
                id: 'master.devices.address.required',
                defaultMessage: 'Please enter address',
              }),
            },
          ]}
        >
          <Input
            placeholder={intl.formatMessage({
              id: 'master.devices.address.placeholder',
              defaultMessage: 'Enter address',
            })}
          />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default EditDeviceModal;