Fix issue #763 - Reading table improvements

bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/edit/AssignmentEdit.tsx

@@ -1,14 +1,17 @@
 import styles from "@components/routes/AssignmentBuilder/AssignmentBuilder.module.css";
 import { ErrorState } from "@components/routes/AssignmentBuilder/components/ErrorState/ErrorState";
 import { AssignmentExercises } from "@components/routes/AssignmentBuilder/components/exercises/AssignmentExercisesList";
+import { useDialogContext } from "@components/ui/DialogContext";
 import classNames from "classnames";
+import { BreadCrumb } from "primereact/breadcrumb";
 import { Button } from "primereact/button";
 import { Calendar } from "primereact/calendar";
 import { InputNumber } from "primereact/inputnumber";
 import { InputText } from "primereact/inputtext";
 import { InputTextarea } from "primereact/inputtextarea";
 import { ProgressSpinner } from "primereact/progressspinner";
 import { SelectButton } from "primereact/selectbutton";
+import { Tooltip } from "primereact/tooltip";
 import { Control, Controller } from "react-hook-form";
 
 import { useExercisesSelector } from "@/hooks/useExercisesSelector";
@@ -59,6 +62,24 @@ export const AssignmentEdit = ({
   watch
 }: AssignmentEditProps) => {
   const { isExercisesError, isExercisesLoading } = useExercisesSelector();
+  const { showDialog } = useDialogContext();
+
+  const onReadingsInfoClick = () => {
+    showDialog({
+      style: { width: "50vw" },
+      header: "Sections to Read",
+      children: (
+        <p className="m-0">
+          Reading assignments are meant to encourage students to do the reading, by giving them
+          points for interacting with various interactive elements that are a part of the page. The
+          number of activities required is set to 80% of the number of questions in the reading.
+          Readings assignments are meant to be <strong>formative</strong> and therefore the
+          questions are not graded for correctness, rather the students are given points for
+          interacting with them.
+        </p>
+      )
+    });
+  };
 
   if (isExercisesError) {
     return (
@@ -80,6 +101,34 @@ export const AssignmentEdit = ({
     );
   }
 
+  const getBreadcrumbModel = () => {
+    if (activeTab === "basic") return [];
+    if (activeTab === "readings") {
+      return [
+        {
+          label: "Readings",
+          template: (item: any) => (
+            <div className="flex align-items-center gap-1">
+              <span>{item.label}</span>
+              <i
+                className="pi pi-info-circle"
+                onClick={onReadingsInfoClick}
+                data-pr-tooltip="Information about readings"
+                data-pr-position="top"
+                style={{
+                  cursor: "pointer",
+                  color: "var(--text-color-secondary)",
+                  fontSize: "0.875rem"
+                }}
+              />
+            </div>
+          )
+        }
+      ];
+    }
+    return [{ label: "Assignment Exercises" }];
+  };
+
   return (
     <div className={classNames(styles.layout, { [styles.collapsed]: isCollapsed })}>
       <div className={classNames(styles.sidebar, { [styles.collapsed]: isCollapsed })}>
@@ -146,6 +195,12 @@ export const AssignmentEdit = ({
           </div>
         </div>
         <div className={styles.mainContentInner}>
+          <Tooltip target="[data-pr-tooltip]" />
+          <BreadCrumb
+            model={getBreadcrumbModel()}
+            home={{ icon: "pi pi-home", command: () => onTabChange("basic") }}
+            className="mb-3"
+          />
           {activeTab === "basic" && (
             <div className={styles.formContainer}>
               <div className={styles.card}>

bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/AssignmentExercisesList/AssignmentExercisesContainer.tsx

@@ -18,11 +18,10 @@ import { EditView } from "./EditView";
 import { ErrorDisplay } from "./ErrorDisplay";
 import { ExerciseListView } from "./ExerciseListView";
 import { ExerciseSuccessDialog } from "./ExerciseSuccessDialog";
-import { ExercisesBreadcrumb } from "./ExercisesBreadcrumb";
 import { AssignmentExercisesComponentProps, ViewMode } from "./types";
 
 export const AssignmentExercisesContainer = ({
-  startRowIndex,
+  startItemId,
   draggingFieldName,
   handleMouseDown,
   handleMouseUp,
@@ -34,22 +33,15 @@ export const AssignmentExercisesContainer = ({
   const [globalFilter, setGlobalFilter] = useState("");
   const [showSuccessDialog, setShowSuccessDialog] = useState(false);
   const [lastExerciseType, setLastExerciseType] = useState<string>("");
-  const [isSaving, setIsSaving] = useState(false);
+  const [_, setIsSaving] = useState(false);
   const [resetExerciseForm, setResetExerciseForm] = useState(false);
   const { updateAssignmentExercises } = useUpdateAssignmentExercise();
   const [currentEditExercise, setCurrentEditExercise] = useState<Exercise | null>(null);
 
-  const {
-    exerciseViewMode: viewMode,
-    exerciseType,
-    exerciseId,
-    exerciseStep,
-    updateExerciseViewMode,
-    selectedAssignmentId
-  } = useAssignmentRouting();
+  const { exerciseViewMode: viewMode, updateExerciseViewMode } = useAssignmentRouting();
 
   const setSelectedExercises = (exercises: Exercise[]) => {
-    if (startRowIndex === null) {
+    if (startItemId === null) {
       dispatch(exercisesActions.setSelectedExercises(exercises));
     }
   };
@@ -85,27 +77,8 @@ export const AssignmentExercisesContainer = ({
     return <ErrorDisplay refetch={refetch} />;
   }
 
-  // Type casting for the drag and drop handlers
-  const typedHandleMouseDown = (rowIndex: number, fieldName: DraggingExerciseColumns) => {
-    handleMouseDown(rowIndex, fieldName as any);
-  };
-
-  const typedHandleChange = (rowIndex: number, fieldName: DraggingExerciseColumns, value: any) => {
-    handleChange(rowIndex, fieldName as any, value);
-  };
-
-  const typedHandleMouseUp = () => {
-    handleMouseUp();
-  };
-
   return (
     <div className={styles.exerciseManager}>
-      <ExercisesBreadcrumb
-        viewMode={viewMode}
-        setViewMode={updateExerciseViewMode}
-        currentEditExercise={currentEditExercise}
-      />
-
       {viewMode === "list" && (
         <ExerciseListView
           globalFilter={globalFilter}
@@ -117,11 +90,11 @@ export const AssignmentExercisesContainer = ({
           setViewMode={updateExerciseViewMode}
           setResetExerciseForm={setResetExerciseForm}
           setCurrentEditExercise={setCurrentEditExercise}
-          startRowIndex={startRowIndex}
+          startItemId={startItemId}
           draggingFieldName={draggingFieldName as DraggingExerciseColumns | null}
-          handleMouseDown={typedHandleMouseDown}
-          handleMouseUp={typedHandleMouseUp}
-          handleChange={typedHandleChange}
+          handleMouseDown={handleMouseDown}
+          handleMouseUp={handleMouseUp}
+          handleChange={handleChange}
         />
       )}
 

bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/AssignmentExercisesList/AssignmentExercisesTable.tsx

@@ -24,11 +24,11 @@ interface AssignmentExercisesTableProps {
   globalFilter: string;
   setCurrentEditExercise: SetCurrentEditExercise;
   setViewMode: ViewModeSetter;
-  startRowIndex: number | null;
+  startItemId: number | null;
   draggingFieldName: DraggingExerciseColumns | null;
-  handleMouseDown: (rowIndex: number, fieldName: DraggingExerciseColumns) => void;
+  handleMouseDown: (itemId: number, fieldName: DraggingExerciseColumns) => void;
   handleMouseUp: MouseUpHandler;
-  handleChange: (rowIndex: number, fieldName: DraggingExerciseColumns, value: any) => void;
+  handleChange: (itemId: number, fieldName: DraggingExerciseColumns, value: any) => void;
 }
 
 export const AssignmentExercisesTable = ({
@@ -38,7 +38,7 @@ export const AssignmentExercisesTable = ({
   globalFilter,
   setCurrentEditExercise,
   setViewMode,
-  startRowIndex,
+  startItemId,
   draggingFieldName,
   handleMouseDown,
   handleMouseUp,
@@ -73,7 +73,7 @@ export const AssignmentExercisesTable = ({
   };
 
   return (
-    <div style={{ position: "relative" }}>
+    <div style={{ position: "relative", overflow: "auto" }}>
       <DataTable<Exercise[]>
         style={{ minWidth: "100%", userSelect: "none" }}
         value={assignmentExercises}
@@ -85,7 +85,7 @@ export const AssignmentExercisesTable = ({
         }
         dataKey="id"
         scrollable
-        scrollHeight="calc(100vh - 340px)"
+        scrollHeight="calc(100vh - 320px)"
         size="small"
         rowClassName={() => "assignmentExercise_row"}
         stripedRows
@@ -151,25 +151,16 @@ export const AssignmentExercisesTable = ({
         <Column
           header="Exercise"
           bodyStyle={{
-            width: "15rem"
+            maxWidth: "20rem"
           }}
           body={(data: Exercise) => (
             <div
               style={{
-                width: "15rem",
                 maxWidth: "100%"
               }}
             >
-              <div
-                style={{
-                  display: "flex",
-                  wordBreak: "break-word"
-                }}
-                className="font-medium"
-              >
-                {data.name || data.title}
-              </div>
-              <div className="text-500 text-sm">{data.qnumber}</div>
+              <div className="font-medium nowrap">{data.name || data.title}</div>
+              <div className="text-500 text-sm nowrap">{data.qnumber}</div>
             </div>
           )}
           sortField="name"
@@ -189,15 +180,15 @@ export const AssignmentExercisesTable = ({
             <EditDropdownValueHeader field="autograde" label="Autograde" defaultValue="" />
           )}
           bodyStyle={{ padding: 0 }}
-          body={(rowData: Exercise, { rowIndex }) => (
+          body={(rowData: Exercise) => (
             <EditableCellFactory
               fieldName="autograde"
-              rowIndex={rowIndex}
+              itemId={rowData.id}
               handleMouseDown={handleMouseDown}
               handleChange={handleChange}
               value={rowData.autograde}
               questionType={rowData.question_type}
-              isDragging={startRowIndex !== null}
+              isDragging={startItemId !== null}
             />
           )}
         />
@@ -212,15 +203,15 @@ export const AssignmentExercisesTable = ({
           )}
           style={{ width: "12rem" }}
           bodyStyle={{ padding: 0 }}
-          body={(rowData: Exercise, { rowIndex }) => (
+          body={(rowData: Exercise) => (
             <EditableCellFactory
               fieldName="which_to_grade"
-              rowIndex={rowIndex}
+              itemId={rowData.id}
               handleMouseDown={handleMouseDown}
               handleChange={handleChange}
               value={rowData.which_to_grade}
               questionType={rowData.question_type}
-              isDragging={startRowIndex !== null}
+              isDragging={startItemId !== null}
             />
           )}
         />
@@ -229,25 +220,27 @@ export const AssignmentExercisesTable = ({
           bodyStyle={{ padding: 0 }}
           style={{ width: "8rem" }}
           header={() => <EditInputValueHeader field="points" label="Points" defaultValue={0} />}
-          body={(data: Exercise, { rowIndex }) => (
+          body={(data: Exercise) => (
             <EditableCellFactory
               fieldName="points"
-              rowIndex={rowIndex}
+              itemId={data.id}
               handleMouseDown={handleMouseDown}
               handleChange={handleChange}
               value={data.points}
               questionType={data.question_type}
-              isDragging={startRowIndex !== null}
+              isDragging={startItemId !== null}
             />
           )}
         />
         <Column rowReorder style={{ width: "3rem" }} />
       </DataTable>
       <TableSelectionOverlay
-        startRowIndex={startRowIndex}
+        startItemId={startItemId}
         draggingFieldName={draggingFieldName}
         tableRef={dataTableRef.current!}
         handleMouseUp={handleMouseUp}
+        type="exercises"
+        exercises={assignmentExercises}
       />
     </div>
   );

bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/exercises/AssignmentExercisesList/ExerciseListView.tsx

@@ -15,11 +15,11 @@ interface ExerciseListViewProps {
   setViewMode: ViewModeSetter;
   setResetExerciseForm: (reset: boolean) => void;
   setCurrentEditExercise: SetCurrentEditExercise;
-  startRowIndex: number | null;
+  startItemId: number | null;
   draggingFieldName: DraggingExerciseColumns | null;
-  handleMouseDown: (rowIndex: number, fieldName: DraggingExerciseColumns) => void;
+  handleMouseDown: (itemId: number, fieldName: DraggingExerciseColumns) => void;
   handleMouseUp: MouseUpHandler;
-  handleChange: (rowIndex: number, fieldName: DraggingExerciseColumns, value: any) => void;
+  handleChange: (itemId: number, fieldName: DraggingExerciseColumns, value: any) => void;
 }
 
 export const ExerciseListView = ({
@@ -32,7 +32,7 @@ export const ExerciseListView = ({
   setViewMode,
   setResetExerciseForm,
   setCurrentEditExercise,
-  startRowIndex,
+  startItemId,
   draggingFieldName,
   handleMouseDown,
   handleMouseUp,
@@ -55,7 +55,7 @@ export const ExerciseListView = ({
         globalFilter={globalFilter}
         setCurrentEditExercise={setCurrentEditExercise}
         setViewMode={setViewMode}
-        startRowIndex={startRowIndex}
+        startItemId={startItemId}
         draggingFieldName={draggingFieldName}
         handleMouseDown={handleMouseDown}
         handleMouseUp={handleMouseUp}