Add users and roles API integration to UsersPage
Created API modules for users and roles management: - Added src/api/roles.ts with getAllRoles, getRoleById, createRole, etc. - Added src/api/users.ts with getAllUsers, createUser, updateUser, etc. Updated UsersPage to fetch data from backend: - Fetch roles from /api/roles endpoint on mount - Fetch users from /api/users endpoint on mount - Integrated createUser API call with form submission - Added proper validation and error handling - Split name field into firstName and lastName for API compatibility - Added loading states and refresh functionality
This commit is contained in:
68
src/api/roles.ts
Normal file
68
src/api/roles.ts
Normal file
@@ -0,0 +1,68 @@
|
||||
/**
|
||||
* Roles API
|
||||
* Handles all role-related API requests
|
||||
*/
|
||||
|
||||
import { apiClient } from './client';
|
||||
|
||||
export interface Role {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
permissions: Record<string, Record<string, boolean>>;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface RoleListResponse {
|
||||
success: boolean;
|
||||
message: string;
|
||||
data: Role[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all roles
|
||||
*/
|
||||
export async function getAllRoles(): Promise<Role[]> {
|
||||
const response = await apiClient.get<Role[]>('/api/roles');
|
||||
return response;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a single role by ID
|
||||
*/
|
||||
export async function getRoleById(id: string): Promise<Role> {
|
||||
return apiClient.get<Role>(`/api/roles/${id}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a new role
|
||||
*/
|
||||
export async function createRole(data: {
|
||||
name: string;
|
||||
description: string;
|
||||
permissions?: Record<string, Record<string, boolean>>;
|
||||
}): Promise<Role> {
|
||||
return apiClient.post<Role>('/api/roles', data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update an existing role
|
||||
*/
|
||||
export async function updateRole(
|
||||
id: string,
|
||||
data: {
|
||||
name?: string;
|
||||
description?: string;
|
||||
permissions?: Record<string, Record<string, boolean>>;
|
||||
}
|
||||
): Promise<Role> {
|
||||
return apiClient.put<Role>(`/api/roles/${id}`, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a role
|
||||
*/
|
||||
export async function deleteRole(id: string): Promise<void> {
|
||||
return apiClient.delete<void>(`/api/roles/${id}`);
|
||||
}
|
||||
108
src/api/users.ts
Normal file
108
src/api/users.ts
Normal file
@@ -0,0 +1,108 @@
|
||||
/**
|
||||
* Users API
|
||||
* Handles all user-related API requests
|
||||
*/
|
||||
|
||||
import { apiClient } from './client';
|
||||
|
||||
export interface User {
|
||||
id: string;
|
||||
email: string;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
role_id: string;
|
||||
role?: {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
permissions: Record<string, Record<string, boolean>>;
|
||||
};
|
||||
is_active: boolean;
|
||||
last_login: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface CreateUserInput {
|
||||
email: string;
|
||||
password: string;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
role_id: number;
|
||||
is_active?: boolean;
|
||||
}
|
||||
|
||||
export interface UpdateUserInput {
|
||||
email?: string;
|
||||
first_name?: string;
|
||||
last_name?: string;
|
||||
role_id?: number;
|
||||
is_active?: boolean;
|
||||
}
|
||||
|
||||
export interface ChangePasswordInput {
|
||||
current_password: string;
|
||||
new_password: string;
|
||||
}
|
||||
|
||||
export interface UserListResponse {
|
||||
data: User[];
|
||||
pagination: {
|
||||
page: number;
|
||||
limit: number;
|
||||
total: number;
|
||||
totalPages: number;
|
||||
hasNextPage: boolean;
|
||||
hasPreviousPage: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all users with optional filters and pagination
|
||||
*/
|
||||
export async function getAllUsers(params?: {
|
||||
role_id?: number;
|
||||
is_active?: boolean;
|
||||
search?: string;
|
||||
page?: number;
|
||||
limit?: number;
|
||||
sortBy?: string;
|
||||
sortOrder?: 'asc' | 'desc';
|
||||
}): Promise<UserListResponse> {
|
||||
return apiClient.get<UserListResponse>('/api/users', { params });
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a single user by ID
|
||||
*/
|
||||
export async function getUserById(id: string): Promise<User> {
|
||||
return apiClient.get<User>(`/api/users/${id}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a new user
|
||||
*/
|
||||
export async function createUser(data: CreateUserInput): Promise<User> {
|
||||
return apiClient.post<User>('/api/users', data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update an existing user
|
||||
*/
|
||||
export async function updateUser(id: string, data: UpdateUserInput): Promise<User> {
|
||||
return apiClient.put<User>(`/api/users/${id}`, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete (deactivate) a user
|
||||
*/
|
||||
export async function deleteUser(id: string): Promise<void> {
|
||||
return apiClient.delete<void>(`/api/users/${id}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Change user password
|
||||
*/
|
||||
export async function changePassword(id: string, data: ChangePasswordInput): Promise<void> {
|
||||
return apiClient.put<void>(`/api/users/${id}/password`, data);
|
||||
}
|
||||
@@ -1,7 +1,8 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Plus, Trash2, Pencil, RefreshCcw } from "lucide-react";
|
||||
import MaterialTable from "@material-table/core";
|
||||
import { Role } from "./RolesPage"; // Importa los tipos de roles
|
||||
import { getAllRoles, Role as ApiRole } from "../api/roles";
|
||||
import { createUser, getAllUsers, CreateUserInput, User as ApiUser } from "../api/users";
|
||||
|
||||
interface User {
|
||||
id: string;
|
||||
@@ -13,38 +14,177 @@ interface User {
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
interface UserForm {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
password?: string;
|
||||
roleId: string;
|
||||
status: "ACTIVE" | "INACTIVE";
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export default function UsersPage() {
|
||||
const initialRoles: Role[] = [
|
||||
{ id: "1", name: "SUPER_ADMIN", description: "Full access", status: "ACTIVE", createdAt: "2025-12-17" },
|
||||
{ id: "2", name: "USER", description: "Regular user", status: "ACTIVE", createdAt: "2025-12-16" },
|
||||
];
|
||||
|
||||
const initialUsers: User[] = [
|
||||
{ id: "1", name: "Admin GRH", email: "grh@domain.com", roleId: "1", roleName: "SUPER_ADMIN", status: "ACTIVE", createdAt: "2025-12-17" },
|
||||
{ id: "2", name: "User CESPT", email: "cespt@domain.com", roleId: "2", roleName: "USER", status: "ACTIVE", createdAt: "2025-12-16" },
|
||||
];
|
||||
|
||||
const [users, setUsers] = useState<User[]>(initialUsers);
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const [activeUser, setActiveUser] = useState<User | null>(null);
|
||||
const [search, setSearch] = useState("");
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [roles, setRoles] = useState<Role[]>(initialRoles);
|
||||
const [roles, setRoles] = useState<ApiRole[]>([]);
|
||||
const [loadingRoles, setLoadingRoles] = useState(true);
|
||||
const [loadingUsers, setLoadingUsers] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const emptyUser: Omit<User, "id" | "roleName"> = { name: "", email: "", roleId: "", status: "ACTIVE", createdAt: new Date().toISOString().slice(0,10) };
|
||||
const [form, setForm] = useState<Omit<User, "id" | "roleName">>(emptyUser);
|
||||
const emptyUser: UserForm = { firstName: "", lastName: "", email: "", roleId: "", password: "", status: "ACTIVE", createdAt: new Date().toISOString().slice(0,10) };
|
||||
const [form, setForm] = useState<UserForm>(emptyUser);
|
||||
|
||||
const handleSave = () => {
|
||||
const roleName = roles.find(r => r.id === form.roleId)?.name || "";
|
||||
if (editingId) {
|
||||
setUsers(prev => prev.map(u => u.id === editingId ? { id: editingId, roleName, ...form } : u));
|
||||
} else {
|
||||
const newId = Date.now().toString();
|
||||
setUsers(prev => [...prev, { id: newId, roleName, ...form }]);
|
||||
// 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 handleSave = async () => {
|
||||
setError(null);
|
||||
|
||||
// Validation
|
||||
if (!form.firstName || !form.lastName || !form.email || !form.roleId) {
|
||||
setError("Please fill in all required fields");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!editingId && !form.password) {
|
||||
setError("Password is required for new users");
|
||||
return;
|
||||
}
|
||||
|
||||
if (form.password && form.password.length < 8) {
|
||||
setError("Password must be at least 8 characters");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
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,
|
||||
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,
|
||||
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)
|
||||
}]);
|
||||
}
|
||||
|
||||
setShowModal(false);
|
||||
setEditingId(null);
|
||||
setForm(emptyUser);
|
||||
} catch (err) {
|
||||
console.error('Failed to save user:', err);
|
||||
setError(err instanceof Error ? err.message : 'Failed to save user');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRefresh = async () => {
|
||||
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);
|
||||
} catch (error) {
|
||||
console.error('Failed to refresh users:', error);
|
||||
} finally {
|
||||
setLoadingUsers(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
@@ -61,8 +201,8 @@ export default function UsersPage() {
|
||||
<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">
|
||||
<option value="">Select Role</option>
|
||||
<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>
|
||||
{roles.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
@@ -78,9 +218,23 @@ export default function UsersPage() {
|
||||
</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={() => { if(!activeUser) return; setEditingId(activeUser.id); setForm({...activeUser}); setShowModal(true); }} 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={() => {
|
||||
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);
|
||||
}} 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={() => setUsers([...users])} className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg"><RefreshCcw size={16}/> Refresh</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>
|
||||
|
||||
@@ -88,6 +242,11 @@ export default function UsersPage() {
|
||||
<input className="bg-white rounded-lg shadow px-4 py-2 text-sm" placeholder="Search user..." value={search} onChange={e => setSearch(e.target.value)} />
|
||||
|
||||
{/* TABLE */}
|
||||
{loadingUsers ? (
|
||||
<div className="bg-white rounded-xl shadow p-8 text-center">
|
||||
<p className="text-gray-500">Loading users...</p>
|
||||
</div>
|
||||
) : (
|
||||
<MaterialTable
|
||||
title="Users"
|
||||
columns={[
|
||||
@@ -101,6 +260,7 @@ export default function UsersPage() {
|
||||
onRowClick={(_, rowData) => setActiveUser(rowData as User)}
|
||||
options={{ actionsColumnIndex: -1, search: false, paging: true, sorting: true, rowStyle: rowData => ({ backgroundColor: activeUser?.id === (rowData as User).id ? "#EEF2FF" : "#FFFFFF" }) }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* MODAL */}
|
||||
@@ -108,17 +268,82 @@ export default function UsersPage() {
|
||||
<div className="fixed inset-0 bg-black/40 flex items-center justify-center">
|
||||
<div className="bg-white rounded-xl p-6 w-96 space-y-3">
|
||||
<h2 className="text-lg font-semibold">{editingId ? "Edit User" : "Add User"}</h2>
|
||||
<input className="w-full border px-3 py-2 rounded" placeholder="Name" value={form.name} onChange={e => setForm({...form, name: e.target.value})} />
|
||||
<input className="w-full border px-3 py-2 rounded" placeholder="Email" value={form.email} onChange={e => setForm({...form, email: e.target.value})} />
|
||||
<select value={form.roleId} onChange={e => setForm({...form, roleId: e.target.value})} className="w-full border px-3 py-2 rounded mt-2">
|
||||
<option value="">Select Role</option>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-2 rounded text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<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})}
|
||||
disabled={saving}
|
||||
/>
|
||||
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
type="email"
|
||||
placeholder="Email *"
|
||||
value={form.email}
|
||||
onChange={e => setForm({...form, email: e.target.value})}
|
||||
disabled={saving}
|
||||
/>
|
||||
|
||||
{!editingId && (
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
type="password"
|
||||
placeholder="Password * (min 8 characters)"
|
||||
value={form.password || ""}
|
||||
onChange={e => setForm({...form, password: e.target.value})}
|
||||
disabled={saving}
|
||||
/>
|
||||
)}
|
||||
|
||||
<select
|
||||
value={form.roleId}
|
||||
onChange={e => setForm({...form, roleId: e.target.value})}
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
disabled={loadingRoles || saving}
|
||||
>
|
||||
<option value="">Select Role *</option>
|
||||
{roles.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}
|
||||
</select>
|
||||
<button onClick={() => setForm({...form, status: form.status === "ACTIVE" ? "INACTIVE" : "ACTIVE"})} className="w-full border rounded px-3 py-2">Status: {form.status}</button>
|
||||
<input type="date" className="w-full border px-3 py-2 rounded" value={form.createdAt} onChange={e => setForm({...form, createdAt: e.target.value})} />
|
||||
|
||||
<button
|
||||
onClick={() => setForm({...form, status: form.status === "ACTIVE" ? "INACTIVE" : "ACTIVE"})}
|
||||
className="w-full border rounded px-3 py-2"
|
||||
disabled={saving}
|
||||
>
|
||||
Status: {form.status}
|
||||
</button>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-3">
|
||||
<button onClick={() => setShowModal(false)}>Cancel</button>
|
||||
<button onClick={handleSave} className="bg-[#4c5f9e] text-white px-4 py-2 rounded">Save</button>
|
||||
<button
|
||||
onClick={() => { setShowModal(false); setError(null); }}
|
||||
className="px-4 py-2"
|
||||
disabled={saving}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="bg-[#4c5f9e] text-white px-4 py-2 rounded disabled:opacity-50"
|
||||
disabled={saving || loadingRoles}
|
||||
>
|
||||
{saving ? "Saving..." : "Save"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user