connect/client/src/components/UserEdit.tsx

import { UserService } from '@/services/userService';
import { useUserSelector } from '@/store/userStore';
import { UserUpdate } from '@/types/user';
import { LoadingOutlined } from '@ant-design/icons';
import { Button, Form, Input, message, Select, Spin } from 'antd';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';

const { Option } = Select;

interface UserEditProps {
  userId?: number;
  closeDrawer: () => void;
}

export default function UserEdit({ userId, closeDrawer }: UserEditProps) {
  const currentUser = useUserSelector();
  const [form] = Form.useForm();
  const { t } = useTranslation();
  const [user, setUser] = useState<UserUpdate>({
    id: 0,
    name: '',
    login: '',
    email: '',
    password: '',
    bindTenantId: '',
    role: 'VIEWER',
    meta: {},
    createdAt: '',
    status: 'ACTIVE',
  });
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    async function getUser() {
      if (typeof userId === 'undefined') {
        return;
      }
      const user = await UserService.getUserById(userId);
      setUser(user);
      form.setFieldsValue({ ...user });
    }

    getUser();
  }, []);

  const onFinish = async (values: UserUpdate) => {
    setLoading(true);
    let updatedUser: Partial<UserUpdate> = {};

    (Object.keys(values) as Array<keyof UserUpdate>).forEach((key) => {
      if (values[key] !== user[key]) {
        updatedUser = { ...updatedUser, [key]: values[key] };
      }
    });

    if (Object.keys(updatedUser).length > 0) {
      console.log('updateUser', userId, updatedUser);
      await UserService.updateUser(userId!, updatedUser);
    }

    setLoading(false);
    message.info(t('editAccountMessage'), 4);
    closeDrawer();
  };

  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' }}
          >
            {loading ? (
              <>
                <Spin indicator={<LoadingOutlined spin />} size="small"></Spin>{' '}
                {t('saving')}
              </>
            ) : (
              <>
                <img
                  src="/icons/drawer/save.svg"
                  alt="save"
                  style={{ height: '18px', width: '18px' }}
                />{' '}
                {t('save')}
              </>
            )}
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}