@mui-toolpad-extended-tuni/courses 3.0.0

package/README.md

@@ -0,0 +1,320 @@
+# @mui-toolpad-extended-tuni/courses
+
+Courses microservice extension for MUI Toolpad Extended TUNI. This package provides course management functionality, course routing, course tools, and course-related components.
+
+## Installation
+
+```bash
+npm install @mui-toolpad-extended-tuni/courses
+```
+
+**Note**: This package requires `mui-toolpad-extended-tuni@^3.0.0` as a peer dependency.
+
+## Peer Dependencies
+
+- `mui-toolpad-extended-tuni@^3.0.0`
+- `react@^19.0.0`
+- `react-dom@^19.0.0`
+- `react-router-dom@^7.0.0`
+- `@mui/material@^7.0.0`
+- `@mui/icons-material@^7.0.0`
+- `@mui/x-date-pickers@^7.0.0`
+- `@emotion/react@^11.0.0`
+- `@emotion/styled@^11.0.0`
+- `axios@^1.7.0`
+- `zustand@^4.5.0`
+
+## Usage
+
+### Basic Setup
+
+The courses microservice automatically registers itself when imported:
+
+```tsx
+import { BrowserRouter } from 'react-router-dom';
+import { LMSProvider, Microservices } from 'mui-toolpad-extended-tuni';
+import { CourseMicroservice } from '@mui-toolpad-extended-tuni/courses';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <LMSProvider>
+        <Microservices>
+          <CourseMicroservice />
+          {/* Other microservices */}
+        </Microservices>
+      </LMSProvider>
+    </BrowserRouter>
+  );
+}
+```
+
+### Using Course Store
+
+```tsx
+import { useCourseStore } from '@mui-toolpad-extended-tuni/courses';
+
+function MyComponent() {
+  const { courses, learningCourses, teachingCourses, getCourses } = useCourseStore();
+  
+  useEffect(() => {
+    getCourses();
+  }, [getCourses]);
+  
+  return (
+    <div>
+      {learningCourses.map(course => (
+        <div key={course.id}>{course.title}</div>
+      ))}
+    </div>
+  );
+}
+```
+
+### Course Components
+
+```tsx
+import { CourseList, CourseItem, CourseTools } from '@mui-toolpad-extended-tuni/courses';
+
+function CoursesPage() {
+  return (
+    <CourseList displayMode="course" />
+  );
+}
+```
+
+### Course Navigation Builder
+
+```tsx
+import { CourseNavigationBuilder } from '@mui-toolpad-extended-tuni/courses';
+
+function Navigation() {
+  return <CourseNavigationBuilder />;
+}
+```
+
+### Creating Custom Course Microservices
+
+You can create custom microservices that integrate with the course system. Here's a complete example:
+
+```tsx
+import ScienceIcon from "@mui/icons-material/Science";
+import { useMemo, useEffect } from "react";
+import { NavigationPageStoreItem } from "mui-toolpad-extended-tuni";
+import { useCourseMicroserviceRegistration } from '@mui-toolpad-extended-tuni/courses';
+
+/**
+ * Example: EduTest Course Microservice
+ * 
+ * This demonstrates how to create a self-contained tool that integrates
+ * with the Course system. Must be rendered as a child of CourseMicroservice.
+ */
+const EduTest = () => {
+  const {
+    registerCourseMicroservice,
+    unregisterCourseMicroservice,
+  } = useCourseMicroserviceRegistration();
+
+  // Define navigation structure with nested routes
+  const eduTestNavigation: NavigationPageStoreItem = useMemo(
+    () => ({
+      kind: "page",
+      segment: "edutest",
+      title: "EduTest",
+      iconFC: ScienceIcon,
+      metadata: {
+        description: "EduTest is a microservice for testing",
+        forRoles: ["teacher", "student"],
+        isRootTool: true,
+      },
+      children: [
+        {
+          kind: "page",
+          segment: "dashboard",
+          title: "Dashboard",
+          view: DashboardView,
+          metadata: {
+            description: "Dashboard for EduTest",
+            forRoles: ["teacher", "student"],
+          },
+          children: [
+            {
+              kind: "page",
+              segment: "subdashboard",
+              title: "SubDashboard",
+              showTitle: false, // Hide title in UI
+              view: SubDashboardView,
+              metadata: {
+                description: "SubDashboard for EduTest",
+                forRoles: ["teacher", "student"],
+              },
+            },
+          ],
+        },
+        {
+          kind: "page",
+          segment: "assignments",
+          title: "Assignments",
+          view: AssignmentsView,
+          metadata: {
+            description: "Assignments for EduTest",
+            forRoles: ["teacher", "student"],
+          },
+        },
+      ],
+    }),
+    []
+  );
+
+  useEffect(() => {
+    registerCourseMicroservice(eduTestNavigation);
+    return () => {
+      unregisterCourseMicroservice(eduTestNavigation.segment);
+    };
+  }, [registerCourseMicroservice, unregisterCourseMicroservice, eduTestNavigation]);
+
+  return null; // This component doesn't render anything
+};
+
+// Your view components
+const DashboardView = () => <div>Dashboard View</div>;
+const AssignmentsView = () => <div>Assignments View</div>;
+const SubDashboardView = () => <div>SubDashboard View</div>;
+
+export default EduTest;
+```
+
+**Usage in your app:**
+
+```tsx
+import { CourseMicroservice } from '@mui-toolpad-extended-tuni/courses';
+import EduTest from './EduTest';
+
+function App() {
+  return (
+    <CourseMicroservice>
+      <EduTest />
+      {/* Other course microservices */}
+    </CourseMicroservice>
+  );
+}
+```
+
+This creates routes like:
+- `/courses/:courseCode/:instance/edutest` - Shows tool selector
+- `/courses/:courseCode/:instance/edutest/dashboard` - Shows Dashboard view
+- `/courses/:courseCode/:instance/edutest/dashboard/subdashboard` - Shows SubDashboard view
+- `/courses/:courseCode/:instance/edutest/assignments` - Shows Assignments view
+
+## EventBus Integration with Calendar Package
+
+The courses package automatically publishes course events to the EventBus, which the calendar package can consume for automatic calendar integration. **This integration is automatic** - no additional setup needed!
+
+### How It Works
+
+1. **Courses Package** includes `CourseEventPublisher` (automatically included in `CourseMicroservice`) which:
+   - Monitors course data from `useCourseStore`
+   - Converts course events (lectures, exercises, exams, deadlines) to generic calendar events
+   - Publishes them to the EventBus via `eventBus.publish('courses', events)`
+
+2. **Calendar Package** includes `CalendarEventAggregator` (automatically included in `CalendarMicroservice`) which:
+   - Subscribes to EventBus events
+   - Converts generic events to calendar events with proper colors
+   - Updates the calendar display automatically
+
+### Setup for EventBus Integration
+
+Simply include both microservices - the integration happens automatically:
+
+```tsx
+import { BrowserRouter } from 'react-router-dom';
+import { LMSProvider, Microservices } from 'mui-toolpad-extended-tuni';
+import { CourseMicroservice } from '@mui-toolpad-extended-tuni/courses';
+import { CalendarMicroservice } from '@mui-toolpad-extended-tuni/calendar';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <LMSProvider>
+        <Microservices>
+          {/* CourseEventPublisher is automatically included */}
+          <CourseMicroservice />
+          
+          {/* CalendarEventAggregator is automatically included */}
+          <CalendarMicroservice />
+        </Microservices>
+      </LMSProvider>
+    </BrowserRouter>
+  );
+}
+```
+
+**That's it!** When both packages are installed:
+- ✅ Course events (lectures, exercises, exams, deadlines) are automatically published to the EventBus
+- ✅ The calendar automatically receives and displays these events
+- ✅ Events are color-coded by course subject and level
+- ✅ No additional configuration needed - it works automatically!
+
+### Event Structure
+
+Course events are published with this structure:
+
+```typescript
+{
+  id: string;
+  title: string;
+  start: string; // ISO date string
+  end: string; // ISO date string
+  metadata: {
+    source: 'courses',
+    courseCode: string;
+    courseTitle: string;
+    subject: string;
+    courseLevel: 'basic' | 'intermediate' | 'advanced';
+    type: 'lecture' | 'exercise' | 'exam' | 'deadline' | 'other';
+    description?: string;
+    location?: string;
+  }
+}
+```
+
+## Exports
+
+### Components
+- `CourseMicroservice` - Main microservice component
+- `CourseList` - List of courses
+- `CourseItem` - Individual course item
+- `CourseTools` - Course tools displayer
+- `CourseNavigationBuilder` - Navigation builder for courses
+- `CourseCodeLoader` - Loader for course code routes
+- `CourseInstanceLoader` - Loader for course instance routes
+- `CourseInstanceSelector` - Selector for course instances
+- `LtiLoginUrlForm` - LTI login URL form
+
+### Hooks
+- `useCourseMicroserviceRegistration` - Hook for registering custom course microservices (must be used within `CourseMicroservice` context)
+
+### Store
+- `useCourseStore` - Zustand store for course management
+
+### Types
+- `Course` - Course type
+- `CourseRaw` - Raw course data type
+- `courseRole` - Course role type
+- `courseLevel` - Course level type
+- `courseEventType` - Course event type
+- `enrollmentStatus` - Enrollment status type
+
+## Features
+
+- Course management and CRUD operations
+- Course enrollment handling
+- Course navigation integration
+- Course tools and microservices
+- Course filtering and grouping
+- Course instance support
+- LTI integration support
+
+## License
+
+MIT

