138 lines
3.7 KiB
TypeScript
138 lines
3.7 KiB
TypeScript
import { UserService } from '@/services/userService';
|
|
import { useUserSelector } from '@/store/userStore';
|
|
import { User } from '@/types/user';
|
|
import { Button, Form, Input, Select } from 'antd';
|
|
import { useEffect, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
const { Option } = Select;
|
|
|
|
interface UserEditProps {
|
|
userId?: number;
|
|
}
|
|
|
|
export default function UserEdit({ userId }: UserEditProps) {
|
|
const currentUser = useUserSelector();
|
|
const [form] = Form.useForm();
|
|
const { t } = useTranslation();
|
|
const [user, setUser] = useState<User | null>(null);
|
|
|
|
useEffect(() => {
|
|
async function getUser() {
|
|
if (typeof userId === 'undefined') {
|
|
return;
|
|
}
|
|
const user = await UserService.getUserById(userId);
|
|
setUser(user);
|
|
form.setFieldsValue({ ...user });
|
|
}
|
|
|
|
getUser();
|
|
}, []);
|
|
|
|
return (
|
|
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
|
|
<Form
|
|
form={form}
|
|
name="user-edit-form"
|
|
layout="vertical"
|
|
// onFinish={onFinish}
|
|
initialValues={{ ...user }}
|
|
style={{ flex: 1, display: 'flex', flexDirection: 'column' }}
|
|
>
|
|
<Form.Item
|
|
label={t('name')}
|
|
name="name"
|
|
rules={[{ message: t('nameMessage') }]}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
|
|
{user?.id === currentUser?.id ? undefined : (
|
|
<Form.Item
|
|
label={t('login')}
|
|
name="login"
|
|
rules={[{ message: t('loginMessage') }]}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
)}
|
|
|
|
<Form.Item
|
|
label={t('password')}
|
|
name="password"
|
|
rules={[{ message: t('passwordMessage') }]}
|
|
>
|
|
<Input.Password />
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
label={t('email')}
|
|
name="email"
|
|
rules={[
|
|
{ required: true, message: t('emailMessage') },
|
|
{ type: 'email', message: t('emailErrorMessage') },
|
|
]}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
label={t('tenant')}
|
|
name="bindTenantId"
|
|
rules={[{ required: true, message: t('tenantMessage') }]}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
|
|
{user?.id === currentUser?.id ? undefined : (
|
|
<Form.Item
|
|
label={t('role')}
|
|
name="role"
|
|
rules={[{ required: true, message: t('roleMessage') }]}
|
|
>
|
|
<Select placeholder={t('roleMessage')}>
|
|
{currentUser && currentUser.role === 'OWNER' ? (
|
|
<Option value="ADMIN">{t('ADMIN')}</Option>
|
|
) : undefined}
|
|
<Option value="EDITOR">{t('EDITOR')}</Option>
|
|
<Option value="VIEWER">{t('VIEWER')}</Option>
|
|
</Select>
|
|
</Form.Item>
|
|
)}
|
|
|
|
<Form.Item
|
|
label={t('status')}
|
|
name="status"
|
|
rules={[{ required: true, message: t('statusMessage') }]}
|
|
>
|
|
<Select placeholder={t('statusMessage')}>
|
|
<Option value="ACTIVE">{t('ACTIVE')}</Option>
|
|
<Option value="DISABLED">{t('DISABLED')}</Option>
|
|
<Option value="BLOCKED">{t('BLOCKED')}</Option>
|
|
<Option value="DELETED">{t('DELETED')}</Option>
|
|
</Select>
|
|
</Form.Item>
|
|
|
|
<div style={{ flexGrow: 1 }} />
|
|
|
|
<Form.Item>
|
|
<Button
|
|
type="primary"
|
|
htmlType="submit"
|
|
block
|
|
style={{ color: '#000' }}
|
|
>
|
|
<img
|
|
src="/icons/drawer/save.svg"
|
|
alt="save"
|
|
style={{ height: '18px', width: '18px' }}
|
|
/>{' '}
|
|
{t('save')}
|
|
</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
</div>
|
|
);
|
|
}
|