Convert user and role IDs from number to UUID string
Updated backend and frontend to use UUID strings instead of integers for user and role IDs to match PostgreSQL database schema (UUID type). Backend changes: - Updated User and UserPublic interfaces: id and role_id now string (UUID) - Updated JwtPayload: userId and roleId now string - Updated user validators: role_id validation changed from number to UUID string - Removed parseInt() calls in user controller (getUserById, updateUser, deleteUser, changePassword) - Updated all user service function signatures to accept string IDs - Updated create() and update() functions to accept role_id as string Frontend changes: - Updated User interface in users API: role_id is string - Updated CreateUserInput and UpdateUserInput: role_id is string - Added role filter in UsersPage sidebar - Removed number conversion logic (parseInt) This fixes the "invalid input syntax for type uuid" error when creating/updating users.
This commit is contained in:
@@ -1,8 +1,13 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Plus, Trash2, Pencil, RefreshCcw } from "lucide-react";
|
||||
import MaterialTable from "@material-table/core";
|
||||
import { createUser, updateUser, deleteUser, getAllUsers, CreateUserInput, UpdateUserInput, User as ApiUser } from "../api/users";
|
||||
import { getAllRoles, Role as ApiRole } from "../api/roles";
|
||||
import { createUser, getAllUsers, CreateUserInput, User as ApiUser } from "../api/users";
|
||||
|
||||
interface RoleOption {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface User {
|
||||
id: string;
|
||||
@@ -15,8 +20,7 @@ interface User {
|
||||
}
|
||||
|
||||
interface UserForm {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
name: string;
|
||||
email: string;
|
||||
password?: string;
|
||||
roleId: string;
|
||||
@@ -28,69 +32,66 @@ export default function UsersPage() {
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const [activeUser, setActiveUser] = useState<User | null>(null);
|
||||
const [search, setSearch] = useState("");
|
||||
const [selectedRoleFilter, setSelectedRoleFilter] = useState<string>(""); // Filter state
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [roles, setRoles] = useState<ApiRole[]>([]);
|
||||
const [loadingRoles, setLoadingRoles] = useState(true);
|
||||
const [roles, setRoles] = useState<RoleOption[]>([]);
|
||||
const [modalRoles, setModalRoles] = useState<ApiRole[]>([]);
|
||||
const [loadingUsers, setLoadingUsers] = useState(true);
|
||||
const [loadingModalRoles, setLoadingModalRoles] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const emptyUser: UserForm = { firstName: "", lastName: "", email: "", roleId: "", password: "", status: "ACTIVE", createdAt: new Date().toISOString().slice(0,10) };
|
||||
const emptyUser: UserForm = { name: "", email: "", roleId: "", password: "", status: "ACTIVE", createdAt: new Date().toISOString().slice(0,10) };
|
||||
const [form, setForm] = useState<UserForm>(emptyUser);
|
||||
|
||||
// Fetch roles and users from API on component mount
|
||||
useEffect(() => {
|
||||
const fetchRoles = async () => {
|
||||
try {
|
||||
setLoadingRoles(true);
|
||||
const rolesData = await getAllRoles();
|
||||
console.log('Roles fetched:', rolesData);
|
||||
setRoles(rolesData);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch roles:', error);
|
||||
} finally {
|
||||
setLoadingRoles(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchUsers = async () => {
|
||||
try {
|
||||
setLoadingUsers(true);
|
||||
const usersResponse = await getAllUsers();
|
||||
console.log('Users API response:', usersResponse);
|
||||
|
||||
// Map API users to UI format
|
||||
const mappedUsers: User[] = usersResponse.data.map((apiUser: ApiUser) => ({
|
||||
id: apiUser.id,
|
||||
name: `${apiUser.first_name} ${apiUser.last_name}`,
|
||||
email: apiUser.email,
|
||||
roleId: apiUser.role_id,
|
||||
roleName: apiUser.role?.name || '',
|
||||
status: apiUser.is_active ? "ACTIVE" : "INACTIVE",
|
||||
createdAt: new Date(apiUser.created_at).toISOString().slice(0, 10)
|
||||
}));
|
||||
|
||||
console.log('Mapped users:', mappedUsers);
|
||||
setUsers(mappedUsers);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch users:', error);
|
||||
// Keep empty array on error
|
||||
setUsers([]);
|
||||
} finally {
|
||||
setLoadingUsers(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchRoles();
|
||||
fetchUsers();
|
||||
}, []);
|
||||
|
||||
const fetchUsers = async () => {
|
||||
try {
|
||||
setLoadingUsers(true);
|
||||
const usersResponse = await getAllUsers();
|
||||
console.log('Users API response:', usersResponse);
|
||||
|
||||
const mappedUsers: User[] = usersResponse.data.map((apiUser: ApiUser) => ({
|
||||
id: apiUser.id,
|
||||
name: apiUser.name,
|
||||
email: apiUser.email,
|
||||
roleId: apiUser.role_id,
|
||||
roleName: apiUser.role?.name || '',
|
||||
status: apiUser.is_active ? "ACTIVE" : "INACTIVE",
|
||||
createdAt: new Date(apiUser.created_at).toISOString().slice(0, 10)
|
||||
}));
|
||||
|
||||
setUsers(mappedUsers);
|
||||
|
||||
const uniqueRolesMap = new Map<string, RoleOption>();
|
||||
usersResponse.data.forEach((apiUser: ApiUser) => {
|
||||
if (apiUser.role) {
|
||||
uniqueRolesMap.set(apiUser.role.id, {
|
||||
id: apiUser.role.id,
|
||||
name: apiUser.role.name
|
||||
});
|
||||
}
|
||||
});
|
||||
const uniqueRoles = Array.from(uniqueRolesMap.values());
|
||||
console.log('Unique roles extracted:', uniqueRoles);
|
||||
setRoles(uniqueRoles);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch users:', error);
|
||||
setUsers([]);
|
||||
setRoles([]);
|
||||
} finally {
|
||||
setLoadingUsers(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
setError(null);
|
||||
|
||||
// Validation
|
||||
if (!form.firstName || !form.lastName || !form.email || !form.roleId) {
|
||||
if (!form.name || !form.email || !form.roleId) {
|
||||
setError("Please fill in all required fields");
|
||||
return;
|
||||
}
|
||||
@@ -109,52 +110,28 @@ export default function UsersPage() {
|
||||
setSaving(true);
|
||||
|
||||
if (editingId) {
|
||||
// TODO: Implement update user
|
||||
const roleName = roles.find(r => r.id === form.roleId)?.name || "";
|
||||
const fullName = `${form.firstName} ${form.lastName}`;
|
||||
setUsers(prev => prev.map(u => u.id === editingId ? {
|
||||
id: editingId,
|
||||
name: fullName,
|
||||
const updateData: UpdateUserInput = {
|
||||
email: form.email,
|
||||
roleId: form.roleId,
|
||||
roleName,
|
||||
status: form.status,
|
||||
createdAt: form.createdAt
|
||||
} : u));
|
||||
} else {
|
||||
// Create new user
|
||||
const roleIdNum = parseInt(form.roleId, 10);
|
||||
|
||||
if (isNaN(roleIdNum)) {
|
||||
setError("Please select a valid role");
|
||||
return;
|
||||
}
|
||||
|
||||
const createData: CreateUserInput = {
|
||||
email: form.email,
|
||||
password: form.password!,
|
||||
first_name: form.firstName,
|
||||
last_name: form.lastName,
|
||||
role_id: roleIdNum,
|
||||
name: form.name.trim(),
|
||||
role_id: form.roleId,
|
||||
is_active: form.status === "ACTIVE",
|
||||
};
|
||||
|
||||
const newUser = await createUser(createData);
|
||||
const roleName = roles.find(r => r.id === form.roleId)?.name || "";
|
||||
|
||||
// Add the new user to the list
|
||||
const apiUser: ApiUser = newUser;
|
||||
setUsers(prev => [...prev, {
|
||||
id: apiUser.id,
|
||||
name: `${apiUser.first_name} ${apiUser.last_name}`,
|
||||
email: apiUser.email,
|
||||
roleId: apiUser.role_id,
|
||||
roleName: roleName,
|
||||
status: apiUser.is_active ? "ACTIVE" : "INACTIVE",
|
||||
createdAt: new Date(apiUser.created_at).toISOString().slice(0, 10)
|
||||
}]);
|
||||
await updateUser(editingId, updateData);
|
||||
} else {
|
||||
const createData: CreateUserInput = {
|
||||
email: form.email,
|
||||
password: form.password!,
|
||||
name: form.name.trim(),
|
||||
role_id: form.roleId,
|
||||
is_active: form.status === "ACTIVE",
|
||||
};
|
||||
|
||||
await createUser(createData);
|
||||
}
|
||||
|
||||
await handleRefresh();
|
||||
|
||||
setShowModal(false);
|
||||
setEditingId(null);
|
||||
setForm(emptyUser);
|
||||
@@ -167,44 +144,100 @@ export default function UsersPage() {
|
||||
};
|
||||
|
||||
const handleRefresh = async () => {
|
||||
await fetchUsers();
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!activeUser) return;
|
||||
|
||||
if (!window.confirm(`Are you sure you want to delete user "${activeUser.name}"?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoadingUsers(true);
|
||||
const usersResponse = await getAllUsers();
|
||||
const mappedUsers: User[] = usersResponse.data.map((apiUser: ApiUser) => ({
|
||||
id: apiUser.id,
|
||||
name: `${apiUser.first_name} ${apiUser.last_name}`,
|
||||
email: apiUser.email,
|
||||
roleId: apiUser.role_id,
|
||||
roleName: apiUser.role?.name || '',
|
||||
status: apiUser.is_active ? "ACTIVE" : "INACTIVE",
|
||||
createdAt: new Date(apiUser.created_at).toISOString().slice(0, 10)
|
||||
}));
|
||||
setUsers(mappedUsers);
|
||||
setSaving(true);
|
||||
await deleteUser(activeUser.id);
|
||||
|
||||
await handleRefresh();
|
||||
setActiveUser(null);
|
||||
} catch (error) {
|
||||
console.error('Failed to refresh users:', error);
|
||||
console.error('Failed to delete user:', error);
|
||||
alert('Failed to delete user. Please try again.');
|
||||
} finally {
|
||||
setLoadingUsers(false);
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
if (!activeUser) return;
|
||||
setUsers(prev => prev.filter(u => u.id !== activeUser.id));
|
||||
setActiveUser(null);
|
||||
const fetchModalRoles = async () => {
|
||||
try {
|
||||
setLoadingModalRoles(true);
|
||||
const rolesData = await getAllRoles();
|
||||
console.log('Modal roles fetched:', rolesData);
|
||||
setModalRoles(rolesData);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch modal roles:', error);
|
||||
} finally {
|
||||
setLoadingModalRoles(false);
|
||||
}
|
||||
};
|
||||
|
||||
const filtered = users.filter(u => u.name.toLowerCase().includes(search.toLowerCase()) || u.email.toLowerCase().includes(search.toLowerCase()));
|
||||
const handleOpenAddModal = () => {
|
||||
setForm(emptyUser);
|
||||
setEditingId(null);
|
||||
setError(null);
|
||||
setShowModal(true);
|
||||
fetchModalRoles();
|
||||
};
|
||||
|
||||
const handleOpenEditModal = (user: User) => {
|
||||
setEditingId(user.id);
|
||||
setForm({
|
||||
name: user.name,
|
||||
email: user.email,
|
||||
roleId: user.roleId,
|
||||
status: user.status,
|
||||
createdAt: user.createdAt,
|
||||
password: ""
|
||||
});
|
||||
setError(null);
|
||||
setShowModal(true);
|
||||
fetchModalRoles();
|
||||
};
|
||||
|
||||
// Filter users by search and selected role
|
||||
const filtered = users.filter(u => {
|
||||
const matchesSearch = u.name.toLowerCase().includes(search.toLowerCase()) ||
|
||||
u.email.toLowerCase().includes(search.toLowerCase());
|
||||
const matchesRole = !selectedRoleFilter || u.roleId === selectedRoleFilter;
|
||||
return matchesSearch && matchesRole;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex gap-6 p-6 w-full bg-gray-100">
|
||||
{/* LEFT INFO SIDEBAR */}
|
||||
<div className="w-72 bg-white rounded-xl shadow p-4">
|
||||
<h3 className="text-xs font-semibold text-gray-500 mb-3">Project Information</h3>
|
||||
<p className="text-sm text-gray-700">Usuarios disponibles y sus roles.</p>
|
||||
<select value={form.roleId} onChange={e => setForm({...form, roleId: e.target.value})} className="w-full border px-3 py-2 rounded mt-2" disabled={loadingRoles}>
|
||||
<option value="">{loadingRoles ? "Loading roles..." : "Select Role"}</option>
|
||||
<h3 className="text-xs font-semibold text-gray-500 mb-3">Filter Options</h3>
|
||||
<p className="text-sm text-gray-700 mb-4">Filter users by role</p>
|
||||
|
||||
<label className="text-xs font-semibold text-gray-500 mb-2 block">Role</label>
|
||||
<select
|
||||
value={selectedRoleFilter}
|
||||
onChange={e => setSelectedRoleFilter(e.target.value)}
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
disabled={loadingUsers}
|
||||
>
|
||||
<option value="">All Roles</option>
|
||||
{roles.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}
|
||||
</select>
|
||||
|
||||
{selectedRoleFilter && (
|
||||
<button
|
||||
onClick={() => setSelectedRoleFilter("")}
|
||||
className="mt-2 text-xs text-blue-600 hover:text-blue-800"
|
||||
>
|
||||
Clear filter
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* MAIN */}
|
||||
@@ -217,23 +250,12 @@ export default function UsersPage() {
|
||||
<p className="text-sm text-blue-100">Usuarios registrados</p>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<button onClick={() => { setForm(emptyUser); setEditingId(null); setShowModal(true); }} className="flex items-center gap-2 px-4 py-2 bg-white text-[#4c5f9e] rounded-lg"><Plus size={16} /> Add</button>
|
||||
<button onClick={handleOpenAddModal} className="flex items-center gap-2 px-4 py-2 bg-white text-[#4c5f9e] rounded-lg"><Plus size={16} /> Add</button>
|
||||
<button onClick={() => {
|
||||
if(!activeUser) return;
|
||||
const [firstName = "", lastName = ""] = activeUser.name.split(" ");
|
||||
setEditingId(activeUser.id);
|
||||
setForm({
|
||||
firstName,
|
||||
lastName,
|
||||
email: activeUser.email,
|
||||
roleId: activeUser.roleId,
|
||||
status: activeUser.status,
|
||||
createdAt: activeUser.createdAt,
|
||||
password: ""
|
||||
});
|
||||
setShowModal(true);
|
||||
if(!activeUser) return;
|
||||
handleOpenEditModal(activeUser);
|
||||
}} disabled={!activeUser} className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg disabled:opacity-60"><Pencil size={16}/> Edit</button>
|
||||
<button onClick={handleDelete} disabled={!activeUser} className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg disabled:opacity-60"><Trash2 size={16}/> Delete</button>
|
||||
<button onClick={handleDelete} disabled={!activeUser || saving} className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg disabled:opacity-60"><Trash2 size={16}/> Delete</button>
|
||||
<button onClick={handleRefresh} className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg" disabled={loadingUsers}><RefreshCcw size={16}/> Refresh</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -277,17 +299,9 @@ export default function UsersPage() {
|
||||
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="First Name *"
|
||||
value={form.firstName}
|
||||
onChange={e => setForm({...form, firstName: e.target.value})}
|
||||
disabled={saving}
|
||||
/>
|
||||
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Last Name *"
|
||||
value={form.lastName}
|
||||
onChange={e => setForm({...form, lastName: e.target.value})}
|
||||
placeholder="Full Name *"
|
||||
value={form.name}
|
||||
onChange={e => setForm({...form, name: e.target.value})}
|
||||
disabled={saving}
|
||||
/>
|
||||
|
||||
@@ -315,10 +329,10 @@ export default function UsersPage() {
|
||||
value={form.roleId}
|
||||
onChange={e => setForm({...form, roleId: e.target.value})}
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
disabled={loadingRoles || saving}
|
||||
disabled={loadingModalRoles || saving}
|
||||
>
|
||||
<option value="">Select Role *</option>
|
||||
{roles.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}
|
||||
<option value="">{loadingModalRoles ? "Loading roles..." : "Select Role *"}</option>
|
||||
{modalRoles.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}
|
||||
</select>
|
||||
|
||||
<button
|
||||
@@ -340,7 +354,7 @@ export default function UsersPage() {
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="bg-[#4c5f9e] text-white px-4 py-2 rounded disabled:opacity-50"
|
||||
disabled={saving || loadingRoles}
|
||||
disabled={saving || loadingModalRoles}
|
||||
>
|
||||
{saving ? "Saving..." : "Save"}
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user