@nualang/nualang-ui-components 0.1.1315 → 0.1.1316

package/dist/Cards/FeedbackCard/FeedbackCard.js

@@ -13,6 +13,7 @@ import level2Rubric from '../../Dialogs/PDFViewer/rubrics/level2Rubric.pdf';
 import level3Rubric from '../../Dialogs/PDFViewer/rubrics/level3Rubric.pdf';
 import level4Rubric from '../../Dialogs/PDFViewer/rubrics/level4Rubric.pdf';
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
+import NualaCreating from "../../Misc/NualaCreating/NualaCreating";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function FeedbackCard({
   t = x => x,
@@ -197,121 +198,139 @@ export default function FeedbackCard({
               boxShadow: 3,
               overflow: "hidden"
             },
-            children: [/*#__PURE__*/_jsx(Box, {
+            children: [aiJustGenerated ? /*#__PURE__*/_jsxs(Grid, {
               sx: {
-                px: 3,
-                pt: 2,
-                pb: 1,
-                fontWeight: 600,
-                color: "text.secondary"
+                ...(!aiJustGenerated && {
+                  display: "none"
+                })
               },
-              children: /*#__PURE__*/_jsxs(Grid, {
-                container: true,
-                alignItems: "center",
-                spacing: 3,
-                children: [/*#__PURE__*/_jsx(Grid, {
-                  size: {
-                    xs: 12,
-                    md: 2.5
-                  },
-                  children: /*#__PURE__*/_jsx(Typography, {
-                    variant: "subtitle2",
-                    children: t("student")
-                  })
-                }), /*#__PURE__*/_jsx(Grid, {
-                  size: {
-                    xs: 12,
-                    md: 9.5
-                  },
-                  children: /*#__PURE__*/_jsxs(Box, {
-                    sx: {
-                      display: "flex",
-                      alignItems: "center"
+              mx: 2,
+              size: 12,
+              children: [/*#__PURE__*/_jsx(Typography, {
+                variant: "h6",
+                sx: {
+                  mt: 2,
+                  mb: 2
+                },
+                children: t("generating_feedback")
+              }), /*#__PURE__*/_jsx(NualaCreating, {})]
+            }) : /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(Box, {
+                sx: {
+                  px: 3,
+                  pt: 2,
+                  pb: 1,
+                  fontWeight: 600,
+                  color: "text.secondary"
+                },
+                children: /*#__PURE__*/_jsxs(Grid, {
+                  container: true,
+                  alignItems: "center",
+                  spacing: 3,
+                  children: [/*#__PURE__*/_jsx(Grid, {
+                    size: {
+                      xs: 12,
+                      md: 2.5
                     },
-                    children: [/*#__PURE__*/_jsx(Typography, {
+                    children: /*#__PURE__*/_jsx(Typography, {
                       variant: "subtitle2",
-                      children: t("feedback")
-                    }), /*#__PURE__*/_jsx(Tooltip, {
-                      title: t("rubric_info_desc"),
-                      children: /*#__PURE__*/_jsx(IconButton, {
-                        onClick: handleOpenPDF,
-                        color: "primary",
-                        "aria-label": t("rubric_info"),
-                        size: "small",
-                        children: /*#__PURE__*/_jsx(HelpOutlineIcon, {})
-                      })
-                    })]
-                  })
-                })]
-              })
-            }), /*#__PURE__*/_jsx(CardContent, {
-              sx: {
-                px: 3,
-                pt: 1
-              },
-              children: [...selectedMembers].sort((a, b) => {
-                const aJoined = joinedMembers.includes(a.memberId);
-                const bJoined = joinedMembers.includes(b.memberId);
-                return aJoined === bJoined ? 0 : aJoined ? -1 : 1;
-              }).map(student => {
-                const isAbsent = hasSubmission && !joinedMembers.includes(student.memberId);
-                const disabled = !hasSubmission || isAbsent;
-                const studentFeedback = values.feedbackData[student.memberId] || {};
-                return /*#__PURE__*/_jsx(Box, {
-                  sx: {
-                    py: 2
-                  },
-                  children: /*#__PURE__*/_jsxs(Grid, {
-                    container: true,
-                    alignItems: "flex-start",
-                    spacing: 3,
-                    children: [/*#__PURE__*/_jsx(Grid, {
-                      size: {
-                        xs: 12,
-                        md: 2.5
-                      },
-                      children: /*#__PURE__*/_jsxs(Box, {
+                      children: t("student")
+                    })
+                  }), /*#__PURE__*/_jsx(Grid, {
+                    size: {
+                      xs: 12,
+                      md: 9.5
+                    },
+                    children: /*#__PURE__*/_jsxs(Box, {
+                      sx: {
                         display: "flex",
-                        alignItems: "center",
-                        gap: 2,
-                        children: [/*#__PURE__*/_jsx(Avatar, {
-                          alt: student.username,
-                          src: student.userImage,
-                          sx: {
-                            width: 48,
-                            height: 48,
-                            filter: isAbsent ? "grayscale(100%)" : "none"
-                          }
-                        }), /*#__PURE__*/_jsx(Typography, {
-                          fontWeight: 600,
-                          sx: {
-                            color: isAbsent ? grey[500] : "text.primary"
-                          },
-                          children: student.username
-                        })]
-                      })
-                    }), /*#__PURE__*/_jsx(Grid, {
-                      size: {
-                        xs: 12,
-                        md: 9.5
+                        alignItems: "center"
                       },
-                      children: /*#__PURE__*/_jsx(TextField, {
-                        variant: "outlined",
-                        fullWidth: true,
-                        multiline: true,
-                        disabled: disabled,
-                        value: studentFeedback.feedbackText || "",
-                        onChange: e => {
-                          setFieldValue(`feedbackData.${student.memberId}.feedbackText`, e.target.value);
-                          setHasBeenEdited(true);
-                          setIsSubmitted(false);
+                      children: [/*#__PURE__*/_jsx(Typography, {
+                        variant: "subtitle2",
+                        children: t("feedback")
+                      }), /*#__PURE__*/_jsx(Tooltip, {
+                        title: t("rubric_info_desc"),
+                        children: /*#__PURE__*/_jsx(IconButton, {
+                          onClick: handleOpenPDF,
+                          color: "primary",
+                          "aria-label": t("rubric_info"),
+                          size: "small",
+                          children: /*#__PURE__*/_jsx(HelpOutlineIcon, {})
+                        })
+                      })]
+                    })
+                  })]
+                })
+              }), /*#__PURE__*/_jsx(CardContent, {
+                sx: {
+                  px: 3,
+                  pt: 1
+                },
+                children: [...selectedMembers].sort((a, b) => {
+                  const aJoined = joinedMembers.includes(a.memberId);
+                  const bJoined = joinedMembers.includes(b.memberId);
+                  return aJoined === bJoined ? 0 : aJoined ? -1 : 1;
+                }).map(student => {
+                  const isAbsent = hasSubmission && !joinedMembers.includes(student.memberId);
+                  const disabled = !hasSubmission || isAbsent;
+                  const studentFeedback = values.feedbackData[student.memberId] || {};
+                  return /*#__PURE__*/_jsx(Box, {
+                    sx: {
+                      py: 2
+                    },
+                    children: /*#__PURE__*/_jsxs(Grid, {
+                      container: true,
+                      alignItems: "flex-start",
+                      spacing: 3,
+                      children: [/*#__PURE__*/_jsx(Grid, {
+                        size: {
+                          xs: 12,
+                          md: 2.5
+                        },
+                        children: /*#__PURE__*/_jsxs(Box, {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 2,
+                          children: [/*#__PURE__*/_jsx(Avatar, {
+                            alt: student.username,
+                            src: student.userImage,
+                            sx: {
+                              width: 48,
+                              height: 48,
+                              filter: isAbsent ? "grayscale(100%)" : "none"
+                            }
+                          }), /*#__PURE__*/_jsx(Typography, {
+                            fontWeight: 600,
+                            sx: {
+                              color: isAbsent ? grey[500] : "text.primary"
+                            },
+                            children: student.username
+                          })]
+                        })
+                      }), /*#__PURE__*/_jsx(Grid, {
+                        size: {
+                          xs: 12,
+                          md: 9.5
                         },
-                        placeholder: t("Write your feedback here")
-                      })
-                    })]
-                  })
-                }, student.memberId);
-              })
+                        children: /*#__PURE__*/_jsx(TextField, {
+                          variant: "outlined",
+                          fullWidth: true,
+                          multiline: true,
+                          disabled: disabled,
+                          value: studentFeedback.feedbackText || "",
+                          onChange: e => {
+                            setFieldValue(`feedbackData.${student.memberId}.feedbackText`, e.target.value);
+                            setHasBeenEdited(true);
+                            setIsSubmitted(false);
+                          },
+                          placeholder: t("Write your feedback here")
+                        })
+                      })]
+                    })
+                  }, student.memberId);
+                })
+              })]
             }), /*#__PURE__*/_jsxs(CardActions, {
               sx: {
                 px: 3,
@@ -354,13 +373,13 @@ export default function FeedbackCard({
                 },
                 children: [/*#__PURE__*/_jsx(Button, {
                   variant: "outlined",
-                  disabled: !hasSubmission,
+                  disabled: !hasSubmission || aiJustGenerated,
                   onClick: handleOpenRecordingDialog,
                   children: t("view_recording")
                 }), /*#__PURE__*/_jsx(Button, {
                   variant: "contained",
                   color: "secondary",
-                  disabled: !hasSubmission,
+                  disabled: !hasSubmission || aiJustGenerated,
                   onClick: handleGenerateAI,
                   endIcon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
                   children: t("generate_feedback")

package/dist/Cards/RecordingCard/RecordingCard.js

@@ -4,9 +4,15 @@ import Avatar from "@mui/material/Avatar";
 import AvatarGroup from "@mui/material/AvatarGroup";
 import Chip from "@mui/material/Chip";
 import Box from "@mui/material/Box";
-import { Card, CardActionArea, Divider, Button, Tooltip } from "@mui/material";
+import { Card, CardActionArea, Divider, Button, Tooltip, IconButton } from "@mui/material";
 import PropTypes from "prop-types";
 import dayjs from "dayjs";
+import PDFViewer from "../../Dialogs/PDFViewer/PDFViewer";
+import level1Rubric from '../../Dialogs/PDFViewer/rubrics/level1Rubric.pdf';
+import level2Rubric from '../../Dialogs/PDFViewer/rubrics/level2Rubric.pdf';
+import level3Rubric from '../../Dialogs/PDFViewer/rubrics/level3Rubric.pdf';
+import level4Rubric from '../../Dialogs/PDFViewer/rubrics/level4Rubric.pdf';
+import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function RecordingCard({
   isTeacher = false,
@@ -16,6 +22,9 @@ export default function RecordingCard({
   t = x => x
 }) {
   const [promptExpanded, setPromptExpanded] = useState(false);
+  const [openPDF, setOpenPDF] = useState(false);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [scale, setScale] = useState(1);
   const selectedMembers = userData.filter(o1 => [recordingsListData?.userIds].flat().some(o2 => o1?.memberId === o2));
   const attendedMembers = selectedMembers.filter(attendee => recordingsListData?.joinedMembers?.includes(attendee?.memberId));
   const notAttendedMembers = selectedMembers.filter(attendee => !recordingsListData?.joinedMembers?.includes(attendee?.memberId));
@@ -28,6 +37,13 @@ export default function RecordingCard({
     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 `${formattedDate} - ${dueText}`;
   };
+  const rubricMap = {
+    1: level1Rubric,
+    2: level2Rubric,
+    3: level3Rubric,
+    4: level4Rubric
+  };
+  const pdfUrl = rubricMap[recordingsListData?.level] || level1Rubric;
   const renderExpandableText = (text, expanded, setExpanded, maxChars = 150) => {
     if (!text) return null;
     const isLong = text.length > maxChars;
@@ -50,145 +66,177 @@ export default function RecordingCard({
       })]
     });
   };
-  return /*#__PURE__*/_jsx(Card, {
-    sx: {
-      display: "flex",
-      marginBottom: 2,
-      boxShadow: 3
-    },
-    children: /*#__PURE__*/_jsx(CardActionArea, {
-      component: "a",
-      onClick: handleView,
-      children: /*#__PURE__*/_jsxs(Box, {
-        sx: {
-          p: 2
-        },
-        children: [/*#__PURE__*/_jsxs(Box, {
+  const handleOpenPDF = () => {
+    setOpenPDF(true);
+  };
+  const handleClosePDF = () => {
+    setOpenPDF(false);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Card, {
+      sx: {
+        display: "flex",
+        marginBottom: 2,
+        boxShadow: 3
+      },
+      children: /*#__PURE__*/_jsx(CardActionArea, {
+        component: "a",
+        onClick: handleView,
+        children: /*#__PURE__*/_jsxs(Box, {
           sx: {
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center"
+            p: 2
           },
           children: [/*#__PURE__*/_jsxs(Box, {
             sx: {
               display: "flex",
-              alignItems: "center",
-              gap: 1
+              justifyContent: "space-between",
+              alignItems: "center"
             },
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "body1",
-              fontWeight: 600,
+            children: [/*#__PURE__*/_jsxs(Box, {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1
+              },
+              children: [/*#__PURE__*/_jsx(Typography, {
+                variant: "body1",
+                fontWeight: 600,
+                sx: {
+                  color: "text.primary"
+                },
+                children: recordingsListData?.meetingTopic
+              }), recordingsListData?.feedbackText && /*#__PURE__*/_jsx(Chip, {
+                label: t("submission_graded"),
+                color: "success",
+                size: "small"
+              })]
+            }), /*#__PURE__*/_jsx(Typography, {
+              variant: "body2",
+              color: "text.secondary",
               sx: {
-                color: "text.primary"
+                ml: 1.5,
+                fontWeight: 500
               },
-              children: recordingsListData?.meetingTopic
-            }), recordingsListData?.feedbackText && /*#__PURE__*/_jsx(Chip, {
-              label: t("submission_graded"),
-              color: "success",
-              size: "small"
+              children: formatMeetingDueText(recordingsListData.timestamp, t)
             })]
-          }), /*#__PURE__*/_jsx(Typography, {
-            variant: "body2",
-            color: "text.secondary",
+          }), /*#__PURE__*/_jsx(Divider, {
             sx: {
-              ml: 1.5,
-              fontWeight: 500
-            },
-            children: formatMeetingDueText(recordingsListData.timestamp, t)
-          })]
-        }), /*#__PURE__*/_jsx(Divider, {
-          sx: {
-            my: 1.5
-          }
-        }), /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-            mb: 1.5
-          },
-          children: [/*#__PURE__*/_jsxs(Box, {
+              my: 1.5
+            }
+          }), /*#__PURE__*/_jsxs(Box, {
             sx: {
               display: "flex",
+              justifyContent: "space-between",
               alignItems: "center",
-              gap: 1
+              mb: 1.5
             },
-            children: [/*#__PURE__*/_jsx(AvatarGroup, {
-              max: 4,
-              spacing: -3,
+            children: [/*#__PURE__*/_jsxs(Box, {
               sx: {
                 display: "flex",
-                "& .MuiAvatar-root": {
-                  width: 40,
-                  height: 40,
-                  fontSize: "1rem"
-                }
+                alignItems: "center",
+                gap: 1
               },
-              children: attendedMembers.map(attendee => /*#__PURE__*/_jsx(Tooltip, {
-                title: `${attendee?.username} - Present`,
-                children: /*#__PURE__*/_jsx(Avatar, {
-                  alt: attendee?.username,
-                  src: attendee?.userImage
-                })
-              }, attendee?.memberId))
-            }), notAttendedMembers.length > 0 && /*#__PURE__*/_jsx(AvatarGroup, {
-              max: 4,
-              spacing: -3,
+              children: [/*#__PURE__*/_jsx(AvatarGroup, {
+                max: 4,
+                spacing: -3,
+                sx: {
+                  display: "flex",
+                  "& .MuiAvatar-root": {
+                    width: 40,
+                    height: 40,
+                    fontSize: "1rem"
+                  }
+                },
+                children: attendedMembers.map(attendee => /*#__PURE__*/_jsx(Tooltip, {
+                  title: `${attendee?.username} - Present`,
+                  children: /*#__PURE__*/_jsx(Avatar, {
+                    alt: attendee?.username,
+                    src: attendee?.userImage
+                  })
+                }, attendee?.memberId))
+              }), notAttendedMembers.length > 0 && /*#__PURE__*/_jsx(AvatarGroup, {
+                max: 4,
+                spacing: -3,
+                sx: {
+                  display: "flex",
+                  ml: 2,
+                  "& .MuiAvatar-root": {
+                    width: 40,
+                    height: 40,
+                    fontSize: "1rem",
+                    filter: "grayscale(100%)"
+                  }
+                },
+                children: notAttendedMembers.map(attendee => /*#__PURE__*/_jsx(Tooltip, {
+                  title: `${attendee?.username} - Not Present`,
+                  children: /*#__PURE__*/_jsx(Avatar, {
+                    alt: attendee?.username,
+                    src: attendee?.userImage
+                  })
+                }, attendee?.memberId))
+              })]
+            }), /*#__PURE__*/_jsx(Button, {
+              variant: "contained",
+              color: "primary",
+              onClick: e => {
+                e.stopPropagation();
+                handleView();
+              },
+              sx: {
+                borderRadius: 2
+              },
+              children: t("view_submission")
+            })]
+          }), renderExpandableText(recordingsListData?.meetingPrompt, promptExpanded, setPromptExpanded), recordingsListData?.feedbackText && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Divider, {
+              sx: {
+                my: 1.5,
+                width: "100%"
+              }
+            }), /*#__PURE__*/_jsxs(Box, {
               sx: {
                 display: "flex",
-                ml: 2,
-                "& .MuiAvatar-root": {
-                  width: 40,
-                  height: 40,
-                  fontSize: "1rem",
-                  filter: "grayscale(100%)"
-                }
+                alignItems: "center"
               },
-              children: notAttendedMembers.map(attendee => /*#__PURE__*/_jsx(Tooltip, {
-                title: `${attendee?.username} - Not Present`,
-                children: /*#__PURE__*/_jsx(Avatar, {
-                  alt: attendee?.username,
-                  src: attendee?.userImage
+              children: [/*#__PURE__*/_jsx(Typography, {
+                variant: "subtitle2",
+                fontWeight: 600,
+                children: t("feedback")
+              }), /*#__PURE__*/_jsx(Tooltip, {
+                title: t("rubric_info_desc"),
+                children: /*#__PURE__*/_jsx(IconButton, {
+                  color: "primary",
+                  "aria-label": t("rubric_info"),
+                  size: "small",
+                  onClick: e => {
+                    e.stopPropagation();
+                    handleOpenPDF();
+                  },
+                  children: /*#__PURE__*/_jsx(HelpOutlineIcon, {})
                 })
-              }, attendee?.memberId))
+              })]
+            }), /*#__PURE__*/_jsx(Typography, {
+              variant: "body2",
+              color: "text.secondary",
+              sx: {
+                fontStyle: "italic",
+                whiteSpace: "pre-line"
+              },
+              children: recordingsListData.feedbackText
             })]
-          }), /*#__PURE__*/_jsx(Button, {
-            variant: "contained",
-            color: "primary",
-            onClick: e => {
-              e.stopPropagation();
-              handleView();
-            },
-            sx: {
-              borderRadius: 2
-            },
-            children: t("view_submission")
-          })]
-        }), renderExpandableText(recordingsListData?.meetingPrompt, promptExpanded, setPromptExpanded), recordingsListData?.feedbackText && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Divider, {
-            sx: {
-              my: 1.5,
-              width: "100%"
-            }
-          }), /*#__PURE__*/_jsx(Typography, {
-            variant: "subtitle2",
-            fontWeight: 600,
-            sx: {
-              mb: 0.5
-            },
-            children: t("feedback")
-          }), /*#__PURE__*/_jsx(Typography, {
-            variant: "body2",
-            color: "text.secondary",
-            sx: {
-              fontStyle: "italic",
-              whiteSpace: "pre-line"
-            },
-            children: recordingsListData.feedbackText
           })]
-        })]
+        })
       })
-    })
+    }), /*#__PURE__*/_jsx(PDFViewer, {
+      open: openPDF,
+      handleClose: handleClosePDF,
+      pdfUrl: pdfUrl,
+      pageNumber: pageNumber,
+      setPageNumber: setPageNumber,
+      scale: scale,
+      setScale: setScale,
+      t: t
+    })]
   });
 }
 RecordingCard.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1315",
+  "version": "0.1.1316",
   "type": "module",
   "main": "dist/index.js",
   "files": [