chore: add edit form
This commit is contained in:
Rodolfo Ruiz
@@ -1,103 +1,192 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import { Box, Button, TextField, MenuItem } from '@mui/material';
|
||||
import { createExternalData, updateExternalData } from '../../api/mongo/actions';
|
||||
import UserApi from '../../api/userApi';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
|
||||
export default function AddOrEditUserForm({ onAdd, initialData, onCancel }) {
|
||||
const [formData, setFormData] = useState({
|
||||
username: '',
|
||||
fullName: '',
|
||||
const { user } = useAuth();
|
||||
const thalosToken = user?.thalosToken || localStorage.getItem('thalosToken');
|
||||
const api = useMemo(() => (thalosToken ? new UserApi(thalosToken) : null), [thalosToken]);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
_Id: '',
|
||||
email: '',
|
||||
name: '',
|
||||
middleName: '',
|
||||
lastName: '',
|
||||
tenantId: '',
|
||||
roleId: '',
|
||||
status: 'Active',
|
||||
companies: [],
|
||||
projects: [],
|
||||
sendInvitation: true,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (initialData) {
|
||||
setFormData({
|
||||
_Id: initialData._id || initialData._Id || '',
|
||||
email: initialData.email ?? '',
|
||||
name: initialData.name ?? '',
|
||||
middleName: initialData.middleName ?? '',
|
||||
lastName: initialData.lastName ?? '',
|
||||
tenantId: initialData.tenantId ?? '',
|
||||
roleId: initialData.roleId ?? '',
|
||||
status: initialData.status ?? 'Active',
|
||||
companies: Array.isArray(initialData.companies) ? initialData.companies : [],
|
||||
projects: Array.isArray(initialData.projects) ? initialData.projects : [],
|
||||
sendInvitation: true,
|
||||
});
|
||||
} else {
|
||||
setFormData({
|
||||
_Id: '',
|
||||
email: '',
|
||||
role: 'User',
|
||||
status: 'Active'
|
||||
});
|
||||
name: '',
|
||||
middleName: '',
|
||||
lastName: '',
|
||||
tenantId: '',
|
||||
roleId: '',
|
||||
status: 'Active',
|
||||
companies: [],
|
||||
projects: [],
|
||||
sendInvitation: true,
|
||||
});
|
||||
}
|
||||
}, [initialData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (initialData) {
|
||||
setFormData({ ...initialData });
|
||||
} else {
|
||||
setFormData({
|
||||
username: '',
|
||||
fullName: '',
|
||||
email: '',
|
||||
role: 'User',
|
||||
status: 'Active'
|
||||
});
|
||||
}
|
||||
}, [initialData]);
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
if (name === 'companies' || name === 'projects') {
|
||||
const arr = value.split(',').map(s => s.trim()).filter(s => s.length > 0);
|
||||
setFormData(prev => ({ ...prev, [name]: arr }));
|
||||
} else {
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
};
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
if (!api) throw new Error('Missing Thalos token');
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
if (initialData) {
|
||||
await updateExternalData(formData);
|
||||
} else {
|
||||
await createExternalData(formData);
|
||||
}
|
||||
if (onAdd) onAdd();
|
||||
} catch (error) {
|
||||
console.error('Error submitting form:', error);
|
||||
}
|
||||
};
|
||||
if (initialData) {
|
||||
// UPDATE (PUT /User/Update) — API requires _Id, remove Id, displayName, tenantId
|
||||
const payload = {
|
||||
_Id: formData._Id,
|
||||
email: formData.email,
|
||||
name: formData.name,
|
||||
middleName: formData.middleName,
|
||||
lastName: formData.lastName,
|
||||
tenantId: formData.tenantId,
|
||||
roleId: formData.roleId,
|
||||
companies: formData.companies,
|
||||
projects: formData.projects,
|
||||
status: formData.status || 'Active',
|
||||
};
|
||||
await api.updateUser(payload);
|
||||
} else {
|
||||
// CREATE (POST /User/Create)
|
||||
const payload = {
|
||||
email: formData.email,
|
||||
name: formData.name,
|
||||
middleName: formData.middleName,
|
||||
lastName: formData.lastName,
|
||||
roleId: formData.roleId,
|
||||
sendInvitation: !!formData.sendInvitation,
|
||||
};
|
||||
await api.createUser(payload);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ py: 2 }}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Username"
|
||||
name="username"
|
||||
value={formData.username}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Full Name"
|
||||
name="fullName"
|
||||
value={formData.fullName}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
select
|
||||
label="Role"
|
||||
name="role"
|
||||
value={formData.role}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
>
|
||||
<MenuItem value="Admin">Admin</MenuItem>
|
||||
<MenuItem value="User">User</MenuItem>
|
||||
<MenuItem value="Manager">Manager</MenuItem>
|
||||
</TextField>
|
||||
<TextField
|
||||
fullWidth
|
||||
select
|
||||
label="Status"
|
||||
name="status"
|
||||
value={formData.status}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
>
|
||||
<MenuItem value="Active">Active</MenuItem>
|
||||
<MenuItem value="Inactive">Inactive</MenuItem>
|
||||
</TextField>
|
||||
<Box display="flex" justifyContent="flex-end" mt={3} gap={1}>
|
||||
<Button onClick={onCancel} className="button-transparent">Cancel</Button>
|
||||
<Button variant="contained" onClick={handleSubmit} className="button-gold">Save</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
onAdd?.();
|
||||
} catch (error) {
|
||||
console.error('Error submitting form:', error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ py: 2 }}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Middle Name"
|
||||
name="middleName"
|
||||
value={formData.middleName}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Last Name"
|
||||
name="lastName"
|
||||
value={formData.lastName}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Tenant Id"
|
||||
name="tenantId"
|
||||
value={formData.tenantId}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Role Id"
|
||||
name="roleId"
|
||||
value={formData.roleId}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Companies"
|
||||
name="companies"
|
||||
value={formData.companies.join(', ')}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
helperText="Comma-separated list"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Projects"
|
||||
name="projects"
|
||||
value={formData.projects.join(', ')}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
helperText="Comma-separated list"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
select
|
||||
label="Status"
|
||||
name="status"
|
||||
value={formData.status}
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
>
|
||||
<MenuItem value="Active">Active</MenuItem>
|
||||
<MenuItem value="Inactive">Inactive</MenuItem>
|
||||
</TextField>
|
||||
|
||||
<Box display="flex" justifyContent="flex-end" mt={3} gap={1}>
|
||||
<Button onClick={onCancel} className="button-transparent">Cancel</Button>
|
||||
<Button variant="contained" onClick={handleSubmit} className="button-gold">Save</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user