@local-civics/mgmt-ui 0.1.91 → 0.1.93

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState } from 'react';
 import { createStyles, Group, Avatar, Text, Box, Badge as Badge$1, ThemeIcon, Collapse, Navbar as Navbar$1, Center, Image, Code, Burger, ScrollArea, UnstyledButton, Card, Modal, Loader, SimpleGrid, Tabs as Tabs$1, Button, Menu, ActionIcon, Title, Grid, Table as Table$h, Container, Stack as Stack$3, LoadingOverlay, Select, Autocomplete, Drawer, Divider, TextInput, Tooltip, Paper, Overlay, Anchor, Progress, Checkbox, createEmotionCache, MantineProvider, AppShell } from '@mantine/core';
-import { IconChevronRight, IconChevronLeft, IconSwitchHorizontal, IconLogout, IconHome2, IconGauge, IconCategory2, IconAlbum, IconLambda, IconBuilding, IconBatteryEco, IconBooks, IconBackpack, IconChevronDown, IconClipboardCopy, IconTableExport, IconArrowLeft, IconPlaylistAdd, IconCheck, IconTrash, IconDownload, IconX, IconCloudUpload, IconInfoCircle, IconColorSwatch, IconPointer, IconBadge, IconHistory, IconLego, IconNews, IconTools, IconPodium, IconAffiliate, IconGrowth, IconBrandInstagram, IconBrandLinkedin, IconBrandFacebook } from '@tabler/icons';
+import { IconChevronRight, IconChevronLeft, IconSwitchHorizontal, IconLogout, IconHome2, IconGauge, IconCategory2, IconAlbum, IconLambda, IconBuilding, IconBatteryEco, IconBooks, IconBackpack, IconChevronDown, IconClipboardCopy, IconTableExport, IconArrowLeft, IconPlaylistAdd, IconCheck, IconTrash, IconDownload, IconX, IconCloudUpload, IconInfoCircle, IconColorSwatch, IconPointer, IconBadge, IconScribble, IconSchool, IconPodium, IconBriefcase, IconPresentation, IconNews, IconTools, IconBrandInstagram, IconBrandLinkedin, IconBrandFacebook } from '@tabler/icons';
 import { Link } from 'react-router-dom';
 import { NotificationsProvider } from '@mantine/notifications';
 export { showNotification, updateNotification } from '@mantine/notifications';
@@ -1701,7 +1701,15 @@ const useStyles$a = createStyles((theme) => ({
 const SplitButton$1 = (props) => {
   const { classes, theme } = useStyles$a();
   const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
-  return /* @__PURE__ */ React.createElement(Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Stack$3, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "gradient",
+      leftIcon: /* @__PURE__ */ React.createElement(IconClipboardCopy, { size: 14 }),
+      onClick: props.onCopyLinkClick
+    },
+    "Assign"
+  ), /* @__PURE__ */ React.createElement(Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React.createElement(
     Button,
     {
       component: Link,
@@ -1719,21 +1727,14 @@ const SplitButton$1 = (props) => {
       className: classes.menuControl
     },
     /* @__PURE__ */ React.createElement(IconChevronDown, { size: 16, stroke: 1.5 })
-  )), /* @__PURE__ */ React.createElement(Menu.Dropdown, null, /* @__PURE__ */ React.createElement(
-    Menu.Item,
-    {
-      icon: /* @__PURE__ */ React.createElement(IconClipboardCopy, { size: 16, stroke: 1.5, color: menuIconColor }),
-      onClick: props.onCopyLinkClick
-    },
-    "Copy link"
-  ), !props.noExport && /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(Menu.Dropdown, null, !props.noExport && /* @__PURE__ */ React.createElement(
     Menu.Item,
     {
       icon: /* @__PURE__ */ React.createElement(IconTableExport, { size: 16, stroke: 1.5, color: menuIconColor }),
       onClick: props.onExportDataClick
     },
     "Export data (.csv)"
-  ))));
+  )))));
 };
 
 function Stack$1(props) {
@@ -1897,6 +1898,14 @@ const Lesson = (props) => {
     });
     avatars.push(/* @__PURE__ */ React.createElement(Avatar, { src, radius: "xl" }));
   }
+  const tabs = props.trial ? [
+    { label: "By question", value: "question" },
+    { label: "By student", value: "students" }
+  ] : [
+    { label: "By question", value: "question" },
+    { label: "By student", value: "students" },
+    { label: "By reflection", value: "reflections" }
+  ];
   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,
     {
@@ -1939,30 +1948,26 @@ const Lesson = (props) => {
         return { value: g.classId, label: g.name };
       })
     }
