39 lines
1.9 KiB
JavaScript
39 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
import Modal from './Modal';
|
|
import styles from '../styles/UserModal.module.css';
|
|
|
|
export default function EditUserModal({ isOpen, onClose, user, roles, loading, onChange, onSave }) {
|
|
return (
|
|
<Modal isOpen={isOpen} onClose={onClose} disabled={loading}>
|
|
<h3 className={styles.title}>Редактировать пользователя</h3>
|
|
<form onSubmit={onSave} className={styles.form}>
|
|
<label className={styles.label}>Email
|
|
<input type="email" value={user.email} onChange={e => onChange({ ...user, email: e.target.value })} required className={styles.input} />
|
|
</label>
|
|
<label className={styles.label}>Имя
|
|
<input type="text" value={user.name} onChange={e => onChange({ ...user, name: e.target.value })} required className={styles.input} />
|
|
</label>
|
|
<label className={styles.label}>Роль
|
|
<select value={user.role_id} onChange={e => onChange({ ...user, role_id: Number(e.target.value) })} required className={styles.input}>
|
|
{roles.length === 0 ? (
|
|
<option value="">Загрузка ролей...</option>
|
|
) : (
|
|
roles.map(role => (
|
|
<option key={role.id} value={role.id}>{role.name}</option>
|
|
))
|
|
)}
|
|
</select>
|
|
{process.env.NODE_ENV === 'development' && (
|
|
<div style={{ fontSize: '10px', color: '#666', marginTop: '4px' }}>
|
|
Debug: {roles.length} roles, user.role_id: {user.role_id}
|
|
</div>
|
|
)}
|
|
</label>
|
|
<div className={styles.actions}>
|
|
<button type="submit" disabled={loading} className={styles.saveBtn}>{loading ? 'Сохранение...' : 'Сохранить'}</button>
|
|
<button type="button" onClick={onClose} disabled={loading} className={styles.cancelBtn}>Отмена</button>
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
);
|
|
}
|