How omaremad20/course-management-dashboard works
This is an Angular course-management dashboard. Users browse, search, filter, and page through courses, then view details or add, edit, and delete records; form validation and confirmation/notification flows support those actions. The graph follows the documented capabilities and the sampled route, page, service, and delete-action code. Some reusable UI and API behavior is documented but not sampled, so those links rely on the README where stated; unsampled internals are not inferred.
Main entry points: course-list.ts Course list · app.routes.ts Route dispatch · course-form.ts Course form · delete-course-action.ts Delete action
Components 20
Application
- App shell
src/app/app.ts - Route dispatch
src/app/app.routes.ts
Course workflows
- Course list
src/app/features/courses/pages/course-list/course-list.ts - Course details
src/app/features/courses/pages/course-details/course-details.ts - Course form
src/app/features/courses/pages/course-form/course-form.ts - Course models
src/app/features/courses/models/ICourse.ts - Course cards
src/app/features/courses/components/course-card/course-card.ts - Empty courses
src/app/features/courses/components/empty-courses-state/empty-courses-state.ts - Delete action
src/app/features/courses/services/courses/deleteCourseAction/delete-course-action.ts - Form exit guard
src/app/features/courses/guards/form-exit/form-exit-guard.ts
Shared UI
- Generic table
src/app/shared/components/generic-table/generic-table.ts - Error states
src/app/shared/components/error-state/error-state.ts - Form fields
src/app/shared/components/form-field/form-field.ts - Confirm dialog
src/app/shared/components/confirm-dialog/confirm-dialog.ts - Navigation bar
src/app/shared/components/navbar/navbar.ts
Services
- Courses service
src/app/features/courses/services/courses/courses.ts - Dialog service
src/app/core/services/dialog/dialog.ts - Snackbar service
src/app/core/services/snackbar/snackbar.ts
Other components
- Course manager
- Course REST API
Connections 25
- Course manager → App shell: uses
README.md - App shell → Navigation bar: renders
src/app/app.ts - App shell → Route dispatch: hosts routes
- Route dispatch → Course list: routes to
src/app/app.routes.ts - Route dispatch → Course details: routes to
src/app/app.routes.ts - Route dispatch → Course form: routes to
src/app/app.routes.ts - Route dispatch → Form exit guard: guards forms
src/app/app.routes.ts - Course list → Courses service: fetches courses
src/app/features/courses/pages/course-list/course-list.ts - Course list → Generic table: renders
src/app/features/courses/pages/course-list/course-list.ts - Course list → Course cards: renders
src/app/features/courses/pages/course-list/course-list.ts - Course list → Empty courses: renders
src/app/features/courses/pages/course-list/course-list.ts - Course list → Error states: renders
src/app/features/courses/pages/course-list/course-list.ts - Course list → Delete action: requests deletion
src/app/features/courses/pages/course-list/course-list.ts - Course details → Courses service: fetches course
src/app/features/courses/pages/course-details/course-details.ts - Course details → Delete action: requests deletion
src/app/features/courses/pages/course-details/course-details.ts - Course form → Courses service: loads and saves
src/app/features/courses/pages/course-form/course-form.ts - Course form → Form fields: uses fields
src/app/features/courses/pages/course-form/course-form.ts - Course form → Dialog service: confirms updates
src/app/features/courses/pages/course-form/course-form.ts - Course form → Snackbar service: notifies
src/app/features/courses/pages/course-form/course-form.ts - Delete action → Dialog service: confirms deletion
src/app/features/courses/services/courses/deleteCourseAction/delete-course-action.ts - Delete action → Courses service: deletes course
src/app/features/courses/services/courses/deleteCourseAction/delete-course-action.ts - Delete action → Snackbar service: notifies
src/app/features/courses/services/courses/deleteCourseAction/delete-course-action.ts - Dialog service → Confirm dialog: opens
src/app/core/services/dialog/dialog.ts - Form exit guard → Dialog service: prompts user
src/app/features/courses/guards/form-exit/form-exit-guard.ts - Courses service → Course REST API: calls REST API
src/app/features/courses/services/courses/courses.ts