Hiyve Components - v1.0.0
    Preparing search index...

    Interface AssignmentMetadataProps

    Props for the AssignmentMetadata component.

    Displays and manages assignment metadata fields including due date, time estimate, status, and assigned participants. When readOnly is true, all fields are displayed but not editable.

    <AssignmentMetadata
    dueDate="2024-04-01T00:00:00.000Z"
    timeHours={2}
    timeMinutes={30}
    status="in_progress"
    assignedTo={['user-1']}
    participants={[{ userId: 'user-1', userName: 'Alice' }]}
    onStatusChange={(status) => console.log(status)}
    onDueDateChange={(date) => console.log(date)}
    onTimeHoursChange={(hours) => console.log(hours)}
    onTimeMinutesChange={(minutes) => console.log(minutes)}
    onAssignedToChange={(userIds) => console.log(userIds)}
    labels={labels}
    icons={icons}
    colors={colors}
    styles={styles}
    />
    interface AssignmentMetadataProps {
        assignedTo: string[];
        colors: AssignmentEditorColors;
        completedBy?: string[];
        currentUserId?: string;
        dueDate: string | null;
        hideAssignedTo?: boolean;
        hideCompleteToggle?: boolean;
        icons: AssignmentEditorIcons;
        labels: AssignmentEditorLabels;
        onAssignedToChange: (userIds: string[]) => void;
        onDueDateChange: (date: string | null) => void;
        onTimeHoursChange: (hours: number) => void;
        onTimeMinutesChange: (minutes: number) => void;
        onToggleComplete?: () => void;
        participants: { userId: string; userName?: string }[];
        practicedMinutes?: number;
        readOnly?: boolean;
        status: AssignmentStatus;
        styles: AssignmentEditorStyles;
        timeHours: number;
        timeMinutes: number;
    }
    Index

    Properties

    assignedTo: string[]

    List of assigned user IDs

    Custom colors

    completedBy?: string[]

    User IDs that have marked the assignment complete on their side. The metadata bar uses this both to decide what label the mark-complete button shows for the current viewer and to colour the status chip when all assignees are done.

    currentUserId?: string

    Identifier of the user currently viewing the editor — used to decide whether to show the Mark complete / Re-open button (only shown when this user is in assignedTo).

    dueDate: string | null

    Current due date (ISO string or null)

    hideAssignedTo?: boolean

    Hide the "Assigned to" row entirely. Useful when a non-owner (e.g. a student) opens the assignment — they shouldn't see who else is on the assignment.

    hideCompleteToggle?: boolean

    Suppress the per-viewer "Mark complete" / "Re-open" button in the metadata bar. Use when completion is driven externally (e.g. the assignment owner toggles each student's status in a dedicated activity panel rather than letting assignees self-mark).

    Custom icons

    Custom labels

    onAssignedToChange: (userIds: string[]) => void

    Callback when assigned users change

    onDueDateChange: (date: string | null) => void

    Callback when due date changes

    onTimeHoursChange: (hours: number) => void

    Callback when hours estimate changes

    onTimeMinutesChange: (minutes: number) => void

    Callback when minutes estimate changes

    onToggleComplete?: () => void

    Toggle callback fired when an assignee clicks Mark complete or Re-open. The metadata bar simply notifies; the parent owns the completedBy mutation.

    participants: { userId: string; userName?: string }[]

    Available participants for assignment

    practicedMinutes?: number

    Total minutes practiced so far (only consulted in readOnly mode). Used to show "time remaining" alongside the time-estimate target. If omitted, the read-only display falls back to just the target.

    readOnly?: boolean

    Whether metadata fields are read-only

    Current assignment status. Derived from completedBy + activity — the metadata bar treats this value as read-only and renders it as a coloured chip; the user controls completion through the per-assignee Mark-complete button instead.

    Custom styles

    timeHours: number

    Current hours component of the time estimate

    timeMinutes: number

    Current minutes component of the time estimate