course: add assignments menu item

williamstein · williamstein · commit b4e0a9c2e039 · 2024-09-20T04:02:34.000Z
diff --git a/src/packages/frontend/course/assignments/assignments-panel.tsx b/src/packages/frontend/course/assignments/assignments-panel.tsx
@@ -19,7 +19,7 @@ import { cmp_array } from "@cocalc/util/misc";
 import { Alert, Col, Row } from "antd";
 import { Map, Set } from "immutable";
 import { CourseActions } from "../actions";
-import { FoldersToolbar } from "../common";
+import { AddItems, FoldersToolbar } from "../common/folders-tool-bar";
 import {
   AssignmentRecord,
   IsGradingMap,
@@ -306,3 +306,24 @@ export const AssignmentsPanel: React.FC<Props> = React.memo((props: Props) => {
     </div>
   );
 });
+
+// used for adding assignments outside of the above component.
+export function AddAssignments({ name, actions }) {
+  const assignments = useRedux(name, "assignments");
+  return (
+    <AddItems
+      itemName="assignment"
+      items={assignments}
+      addItems={actions.assignments.addAssignment}
+      selectorStyle={{
+        position: null,
+        width: "100%",
+        boxShadow: null,
+        zIndex: null,
+        backgroundColor: null,
+      }}
+      defaultOpen
+      closable={false}
+    />
+  );
+}
diff --git a/src/packages/frontend/course/common/folders-tool-bar.tsx b/src/packages/frontend/course/common/folders-tool-bar.tsx
@@ -45,18 +45,48 @@ export const FoldersToolbar: React.FC<FoldersToolbarProps> = (
     plural_item_name = "item",
   } = props;
 
-  function submit_selected(path_list) {
-    if (path_list != null) {
-      // If nothing is selected and the user clicks the button to "Add handout (etc)" then
-      // path_list is undefined, hence don't do
-      // (NOTE: I'm also going to make it so that button is disabled, which fits our
-      // UI guidelines, so there's two reasons that path_list is defined here.)
-      add_folders(path_list);
-    }
-  }
+  return (
+    <Space>
+      <SearchInput
+        placeholder={`Find ${plural_item_name}...`}
+        default_value={propsSearch}
+        on_change={search_change}
+        style={SEARCH_STYLE}
+      />
+      {num_omitted ? (
+        <h5
+          style={{
+            textAlign: "center",
+            color: COLORS.GRAY_L,
+            marginTop: "5px",
+          }}
+        >
+          (Omitting {num_omitted}{" "}
+          {num_omitted > 1 ? plural_item_name : item_name})
+        </h5>
+      ) : undefined}
+      <AddItems addItems={add_folders} itemName={item_name} items={items} />
+    </Space>
+  );
+};
 