package/dist/CourseCodeLoader.d.ts

@@ -0,0 +1,15 @@
+/** @format */
+/**
+ * Component for loading and managing course code level data.
+ *
+ * @version 2.1.0
+ * @new-component
+ * - Handles course code level routing
+ * - Manages course code state in store
+ * - Provides course instance list context
+ * - Supports navigation between instances
+ * @description - This component is responsible for loading the course data and rendering the course tools
+ * @returns {React.ReactElement} - Returns the course loader component
+ */
+declare const CourseCodeLoader: () => import("react/jsx-runtime").JSX.Element;
+export default CourseCodeLoader;

package/dist/CourseEventPublisher.d.ts

@@ -0,0 +1,8 @@
+/** @format */
+/**
+ * CourseEventPublisher publishes course events to the EventBus.
+ * This component converts course data to generic events and publishes them.
+ * It maintains separation by only knowing about courses and the EventBus API.
+ */
+declare const CourseEventPublisher: React.FC;
+export default CourseEventPublisher;

package/dist/CourseInstanceLoader.d.ts

@@ -0,0 +1,16 @@
+/** @format */
+/**
+ * Component for loading specific course instance data.
+ *
+ * @version 2.1.0
+ * @new-component
+ * - Manages course instance state
+ * - Handles instance-specific data loading
+ * - Provides instance context to children
+ * - Supports microservice integration
+ * - Handles instance not found scenarios
+ * @description - This component is responsible for loading the course data and rendering the course tools
+ * @returns {React.ReactElement} - Returns the course loader component
+ */
+declare const CourseInstanceLoader: () => import("react/jsx-runtime").JSX.Element;
+export default CourseInstanceLoader;

