NexGenStudioDev/ciitm-frontend
Implement View, Edit, and Delete Teacher Functionality
Open
#207 opened on Aug 14, 2025
Ciitm FrontendONLY_FOR_NEW_CONTRIBUTORSReactResponsiveUi Updateatomic-designbest-practicesdocumentationenhancementfeature-requestgood first issuehelp wantedonlydust-wave
Repository metrics
- Stars
- (9 stars)
- PR merge metrics
- (PR metrics pending)
Description
👨💼 Admin Panel – Teacher Management Interface
The Teacher Management Interface empowers admins to fully manage teacher profiles within the system. This includes:
- ✅ Viewing all registered teachers
- ✏️ Editing teacher details
- 🗑️ Deleting teacher records
This feature is essential for maintaining accurate, up-to-date staff data.
🧭 User Flow
-
Landing on the Teacher Management Page
- Admin navigates to the Teacher Management section via the dashboard sidebar or navigation link.
- A list (or table) of all teachers is fetched and displayed on page load.
-
Viewing All Teachers
- Data is retrieved using:
GET /v1/user/findAllTeachers - Table/List displays:
- Name
- Role
- Specialization
- Experience
- Profile image
- Actions (Edit/Delete buttons)
- Data is retrieved using:
-
Editing a Teacher
- Admin clicks the ✏️ Edit button next to a teacher entry.
- A modal or a new form view opens with pre-filled data.
- Admin can modify:
- Name, Email, Role, Image
- Specialization, Experience
- Social Media links
- Submits via:
PUT /v1/admin/teacher/:id/update - Required JSON format: (see payload below)
-
Deleting a Teacher
- Admin clicks 🗑️ Delete button.
- A confirmation dialog appears to prevent accidental deletion.
- On confirmation:
DELETE /v1/admin/teacher/:id/delete - On success, the teacher is removed from the UI list.
🔗 API Endpoints
| Action | Method | Endpoint | Description |
|---|---|---|---|
| View All | GET | /v1/user/findAllTeachers |
Fetch all teacher profiles |
| Edit | PUT | /v1/admin/teacher/:id/update |
Update teacher by ID |
| Delete | DELETE | /v1/admin/teacher/:id/delete |
Delete teacher by ID |
Replace
:idwith the teacher’s actual ID in the URL.
📥 Edit Teacher – Example Request Payload
PUT /v1/admin/teacher/12345/update
{
"name": "Jane Doe",
"email": "jane.doe@example.com",
"image": "https://example.com/images/jane.jpg",
"role": "Math Teacher",
"Specialization": "Algebra",
"Experience": 10,
"social_media": [
{
"facebook": "https://facebook.com/jane.doe",
"linkedin": "https://linkedin.com/in/janedoe",
"twitter": "https://twitter.com/jane_doe",
"instagram": "https://instagram.com/jane.doe"
}
]
}
✅ Form Validation Rules
| Field | Type | Required | Notes |
|---|---|---|---|
| name | String | Yes | Minimum 3 characters |
| String | Yes | Must be a valid email format | |
| image | String | Yes | Must be a valid URL |
| role | String | Yes | Example: "English Teacher" |
| Specialization | String | Yes | Subject taught |
| Experience | Number | Yes | Must be greater than or equal to 0 |
| social_media | Array | Yes | Must contain exactly 1 object |
📱 Social Media Object
The social_media field must be an array containing exactly one object with the following structure:
| Platform | Type | Required | Example URL |
|---|---|---|---|
| String | Yes | https://facebook.com/username | |
| String | Yes | https://linkedin.com/in/username | |
| String | Yes | https://twitter.com/username | |
| String | Yes | https://instagram.com/username |