@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Tables/MeetingPrompstList/MeetingPromptsList.js

@@ -1,565 +0,0 @@
-import { useState, useEffect, useMemo, Fragment } from "react";
-import PropTypes from "prop-types";
-import { withStyles } from "tss-react/mui";
-import { useNavigate, useLocation } from "react-router";
-import { Typography, Box, List, Dialog, DialogContent, Card, CardActionArea, Select, FormControl, InputLabel, IconButton, Tooltip, CircularProgress, Divider, MenuItem } from "@mui/material";
-import { red, orange, green, grey } from "@mui/material/colors";
-import Styles from "../../utils/Styles";
-import ConfirmDeleteDiscussion from "../../Dialogs/ConfirmDeleteDiscussion/ConfirmDeleteDiscussion";
-import CreateMeetingMultiStepForm from "../../Forms/CreateMeetingMultiStepForm/CreateMeetingMultiStepForm";
-import RecordingListCards from "../RecordingListCards/RecordingListCards";
-import EditIcon from "@mui/icons-material/Edit";
-import ArchiveIcon from "@mui/icons-material/Archive";
-import dayjs from "dayjs";
-import GroupFeedbackDialog from "../../Dialogs/GroupedFeedbackDialog/GroupedFeedbackDialog";
-import { useUrlQueryParam } from "../../hooks/useUrlQueryParam";
-import TeacherCreate from "../../img/teacher-create-2.svg";
-import InfiniteScroll from "../../Misc/InfiniteScroll/InfiniteScroll";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const MeetingPromptsList = withStyles(({
-  scheduleListData,
-  handleDeleteDiscussion = () => {},
-  userData = [],
-  t = text => text,
-  handleEditDiscussion = () => {},
-  setSelectedDiscussion = () => {},
-  editBackgroundImages = [],
-  editMeetingImages = [],
-  submissionsTableData = [],
-  s3Url,
-  s3EventsUrl,
-  playerRef,
-  conversation,
-  goToTimestamp,
-  handleCreateFeedback,
-  handleBatchGradeConversations,
-  aiGrade,
-  meetingRecsData,
-  resetVideoState,
-  setSelectedRecording,
-  selectedRecording,
-  getMeeting,
-  getRecordings,
-  startTimes = {},
-  learnLang,
-  scrollableTarget = null
-}) => {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const [selectedGroup, setSelectedGroup] = useState({});
-  const [isDialogOpen, setDialogOpen] = useState(false);
-  const [meetingCounts, setMeetingCounts] = useState({});
-  const BATCH_SIZE = 4;
-  const [cardsToShow, setCardsToShow] = useState(BATCH_SIZE);
-  const [isDeleteDiscussionOpen, setIsDeleteDiscussionOpen] = useState(false);
-  const [isEditMeetingDialogOpen, setIsEditMeetingDialogOpen] = useState(false);
-  const [groupedId, setGroupedId] = useState("");
-  const [filter, setFilter] = useState("all");
-  const [isRecordingDialogOpen, setIsRecordingDialogOpen] = useState(false);
-  const [attendeesData, setAttendeesData] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [groupedIdFromUrl, setGroupedIdFromUrl, clearGroupedId] = useUrlQueryParam("groupedId", {
-    hash: "Discuss"
-  });
-  useEffect(() => {
-    if (groupedIdFromUrl && scheduleListData.length > 0) {
-      const discussion = scheduleListData.find(item => item.groupedId === groupedIdFromUrl);
-      if (discussion) {
-        setSelectedGroup(discussion);
-        setSelectedDiscussion(discussion);
-        setGroupedId(discussion.groupedId);
-        setDialogOpen(true);
-      }
-    }
-  }, [groupedIdFromUrl, scheduleListData, setSelectedDiscussion]);
-  const calculateMeetingCounts = () => {
-    const counts = {};
-    scheduleListData?.forEach(item => {
-      counts[item.groupedId] = (counts[item.groupedId] || 0) + 1;
-    });
-    setMeetingCounts(counts);
-  };
-  useEffect(() => {
-    calculateMeetingCounts();
-  }, [scheduleListData]);
-  const uniqueMeetingIds = [];
-  const uniqueSubmissions = submissionsTableData.filter(row => {
-    const meetingId = row.meetingId;
-    if (!uniqueMeetingIds.includes(meetingId)) {
-      uniqueMeetingIds.push(meetingId);
-      return true;
-    }
-    return false;
-  });
-  const groupedData = uniqueSubmissions.reduce((acc, item) => {
-    if (!acc[item.groupedId]) {
-      acc[item.groupedId] = [];
-    }
-    acc[item.groupedId].push(item);
-    return acc;
-  }, {});
-  const now = dayjs();
-  const filteredDiscussions = scheduleListData.filter(item => {
-    const meetingDateTime = dayjs(`${item.meetingDate} ${item.meetingTime}`, "MM/DD/YYYY h:mm A");
-    if (filter === "archived") return item.archived;
-    if (item.archived) return false;
-    switch (filter) {
-      case "all":
-        return true;
-      case "pastDue":
-        return meetingDateTime.isBefore(now, "day");
-      default:
-        return true;
-    }
-  });
-  const uniqueGroupedIds = [...new Set(filteredDiscussions.map(item => item.groupedId))];
-  const filteredScheduleListData = uniqueGroupedIds.map(id => filteredDiscussions.find(item => item.groupedId === id));
-  const sortedScheduleListData = filteredScheduleListData.sort((a, b) => {
-    const dateTimeA = new Date(`${a.meetingDate} ${a.meetingTime}`);
-    const dateTimeB = new Date(`${b.meetingDate} ${b.meetingTime}`);
-    return dateTimeB - dateTimeA;
-  });
-  const groupedRecordings = submissionsTableData.reduce((acc, item) => {
-    if (!acc[item.groupedId]) acc[item.groupedId] = [];
-    acc[item.groupedId].push(item);
-    return acc;
-  }, {});
-  const openDialog = () => {
-    setDialogOpen(true);
-  };
-  const closeDialog = () => {
-    setDialogOpen(false);
-    setSelectedGroup({});
-    clearGroupedId();
-  };
-  const meetingMembers = useMemo(() => {
-    const selectedDiscussionGroup = scheduleListData.filter(item => item.groupedId === groupedId);
-    return selectedDiscussionGroup.map(item => item.meetingMembers);
-  }, [groupedId, scheduleListData]);
-  useEffect(() => {
-    if (meetingRecsData) {
-      const attendees = [selectedRecording?.attendees].flat();
-      const newAttendeesData = userData.filter(user => attendees.includes(user.memberId)).map(user => {
-        const recordingFeedback = meetingRecsData.find(rec => rec.userId === user.memberId);
-        return {
-          ...user,
-          feedback: recordingFeedback ? {
-            ...recordingFeedback,
-            userId: undefined
-          } : {}
-        };
-      });
-      setAttendeesData(newAttendeesData);
-    }
-  }, [meetingRecsData, selectedRecording]);
-  useEffect(() => {
-    setCardsToShow(BATCH_SIZE);
-    if (window.scrollY > 100) window.scrollTo(0, 0);
-  }, [filter]);
-  const formatMeetingDueText = (meetingDate, meetingTime, t) => {
-    const meetingDateTime = dayjs(`${meetingDate} ${meetingTime}`, "MM/DD/YYYY h:mm A");
-    const now = dayjs();
-    const formattedDate = meetingDateTime.format("D MMM YYYY • h:mm A");
-    const diffDays = meetingDateTime.startOf("day").diff(now.startOf("day"), "day");
-    let dueText = "";
-    if (diffDays < 0) {
-      dueText = t("past_due");
-    } else if (diffDays === 0) {
-      dueText = t("due_today");
-    } else if (diffDays === 1) {
-      dueText = t("due_tomorrow");
-    } else {
-      dueText = `${t("due_in")} ${diffDays} ${t("days")}`;
-    }
-    return `${dueText} - ${formattedDate}`;
-  };
-  const getEmptyStateMessage = () => {
-    if (!scheduleListData.length) {
-      return {
-        title: t("no_discussions"),
-        description: t("no_discussions_description")
-      };
-    }
-    switch (filter) {
-      case "pastDue":
-        return {
-          title: t("no_past_due_discussions"),
-          description: null
-        };
-      case "archived":
-        return {
-          title: t("no_archived_discussions"),
-          description: null
-        };
-      default:
-        return {
-          title: t("no_discussions"),
-          description: t("no_discussions_description")
-        };
-    }
-  };
-  const emptyState = getEmptyStateMessage();
-  return /*#__PURE__*/_jsxs(Fragment, {
-    children: [/*#__PURE__*/_jsxs(FormControl, {
-      size: "large",
-      sx: {
-        minWidth: 140,
-        mb: 1,
-        mt: "8px"
-      },
-      children: [/*#__PURE__*/_jsx(InputLabel, {
-        children: t("view")
-      }), /*#__PURE__*/_jsxs(Select, {
-        value: filter,
-        onChange: e => setFilter(e.target.value),
-        label: t("view"),
-        autoWidth: true,
-        children: [/*#__PURE__*/_jsx(MenuItem, {
-          value: "all",
-          children: t("all")
-        }), /*#__PURE__*/_jsx(MenuItem, {
-          value: "pastDue",
-          children: t("past_due")
-        }), /*#__PURE__*/_jsx(MenuItem, {
-          value: "archived",
-          children: t("archived")
-        })]
-      })]
-    }), sortedScheduleListData.length === 0 && /*#__PURE__*/_jsxs(Box, {
-      sx: {
-        alignItems: 'center',
-        display: 'flex',
-        flexDirection: 'column',
-        my: 2
-      },
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "h5",
-        sx: {
-          fontWeight: 'bold',
-          textAlign: "center"
-        },
-        children: emptyState.title
-      }), /*#__PURE__*/_jsx(Typography, {
-        sx: {
-          textAlign: "center",
-          mt: 2,
-          width: "70%"
-        },
-        children: emptyState.description
-      }), /*#__PURE__*/_jsx(Box, {
-        sx: {
-          height: "100%",
-          display: "flex",
-          flexGrow: 1,
-          alignItems: "center",
-          justifyContent: "center",
-          maxWidth: 300,
-          marginRight: "40px",
-          paddingTop: "20px"
-        },
-        children: /*#__PURE__*/_jsx("img", {
-          src: TeacherCreate,
-          alt: "teacher-create",
-          style: {
-            width: "100%",
-            height: "auto"
-          }
-        })
-      })]
-    }), /*#__PURE__*/_jsx(InfiniteScroll, {
-      dataLength: Math.min(cardsToShow, sortedScheduleListData.length),
-      loadMore: () => setCardsToShow(prev => prev + BATCH_SIZE),
-      hasMore: cardsToShow < sortedScheduleListData.length,
-      scrollableTarget: scrollableTarget,
-      children: /*#__PURE__*/_jsx(List, {
-        children: sortedScheduleListData.slice(0, cardsToShow).map((discussion, i) => {
-          const totalDiscussions = meetingCounts[discussion?.groupedId] || 0;
-          const recordingsForGroup = groupedRecordings[discussion.groupedId] || [];
-          const submittedMeetingIds = new Set(recordingsForGroup.map(rec => rec.meetingId || rec.meetingID).filter(Boolean));
-          const submittedCount = submittedMeetingIds.size;
-          const progress = totalDiscussions > 0 ? Math.round(submittedCount / totalDiscussions * 100) : 0;
-          return /*#__PURE__*/_jsx(Card, {
-            sx: {
-              display: "flex",
-              marginBottom: 2,
-              boxShadow: 3
-            },
-            children: /*#__PURE__*/_jsx(CardActionArea, {
-              component: "a",
-              onClick: () => {
-                setSelectedGroup(discussion);
-                setSelectedDiscussion(discussion);
-                setGroupedId(discussion?.groupedId);
-                openDialog();
-                setGroupedIdFromUrl(discussion.groupedId);
-              },
-              children: /*#__PURE__*/_jsxs(Box, {
-                sx: {
-                  p: 2
-                },
-                children: [/*#__PURE__*/_jsxs(Box, {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center"
-                  },
-                  children: [/*#__PURE__*/_jsx(Typography, {
-                    variant: "body1",
-                    sx: {
-                      fontWeight: 600,
-                      color: "text.primary"
-                    },
-                    children: discussion?.meetingTopic
-                  }), /*#__PURE__*/_jsx(Box, {
-                    sx: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 1
-                    },
-                    children: filter !== "archived" && /*#__PURE__*/_jsxs(_Fragment, {
-                      children: [/*#__PURE__*/_jsx(Typography, {
-                        variant: "button",
-                        sx: {
-                          color: 'text.secondary',
-                          ml: 1.5,
-                          fontWeight: 500,
-                          mr: "16px"
-                        },
-                        children: formatMeetingDueText(discussion?.meetingDate, discussion?.meetingTime, t)
-                      }), /*#__PURE__*/_jsx(Tooltip, {
-                        title: submittedCount > 0 ? t("cannot_edit_discussion") : t("edit_discussion"),
-                        children: /*#__PURE__*/_jsx("span", {
-                          children: /*#__PURE__*/_jsx(IconButton, {
-                            size: "medium",
-                            disabled: submittedCount > 0,
-                            onClick: e => {
-                              e.stopPropagation();
-                              setSelectedDiscussion(discussion);
-                              setSelectedGroup(discussion);
-                              setGroupedId(discussion?.groupedId);
-                              setIsEditMeetingDialogOpen(true);
-                            },
-                            children: /*#__PURE__*/_jsx(EditIcon, {
-                              fontSize: "medium"
-                            })
-                          })
-                        })
-                      }), /*#__PURE__*/_jsx(Tooltip, {
-                        title: t("archive"),
-                        children: /*#__PURE__*/_jsx(IconButton, {
-                          size: "medium",
-                          onClick: e => {
-                            e.stopPropagation();
-                            setGroupedId(discussion?.groupedId);
-                            setSelectedGroup(discussion);
-                            setIsDeleteDiscussionOpen(true);
-                          },
-                          children: /*#__PURE__*/_jsx(ArchiveIcon, {
-                            fontSize: "medium"
-                          })
-                        })
-                      })]
-                    })
-                  })]
-                }), /*#__PURE__*/_jsx(Divider, {
-                  sx: {
-                    mt: "16px",
-                    mb: "10px"
-                  }
-                }), /*#__PURE__*/_jsxs(Box, {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "flex-start",
-                    gap: 2
-                  },
-                  children: [/*#__PURE__*/_jsx(Box, {
-                    sx: {
-                      flexBasis: "70%"
-                    },
-                    children: discussion?.meetingPrompt && /*#__PURE__*/_jsx(Typography, {
-                      variant: "body2",
-                      sx: {
-                        color: 'text.secondary',
-                        lineHeight: 1.6,
-                        whiteSpace: "pre-line"
-                      },
-                      children: discussion.meetingPrompt
-                    })
-                  }), /*#__PURE__*/_jsx(Box, {
-                    sx: {
-                      display: "flex",
-                      flexDirection: "column",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      width: 80
-                    },
-                    children: (() => {
-                      const ratio = totalDiscussions > 0 ? submittedCount / totalDiscussions : 0;
-                      const ringColor = ratio === 0 ? grey[500] : ratio > 0 && ratio <= 1 / 3 ? red[600] : ratio > 1 / 3 && ratio <= 2 / 3 ? orange[600] : ratio > 2 / 3 && ratio < 1 ? green[600] : green[600];
-                      return /*#__PURE__*/_jsxs(_Fragment, {
-                        children: [/*#__PURE__*/_jsxs(Box, {
-                          sx: {
-                            position: "relative",
-                            display: "inline-flex",
-                            width: 72,
-                            height: 72
-                          },
-                          children: [/*#__PURE__*/_jsx(CircularProgress, {
-                            variant: "determinate",
-                            value: progress,
-                            size: 72,
-                            thickness: 4.5,
-                            sx: {
-                              color: ringColor
-                            }
-                          }), /*#__PURE__*/_jsx(Box, {
-                            sx: {
-                              top: 0,
-                              left: 0,
-                              bottom: 0,
-                              right: 0,
-                              position: "absolute",
-                              display: "flex",
-                              alignItems: "center",
-                              justifyContent: "center"
-                            },
-                            children: /*#__PURE__*/_jsxs(Typography, {
-                              variant: "subtitle2",
-                              sx: {
-                                fontWeight: 700,
-                                color: ringColor
-                              },
-                              children: [submittedCount, " / ", totalDiscussions]
-                            })
-                          })]
-                        }), /*#__PURE__*/_jsx(Typography, {
-                          variant: "caption",
-                          sx: {
-                            mt: 1,
-                            fontWeight: "bold",
-                            color: ringColor,
-                            textAlign: "center",
-                            textTransform: "uppercase",
-                            letterSpacing: 0.2
-                          },
-                          children: t("submissions")
-                        })]
-                      });
-                    })()
-                  })]
-                })]
-              })
-            })
-          }, discussion?.groupedId ?? i);
-        })
-      })
-    }), /*#__PURE__*/_jsx(ConfirmDeleteDiscussion, {
-      t: t,
-      handleConfirmDeleteDiscussion: async () => {
-        await handleDeleteDiscussion(scheduleListData.filter(item => item.groupedId === groupedId));
-      },
-      handleCloseDeleteDiscussionDialog: () => setIsDeleteDiscussionOpen(false),
-      deleteDiscussionDialogOpen: isDeleteDiscussionOpen,
-      archiveTitle: "archive_title",
-      archiveDescription: "archive_description"
-    }), /*#__PURE__*/_jsx(GroupFeedbackDialog, {
-      open: isDialogOpen,
-      onClose: closeDialog,
-      groupedId: groupedId,
-      scheduleListData: scheduleListData,
-      userData: userData,
-      submissionsTableData: submissionsTableData,
-      t: t,
-      handleBatchGradeConversations: handleBatchGradeConversations,
-      aiGrade: aiGrade,
-      selectedGroup: selectedGroup,
-      setSelectedRecording: setSelectedRecording,
-      selectedRecording: selectedRecording,
-      s3Url: s3Url,
-      playerRef: playerRef,
-      conversation: conversation,
-      handleCreateFeedback: handleCreateFeedback,
-      onFeedbackSubmitted: getRecordings,
-      editBackgroundImages: editBackgroundImages[0],
-      editMeetingImages: editMeetingImages[0],
-      goToTimestamp: goToTimestamp,
-      startTimes: startTimes,
-      learnLang: learnLang
-    }), /*#__PURE__*/_jsx(Dialog, {
-      role: "dialog",
-      open: isRecordingDialogOpen,
-      onClose: () => setIsRecordingDialogOpen(false),
-      fullWidth: true,
-      "aria-label": "recordings-table",
-      children: /*#__PURE__*/_jsx(DialogContent, {
-        children: /*#__PURE__*/_jsx(RecordingListCards, {
-          resetVideoState: resetVideoState,
-          attendeesData: attendeesData,
-          loading: false,
-          s3Url: s3Url,
-          s3EventsUrl: s3EventsUrl,
-          isTeacher: true,
-          goToTimestamp: goToTimestamp,
-          conversation: conversation,
-          getMeeting: getMeeting,
-          handleCreateFeedback: handleCreateFeedback,
-          setSelectedRecording: setSelectedRecording,
-          selectedRecording: selectedRecording,
-          t: t,
-          userData: userData,
-          recordingsTableData: groupedData[groupedId],
-          handleBatchGradeConversations: handleBatchGradeConversations,
-          aiGrade: aiGrade,
-          playerRef: playerRef
-        })
-      })
-    }), /*#__PURE__*/_jsx(CreateMeetingMultiStepForm, {
-      t: t,
-      submitText: "update",
-      handleClose: () => {
-        setSelectedDiscussion({});
-        setIsEditMeetingDialogOpen(false);
-      },
-      handleSubmit: async props => {
-        setLoading(true);
-        await handleEditDiscussion({
-          newValues: props,
-          discussions: scheduleListData.filter(item => item.groupedId === groupedId),
-          oldGroups: meetingMembers
-        });
-        setIsEditMeetingDialogOpen(false);
-        setLoading(false);
-      },
-      values: {
-        ...selectedGroup,
-        initialGroups: meetingMembers,
-        groups: meetingMembers,
-        members: userData,
-        recordTimeLimit: selectedGroup?.recordTimeLimit || 1,
-        editMeetingImages,
-        editBackgroundImages
-      },
-      isDialog: true,
-      loading: loading,
-      dialogTitle: t("edit_discussion"),
-      open: isEditMeetingDialogOpen
-    })]
-  });
-}, Styles);
-MeetingPromptsList.propTypes = {
-  scheduleListData: PropTypes.arrayOf(PropTypes.shape({
-    meetingPrompt: PropTypes.string.isRequired
-  })).isRequired,
-  setSelectedDiscussion: PropTypes.func,
-  userData: PropTypes.array,
-  handleDeleteDiscussion: PropTypes.func,
-  handleEditDiscussion: PropTypes.func,
-  t: PropTypes.func,
-  loading: PropTypes.bool,
-  classroomMembers: PropTypes.array,
-  editBackgroundImages: PropTypes.array,
-  editMeetingImages: PropTypes.array,
-  scrollableTarget: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
-};
-export default MeetingPromptsList;