@local-civics/mgmt-ui 0.1.88 → 0.1.91

package/dist/index.mjs

@@ -10,8 +10,8 @@ import { Dropzone, MIME_TYPES } from '@mantine/dropzone';
 import { useForm } from '@mantine/form';
 import * as papa from 'papaparse';
 import { openConfirmModal, ModalsProvider } from '@mantine/modals';
-import { Chart } from 'react-charts';
 import AvatarInit from 'avatar-initials';
+import { Chart } from 'react-charts';
 import { useUncontrolled } from '@mantine/hooks';
 
 var __defProp$9 = Object.defineProperty;
@@ -383,10 +383,7 @@ const useStyles$k = createStyles((theme) => ({
     display: "flex",
     backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
     padding: theme.spacing.xl * 1.5,
-    borderRadius: theme.radius.md,
-    [theme.fn.smallerThan("sm")]: {
-      flexDirection: "column"
-    }
+    borderRadius: theme.radius.md
   },
   title: {
     color: theme.white,
@@ -424,7 +421,7 @@ const useStyles$k = createStyles((theme) => ({
     }
   }
 }));
-const StatsGroup = ({ data }) => {
+const StatsGroup = ({ data, footer }) => {
   const { classes } = useStyles$k();
   const stats = data.map((stat) => {
     const value = (() => {
@@ -435,7 +432,7 @@ const StatsGroup = ({ data }) => {
     })();
     return /* @__PURE__ */ React.createElement("div", { key: stat.title, className: classes.stat }, /* @__PURE__ */ React.createElement(Text, { className: classes.count }, value.toLocaleString(), stat.unit), /* @__PURE__ */ React.createElement(Text, { className: classes.title }, stat.title));
   });
-  return /* @__PURE__ */ React.createElement("div", { className: classes.root }, stats);
+  return /* @__PURE__ */ React.createElement("div", { className: classes.root }, stats, footer);
 };
 
 const Tabs = (props) => {
@@ -654,7 +651,7 @@ const Badge = (props) => {
   ))))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$3, null, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
     {
       title: props.trial ? "LESSONS SUBMITTED" : "BADGE COMPLETION",
-      value: props.trial ? props.badgesEarned || 0 : percentageOfBadgesEarned,
+      value: props.trial ? props.lessonsCompleted || 0 : percentageOfBadgesEarned,
       unit: props.trial ? "" : "%"
     }
   ] }), !props.trial && /* @__PURE__ */ React.createElement(
@@ -1729,7 +1726,7 @@ const SplitButton$1 = (props) => {
       onClick: props.onCopyLinkClick
     },
     "Copy link"
-  ), /* @__PURE__ */ React.createElement(
+  ), !props.noExport && /* @__PURE__ */ React.createElement(
     Menu.Item,
     {
       icon: /* @__PURE__ */ React.createElement(IconTableExport, { size: 16, stroke: 1.5, color: menuIconColor }),
@@ -1871,6 +1868,35 @@ const Lesson = (props) => {
   const [tab, setTab] = useState("question");
   const numberOfStudents = props.students.length;
   const percentageOfLessonsCompleted = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
+  const contributors = props.contributors || [];
+  const avatars = contributors.slice(0, 5).map((u, i) => {
+    const fullName = u.name;
+    let initials = fullName.split(/[ -]/).map((n) => n.charAt(0)).join("");
+    const src = AvatarInit.initialAvatar({
+      background: "#1c7ed6",
+      color: "#fff",
+      fontFamily: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
+      fontSize: 10,
+      fontWeight: 250,
+      size: 30,
+      initials
+    });
+    return /* @__PURE__ */ React.createElement(Avatar, { key: i, src, radius: "xl" });
+  });
+  const remainingUsers = contributors.slice(5).length;
+  if (remainingUsers) {
+    const initials = "+" + compact(remainingUsers);
+    const src = AvatarInit.initialAvatar({
+      background: "#1c7ed6",
+      color: "#fff",
+      fontFamily: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
+      fontSize: 10,
+      fontWeight: 250,
+      size: 30,
+      initials
+    });
+    avatars.push(/* @__PURE__ */ React.createElement(Avatar, { src, radius: "xl" }));
+  }
   return /* @__PURE__ */ React.createElement(Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React.createElement(Stack$3, { spacing: "md" }, /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Col, { sm: "auto" }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React.createElement(
     Badge$1,
     {
@@ -1883,16 +1909,22 @@ const Lesson = (props) => {
     SplitButton$1,
     {
       href: props.href,
+      noExport: props.trial,
       onCopyLinkClick: props.onCopyLinkClick,
       onExportDataClick: props.onExportDataClick
     }
-  ))))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$3, null, /* @__PURE__ */ React.createElement(StatsGroup, { data: [
+  ))))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React.createElement(Stack$3, null, /* @__PURE__ */ React.createElement(
+    StatsGroup,
     {
-      title: props.trial ? "# OF SUBMISSIONS" : "LESSON COMPLETION",
-      value: props.trial ? props.lessonsCompleted || 0 : percentageOfLessonsCompleted,
-      unit: props.trial ? "" : "%"
+      data: [
+        {
+          title: props.trial ? "# OF SUBMISSIONS" : "LESSON COMPLETION",
+          value: props.trial ? props.lessonsCompleted || 0 : percentageOfLessonsCompleted,
+          unit: props.trial ? "" : "%"
+        }
+      ]
     }
-  ] }), !props.trial && /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(Group, { position: "apart" }, /* @__PURE__ */ React.createElement(Avatar.Group, { spacing: "sm" }, avatars)), !props.trial && /* @__PURE__ */ React.createElement(
     Select,
     {
       clearable: true,
@@ -2480,23 +2512,8 @@ const BadgeGrid = (props) => {
   return /* @__PURE__ */ React.createElement(SimpleGrid, { cols: 3, breakpoints: [{ maxWidth: "sm", cols: 1 }] }, badges);
 };
 function TaskCard(props) {
-  const avatars = props.users.slice(0, 3).map((u, i) => {
-    const fullName = u.name;
-    let initials = fullName.split(/[ -]/).map((n) => n.charAt(0)).join("");
-    const src = AvatarInit.initialAvatar({
-      background: "#f4f6f7",
-      color: "#888888",
-      fontFamily: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
-      fontSize: 10,
-      fontWeight: 250,
-      size: 30,
-      initials
-    });
-    return /* @__PURE__ */ React.createElement(Avatar, { key: i, src, radius: "xl" });
-  });
-  const remainingUsers = props.users.slice(3).length;
   const isComplete = props.lessonsCompleted >= props.lessonsTotal;
-  return /* @__PURE__ */ React.createElement(Card, { withBorder: true, radius: "md" }, /* @__PURE__ */ React.createElement(Group, { position: "apart" }, /* @__PURE__ */ React.createElement(ThemeIcon, { size: "lg", variant: "gradient", gradient: { from: "indigo", to: "cyan" } }, /* @__PURE__ */ React.createElement(IconBadge, { size: 20 })), !!props.lessonsTotal && isComplete && /* @__PURE__ */ React.createElement(Badge$1, { variant: "gradient", gradient: { from: "indigo", to: "cyan" } }, "Complete"), !!props.lessonsTotal && !isComplete && /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled" }, "Incomplete")), /* @__PURE__ */ React.createElement(UnstyledButton, { component: Link, to: props.href, mt: "md", sx: { ":hover": { textDecoration: "underline" } } }, /* @__PURE__ */ React.createElement(Text, { size: "lg", weight: 500 }, props.title)), /* @__PURE__ */ React.createElement(Text, { size: "sm", color: "dimmed", mt: 5 }, props.description), !!props.lessonsCompleted && /* @__PURE__ */ React.createElement(Text, { color: "dimmed", size: "sm", mt: "md" }, "Lessons completed:", " ", /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Card, { withBorder: true, radius: "md" }, /* @__PURE__ */ React.createElement(Group, { position: "apart", mb: 20 }, /* @__PURE__ */ React.createElement(ThemeIcon, { size: "lg", variant: "gradient", gradient: { from: "indigo", to: "cyan" } }, /* @__PURE__ */ React.createElement(IconBadge, { size: 20 })), !!props.lessonsTotal && isComplete && /* @__PURE__ */ React.createElement(Badge$1, { variant: "gradient", gradient: { from: "indigo", to: "cyan" } }, "Complete"), !!props.lessonsTotal && !isComplete && /* @__PURE__ */ React.createElement(Badge$1, { variant: "filled" }, "Incomplete")), /* @__PURE__ */ React.createElement(UnstyledButton, { component: Link, to: props.href, mt: "md", sx: { ":hover": { textDecoration: "underline" } } }, /* @__PURE__ */ React.createElement(Text, { size: "lg", weight: 500 }, props.title)), /* @__PURE__ */ React.createElement(Text, { size: "sm", color: "dimmed", mt: 5, mb: 50 }, props.description), !!props.lessonsCompleted && /* @__PURE__ */ React.createElement(Text, { color: "dimmed", size: "sm", mt: "md" }, "Lessons completed:", " ", /* @__PURE__ */ React.createElement(
     Text,
     {
       span: true,
@@ -2504,7 +2521,7 @@ function TaskCard(props) {
       sx: (theme) => ({ color: theme.colorScheme === "dark" ? theme.white : theme.black })
     },
     props.lessonsCompleted
-  )), !!props.lessonsTotal && /* @__PURE__ */ React.createElement(Progress, { value: props.lessonsCompleted / props.lessonsTotal * 100, mt: 5 }), /* @__PURE__ */ React.createElement(Group, { position: "apart", mt: "md" }, /* @__PURE__ */ React.createElement(Avatar.Group, { spacing: "sm" }, avatars, !!remainingUsers && /* @__PURE__ */ React.createElement(Avatar, { radius: "xl" }, "+", remainingUsers))));
+  )), !!props.lessonsTotal && /* @__PURE__ */ React.createElement(Progress, { value: props.lessonsCompleted / props.lessonsTotal * 100, mt: 5 }));
 }
 
 const TrialHome = (props) => {