User and Class Management
Relevant source files
The following files were used as context for generating this wiki page:
- e2e/tests/users/user-management.spec.ts
- e2e/tests/classes/class-management.spec.ts
- frontend/src/pages/user/[userId]/edit.tsx
- frontend/src/pages/class/[classId]/edit.tsx
- frontend/src/components/class/ClassForm.tsx
- frontend/src/pages/user/[userId]/detail.tsx
- e2e/tests/sessions/session-management.spec.ts
User and Class Management are core administrative features in the Collimator application. They provide the foundation for organizing educational structures, assigning roles, and managing access. The system allows administrators to perform full CRUD (Create, Read, Update, Delete) operations on users and classes.
Users can be assigned ADMIN or TEACHER roles, which dictates their permissions within the system. Classes are containers for educational activities, each associated with a specific teacher. This module is primarily managed through a web interface built with Next.js and backed by a NestJS API.
System Architecture
The management system follows a standard client-server architecture. The frontend, built with React and Next.js, provides the user interface for administrators. The backend, which can be inferred from the frontend's API calls and e2e tests, handles the business logic and data persistence.
Entity Relationship Diagram
The diagram below illustrates the relationship between Users and Classes. A Class must be assigned to one User with the TEACHER type. A TEACHER can be associated with multiple Classes.
User Management
User management allows administrators to create, edit, and delete users, as well as manage their roles. Only users with the ADMIN role can access these features.
Sources: e2e/tests/users/user-management.spec.ts:21-23
User Roles
The system defines two primary user types:
| Role | Description |
|---|---|
TEACHER | Can be assigned to classes. |
ADMIN | Can manage users and classes. Can be promoted from or demoted to TEACHER. |
Sources: e2e/tests/users/user-management.spec.ts:9, 90-97, 120-127
Frontend Operations
The user management interface is accessible via the /user path. It consists of a list view, a creation form, an edit form, and a detail view.
User Creation and Editing Flow
The following diagram shows the frontend flow for editing a user. The creation flow is similar but starts from the user list page's "Create" button.
User Form (UserForm)
The UserForm component is used for both creating and editing users. It captures the following information:
| Field | Type | Validation | Description |
|---|---|---|---|
name | string | Required | The user's full name. |
email | string | Required | The user's email address. |
type | enum | Required | The user's role (ADMIN or TEACHER). |
Sources: frontend/src/pages/user/[userId]/edit.tsx:37-43, e2e/tests/users/user-management.spec.ts:36-38
Backend API Interaction
The frontend interacts with the backend through a set of RESTful API endpoints.
Sequence Diagram: Update User
This diagram shows the sequence of events when an admin updates a user's details.
Class Management
Class management allows administrators to create, edit, and delete classes. A class is defined by a name and an assigned teacher.
Sources: e2e/tests/classes/class-management.spec.ts:19-21
Frontend Operations
The class management interface is accessible via the /class path.
Class Creation and Editing Flow
Editing a class involves fetching the class data, populating the ClassForm, and submitting the changes. The ClassForm includes a dropdown to select a teacher, which is populated by fetching all users.
Class Form (ClassForm)
The ClassForm component is used for creating and editing classes.
| Field | Type | Validation | Description |
|---|---|---|---|
name | string | Required | The name of the class. |
teacherId | number | Required | The ID of the user assigned as a teacher. |
The teacherId field is rendered as a <Select> dropdown, populated with a list of all available users.
Sources: frontend/src/components/class/ClassForm.tsx:25-28, 44-53
Backend API Interaction
The frontend uses specific hooks to communicate with the class-related API endpoints.
Sequence Diagram: Create Class
This diagram illustrates the process of creating a new class, including fetching the list of teachers to populate the form.
Summary
The User and Class Management modules are essential administrative tools within the Collimator project. They provide a clear and straightforward interface for managing the core entities of users and classes. The architecture relies on a separation of concerns between the Next.js frontend, which handles the UI and state management via React hooks (like SWR), and a backend API that manages data persistence and business logic. The end-to-end tests confirm a robust set of CRUD capabilities, ensuring that administrators can effectively structure the learning environment.