-  ), /* @__PURE__ */ React.createElement(Stack$3, { spacing: 0 }, !props.trial && /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(Stack$3, { spacing: 0 }, /* @__PURE__ */ React.createElement(
     Tabs,
     {
       value: tab,
-      data: [
-        { label: "By question", value: "question" },
-        { label: "By student", value: "students" },
-        { label: "By reflection", value: "reflections" }
-      ],
+      data: tabs,
       onChange: setTab
     }
-  ), (!!props.trial || tab === "question") && /* @__PURE__ */ React.createElement(
+  ), tab === "question" && /* @__PURE__ */ React.createElement(
     Stack,
     {
       loading: props.loading,
       items: props.questions
     }
-  ), !props.trial && tab === "reflections" && /* @__PURE__ */ React.createElement(
+  ), tab === "reflections" && /* @__PURE__ */ React.createElement(
     Table$3,
     {
       loading: props.loading,
       items: props.reflections
     }
-  ), !props.trial && tab === "students" && /* @__PURE__ */ React.createElement(
+  ), tab === "students" && /* @__PURE__ */ React.createElement(
     Table$2,
     {
       loading: props.loading,
@@ -2626,7 +2631,7 @@ function ImageCheckbox(_a) {
       onClick: () => handleChange(!value),
       className: cx(classes.button, className)
     }),
-    /* @__PURE__ */ React.createElement(ThemeIcon, { variant: "light", size: "lg", color: "blue" }, /* @__PURE__ */ React.createElement(Icon, { size: 40 })),
+    /* @__PURE__ */ React.createElement(ThemeIcon, { variant: "light", size: "lg", color: "blue" }, /* @__PURE__ */ React.createElement(Icon, { size: 25 })),
     /* @__PURE__ */ React.createElement("div", { className: classes.body }, /* @__PURE__ */ React.createElement(Text, { weight: 500, size: "sm", sx: { lineHeight: 1 } }, title)),
     /* @__PURE__ */ React.createElement(
       Checkbox,
@@ -2682,8 +2687,7 @@ var __spreadValues$1 = (a, b) => {
 var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
 const useStyles$1 = createStyles((theme) => ({
   wrapper: {
-    minHeight: 400,
-    height: "100%",
+    minHeight: "100%",
     boxSizing: "border-box",
     backgroundImage: `linear-gradient(-60deg, #4e5561 0%, #222a39 100%)`,
     padding: theme.spacing.xl * 2.5,
@@ -2733,19 +2737,21 @@ const useStyles$1 = createStyles((theme) => ({
   }
 }));
 const OPTIONS = [
-  { description: "high school", title: "High school", icon: IconHistory },
-  { description: "k - 8th", title: "K - 8th", icon: IconLego },
-  { description: "civics", title: "Civics", icon: IconNews },
-  { description: "project-based learning", title: "Project-based learning", icon: IconTools },
+  { description: "elementary", title: "Elementary (K-5)", icon: IconScribble },
+  { description: "middle", title: "Middle (6-8)", icon: IconBackpack },
+  { description: "high school", title: "High School (9-12)", icon: IconSchool },
   { description: "college", title: "College", icon: IconPodium },
-  { description: "career", title: "Career", icon: IconAffiliate },
-  { description: "student leadership", title: "Student leadership", icon: IconGrowth }
+  { description: "career", title: "Career", icon: IconBriefcase },
+  { description: "work-based learning", title: "Work-Based Learning", icon: IconPresentation },
+  { description: "student leadership", title: "Student Leadership", icon: IconPodium },
+  { description: "civics", title: "Civics", icon: IconNews },
+  { description: "project-based learning", title: "Project-Based Learning", icon: IconTools }
 ];
 const TrialRegistration = (props) => {
   const { classes } = useStyles$1();
   const [firstName, setFirstName] = React.useState("");
   const [lastName, setLastName] = React.useState("");
-  const [schoolName, setSchoolName] = React.useState("");
+  const [organization, setOrganization] = React.useState({ organizationId: "", displayName: "" });
   const [interests, setInterests] = React.useState({});
   return /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement(SimpleGrid, { maw: 1300, ml: "auto", mr: "auto", cols: 2, spacing: 50, breakpoints: [{ maxWidth: "md", cols: 1 }] }, /* @__PURE__ */ React.createElement(Group, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
     Image,
@@ -2783,14 +2789,20 @@ const TrialRegistration = (props) => {
       onChange: (e) => setLastName(e.target.value)
     }
   ), /* @__PURE__ */ React.createElement(
-    TextInput,
+    Autocomplete,
     {
-      label: "School Name (Optional)",
+      label: "School/Organization Name",
       placeholder: "What's the name of your school?",
-      classNames: { input: classes.input, label: classes.inputLabel },
-      onChange: (e) => setSchoolName(e.target.value)
+      data: props.organizations.map((o) => {
+        return __spreadProps$1(__spreadValues$1({}, o), { value: o.displayName });
+      }),
+      onItemSubmit: (item) => setOrganization({ organizationId: item.organizationId, displayName: item.displayName }),
+      onChange: (next) => {
+        setOrganization({ organizationId: "", displayName: next });
+        return props.onQueryOrganizations(next);
+      }
     }
-  )), /* @__PURE__ */ React.createElement(Text, { size: 14, weight: 500, mb: "md", mt: "xl" }, "What are you interested in teaching?"), /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(Text, { size: 14, weight: 500, mb: "md", mt: "xl" }, "Where do you want to start? (Select as many as you want)"), /* @__PURE__ */ React.createElement(
     SelectGrid,
     {
       items: OPTIONS,
@@ -2800,7 +2812,13 @@ const TrialRegistration = (props) => {
     Button,
     {
       disabled: !firstName || !lastName,
-      onClick: () => props.onBegin({ firstName, lastName, schoolName, interests: Object.keys(interests) }),
+      onClick: () => props.onBegin({
+        firstName,
+        lastName,
+        organizationId: organization.organizationId,
+        organizationName: organization.displayName,
+        interests: Object.keys(interests)
+      }),
       className: classes.control
     },
     "Begin trial"