chore: user apikeys

src/pages/users/components/add-modal.tsx

@@ -1,17 +1,20 @@
 import ModalFooter from '@/components/modal-footer';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
+import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import { SyncOutlined } from '@ant-design/icons';
 import { Form, Modal } from 'antd';
-import { UserRolesOptions } from '../config';
-import { FormData } from '../config/types';
+import { useEffect } from 'react';
+import { UserRoles, UserRolesOptions } from '../config';
+import { FormData, ListItem } from '../config/types';
 
 type AddModalProps = {
   title: string;
   action: PageActionType;
   open: boolean;
   onOk: (values: FormData) => void;
+  data?: ListItem;
   onCancel: () => void;
 };
 const AddModal: React.FC<AddModalProps> = ({
@@ -19,12 +22,9 @@ const AddModal: React.FC<AddModalProps> = ({
   action,
   open,
   onOk,
+  data,
   onCancel
 }) => {
-  if (!open) {
-    return null;
-  }
-
   const [form] = Form.useForm();
   const suffix = (
     <SyncOutlined
@@ -34,11 +34,23 @@ const AddModal: React.FC<AddModalProps> = ({
       }}
     />
   );
+  const initFormValue = () => {
+    if (action === PageAction.EDIT && open) {
+      form.setFieldsValue({
+        ...data,
+        is_admin: data?.is_admin ? UserRoles.ADMIN : UserRoles.USER
+      });
+    }
+  };
 
   const handleSumit = () => {
     form.submit();
   };
 
+  useEffect(() => {
+    initFormValue();
+  }, [open]);
+
   return (
     <Modal
       title={title}
@@ -56,18 +68,18 @@ const AddModal: React.FC<AddModalProps> = ({
       }
     >
       <Form name="addUserForm" form={form} onFinish={onOk} preserve={false}>
-        <Form.Item<FormData> name="name" rules={[{ required: true }]}>
-          <SealInput.Input label="Name"></SealInput.Input>
+        <Form.Item<FormData> name="username" rules={[{ required: true }]}>
+          <SealInput.Input label="Name" required></SealInput.Input>
         </Form.Item>
-        <Form.Item<FormData> name="full_name" rules={[{ required: true }]}>
+        <Form.Item<FormData> name="full_name" rules={[{ required: false }]}>
           <SealInput.Input label="FullName"></SealInput.Input>
         </Form.Item>
-        <Form.Item<FormData> name="is_admin" rules={[{ required: true }]}>
+        <Form.Item<FormData> name="is_admin" rules={[{ required: false }]}>
           <SealSelect label="Role" options={UserRolesOptions}></SealSelect>
         </Form.Item>
 
         <Form.Item<FormData> name="password" rules={[{ required: true }]}>
-          <SealInput.Input label="Password"></SealInput.Input>
+          <SealInput.Password label="Password" required></SealInput.Password>
         </Form.Item>
       </Form>
     </Modal>