NexGenStudioDev/ciitm-frontend

Implement View, Edit, and Delete Teacher Functionality

Offen

#207 geöffnet am 14.08.2025

 (9 Kommentare) (0 Reaktionen) (1 zugewiesene Person)JavaScript (39 Forks)auto 404
Ciitm FrontendONLY_FOR_NEW_CONTRIBUTORSReactResponsiveUi Updateatomic-designbest-practicesdocumentationenhancementfeature-requestgood first issuehelp wantedonlydust-wave

Repository-Metriken

Stars
 (9 Sterne)
PR-Merge-Metriken
 (PR-Metriken ausstehend)

Beschreibung

👨‍💼 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

  1. 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.
  2. Viewing All Teachers

    • Data is retrieved using:
      GET /v1/user/findAllTeachers
      
    • Table/List displays:
      • Name
      • Email
      • Role
      • Specialization
      • Experience
      • Profile image
      • Actions (Edit/Delete buttons)
  3. 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)
  4. 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 :id with 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
email 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
facebook String Yes https://facebook.com/username
linkedin String Yes https://linkedin.com/in/username
twitter String Yes https://twitter.com/username
instagram String Yes https://instagram.com/username

Backend Issue

https://github.com/NexGenStudioDev/Ciitm-Backend/issues/61

Contributor Guide