-  // Omit any -collect directory (unless explicitly searched for).
-  // Omit any currently assigned directory or subdirectories.
+export function AddItems({
+  addItems,
+  itemName,
+  items,
+  defaultOpen,
+  selectorStyle,
+  closable = true,
+}: {
+  addItems;
+  itemName: string;
+  items;
+  defaultOpen?;
+  selectorStyle?;
+  closable?;
+}) {
+  // Omits any -collect directory (unless explicitly searched for).
+  // Omits any currently assigned directory or subdirectories.
   const pathsToOmit = useMemo(() => {
     const omit: Set<string> = new Set([]);
     items
@@ -75,7 +105,9 @@ export const FoldersToolbar: React.FC<FoldersToolbarProps> = (
   const isExcluded = useCallback(
     (path) => {
       if (!path) return true;
-      if (path.includes("-collect")) return true;
+      if (path.includes("-collect")) {
+        return true;
+      }
       if (pathsToOmit.has(path)) {
         return true;
       }
@@ -91,30 +123,17 @@ export const FoldersToolbar: React.FC<FoldersToolbarProps> = (
   );
 
   return (
-    <Space>
-      <SearchInput
-        placeholder={`Find ${plural_item_name}...`}
-        default_value={propsSearch}
-        on_change={search_change}
-        style={SEARCH_STYLE}
-      />
-      {num_omitted ? (
-        <h5
-          style={{
-            textAlign: "center",
-            color: COLORS.GRAY_L,
-            marginTop: "5px",
-          }}
-        >
-          (Omitting {num_omitted}{" "}
-          {num_omitted > 1 ? plural_item_name : item_name})
-        </h5>
-      ) : undefined}
-      <MultipleAddSearch
-        isExcluded={isExcluded}
-        addSelected={submit_selected}
-        itemName={item_name}
-      />
-    </Space>
+    <MultipleAddSearch
+      isExcluded={isExcluded}
+      addSelected={(paths) => {
+        if (paths != null) {
+          addItems(paths);
+        }
+      }}
+      itemName={itemName}
+      defaultOpen={defaultOpen}
+      selectorStyle={selectorStyle}
+      closable={closable}
+    />
   );
-};
+}
diff --git a/src/packages/frontend/course/common/multiple-add-search.tsx b/src/packages/frontend/course/common/multiple-add-search.tsx
@@ -14,6 +14,9 @@ interface MultipleAddSearchProps {
   itemName: string;
   err?: string;
   isExcluded: (path: string) => boolean;
+  defaultOpen?;
+  selectorStyle?;
+  closable: boolean;
 }
 
 // Multiple result selector
@@ -23,8 +26,11 @@ export function MultipleAddSearch({
   addSelected,
   itemName = "result",
   isExcluded,
+  defaultOpen,
+  selectorStyle,
+  closable,
 }: MultipleAddSearchProps) {
-  const [selecting, setSelecting] = useState<boolean>(false);
+  const [selecting, setSelecting] = useState<boolean>(defaultOpen);
   const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set([]));
 
   function clear() {
@@ -44,12 +50,14 @@ export function MultipleAddSearch({
       {selecting && (
         <DirectorySelector
           multi
+          closable={closable}
           style={{
             width: "500px",
             margin: "10px 0",
             position: "absolute",
             zIndex: 1,
             boxShadow: "8px 8px 4px #888",
+            ...selectorStyle,
           }}
           title={`Select one or more ${itemName} directories`}
           onMultiSelect={setSelectedItems}
diff --git a/src/packages/frontend/course/modals.tsx b/src/packages/frontend/course/modals.tsx
@@ -28,6 +28,7 @@ import {
 } from "@cocalc/frontend/course/configuration/configuration-panel";
 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";
 
 interface Props {
   frameActions;
@@ -87,6 +88,8 @@ function getModal(modal: string) {
   switch (modal) {
     case "add-students":
       return { Body: AddStudents, title: "Add Students", icon: "users" };
+    case "add-assignments":
+      return { Body: AddAssignments, title: "Add Assignemtns", icon: "share-square" };
 
     case "start-all-projects":
       return {
diff --git a/src/packages/frontend/frame-editors/course-editor/editor.ts b/src/packages/frontend/frame-editors/course-editor/editor.ts
@@ -40,7 +40,7 @@ const COURSE_MENUS = {
     label: menu.edit,
     pos: 1,
     entries: {
-      editStudents: ["course-add-student"],
+      editStudents: ["course-add-students", "course-add-assignments"],
       courseUpgrades: ["course-upgrades"],
       configCourse: [
         "course-title-and-description",
@@ -86,18 +86,26 @@ const COURSE_MENUS = {
 };
 
 const COMMANDS = {
-  "course-add-student": {
+  "course-add-students": {
     icon: "users",
     label: "Add Students",
     button: "+Student",
     title: "Add one or more students to this course.",
     onClick: ({ props }) => {
-      // const { id, actions } = props;
-      // actions.set_frame_type(id, "course_students");
       const { actions } = props;
       actions.setModal("add-students");
     },
   },
+  "course-add-assignments": {
+    icon: "share-square",
+    label: "Add Assignments",
+    button: "+Assignment",
+    title: "Add one or more assignments to this course.",
+    onClick: ({ props }) => {
+      const { actions } = props;
+      actions.setModal("add-assignments");
+    },
+  },
   "course-title-and-description": {
     icon: "header",
     label: "Course Title and Description",
@@ -201,8 +209,6 @@ const COMMANDS = {
     title:
       "You can start all projects associated with this course so they are immediately ready for your students to use.",
     onClick: ({ props }) => {
-      // const { id, actions } = props;
-      // actions.set_frame_type(id, "course_actions");
       const { actions } = props;
       actions.setModal("start-all-projects");
     },
@@ -214,8 +220,6 @@ const COMMANDS = {
     title:
       "Run a bash terminal command in the home directory of all student projects. Up to 30 commands run in parallel, with a timeout of 1 minutes.",
     onClick: ({ props }) => {
-      // const { id, actions } = props;
-      // actions.set_frame_type(id, "course_actions");
       const { actions } = props;
       actions.setModal("terminal-command");
     },
@@ -226,8 +230,6 @@ const COMMANDS = {
     button: "Reconfigure",
     title: "Update all projects with correct students, descriptions, etc.",
     onClick: ({ props }) => {
-      // const { id, actions } = props;
-      // actions.set_frame_type(id, "course_actions");
       const { actions } = props;
       actions.setModal("reconfigure-all-projects");
     },
@@ -239,8 +241,6 @@ const COMMANDS = {
     title:
       "Export all the grades you have recorded for students in your course to a csv or Python file.",
     onClick: ({ props }) => {
-      // const { id, actions } = props;
-      // actions.set_frame_type(id, "course_actions");
       const { actions } = props;
       actions.setModal("export-grades");
     },
@@ -252,8 +252,6 @@ const COMMANDS = {
     title:
       "Send another email to every student who didn't sign up yet. This sends a maximum of one email every 1 day.",
     onClick: ({ props }) => {
-      // const { id, actions } = props;
-      // actions.set_frame_type(id, "course_actions");
       const { actions } = props;
       actions.setModal("resend-invites");
     },
@@ -265,8 +263,6 @@ const COMMANDS = {
     title:
       "If you add new students to your course, you can ensure they have all the assignments and handouts that you have already assigned to other students in the course.",
     onClick: ({ props }) => {
-      // const { id, actions } = props;
-      // actions.set_frame_type(id, "course_actions");
       const { actions } = props;
       actions.setModal("copy-missing-handouts-and-assignments");
     },
@@ -278,8 +274,6 @@ const COMMANDS = {
     title:
       "Empty trash by purging deleted students, assignments, and handouts.",
     onClick: ({ props }) => {
-      // const { id, actions } = props;
-      // actions.set_frame_type(id, "course_actions");
       const { actions } = props;
       actions.setModal("empty-trash");
     },
@@ -291,8 +285,6 @@ const COMMANDS = {
     title:
       "If for some reason you would like to delete all the student projects created for this course, you may do so by clicking above.",
     onClick: ({ props }) => {
-      // const { id, actions } = props;
-      // actions.set_frame_type(id, "course_actions");
       const { actions } = props;
       actions.setModal("delete-student-projects");
     },
@@ -304,8 +296,6 @@ const COMMANDS = {
     title:
       "Student projects will not be deleted. If you make a mistake, students can still be undeleted from the Student tab or using TimeTravel.",
     onClick: ({ props }) => {
-      // const { id, actions } = props;
-      // actions.set_frame_type(id, "course_actions");
       const { actions } = props;
       actions.setModal("delete-students");
     },
@@ -317,8 +307,6 @@ const COMMANDS = {
     title:
       "Student projects will not be deleted. If you make a mistake, students can still be undeleted from the Student tab or using TimeTravel.",
     onClick: ({ props }) => {
-      // const { id, actions } = props;
-      // actions.set_frame_type(id, "course_shared_project");
       const { actions } = props;
       actions.setModal("delete-shared-project");
     },
@@ -330,8 +318,6 @@ const COMMANDS = {
     title:
       "Create a single common shared project, which everybody -- students and all collaborators on this project (your TAs and other instructors) -- have write access to.",
     onClick: ({ props }) => {
-      // const { id, actions } = props;
-      // actions.set_frame_type(id, "course_shared_project");
       const { actions } = props;
       actions.setModal("create-shared-project");
     },
diff --git a/src/packages/frontend/project/directory-selector.tsx b/src/packages/frontend/project/directory-selector.tsx
@@ -49,6 +49,7 @@ interface Props {
   showHidden?: boolean;
   title?: ReactNode;
   multi?: boolean; // if true enables multiple select
+  closable?: boolean;
 }
 
 export default function DirectorySelector({
@@ -64,6 +65,7 @@ export default function DirectorySelector({
   showHidden: defaultShowHidden,
   title,
   multi,
+  closable = true,
 }: Props) {
   const frameContext = useFrameContext(); // optionally used to define project_id and startingPath, when in a frame
   if (project_id == null) project_id = frameContext.project_id;
@@ -196,7 +198,7 @@ export default function DirectorySelector({
     <Card
       title={
         <>
-          {onClose != null && (
+          {closable && onClose != null && (
             <Icon
               name="times"
               style={{ float: "right", cursor: "pointer", marginTop: "5px" }}
diff --git a/src/packages/static/src/crash.tsx b/src/packages/static/src/crash.tsx
@@ -65,7 +65,7 @@ export default function Crash() {
         Sorry to interrupt your work. An error happened in CoCalc's web
         application.
         <br />
-        Don't worry, all your files are securely stored on its servers!
+        Don't worry, your CoCalc files are securely stored on our servers!
       </div>
 
       <hr />
