Frontend: Course list data loading and display

[rtibbles]

Overview

Implement data loading and display for the list of assigned courses on the Courses page, including active/inactive status management.

Design Reference

See parent product issue for screenshot showing the course list layout with active/inactive toggles.

Implementation

1. Create CourseAssignmentResource

Create API resource in packages/kolibri-common/apiResources/CourseAssignmentResource.js:

import { Resource } from 'kolibri/apiResource';

export default new Resource({
  name: 'courseassignment',
});

This provides methods like fetchCollection, saveModel, deleteModel, etc.

2. Fetch Course Assignments

Use CourseAssignmentResource to load assignments for the current classroom:

CourseAssignmentResource.fetchCollection({
  getParams: { collection: classroomId }
})

• Include related course ContentNode data
• Handle loading and error states

3. Course List Display

Display each assigned course with:

• Course title
• Course metadata (channel, description, etc.)
• Active/inactive status toggle
• Actions menu (preview, edit assignment, delete)

4. Active/Inactive Toggle

Implement toggle for course visibility:

• Use CourseAssignmentResource.saveModel() to update is_active field
• Optimistic UI updates
• Error handling and rollback

5. Empty State

When no courses are assigned:

• Show empty state message
• Prompt to add first course

6. Handle Missing Courses

Gracefully display courses whose ContentNode is not available on device:

• Show course assignment even if content is missing
• Indicate that course content is not available
• Allow deletion of assignment

References

• Lessons list: kolibri/plugins/coach/assets/src/views/lessons/
• LessonResource: packages/kolibri-common/apiResources/LessonResource.js
• Reuse existing list components where possible