feat(manager/devices): Add device management features including creation and editing

src/pages/Manager/Device/components/EditDeviceModal.tsx

@@ -0,0 +1,133 @@
+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: {
+    name: string;
+    external_id: string;
+    address?: string;
+  }) => 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]);
+
+  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={onSubmit} 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;