package/dist/CourseInstanceSelector.d.ts

@@ -0,0 +1,15 @@
+/** @format */
+/**
+ * Component for selecting course instances from a filtered list.
+ *
+ * @version 2.1.0
+ * @new-component
+ * - Provides instance selection UI for courses
+ * - Groups instances by course code
+ * - Handles active/inactive instance states
+ * - Supports nested navigation structure
+ *
+ * @param {Course[]} courses - Available course instances
+ */
+declare const CourseInstanceSelector: () => import("react/jsx-runtime").JSX.Element;
+export default CourseInstanceSelector;

package/dist/CourseItem/CourseActions.d.ts

@@ -0,0 +1,6 @@
+/** @format */
+type CourseActionsProps = {
+    showEnrollmentOpen: boolean;
+};
+export declare const CourseActions: ({ showEnrollmentOpen }: CourseActionsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/CourseItem/CourseHeader.d.ts

@@ -0,0 +1,6 @@
+import { Course } from '../store/useCourseStore';
+type CourseHeaderProps = {
+    course: Course;
+};
+export declare const CourseHeader: ({ course }: CourseHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/CourseItem/CourseHeaderActions.d.ts

@@ -0,0 +1,12 @@
+import { Course } from '../store/useCourseStore';
+type CourseHeaderActionsProps = {
+    course: Course;
+    courseColor: string;
+    isTeacher: boolean;
+    showEnrollmentOpen?: boolean;
+    onSettingsClick: (e: React.MouseEvent<HTMLElement>) => void;
+    onEnroll?: (e: React.MouseEvent<HTMLElement>) => void;
+    onTeacherEnroll?: (e: React.MouseEvent<HTMLElement>) => void;
+};
+export declare const CourseHeaderActions: ({ course, courseColor, isTeacher, showEnrollmentOpen, onSettingsClick, onEnroll, onTeacherEnroll, }: CourseHeaderActionsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/CourseItem/CourseIcon.d.ts

@@ -0,0 +1,8 @@
+import { SvgIconComponent } from '@mui/icons-material';
+export interface SubjectConfig {
+    icon: string;
+    baseColor: string;
+    levelShades: Record<string, string>;
+}
+export declare const createCourseIcon: (courseColor: string, config: SubjectConfig) => SvgIconComponent;
+export default createCourseIcon;

package/dist/CourseItem/CourseInfo.d.ts

@@ -0,0 +1,8 @@
+import { Course } from '../store/useCourseStore';
+type CourseInfoProps = {
+    course: Course;
+    displayMode: "course" | "instance" | "instanceList";
+    hasUpcomingEvents: boolean;
+};
+export declare const CourseInfo: ({ course, displayMode, hasUpcomingEvents, }: CourseInfoProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/CourseItem/CourseItem.d.ts

@@ -0,0 +1,9 @@
+import { Course } from '../store/useCourseStore';
+type CourseItemProps = {
+    course: Course;
+    isSelected?: boolean;
+    displayMode?: "course" | "instance" | "instanceList";
+    onClick: (course: Course) => void;
+};
+declare const CourseItem: ({ course, displayMode, onClick, }: CourseItemProps) => import("react/jsx-runtime").JSX.Element;
+export default CourseItem;

package/dist/CourseList.d.ts

@@ -0,0 +1,6 @@
+type CourseListProps = {
+    displayMode?: "course" | "instance" | "instanceList";
+    containerHeight?: string | number;
+};
+declare const CourseList: ({ displayMode, containerHeight, }: CourseListProps) => import("react/jsx-runtime").JSX.Element;
+export default CourseList;

package/dist/CourseManager.d.ts

@@ -0,0 +1,2 @@
+declare const CourseManager: () => import("react/jsx-runtime").JSX.Element;
+export default CourseManager;

package/dist/CourseMicroservice.d.ts

@@ -0,0 +1,42 @@
+import { default as React, ReactNode } from 'react';
+interface CourseMicroserviceProps {
+    children?: ReactNode;
+}
+/**
+ * CourseMicroservice Component
+ *
+ * @version 3.0.0
+ *
+ * Fully self-contained microservice that handles all course-related functionality:
+ * - Course data fetching and management (via CourseManager)
+ * - Course navigation building
+ * - Course code and instance routing (/:code, /:code/:instance)
+ * - Course tools display
+ * - Course microservice registration and routing (/:code/:instance/:microservice)
+ * - Route registration with NavigationRegistry (via CourseRoutesProvider)
+ *
+ * Course microservices (like EduTest) are passed as children and register
+ * themselves through the CourseMicroserviceContext.
+ *
+ * Routes handled:
+ * - /:code - Course code selection (CourseCodeLoader + CourseInstanceSelector)
+ * - /:code/:instance - Course instance (CourseInstanceLoader + CourseTools)
+ * - /:code/:instance/:microservice/* - Course microservice routes
+ *
+ * @breaking-changes
+ * - v3.0.0: Now fully self-contained - includes CourseManager and CourseRoutesProvider
+ * - v2.0.0: Uses local state instead of Zustand store
+ * - Context provides allCourseMicroserviceNavigation array
+ * - Integrates with useNavigationStore to notify about course microservices
+ * - v3.1.0: Context logic extracted to separate context file
+ *
+ * @example
+ * ```tsx
+ * <CourseMicroservice>
+ *   <EduTest />
+ *   <EduTest2 />
+ * </CourseMicroservice>
+ * ```
+ */
+declare const CourseMicroservice: React.FC<CourseMicroserviceProps>;
+export default CourseMicroservice;

package/dist/CourseRoutesProvider.d.ts

@@ -0,0 +1,12 @@
+/** @format */
+/**
+ * CourseRoutesProvider Component
+ *
+ * Registers course routes with the NavigationRegistry as a route provider.
+ * This allows Microservices.tsx to be microservice-agnostic - it doesn't need
+ * to know about course routes specifically.
+ *
+ * @version 1.0.0
+ */
+declare const CourseRoutesProvider: () => null;
+export default CourseRoutesProvider;

package/dist/CourseTools.d.ts

@@ -0,0 +1,21 @@
+import { NavigationPageStoreItem } from 'mui-toolpad-extended-tuni';
+interface CourseToolsProps {
+    microservices?: NavigationPageStoreItem[];
+}
+/**
+ * Component for managing and displaying course-specific tools.
+ *
+ * @version 2.1.0
+ * @updates
+ * - Added support for microservice-based tool management
+ * - Introduced enabled/available tools separation
+ * - Added service enablement/disablement functionality
+ * - Enhanced teacher-specific tool configuration
+ * - Improved UI with centered headings and tool groups
+ *
+ * @component
+ * @param {CourseToolsProps} props
+ * @param {NavigationPageStoreItem[]} props.microservices - Array of available microservice tools
+ */
+declare const CourseTools: ({ microservices }: CourseToolsProps) => import("react/jsx-runtime").JSX.Element;
+export default CourseTools;

package/dist/Forms/CourseSettings/CourseSettings.d.ts

@@ -0,0 +1,23 @@
+/** @format */
+/**
+ * CourseSettings Component
+ *
+ * @version 3.0.0
+ * @breaking-changes
+ * - Restructured import paths to follow feature-based organization
+ * - Enhanced notification handling through dedicated store
+ * - Improved dialog management with better state handling
+ * - Updated course store integration with new path structure
+ * - Enhanced TypeScript strict mode compliance
+ * - Standardized string literals for consistency
+ *
+ * Provides interface for:
+ * - Managing course basic information
+ * - Configuring course visibility
+ * - Managing enrollment settings
+ * - Configuring staff access
+ * - Setting data processing preferences
+ * - Managing course relationships
+ */
+declare const CourseSettings: () => import("react/jsx-runtime").JSX.Element;
+export default CourseSettings;

package/dist/Forms/CourseSettings/CourseSettingsTabs.d.ts

@@ -0,0 +1,9 @@
+import { CourseRaw } from '../../store/useCourseStore';
+import { UserData } from 'mui-toolpad-extended-tuni';
+type CourseSettingsProps = {
+    formData: CourseRaw;
+    handleUpdateFormData: (newData: CourseRaw) => void;
+    courseUsers?: UserData[];
+};
+export default function CourseSettingsTabs({ formData, handleUpdateFormData, courseUsers, }: CourseSettingsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Forms/CourseSettings/tabs/BasicInfoTab.d.ts

@@ -0,0 +1,7 @@
+import { CourseRaw } from '../../../store/useCourseStore';
+interface BasicInfoTabProps {
+    formData: CourseRaw;
+    setFormData: (data: CourseRaw) => void;
+}
+export default function BasicInfoTab({ formData, setFormData, }: BasicInfoTabProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Forms/CourseSettings/tabs/DataProcessingTab.d.ts

@@ -0,0 +1,24 @@
+import { CourseRaw } from '../../../store/useCourseStore';
+interface DataProcessingTabProps {
+    formData: CourseRaw;
+    setFormData: (data: CourseRaw) => void;
+}
+/**
+ * DataProcessingTab Component
+ *
+ * @version 3.0.0
+ * @breaking-changes
+ * - Updated component import paths to feature-based structure
+ * - Enhanced type safety for data processing options
+ * - Standardized string literals for legal bases
+ * - Improved default value handling
+ * - Added proper type definitions for processing settings
+ *
+ * Provides interface for:
+ * - Setting data processing legal basis
+ * - Managing special category data handling
+ * - Configuring retention periods
+ * - Setting data processing purposes
+ */
+export default function DataProcessingTab({ formData, setFormData, }: DataProcessingTabProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Forms/CourseSettings/tabs/EnrollmentTab.d.ts

@@ -0,0 +1,28 @@
+import { UserData } from 'mui-toolpad-extended-tuni';
+import { CourseRaw } from '../../../store/useCourseStore';
+interface EnrollmentTabProps {
+    formData: CourseRaw;
+    setFormData: (data: CourseRaw) => void;
+    courseUsers?: UserData[];
+}
+/**
+ * EnrollmentTab Component
+ *
+ * @version 3.0.0
+ * @breaking-changes
+ * - Enhanced TypeScript string literal types
+ * - Improved student list management with better state handling
+ * - Updated styling for better visual hierarchy
+ * - Enhanced date handling with proper typing
+ * - Improved responsive design for mobile and desktop views
+ * - Added proper type definitions for enrollment statuses
+ *
+ * Provides interface for:
+ * - Managing course enrollment settings
+ * - Handling student enrollment requests
+ * - Setting enrollment periods
+ * - Managing enrollment capacity
+ * - Viewing enrolled and pending students
+ */
+export default function EnrollmentTab({ formData, setFormData, courseUsers: _courseUsers, }: EnrollmentTabProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Forms/CourseSettings/tabs/RelationshipsTab.d.ts

@@ -0,0 +1,25 @@
+import { CourseRaw } from '../../../store/useCourseStore';
+interface RelationshipsTabProps {
+    formData: CourseRaw;
+    setFormData: (data: CourseRaw) => void;
+}
+/**
+ * RelationshipsTab Component
+ *
+ * @version 3.0.0
+ * @breaking-changes
+ * - Updated course store import path to feature-based structure
+ * - Enhanced type definitions for course relationships
+ * - Standardized string literals for relationship types
+ * - Improved relationship type descriptions
+ * - Added better type safety for relationship management
+ *
+ * Provides interface for:
+ * - Managing course prerequisites
+ * - Setting up course continuations
+ * - Defining alternative courses
+ * - Managing course dependencies
+ * - Creating course relationship networks
+ */
+export default function RelationshipsTab({ formData, setFormData, }: RelationshipsTabProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Forms/CourseSettings/tabs/StaffTab.d.ts

@@ -0,0 +1,26 @@
+import { CourseRaw } from '../../../store/useCourseStore';
+import { UserData } from 'mui-toolpad-extended-tuni';
+interface StaffTabProps {
+    formData: CourseRaw;
+    setFormData: (data: CourseRaw) => void;
+    courseUsers?: UserData[];
+}
+/**
+ * StaffTab Component
+ *
+ * @version 3.0.0
+ * @breaking-changes
+ * - Updated course store import path to feature-based structure
+ * - Enhanced TypeScript type definitions for staff roles
+ * - Improved staff removal confirmation handling
+ * - Updated styling for better accessibility
+ * - Added proper aria labels for actions
+ *
+ * Provides interface for:
+ * - Managing course staff members
+ * - Adding/removing teaching staff
+ * - Viewing staff permissions
+ * - Managing staff roles
+ */
+export default function StaffTab({ formData, setFormData }: StaffTabProps): import("react/jsx-runtime").JSX.Element;
+export {};