consultoria-as/GRH
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Convert user and role IDs from number to UUID string

Browse Source 
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:
Esteban
2026-01-26 19:49:15 -06:00
parent c910ce8996
commit 2d977b13b4
6 changed files with 193 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/api/users.ts
View File

@@ -8,8 +8,8 @@ import { apiClient } from './client';
export interface User {
id: string;
email: string;
first_name: string;
last_name: string;
name: string;
avatar_url: string | null;
role_id: string;
role?: {
id: string;
@@ -26,17 +26,15 @@ export interface User {
export interface CreateUserInput {
email: string;
password: string;
first_name: string;
last_name: string;
role_id: number;
name: string;
role_id: string;
is_active?: boolean;
}
export interface UpdateUserInput {
email?: string;
first_name?: string;
last_name?: string;
role_id?: number;
name?: string;
role_id?: string;
is_active?: boolean;
}

302
src/pages/UsersPage.tsx
View File

@@ -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>

24
water-api/src/controllers/user.controller.ts
View File

@@ -67,9 +67,9 @@ export async function getUserById(
res: Response
): Promise<void> {
try {
const userId = parseInt(req.params.id, 10);
const userId = req.params.id;
if (isNaN(userId)) {
if (!userId) {
res.status(400).json({
success: false,
error: 'Invalid user ID',
@@ -80,7 +80,7 @@ export async function getUserById(
// Check if user is admin or requesting their own data
const requestingUser = req.user;
const isAdmin = requestingUser?.role === 'ADMIN';
const isSelf = requestingUser?.id === userId.toString();
const isSelf = requestingUser?.id === userId;
if (!isAdmin && !isSelf) {
res.status(403).json({
@@ -166,9 +166,9 @@ export async function updateUser(
res: Response
): Promise<void> {
try {
const userId = parseInt(req.params.id, 10);
const userId = req.params.id;
if (isNaN(userId)) {
if (!userId) {
res.status(400).json({
success: false,
error: 'Invalid user ID',
@@ -178,7 +178,7 @@ export async function updateUser(
const requestingUser = req.user;
const isAdmin = requestingUser?.role === 'ADMIN';
const isSelf = requestingUser?.id === userId.toString();
const isSelf = requestingUser?.id === userId;
if (!isAdmin && !isSelf) {
res.status(403).json({
@@ -243,9 +243,9 @@ export async function deleteUser(
res: Response
): Promise<void> {
try {
const userId = parseInt(req.params.id, 10);
const userId = req.params.id;
if (isNaN(userId)) {
if (!userId) {
res.status(400).json({
success: false,
error: 'Invalid user ID',
@@ -254,7 +254,7 @@ export async function deleteUser(
}
// Prevent admin from deleting themselves
if (req.user?.id === userId.toString()) {
if (req.user?.id === userId) {
res.status(400).json({
success: false,
error: 'Cannot deactivate your own account',
@@ -294,9 +294,9 @@ export async function changePassword(
res: Response
): Promise<void> {
try {
const userId = parseInt(req.params.id, 10);
const userId = req.params.id;
if (isNaN(userId)) {
if (!userId) {
res.status(400).json({
success: false,
error: 'Invalid user ID',
@@ -305,7 +305,7 @@ export async function changePassword(
}
// Only allow users to change their own password
if (req.user?.id !== userId.toString()) {
if (req.user?.id !== userId) {
res.status(403).json({
success: false,
error: 'You can only change your own password',

14
water-api/src/services/user.service.ts
View File

@@ -148,7 +148,7 @@ export async function getAll(
* @param id - User ID
* @returns User without password_hash or null if not found
*/
export async function getById(id: number): Promise<UserPublic | null> {
export async function getById(id: string): Promise<UserPublic | null> {
const result = await query(
`
SELECT
@@ -234,7 +234,7 @@ export async function create(data: {
password: string;
name: string;
avatar_url?: string | null;
role_id: number;
role_id: string;
is_active?: boolean;
}): Promise<UserPublic> {
// Check if email already exists
@@ -275,12 +275,12 @@ export async function create(data: {
* @returns Updated user without password_hash
*/
export async function update(
id: number,
id: string,
data: {
email?: string;
name?: string;
avatar_url?: string | null;
role_id?: number;
role_id?: string;
is_active?: boolean;
}
): Promise<UserPublic | null> {
@@ -357,7 +357,7 @@ export async function update(
* @param id - User ID
* @returns True if deleted, false if user not found
*/
export async function deleteUser(id: number): Promise<boolean> {
export async function deleteUser(id: string): Promise<boolean> {
const result = await query(
`
UPDATE users
@@ -379,7 +379,7 @@ export async function deleteUser(id: number): Promise<boolean> {
* @returns True if password changed, throws error if verification fails
*/
export async function changePassword(
id: number,
id: string,
currentPassword: string,
newPassword: string
): Promise<boolean> {
@@ -421,7 +421,7 @@ export async function changePassword(
* @param id - User ID
* @returns True if updated, false if user not found
*/
export async function updateLastLogin(id: number): Promise<boolean> {
export async function updateLastLogin(id: string): Promise<boolean> {
const result = await query(
`
UPDATE users

12
water-api/src/types/index.ts
View File

@@ -23,12 +23,12 @@ export interface Role {
}
export interface User {
id: number;
id: string;
email: string;
password_hash: string;
name: string;
avatar_url: string | null;
role_id: number;
role_id: string;
role?: Role;
is_active: boolean;
last_login: Date | null;
@@ -37,11 +37,11 @@ export interface User {
}
export interface UserPublic {
id: number;
id: string;
email: string;
name: string;
avatar_url: string | null;
role_id: number;
role_id: string;
role?: Role;
is_active: boolean;
last_login: Date | null;
@@ -50,9 +50,9 @@ export interface UserPublic {
}
export interface JwtPayload {
userId: number;
userId: string;
email: string;
roleId: number;
roleId: string;
roleName: string;
iat?: number;
exp?: number;

10
water-api/src/validators/user.validator.ts
View File

@@ -28,9 +28,8 @@ export const createUserSchema = z.object({
.optional()
.nullable(),
role_id: z
.number({ required_error: 'Role ID is required' })
.int('Role ID must be an integer')
.positive('Role ID must be a positive number'),
.string({ required_error: 'Role ID is required' })
.uuid('Role ID must be a valid UUID'),
is_active: z.boolean().default(true),
});
@@ -56,9 +55,8 @@ export const updateUserSchema = z.object({
.optional()
.nullable(),
role_id: z
.number()
.int('Role ID must be an integer')
.positive('Role ID must be a positive number')
.string()
.uuid('Role ID must be a valid UUID')
.optional(),
is_active: z.boolean().optional(),
});