@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Tables/Progress/cells/index.js

@@ -1,523 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import Box from "@mui/material/Box";
-import Chip from "@mui/material/Chip";
-import Grid from "@mui/material/Grid";
-import Typography from "@mui/material/Typography";
-import RemoveIcon from '@mui/icons-material/Remove';
-import DoneIcon from '@mui/icons-material/Done';
-import CloseIcon from '@mui/icons-material/Close';
-import TimelineIcon from "@mui/icons-material/Timeline";
-import { Link as RouterLink } from "react-router";
-import { grey, green, red, yellow } from "@mui/material/colors";
-import DefaultButton from "../../../Misc/DefaultColourButton/DefaultColourButton";
-import { HtmlTooltip } from "../styledComponents";
-import { getCellDataForFilter, getColorForPercentage } from "../helpers";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export function ExerciseCell({
-  icon,
-  backgroundColor,
-  submittedLate = false,
-  daysLate = 0,
-  showDaysLate = true,
-  t
-}) {
-  return /*#__PURE__*/_jsx(Box, {
-    component: "td",
-    sx: theme => ({
-      backgroundColor: backgroundColor || theme.palette.divider,
-      color: theme.palette.common.black
-    }),
-    children: /*#__PURE__*/_jsxs(Grid, {
-      container: true,
-      children: [/*#__PURE__*/_jsx(Grid, {
-        size: 12,
-        children: icon
-      }), submittedLate && /*#__PURE__*/_jsx(Grid, {
-        size: 12,
-        children: /*#__PURE__*/_jsx(Chip, {
-          variant: "outlined",
-          sx: theme => ({
-            color: theme.palette.common.black,
-            borderColor: theme.palette.common.black,
-            fontWeight: "bold"
-          }),
-          size: "small",
-          label: showDaysLate ? t("days_late", {
-            count: daysLate
-          }) : t("late_submission")
-        })
-      })]
-    })
-  });
-}
-export function DataCell({
-  t,
-  data,
-  total,
-  completed,
-  backgroundColor,
-  memberActivityLink,
-  type,
-  index,
-  submittedLate = false
-}) {
-  const completedTotal = `${completed} of ${total}`;
-  const [tooltipOpen, setTooltipOpen] = useState(false);
-  const buttonRef = useRef(null);
-  useEffect(() => {
-    const handleTabFocus = e => {
-      if (e.key === "Tab" && tooltipOpen) {
-        e.preventDefault();
-        buttonRef.current?.focus();
-      }
-      if (e.key === "Escape" && tooltipOpen) {
-        setTooltipOpen(false);
-      }
-    };
-    document.addEventListener("keydown", handleTabFocus);
-    return () => document.removeEventListener("keydown", handleTabFocus);
-  }, [tooltipOpen]);
-  return /*#__PURE__*/_jsx(Box, {
-    component: "td",
-    sx: theme => ({
-      backgroundColor: backgroundColor || theme.palette.divider,
-      color: theme.palette.common.white
-    }),
-    children: /*#__PURE__*/_jsxs(HtmlTooltip, {
-      tabIndex: `${index + 1}`,
-      open: tooltipOpen,
-      disableHoverListener: !type,
-      disableFocusListener: !type,
-      onOpen: () => setTooltipOpen(true),
-      onClose: () => setTooltipOpen(false),
-      title: /*#__PURE__*/_jsxs(_Fragment, {
-        children: [!(type === "correct" && data === "N/A") && /*#__PURE__*/_jsx(Typography, {
-          variant: "body1",
-          gutterBottom: true,
-          sx: {
-            color: 'inherit'
-          },
-          children: type === "avgPronuc" ? `${t("average_pronunciation_score_tooltip")} ${data}` : type === "correct" && data !== "N/A" ? `${data} correct` : `${data} complete`
-        }), type !== "avgPronuc" && /*#__PURE__*/_jsx(Typography, {
-          variant: "body2",
-          sx: {
-            color: 'inherit'
-          },
-          children: type === "percent" ? `${completedTotal} exercises completed.` : `${completedTotal} answers correct.`
-        }), /*#__PURE__*/_jsx("br", {}), memberActivityLink && /*#__PURE__*/_jsx(DefaultButton, {
-          ref: buttonRef,
-          startIcon: /*#__PURE__*/_jsx(TimelineIcon, {}),
-          size: "small",
-          sx: {
-            fontSize: "0.75rem",
-            "@media print": {
-              display: "none"
-            }
-          },
-          variant: "outlined",
-          component: memberActivityLink ? RouterLink : null,
-          to: memberActivityLink ? memberActivityLink : null,
-          fullWidth: true,
-          children: t("view_activity")
-        })]
-      }),
-      enterDelay: 1000,
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "subtitle1",
-        component: "div",
-        sx: theme => ({
-          display: "block",
-          fontWeight: "bold",
-          color: theme.palette.common.black,
-          textDecoration: "none"
-        }),
-        children: data
-      }), submittedLate && /*#__PURE__*/_jsx(Chip, {
-        variant: "outlined",
-        sx: theme => ({
-          color: theme.palette.common.black,
-          fontWeight: "bold"
-        }),
-        size: "small",
-        label: t("late_submission")
-      })]
-    })
-  });
-}
-export function DataCellContainer({
-  t,
-  isLoading,
-  isNotAssigned,
-  error,
-  data,
-  memberActivityLink,
-  index,
-  submittedLate = false,
-  daysLate = 0
-}) {
-  if (isLoading) return /*#__PURE__*/_jsx(DataCell, {
-    t: t,
-    data: "",
-    index: index
-  });
-  if (error) return /*#__PURE__*/_jsx(DataCell, {
-    t: t,
-    data: "A problem has occurred.",
-    index: index
-  });
-  if (isNotAssigned) return /*#__PURE__*/_jsx(DataCell, {
-    t: t,
-    data: t("not_assigned"),
-    index: index
-  });
-  if (data === null || data === undefined || data.percentage === null || data.percentage === undefined || isNaN(data.percentage)) {
-    return /*#__PURE__*/_jsx(DataCell, {
-      t: t,
-      backgroundColor: red[400],
-      data: `${0}%`,
-      completed: data && data.completed ? data.completed : 0,
-      total: data && data.total ? data.total : 0,
-      type: data && data.type ? data.type : "percent",
-      memberActivityLink: memberActivityLink,
-      index: index,
-      submittedLate: submittedLate,
-      daysLate: daysLate
-    });
-  }
-  if (data.percentage === -1 || data.total === 0 && data.type === "correct") {
-    return /*#__PURE__*/_jsx(DataCell, {
-      t: t,
-      backgroundColor: grey[400],
-      data: "N/A",
-      completed: 0,
-      total: 0,
-      type: data && data.type ? data.type : "percent",
-      memberActivityLink: memberActivityLink,
-      index: index,
-      submittedLate: submittedLate,
-      daysLate: daysLate
-    });
-  }
-  const bg = getColorForPercentage(data.percentage);
-  return /*#__PURE__*/_jsx(DataCell, {
-    t: t,
-    backgroundColor: bg,
-    data: `${data.percentage}%`,
-    completed: data.completed,
-    total: data.total,
-    type: data && data.type ? data.type : "percent",
-    memberActivityLink: memberActivityLink,
-    index: index,
-    submittedLate: submittedLate,
-    daysLate: daysLate
-  });
-}
-export function AssignmentCellData(props) {
-  const {
-    t,
-    data,
-    isLoading,
-    isNotAssigned,
-    error,
-    memberActivityLink,
-    filter,
-    index
-  } = props;
-  const cellData = getCellDataForFilter(data, filter);
-  let submittedLate = false;
-  let daysLate = null;
-  if (data?.submittedLate?.isLate === true) {
-    submittedLate = true;
-    daysLate = data.submittedLate.daysLate;
-  }
-  return /*#__PURE__*/_jsx(DataCellContainer, {
-    t: t,
-    data: cellData,
-    isLoading: isLoading,
-    isNotAssigned: isNotAssigned,
-    error: error,
-    memberActivityLink: memberActivityLink,
-    index: index,
-    submittedLate: submittedLate,
-    daysLate: daysLate
-  });
-}
-export function CourseCellData(props) {
-  const {
-    t,
-    data,
-    isLoading,
-    error,
-    memberActivityLink,
-    filter,
-    index
-  } = props;
-  const cellData = getCellDataForFilter(data, filter);
-  let submittedLate = false;
-  let daysLate = null;
-  if (data?.submittedLate?.isLate === true) {
-    submittedLate = true;
-    daysLate = data.submittedLate.daysLate;
-  }
-  return /*#__PURE__*/_jsx(DataCellContainer, {
-    t: t,
-    data: cellData,
-    isLoading: isLoading,
-    error: error,
-    memberActivityLink: memberActivityLink,
-    index: index,
-    submittedLate: submittedLate,
-    daysLate: daysLate
-  });
-}
-export function SectionCellData(props) {
-  const {
-    t,
-    data,
-    isLoading,
-    error,
-    memberActivityLink,
-    filter,
-    index
-  } = props;
-  const cellData = getCellDataForFilter(data, filter);
-  let submittedLate = false;
-  let daysLate = null;
-  if (data?.submittedLate?.isLate === true) {
-    submittedLate = true;
-    daysLate = data.submittedLate.daysLate;
-  }
-  return /*#__PURE__*/_jsx(DataCellContainer, {
-    t: t,
-    data: cellData,
-    isLoading: isLoading,
-    error: error,
-    memberActivityLink: memberActivityLink,
-    index: index,
-    submittedLate: submittedLate,
-    daysLate: daysLate
-  });
-}
-export function TopicCellData(props) {
-  const {
-    t,
-    data,
-    isLoading,
-    error,
-    memberActivityLink,
-    filter,
-    index
-  } = props;
-  const cellData = getCellDataForFilter(data, filter);
-  let submittedLate = false;
-  let daysLate = null;
-  if (data?.submittedLate?.isLate === true) {
-    submittedLate = true;
-    daysLate = data.submittedLate.daysLate;
-  }
-  return /*#__PURE__*/_jsx(DataCellContainer, {
-    t: t,
-    data: cellData,
-    isLoading: isLoading,
-    error: error,
-    memberActivityLink: memberActivityLink,
-    index: index,
-    submittedLate: submittedLate,
-    daysLate: daysLate
-  });
-}
-export function ExerciseCellData(props) {
-  const {
-    t,
-    data,
-    isLoading,
-    error,
-    exercise,
-    courseId,
-    sectionId,
-    topicId,
-    memberId,
-    roleplayId,
-    botId,
-    phraseListId,
-    index,
-    isChallengeModeStudent = false,
-    botIsChallengeModeOnly = false,
-    assignmentDueDateMs = null,
-    showDaysLate = true
-  } = props;
-  let icon = null;
-  let type = null;
-  let color;
-  let memberActivityLink = null;
-  let submittedLate = false;
-  let daysLate = null;
-  if (isLoading) return /*#__PURE__*/_jsx(DataCell, {
-    t: t,
-    data: "",
-    index: index
-  });
-  if (error) return /*#__PURE__*/_jsx(DataCell, {
-    t: t,
-    data: "A problem has occurred.",
-    index: index
-  });
-  if (botIsChallengeModeOnly && !isChallengeModeStudent) {
-    icon = /*#__PURE__*/_jsx(RemoveIcon, {});
-    color = grey[400];
-  } else {
-    let completions = null;
-    const isRoleplayGame = exercise !== "roleplays" && exercise.startsWith("roleplay-");
-    if (exercise === "roleplays") {
-      completions = data?.completions.filter(completion => completion.exercise.startsWith("roleplay") && completion.roleplayId === roleplayId);
-    } else if (isRoleplayGame) {
-      completions = data?.completions.filter(completion => completion.exercise === exercise && completion.roleplayId === roleplayId);
-    } else if (exercise === "bots") {
-      completions = data?.completions.filter(completion => completion.exercise === "bot" && completion.botId === botId);
-    } else if (phraseListId) {
-      completions = data?.completions.filter(completion => completion.exercise === exercise && (completion.phraseListId === phraseListId || !completion.phraseListId && phraseListId?.startsWith('leg-')));
-    } else {
-      completions = data?.completions.filter(completion => completion.exercise === exercise);
-    }
-    if (assignmentDueDateMs && completions?.length > 0) {
-      const earliestCompletion = [...completions].sort((a, b) => a.createdAt - b.createdAt)[0];
-      if (earliestCompletion.createdAt > assignmentDueDateMs) {
-        submittedLate = true;
-        daysLate = Math.max(1, Math.ceil((earliestCompletion.createdAt - assignmentDueDateMs) / (1000 * 60 * 60 * 24)));
-      }
-    }
-    if (exercise === "roleplays" && roleplayId && completions?.length > 0) {
-      const roleplayCompletionData = data?.percentComplete["roleplays"].completedCounts.find(c => c.roleplayId === roleplayId);
-      icon = /*#__PURE__*/_jsx(Typography, {
-        children: `${roleplayCompletionData?.completedCount} / ${roleplayCompletionData?.total}`
-      });
-      type = roleplayCompletionData?.completedCount > 0 ? roleplayCompletionData?.completedCount === roleplayCompletionData?.total ? "completed" : "partial" : "incompleted";
-      switch (type) {
-        case "incompleted":
-          color = red[400];
-          break;
-        case "partial":
-          color = yellow[400];
-          break;
-        case "completed":
-          color = green[400];
-          break;
-        default:
-          color = grey[400];
-      }
-    } else if (isRoleplayGame && completions?.length > 0) {
-      icon = /*#__PURE__*/_jsx(DoneIcon, {});
-      type = "completed";
-    } else if (exercise === "bots" && botId && completions?.length > 0) {
-      const botCompletionData = data?.percentComplete["bots"].completedCounts.find(c => c.botId === botId);
-      if (botCompletionData?.completedCount > 0) {
-        icon = /*#__PURE__*/_jsx(DoneIcon, {});
-        type = "completed";
-      } else {
-        icon = /*#__PURE__*/_jsx(CloseIcon, {});
-        type = "incompleted";
-      }
-    } else if (phraseListId) {
-      if (completions?.length > 0) {
-        icon = /*#__PURE__*/_jsx(DoneIcon, {});
-        type = "completed";
-      } else {
-        icon = /*#__PURE__*/_jsx(CloseIcon, {});
-        type = "incompleted";
-      }
-    } else if (data?.percentComplete[exercise]?.completedCount > 0) {
-      icon = /*#__PURE__*/_jsx(DoneIcon, {});
-      type = "completed";
-    } else {
-      icon = /*#__PURE__*/_jsx(CloseIcon, {});
-      type = "incompleted";
-    }
-    if (type === "completed" && completions.length > 0) {
-      memberActivityLink = `../../courses/${courseId}/${sectionId}/${topicId}/activity/${exercise}/${memberId}/${completions[0].createdAt}`;
-    }
-  }
-  return /*#__PURE__*/_jsx(ExerciseCell, {
-    t: t,
-    icon: icon,
-    type: type,
-    backgroundColor: color ?? (type === "completed" ? green[400] : red[400]),
-    memberActivityLink: memberActivityLink,
-    index: index,
-    submittedLate: submittedLate,
-    daysLate: daysLate,
-    showDaysLate: showDaysLate
-  });
-}
-export function RoleplayCellData({
-  t,
-  roleplayCompletion,
-  isLoading,
-  error,
-  index
-}) {
-  if (isLoading) return /*#__PURE__*/_jsx(DataCell, {
-    t: t,
-    data: "",
-    index: index
-  });
-  if (error) return /*#__PURE__*/_jsx(DataCell, {
-    t: t,
-    data: "A problem has occurred.",
-    index: index
-  });
-  let icon = null;
-  let type = null;
-  if (roleplayCompletion) {
-    icon = /*#__PURE__*/_jsx(DoneIcon, {});
-    type = "completed";
-  } else {
-    icon = /*#__PURE__*/_jsx(CloseIcon, {});
-    type = "incompleted";
-  }
-  return /*#__PURE__*/_jsx(ExerciseCell, {
-    t: t,
-    icon: icon,
-    index: index,
-    type: type,
-    backgroundColor: type === "completed" ? green[400] : red[400]
-  });
-}
-export function PhraseListCellData({
-  t,
-  data,
-  phraseListId,
-  isLoading,
-  error,
-  index,
-  assignmentDueDateMs = null,
-  hasMeaning = false
-}) {
-  if (isLoading) return /*#__PURE__*/_jsx(DataCell, {
-    t: t,
-    data: "",
-    index: index
-  });
-  if (error) return /*#__PURE__*/_jsx(DataCell, {
-    t: t,
-    data: "A problem has occurred.",
-    index: index
-  });
-  const phraseListExercises = ["translation", "listening", "pronunciation", ...(hasMeaning ? ["meaning"] : [])];
-  const phraseListCompletions = data?.completions?.filter(c => phraseListExercises.includes(c.exercise) && (c.phraseListId === phraseListId || !c.phraseListId && phraseListId?.startsWith('leg-'))) ?? [];
-  const completedCount = phraseListExercises.filter(exercise => phraseListCompletions.some(c => c.exercise === exercise)).length;
-  const total = phraseListExercises.length;
-  const submittedLate = assignmentDueDateMs != null && phraseListCompletions.some(c => c.createdAt > assignmentDueDateMs);
-  let color;
-  if (completedCount === total) color = green[400];else if (completedCount > 0) color = yellow[400];else color = red[400];
-  return /*#__PURE__*/_jsx(ExerciseCell, {
-    t: t,
-    icon: /*#__PURE__*/_jsx(Typography, {
-      variant: "subtitle1",
-      children: `${completedCount} / ${total}`
-    }),
-    backgroundColor: color,
-    index: index,
-    submittedLate: submittedLate,
-    showDaysLate: false
-  });
-}