course: add handouts menu item

Author: williamstein

src/packages/frontend/course/handouts/handouts-panel.tsx

@@ -19,7 +19,7 @@ import { Button } from "../../antd-bootstrap";
 import { Icon, Tip } from "../../components";
 import { UserMap } from "../../todo-types";
 import { CourseActions } from "../actions";
-import { FoldersToolbar } from "../common";
+import { AddItems, FoldersToolbar } from "../common/folders-tool-bar";
 import { HandoutRecord, HandoutsMap, StudentsMap } from "../store";
 import * as styles from "../styles";
 // CoCalc and course components
@@ -237,3 +237,24 @@ export function HandoutsPanelHeader(props: { n: number }) {
     </Tip>
   );
 }
+
+// used for adding assignments outside of the above component.
+export function AddHandouts({ name, actions }) {
+  const handouts = useRedux(name, "handouts");
+  return (
+    <AddItems
+      itemName="handout"
+      items={handouts}
+      addItems={actions.assignments.addHandout}
+      selectorStyle={{
+        position: null,
+        width: "100%",
+        boxShadow: null,
+        zIndex: null,
+        backgroundColor: null,
+      }}
+      defaultOpen
+      closable={false}
+    />
+  );
+}

src/packages/frontend/course/modals.tsx

@@ -29,6 +29,7 @@ import {
 import { Parallel } from "@cocalc/frontend/course/configuration/parallel";
 import { Nbgrader } from "@cocalc/frontend/course/configuration/nbgrader";
 import { AddAssignments } from "@cocalc/frontend/course/assignments/assignments-panel";
+import { AddHandouts } from "@cocalc/frontend/course/handouts/handouts-panel";
 
 interface Props {
   frameActions;
@@ -89,7 +90,13 @@ function getModal(modal: string) {
     case "add-students":
       return { Body: AddStudents, title: "Add Students", icon: "users" };
     case "add-assignments":
-      return { Body: AddAssignments, title: "Add Assignemtns", icon: "share-square" };
+      return {
+        Body: AddAssignments,
+        title: "Add Assignmetns",
+        icon: "share-square",
+      };
+    case "add-handouts":
+      return { Body: AddHandouts, title: "Add Handouts", icon: "text1" };
 
     case "start-all-projects":
       return {

src/packages/frontend/frame-editors/course-editor/editor.ts

@@ -40,7 +40,11 @@ const COURSE_MENUS = {
     label: menu.edit,
     pos: 1,
     entries: {
-      editStudents: ["course-add-students", "course-add-assignments"],
+      editStudents: [
+        "course-add-students",
+        "course-add-assignments",
+        "course-add-handouts",
+      ],
       courseUpgrades: ["course-upgrades"],
       configCourse: [
         "course-title-and-description",
@@ -106,6 +110,16 @@ const COMMANDS = {
       actions.setModal("add-assignments");
     },
   },
+  "course-add-handouts": {
+    icon: "text1",
+    label: "Add Handouts",
+    button: "+Handouts",
+    title: "Add one or more handouts to this course.",
+    onClick: ({ props }) => {
+      const { actions } = props;
+      actions.setModal("add-handouts");
+    },
+  },
   "course-title-and-description": {
     icon: "header",
     label: "Course Title and Description",