@nualang/nualang-ui-components 0.1.1400 → 0.2.0

package/dist/Tables/Progress/Progress.js

@@ -1,502 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import { ReactQuery } from "@nualang/nualang-api-and-queries/Queries";
-import { useTheme } from "@mui/material/styles";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { Skeleton } from "@mui/material";
-import ProgressTable from "./ProgressTable";
-import TableToolbar from "./TableToolbar";
-import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
-import Grid from "@mui/material/Grid";
-import { courses as courseQuerys } from "@nualang/nualang-api-and-queries/Queries";
-import { searchStringToObj, objToSearchString } from "../../utils";
-import TotalGrades from "../../Charts/Bar/TotalGrades/TotalGrades";
-import RecordingAttendance from "../../Charts/Doughnut/RecordingAttendance/RecordingAttendance";
-import SubmittedRecordings from "../../Charts/Doughnut/SubmittedRecordings/SubmittedRecordings";
-import { utils as xlsxUtils, writeFile as xlsxWriteFile } from "xlsx";
-import ProgressList from "./ProgressList";
-import { DateTime } from "luxon";
-import useProgressUrlParams from "./useProgressUrlParams";
-import { deriveCurrentView } from "./viewState";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function Progress({
-  t = text => text,
-  classroomId,
-  courses = [],
-  members = [],
-  fetchMemberCourseCompletions = () => {},
-  memberId,
-  username,
-  getCourseSections = () => {},
-  submissions,
-  courseIds,
-  featureFlags,
-  assignments = [],
-  isVideoChatEnabled,
-  assignedCourses,
-  assignedCourseIds,
-  assignmentMembersById,
-  isLoading
-}) {
-  const theme = useTheme();
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
-  const {
-    useQueryClient,
-    useQueries
-  } = ReactQuery;
-  const queryClient = useQueryClient();
-  const [selectedAssignment, setSelectedAssignment] = useState(null);
-  const [selectedCourse, setSelectedCourse] = useState(null);
-  const [selectedSection, setSelectedSection] = useState(null);
-  const [selectedTopic, setSelectedTopic] = useState(null);
-  const [selectedRoleplay, setSelectedRoleplay] = useState(null);
-  const [selectedPhraseList, setSelectedPhraseList] = useState(null);
-  const [roleplays, setRoleplays] = useState([]);
-  const [bots, setBots] = useState([]);
-  const reportFilters = ["percentage_complete", "correct_answer_percentage", "avg_pronunciation_score"];
-  const [filter, setFilter] = useState(reportFilters[0]);
-  const reportTypes = useMemo(() => isVideoChatEnabled ? ["courses", "assignments", "discuss"] : ["courses", "assignments"], [isVideoChatEnabled]);
-  const availableReportTypes = useMemo(() => memberId ? ["courses", "assignments"] : reportTypes, [memberId, reportTypes]);
-  const [reportType, setReportType] = useState(availableReportTypes[0]);
-  const currentCourses = reportType === "assignments" ? assignedCourses : courses;
-  const courseSectionsQueries = useQueries({
-    queries: (currentCourses || []).map(({
-      courseId
-    }) => {
-      return {
-        queryKey: courseQuerys.courseKeys.itemSections(courseId, username),
-        queryFn: () => getCourseSections(courseId, {
-          limit: 1000
-        }),
-        enabled: !!courseId
-      };
-    })
-  });
-  const courseSectionsQueriesIsLoading = courseSectionsQueries.some(query => query.isLoading);
-  const coursesWithSections = useMemo(() => {
-    if (currentCourses?.length && !courseSectionsQueriesIsLoading) {
-      return (currentCourses || []).map(course => {
-        const sectionsData = queryClient.getQueryData(courseQuerys.courseKeys.itemSections(course.courseId, username));
-        return {
-          ...course,
-          sections: course.sections || sectionsData?.Items || []
-        };
-      });
-    } else {
-      return [];
-    }
-  }, [currentCourses, courseSectionsQueriesIsLoading]);
-  useEffect(() => {
-    if (selectedTopic) {
-      setSelectedPhraseList(null);
-      setRoleplays(selectedTopic?.roleplays);
-      setBots(selectedTopic?.bots);
-    } else {
-      setSelectedPhraseList(null);
-    }
-  }, [selectedTopic, coursesWithSections]);
-  const deleteCourseId = () => {
-    if ("URLSearchParams" in window) {
-      const searchParams = searchStringToObj(window.location.search);
-      delete searchParams["courseId"];
-      setSelectedCourse(null);
-      const newRelativePathQuery = window.location.pathname + "?" + objToSearchString(searchParams) + window.location.hash;
-      window.history.pushState(null, "", newRelativePathQuery);
-    }
-  };
-  const deleteAssignmentId = () => {
-    if ("URLSearchParams" in window) {
-      const searchParams = searchStringToObj(window.location.search);
-      delete searchParams["assignmentId"];
-      setSelectedAssignment(null);
-      const newRelativePathQuery = window.location.pathname + "?" + objToSearchString(searchParams) + window.location.hash;
-      window.history.pushState(null, "", newRelativePathQuery);
-    }
-  };
-  useProgressUrlParams({
-    availableReportTypes,
-    reportType,
-    setReportType,
-    assignments,
-    selectedAssignment,
-    setSelectedAssignment,
-    coursesWithSections,
-    selectedCourse,
-    setSelectedCourse,
-    selectedSection,
-    setSelectedSection,
-    selectedTopic,
-    setSelectedTopic,
-    selectedRoleplay,
-    setSelectedRoleplay,
-    selectedPhraseList,
-    setSelectedPhraseList
-  });
-  const [selectedMembers, setSelectedMembers] = useState([]);
-  const assignedStudents = assignmentMembersById && assignmentMembersById[selectedAssignment?.assignmentId] || [];
-  const classroomMembers = useMemo(() => {
-    return members.filter(member => {
-      if (memberId) {
-        return member.memberId === memberId;
-      } else if (selectedMembers && selectedMembers.length && reportType === "assignments" && selectedAssignment && assignedStudents) {
-        const selectedMemberIds = selectedMembers.map(m => m.memberId);
-        return selectedMemberIds.includes(member.memberId) && (assignedStudents || []).includes(member.memberId);
-      } else if (selectedMembers && selectedMembers.length) {
-        const selectedMemberIds = selectedMembers.map(m => m.memberId);
-        return selectedMemberIds.includes(member.memberId);
-      } else if (reportType === "assignments" && selectedAssignment && assignedStudents) {
-        return (assignedStudents || []).includes(member.memberId);
-      }
-      return true;
-    });
-  }, [members, memberId, selectedMembers, reportType, selectedAssignment, assignedStudents]);
-  const currentView = deriveCurrentView({
-    reportType,
-    selectedAssignment,
-    selectedTopic,
-    selectedRoleplay,
-    selectedPhraseList,
-    selectedCourse,
-    selectedSection
-  });
-  async function generateOverview(filter) {
-    if (reportType === "courses") {
-      let workbook = xlsxUtils.book_new();
-      workbook = await (await import("./exportToExcel")).handleDownloadAsExcelXlsxCourseOverview(workbook, filter, {
-        xlsxUtils,
-        fetchMemberCourseCompletions,
-        coursesWithSections,
-        classroomMembers,
-        courseIds,
-        t
-      });
-      const nowSheet = DateTime.now().toFormat("dd LLL yyyy");
-      const fileName = `student_overview_report_${nowSheet}_${filter}.xlsx`;
-      xlsxWriteFile(workbook, fileName);
-    } else if (reportType === "assignments") {
-      let workbook = xlsxUtils.book_new();
-      workbook = await (await import("./exportToExcel")).handleDownloadAsExcelXlsxAssignmentOverview(workbook, filter, {
-        xlsxUtils,
-        fetchMemberCourseCompletions,
-        coursesWithSections,
-        classroomMembers,
-        assignedCourseIds,
-        assignments,
-        selectedAssignment,
-        t
-      });
-      const nowSheet = DateTime.now().toFormat("dd LLL yyyy");
-      const fileName = `${selectedAssignment?.title || classroomId}_student_classroom_assignment_report_${nowSheet}_${filter}.xlsx`;
-      xlsxWriteFile(workbook, fileName);
-    }
-  }
-
-  // Excel export functions moved to ./exportToExcel.js and are dynamically imported
-
-  const selectedAssignmentTopics = (selectedAssignment?.exercises || [])?.map(e => e.courseSectionTopicId);
-  const assignmentTopics = coursesWithSections.flatMap(c => c.sections.flatMap(s => s.topics)).filter(t => selectedAssignmentTopics?.includes(`${t.courseSectionId}|${t.topicId}`));
-
-  // Excel export functions moved to ./exportToExcel.js and are dynamically imported
-
-  if (courseSectionsQueriesIsLoading || isLoading) {
-    return /*#__PURE__*/_jsx(_Fragment, {
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsxs(Box, {
-          sx: {
-            display: "flex",
-            alignItems: "center",
-            gap: 1,
-            mb: 1
-          },
-          children: [/*#__PURE__*/_jsx(Skeleton, {
-            variant: "text",
-            width: "10%",
-            height: 60
-          }), /*#__PURE__*/_jsx(Skeleton, {
-            variant: "text",
-            width: "10%",
-            height: 60
-          }), /*#__PURE__*/_jsx(Skeleton, {
-            variant: "text",
-            width: "10%",
-            height: 60
-          })]
-        }), /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            display: "flex",
-            gap: 1,
-            mb: 1
-          },
-          children: [/*#__PURE__*/_jsx(Skeleton, {
-            variant: "rectangular",
-            width: "14%",
-            height: 88,
-            sx: {
-              borderRadius: 1
-            }
-          }), /*#__PURE__*/_jsx(Skeleton, {
-            variant: "rectangular",
-            width: "14%",
-            height: 88,
-            sx: {
-              borderRadius: 1
-            }
-          }), /*#__PURE__*/_jsx(Skeleton, {
-            variant: "rectangular",
-            width: "14%",
-            height: 88,
-            sx: {
-              borderRadius: 1
-            }
-          }), /*#__PURE__*/_jsx(Skeleton, {
-            variant: "rectangular",
-            width: "14%",
-            height: 88,
-            sx: {
-              borderRadius: 1
-            }
-          }), /*#__PURE__*/_jsx(Skeleton, {
-            variant: "rectangular",
-            width: "14%",
-            height: 88,
-            sx: {
-              borderRadius: 1
-            }
-          }), /*#__PURE__*/_jsx(Box, {
-            sx: {
-              flexGrow: 1
-            }
-          })]
-        }), Array.from({
-          length: 4
-        }).map((_, i) => /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            display: "flex",
-            gap: 1,
-            mb: 1
-          },
-          children: [/*#__PURE__*/_jsx(Skeleton, {
-            variant: "rectangular",
-            width: "14%",
-            height: 88,
-            sx: {
-              borderRadius: 1
-            }
-          }), /*#__PURE__*/_jsx(Skeleton, {
-            variant: "rectangular",
-            width: "14%",
-            height: 88,
-            sx: {
-              borderRadius: 1
-            }
-          }), /*#__PURE__*/_jsx(Skeleton, {
-            variant: "rectangular",
-            width: "14%",
-            height: 88,
-            sx: {
-              borderRadius: 1
-            }
-          }), /*#__PURE__*/_jsx(Skeleton, {
-            variant: "rectangular",
-            width: "14%",
-            height: 88,
-            sx: {
-              borderRadius: 1
-            }
-          }), /*#__PURE__*/_jsx(Skeleton, {
-            variant: "rectangular",
-            width: "14%",
-            height: 88,
-            sx: {
-              borderRadius: 1
-            }
-          }), /*#__PURE__*/_jsx(Box, {
-            sx: {
-              flexGrow: 1
-            }
-          })]
-        }, i))]
-      })
-    });
-  }
-  if (coursesWithSections.length === 0) {
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "h6",
-        gutterBottom: true,
-        children: t("classroom_courses_not_found_title")
-      }), /*#__PURE__*/_jsx(Typography, {
-        variant: "body1",
-        children: t("classroom_courses_not_found_desc")
-      })]
-    });
-  }
-  if (members.length === 0) {
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "h6",
-        gutterBottom: true,
-        children: t("classroom_members_not_found_title")
-      }), /*#__PURE__*/_jsx(Typography, {
-        variant: "body1",
-        children: t("classroom_members_not_found_desc")
-      })]
-    });
-  }
-  if (isSmallScreen) {
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(TableToolbar, {
-        t: t,
-        members: members,
-        selectedMembers: selectedMembers,
-        setSelectedMembers: setSelectedMembers,
-        generateOverview: generateOverview,
-        reportFilters: reportFilters,
-        filter: filter,
-        setFilter: setFilter,
-        reportTypes: availableReportTypes,
-        setReportType: setReportType,
-        reportType: reportType,
-        currentView: currentView,
-        memberId: memberId
-      }), reportType === "discuss" ? /*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        spacing: 2,
-        children: [/*#__PURE__*/_jsx(Grid, {
-          size: {
-            md: 6,
-            xs: 12
-          },
-          children: /*#__PURE__*/_jsx(TotalGrades, {
-            recordings: submissions
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: {
-            md: 6,
-            xs: 12
-          },
-          children: /*#__PURE__*/_jsx(SubmittedRecordings, {
-            recordings: submissions
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: {
-            md: 6,
-            xs: 12
-          },
-          children: /*#__PURE__*/_jsx(RecordingAttendance, {
-            recordings: submissions
-          })
-        })]
-      }) : /*#__PURE__*/_jsx(ProgressList, {
-        t: t,
-        classroomId: classroomId,
-        currentView: currentView,
-        selectedCourse: selectedCourse,
-        deleteCourseId: deleteCourseId,
-        deleteAssignmentId: deleteAssignmentId,
-        setSelectedCourse: setSelectedCourse,
-        selectedSection: selectedSection,
-        setSelectedSection: setSelectedSection,
-        selectedTopic: selectedTopic,
-        setSelectedTopic: setSelectedTopic,
-        selectedRoleplay: selectedRoleplay,
-        setSelectedRoleplay: setSelectedRoleplay,
-        selectedPhraseList: selectedPhraseList,
-        setSelectedPhraseList: setSelectedPhraseList,
-        selectedAssignment: selectedAssignment,
-        setSelectedAssignment: setSelectedAssignment,
-        assignments: assignments,
-        courses: coursesWithSections,
-        members: classroomMembers,
-        courseIds: courseIds,
-        fetchMemberCourseCompletions: fetchMemberCourseCompletions,
-        hideSorting: memberId ? true : false,
-        filter: filter,
-        roleplays: roleplays,
-        bots: bots,
-        reportType: reportType,
-        featureFlags: featureFlags,
-        assignedCourseIds: assignedCourseIds
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(TableToolbar, {
-      t: t,
-      members: members,
-      selectedMembers: selectedMembers,
-      setSelectedMembers: setSelectedMembers,
-      generateOverview: generateOverview,
-      reportFilters: reportFilters,
-      filter: filter,
-      setFilter: setFilter,
-      reportTypes: availableReportTypes,
-      setReportType: setReportType,
-      reportType: reportType,
-      currentView: currentView,
-      memberId: memberId
-    }), reportType === "discuss" ? /*#__PURE__*/_jsxs(Grid, {
-      container: true,
-      spacing: 2,
-      children: [/*#__PURE__*/_jsx(Grid, {
-        size: {
-          md: 6,
-          xs: 12
-        },
-        children: /*#__PURE__*/_jsx(TotalGrades, {
-          recordings: submissions,
-          t: t
-        })
-      }), /*#__PURE__*/_jsx(Grid, {
-        size: {
-          md: 6,
-          xs: 12
-        },
-        children: /*#__PURE__*/_jsx(SubmittedRecordings, {
-          recordings: submissions,
-          t: t
-        })
-      }), /*#__PURE__*/_jsx(Grid, {
-        size: {
-          md: 6,
-          xs: 12
-        },
-        children: /*#__PURE__*/_jsx(RecordingAttendance, {
-          recordings: submissions,
-          t: t
-        })
-      })]
-    }) : /*#__PURE__*/_jsx(ProgressTable, {
-      t: t,
-      classroomId: classroomId,
-      currentView: currentView,
-      selectedCourse: selectedCourse,
-      deleteCourseId: deleteCourseId,
-      deleteAssignmentId: deleteAssignmentId,
-      setSelectedCourse: setSelectedCourse,
-      selectedSection: selectedSection,
-      setSelectedSection: setSelectedSection,
-      selectedTopic: selectedTopic,
-      setSelectedTopic: setSelectedTopic,
-      selectedRoleplay: selectedRoleplay,
-      setSelectedRoleplay: setSelectedRoleplay,
-      selectedPhraseList: selectedPhraseList,
-      setSelectedPhraseList: setSelectedPhraseList,
-      selectedAssignment: selectedAssignment,
-      setSelectedAssignment: setSelectedAssignment,
-      assignments: assignments,
-      courses: coursesWithSections,
-      members: classroomMembers,
-      fetchMemberCourseCompletions: fetchMemberCourseCompletions,
-      hideSorting: memberId ? true : false,
-      filter: filter,
-      roleplays: roleplays,
-      bots: bots,
-      courseIds: courseIds,
-      featureFlags: featureFlags,
-      reportType: reportType,
-      assignedCourseIds: assignedCourseIds
-    })]
-  });
-}
-export default Progress;