course: add modal and menu item for adding students

Author: williamstein

src/packages/frontend/course/modals.tsx

@@ -0,0 +1,48 @@
+import { Alert, Modal } from "antd";
+import type { StudentsMap } from "./store";
+import type { UserMap } from "@cocalc/frontend/todo-types";
+import AddStudents from "@cocalc/frontend/course/students/add-students";
+import { Icon } from "@cocalc/frontend/components/icon";
+
+interface Props {
+  actions;
+  modal?: string;
+  name: string;
+  students?: StudentsMap;
+  user_map?: UserMap;
+  project_id;
+}
+
+export default function Modals(props: Props) {
+  const { students, user_map, modal } = props;
+  if (students == null || user_map == null || !modal) {
+    return null;
+  }
+  const close = () => {
+    props.actions.setState({ modal: "" });
+  };
+  if (modal == "add-students") {
+    return (
+      <Modal
+        onCancel={close}
+        onOk={close}
+        cancelButtonProps={{ style: { display: "none" } }}
+        okText="Close"
+        open
+        title={
+          <>
+            <Icon name="users" /> Add Students
+          </>
+        }
+        width={800}
+      >
+        <AddStudents {...props} students={students} user_map={user_map} />
+      </Modal>
+    );
+  } else {
+    return (
+      <Alert type="warning" message={<>BUG -- Unknown modal: {modal}</>} />
+    );
+  }
+  return null;
+}

src/packages/frontend/course/students/add-students.tsx

@@ -9,8 +9,8 @@ import {
   useActions,
   useIsMountedRef,
 } from "@cocalc/frontend/app-framework";
-import { Button, Col, Form, Input, Row, Checkbox, Flex } from "antd";
-import { ErrorDisplay, Icon, Gap } from "@cocalc/frontend/components";
+import { Button, Col, Form, Input, Row, Checkbox, Flex, Space } from "antd";
+import { ErrorDisplay, Icon } from "@cocalc/frontend/components";
 import type { StudentsMap } from "../store";
 import type { UserMap } from "@cocalc/frontend/todo-types";
 import {
@@ -286,13 +286,11 @@ export default function AddStudents({
             {options}
           </select>
         </Form.Item>
-        <Form.Item>
+        <Space>
           {render_cancel()}
-          <Gap />
           {render_add_selector_button(options)}
-          <Gap />
           {render_add_all_students_button(options)}
-        </Form.Item>
+        </Space>
       </>
     );
   }

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

@@ -11,7 +11,9 @@ import { FrameTree } from "../frame-tree/types";
 import { Actions, CodeEditorState } from "../code-editor/actions";
 import { open_new_tab } from "@cocalc/frontend/misc";
 
-interface CourseEditorState extends CodeEditorState {}
+export interface CourseEditorState extends CodeEditorState {
+  modal?: string;
+}
 
 import {
   CourseActions,
@@ -110,6 +112,10 @@ export class CourseEditorActions extends Actions<CourseEditorState> {
   help = (): void => {
     open_new_tab("https://doc.cocalc.com/teaching-instructors.html");
   };
+
+  setModal = (modal: string) => {
+    this.setState({ modal });
+  };
 }
 
 export { CourseEditorActions as Actions };

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

@@ -3,10 +3,10 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { CourseActions } from "../../course/actions";
+import { CourseActions } from "@cocalc/frontend/course/actions";
 export { CourseActions };
 
-import { init_redux, remove_redux } from "../../course/redux";
+import { init_redux, remove_redux } from "@cocalc/frontend/course/redux";
 
 export function course_redux_name(project_id: string, path: string): string {
   return `course-editor-${project_id}-${path}`;
@@ -33,6 +33,6 @@ export function close_course_actions_and_store(opts: {
     opts.path,
     opts.redux,
     opts.project_id,
-    course_redux_name(opts.project_id, opts.path)
+    course_redux_name(opts.project_id, opts.path),
   );
 }

src/packages/frontend/frame-editors/course-editor/course-panel-wrapper.tsx

@@ -16,25 +16,27 @@ import {
   Rendered,
   redux,
   AppRedux,
+  useEditorRedux,
   useRedux,
   useTypedRedux,
 } from "@cocalc/frontend/app-framework";
-import { Loading, ActivityDisplay } from "../../components";
+import { Loading, ActivityDisplay } from "@cocalc/frontend/components";
 import ShowError from "@cocalc/frontend/components/error";
 import {
   AssignmentsMap,
   CourseSettingsRecord,
   StudentsMap,
   HandoutsMap,
-} from "../../course/store";
+} from "@cocalc/frontend/course/store";
 import { Map } from "immutable";
 import { ProjectMap, UserMap } from "../../todo-types";
 import { CourseActions, course_redux_name } from "./course-actions";
 import { values } from "@cocalc/util/misc";
 import { CourseTabBar } from "./course-tab-bar";
-import { CourseEditorActions } from "./actions";
-import { CourseStore } from "../../course/store";
-import { PayBanner } from "../../course/pay-banner";
+import type { CourseEditorActions, CourseEditorState } from "./actions";
+import { CourseStore } from "@cocalc/frontend/course/store";
+import { PayBanner } from "@cocalc/frontend/course/pay-banner";
+import Modals from "@cocalc/frontend/course/modals";
 
 export interface FrameProps {
   id: string;
@@ -68,7 +70,8 @@ const CoursePanelWrapper: React.FC<FrameProps> = React.memo(
   (props: FrameProps) => {
     const { id, project_id, path, font_size, course_panel, actions, desc } =
       props;
-
+    const useEditor = useEditorRedux<CourseEditorState>({ project_id, path });
+    const modal = useEditor("modal");
     const name = course_redux_name(project_id, path);
 
     const students: StudentsMap | undefined = useRedux(name, "students");
@@ -212,6 +215,14 @@ const CoursePanelWrapper: React.FC<FrameProps> = React.memo(
         }}
         className="smc-vfill"
       >
+        <Modals
+          actions={actions}
+          modal={modal}
+          name={name}
+          students={students}
+          user_map={user_map}
+          project_id={project_id}
+        />
         {render_panel()}
       </div>
     );

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

@@ -54,6 +54,7 @@ const COMMANDS = {
     onClick: ({ props }) => {
       const { id, actions } = props;
       actions.set_frame_type(id, "course_students");
+      actions.setModal("add-students");
     },
   },
 };